/* =======================================================================
 * JetBau — основной таблица стилей
 *
 * Оглавление:
 *   1. Design tokens (:root)
 *   2. Legacy-алиасы токенов (для совместимости со старыми правилами)
 *   3. Reset / base typography
 *   4. Accessibility (focus-visible, prefers-reduced-motion)
 *   5. Вспомогательные layout-классы
 *   (далее — компоненты, секции страниц и медиа-запросы)
 * ======================================================================= */

/* ---- 1. Design tokens ------------------------------------------------- */
:root {
  /* Бренд + семантические цвета */
  --color-primary:        #2c3e50;
  --color-primary-dark:   #1a252f;
  --color-primary-soft:   rgba(44, 62, 80, 0.1);
  --color-primary-strong: rgba(44, 62, 80, 0.2);
  --color-secondary:      #3498db;
  --color-accent:         #e74c3c;
  --color-success:        #27ae60;
  --color-warning:        #ffc107;
  --color-danger:         #e74c3c;

  /* Поверхности и нейтралы */
  --color-bg:             #f8f9fa;
  --color-surface:        #ffffff;
  --color-surface-alt:    #f8f9fa;
  --color-surface-muted:  #ecf0f1;
  --color-white:          #ffffff;
  --color-black:          #000000;

  /* Текст */
  --color-text:           #343a40;
  --color-text-muted:     #6c757d;
  --color-text-soft:      #999999;
  --color-text-dim:       #666666;
  --color-text-invert:    #ffffff;

  /* Границы */
  --color-border:         #e9ecef;
  --color-border-strong:  #ced4da;
  --color-border-soft:    #f1f3f5;

  /* Бренд-оверлей для плиток каталога */
  --color-brand-jb:       rgba(186, 104, 200, 0.25);
  --color-brand-dw:       rgba(255, 160, 0, 0.25);

  /* Тени */
  --shadow-xs:            0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm:            0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-md:            0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg:            0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-xl:            0 20px 30px rgba(0, 0, 0, 0.15);
  --shadow-focus:         0 0 0 3px rgba(52, 152, 219, 0.35);

  /* Spacing */
  --space-2xs:            2px;
  --space-xs:             4px;
  --space-sm:             8px;
  --space-md:             16px;
  --space-lg:             24px;
  --space-xl:             32px;
  --space-2xl:            48px;
  --space-3xl:            64px;

  /* Radius */
  --radius-xs:            3px;
  --radius-sm:            5px;
  --radius-md:            8px;
  --radius-lg:            12px;
  --radius-xl:            20px;
  --radius-pill:          9999px;
  --radius-circle:        50%;

  /* Typography */
  --font-base:            "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-size-xs:         12px;
  --font-size-sm:         14px;
  --font-size-base:       16px;
  --font-size-md:         18px;
  --font-size-lg:         20px;
  --font-size-xl:         24px;
  --font-size-2xl:        32px;
  --font-size-3xl:        40px;
  --line-height-tight:    1.2;
  --line-height-base:     1.6;

  /* Transitions */
  --transition-fast:      150ms ease;
  --transition-base:      250ms ease;
  --transition-slow:      400ms ease;

  /* Layers */
  --z-base:               0;
  --z-dropdown:           100;
  --z-sticky:             500;
  --z-header:             1000;
  --z-overlay:            1500;
  --z-modal:              2000;

  /* Layout */
  --content-max-width:    1200px;
  --sidebar-width:        190px;
  --header-height:        120px;
}

/* ---- 2. Legacy-алиасы для уже написанных правил ---------------------- */
:root {
  --colprim: var(--color-primary);
  --colprid: var(--color-primary-dark);
  --colsec:  var(--color-secondary);
  --colacc:  var(--color-accent);
  --colsuc:  var(--color-success);
  --collgt:  var(--color-bg);
  --colgrl:  var(--color-surface-muted);
  --colgry:  #95a5a6;
  --coldrk:  var(--color-text);

  --shdsml:  var(--shadow-sm);
  --shdmed:  var(--shadow-md);
  --shdlrg:  var(--shadow-lg);

  --spcxs:   var(--space-xs);
  --spcsm:   var(--space-sm);
  --spcmd:   var(--space-md);
  --spclg:   var(--space-lg);
  --spcxl:   var(--space-xl);
  --spcxx:   var(--space-2xl);

  --radsm:   var(--radius-sm);
  --radmd:   var(--radius-sm);
  --radlg:   var(--radius-sm);
}

/* ---- 3. Reset и базовая типографика ---------------------------------- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  font-family: var(--font-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-text);
  background-color: var(--color-bg);
}

body.menu-open {
  overflow: hidden;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: transparent;
  border: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ---- 4. Accessibility ------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

button:focus:not(:focus-visible),
a:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible) {
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- 5. Скрытый контент для скринридеров ---------------------------- */
.visually-hidden,
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.layroot {
  margin-left: 190px;
  min-height: 100vh;
}

.maincn {
  min-height: calc(100vh - 120px);
  background: var(--collgt);
}

.cntwpr {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spcmd);
}

.btnprm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spcmd) var(--spcxl);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--radmd);
  transition: 0.3s;
  background: transparent;
  color: var(--colprim);
  border: 1px solid var(--colprim);
}

.btnprm:hover {
  background: var(--colgrl);
  color: var(--colprid);
  border-color: var(--colprid);
}

.btnscd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spcmd) var(--spcxl);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--radmd);
  transition: 0.3s;
  background: var(--colgrl);
  color: var(--coldrk);
  border: 1px solid var(--colgry);
}

.btnscd:hover {
  background: var(--colgry);
  color: white;
}

.secttl {
  font-size: 32px;
  font-weight: 600;
  margin-bottom: var(--spcxl);
  color: var(--coldrk);
  border-left: 4px solid var(--colprim);
  padding-left: var(--spcmd);
}

.secttl.center {
  text-align: center;
  border-left: none;
  padding-left: 0;
}

.emptst {
  text-align: center;
  color: var(--colgry);
  font-size: 24px;
  margin: var(--spcxx) 0;
}

.msgcnt {
  padding: 0;
  margin: 0;
  border-radius: var(--radmd);
  font-size: 18px;
  text-align: center;
  background: transparent;
  color: var(--color-primary);
  border: none;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: 0.4s;
  transform: translateY(-10px);
}

.msgcnt:not(:empty) {
  padding: var(--spclg);
  margin: var(--spclg) 0;
  max-height: 200px;
  opacity: 1;
  transform: translateY(0);
}

/* ==================== СТИЛИ HEADER.PHP ==================== */
.mnbtgg {
  display: none;
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 1002;
  width: 42px;
  height: 42px;
  padding: 10px 8px;
  border: none;
  border-radius: var(--radsm);
  background: var(--colprim);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  transition: 0.25s;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
}

.mnbtgg:hover {
  background: var(--colprid);
}

.mnbtgg span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--color-white);
  border-radius: 5px;
  transition: 0.25s;
}

.mnbtgg.active span:nth-child(1) {
  transform: rotate(45deg) translate(4px, 4px);
}

.mnbtgg.active span:nth-child(2) {
  opacity: 0;
  transform: translateX(-8px);
}

.mnbtgg.active span:nth-child(3) {
  transform: rotate(-45deg) translate(4px, -4px);
}

.mnover {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: 0.25s;
  z-index: 1000;
}

.mnover.active {
  opacity: 1;
  pointer-events: auto;
}

.hedfix {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 190px;
  background: var(--color-white);
  border-right: 1px solid var(--colgrl);
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
  z-index: 1001;
  display: flex;
  flex-direction: column;
}

.hedcnt {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 25px 20px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.hedlog {
  padding-bottom: 30px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--colgrl);
  text-align: center;
}

.logojb {
  font-size: 36px;
  font-weight: 700;
  color: var(--colprim);
  text-decoration: none;
  padding: 12px 15px;
  border-radius: var(--radmd);
  display: inline-block;
  background: var(--color-white);
  transition: 0.3s;
}

.logojb:hover {
  background: var(--colgrl);
  color: var(--colprid);
  transform: translateY(-1px);
}

.hednav {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hednav a {
  display: flex;
  align-items: center;
  padding: 12px 15px;
  color: var(--coldrk);
  text-decoration: none;
  font-weight: 500;
  font-size: 18px;
  border-radius: var(--radsm);
  transition: 0.2s;
}

.hednav a:hover {
  background: var(--colgrl);
  color: var(--colprim);
}

.kzlmns {
  background: var(--colgrl);
  color: var(--colprim);
  font-weight: 600;
  border-left: 3px solid var(--colprim);
}

.hedaut {
  margin: 20px 0;
  padding: 20px 0;
  border-top: 1px solid var(--colgrl);
  border-bottom: 1px solid var(--colgrl);
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: none;
}

.plokij {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 15px;
  color: var(--coldrk);
  text-decoration: none;
  font-size: 16px;
  border-radius: var(--radsm);
  transition: 0.2s;
}

.plokij:hover {
  background: var(--colgrl);
  color: var(--colprim);
}

.plokij i {
  width: 18px;
  text-align: center;
  font-size: 14px;
  color: var(--colgry);
}

.plokij:hover i {
  color: var(--colprim);
}

.hedlgo {
  margin: 0;
}

.hedaut .plogbt {
  width: 100%;
  border: none;
  background: transparent;
  cursor: pointer;
  font: inherit;
  text-align: left;
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
}

.hedcpy {
  padding-top: 15px;
  margin-top: 10px;
  border-top: 1px solid var(--colgrl);
  color: var(--colgry);
  font-size: 12px;
  text-align: center;
}

@media (max-width: 1024px) {
    .layroot {
        margin-left: 0;
    }

    .hedfix {
        transform: translateX(-100%);
        transition: transform 0.25s ease;
    }

    .hedfix.active {
        transform: translateX(0);
    }

    .mnbtgg {
        display: flex;
    }

    .mnbtgg.active {
        left: calc(85% + 10px);
        background: var(--coldrk);
    }

    .mnover {
        display: block;
    }

    .hedfix {
        width: 85%;
        max-width: 280px;
    }
}

/* ==================== СТИЛИ FOOTER.PHP ==================== */
.ftrcnt {
  background: var(--color-white);
  color: var(--coldrk);
  padding: var(--spcxl) 0 var(--spcxx);
  border-top: 1px solid var(--colgrl);
  box-sizing: border-box;
  width: 100%;
}

.ftrwrp {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spcxl);
  margin-bottom: var(--spcxl);
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spcmd);
}

.ftrbtm {
  padding-top: var(--spclg);
  text-align: center;
  color: var(--colgry);
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--spclg) var(--spcmd) 0;
}

.ftrblk {
  text-align: center;
}

.ftrttl {
  color: var(--coldrk);
  margin-bottom: var(--spclg);
  font-size: 18px;
  text-align: center;
}

.ftrtxt {
  color: var(--coldrk);
  margin-bottom: var(--spclg);
  text-align: center;
}

.ftrsoc {
  display: flex;
  gap: var(--spcsm);
  justify-content: center;
}

.soclnk {
  color: var(--coldrk);
  text-decoration: none;
  transition: color 0.3s;
}

.soclnk:hover {
  color: var(--colprim);
}

.ftrlnk {
  display: flex;
  flex-direction: column;
  gap: var(--spcsm);
  align-items: center;
}

.ftritm {
  color: var(--coldrk);
  text-decoration: none;
  transition: color 0.3s;
  text-align: center;
}

.ftritm:hover {
  color: var(--colprim);
}

.cpyrtx {
  font-size: 14px;
  text-align: center;
}

@media (min-width: 769px) and (max-width: 1024px) {
  .ftrwrp {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spclg) var(--spcxl);
  }
  
  .ftrblk:first-child {
    grid-column: 1 / -1;
    text-align: center;
    max-width: 800px;
    margin: 0 auto var(--spclg);
  }
  
  .ftrsoc {
    justify-content: center;
  }
  
  .soclnk:hover {
    color: var(--colprim);
  }
}

@media (max-width: 768px) {
  .ftrcnt {
    padding: var(--spclg) 0;
    border-top-width: 1px;
  }
  
  .ftrwrp {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spclg) var(--spcmd);
    padding: 0 var(--spcsm);
    margin-bottom: var(--spclg);
  }
  
  .ftrblk {
    text-align: center;
    padding: 0 var(--spcxs);
  }
  
  .ftrblk:first-child {
    grid-column: 1 / -1;
    text-align: center;
    padding: 0 var(--spcsm);
    margin-bottom: var(--spcsm);
  }
  
  .ftrttl {
    font-size: 16px;
    margin-bottom: var(--spcsm);
    position: relative;
    display: inline-block;
  }
  
  .ftrttl::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 2px;
    background-color: var(--colprim);
  }
  
  .ftrtxt {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: var(--spcmd);
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
  }
  
  .ftrsoc {
    justify-content: center;
    gap: var(--spcsm);
    margin-top: var(--spcsm);
    flex-wrap: wrap;
  }
  
  .soclnk {
    padding: 8px 16px;
    background-color: rgba(0, 0, 0, 0.03);
    border-radius: 5px;
    display: inline-block;
    transition: all 0.3s ease;
    font-size: 14px;
    min-width: 120px;
    margin: 2px;
  }
  
  .ftrsoc .soclnk:hover {
    background-color: var(--colprim);
    color: white;
    transform: translateY(-2px);
  }
  
  .ftrlnk {
    gap: 8px;
    align-items: center;
  }
  
  .ftritm {
    padding: 6px 0;
    font-size: 14px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  }
  
  .ftritm:last-child {
    border-bottom: none;
  }
  
  .ftritm:hover {
    color: var(--colprim);
    padding-left: 8px;
  }
  
  .ftrbtm {
    padding: var(--spcmd) var(--spcsm) 0;
    margin-top: var(--spclg);
    border-top: 1px solid rgba(0, 0, 0, 0.1);
  }
  
  .cpyrtx {
    font-size: 12px;
    line-height: 1.4;
  }
}

@media (max-width: 480px) {
  .ftrwrp {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spcmd) var(--spcsm);
    padding: 0 var(--spcxs);
  }
  
  .ftrblk {
    padding: 0 4px;
  }
  
  .ftrblk:first-child {
    padding: 0 var(--spcxs);
  }
  
  .ftrttl {
    font-size: 15px;
    margin-bottom: 10px;
  }
  
  .ftrtxt {
    font-size: 13px;
    line-height: 1.4;
  }
  
  .soclnk {
    min-width: 110px;
    padding: 7px 12px;
    font-size: 13px;
  }
  
  .ftritm {
    font-size: 13px;
    padding: 5px 0;
  }
  
  .cpyrtx {
    font-size: 11px;
  }
}

@media (min-width: 481px) and (max-width: 768px) {
  .ftrwrp {
    gap: var(--spclg) var(--spcmd);
    padding: 0 var(--spcmd);
  }
  
  .ftrblk {
    padding: 0 var(--spcsm);
  }
  
  .ftrblk:first-child {
    padding: 0 var(--spcmd);
  }
  
  .soclnk {
    min-width: 140px;
  }
}

@media (min-width: 1025px) {
  .ftrwrp {
    grid-template-columns: repeat(4, 1fr);
  }
  
  .soclnk:hover {
    color: var(--colprim);
  }
}

