/*
Theme Name: mawaa България (child)
Theme URI: https://mawaa.bg
Description: Child тема на Hello Elementor за mawaa България. Съдържа глобалните дизайн-токени, типографията с кирилица и стиловете за WooCommerce по спецификацията от design_handoff_mawaa_bg.
Author: mawaa
Template: hello-elementor
Version: 1.0.0
Text Domain: mawaa-child
*/

/* ============================================================
   1. ДИЗАЙН-ТОКЕНИ  (DESIGN_TOKENS.md)
   ============================================================ */
:root {
  /* Цветове - Elementor Global Colors */
  --mw-primary:   #2F4460;   /* марково синьо: бутони, цени, акценти, икони */
  --mw-secondary: #141E2B;   /* тъмна лента, footer, тъмни секции, dark бутон */
  --mw-text:      #141E2B;   /* заглавия и основен текст */
  --mw-accent:    #C8102E;   /* САМО промоции: -24%, баджове, „Промоции“, „Спестяваш“ */

  /* Цветове - допълнителни (Global Colors → Custom) */
  --mw-body:      #2E3846;   /* параграфи, описания */
  --mw-muted:     #5A6778;   /* второстепенен текст, спецификации, стари цени, placeholder */
  --mw-border:    #C9D3DE;   /* рамки на карти, полета, разделители */
  --mw-surface:   #E8EDF3;   /* светли секции, търсачка, ъпсел блокове, статистики */
  --mw-white:     #FFFFFF;

  /* Скала за отстъпи: 4 / 8 / 12 / 16 / 20 / 26 / 36 / 44 / 56 / 70 */
  --mw-s1: 4px;  --mw-s2: 8px;  --mw-s3: 12px; --mw-s4: 16px; --mw-s5: 20px;
  --mw-s6: 26px; --mw-s7: 36px; --mw-s8: 44px; --mw-s9: 56px; --mw-s10: 70px;

  /* Радиуси */
  --mw-r-badge: 4px;   /* промо баджове, малки етикети */
  --mw-r-ctrl:  6px;   /* бутони, полета, продуктови карти, thumbnails */
  --mw-r-card:  8px;   /* големи карти, блокове с гаранция, изображения */
  --mw-r-pill:  999px; /* чипове за филтри, tag pills */

  /* Рамки */
  --mw-line:      1px solid var(--mw-border);
  --mw-line-active: 2px solid var(--mw-primary);

  /* Типография */
  --mw-font-head: "Golos Text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mw-font-body: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Ширини */
  --mw-content: 1200px;
  --mw-narrow:  840px;

  /* Преход */
  --mw-t: 150ms ease;
}

/* ============================================================
   2. БАЗА / ТИПОГРАФИЯ
   ============================================================ */
body {
  font-family: var(--mw-font-body);
  color: var(--mw-body);
  background: var(--mw-white);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .mw-head {
  font-family: var(--mw-font-head);
  color: var(--mw-text);
  font-weight: 800;
  margin: 0 0 var(--mw-s4);
}

h1 { font-size: 40px; letter-spacing: -0.028em; line-height: 1.06; }
h2 { font-size: 28px; letter-spacing: -0.02em;  line-height: 1.1; }
h3 { font-size: 20px; letter-spacing: -0.01em;  line-height: 1.2; }

p  { margin: 0 0 var(--mw-s4); }
a  { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }

.mw-eyebrow {           /* СТЪПКА 1 · ТЕСТО · 45 МИН */
  font-family: var(--mw-font-body);
  font-weight: 800;
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mw-primary);
}
.mw-muted { color: var(--mw-muted); }
.mw-small { font-size: 12.5px; color: var(--mw-muted); }

@media (max-width: 767px) {
  h1 { font-size: 25px; }
  h2 { font-size: 19px; }
  body { font-size: 15px; }
}

/* ============================================================
   3. БУТОНИ  (важи и за Elementor .elementor-button, и за Woo .button)
   ============================================================ */
.mw-btn,
.elementor-button.mw-btn,
a.button.mw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mw-s2);
  font-family: var(--mw-font-body);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  padding: 16px 30px;
  border-radius: var(--mw-r-ctrl);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background var(--mw-t), color var(--mw-t), border-color var(--mw-t);
}

/* Primary - !important на color: Elementor slaga globalen "a { color: ... }" ot kit-a
   (по-висока специфичност от гол .mw-btn клас), който иначе прави текста невидим
   когато бутонът е суров <a> в HTML widget (напр. хиро карусела), не Elementor button widget. */
