/*
Theme Name:   Handmade Etsy Style
Theme URI:    https://TENMIEN-CUA-BAN.com/
Description:  Child theme của Twenty Twenty-Five cho shop handmade bán sang Mỹ và Úc. Bố cục kiểu Etsy, tông xanh da trời, giá đã cộng sẵn phí ship, giảm giá theo số lượng. Dựng theo BlueprintWebsiteHandmade.docx mục 10.
Author:       TEN-CUA-BAN
Template:     twentytwentyfive
Version:      1.0.0
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
License:      GPL-2.0-or-later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  handmade-etsy
Tags:         e-commerce, block-patterns, full-site-editing
*/

/* ==========================================================================
   Bảng màu — Blueprint mục 10.1. Mọi cặp màu đã đo tương phản theo WCAG 2.1.
   ĐỪNG đổi bằng cảm tính: rất dễ rơi xuống dưới ngưỡng đọc được.
   Các biến này phải khớp với color.palette trong theme.json.
   ========================================================================== */
:root {
  --brand:      #0F3D5C;  /* 11,40:1 trên nền trắng — AAA */
  --brand-link: #1668A8;  /*  5,87:1 — AA */
  --tint:       #EAF4FB;
  --text-muted: #47637A;  /*  6,30:1 — AA */
  --on-dark:    #D6E9F7;  /*  9,15:1 trên --brand — AAA */
  --cta:        #B84E17;  /*  5,07:1 — AA */
  --cta-dark:   #943E12;
  --line:       #E3EDF5;
  --line-2:     #CFE0EE;
  --radius:     10px;
}

/* ==========================================================================
   HEADER — dính khi cuộn, ô tìm kiếm to (đặc trưng dễ nhận nhất của Etsy)
   ========================================================================== */
.wp-site-blocks > header.wp-block-template-part {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.admin-bar .wp-site-blocks > header.wp-block-template-part { top: 32px; }
@media (max-width: 782px) {
  .admin-bar .wp-site-blocks > header.wp-block-template-part { top: 46px; }
}

/* Ô tìm kiếm chiếm khoảng 40% chiều ngang header */
.he-search { flex: 0 1 40% !important; min-width: 0; }
.he-search .wp-block-search__input {
  border: 2px solid var(--brand);
  border-radius: 999px;
  padding: 11px 18px;
  color: var(--brand);
  background: #fff;
}
.he-search .wp-block-search__button {
  background: var(--cta);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 10px 20px;
  font-weight: 700;
  margin-left: -46px;
}
.he-search .wp-block-search__button:hover { background: var(--cta-dark); }

/* Thanh danh mục ngang */
.he-catbar { border-bottom: 1px solid var(--line); background: #fff; }
.he-catbar .wp-block-navigation { justify-content: center; gap: 30px; }
.he-catbar .wp-block-navigation-item__content {
  color: var(--brand);
  font-weight: 600;
  font-size: .9rem;
  text-decoration: none;
}
.he-catbar .wp-block-navigation-item__content:hover,
.he-catbar .wp-block-navigation-item__content:focus-visible {
  text-decoration: underline;
  text-underline-offset: 5px;
}

/* Topbar thông báo free shipping */
.he-topbar {
  background: var(--brand);
  color: var(--on-dark);
  font-size: .82rem;
  text-align: center;
  padding: 8px 16px;
}
.he-topbar strong { color: #fff; }

/* Giỏ hàng có số lượng */
.wc-block-mini-cart__badge {
  background: var(--cta) !important;
  color: #fff !important;
}

/* ==========================================================================
   NÚT — CTA cam phải bật hẳn khỏi nền xanh, nếu không mắt khách không tìm ra
   ========================================================================== */
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.wc-block-components-button {
  background-color: var(--cta) !important;
  color: #fff !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  padding: 13px 28px !important;
  border: 2px solid transparent !important;
  text-decoration: none !important;
}
.wp-block-button__link:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce button.button.alt:hover,
.woocommerce #respond input#submit:hover,
.wc-block-components-button:hover {
  background-color: var(--cta-dark) !important;
  color: #fff !important;
}
.wp-block-button.is-style-outline .wp-block-button__link {
  background-color: #fff !important;
  color: var(--brand-link) !important;
  border-color: var(--brand-link) !important;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background-color: var(--tint) !important;
  color: var(--brand) !important;
}

:focus-visible { outline: 3px solid var(--cta); outline-offset: 2px; }

/* ==========================================================================
   THẺ SẢN PHẨM — Blueprint 10.2: hiện ĐÚNG 5 thứ, không hơn.
   1 ảnh vuông · 2 tên tối đa 2 dòng · 3 giá đậm · 4 nhãn Free shipping
   · 5 nhãn Save up to N% nếu có giảm theo số lượng.
   ========================================================================== */
.woocommerce ul.products li.product,
.wc-block-product-template__responsive li {
  position: relative;
  text-align: left;
}

.woocommerce ul.products li.product a img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  height: auto;                 /* bắt buộc, xem ghi chú ở cuối file */
  border-radius: var(--radius);
  border: 1px solid var(--line);
  margin-bottom: 12px;
  transition: transform .3s;
}
.woocommerce ul.products li.product a:hover img { transform: scale(1.03); }

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: .95rem !important;
  font-weight: 600;
  color: var(--brand);
  line-height: 1.4;
  padding: 0 !important;
  margin: 0 0 6px !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;        /* tối đa 2 dòng, cắt bớt nếu dài */
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.66em;
}
.woocommerce ul.products li.product .price {
  font-size: 1.12rem !important;
  font-weight: 800 !important;
  color: var(--brand) !important;
  margin: 0 !important;
}
.woocommerce ul.products li.product .price del { display: none; }

/* Nhãn 4 — Free shipping (do snippet 03 chèn) */
.he-free-ship {
  display: block;
  color: var(--brand-link);
  font-size: .82rem;
  font-weight: 600;
  margin-top: 4px;
}

/* Nhãn 5 — Save up to N% (do snippet 03 chèn) */
.he-save-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  background: var(--cta);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
}