/* ==================== СТИЛИ INDEX.PHP ==================== */
.tilsec {
  height: 100vh;
  min-height: 600px;
  width: 100%;
  background: linear-gradient(135deg, var(--color-surface-alt) 0%, #e8f5e9 100%);
  position: relative;
}

.tilgrd {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  height: 100%;
  width: 100%;
  gap: 0;
  padding: 0;
  margin: 0;
}

.tilelk {
  position: relative;
  overflow: hidden;
  display: block;
  text-decoration: none;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  margin: 0;
  padding: 0;
}

.tilelk:hover {
  transform: scale(1.05);
  z-index: 10;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.tilimg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.tilelk:hover .tilimg {
  transform: scale(1.05);
}

.tilimg img,
.tilimg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.tilovr {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--tilclr);
  transition: opacity 0.4s ease, background-color 0.4s ease;
  opacity: 1;
  z-index: 1;
}

.tilelk-jb {
  --tilclr: rgba(186, 104, 200, 0.25);
}

.tilelk-dw {
  --tilclr: rgba(255, 160, 0, 0.25);
}

.tilelk:hover .tilovr {
  opacity: 0.7;
  background-color: rgba(0, 0, 0, 0.4);
}

.tiltxt {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  text-align: center;
  padding: 20px;
  box-sizing: border-box;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.tilelk:hover .tiltxt {
  transform: scale(1.05);
}

.tilttl {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-white);
  line-height: 1.3;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  text-align: center;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
              font-size 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.tilelk:hover .tilttl {
  transform: scale(1.05);
  font-size: 19px;
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

.brnblk {
  grid-column: 2 / span 2;
  grid-row: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
}

.brnwpr {
  display: flex;
  width: 100%;
  height: 100%;
  gap: 0;
}

.brnjb {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: linear-gradient(135deg, #432442, #776ee5);
  color: white;
}

.brndw {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: linear-gradient(135deg, #F5A623, #4B2A0E);
  color: white;
}

.brncnt {
  text-align: center;
}

.brnttl {
  font-size: 60px;
  font-weight: 700;
  margin-bottom: 8px;
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.brntxt {
  font-size: 16px;
  opacity: 0.9;
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.tilemp {
  background: #f0f7f0;
  opacity: 0.3;
  pointer-events: none;
}

.newsec {
  background: white;
  padding: var(--spcxx) var(--spcxl);
  width: 100%;
  border-top: 1px solid var(--colgrl);
  border-bottom: 1px solid var(--colgrl);
}

.prodsld {
  position: relative;
  margin-top: var(--spcxl);
}

.prodsldwpr {
  overflow: hidden;
  border-radius: var(--radlg);
}

.prodsldgrp {
  display: flex;
  transition: transform 0.5s ease;
}

.prodslide {
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spclg);
  padding: var(--spcsm);
}

.prodcrd {
  border: 1px solid var(--colgrl);
  border-radius: var(--radlg);
  overflow: hidden;
  transition: all 0.3s ease;
  background: white;
}

.prodcrd:hover {
  transform: translateY(-4px);
  box-shadow: var(--shdlrg);
  border-color: var(--colprim);
}

.prodimghld {
  position: relative;
  padding-top: 75%;
  background: var(--colgrl);
  overflow: hidden;
}

.prodimg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--spcmd);
}

.prodcnt {
  padding: var(--spclg);
}

.prodttl {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: var(--spcsm);
  color: var(--coldrk);
  line-height: 1.4;
  height: 44px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.prodttl a {
  color: inherit;
  text-decoration: none;
}

.prodttl a:hover {
  color: var(--colprim);
}

.prodbot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--spcmd);
}

.prodprc {
  font-size: 20px;
  font-weight: 700;
  color: var(--colprim);
}

.prodcart {
  padding: 8px 16px;
  background: var(--colprim);
  color: white;
  border: none;
  border-radius: var(--radsm);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.3s;
}

.prodcart:hover {
  background: var(--colprid);
}

.prodsldnav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spclg);
  margin-top: var(--spcxl);
}

.prodsldbtn {
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  font-size: 32px;
  cursor: pointer;
  color: var(--colgry);
  transition: color 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.prodsldbtn:hover {
  color: var(--colprim);
}

.prodslddots {
  display: flex;
  gap: var(--spcsm);
}

.prodslddots .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--colgrl);
  cursor: pointer;
  transition: background 0.3s;
}

.prodslddots .dot.active {
  background: var(--colprim);
}

.servsec {
  background: white;
  padding: var(--spcxx) var(--spcxl);
  width: 100%;
  border-bottom: 1px solid var(--colgrl);
}

.servgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spcxl);
  margin-top: var(--spcxl);
}

.servcrd {
  text-align: center;
  padding: var(--spcxl);
  border: 1px solid var(--colgrl);
  border-radius: var(--radlg);
  transition: all 0.3s;
}

.servcrd:hover {
  transform: translateY(-4px);
  box-shadow: var(--shdlrg);
  border-color: var(--colprim);
}

.servicn {
  font-size: 48px;
  margin-bottom: var(--spclg);
}

.servttl {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: var(--spcmd);
  color: var(--coldrk);
}

.servtxt {
  color: var(--colgry);
  margin-bottom: var(--spcxl);
  line-height: 1.6;
}

.servbtn {
  display: inline-block;
  padding: 12px 24px;
  background: var(--colprim);
  color: white;
  text-decoration: none;
  border-radius: var(--radmd);
  font-weight: 500;
  transition: background 0.3s;
}

.servbtn:hover {
  background: var(--colprid);
}

.certsec {
  background: white;
  padding: var(--spcxx) var(--spcxl);
  width: 100%;
  border-bottom: 1px solid var(--colgrl);
}

.certgrid {
  margin-top: var(--spcxl);
}

.certrow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spclg);
  margin-bottom: var(--spclg);
}

.certcrd {
  border: 1px solid var(--colgrl);
  border-radius: var(--radmd);
  overflow: hidden;
  background: var(--collgt);
}

.certimg {
  width: 100%;
  height: 300px;
  object-fit: contain;
  padding: var(--spcmd);
  background: white;
}

.shopsec {
  background: white;
  padding: var(--spcxx) var(--spcxl);
  width: 100%;
  border-bottom: 1px solid var(--colgrl);
}

.shopgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spcxl);
  margin-top: var(--spcxl);
}

.shopcrd {
  border: 1px solid var(--colgrl);
  border-radius: var(--radlg);
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  background: white;
  position: relative;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.shopcrd:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.shopimg {
  width: 100%;
  height: 135%;
  object-fit: contain;
  padding: var(--spcxl);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.shopcrd:hover .shopimg {
  transform: scale(1.05);
}

@media (max-width: 768px) {
    .tilsec {
        height: auto;
        min-height: auto;
        padding: 0;
    }
    
    .tilgrd {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(8, 50vw);
        gap: 0;
        height: auto;
        min-height: calc(50vw * 8);
    }
    
    .tilgrd > a:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
    }
    
    .tilgrd > a:nth-child(2) {
        grid-column: 1;
        grid-row: 3;
    }
    
    .tilgrd > a:nth-child(3) {
        grid-column: 2;
        grid-row: 1;
    }
    
    .tilgrd > a:nth-child(4) {
        grid-column: 2;
        grid-row: 3;
    }
    
    .tilgrd > a:nth-child(5) {
        grid-column: 1;
        grid-row: 4;
    }
    
    .tilgrd > a:nth-child(6) {
        grid-column: 2;
        grid-row: 4;
    }
    
    .brnblk {
        grid-column: 1 / span 2;
        grid-row: 2;
        height: 50vw;
    }
    
    .tilgrd > a:nth-child(8) {
        grid-column: 1;
        grid-row: 5;
    }
    
    .tilgrd > a:nth-child(9) {
        grid-column: 1;
        grid-row: 6;
    }
    
    .tilgrd > a:nth-child(10) {
        grid-column: 2;
        grid-row: 5;
    }
    
    .tilgrd > a:nth-child(11) {
        grid-column: 2;
        grid-row: 6;
    }
    
    .tilgrd > a:nth-child(12) {
        grid-column: 1;
        grid-row: 7;
    }
    
    .tilgrd > a:nth-child(13) {
        grid-column: 1;
        grid-row: 8;
    }
    
    .tilgrd > a:nth-child(14) {
        grid-column: 2;
        grid-row: 7;
    }
    
    .tilgrd > a:nth-child(15) {
        grid-column: 2;
        grid-row: 8;
    }
    
    .tilgrd > a:nth-child(16) {
        display: none;
    }
    
    .brnwpr {
        flex-direction: row;
        width: 100%;
        height: 100%;
    }
    
    .brnjb {
        height: 100%;
        background: linear-gradient(135deg, #432442, #776ee5);
    }
    
    .brndw {
        height: 100%;
        background: linear-gradient(135deg, #F5A623, #4B2A0E);
    }
    
    .brnttl {
        font-size: 52px;
        margin-bottom: 4px;
    }
    
    .brntxt {
        font-size: 11px;
    }
    
    .tilelk {
        border: none;
    }
    
    .tilttl {
        font-size: 14px;
        padding: 10px;
    }
    
    .tilelk:hover .tilttl {
        font-size: 15px;
    }
    
    .tilelk:active {
        transform: scale(0.98);
    }
    
    .newsec {
        padding: 30px 10px;
    }
    
    .prodslide {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        padding: 10px 5px;
    }
    
    .prodcrd {
        margin-bottom: 0;
    }
    
    .prodttl {
        font-size: 14px;
        height: 38px;
    }
    
    .prodprc {
        font-size: 18px;
    }
    
    .prodcart {
        padding: 6px 12px;
        font-size: 14px;
    }
    
    .servsec {
        padding: 30px 15px;
    }
    
    .servgrid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .servcrd {
        padding: 20px 15px;
    }
    
    .servttl {
        font-size: 18px;
    }
    
    .servtxt {
        font-size: 14px;
    }
    
    .certsec {
        padding: 30px 10px;
    }
    
    .certrow {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-bottom: 10px;
    }
    
    .certimg {
        height: 180px;
        padding: 10px;
    }
    
    .shopsec {
        padding: 30px 10px;
    }
    
    .shopgrid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    
    .shopcrd {
        height: 120px;
    }
    
    .shopimg {
        padding: 10px;
        height: 120%;
    }
    
    .secttl {
        font-size: 22px;
        margin-bottom: 20px;
        padding: 0 10px;
    }
    
    .center {
        text-align: center;
    }
}

@media (max-width: 480px) {
    .tilgrd {
        grid-template-rows: repeat(8, 50vw);
        min-height: calc(50vw * 8);
    }
    
    .brnblk {
        height: 50vw;
    }
    
    .brnttl {
        font-size: 52px;
        margin-bottom: 3px;
    }
    
    .brntxt {
        font-size: 10px;
    }
    
    .tilttl {
        font-size: 13px;
        padding: 8px;
    }
    
    .tilelk:hover .tilttl {
        font-size: 14px;
    }
    
    .newsec,
    .servsec,
    .certsec,
    .shopsec {
        padding: 25px 8px;
    }
    
    .prodslide {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        padding: 8px 4px;
    }
    
    .prodttl {
        font-size: 13px;
        height: 36px;
    }
    
    .certrow {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    
    .certimg {
        height: 150px;
        padding: 8px;
    }
    
    .shopgrid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    
    .shopcrd {
        height: 100px;
    }
    
    @media (max-width: 360px) {
        .prodslide {
            grid-template-columns: 1fr;
        }
        
        .certrow {
            grid-template-columns: 1fr;
        }
        
        .shopgrid {
            grid-template-columns: 1fr;
        }
    }
}

/* ==================== СТИЛИ CATALOG.PHP ==================== */
.catmcn {
    padding: var(--spcxl) 0 var(--spcxx);
    min-height: calc(100vh - 120px);
    background: white;
}

.brdcrm {
    display: flex;
    align-items: center;
    gap: var(--spcsm);
    margin-bottom: var(--spclg);
    font-size: 14px;
    flex-wrap: wrap;
}

.brdlkp {
    color: var(--colgry);
    text-decoration: none;
    transition: color 0.3s;
}

.brdlkp:hover {
    color: var(--colprim);
}

.brdsep {
    color: var(--colgry);
}

.brdcur {
    color: var(--coldrk);
    font-weight: 500;
}

.pagetl {
    font-size: 36px;
    font-weight: 600;
    margin-bottom: var(--spcxl);
    color: var(--coldrk);
    border-bottom: 1px solid var(--colgrl);
    padding-bottom: var(--spcmd);
}

.catctr {
    display: flex;
    align-items: center;
    gap: var(--spcmd);
    flex-wrap: wrap;
    margin-bottom: var(--spcxl);
    padding: var(--spclg);
    background: var(--color-white);
    border-radius: var(--radlg);
    border: 1px solid var(--colgrl);
    box-shadow: var(--shdsml);
}

.srtopt {
    display: flex;
    gap: var(--spcsm);
    flex-wrap: wrap;
}

.srtbtn {
    padding: 10px 20px;
    background: white;
    border: 1px solid var(--colgrl);
    border-radius: var(--radmd);
    font-size: 14px;
    font-weight: 500;
    color: var(--coldrk);
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s;
    transition: all 0.3s;
}

.srtbtn:hover {
    background: var(--colgrl);
    border-color: var(--colprim);
}

.srtbtn.active {
    background: var(--colprim);
    color: white;
    border-color: var(--colprim);
}

.catflt {
    display: flex;
    align-items: center;
    gap: var(--spcsm);
    position: relative;
}

.catfls {
    padding: 10px 36px 10px 15px;
    border: 1px solid var(--colgrl);
    border-radius: var(--radmd);
    font-size: 14px;
    font-family: inherit;
    color: var(--coldrk);
    background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2395a5a6' d='M6 8L1 3h10z'/%3E%3C/svg%3E") no-repeat right 12px center;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    min-width: 180px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.catfls:hover {
    border-color: var(--colprim);
}

.catfls:focus {
    outline: none;
    border-color: var(--colprim);
    box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.flticn {
    position: absolute;
    right: 12px;
    color: var(--colgry);
    pointer-events: none;
}

.prodgrd {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--spclg);
    margin-top: var(--spcxl);
}

.prodcrd {
    border: 1px solid var(--colgrl);
    border-radius: var(--radlg);
    overflow: hidden;
    transition: all 0.3s ease;
    background: white;
    position: relative;
}

.prodcrd:hover {
    transform: translateY(-4px);
    box-shadow: var(--shdlrg);
    border-color: var(--colprim);
}

.prodimghld {
    position: relative;
    padding-top: 75%;
    background: var(--colgrl);
    overflow: hidden;
}

.prodimg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: var(--spcmd);
}

.prodlow {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--colacc);
    color: white;
    padding: 4px 8px;
    border-radius: var(--radsm);
    font-size: 12px;
    font-weight: 500;
}

.prodcnt {
    padding: var(--spclg);
}

.prodttl {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: var(--spcsm);
    color: var(--coldrk);
    line-height: 1.4;
    height: 44px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.prodttl a {
    color: inherit;
    text-decoration: none;
}

.prodttl a:hover {
    color: var(--colprim);
}

.prodinf {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spcmd);
    font-size: 13px;
    color: var(--colgry);
}

.prodcat {
    padding: 3px 8px;
    background: var(--colgrl);
    border-radius: var(--radsm);
}

.prodqnt {
    color: var(--colsuc);
    font-weight: 500;
}

.prodbot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--spcmd);
}