.mw-btn--primary { background: var(--mw-primary); color: #fff !important; border-color: var(--mw-primary); }
.mw-btn--primary:hover { background: #283a52; border-color: #283a52; color: #fff !important; }

/* Dark - „Добави в количката“ в картите, „Купи сега“ в хирото */
.mw-btn--dark { background: var(--mw-secondary); color: #fff !important; border-color: var(--mw-secondary); }
.mw-btn--dark:hover { background: #0c131c; border-color: #0c131c; color: #fff !important; }

/* Secondary - прозрачен, рамка */
.mw-btn--ghost { background: transparent; color: var(--mw-secondary) !important; border-color: var(--mw-secondary); }
.mw-btn--ghost:hover { background: var(--mw-secondary); color: #fff !important; }

@media (max-width: 767px) {
  .mw-btn, .elementor-button.mw-btn, a.button.mw-btn {
    padding: 15px 24px; border-radius: 10px; font-size: 15px;
  }
}

/* ============================================================
   4. ПОМОЩНИ БЛОКОВЕ
   ============================================================ */
.mw-badge {                 /* -24%, СЕПТЕМВРИЙСКА ПРОМОЦИЯ */
  display: inline-block;
  background: var(--mw-accent);
  color: #fff;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.02em;
  padding: 4px 8px;
  border-radius: var(--mw-r-badge);
}
.mw-card {
  background: #fff;
  border: var(--mw-line);
  border-radius: var(--mw-r-card);
  padding: var(--mw-s5);
}
.mw-surface { background: var(--mw-surface); }
.mw-price {
  font-family: var(--mw-font-head);
  font-weight: 800;
  color: var(--mw-primary);
  line-height: 1;
}
.mw-price--old {
  color: var(--mw-muted);
  text-decoration: line-through;
  font-weight: 500;
}

/* Placeholder за изображения (докато няма реални снимки) */
.mw-imgph {
  background: repeating-linear-gradient(135deg, #CFD8E2 0 9px, #E2E8EF 9px 18px);
  display: flex; align-items: center; justify-content: center;
  color: #5F6B79; font: 600 11px ui-monospace, Menlo, monospace;
}

/* Махни default сенките на Elementor - дизайнът разделя с рамки, не със сенки */
.elementor-widget-container { box-shadow: none !important; }

/* ============================================================
   5. ГОРНА ЛЕНТА / HEADER / FOOTER
   (глобални части се правят с безплатния HFE плъгин; тук са стиловете)
   ============================================================ */
.mw-topbar {
  background: var(--mw-secondary);
  color: #fff;
  font-weight: 600;
  font-size: 12.5px;
  padding: 9px 20px;
  text-align: center;
}
.mw-topbar .sep { opacity: 0.35; margin: 0 12px; }

.mw-header {
  background: #fff;
  border-bottom: var(--mw-line);
  padding: 16px 36px;
}
.mw-logo {
  font-family: var(--mw-font-head);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -0.02em;
  color: var(--mw-text);
}
.mw-logo .dot { color: var(--mw-primary); }

.mw-nav a { font-weight: 600; font-size: 14px; color: var(--mw-text); }
.mw-nav a:hover,
.mw-nav .current-menu-item > a { color: var(--mw-primary); }
.mw-nav .mw-promo > a,
.mw-nav a.mw-promo { color: var(--mw-accent); }

.mw-footer {
  background: var(--mw-secondary);
  color: rgba(255,255,255,0.7);
  padding: 40px 36px;
}
.mw-footer h4 {
  color: #fff; font-family: var(--mw-font-body);
  font-weight: 800; font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; margin: 0 0 12px;
}
.mw-footer a { color: rgba(255,255,255,0.7); font-size: 13.5px; }
.mw-footer a:hover { color: #fff; }
.mw-footer--slim {
  padding: 22px 36px; font-size: 13px; color: rgba(255,255,255,0.6);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
}

@media (max-width: 767px) {
  .mw-header { padding: 14px 18px; }
  .mw-topbar { font-size: 11.5px; padding: 8px; }
  /* sticky таб бар долу */
  .mw-tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 999;
    background: #fff; border-top: var(--mw-line);
    display: flex; justify-content: space-around; padding: 10px 0;
    font-weight: 600; font-size: 11.5px; color: var(--mw-muted);
  }
  .mw-tabbar .active { color: var(--mw-primary); }
}

/* ============================================================
   6. WOOCOMMERCE - общи
   Цените се форматират през WP настройки (189,00 €). Тук е визуалът.
   ============================================================ */
.woocommerce-page,
.woocommerce {
  --wc-primary: var(--mw-primary);
}

/* цени */
.woocommerce .price,
.woocommerce ul.products li.product .price {
  font-family: var(--mw-font-head);
  font-weight: 800;
  color: var(--mw-text);
}
.woocommerce div.product p.price,
.woocommerce div.product span.price { font-size: 38px; color: var(--mw-primary); }
.woocommerce .price del {
  color: var(--mw-muted); font-weight: 500; opacity: 1;
  font-size: 0.72em;
}
.woocommerce .price ins { text-decoration: none; color: var(--mw-primary); }

/* бутони на Woo → dark стил в картите, primary на продуктовата страница */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  background: var(--mw-secondary);
  color: #fff;
  border-radius: var(--mw-r-ctrl);
  font-family: var(--mw-font-body);
  font-weight: 700;
  font-size: 13.5px;
  padding: 11px 18px;
  border: none;
  transition: background var(--mw-t);
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover { background: #0c131c; }

.woocommerce div.product form.cart .button.single_add_to_cart_button,
.woocommerce #payment #place_order,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
  background: var(--mw-primary);
  font-size: 15.5px;
  padding: 17px 30px;
}
.woocommerce div.product form.cart .button.single_add_to_cart_button:hover,
.woocommerce #payment #place_order:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover { background: #283a52; }

/* продуктов лист */
.woocommerce ul.products {
  gap: 18px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { display: none; }
.woocommerce ul.products li.product {
  width: 100% !important;
  margin: 0 !important;
  float: none !important;
  border: var(--mw-line);
  border-radius: var(--mw-r-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.woocommerce ul.products li.product .woocommerce-loop-product__link { padding: 0; }
.woocommerce ul.products li.product img { margin: 0; border-radius: 0; }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--mw-font-body);
  font-weight: 700;
  font-size: 14.5px;
  line-height: 1.3;
  padding: 14px 16px 0;
}
.woocommerce ul.products li.product .price { padding: 0 16px; font-size: 20px; }
.woocommerce ul.products li.product .button { margin: 12px 16px 16px; text-align: center; display: block; }

/* промо бадж върху картата */
.woocommerce span.onsale {
  background: var(--mw-accent);
  color: #fff;
  border-radius: var(--mw-r-badge);
  font-weight: 800;
  font-size: 11px;
  min-height: auto;
  min-width: auto;
  padding: 4px 8px;
  top: 10px; left: 10px; right: auto; margin: 0;
}

/* рейтинг звезди в марковото синьо */
.woocommerce .star-rating span::before,
.woocommerce p.stars a::before { color: var(--mw-primary); }

/* табове на продукта */
.woocommerce div.product .woocommerce-tabs ul.tabs { padding: 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { border-color: var(--mw-border); }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: transparent; border: none; border-radius: 0;
  font-weight: 700; font-size: 14px; padding: 0 30px 0 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a { padding: 16px 0; color: var(--mw-muted); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--mw-text);
  box-shadow: inset 0 -2px 0 var(--mw-primary);
}

/* количество */
.woocommerce .quantity .qty {
  border: var(--mw-line);
  border-radius: var(--mw-r-ctrl);
  padding: 12px 8px;
}

/* кошница / checkout ширина */
.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce {
  max-width: var(--mw-narrow);
  margin: 0 auto;
}
.woocommerce table.shop_table {
  border: var(--mw-line);
  border-radius: var(--mw-r-card);
}
.woocommerce-cart table.cart td.actions .coupon .input-text { border: var(--mw-line); border-radius: var(--mw-r-ctrl); }
.woocommerce .cart_totals h2,
.woocommerce-checkout #order_review_heading { font-size: 20px; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container .select2-selection--single {
  border: var(--mw-line);
  border-radius: var(--mw-r-ctrl);
  padding: 13px 14px;
  font-size: 14px;
}

/* „Спестяваш“ ред в кошницата - червено */
.woocommerce-cart .cart-discount,
.mw-save { color: var(--mw-accent); font-weight: 700; }

/* breadcrumbs */
.woocommerce .woocommerce-breadcrumb {
  font-size: 13px; color: var(--mw-muted); margin-bottom: 14px;
}

/* филтри (WOOF / ShopLentor) чипове */
.mw-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--mw-surface);
  border-radius: var(--mw-r-pill);
  padding: 7px 13px;
  font-size: 12.5px; font-weight: 600;
}

/* извън склад */
.woocommerce ul.products li.product.outofstock { opacity: 0.75; }
.woocommerce ul.products li.product.outofstock .button { background: transparent; color: var(--mw-secondary); border: 1.5px solid var(--mw-secondary); }

/* ============================================================
   7. RESPONSIVE BREAKPOINTS
   мобилно ≤767 · таблет 768–1024 · desktop ≥1025
   ============================================================ */
@media (max-width: 1024px) {
  .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .woocommerce ul.products { grid-template-columns: 1fr; }
  .woocommerce div.product p.price,
  .woocommerce div.product span.price { font-size: 30px; }
  body { padding-bottom: 64px; } /* място за sticky таб бара */
}