/* Ẩn nút Add to cart trên lưới: thẻ chỉ được hiện 5 thứ */
.woocommerce ul.products li.product .add_to_cart_button,
.woocommerce ul.products li.product .added_to_cart {
  display: none !important;
}

/* Ẩn rating vì shop mới chưa có đánh giá — ô sao trống làm giảm lòng tin */
.woocommerce ul.products li.product .star-rating { display: none; }

/* ==========================================================================
   TRANG SẢN PHẨM
   ========================================================================== */
.woocommerce div.product .product_title { color: var(--brand); }
.woocommerce div.product p.price {
  color: var(--brand);
  font-size: 2rem;
  font-weight: 800;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--brand); }

.he-pdp-free {
  color: var(--brand-link);
  font-weight: 700;
  font-size: .95rem;
  margin: 0 0 18px;
}

/* Bảng giảm giá theo số lượng (snippet 01 in ra) */
.he-disc-table {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0 22px;
  font-size: .93rem;
}
.he-disc-table caption {
  text-align: left;
  font-weight: 700;
  color: var(--brand);
  padding-bottom: 8px;
}
.he-disc-table th,
.he-disc-table td {
  padding: 9px 12px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}
.he-disc-table th {
  background: var(--tint);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  font-weight: 700;
}
.he-disc-table td.he-pct { color: var(--cta); font-weight: 700; }

/* ==========================================================================
   GIỎ HÀNG / THANH TOÁN (block)
   ========================================================================== */
.wc-block-components-totals-item__value { color: var(--brand); }
.he-cart-notice {
  border-left: 4px solid var(--brand-link);
  background: var(--tint);
  padding: 14px 18px;
  border-radius: 0 6px 6px 0;
  margin: 0 0 22px;
  font-size: .93rem;
  color: var(--brand);
}
.he-cart-notice p:last-child { margin-bottom: 0; }

/* Dòng giảm giá số lượng trong tổng kết giỏ */
.wc-block-components-totals-discount__coupon-list,
.he-cart-saved { color: var(--cta); font-weight: 700; }

/* ==========================================================================
   KHỐI TIN CẬY — thay cho phần "What is Etsy?" trên Etsy.
   Quan trọng với shop nhỏ chưa có thương hiệu: khách cần lý do để tin
   TRƯỚC khi trả tiền.
   ========================================================================== */
.he-trust-card {
  text-align: center;
  padding: 28px 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  height: 100%;
}
.he-trust-card h3 { margin: 0 0 .3em; color: var(--brand); font-size: 1.1rem; }
.he-trust-card p { color: var(--text-muted); font-size: .93rem; margin: 0; }

/* Thẻ danh mục vuông */
.he-cat-card { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.he-cat-card img { aspect-ratio: 1/1; object-fit: cover; height: auto; width: 100%; }

/* ==========================================================================
   FOOTER — Blueprint 10.3.
   Bản cũ có 3 vấn đề: nền nâu lạc tông, mỗi dòng một icon tài liệu giống hệt
   nhau nên không mang thông tin gì mà chỉ làm rối mắt, và link cam trên nền
   nâu là cặp màu tương phản kém.
   Bản mới: cột phẳng, BỎ HẾT ICON, nền brand, chữ on-dark (9,15:1).
   ========================================================================== */
.wp-site-blocks > footer.wp-block-template-part {
  background: var(--brand);
  color: var(--on-dark);
}

.footer-col h3 {
  color: #FFFFFF;
  font-size: .78rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  margin: 0 0 14px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 12px; }
.footer-col a {
  color: var(--on-dark);
  text-decoration: none;
  font-size: .95rem;
}
.footer-col a:hover,
.footer-col a:focus-visible {
  color: #FFFFFF;
  text-decoration: underline;
}
/* Chặn mọi icon lọt vào cột footer */
.footer-col img,
.footer-col svg,
.footer-col .wp-block-image { display: none !important; }

.he-footer-bottom {
  border-top: 1px solid rgba(214, 233, 247, .22);
  font-size: .85rem;
  color: var(--on-dark);
}
.he-pay-badge {
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(214, 233, 247, .3);
  border-radius: 5px;
  padding: 4px 10px;
  font-size: .75rem;
  font-weight: 700;
  color: #fff;
}

/* ==========================================================================
   GHI CHÚ KỸ THUẬT
   height:auto ở các ảnh vuông là BẮT BUỘC. Thuộc tính width/height trên thẻ
   <img> là presentational hint của trình duyệt; nếu không ghi đè thì
   aspect-ratio vô tác dụng và ảnh bị kéo cao đúng bằng số trong thuộc tính.
   Lỗi này im lặng, không báo gì, và rất khó nhìn ra nếu không đo bằng thước.
   ========================================================================== */

@media (max-width: 860px) {
  .he-search { flex: 1 1 100% !important; order: 3; }
  .he-catbar .wp-block-navigation {
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 18px;
  }
}