.prodprc {
    font-size: 20px;
    font-weight: 700;
    color: var(--colprim);
}

.cartad {
    padding: 8px 16px;
    background: var(--colprim);
    color: white;
    border: none;
    border-radius: var(--radmd);
    font-family: inherit;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
}

.prodcrtf {
    display: contents;
}

.cartad:hover {
    background: var(--colprid);
}

.cartad.dsbld {
    background: var(--colgry);
    cursor: not-allowed;
    opacity: 0.7;
}

.cartad.dsbld:hover {
    background: var(--colgry);
}

.admctr {
    display: flex;
    gap: var(--spcsm);
    padding: var(--spcmd);
    border-top: 1px solid var(--colgrl);
    background: var(--collgt);
}

.edtlnk, .dltlnk {
    flex: 1;
    padding: 8px 12px;
    text-align: center;
    text-decoration: none;
    font-size: 13px;
    border-radius: var(--radsm);
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.edtlnk {
    background: var(--colprim);
    color: white;
}

.edtlnk:hover {
    background: var(--colprid);
    transform: translateY(-1px);
}

.dltfrm {
    flex: 1;
    display: flex;
}

.dltlnk {
    flex: 1;
    background: var(--colsec);
    color: white;
    border: none;
    cursor: pointer;
    font: inherit;
}

.dltlnk:hover {
    background: #2980b9;
    transform: translateY(-1px);
}

.edtlnk i, .dltlnk i {
    font-size: 12px;
}

.noprod {
    grid-column: 1 / -1;
    text-align: center;
    padding: var(--spcxx) 0;
}

.bgpwr {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spcmd);
    padding: var(--spcxl) 0;
}

.bgpbt {
    display: inline-flex;
    align-items: center;
    padding: 10px 20px;
    background: var(--colprim);
    color: var(--color-white);
    text-decoration: none;
    border-radius: var(--radmd);
    font-size: 14px;
    transition: 0.2s;
}

.bgpbt:hover {
    background: var(--colprid);
}

.bgpds {
    opacity: 0.4;
    pointer-events: none;
}

.bgptt {
    font-size: 14px;
    color: var(--colgry);
}

.noprtt {
    color: var(--colgry);
    font-size: 24px;
    font-weight: 400;
}

@media (max-width: 1024px) {
    .catctr {
        flex-direction: column;
        gap: var(--spclg);
        align-items: stretch;
    }
    
    .srtopt {
        width: 100%;
        overflow-x: auto;
        padding-bottom: 8px;
        justify-content: flex-start;
        flex-wrap: nowrap;
        scrollbar-width: thin;
    }
    
    .srtopt::-webkit-scrollbar {
        height: 4px;
    }
    
    .srtopt::-webkit-scrollbar-track {
        background: var(--colgrl);
    }
    
    .srtopt::-webkit-scrollbar-thumb {
        background: var(--colgry);
        border-radius: var(--radsm);
    }
    
    .srtbtn {
        flex-shrink: 0;
        white-space: nowrap;
    }
    
    .catflt {
        width: 100%;
    }
    
    .catfls {
        width: 100%;
        min-width: auto;
    }
    
    .prodgrd {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: var(--spcmd);
    }
    
    .pagetl {
        font-size: 30px;
        margin-bottom: var(--spclg);
    }
}

@media (max-width: 768px) {
    .catmcn {
        padding: var(--spclg) 0 var(--spcxl);
    }
    
    .pagetl {
        font-size: 26px;
        padding-bottom: var(--spcsm);
        margin-bottom: var(--spcmd);
    }
    
    .brdcrm {
        font-size: 13px;
        margin-bottom: var(--spcmd);
    }
    
    .catctr {
        padding: var(--spcmd);
        margin-bottom: var(--spclg);
        border-radius: var(--radmd);
    }
    
    .srtopt {
        gap: 6px;
    }
    
    .srtbtn {
        padding: 8px 14px;
        font-size: 13px;
    }
    
    .catfls {
        padding: 10px 35px 10px 12px;
        font-size: 13px;
    }
    
    .flticn {
        right: 10px;
    }
    
    .prodgrd {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        margin-top: var(--spclg);
    }
    
    .prodcrd {
        border-radius: var(--radmd);
    }
    
    .prodimghld {
        padding-top: 70%;
    }
    
    .prodimg {
        padding: var(--spcsm);
    }
    
    .prodlow {
        top: 6px;
        right: 6px;
        font-size: 10px;
        padding: 3px 6px;
    }
    
    .prodcnt {
        padding: var(--spcsm);
    }
    
    .prodttl {
        font-size: 14px;
        height: 38px;
        margin-bottom: 6px;
    }
    
    .prodinf {
        font-size: 12px;
        margin-bottom: var(--spcsm);
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    
    .prodcat {
        padding: 2px 6px;
        font-size: 11px;
    }
    
    .prodqnt {
        font-size: 12px;
    }
    
    .prodbot {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        margin-top: var(--spcsm);
    }
    
    .prodprc {
        font-size: 18px;
    }
    
    .cartad {
        width: 100%;
        justify-content: center;
        padding: 8px 12px;
        font-size: 13px;
    }
    
    .admctr {
        flex-direction: column;
        gap: 8px;
        padding: var(--spcsm);
    }
    
    .edtlnk, .dltlnk {
        padding: 8px 10px;
        font-size: 12px;
    }
    
    .noprod {
        padding: var(--spcxl) 0;
    }
    
    .noprtt {
        font-size: 20px;
    }
}

@media (max-width: 480px) {
    .prodgrd {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    
    .pagetl {
        font-size: 24px;
    }
    
    .catctr {
        padding: var(--spcsm);
    }
    
    .srtbtn {
        padding: 7px 12px;
        font-size: 12px;
    }
    
    .prodttl {
        font-size: 13px;
        height: 36px;
        -webkit-line-clamp: 2;
    }
    
    .prodprc {
        font-size: 16px;
    }
    
    .cartad {
        font-size: 12px;
        padding: 7px 10px;
    }
    
    @media (max-width: 360px) {
        .prodgrd {
            grid-template-columns: 1fr;
            gap: var(--spcmd);
        }
        
        .prodttl {
            height: auto;
            -webkit-line-clamp: 3;
        }
        
        .prodbot {
            flex-direction: row;
            align-items: center;
        }
        
        .cartad {
            width: auto;
        }
    }
}

@media (max-height: 500px) and (orientation: landscape) {
    .prodgrd {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spcsm);
    }
    
    .prodttl {
        height: 32px;
        -webkit-line-clamp: 1;
    }
    
    .prodbot {
        flex-direction: row;
    }
    
    .cartad {
        width: auto;
    }
}

/* ==================== СТИЛИ PRODUCT.PHP ==================== */
.prdpcn {
    padding: var(--spcxl) 0;
    min-height: calc(100vh - 120px);
    background: white;
}

.prdinf {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spcxl);
    margin-top: var(--spclg);
    padding-bottom: var(--spcxl);
    border-bottom: 1px solid var(--colgrl);
}

.prdimgb {
    position: relative;
    background: var(--collgt);
    border-radius: var(--radlg);
    padding: var(--spclg);
    border: 1px solid var(--colgrl);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
}

.prdimgm {
    width: 60%;
    max-width: 400px;
    height: auto;
    object-fit: contain;
}

.prdlow {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--colacc);
    color: white;
    padding: 4px 8px;
    border-radius: var(--radsm);
    font-size: 12px;
    font-weight: 600;
    z-index: 2;
}

.prdctn {
    display: flex;
    flex-direction: column;
    gap: var(--spclg);
}

.prdttl {
    font-size: 24px;
    font-weight: 600;
    color: var(--coldrk);
    line-height: 1.3;
    margin-bottom: 0;
}

.prdmet {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spcsm);
    padding: var(--spcmd);
    background: var(--collgt);
    border-radius: var(--radmd);
    border: 1px solid var(--colgrl);
}

.metitm {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.metlab {
    font-weight: 500;
    color: var(--colgry);
    font-size: 13px;
}

.metval {
    font-weight: 600;
    color: var(--coldrk);
    font-size: 14px;
}

.metval.instck {
    color: var(--colsuc);
}

.metval.outstk {
    color: var(--colacc);
}

.prdesc {
    padding: var(--spcmd);
    background: white;
    border-radius: var(--radmd);
    border: 1px solid var(--colgrl);
}

.decttl {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: var(--spcsm);
    color: var(--coldrk);
}

.dectxt {
    font-size: 14px;
    line-height: 1.5;
    color: var(--coldrk);
}

.prdchr {
    padding: var(--spcmd);
    background: white;
    border-radius: var(--radmd);
    border: 1px solid var(--colgrl);
}

.chrttl {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: var(--spcsm);
    color: var(--coldrk);
}

.chrtbl {
    display: grid;
    gap: 8px;
}

.chrrow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.chrrow:last-child {
    border-bottom: none;
}

.chrlab {
    font-weight: 500;
    color: var(--colgry);
    font-size: 13px;
}

.chrval {
    font-weight: 600;
    color: var(--coldrk);
    font-size: 13px;
}

.prdprc {
    padding: var(--spcmd);
    background: linear-gradient(135deg, var(--collgt), #f0f4f8);
    border-radius: var(--radmd);
    border: 1px solid var(--colgrl);
}

.prclab {
    font-size: 13px;
    color: var(--colgry);
    margin-bottom: 4px;
    text-transform: uppercase;
}

.prcval {
    font-size: 28px;
    font-weight: 700;
    color: var(--colprim);
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.prccur {
    font-size: 18px;
    color: var(--colgry);
    font-weight: 400;
}

.prdact {
    display: flex;
    flex-direction: column;
    gap: var(--spcsm);
}

.pradct {
    padding: 14px 24px;
    background: var(--colprim);
    color: white;
    border: none;
    border-radius: var(--radmd);
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    text-align: center;
}

.pradct:hover {
    background: var(--colprid);
    transform: translateY(-1px);
}

.pradct.dsbld {
    background: var(--colgry);
    cursor: not-allowed;
    opacity: 0.7;
}

.pradct.dsbld:hover {
    background: var(--colgry);
    transform: none;
}

.pradmn {
    display: flex;
    gap: var(--spcsm);
    padding-top: var(--spcmd);
    border-top: 1px solid var(--colgrl);
    margin-top: var(--spcsm);
}

.predit, .prdelt {
    flex: 1;
    padding: 10px 16px;
    border-radius: var(--radsm);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    text-align: center;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.predit {
    background: var(--colprim);
    color: white;
}

.predit:hover {
    background: var(--colprid);
}

.prdelt {
    background: var(--colsec);
    color: white;
    border: none;
    cursor: pointer;
    font: inherit;
}

.prdelt:hover {
    background: #2980b9;
}

.prdrev {
    margin-top: var(--spcxl);
}

.revttl {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: var(--spclg);
    color: var(--coldrk);
}

.revlst {
    display: flex;
    flex-direction: column;
    gap: var(--spcmd);
    margin-bottom: var(--spcxl);
}

.revitm {
    padding: var(--spcmd);
    border: 1px solid var(--colgrl);
    border-radius: var(--radmd);
    background: var(--collgt);
}

.revhdr {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spcsm);
}

.revusr {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.revuna {
    font-weight: 600;
    color: var(--coldrk);
    font-size: 14px;
}

.revdat {
    font-size: 12px;
    color: var(--colgry);
}

.revrtg {
    color: #ffc107;
    font-size: 14px;
}

.revtxt {
    line-height: 1.5;
    color: var(--coldrk);
    font-size: 14px;
}

.revfrm {
    padding: var(--spclg);
    background: var(--collgt);
    border-radius: var(--radmd);
    border: 1px solid var(--colgrl);
}

.frmttl {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: var(--spcmd);
    color: var(--coldrk);
}

.revfmt {
    display: flex;
    flex-direction: column;
    gap: var(--spcmd);
}

.frmrtg {
    display: flex;
    align-items: center;
    gap: var(--spcsm);
    font-weight: 500;
    color: var(--coldrk);
    font-size: 14px;
}

.strsel {
    display: flex;
    gap: 4px;
    cursor: pointer;
}

.strsel i {
    color: #ffc107;
    font-size: 18px;
    transition: color 0.3s;
}

.strsel i:hover {
    color: #ff9800;
}

.frmrow {
    width: 100%;
}

.frmtxa {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--colgrl);
    border-radius: var(--radmd);
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
    transition: border-color 0.3s;
}

.frmtxa:focus {
    outline: none;
    border-color: var(--colprim);
}

.frmbtn {
    padding: 12px 24px;
    background: var(--colprim);
    color: white;
    border: none;
    border-radius: var(--radmd);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    align-self: flex-start;
}

.frmbtn:hover {
    background: var(--colprid);
}

@media (max-width: 992px) {
    .prdinf {
        grid-template-columns: 1fr;
        gap: var(--spclg);
    }
    
    .prdimgb {
        min-height: 300px;
    }
}

@media (max-width: 768px) {
    .prdmet {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .prdttl {
        font-size: 22px;
    }
    
    .prcval {
        font-size: 24px;
    }
}

@media (max-width: 480px) {
    .prdmet {
        grid-template-columns: 1fr;
    }
    
    .prdttl {
        font-size: 20px;
    }
    
    .prcval {
        font-size: 22px;
    }
    
    .pradct {
        padding: 12px 20px;
        font-size: 14px;
    }
    
    .predit, .prdelt {
        padding: 8px 12px;
        font-size: 12px;
    }
}

/* ==================== СТИЛИ ABOUT.PHP ==================== */
.zlwqyb {
    padding: 40px 0;
    background: var(--color-white);
}

.rhnjfx {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.xckhjm {
    margin-bottom: 30px;
    font-size: 14px;
}

.vfprgn {
    color: var(--color-primary);
    text-decoration: none;
}

.vfprgn:hover {
    color: #0066cc;
    text-decoration: underline;
}

.mbtyhk {
    margin: 0 10px;
    color: var(--color-text-soft);
}

.kpfhdc {
    color: var(--color-text-dim);
    font-weight: 500;
}

.dgwqvz {
    font-size: 42px;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0 0 30px 0;
    text-align: center;
    line-height: 1.2;
}

.dgwqvz strong {
    font-weight: 800;
    color: var(--color-primary-dark);
    display: inline-block;
}

.qslmbc {
    padding: 0 0 80px 0;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.hptxrw {
    font-size: 18px;
    line-height: 1.7;
    color: var(--color-text);
    margin: 0;
    font-weight: 400;
    text-align: center;
}

.gzvfkd {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    background: var(--color-surface-alt);
}

.ybmtrn:nth-of-type(1) {
    grid-column: 1;
    padding: 60px 40px;
    background: var(--color-white);
    border-right: 1px solid var(--color-border);
}

.ybmtrn:nth-of-type(2) {
    grid-column: 2;
    padding: 60px 40px;
    background: var(--color-white);
}

.jsfdhp {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-primary-dark);
    margin: 0 0 30px 0;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--color-primary);
    text-transform: uppercase;
    text-align: left;
    line-height: 1.3;
}

.kxvmzb {
    margin-top: 0;
}

.lqcpgj {
    margin-bottom: 0;
    padding: 0;
}

.lqcpgj:last-child {
    margin-bottom: 0;
}

.nxrbwh {
    display: none;
}

.dwvhfs {
    padding: 25px 0;
    border-bottom: 1px solid #f1f3f5;
}

.lqcpgj:last-child .dwvhfs {
    border-bottom: none;
    padding-bottom: 0;
}

.gpmcrt {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-primary-dark);
    margin: 0 0 8px 0;
    line-height: 1.4;
}

.sfqtyl {
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-text-muted);
    margin: 0;
    text-align: left;
}

.sxpkfj {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: 0;
}

.pfqkjb {
    padding: 25px 0;
    border-bottom: 1px solid #f1f3f5;
}

.pfqkjb:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.tdxzlc {
    display: none;
}

.whqygl {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-primary-dark);
    margin: 0 0 8px 0;
    line-height: 1.4;
}

.rmbvzf {
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-text-muted);
    margin: 0;
    text-align: left;
}

