/* =============================
   Global Variables
============================= */
:root {
  --color-primary: #ff6600;
  --color-primary-hover: #e65c00;
  --color-dark: #222;
  --color-light: #fff;
  --color-gray: #f5f5f5;
  --color-border: #ddd;
  --radius: 6px;
  --transition: 0.25s;
  --shadow: 0 2px 8px rgba(0,0,0,0.1);
  --max-width: 1200px;
  --font-base: 16px;
  --font-large: 20px;
}

/* =============================
   Global Resets
============================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: Arial, sans-serif;
  font-size: var(--font-base);
  line-height: 1.6;
  color: var(--color-dark);
  background: var(--color-gray);
}
img {
  max-width: 100%;
  display: block;
}

/* =============================
   Layout & Containers
============================= */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 15px;
}

.flex { display: flex; align-items: center; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.flex-center { display: flex; justify-content: center; align-items: center; }

/* =============================
   Typography
============================= */
h1 { font-size: 2em; margin-bottom: 20px; }
h2 { font-size: 1.75em; margin-bottom: 15px; }
h3 { font-size: 1.5em; margin-bottom: 10px; }
p { margin-bottom: 15px; }

/* =============================
   Buttons
============================= */
.btn {
  display: inline-block;
  padding: 10px 18px;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 16px;
  transition: var(--transition);
  text-decoration: none;
}
.btn-primary { background: var(--color-primary); color: #fff; }
.btn-primary:hover { background: var(--color-primary-hover); }
.btn-outline { border: 2px solid var(--color-primary); color: var(--color-primary); }
.btn-outline:hover { background: var(--color-primary); color: #fff; }

/* =============================
   Forms
============================= */
input, select, textarea { width: 100%; padding: 10px; border: 1px solid var(--color-border); border-radius: var(--radius); margin-bottom: 15px; font-size: 16px; }

/* =============================
   Cards & Blocks
============================= */
.card { background: #fff; border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); margin-bottom: 20px; }
.product-detail { display: flex; gap: 20px; margin-bottom: 30px; }
.product-images { flex: 1; }
.product-info { flex: 1; }
.product-info h2 { margin-top: 0; }
.thumb { max-width: 100px; border-radius: var(--radius); }

/* =============================
   Header / Footer base hooks
============================= */
header, footer { background: #fff; padding: 15px 0; box-shadow: var(--shadow); }
header h1 { margin-left: 15px; }
header nav a { margin: 0 10px; text-decoration: none; color: var(--color-dark); }
header nav a:hover { color: var(--color-primary); }
footer { text-align: center; font-size: 0.9em; color: #666; }

/* =============================
   Utility Classes
============================= */
.mt-20 { margin-top: 20px; }
.mb-20 { margin-bottom: 20px; }
.text-center { text-align: center; }
.bold { font-weight: bold; }
.error { color: red; margin-bottom: 15px; }

/* =============================
   Responsive
============================= */
@media (max-width: 992px) { /* Tablets */
  .product-detail { flex-direction: column; }
  .flex-between { flex-direction: column; gap: 10px; }
}
@media (max-width: 768px) { /* Mobile */
  header, footer { padding: 10px 0; }
  .container { padding: 0 10px; }
  .btn { width: 100%; text-align: center; }
  header nav a { display: block; margin: 5px 0; }
}

/* Toast (правая верхняя) */
.cart-toast {
    position: fixed;
    top: 20px;
    right: 20px;
    background: #1e88e5;
    color: #fff;
    padding: 10px 16px;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    z-index: 1200;
    transform: translateY(-10px);
    opacity: 0;
    transition: opacity .25s ease, transform .25s ease;
    pointer-events: none;
    font-weight: 600;
}
.cart-toast.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}