/*
 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
*/

/* 1. TỔNG */
/* 1.1 Định nghĩa màu sắc chung cho toàn site */
:root{
  --sanota-accent:#ffd400; /* yellow */
  --sanota-dark:#222;
}
/* 1.2 Tổng khung website */
/* 1.2.1 Tổng khung website full */
.container, 
.site-content, 
.ast-container, 
.ast-builder-grid-row-container-inner,
.site-header .ast-container, 
.site-footer .ast-container {
  max-width: 1200px;   /* Giới hạn chiều rộng nội dung */
  margin: 0 auto;      /* Căn giữa nội dung */
  padding-left: 0vw;   /* Tạo khoảng cách hai bên linh hoạt */
  padding-right: 0vw;
  box-sizing: border-box;
}
/* 1.2.2 Tổng khung website mobile */
@media (max-width: 1024px) {
  .container,
  .site-content,
  .ast-container,
  .ast-builder-grid-row-container-inner {
    max-width: 100%;
    padding-left: 0vw;
    padding-right: 0vw;
  }
}

/* 2. EDIT PRODUCT CATAGORY ARCHIVE */
/* 2.1 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%;
    aspect-ratio: 5 / 6; /* tỷ lệ 5:6 */
    object-fit: cover;   /* cắt ảnh cho vừa khung */
    display: block;
    border-radius: 3px;
}

/* 2.2 BADGE HIỂN THỊ % GIẢM GIÁ (SALE BADGE) 
 * File Functions 2.
*/
/* 2.2.1 Ẩn nhãn sale! của theme astra mới */
.ast-on-card-button.ast-onsale-card,
.ast-onsale-card {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}
/* 2.2.2 Badge hiển thị % giảm giá (sale badge) */
.sanota-sale-badge {
  position: absolute;
  top: 1vw;                 /* cách trên theo tỉ lệ màn hình */
  left: 1vw;                /* cách trái theo tỉ lệ màn hình */
  background-color: #ffcc00; /* màu nền vàng */
  color: #000;            /* màu chữ đen */
  width: clamp(26px, 3vw, 35px);     /* tự co giãn: min 24px, max 40px */
  height: clamp(26px, 3vw, 35px);
  border-radius: 50%;     /* làm tròn badge */
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: clamp(8px, 1.2vw, 13px);  /* font chữ linh hoạt */
  box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
  z-index: 10;
}

/* 2.2.3 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;
}
/* 3. EDIT PRODUCT SINGLE PAGE */
/* 3.1 ĐIỀU CHỈNH KÍCH THƯỚC ẢNH TRONG GALLERY CHI TIẾT SẢN PHẨM */
/* 3.1.1 Cố định kích thước ảnh trong gallery chi tiết sản phẩm */
/* 3.1.1.1 Ảnh chính của sản phẩm */
.woocommerce div.product div.images img {
    width: 100%;
    aspect-ratio: 5 / 6; /* tỷ lệ 5:6 */
    object-fit: cover; /* cắt ảnh vừa khung */
		border-radius: 3px;
	margin-bottom: 10px; /* thêm khoảng cách giữa ảnh lớn và ảnh nhỏ */
}
/* 3.1.1.2 Ảnh nhỏ bên dưới (gallery thumbnails) */
.woocommerce div.product div.images .flex-control-thumbs li img {
    width: 100%;
    aspect-ratio: 5 / 6; /* tỷ lệ 5:6 */
    object-fit: cover;
		border-radius: 3px;
}

/* 4. 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); }