/*
 Theme Name: Astra Sanota
 Theme URI:  https://sanota.net
 Author: Sanota Lighting
 Author URI: mailto:cnvbank@gmail.com
 Description: Child theme of Astra, created for Sanota Lighting. Includes WooCommerce adjustments and utilities.
 Version: 1.0.0
 Template: astra
 Text Domain: astra-sanota
*/

/* === SANOTA: Định nghĩa màu sắc chung cho toàn site === */
:root{
  --sanota-accent:#ffd400; /* yellow */
  --sanota-dark:#222;
}

/* Ensure child styles load after parent */

/* Ẩn nhãn Sale! của Astra mới */
.ast-on-card-button.ast-onsale-card,
.ast-onsale-card {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Cài đặt chiều cao ảnh sản phẩm trong lưới sản phẩm */
.woocommerce ul.products li.product a img{
  width:100%;
  height:260px; /* default height for desktop */
  object-fit:cover;
  display:block;
}

/* Badge hiển thị % giảm giá (Sale Badge) */
.sanota-sale-badge{
  position:absolute;
  top: 12px;              /* khoảng cách từ viền trên */
  right: 12px;            /* khoảng cách từ viền phải */
  background:var(--sanota-accent);
  background-color: #ffcc00; /* màu nền vàng */
  color: #000;            /* màu chữ đen */
  width:46px;
  height:46px;
  border-radius: 50%;     /* làm tròn badge */
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:14px;
  box-shadow:0 2px 6px rgba(0,0,0,.12);
  z-index:10;
}

/* Căn badge hiển thị % giảm giá đúng vị trí trong khung sản phẩm */
.woocommerce ul.products li.product{
  position:relative;
}

/* Cố định kích thước ảnh trong gallery chi tiết sản phẩm */
.woocommerce-product-gallery__image img,
.woocommerce-product-gallery .flex-control-thumbs img{
  width:100%;
  height:80px;
  object-fit:cover;
}

/* Responsive (hiển thị đẹp trên mọi màn hình) */
@media (max-width: 1024px){
  .woocommerce ul.products li.product a img{ height:220px; }
  .sanota-sale-badge{ width:40px;height:40px;font-size:13px; top:10px; right:10px; }
}
@media (max-width: 768px){
  .woocommerce ul.products li.product a img{ height:180px; }
  .sanota-sale-badge{ width:36px;height:36px;font-size:12px; top:8px; right:8px; }
}
@media (max-width: 480px){
  .woocommerce ul.products li.product a img{ height:150px; }
  .sanota-sale-badge{ width:32px;height:32px;font-size:11px; top:6px; right:6px; }
}

/* Lớp helper nhỏ cho chữ 
 * Đây là class tiện dụng, bạn có thể áp dụng trong bất kỳ phần tử HTML nào (ví dụ <p class="sanota-note">...</p>)
 *→ để đổi màu chữ về tông màu tối của thương hiệu (--sanota-dark).
*/
.sanota-note{ color:var(--sanota-dark); }