/*
Theme Name:   ScanAuto Child (Blocksy)
Theme URI:    https://www.scanauto.ro/
Description:  Temă copil pentru Blocksy, personalizată pentru magazinul ScanAuto.ro — testere diagnoză auto și software.
Author:       ScanAuto.ro
Author URI:   https://www.scanauto.ro/
Template:     blocksy
Version:      1.0.0
Text Domain:  scanauto-child
*/

/* ==========================================================================
   1. Variabile de culoare — schimbă doar aici ca să schimbi toată paleta
   ========================================================================== */
:root {
  --sa-dark:      #12181f;   /* bleumarin închis - header/footer/hero */
  --sa-dark-soft: #1b2530;
  --sa-accent:    #e01e26;   /* roșu - butoane, preț, accente */
  --sa-accent-2:  #b8181f;   /* hover */
  --sa-green:     #16a34a;   /* în stoc, transport gratuit */
  --sa-line:      #e2e8f0;
  --sa-muted:     #64748b;
}

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 16px; }

/* ==========================================================================
   2. Bara de anunț (transport gratuit)
   ========================================================================== */
.sa-topbar {
  background: var(--sa-accent);
  color: #fff;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 15px;
  letter-spacing: .2px;
}
.sa-topbar a { color: #fff; text-decoration: underline; }

/* ==========================================================================
   3. Carduri de produs
   ========================================================================== */
.woocommerce ul.products li.product {
  background: #fff;
  border: 1px solid var(--sa-line);
  border-radius: 10px;
  padding: 14px;
  transition: box-shadow .18s ease, transform .18s ease;
}
.woocommerce ul.products li.product:hover {
  box-shadow: 0 8px 22px rgba(15, 23, 32, .10);
  transform: translateY(-3px);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 15px;
  line-height: 1.35;
  font-weight: 600;
  min-height: 3em;
}
.woocommerce ul.products li.product .price {
  color: var(--sa-accent);
  font-weight: 700;
  font-size: 18px;
}
.woocommerce ul.products li.product .price del {
  color: var(--sa-muted);
  font-weight: 400;
  font-size: 14px;
}

/* Eticheta de reducere */
.woocommerce span.onsale {
  background: var(--sa-accent);
  color: #fff;
  border-radius: 4px;
  font-weight: 700;
  font-size: 12px;
  padding: 4px 10px;
  min-height: auto;
  min-width: auto;
  line-height: 1.6;
}

/* ==========================================================================
   4. Butoane
   ========================================================================== */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
  background: var(--sa-accent);
  color: #fff;
  border-radius: 6px;
  font-weight: 600;
  letter-spacing: .2px;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
  background: var(--sa-accent-2);
  color: #fff;
}

/* ==========================================================================
   5. Grilă de categorii pe prima pagină (shortcode [sa_categorii])
   ========================================================================== */
.sa-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
  margin: 30px 0;
}
.sa-cat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 22px 14px;
  background: #fff;
  border: 1px solid var(--sa-line);
  border-radius: 10px;
  text-decoration: none;
  color: var(--sa-dark);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.35;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.sa-cat-card:hover {
  border-color: var(--sa-accent);
  box-shadow: 0 6px 18px rgba(15, 23, 32, .08);
  color: var(--sa-dark);
}
.sa-cat-card img { width: 100%; height: 130px; object-fit: contain; }
.sa-cat-card .sa-cat-count { font-size: 13px; font-weight: 400; color: var(--sa-muted); }

/* ==========================================================================
   6. Bara de încredere (shortcode [sa_incredere])
   ========================================================================== */
.sa-trust {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
  margin: 26px 0;
}
.sa-trust-item {
  background: #f8fafc;
  border: 1px solid var(--sa-line);
  border-radius: 10px;
  padding: 18px;
  text-align: center;
}
.sa-trust-item strong { display: block; font-size: 15px; margin-bottom: 4px; color: var(--sa-dark); }
.sa-trust-item span   { font-size: 13px; color: var(--sa-muted); line-height: 1.45; }

/* ==========================================================================
   7. Pagina de produs — mesaje suport
   ========================================================================== */