.ybmtrn:nth-of-type(3) {
    grid-column: 1 / -1;
    padding: 60px 40px;
    background: var(--color-primary);
    color: white;
    border-top: 1px solid var(--color-border);
}

.ybmtrn:nth-of-type(3) .jsfdhp {
    color: white;
    border-bottom-color: rgba(255,255,255,0.3);
    text-align: center;
    margin-bottom: 30px;
}

.ybmtrn:nth-of-type(3) .kxvmzb > p {
    color: rgba(255,255,255,0.8);
    text-align: center;
    max-width: 600px;
    margin: 0 auto 30px auto;
    font-size: 16px;
    line-height: 1.6;
}

.czpmyn {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
}

.bhqtzl {
    background: rgba(255,255,255,0.1);
    padding: 20px;
    border-radius: 5px;
    font-size: 14px;
    color: white;
    text-align: center;
    line-height: 1.4;
    margin: 0;
}

.ybmtrn:nth-of-type(4) {
    grid-column: 1 / -1;
    padding: 60px 40px;
    background: var(--color-white);
    border-top: 1px solid var(--color-border);
    text-align: center;
}

.ybmtrn:nth-of-type(4) .jsfdhp {
    border-bottom: none;
    margin-bottom: 20px;
    text-align: center;
}

.ybmtrn:nth-of-type(4) .kxvmzb > p {
    color: var(--color-text-muted);
    margin: 0 auto 30px auto;
    font-size: 16px;
    line-height: 1.6;
    text-align: center;
    max-width: 600px;
}

.mzgvrb {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 900px;
    margin: 0 auto;
}

.mzgvrc {
    padding: 20px 15px;
    background: var(--color-white);
    border: 1px solid var(--color-primary);
    font-size: 14px;
    color: var(--color-primary);
    font-weight: 600;
    border-radius: 5px;
    text-align: center;
    line-height: 1.4;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    text-decoration: none;
    display: block;
    position: relative;
    overflow: hidden;
}

.mzgvrc:hover {
    background: var(--color-primary);
    color: white;
    transform: translateY(-4px);
    box-shadow: 0 6px 16px var(--color-primary-strong);
}

.mzgvrc:active {
    transform: translateY(-2px);
    transition: all 0.1s ease;
}

.qhgzlx {
    grid-column: 1 / -1;
    padding: 80px 40px;
    background: var(--color-primary);
    color: white;
    text-align: center;
}

.qhgzlx .jsfdhp {
    color: white;
    border-bottom-color: rgba(255,255,255,0.3);
    margin: 0 auto 20px auto;
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    max-width: none;
}

.fdgvqk {
    font-size: 16px;
    max-width: 600px;
    margin: 0 auto 40px auto;
    color: rgba(255,255,255,0.8);
    line-height: 1.6;
    text-align: center;
}

.zxmvny {
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: center;
}

.vryjsl, .bnftmj {
    padding: 16px 40px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 5px;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.4;
    vertical-align: middle;
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateY(0);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.vryjsl {
    background: var(--color-white);
    color: var(--color-primary);
    border: 1px solid var(--color-white);
    min-width: 180px;
}

.vryjsl:hover {
    background: transparent;
    color: var(--color-white);
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 8px 20px rgba(255, 255, 255, 0.2);
}

.vryjsl:active {
    transform: translateY(-2px) scale(1.02);
    transition: all 0.1s ease;
}

.vryjsl::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.1);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.vryjsl:hover::after {
    opacity: 1;
}

.bnftmj {
    background: transparent;
    color: var(--color-white);
    border: 1px solid rgba(255, 255, 255, 0.6);
    min-width: 180px;
}

.bnftmj:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--color-white);
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(255, 255, 255, 0.15);
}

.bnftmj:active {
    transform: translateY(-2px);
    transition: all 0.1s ease;
}

