/*
Theme Name: LeoShop Flatsome Child
Theme URI: https://leoshop.vn
Description: Child theme của Flatsome dành riêng cho LeoShop.vn — áp bộ nhận diện màu hồng coral / chàm tím / vàng chanh, font Baloo 2 + Be Vietnam Pro.
Author: LeoShop
Template: flatsome
Version: 1.0.0
Text Domain: leoshop-flatsome-child
*/

/* ==========================================================================
   Bảng màu thương hiệu LeoShop
   Hồng coral #E6297A / Chàm tím #3D2C8D / Vàng chanh #FFC736
   Font: Baloo 2 (tiêu đề) + Be Vietnam Pro (nội dung)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;700;800&family=Be+Vietnam+Pro:wght@400;500;600;700&display=swap');

:root{
  --ls-coral: #E6297A;
  --ls-coral-dark: #A81357;
  --ls-indigo: #3D2C8D;
  --ls-indigo-dark: #251B57;
  --ls-yellow: #FFC736;
  --ls-cream: #FFF7EF;
  --ls-plum: #241B2E;
}

/* ---------- Typography ---------- */
body,
.woocommerce,
p, li, span, input, select, textarea {
  font-family: 'Be Vietnam Pro', sans-serif;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.title, .product-title, .page-title,
.nav-title, a.logo, #logo {
  font-family: 'Baloo 2', sans-serif !important;
  font-weight: 800 !important;
}

/* ---------- Background & text ---------- */
body{
  background-color: var(--ls-cream);
  color: var(--ls-plum);
}

/* ---------- Header ---------- */
#header{
  background-color: #FFFFFF;
  border-bottom: 2px solid var(--ls-plum);
}
#logo, #logo a{
  color: var(--ls-coral) !important;
}
.nav > li > a{
  font-weight: 600;
  color: var(--ls-plum);
}
.nav > li > a:hover,
.nav > li.current > a{
  border-bottom: 3px solid var(--ls-yellow);
}

/* ---------- Buttons ---------- */
.button, button, input[type="submit"],
.woocommerce #respond input#submit,
.woocommerce a.button, .woocommerce button.button{
  background-color: var(--ls-coral) !important;
  border-color: var(--ls-coral) !important;
  color: #FFFFFF !important;
  font-family: 'Baloo 2', sans-serif !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
}
.button:hover, button:hover, input[type="submit"]:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover{
  background-color: var(--ls-coral-dark) !important;
  border-color: var(--ls-coral-dark) !important;
}
.button.is-outline, .button.is-underline{
  color: var(--ls-indigo) !important;
  border-color: var(--ls-indigo) !important;
}

/* ---------- Price & sale badges ---------- */
.price ins, .price .amount, ins .amount{
  color: var(--ls-coral-dark) !important;
  font-family: 'Baloo 2', sans-serif;
  font-weight: 700;
}
.price del{
  color: #9a978f;
}
.onsale, .out-of-stock-label, span.onsale{
  background-color: var(--ls-coral) !important;
  color: #FFFFFF !important;
  font-family: 'Baloo 2', sans-serif;
  font-weight: 700;
  border-radius: 999px;
}

/* ---------- Product cards ---------- */
.product-small, .product-box{
  border: 2px solid var(--ls-plum);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 6px 6px 0 var(--ls-plum);
}
.product-small .box-image, .product-small .image-cover{
  border-radius: 0;
}

/* ---------- Category pill buttons (dùng cho filter danh mục) ---------- */
.category-pill, .flatsome-category-pill{
  background: #FFFFFF;
  border: 2px solid var(--ls-plum);
  border-radius: 999px;
  padding: 10px 22px;
  font-weight: 600;
}
.category-pill.active, .flatsome-category-pill.active{
  background: var(--ls-coral);
  color: #FFFFFF;
  border-color: var(--ls-coral);
}

/* ---------- Hero / Banner (gán class "ls-hero-banner" vào Row trong UX Builder) ---------- */
.ls-hero-banner{
  background-color: var(--ls-indigo) !important;
  color: #FFFFFF !important;
}
.ls-hero-banner h1, .ls-hero-banner h2{
  color: #FFFFFF !important;
}
.ls-hero-banner .eyebrow-badge{
  display: inline-block;
  background: var(--ls-yellow);
  color: var(--ls-plum);
  font-weight: 700;
  padding: 6px 16px;
  border-radius: 999px;
  transform: rotate(-3deg);
}

/* ---------- USP / trust strip (gán class "ls-usp-strip") ---------- */
.ls-usp-strip{
  background-color: var(--ls-plum) !important;
  color: #FFFFFF !important;
}
.ls-usp-strip .icon-box-icon{
  background: var(--ls-yellow) !important;
  color: var(--ls-plum) !important;
  border-radius: 12px;
}

/* ---------- Newsletter block (gán class "ls-newsletter") ---------- */
.ls-newsletter{
  background-color: var(--ls-coral) !important;
  color: #FFFFFF !important;
}
.ls-newsletter input[type="email"]{
  border-radius: 999px;
  border: none;
  padding: 14px 20px;
}
.ls-newsletter button{
  background-color: var(--ls-yellow) !important;
  color: var(--ls-plum) !important;
}

/* ---------- Footer ---------- */
#footer{
  background-color: var(--ls-indigo-dark) !important;
  color: rgba(255,255,255,0.85) !important;
}
#footer h1, #footer h2, #footer h3, #footer h4,
#footer .widget-title{
  color: var(--ls-yellow) !important;
}
#footer a{
  color: rgba(255,255,255,0.75) !important;
}
#footer a:hover{
  color: var(--ls-yellow) !important;
}