.sa-product-note {
  border-left: 3px solid var(--sa-green);
  background: #f0fdf4;
  padding: 12px 16px;
  margin: 18px 0;
  font-size: 14px;
  line-height: 1.55;
  border-radius: 0 6px 6px 0;
}
.sa-product-note strong { color: #14532d; }

.sa-wa-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #25D366;
  color: #fff !important;
  padding: 11px 20px;
  border-radius: 6px;
  font-weight: 600;
  text-decoration: none;
  margin: 12px 0;
  font-size: 15px;
}
.sa-wa-btn:hover { background: #1da851; }

/* ==========================================================================
   8. Corecții mărunte
   ========================================================================== */
/* Ascunde titlul duplicat din alt-ul imaginii, dacă apare */
.woocommerce ul.products li.product a img + span.screen-reader-text { display: none; }

/* Coș gol - centrat */
.woocommerce .cart-empty { text-align: center; font-size: 17px; }

@media (max-width: 600px) {
  .woocommerce ul.products li.product .woocommerce-loop-product__title { min-height: auto; font-size: 14px; }
  .sa-cat-card img { height: 100px; }
}

/* ==========================================================================
   9. Pagina Acasă — Banner principal (Hero)
   ========================================================================== */
.sa-hero {
  background: linear-gradient(100deg, #12181f 0%, #1f2b38 55%, #33414f 100%);
  color: #fff;
}
.sa-hero .wrap { padding: 52px 16px; }
.sa-hero .kick {
  color: var(--sa-accent); font-weight: 700; letter-spacing: 2px;
  font-size: 13px; text-transform: uppercase;
}
.sa-hero h1 {
  font-size: clamp(26px, 4.6vw, 44px); line-height: 1.15;
  margin: 10px 0 14px; max-width: 660px; font-weight: 800; color: #fff;
}
.sa-hero p { color: #c3cdd7; max-width: 560px; margin: 0 0 24px; }
.sa-btn {
  display: inline-block; background: var(--sa-accent); color: #fff;
  padding: 13px 26px; border-radius: 3px; font-weight: 700;
  text-transform: uppercase; font-size: 14px; letter-spacing: .4px;
  text-decoration: none; border: 2px solid var(--sa-accent);
}
.sa-btn:hover { background: var(--sa-accent-2); border-color: var(--sa-accent-2); color: #fff; }
.sa-btn.sa-ghost { background: transparent; border: 2px solid #fff; margin-left: 10px; color: #fff; }
.sa-btn.sa-ghost:hover { background: #fff; color: var(--sa-dark); }

/* ==========================================================================
   10. Titlu de secțiune (deasupra benzilor de produse)
   ========================================================================== */
.sa-head { text-align: center; margin: 44px 0 28px; }
.sa-head small {
  color: var(--sa-accent); font-weight: 700; text-transform: uppercase;
  letter-spacing: 2px; font-size: 12px;
}
.sa-head h2 { margin: 6px 0 0; font-size: clamp(21px, 3vw, 30px); font-weight: 800; }
.sa-head i {
  display: block; width: 56px; height: 3px; background: var(--sa-accent);
  margin: 12px auto 0; font-style: normal;
}
.sa-section { padding: 10px 0 44px; }
.sa-section.sa-alt { background: #f5f7f9; }

/* ==========================================================================
   11. Bandă CTA WhatsApp
   ========================================================================== */
.sa-band { background: var(--sa-dark); color: #fff; }
.sa-band .wrap {
  padding: 38px 16px; display: flex; gap: 20px; flex-wrap: wrap;
  align-items: center; justify-content: space-between;
}
.sa-band h3 { margin: 0 0 6px; font-size: 22px; font-weight: 800; color: #fff; }
.sa-band p { margin: 0; color: #b6c1cc; font-size: 14px; }
.sa-band .sa-btn { background: #25d366; border-color: #25d366; }
.sa-band .sa-btn:hover { background: #1da851; border-color: #1da851; }

/* ==========================================================================
   12. Articole recente pe pagina Acasă
   ========================================================================== */
.sa-posts { display: grid; grid-template-columns: repeat(auto-fit, minmax(265px, 1fr)); gap: 18px; }
.sa-post {
  border: 1px solid var(--sa-line); border-radius: 4px; overflow: hidden;
  background: #fff; text-decoration: none; color: inherit; display: block;
}
.sa-post img { width: 100%; height: 150px; object-fit: cover; display: block; }
.sa-post .sa-pb { padding: 15px; }
.sa-post .sa-dt { font-size: 12px; color: var(--sa-accent); font-weight: 700; text-transform: uppercase; }
.sa-post h4 { margin: 6px 0 8px; font-size: 15px; line-height: 1.4; color: var(--sa-dark); }

@media (max-width: 700px) {
  .sa-btn.sa-ghost { margin-left: 6px; padding: 11px 18px; }
}

/* ==========================================================================
   13. Grilă categorii cu iconițe (identic cu mockup-ul aprobat)
   ========================================================================== */
.sa-cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.sa-cat {
  background: #f5f7f9; border: 1px solid var(--sa-line); border-radius: 4px;
  padding: 26px 14px; text-align: center; transition: .18s; display: block;
  text-decoration: none; color: inherit;
}
.sa-cat:hover { border-color: var(--sa-accent); transform: translateY(-3px); }
.sa-cat .sa-ic { font-size: 34px; line-height: 1; }
.sa-cat b { display: block; margin: 12px 0 4px; font-size: 14px; line-height: 1.35; color: var(--sa-dark); }
.sa-cat span { font-size: 12px; color: var(--sa-muted); }

/* ==========================================================================
   14. Carduri de produs — banda de best-sellers și reduceri (mockup exact)
   ========================================================================== */
.sa-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 16px; }
.sa-card {
  border: 1px solid var(--sa-line); border-radius: 4px; background: #fff;
  display: flex; flex-direction: column; overflow: hidden; position: relative;
  transition: .18s; text-decoration: none; color: inherit;
}
.sa-card:hover { box-shadow: 0 10px 26px rgba(0,0,0,.12); }
.sa-thumb {
  height: 150px; background: #f5f7f9; display: flex; align-items: center;
  justify-content: center; border-bottom: 1px solid var(--sa-line); overflow: hidden;
}
.sa-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sa-sale-tag {
  position: absolute; top: 9px; left: 9px; background: var(--sa-accent); color: #fff;
  font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 2px; letter-spacing: .4px; z-index: 2;
}
.sa-card-body { padding: 13px; display: flex; flex-direction: column; flex: 1; gap: 7px; }
.sa-card-body h3 { margin: 0; font-size: 13.5px; font-weight: 600; line-height: 1.4; min-height: 3.8em; color: var(--sa-dark); }
.sa-stars { color: #f5a623; font-size: 12px; }
.sa-price { font-size: 17px; font-weight: 800; color: var(--sa-accent); margin-top: auto; }
.sa-price del { color: var(--sa-muted); font-weight: 400; font-size: 13px; margin-right: 6px; }
.sa-add {
  display: block; text-align: center; background: var(--sa-dark); color: #fff; padding: 9px;
  border-radius: 3px; font-size: 13px; font-weight: 700; text-transform: uppercase;
}
.sa-card:hover .sa-add { background: var(--sa-accent); }

/* ==========================================================================
   15. Recenzii clienți
   ========================================================================== */
.sa-revs { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.sa-rev { background: #f5f7f9; border: 1px solid var(--sa-line); border-radius: 4px; padding: 20px; }
.sa-rev p { margin: 8px 0 12px; font-size: 14px; font-style: italic; color: var(--sa-dark); }
.sa-rev b { font-size: 13px; color: var(--sa-muted); }

/* ==========================================================================
   16. Caseta Bază de Date VAG (păstrată din site-ul curent)
   ========================================================================== */
.sa-vag { background: var(--sa-dark); color: #fff; padding: 30px 0; }
.sa-vag-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center;
}
.sa-vag-img img { width: 100%; border-radius: 6px; display: block; }
.sa-vag-text h2 { color: var(--sa-accent); font-size: 22px; margin: 0 0 14px; line-height: 1.3; }
.sa-vag-text p { color: #dbe2e9; margin: 0 0 14px; }
.sa-vag-list { list-style: none; margin: 0 0 16px; padding: 0; }
.sa-vag-list li { padding: 4px 0; color: #fff; font-size: 14px; }
@media (max-width: 700px) {
  .sa-vag-grid { grid-template-columns: 1fr; }
}

/* Banda de titlu "Catalog produse" */
.sa-band-title { background: var(--sa-accent); padding: 14px 0; text-align: center; }
.sa-band-title h2 { color: #fff; margin: 0; font-size: 18px; letter-spacing: .5px; text-transform: uppercase; }