@keyframes buttonPulse {
    0% {
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    50% {
        box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2);
    }
    100% {
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
}

.vryjsl {
    animation: buttonPulse 3s infinite;
}

@media (max-width: 992px) {
    .gzvfkd {
        grid-template-columns: 1fr;
    }
    
    .ybmtrn:nth-of-type(1),
    .ybmtrn:nth-of-type(2) {
        grid-column: 1;
        border-right: none;
        border-bottom: 1px solid var(--color-border);
        padding: 50px 40px;
    }
    
    .czpmyn {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .mzgvrb {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    
    .mzgvrc {
        padding: 18px 12px;
        font-size: 13px;
    }
}

@media (max-width: 768px) {
    .zlwqyb {
        padding: 30px 0;
    }
    
    .rhnjfx {
        padding: 0 20px;
    }
    
    .dgwqvz {
        font-size: 36px;
        padding: 0;
    }
    
    .qslmbc {
        padding: 0 0 60px 0;
    }
    
    .hptxrw {
        font-size: 17px;
    }
    
    .ybmtrn {
        padding: 40px 20px;
    }
    
    .ybmtrn:nth-of-type(1),
    .ybmtrn:nth-of-type(2) {
        padding: 40px 20px;
    }
    
    .jsfdhp {
        font-size: 18px;
        margin-bottom: 25px;
    }
    
    .czpmyn {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    
    .bhqtzl {
        padding: 18px 15px;
        font-size: 13px;
    }
    
    .qhgzlx .jsfdhp {
        font-size: 22px;
    }
    
    .zxmvny {
        flex-direction: column;
        gap: 15px;
    }
    
    .vryjsl, .bnftmj {
        width: 100%;
        max-width: 300px;
        padding: 16px 30px;
        font-size: 14px;
    }
    
    .vryjsl {
        animation: none;
    }
    
    .mzgvrb {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    
    .mzgvrc {
        padding: 16px 10px;
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .zlwqyb {
        padding: 20px 0;
    }
    
    .rhnjfx {
        padding: 0 15px;
    }
    
    .dgwqvz {
        font-size: 28px;
        line-height: 1.3;
    }
    
    .jsfdhp {
        font-size: 16px;
        line-height: 1.4;
    }
    
    .czpmyn {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .mzgvrb {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .mzgvrc {
        padding: 18px 15px;
        font-size: 14px;
    }
    
    .gpmcrt, .whqygl {
        font-size: 15px;
        line-height: 1.4;
    }
    
    .sfqtyl, .rmbvzf {
        font-size: 13px;
        line-height: 1.5;
    }
    
    .dwvhfs, .pfqkjb {
        padding: 20px 0;
    }
    
    .qhgzlx {
        padding: 60px 20px;
    }
    
    .vryjsl, .bnftmj {
        min-width: auto;
        padding: 14px 25px;
    }
}

/* ==================== СТИЛИ BLOG.PHP ==================== */
.pktrxf {
    padding: 40px 0;
    background: var(--color-white);
}

.vqczhf {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
    box-sizing: border-box;
}

.lcyzrb {
    margin-bottom: 30px;
    font-size: 14px;
}

.hmszqk {
    color: var(--color-primary);
    text-decoration: none;
}

.hmszqk:hover {
    color: #0066cc;
    text-decoration: underline;
}

.dpynrj {
    margin: 0 5px;
    color: var(--color-text-soft);
}

.tfgyzh {
    color: var(--color-text-dim);
    font-weight: 500;
}

.xbldgw {
    color: var(--color-primary);
    font-size: 32px;
    margin: 0 0 10px 0;
    font-weight: 700;
    text-align: center;
}

.kpmvjz {
    font-size: 18px;
    color: var(--color-text-dim);
    text-align: center;
    margin-bottom: 40px;
}

.sygzmq {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 40px;
}

@media (max-width: 992px) {
    .sygzmq {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .sdzwft {
        order: -1;
    }
}

.wpfbtl {
    background: white;
    padding: 30px;
    border-radius: 5px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

@media (max-width: 768px) {
    .wpfbtl {
        padding: 20px;
    }
}

.qckghv {
    display: flex;
    gap: 10px;
    margin-bottom: 30px;
    flex-wrap: wrap;
    overflow-x: auto;
    padding-bottom: 10px;
}

@media (max-width: 768px) {
    .qckghv {
        margin-bottom: 20px;
    }
}

.rxnvsp {
    padding: 10px 20px;
    background: white;
    border: 1px solid var(--colgrl);
    border-radius: 5px;
    font-size: 14px;
    font-weight: 500;
    color: var(--coldrk);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
    display: inline-block;
}

.rxnvsp:hover {
    border-color: var(--colprim);
    color: var(--colprim);
    background: var(--colgrl);
}

.rxnvsp.bxkcdy {
    background: var(--colprim);
    color: white;
    border-color: var(--colprim);
}

.jhmzvp {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
    margin-bottom: 40px;
}

@media (max-width: 768px) {
    .jhmzvp {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-bottom: 30px;
    }
}

.lqgpwd {
    background: white;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s;
    border: 1px solid var(--color-border);
}

@media (max-width: 768px) {
    .lqgpwd {
        border-radius: 5px;
    }
}

.lqgpwd:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    border-color: var(--color-primary);
}

@media (max-width: 768px) {
    .lqgpwd:hover {
        transform: translateY(-3px);
    }
}

.bwnsvy {
    height: 200px;
    background: linear-gradient(135deg, #34495e 0%, var(--color-primary) 100%);
    position: relative;
}

@media (max-width: 768px) {
    .bwnsvy {
        height: 180px;
    }
}

@media (max-width: 480px) {
    .bwnsvy {
        height: 160px;
    }
}

.dmzjtf {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hkfqxl {
    position: absolute;
    top: 15px;
    left: 15px;
    background: rgba(255,255,255,0.9);
    padding: 5px 15px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-primary);
}

.rypnfc {
    padding: 25px;
}

@media (max-width: 768px) {
    .rypnfc {
        padding: 20px;
    }
}

.tjkwqh {
    font-size: 20px;
    margin: 0 0 15px 0;
    line-height: 1.4;
}

@media (max-width: 768px) {
    .tjkwqh {
        font-size: 18px;
        margin-bottom: 12px;
    }
}

.tjkwqh a {
    color: var(--color-primary);
    text-decoration: none;
}

.tjkwqh a:hover {
    color: #0066cc;
}

.xgvbfl {
    font-size: 15px;
    line-height: 1.6;
    color: var(--color-text-dim);
    margin: 0 0 20px 0;
}

@media (max-width: 768px) {
    .xgvbfl {
        font-size: 14px;
        margin-bottom: 15px;
    }
}

.zmwhgs {
    display: flex;
    justify-content: space-between;
    color: var(--color-text-soft);
    font-size: 14px;
    border-top: 1px solid var(--color-border);
    padding-top: 15px;
    flex-wrap: wrap;
    gap: 10px;
}

@media (max-width: 480px) {
    .zmwhgs {
        flex-direction: column;
        gap: 5px;
    }
}

.bfkvsz {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding: 20px;
    flex-wrap: wrap;
}

.tylqcm {
    padding: 10px 20px;
    background: white;
    border: 1px solid var(--colgrl);
    border-radius: 5px;
    font-size: 14px;
    color: var(--coldrk);
    text-decoration: none;
    cursor: pointer;
    min-width: 120px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.tylqcm:hover {
    border-color: var(--colprim);
    color: var(--colprim);
    background: var(--colgrl);
}

.tylqcm.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.gnhrsf {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

.vwjqmt {
    min-width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: white;
    border: 1px solid var(--colgrl);
    border-radius: 5px;
    font-size: 14px;
    color: var(--coldrk);
    text-decoration: none;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s;
}

.vwjqmt:hover {
    border-color: var(--colprim);
    color: var(--colprim);
    background: var(--colgrl);
}

.vwjqmt.crzhdn {
    background: var(--colprim);
    color: white;
    border-color: var(--colprim);
    border-color: var(--color-primary);
}

.sdzwft {
    background: white;
    border-radius: 5px;
    padding: 30px;
    height: fit-content;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--color-border);
}

@media (max-width: 768px) {
    .sdzwft {
        padding: 20px;
    }
}

.bftrng {
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid var(--color-border);
}

.bftrng:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

@media (max-width: 768px) {
    .bftrng {
        margin-bottom: 25px;
        padding-bottom: 25px;
    }
}

.mxhvqz {
    font-size: 18px;
    margin: 0 0 20px 0;
    color: var(--color-primary);
}

@media (max-width: 768px) {
    .mxhvqz {
        font-size: 16px;
        margin-bottom: 15px;
    }
}

.cwkfyz {
    display: flex;
    gap: 10px;
    flex-direction: column;
}

@media (min-width: 480px) {
    .cwkfyz {
        flex-direction: row;
    }
}

.lzyqgj {
    flex: 1;
    padding: 12px 15px;
    border: 1px solid var(--color-primary);
    border-radius: 5px;
    font-size: 14px;
    min-width: 0;
}

.vrdhxj {
    padding: 12px 20px;
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.wqphnf {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.rkzbfw {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background: var(--color-surface-alt);
    border-radius: 5px;
    text-decoration: none;
    transition: background 0.3s;
}

.rkzbfw:hover {
    background: var(--color-border);
}

.tsqpjm {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary);
    color: white;
    border-radius: 5px;
    font-size: 12px;
    font-weight: bold;
    flex-shrink: 0;
}

.bqgwvl {
    font-size: 14px;
    color: var(--color-text);
    flex: 1;
}

.zmdlqt {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ybfrph {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    background: var(--color-surface-alt);
    border-radius: 5px;
    text-decoration: none;
    transition: background 0.3s;
    flex-wrap: wrap;
}

.ybfrph:hover {
    background: var(--color-border);
}

.tqgdny {
    font-size: 14px;
    color: var(--color-text);
    flex: 1;
    min-width: 0;
}

.cwzxhp {
    font-size: 12px;
    background: var(--color-primary);
    color: white;
    padding: 2px 8px;
    border-radius: 5px;
    flex-shrink: 0;
}

.pzmkwr {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.bglfjq {
    padding: 8px 15px;
    background: var(--color-surface-muted);
    border-radius: 5px;
    font-size: 13px;
    color: var(--color-primary);
    text-decoration: none;
    transition: all 0.3s;
    white-space: nowrap;
}

.bglfjq:hover {
    background: var(--color-primary);
    color: white;
}

.bftrng.xgtsrf {
    background: var(--color-primary);
    padding: 25px;
    border-radius: 5px;
    color: white;
}

@media (max-width: 768px) {
    .bftrng.xgtsrf {
        padding: 20px;
    }
}

.jtmcqp {
    font-size: 14px;
    opacity: 0.9;
    margin-bottom: 20px;
    line-height: 1.5;
}

.qkjfhw {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sybqfk {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--color-border);
    border-radius: 5px;
    font-size: 14px;
    margin-bottom: 10px;
    box-sizing: border-box;
}

.rwcvtx {
    width: 100%;
    padding: 12px 20px;
    background: #182637;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-sizing: border-box;
}

@media (max-width: 480px) {
    .xbldgw {
        font-size: 24px;
    }
    
    .kpmvjz {
        font-size: 16px;
        margin-bottom: 30px;
    }
    
    .lcyzrb {
        font-size: 13px;
        margin-bottom: 20px;
    }
}

@supports (-webkit-touch-callout: none) {
    .lzyqgj,
    .sybqfk {
        font-size: 16px;
    }
}

/* ==================== СТИЛИ CONTACTS.PHP ==================== */
.fjqwrp {
    padding: 40px 0;
    background: var(--color-white);
}

.wqxzfk {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.msztby {
    margin-bottom: 30px;
    font-size: 14px;
}

.vlqpdj {
    color: var(--color-primary);
    text-decoration: none;
}

.vlqpdj:hover {
    color: #0066cc;
    text-decoration: underline;
}

.gxknhr {
    margin: 0 10px;
    color: var(--color-text-soft);
}

.bhfcjt {
    color: var(--color-text-dim);
    font-weight: 500;
}

.hylmgr {
    color: var(--color-primary);
    font-size: 32px;
    margin: 0 0 10px 0;
    font-weight: 700;
    text-align: center;
}

.pnjwqs {
    font-size: 18px;
    color: var(--color-text-dim);
    text-align: center;
    margin-bottom: 40px;
}

.crmdhg {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.qjnysx, .qkmyrn {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.ltrbkx {
    background: white;
    padding: 30px;
    border-radius: 5px;
    border: 1px solid var(--color-border);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.vgzqyf {
    font-size: 20px;
    margin: 0 0 25px 0;
    color: var(--color-primary);
    padding-bottom: 15px;
    border-bottom: 1px solid var(--color-primary);
}

.bfzmqr {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.psydfm {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.vjqcsw {
    font-size: 14px;
    color: var(--color-text-dim);
    font-weight: 600;
}

.mtyhlc {
    font-size: 16px;
    color: var(--color-text);
    text-decoration: none;
}

.mtyhlc[href] {
    color: var(--color-primary);
}

.mtyhlc[href]:hover {
    text-decoration: underline;
}

.wczypq {
    font-size: 13px;
    color: var(--color-text-soft);
    display: block;
    margin-top: 5px;
}

.ltrbkx.gkdxpv {
    background: var(--color-white);
}

.vmwpyn {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.cprtls {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lhnjxc {
    padding: 12px 15px;
    border: 1px solid var(--color-border);
    border-radius: 5px;
    font-size: 14px;
    background: white;
}

.lhnjxc:focus {
    border-color: var(--color-primary);
    outline: none;
}

select.lhnjxc {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23666' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    padding-right: 40px;
}

.bxcmgy {
    padding: 14px 32px;
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    align-self: flex-start;
}

.bxcmgy:hover {
    background: var(--color-primary-dark);
}

.dpzsfb {
    background: white;
    padding: 30px;
    border-radius: 5px;
    border: 1px solid var(--color-border);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.fwrgzl {
    font-size: 20px;
    margin: 0 0 25px 0;
    color: var(--color-primary);
    padding-bottom: 15px;
    border-bottom: 1px solid var(--color-primary);
}

.ycjmtx {
    height: 200px;
    background: url('images/map/mapp.png') no-repeat center center;
    border-radius: 5px;
    position: relative;
    overflow: hidden;
}

.ljkvpf {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: transparent;
    padding: 10px;
    border-radius: 5px 5px 0 0;
}

.swgfxr {
    padding: 10px 25px;
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: inline-block;
}

.tkjrny {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.vqgysh {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.xlqpcy {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.mwcdzl {
    padding: 12px 15px;
    border: 1px solid var(--color-border);
    border-radius: 5px;
    font-size: 14px;
    background: white;
}

.mwcdzl:focus {
    border-color: var(--color-primary);
    outline: none;
}

.prbqhn {
    display: flex;
    align-items: center;
    gap: 10px;
}

.xmdvcl {
    font-size: 14px;
    color: var(--color-text-dim);
}

.qszfvl {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.npwhfk {
    background: var(--color-surface-alt);
    border-radius: 5px;
    overflow: hidden;
}

.mytkdc {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    cursor: pointer;
}

.jqrlsf {
    font-size: 16px;
    font-weight: 500;
    color: var(--color-primary);
}

.vrdbxm {
    background: var(--color-primary);
    color: white;
    border: none;
    width: 30px;
    height: 30px;
    border-radius: 5px;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.wbjckh {
    padding: 0 20px 20px 20px;
    display: none;
}

.zltkjm {
    font-size: 14px;
    color: var(--color-text-dim);
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 992px) {
    .sygzmq {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .crmdhg {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .jhmzvp {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
    
    .sxpkfj {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .lqcpgj {
        flex-direction: column;
        text-align: center;
    }
    
    .nxrbwh {
        margin: 0 auto;
    }
    
    .sxpkfj {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .vqgysh {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .zxmvny {
        flex-direction: column;
        align-items: center;
    }
    
    .vryjsl, .bnftmj {
        width: 100%;
        max-width: 300px;
    }
    
    .qkjfhw {
        flex-direction: column;
    }
    
    .sybqfk, .rwcvtx {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .jhmzvp {
        grid-template-columns: 1fr;
    }
    
    .qckghv {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .bfkvsz {
        flex-direction: column;
        gap: 15px;
    }
    
    .gnhrsf {
        justify-content: center;
    }
}

/* ==================== СТРАНИЦА АВТОРИЗАЦИИ ==================== */
.xyzabc {
    min-height: calc(100vh - 120px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 0;
}

.krcbrd {
    margin-bottom: 40px;
    font-size: 14px;
    color: var(--colgry);
    display: flex;
    align-items: center;
    gap: 8px;
}

.plmnko {
    color: var(--colprim);
    text-decoration: none;
    transition: color 0.3s;
}

.plmnko:hover {
    color: var(--colprid);
    text-decoration: underline;
}

.qrstuv {
    color: var(--colgry);
}

.wxymno {
    color: var(--coldrk);
    font-weight: 500;
}

.hgjikl {
    max-width: 600px;
    margin: 0 auto;
    width: 100%;
}

.cnfrst {
    background: white;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--colgrl);
}

.smpkld {
    padding: 40px;
}

.qwretz {
    margin-bottom: 25px;
    text-align: center;
}

.vgtyhn {
    font-size: 28px;
    color: var(--coldrk);
    margin: 0 0 10px 0;
    font-weight: 700;
}

.byunmj {
    font-size: 15px;
    color: var(--colgry);
    margin: 0;
    line-height: 1.4;
}

.tgbyhn {
    display: flex;
    background: var(--colgrl);
    border-radius: 5px;
    padding: 4px;
    margin-bottom: 30px;
    width: 100%;
}

.ujmikn {
    flex: 1;
    padding: 14px 20px;
    border: none;
    background: transparent;
    color: var(--coldrk);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 5px;
    transition: all 0.3s ease;
    text-align: center;
}

.ujmikn.active {
    background: white;
    color: var(--colprim);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.ujmikn:not(.active):hover {
    background: rgba(255, 255, 255, 0.5);
    color: var(--colprim);
}

.plokij {
    position: relative;
}

.frmklp {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.frmklp:not(.active) {
    display: none;
}

.qazxsw {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.qazxsw.horizontal {
    flex-direction: row;
    gap: 15px;
}

.colfield {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.okmijn {
    padding: 14px 16px;
    border: 1px solid var(--colgrl);
    border-radius: 5px;
    font-size: 15px;
    font-family: inherit;
    transition: all 0.3s ease;
    background: white;
    width: 100%;
    box-sizing: border-box;
}

.okmijn:focus {
    outline: none;
    border-color: var(--colprim);
    box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.okmijn::placeholder {
    color: var(--colgry);
    opacity: 0.7;
}

.wsxqaz {
    margin-top: 10px;
}

.rfvedc {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    user-select: none;
}

.tgbhyu {
    width: 18px;
    height: 18px;
    accent-color: var(--colprim);
    cursor: pointer;
    flex-shrink: 0;
}

.nhytgr {
    font-size: 14px;
    color: var(--coldrk);
    line-height: 1.4;
}

.ujmkij {
    color: var(--colprim);
    text-decoration: none;
    font-weight: 500;
}

.ujmkij:hover {
    text-decoration: underline;
}

.mjuikl {
    padding: 16px;
    background: var(--colprim);
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 10px;
    width: 100%;
}

.mjuikl:hover {
    background: var(--colprid);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px var(--color-primary-strong);
}

.mjuikl:active {
    transform: translateY(0);
}

.cftvgy {
    text-align: right;
    margin-top: 5px;
}

.nhybgt {
    color: var(--colprim);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
}

.nhybgt:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .xyzabc {
        padding: 20px 0;
        min-height: calc(100vh - 150px);
    }
    
    .krcbrd {
        margin-bottom: 25px;
        font-size: 13px;
    }
    
    .smpkld {
        padding: 30px 25px;
    }
    
    .vgtyhn {
        font-size: 24px;
    }
    
    .byunmj {
        font-size: 14px;
    }
    
    .ujmikn {
        padding: 12px 16px;
        font-size: 15px;
    }
    
    .okmijn {
        padding: 12px 14px;
        font-size: 14px;
    }
    
    .qazxsw.horizontal {
        flex-direction: column;
        gap: 15px;
    }
    
    .mjuikl {
        padding: 14px;
        font-size: 15px;
    }
}

@media (max-width: 480px) {
    .smpkld {
        padding: 25px 20px;
    }
    
    .tgbyhn {
        margin-bottom: 25px;
    }
    
    .ujmikn {
        padding: 10px 12px;
        font-size: 14px;
    }
    
    .krcbrd {
        margin-bottom: 20px;
    }
    
    .vgtyhn {
        font-size: 22px;
    }
}

/* ==================== СТРАНИЦА КОРЗИНЫ ==================== */
.crtpge {
    padding: 40px 0;
    min-height: calc(100vh - 200px);
}

.crtshk {
    margin-bottom: 30px;
    font-size: 14px;
    color: var(--colgry);
    display: flex;
    align-items: center;
    gap: 8px;
}

.crtbrl {
    color: var(--colprim);
    text-decoration: none;
    transition: color 0.3s;
}

.crtbrl:hover {
    color: var(--colprid);
    text-decoration: underline;
}

.crtbrs {
    color: var(--colgry);
}

.crtbrac {
    color: var(--coldrk);
    font-weight: 500;
}

.crtcnt {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 40px;
    align-items: start;
}

.crtlft {
    background: white;
    border-radius: 5px;
    padding: 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.crtsec {
    display: flex;
    flex-direction: column;
}

.crthdr {
    border-bottom: 1px solid var(--colgrl);
    padding-bottom: 20px;
}

.crtttl {
    font-size: 28px;
    color: var(--coldrk);
    margin: 0 0 15px 0;
    font-weight: 700;
}

.crtstt {
    display: flex;
    gap: 20px;
    font-size: 15px;
    color: var(--colgry);
}

.crtsti b,
.crtstp b {
    color: var(--coldrk);
    font-weight: 600;
}

.crtlst {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.crtsrt {
    display: grid;
    grid-template-columns: 100px 1fr auto;
    gap: 20px;
    padding: 20px;
    background: var(--collgt);
    border-radius: 5px;
    border: 1px solid var(--colgrl);
    align-items: center;
    transition: all 0.3s;
}

.crtsrt:hover {
    border-color: var(--colprim);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.crtsim {
    width: 100px;
    height: 100px;
    border-radius: 5px;
    overflow: hidden;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--colgrl);
    flex-shrink: 0;
}

.crtsim img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 10px;
}

.crtinf {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.crtnme {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    word-break: break-word;
}

.crtnme a {
    color: var(--coldrk);
    text-decoration: none;
    transition: color 0.3s;
}

.crtnme a:hover {
    color: var(--colprim);
}

.crtprc {
    font-size: 15px;
    color: var(--colgry);
    margin: 0;
}

.crtprc strong {
    color: var(--coldrk);
    font-weight: 600;
}

.crtctl {
    display: flex;
    align-items: center;
    gap: 12px;
    background: white;
    border-radius: 5px;
    padding: 8px 12px;
    border: 1px solid var(--colgrl);
    flex-shrink: 0;
}

.crtbtm {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--colgrl);
    color: var(--coldrk);
    border: none;
    border-radius: 5px;
    font-family: inherit;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.crtbtm:hover {
    background: var(--colprim);
    color: white;
}

.crtbtm:hover {
    background: var(--colprim);
    color: white;
}

.crtdec {
    background: var(--color-primary);
    color: white;
}

.crtdec:hover {
    background: #c0392b;
}

.crtinc {
    background: var(--color-primary);
    color: white;
}

.crtinc:hover {
    background: #219653;
}

.crtqty {
    font-size: 16px;
    font-weight: 600;
    min-width: 20px;
    text-align: center;
}

.crtemp {
    text-align: center;
    padding: 60px 20px;
    background: var(--collgt);
    border-radius: 5px;
    border: 1px solid var(--colgrl);
}

.crtemt {
    font-size: 24px;
    color: var(--coldrk);
    margin: 0 0 15px 0;
}

.crtems {
    font-size: 16px;
    color: var(--colgry);
    margin: 0 0 25px 0;
}

.crtemb {
    display: inline-block;
    padding: 12px 24px;
    background: var(--colprim);
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-weight: 600;
    transition: background 0.3s;
}

.crtemb:hover {
    background: var(--colprid);
}

.crtfin {
    background: white;
    border-radius: 5px;
    padding: 25px;
    border: 1px solid var(--colgrl);
    margin-top: 30px;
}

.crtfbl {
    margin-bottom: 25px;
}

.crtftl {
    font-size: 18px;
    color: var(--coldrk);
    margin: 0 0 20px 0;
    font-weight: 600;
}

.crtfit {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--colgrl);
}

.crtfitl {
    font-size: 15px;
    color: var(--coldrk);
}

.crtfitv {
    font-size: 15px;
    font-weight: 600;
    color: var(--coldrk);
}

.crtfre {
    color: var(--colgry);
}

.crtfblt {
    border-bottom: 1px solid var(--colgrl);
    padding-bottom: 15px;
    margin-bottom: 15px;
}

.crtftt {
    color: var(--colprim);
    font-size: 18px;
}

.crtfrm {
    background: var(--collgt);
    border-radius: 5px;
    padding: 20px;
}

.crtfrmi {
    margin-bottom: 20px;
}

.crtfrml {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--coldrk);
    margin-bottom: 8px;
}

.crtfrmf {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--colgrl);
    border-radius: 5px;
    font-size: 15px;
    box-sizing: border-box;
    transition: all 0.3s;
}

.crtfrmf:focus {
    outline: none;
    border-color: var(--colprim);
    box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.crtfrms {
    display: block;
    font-size: 12px;
    color: var(--colgry);
    margin-top: 6px;
}

.crtfrmb {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.crtfrmbtn {
    padding: 14px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    text-align: center;
    text-decoration: none;
}

.crtfrmsb {
    background: var(--colprim);
    color: white;
}

.crtfrmsb:hover {
    background: var(--colprid);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--color-primary-strong);
}

.crtfrmcl {
    background: white;
    color: var(--coldrk);
    border: 1px solid var(--colgrl);
}

.crtfrmcl:hover {
    border-color: var(--colacc);
    color: var(--colacc);
}

.ordactf {
    margin-top: var(--spcmd);
    padding-top: var(--spcmd);
    border-top: 1px solid var(--colgrl);
}

.ordcnc {
    padding: 10px 20px;
    background: white;
    color: var(--colacc);
    border: 1px solid var(--colacc);
    border-radius: 5px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    width: 100%;
}

.ordcnc:hover {
    background: var(--colacc);
    color: white;
}

.crtrgt {
    background: white;
    border-radius: 5px;
    padding: 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    height: fit-content;
}

.ordsec {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.ordttl {
    font-size: 22px;
    color: var(--coldrk);
    margin: 0;
    font-weight: 700;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--colgrl);
}

.ordlst {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ordcrd {
    background: var(--collgt);
    border-radius: 5px;
    padding: 20px;
    border: 1px solid var(--colgrl);
    transition: all 0.3s;
}

.ordcrd:hover {
    border-color: var(--colprim);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.ordhdr {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 15px;
}

.ordinf {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.ordnum {
    font-size: 18px;
    color: var(--coldrk);
    margin: 0;
    font-weight: 700;
}

.orddte {
    font-size: 14px;
    color: var(--colgry);
}

.ordsts {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ordstl {
    font-size: 14px;
    color: var(--colgry);
}

.ordstv {
    font-size: 14px;
    color: var(--colprim);
    font-weight: 600;
}

.ordsmm {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-bottom: 20px;
}

.ordsit {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 15px;
    background: white;
    border-radius: 5px;
    border: 1px solid var(--colgrl);
    text-align: center;
    gap: 5px;
}

.ordsitc {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ordsitc .ordstl {
    font-size: 13px;
    color: var(--colgry);
    white-space: nowrap;
}

.ordsitc .ordstv {
    font-size: 16px;
    color: var(--coldrk);
    font-weight: 600;
    white-space: nowrap;
}

.orddet {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--colgrl);
}

.orddtl {
    font-size: 16px;
    color: var(--coldrk);
    margin: 0 0 15px 0;
    font-weight: 600;
}

.orditm {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.orditm:last-child {
    border-bottom: none;
}

.ordnm {
    flex: 1;
    font-size: 14px;
    color: var(--coldrk);
}

.ordqt {
    font-size: 14px;
    color: var(--colgry);
    margin: 0 15px;
}

.ordsm {
    font-size: 14px;
    font-weight: 600;
    color: var(--coldrk);
}

.ordemp {
    text-align: center;
    padding: 40px 20px;
    background: var(--collgt);
    border-radius: 5px;
    border: 1px solid var(--colgrl);
}

.ordemt {
    font-size: 18px;
    color: var(--coldrk);
    margin: 0 0 10px 0;
}

.ordems {
    font-size: 15px;
    color: var(--colgry);
    margin: 0;
}

@media (max-width: 768px) {
    .crtpge {
        padding: 20px 0;
    }
    
    .crtcnt {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .crtlft,
    .crtrgt {
        padding: 25px 20px;
        border-radius: 5px;
    }
    
    .crtsrt {
        grid-template-columns: 80px 1fr;
        grid-template-rows: auto auto;
        gap: 15px;
        padding: 15px;
        align-items: flex-start;
    }
    
    .crtsim {
        width: 80px;
        height: 80px;
        grid-row: 1 / 2;
        grid-column: 1 / 2;
    }
    
    .crtinf {
        grid-row: 1 / 2;
        grid-column: 2 / 3;
        min-width: 0;
        overflow: hidden;
    }
    
    .crtnme {
        font-size: 14px;
        line-height: 1.4;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        max-height: 2.8em;
    }
    
    .crtprc {
        font-size: 14px;
    }
    
    .crtctl {
        grid-column: 1 / -1;
        grid-row: 2 / 3;
        justify-content: center;
        margin-top: 5px;
        width: 100%;
    }
    
    .crtttl {
        font-size: 24px;
    }
    
    .ordttl {
        font-size: 20px;
    }
    
    .ordsmm {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

@media (max-width: 480px) {
    .crtttl {
        font-size: 22px;
    }
    
    .ordttl {
        font-size: 18px;
    }
    
    .crtstt {
        flex-direction: column;
        gap: 10px;
    }
    
    .ordhdr {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .crtfrmb {
        flex-direction: column;
    }
    
    .ordsit {
        padding: 10px 12px;
    }
    
    .ordsitc .ordstl {
        font-size: 12px;
    }
    
    .ordsitc .ordstv {
        font-size: 14px;
    }
    
    .crtsrt {
        gap: 12px;
        padding: 12px;
    }
    
    .crtsim {
        width: 70px;
        height: 70px;
    }
    
    .crtctl {
        padding: 6px 10px;
    }
    
    .crtbtm {
        width: 28px;
        height: 28px;
        font-size: 16px;
    }
    
    .crtqty {
        font-size: 14px;
    }
}

@media (max-width: 360px) {
    .crtnme {
        font-size: 13px;
        -webkit-line-clamp: 3;
        max-height: 4.2em;
    }
    
    .crtsim {
        width: 60px;
        height: 60px;
    }
    
    .crtprc {
        font-size: 13px;
    }
}

/* ==================== ПАНЕЛЬ АДМИНИСТРАТОРА ==================== */
.admncnt {
    padding: 40px 0;
    min-height: calc(100vh - 200px);
}

.admbrdz {
    margin-bottom: 30px;
    font-size: 14px;
    color: var(--colgry);
    display: flex;
    align-items: center;
    gap: 8px;
}

.admbrdln {
    color: var(--colprim);
    text-decoration: none;
    transition: color 0.3s;
}

.admbrdln:hover {
    color: var(--colprid);
    text-decoration: underline;
}

.admbrdsp {
    color: var(--colgry);
}

.admbrdcur {
    color: var(--coldrk);
    font-weight: 500;
}

.pagetl {
    font-size: 32px;
    color: var(--coldrk);
    margin: 0 0 40px 0;
    font-weight: 700;
}

.secttl {
    font-size: 24px;
    color: var(--coldrk);
    margin: 0 0 25px 0;
    font-weight: 600;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--colgrl);
}

.admcsec {
    background: white;
    border-radius: 5px;
    padding: 30px;
    margin-bottom: 40px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--colgrl);
}

.admcatgr {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.admcatfrm {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.admcatitm {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.admcatlb {
    font-size: 15px;
    font-weight: 600;
    color: var(--coldrk);
}

.admcatrow {
    display: flex;
    gap: 10px;
}

.admcatinp {
    flex: 1;
    padding: 12px 15px;
    border: 1px solid var(--colgrl);
    border-radius: 5px;
    font-size: 15px;
    transition: all 0.3s;
}

.admcatinp:focus {
    outline: none;
    border-color: var(--colprim);
    box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.admcatsel {
    flex: 1;
    padding: 12px 15px;
    border: 1px solid var(--colgrl);
    border-radius: 5px;
    font-size: 15px;
    background: white;
    cursor: pointer;
    transition: all 0.3s;
}

.admcatsel:focus {
    outline: none;
    border-color: var(--colprim);
}

.admcatbtn {
    padding: 12px 20px;
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    white-space: nowrap;
}

.admcatbtn:hover {
    background: #219653;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(39,174,96,0.2);
}

.admcatdlt {
    padding: 12px 20px;
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    white-space: nowrap;
}

.admcatdlt:hover {
    background: #c0392b;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(231,76,60,0.2);
}

.admprdsec {
    background: white;
    border-radius: 5px;
    padding: 30px;
    margin-bottom: 40px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--colgrl);
}

.admprdfrm {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.admprdgr {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.admprditm {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.admprditm.admprdfull {
    grid-column: 1 / -1;
}

.admprdlb {
    font-size: 14px;
    font-weight: 600;
    color: var(--coldrk);
}

.admprdinp {
    padding: 12px 15px;
    border: 1px solid var(--colgrl);
    border-radius: 5px;
    font-size: 15px;
    transition: all 0.3s;
}

.admprdinp:focus {
    outline: none;
    border-color: var(--colprim);
    box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.admcategsel {
    padding: 12px 15px;
    border: 1px solid var(--colgrl);
    border-radius: 5px;
    font-size: 15px;
    background: white;
    cursor: pointer;
    transition: all 0.3s;
}

.admcategsel:focus {
    outline: none;
    border-color: var(--colprim);
}

.admprdfile {
    padding: 10px;
    border: 1px solid var(--colgrl);
    border-radius: 5px;
    font-size: 15px;
    background: white;
    cursor: pointer;
    transition: all 0.3s;
}

.admprdfile:focus {
    outline: none;
    border-color: var(--colprim);
}

.admprdbtn {
    padding: 15px 30px;
    background: var(--colprim);
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    align-self: flex-start;
}

.admprdbtn:hover {
    background: var(--colprid);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px var(--color-primary-strong);
}

.admordsec {
    background: white;
    border-radius: 5px;
    padding: 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--colgrl);
}

.admfltrz {
    display: flex;
    gap: 10px;
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--colgrl);
    flex-wrap: wrap;
}

.admfltrt {
    padding: 8px 16px;
    background: var(--colgrl);
    color: var(--coldrk);
    border-radius: 5px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
    user-select: none;
}

.admfltrt:hover {
    background: var(--colprim);
    color: white;
}

.admfltrt.active {
    background: var(--colprim);
    color: white;
}

.admordgr {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.admcrdz {
    background: white;
    border-radius: 5px;
    padding: 25px;
    border: 1px solid var(--colgrl);
    transition: all 0.3s;
}

.admcrdz:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.admcrdz.новый {
    border-left: 4px solid var(--color-secondary);
}

.admcrdz.подтверждённый {
    border-left: 4px solid var(--color-success);
}

.admcrdz.отменённый {
    border-left: 4px solid var(--color-accent);
}

.admstbad {
    padding: 4px 12px;
    border-radius: 5px;
    font-size: 13px;
    font-weight: 600;
}

.admstbad.новый {
    background: var(--color-secondary);
    color: white;
}

.admstbad.подтверждённый {
    background: var(--color-success);
    color: white;
}

.admstbad.отменённый {
    background: var(--color-accent);
    color: white;
}

.admhdcz {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 15px;
}

.admordnz {
    font-size: 20px;
    color: var(--coldrk);
    margin: 0;
    font-weight: 700;
}

.admdatez {
    font-size: 14px;
    color: var(--colgry);
}

.adminfoz {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 25px;
    padding-bottom: 25px;
    border-bottom: 1px solid var(--colgrl);
}

.admcliz,
.admdetz {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.admcltl {
    font-size: 16px;
    color: var(--coldrk);
    margin: 0 0 10px 0;
    font-weight: 600;
}

.admlogz,
.admemlz,
.admphonz,
.admsttz,
.admqttyz,
.admtotalz {
    font-size: 14px;
    color: var(--colgry);
    margin: 0;
}

.admlogz strong,
.admemlz strong,
.admphonz strong,
.admsttz strong,
.admqttyz strong,
.admtotalz strong {
    color: var(--coldrk);
    font-weight: 600;
}

.admcontz {
    margin-bottom: 20px;
}

.admconttl {
    font-size: 16px;
    color: var(--coldrk);
    margin: 0 0 15px 0;
    font-weight: 600;
}

.admordlst {
    background: var(--collgt);
    border-radius: 5px;
    padding: 15px;
    border: 1px solid var(--colgrl);
}

.admordit {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.admordit:last-child {
    border-bottom: none;
}

.admitnm {
    flex: 1;
    font-size: 14px;
    color: var(--coldrk);
}

.admitqt {
    font-size: 14px;
    color: var(--colgry);
    margin: 0 15px;
}

.admitpr {
    font-size: 14px;
    font-weight: 600;
    color: var(--coldrk);
}

.admactz {
    display: flex;
    gap: 15px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--colgrl);
    flex-wrap: wrap;
}

.admfrmx {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    min-width: 250px;
}

.admtextq {
    padding: 10px 12px;
    border: 1px solid var(--colgrl);
    border-radius: 5px;
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
    min-height: 60px;
    transition: all 0.3s;
}

.admtextq:focus {
    outline: none;
    border-color: var(--colprim);
}

.admbtyc {
    padding: 12px 20px;
    background: var(--colprim);
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    width: 100%;
}

.admbtyc:hover {
    background: var(--colsuc);
    transform: translateY(-1px);
}

.admbtrd {
    padding: 12px 20px;
    background: var(--colprim);
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    width: 100%;
}

.admbtrd:hover {
    background: var(--colacc);
    transform: translateY(-1px);
}

.admcancz {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--colgrl);
}

.admrezl {
    font-size: 16px;
    color: var(--coldrk);
    margin: 0 0 10px 0;
    font-weight: 600;
}

.admreztx {
    font-size: 14px;
    color: var(--colgry);
    margin: 0;
    padding: 12px 15px;
    background: var(--collgt);
    border-radius: 5px;
    border: 1px solid var(--colgrl);
}

.admnordz {
    text-align: center;
    padding: 60px 20px;
    background: var(--collgt);
    border-radius: 5px;
    border: 1px solid var(--colgrl);
}

.admnordttl {
    font-size: 20px;
    color: var(--coldrk);
    margin: 0;
    font-weight: 600;
}

@media (max-width: 1024px) {
    .admcatgr {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .admprdgr {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .adminfoz {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .admncnt {
        padding: 20px 0;
    }
    
    .pagetl {
        font-size: 26px;
        margin-bottom: 30px;
    }
    
    .secttl {
        font-size: 20px;
    }
    
    .admcsec,
    .admprdsec,
    .admordsec {
        padding: 25px 20px;
        border-radius: 5px;
    }
    
    .admcatrow {
        flex-direction: column;
    }
    
    .admcatbtn,
    .admcatdlt {
        width: 100%;
    }
    
    .admhdcz {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .admactz {
        flex-direction: column;
    }
    
    .admfrmx {
        min-width: auto;
    }
}

@media (max-width: 480px) {
    .pagetl {
        font-size: 24px;
    }
    
    .secttl {
        font-size: 18px;
    }
    
    .admordnz {
        font-size: 18px;
    }
    
    .admfltrz {
        justify-content: center;
    }
    
    .admprdbtn {
        width: 100%;
    }
}

/* ==================== СТРАНИЦА РЕДАКТИРОВАНИЯ ТОВАРА ==================== */
.edtpge {
    padding: 40px 0;
    min-height: calc(100vh - 200px);
}

.edtbrd {
    margin-bottom: 30px;
    font-size: 14px;
    color: var(--colgry);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.edtbrl {
    color: var(--colprim);
    text-decoration: none;
    transition: color 0.3s;
}

.edtbrl:hover {
    color: var(--colprid);
    text-decoration: underline;
}

.edtbrs {
    color: var(--colgry);
}

.edtbra {
    color: var(--coldrk);
    font-weight: 500;
}

.edtsec {
    background: white;
    border-radius: 5px;
    padding: 40px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--colgrl);
}

.edtttl {
    font-size: 32px;
    color: var(--coldrk);
    margin: 0 0 30px 0;
    font-weight: 700;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--colgrl);
}

.edtfrm {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.edtgrd {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}

.edtfld {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.edtfld.edtful {
    grid-column: 1 / -1;
}

.edtlbl {
    font-size: 14px;
    font-weight: 600;
    color: var(--coldrk);
}

.edtinp {
    padding: 14px 16px;
    border: 1px solid var(--colgrl);
    border-radius: 5px;
    font-size: 15px;
    transition: all 0.3s;
    background: white;
}

.edtinp:focus {
    outline: none;
    border-color: var(--colprim);
    box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.edtsel {
    padding: 14px 16px;
    border: 1px solid var(--colgrl);
    border-radius: 5px;
    font-size: 15px;
    background: white;
    cursor: pointer;
    transition: all 0.3s;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2395a5a6' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
}

.edtsel:focus {
    outline: none;
    border-color: var(--colprim);
}

.edtimgc {
    background: var(--collgt);
    border-radius: 5px;
    padding: 20px;
    border: 1px solid var(--colgrl);
    margin-bottom: 15px;
}

.edtimgt {
    font-size: 14px;
    color: var(--colgry);
    margin: 0 0 15px 0;
    font-weight: 500;
}

.edtimgp {
    max-width: 200px;
    max-height: 200px;
    object-fit: contain;
    border-radius: 5px;
    border: 1px solid var(--colgrl);
    background: white;
    padding: 10px;
}

.edtfil {
    padding: 12px 15px;
    border: 1px solid var(--colgrl);
    border-radius: 5px;
    font-size: 15px;
    background: white;
    cursor: pointer;
    transition: all 0.3s;
    width: 100%;
}

.edtfil:focus {
    outline: none;
    border-color: var(--colprim);
}

.edthnt {
    font-size: 12px;
    color: var(--colgry);
    margin-top: 6px;
    display: block;
}

.edtact {
    display: flex;
    gap: 15px;
    padding-top: 20px;
    border-top: 1px solid var(--colgrl);
    margin-top: 10px;
}

.edtbtn {
    padding: 14px 28px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    text-align: center;
    text-decoration: none;
}

.edtsav {
    background: var(--colprim);
    color: white;
}

.edtsav:hover {
    background: var(--colprid);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--color-primary-strong);
}

.edtcan {
    background: white;
    color: var(--coldrk);
    border: 1px solid var(--colgrl);
}

.edtcan:hover {
    border-color: var(--colprim);
    color: var(--colprim);
}

@media (max-width: 768px) {
    .edtpge {
        padding: 20px 0;
    }
    
    .edtsec {
        padding: 30px 25px;
        border-radius: 5px;
    }
    
    .edtttl {
        font-size: 26px;
        margin-bottom: 25px;
    }
    
    .edtgrd {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .edtact {
        flex-direction: column;
    }
    
    .edtbtn {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .edtsec {
        padding: 25px 20px;
    }
    
    .edtttl {
        font-size: 24px;
    }
    
    .edtbrd {
        font-size: 13px;
    }
    
    .edtinp,
    .edtsel,
    .edtfil {
        padding: 12px 14px;
        font-size: 14px;
    }
    
    .edtimgp {
        max-width: 150px;
        max-height: 150px;
    }
}


/* ==================== СТРАНИЦА SHOP ==================== */
.bdslkm {
    padding: 40px 0;
    background: var(--color-white);
}

.xsdvjl {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.uizcvm {
    margin-bottom: 30px;
    font-size: 14px;
}

.hpvkxt {
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.3s;
}

.hpvkxt:hover {
    color: #0066cc;
    text-decoration: underline;
}

.fqkrtn {
    margin: 0 10px;
    color: var(--color-text-soft);
}

.nvbhrg {
    color: var(--color-text-dim);
    font-weight: 500;
}

.kltjyh {
    font-size: 42px;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0 0 30px 0;
    text-align: center;
    line-height: 1.2;
}

.ywmdfp {
    padding: 0 0 40px 0;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.zxcvrt {
    font-size: 18px;
    line-height: 1.7;
    color: var(--color-text);
    margin: 0;
    font-weight: 400;
    text-align: center;
}

.vbnmqs {
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.qwertz {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-bottom: 30px;
}

.asdfgh {
    background: var(--color-surface-alt);
    padding: 30px;
    border-radius: 5px;
    border: 1px solid var(--color-border);
    transition: all 0.3s;
}

.asdfgh:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.asdfgh h3 {
    font-size: 18px;
    color: var(--color-primary);
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.asdfgh h3 i {
    color: var(--color-primary);
}

.asdfgh p {
    font-size: 15px;
    color: var(--color-text);
    line-height: 1.6;
}

.lkjhgf {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.poiuyt {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.mnbvzx {
    position: relative;
}

.cxzlkj {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    min-width: 160px;
    justify-content: space-between;
}

.cxzlkj:hover {
    background: var(--color-primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.cxzlkj i {
    font-size: 12px;
    transition: transform 0.3s;
}

.vcxbnm {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border-radius: 5px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    border: 1px solid var(--color-border);
    z-index: 1001;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s;
    margin-top: 8px;
}

.vcxbnm.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.poytmn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 14px;
    background: white;
    border: none;
    text-align: left;
    cursor: pointer;
    font-size: 14px;
    color: var(--color-primary-dark);
    transition: all 0.2s;
    border-bottom: 1px solid var(--color-border);
}

.poytmn:last-child {
    border-bottom: none;
}

.poytmn:hover {
    background: var(--color-surface-alt);
    color: var(--color-primary);
}

.poytmn.active {
    background: var(--color-primary);
    color: white;
}

.poytmn.active:hover {
    background: var(--color-primary);
    color: white;
}

.poytmn i {
    width: 18px;
    text-align: center;
    font-size: 15px;
}

.azsxdc {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.qweasd {
    padding: 10px 20px;
    background: white;
    border: 1px solid var(--color-border);
    border-radius: 5px;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text);
    cursor: pointer;
    transition: all 0.3s;
}

.qweasd:hover {
    background: var(--color-surface-alt);
    border-color: #dee2e6;
}

.qweasd.active {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}

.dfghjk {
    position: relative;
    width: 100%;
    height: 500px;
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid var(--color-border);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

#map {
    width: 100%;
    height: 100%;
}

.ertyuio {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.ioplkj {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.hgfdds {
    width: 50px;
    height: 50px;
    border: 5px solid var(--color-border);
    border-top: 5px solid var(--color-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 20px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.ioplkj p {
    color: var(--color-text);
    font-size: 18px;
    font-weight: 500;
}

.mnbvcx {
    background: white;
    border-radius: 5px;
    border: 1px solid var(--color-border);
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.qazwsx {
    padding: 30px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.qazwsx h3 {
    font-size: 22px;
    color: white;
    margin: 0;
}

.edcrfv {
    display: flex;
    gap: 10px;
}

.edcrfv input {
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    font-size: 14px;
    min-width: 300px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.edcrfv input:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
}

.edcrfv button {
    padding: 10px 20px;
    background: white;
    color: var(--color-primary);
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.edcrfv button:hover {
    background: var(--color-surface-alt);
    transform: translateY(-1px);
}

.tgbnhy {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 20px;
    padding: 30px;
}

.lokiju {
    background: var(--color-surface-alt);
    border-radius: 5px;
    padding: 25px;
    border: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.3s;
}

.lokiju:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    border-color: var(--color-primary);
}

.ujikol h4 {
    font-size: 18px;
    color: var(--color-primary);
    margin-bottom: 15px;
    line-height: 1.4;
}

.ujikol p {
    font-size: 14px;
    color: var(--color-text);
    margin-bottom: 10px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.4;
}

.ujikol i {
    color: var(--color-primary);
    width: 16px;
    text-align: center;
    margin-top: 2px;
    flex-shrink: 0;
}

.ujikol .fa-store {
    color: #28a745;
}

.pokmny {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.nhytgb {
    flex: 1;
    padding: 10px 15px;
    background: white;
    border: 1px solid var(--color-border);
    border-radius: 5px;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text);
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
}

.nhytgb:hover {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
    transform: translateY(-1px);
}

.nhytgb.qazxsw {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}

.nhytgb.qazxsw:hover {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}

@media (max-width: 1024px) {
    .tgbnhy {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }
}

@media (max-width: 768px) {
    .bdslkm {
        padding: 30px 0;
    }
    
    .xsdvjl {
        padding: 0 20px;
    }
    
    .kltjyh {
        font-size: 36px;
    }
    
    .ywmdfp {
        padding: 0 0 30px 0;
    }
    
    .zxcvrt {
        font-size: 17px;
    }
    
    .poiuyt {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
    }
    
    .mnbvzx {
        width: 100%;
    }
    
    .cxzlkj {
        width: 100%;
        justify-content: center;
    }
    
    .vcxbnm {
        width: 100%;
    }
    
    .azsxdc {
        width: 100%;
        justify-content: center;
    }
    
    .dfghjk {
        height: 400px;
    }
    
    .tgbnhy {
        grid-template-columns: 1fr;
    }
    
    .edcrfv input {
        min-width: 200px;
    }
    
    .qwertz {
        grid-template-columns: 1fr;
    }
    
    .qazwsx {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }
    
    .edcrfv {
        width: 100%;
    }
    
    .edcrfv input {
        flex: 1;
        min-width: auto;
    }
    
    .asdfgh {
        padding: 20px;
    }
    
    .pokmny {
        gap: 8px;
    }
    
    .nhytgb {
        padding: 8px 12px;
        font-size: 13px;
        min-height: 40px;
        gap: 6px;
    }
}

@media (max-width: 480px) {
    .bdslkm {
        padding: 20px 0;
    }
    
    .xsdvjl {
        padding: 0 15px;
    }
    
    .kltjyh {
        font-size: 28px;
        line-height: 1.3;
    }
    
    .dfghjk {
        height: 350px;
    }
    
    .azsxdc {
        flex-direction: column;
        align-items: stretch;
    }
    
    .qweasd {
        width: 100%;
        text-align: center;
    }
    
    .lokiju {
        padding: 20px;
    }
    
    .tgbnhy {
        padding: 20px;
    }
    
    .ujikol h4 {
        font-size: 16px;
    }
    
    .ujikol p {
        font-size: 13px;
    }
    
    .pokmny {
        gap: 6px;
    }
    
    .nhytgb {
        padding: 6px 10px;
        font-size: 12px;
        min-height: 36px;
        gap: 5px;
    }
}

@media (max-width: 360px) {
    .dfghjk {
        height: 300px;
    }
    
    .edcrfv {
        flex-direction: column;
    }
    
    .edcrfv input {
        width: 100%;
    }
    
    .pokmny {
        flex-direction: column;
    }
    
    .nhytgb {
        padding: 8px 10px;
        min-height: 40px;
    }
}




.prtks {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 30px;
    font-size: 14px;
    flex-wrap: wrap;
}

.vhjkl {
    color: var(--colgry);
    text-decoration: none;
    transition: color 0.3s;
}

.vhjkl:hover {
    color: var(--colprim);
}

.qwfgb {
    color: var(--colgry);
}

.tyhnm {
    color: var(--coldrk);
    font-weight: 500;
}

.xqtwz {
    padding: 40px 0;
    min-height: calc(100vh - 200px);
    background: white;
}

.mbnyl {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.lkjhg {
    font-size: 36px;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--coldrk);
    border-bottom: 1px solid var(--colgrl);
    padding-bottom: 15px;
}

.poiuy {
    font-size: 18px;
    color: var(--colgry);
    margin-bottom: 40px;
}

.mnbvc {
    margin-bottom: 50px;
    background: white;
    border-radius: 5px;
    padding: 30px;
    border: 1px solid var(--colgrl);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.mnbvc:last-child {
    margin-bottom: 0;
}

.qazws {
    font-size: 24px;
    font-weight: 600;
    color: var(--coldrk);
    margin: 0 0 25px 0;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--colprim);
    position: relative;
}

.edcrf {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 25px;
}

.edcrftwo {
    grid-template-columns: repeat(auto-fill, minmax(250px, 300px));
}

.tgbyh {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--colgrl);
    border-radius: 5px;
    overflow: hidden;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: white;
}

.tgbyh:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.1);
    border-color: var(--colprim);
}

.ujmik {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--grpclr);
    min-height: 180px;
    padding: 0;
}

.tgbyh-jb {
    --grpclr: rgba(186, 104, 200, 0.15);
}

.tgbyh-dw {
    --grpclr: rgba(255, 160, 0, 0.15);
}

.okmij {
    width: 100%;
    height: 100%;
    max-width: 120px;
    max-height: 120px;
    object-fit: contain;
    transition: transform 0.3s ease;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
    display: block;
}

.tgbyh:hover .okmij {
    transform: scale(1.1);
}

.wsxqa {
    padding: 20px;
    text-align: center;
    background: white;
    border-top: 1px solid var(--colgrl);
}

.edcvf {
    font-size: 16px;
    font-weight: 600;
    color: var(--coldrk);
    margin: 0 0 8px 0;
    line-height: 1.4;
    transition: color 0.3s;
}

.tgbyh:hover .edcvf {
    color: var(--colprim);
}

.rfvtg {
    display: inline-block;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 5px;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.rfvtg.jetbau {
    background: rgba(186, 104, 200, 0.15);
    color: #9b59b6;
    border: 1px solid rgba(186, 104, 200, 0.3);
}

.rfvtg.dwight {
    background: rgba(255, 160, 0, 0.15);
    color: #f39c12;
    border: 1px solid rgba(255, 160, 0, 0.3);
}

.tgbyh:hover .rfvtg.jetbau {
    background: rgba(186, 104, 200, 0.25);
    border-color: rgba(186, 104, 200, 0.5);
}

.tgbyh:hover .rfvtg.dwight {
    background: rgba(255, 160, 0, 0.25);
    border-color: rgba(255, 160, 0, 0.5);
}

@media (max-width: 1024px) {
    .lkjhg {
        font-size: 32px;
    }
    
    .edcrf {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .xqtwz {
        padding: 30px 0;
    }
    
    .lkjhg {
        font-size: 28px;
        padding-bottom: 12px;
    }
    
    .poiuy {
        font-size: 16px;
        margin-bottom: 30px;
    }
    
    .mnbvc {
        padding: 25px 20px;
        margin-bottom: 30px;
        border-radius: 5px;
    }
    
    .qazws {
        font-size: 22px;
        margin-bottom: 20px;
        padding-bottom: 12px;
    }
    
    .edcrf {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    
    .edcrftwo {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .ujmik {
        min-height: 160px;
    }
    
    .okmij {
        max-width: 100px;
        max-height: 100px;
    }
}

@media (max-width: 480px) {
    .xqtwz {
        padding: 20px 0;
    }
    
    .mbnyl {
        padding: 0 15px;
    }
    
    .lkjhg {
        font-size: 24px;
    }
    
    .poiuy {
        font-size: 15px;
        margin-bottom: 25px;
    }
    
    .mnbvc {
        padding: 20px 15px;
        margin-bottom: 25px;
        border-radius: 5px;
    }
    
    .qazws {
        font-size: 20px;
        margin-bottom: 18px;
        padding-bottom: 10px;
    }
    
    .edcrf {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .edcrftwo {
        grid-template-columns: 1fr;
    }
    
    .tgbyh {
        flex-direction: row;
        min-height: 120px;
    }
    
    .ujmik {
        width: 120px;
        min-height: 120px;
        flex-shrink: 0;
    }
    
    .okmij {
        max-width: 80px;
        max-height: 80px;
    }
    
    .wsxqa {
        flex: 1;
        text-align: left;
        padding: 15px;
        border-top: none;
        border-left: 1px solid var(--colgrl);
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    
    .edcvf {
        font-size: 14px;
        margin-bottom: 5px;
    }
    
    .rfvtg {
        align-self: flex-start;
        font-size: 9px;
        padding: 3px 8px;
    }
}

@media (max-width: 360px) {
    .tgbyh {
        flex-direction: column;
        min-height: 200px;
    }
    
    .ujmik {
        width: 100%;
        min-height: 140px;
    }
    
    .okmij {
        max-width: 100px;
        max-height: 100px;
    }
    
    .wsxqa {
        text-align: center;
        border-left: none;
        border-top: 1px solid var(--colgrl);
        align-items: center;
    }
    
    .rfvtg {
        align-self: flex-start;
        font-size: 8px;
        padding: 2px 6px;
    }
}




/* ==================== СТРАНИЦА CALCULATOR ==================== */

.calkx {
    padding: 32px 0;
    min-height: calc(100vh - 200px);
    background: var(--collgt);
}

.calwr {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.calbr {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    font-size: 14px;
    color: var(--colgry);
    flex-wrap: wrap;
}

.calbk {
    color: var(--colprim);
    text-decoration: none;
    transition: color 0.3s ease;
}

.calbk:hover {
    color: var(--colprid);
    text-decoration: underline;
}

.calsp {
    color: var(--colgry);
}

.calcu {
    color: var(--coldrk);
    font-weight: 500;
}

.caltl {
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--coldrk);
    border-bottom: 1px solid var(--colgrl);
    padding-bottom: 12px;
}

.caltx {
    max-width: 720px;
    margin-bottom: 24px;
    color: var(--colgry);
    font-size: 16px;
    line-height: 1.65;
}

.calgd {
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.calsd,
.calmn {
    min-width: 0;
}

.calbx,
.calpv {
    background: var(--color-white);
    border: 1px solid var(--colgrl);
    border-radius: 5px;
    box-shadow: var(--shdsml);
}

.calbx {
    padding: 18px;
    position: sticky;
    top: 24px;
}

.calfl + .calfl {
    margin-top: 14px;
}

.callb {
    display: block;
    margin-bottom: 7px;
    color: var(--coldrk);
    font-size: 14px;
    font-weight: 600;
}

.calin {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--colgrl);
    border-radius: 5px;
    font-size: 14px;
    font-family: inherit;
    transition: all 0.3s ease;
    background: var(--color-white);
    color: var(--coldrk);
}

.calin:focus {
    outline: none;
    border-color: var(--colprim);
    box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.calsc {
    display: grid;
    gap: 8px;
    max-height: 620px;
    overflow-y: auto;
    padding-right: 4px;
}

.calsc::-webkit-scrollbar {
    width: 8px;
}

.calsc::-webkit-scrollbar-thumb {
    background: #cdd5dd;
    border-radius: 5px;
}

.calit {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    text-align: left;
    background: var(--color-white);
    border: 1px solid var(--colgrl);
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.calit:hover {
    border-color: var(--colprim);
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
}

.calit.active {
    border-color: var(--colprim);
    background: #f8fbfd;
    box-shadow: 0 0 0 3px rgba(44, 62, 80, 0.08);
}

.calii {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--collgt);
    border: 1px solid var(--colgrl);
    border-radius: 5px;
    overflow: hidden;
}

.calig {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 6px;
}

.caltb {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.caltn {
    color: var(--coldrk);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.caltc {
    color: var(--colgry);
    font-size: 11px;
    line-height: 1.35;
}

.calpv {
    overflow: hidden;
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    min-height: 460px;
    transition: all 0.3s ease;
}

.calpv:hover {
    box-shadow: var(--shdmed);
}

.calim {
    position: relative;
    background: var(--collgt);
    border-right: 1px solid var(--colgrl);
    min-height: 460px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
}

.calph {
    width: 100%;
    height: 100%;
    min-height: 360px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #f5f7fa;
    border: 1px dashed #ccd5de;
    border-radius: 5px;
    text-align: center;
}

.calp1,
.calp2 {
    font-size: 34px;
    line-height: 1.1;
    font-weight: 700;
    color: var(--colprim);
}

.calp2 {
    margin-top: 8px;
}

.calpg {
    width: 100%;
    height: 100%;
    max-height: 360px;
    object-fit: contain;
    display: none;
}

.calcn {
    padding: 22px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.caltg {
    display: inline-flex;
    align-self: flex-start;
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--colgrl);
    color: var(--colprim);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 12px;
}

.calnm {
    font-size: 26px;
    line-height: 1.22;
    color: var(--coldrk);
    margin-bottom: 10px;
    font-weight: 700;
}

.calds {
    font-size: 14px;
    line-height: 1.65;
    color: var(--colgry);
    margin-bottom: 18px;
}

.calmt {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.calmc {
    padding: 13px 14px;
    background: var(--collgt);
    border: 1px solid var(--colgrl);
    border-radius: 5px;
}

.calrt {
    display: block;
    margin-bottom: 5px;
    color: var(--colgry);
    font-size: 12px;
    font-weight: 600;
}

.calmv {
    font-size: 15px;
    color: var(--coldrk);
    font-weight: 600;
    line-height: 1.45;
}

.calnt {
    padding: 14px;
    background: var(--collgt);
    border: 1px solid var(--colgrl);
    border-radius: 5px;
    margin-bottom: 14px;
}

.calnp {
    margin-top: 6px;
    color: var(--coldrk);
    font-size: 14px;
    line-height: 1.6;
}

.calcx {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--colgrl);
}

.calhd {
    margin-bottom: 14px;
}

.calh3 {
    font-size: 20px;
    color: var(--coldrk);
    margin-bottom: 6px;
    font-weight: 600;
}

.calhp {
    color: var(--colgry);
    font-size: 14px;
    line-height: 1.55;
}

.calfr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 180px;
    gap: 12px;
    align-items: end;
    margin-bottom: 14px;
}

.calbt {
    width: 100%;
    padding: 14px;
    background: var(--colprim);
    color: var(--color-white);
    border: none;
    border-radius: 5px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.calbt:hover {
    background: var(--colprid);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(44, 62, 80, 0.18);
}

.calrs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.calrb {
    padding: 14px;
    border: 1px solid var(--colgrl);
    border-radius: 5px;
    background: var(--collgt);
    transition: all 0.3s ease;
}

.calrb:hover {
    border-color: var(--colprim);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
}

.calrv {
    font-size: 18px;
    color: var(--coldrk);
    font-weight: 700;
    line-height: 1.25;
}

.caltv {
    font-size: 24px;
    color: var(--colprim);
    font-weight: 700;
    line-height: 1.2;
}

.caler {
    padding: 18px 20px;
    border-radius: 5px;
    border: 1px solid #f1d5d5;
    background: #fff5f5;
    color: #b23b3b;
    font-size: 15px;
    font-weight: 500;
}

@media (max-width: 1180px) {
    .calgd {
        grid-template-columns: 1fr;
    }

    .calbx {
        position: static;
    }

    .calsc {
        max-height: 300px;
    }
}

@media (max-width: 980px) {
    .calpv {
        grid-template-columns: 1fr;
    }

    .calim {
        min-height: 280px;
        border-right: none;
        border-bottom: 1px solid var(--colgrl);
    }

    .calmt {
        grid-template-columns: 1fr;
    }

    .calfr {
        grid-template-columns: 1fr;
    }

    .calrs {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .calkx {
        padding: 22px 0;
    }

    .calwr {
        padding: 0 16px;
    }

    .caltl {
        font-size: 27px;
    }

    .caltx {
        font-size: 15px;
        margin-bottom: 20px;
    }

    .calbx {
        padding: 16px;
    }

    .calcn {
        padding: 18px 16px;
    }

    .calnm {
        font-size: 22px;
    }

    .calp1,
    .calp2 {
        font-size: 28px;
    }

    .calii {
        width: 54px;
        height: 54px;
    }

    .calsc {
        max-height: 260px;
    }
}

@media (max-width: 480px) {
    .calbr {
        font-size: 13px;
        margin-bottom: 16px;
    }

    .caltl {
        font-size: 24px;
    }

    .calim {
        min-height: 220px;
        padding: 16px;
    }

    .calrv {
        font-size: 17px;
    }

    .calit {
        padding: 9px;
        gap: 9px;
    }

    .caltn {
        font-size: 12px;
    }

    .caltc {
        font-size: 10px;
    }

    .calp1,
    .calp2 {
        font-size: 24px;
    }
}




/* shop.js: balloon Yandex Map и список магазинов (без inline) */
.jbmap-balloon {
    padding: 10px;
    max-width: 300px;
    font-size: 14px;
}
.jbmap-balloon__title {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 8px;
    display: block;
}
.jbmap-balloon__row {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 4px;
}
.jbmap-balloon__row i {
    color: var(--color-primary);
    margin-top: 3px;
    min-width: 14px;
}
.jbmap-balloon__button {
    padding: 8px 16px;
    background: var(--color-primary);
    color: var(--color-white);
    border: 0;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
}
.lokiju {
    transition: background-color 0.3s ease;
}
.lokiju--highlight {
    background-color: var(--color-primary-soft);
}
@keyframes jbmap-flash {
    0%   { background-color: transparent; }
    50%  { background-color: var(--color-primary-strong); }
    100% { background-color: transparent; }
}
.lokiju--flash {
    animation: jbmap-flash 1.5s ease;
}

/* ---- product gallery + admin edit gallery ---------------------- */
.prdgal {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-top: var(--space-md);
}
.prdthumb {
    width: 70px;
    height: 70px;
    padding: 2px;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-white);
    cursor: pointer;
    transition: border-color var(--transition-fast);
}
.prdthumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.prdthumb:hover,
.prdthumb--active {
    border-color: var(--color-primary);
}

.edtgal {
    margin-top: var(--space-xl);
    padding: var(--space-lg);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}
.edtgalgrd {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}
.edtgalitm {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-sm);
    background: var(--color-surface-alt);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
}
.edtgalimg {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    background: var(--color-white);
    border-radius: var(--radius-xs);
}
.edtgaldel {
    padding: var(--space-sm);
    background: var(--color-danger);
    color: var(--color-white);
    border-radius: var(--radius-xs);
    font-size: var(--font-size-sm);
    cursor: pointer;
}
.edtgaladd {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border);
}

.crtwarn {
    color: var(--color-danger);
    font-size: var(--font-size-sm);
    margin-top: var(--space-xs);
}
.edtgalcov {
    padding: var(--space-sm);
    background: var(--color-primary);
    color: var(--color-white);
    border-radius: var(--radius-xs);
    font-size: var(--font-size-sm);
    cursor: pointer;
}

/* ---- admin: история статусов заказа ---- */
.admhist {
    list-style: none;
    padding: 0;
    margin: 0;
}
.admhistit {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--space-sm);
    align-items: baseline;
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--color-border);
    font-size: var(--font-size-sm);
}
.admhistit:last-child {
    border-bottom: 0;
}
.admhistdt {
    color: var(--color-text-muted);
    min-width: 120px;
}
.admhiststt b {
    color: var(--color-primary);
}
.admhistby {
    color: var(--color-text-muted);
}
.admhistrz {
    grid-column: 1 / -1;
    padding: var(--space-xs) 0 0;
    color: var(--color-text-dim);
    font-style: italic;
}

/* =======================================================================
 * checkout: блок оформления с выбором доставки
 * ======================================================================= */
.crtfset {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-md) var(--space-lg) var(--space-lg);
    margin: 0 0 var(--space-lg);
    background: var(--color-white);
}
.crtfleg {
    padding: 0 var(--space-sm);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.crtreqs {
    color: var(--color-danger);
    margin-left: 2px;
}
.crtdlvopts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}
.crtdlvopt {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
        "icon title"
        "icon desc";
    column-gap: var(--space-sm);
    padding: var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    background: var(--color-white);
}
.crtdlvopt:hover {
    border-color: var(--color-primary);
}
.crtdlvopt input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.crtdlvopt--active {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-primary-soft);
}
.crtdlvicn {
    grid-area: icon;
    align-self: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-circle);
    background: var(--color-primary-soft);
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-md);
}
.crtdlvttl {
    grid-area: title;
    font-weight: 600;
    color: var(--color-text);
    font-size: var(--font-size-base);
}
.crtdlvdsc {
    grid-area: desc;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    line-height: 1.3;
}
.crtdlvaddr {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
    padding: var(--space-md);
    background: var(--color-surface-alt);
    border-radius: var(--radius-sm);
}
.crtdlvaddr[hidden] {
    display: none;
}
@media (max-width: 600px) {
    .crtdlvaddr {
        grid-template-columns: 1fr;
    }
    .crtdlvopts {
        grid-template-columns: 1fr;
    }
}

/* =======================================================================
 * catalog: фильтры в сетке + бренд-чипсы
 * ======================================================================= */
.catfhdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    flex-wrap: wrap;
    width: 100%;
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--space-md);
}
.catfcnt {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}
.catfcnt b {
    color: var(--color-primary);
    font-weight: 600;
}
.catfrst {
    font-size: var(--font-size-sm);
    color: var(--color-danger);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    transition: background var(--transition-fast);
}
.catfrst:hover {
    background: rgba(231, 76, 60, 0.08);
}
.catfgrid {
    display: grid;
    grid-template-columns: 2fr 1fr 2fr;
    gap: var(--space-md);
    width: 100%;
    align-items: end;
}
.catflbl {
    display: block;
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-xs);
}
.catflt {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
}
.catflt .catfls {
    min-width: 0;
    width: 100%;
}
.catfbrand {
    display: flex;
    gap: var(--space-xs);
    flex-wrap: wrap;
}
.catfchip {
    display: inline-flex;
    align-items: center;
    padding: 9px 16px;
    border: 1px solid var(--color-border);
    border-radius: 5px;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text);
    background: var(--color-white);
    cursor: pointer;
    transition: all var(--transition-fast);
    user-select: none;
}
.catfchip input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.catfchip:hover {
    border-color: var(--color-primary);
}
.catfchip--on {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}
.catfchip--jb.catfchip--on {
    background: #9b59b6;
    border-color: #9b59b6;
}
.catfchip--dw.catfchip--on {
    background: #f39c12;
    border-color: #f39c12;
}
@media (max-width: 900px) {
    .catfgrid {
        grid-template-columns: 1fr 1fr;
    }
    .catflt--brand {
        grid-column: 1 / -1;
    }
}
@media (max-width: 600px) {
    .catfgrid {
        grid-template-columns: 1fr;
    }
}

/* ---- admin: подсказка под полем категории ---- */
.admcathnt {
    display: block;
    margin-top: var(--space-xs);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    line-height: 1.4;
}