/* ==========================================================================
   ANESTLAND - QUY CHUẨN THIẾT KẾ UI & HỆ THỐNG MÀU SẮC - TYPOGRAPHY
   Tỷ lệ nhận diện thương hiệu 70-20-10 & Tiêu chuẩn độ tương phản WCAG AAA/AA
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------------
     1. NHÓM TÍNH TỶ LỆ 70-20-10 (Thành phần màu giao diện)
     ------------------------------------------------------------------------ */
  /* 70% Burgundy (#5E0A06): Header, footer, nút CTA chính, tiêu đề, khối nhấn lớn.
     Độ tương phản: 12,7:1 trên nền Ivory (Đạt chuẩn WCAG AAA) */
  --al-color-burgundy: #5E0A06;
  --al-primary: #5E0A06;
  --al-burgundy-dark: #450603;

  /* 20% Gold Light (#E0BC72): Vàng dùng TRÊN nền burgundy / nền tối:
     tiêu đề phụ, icon, đường kẻ trang trí.
     Độ tương phản: 7,6:1 trên Burgundy (Đạt chuẩn WCAG AAA)
     QUY TẮC: KHÔNG dùng trên nền sáng (chỉ đạt 1,7:1). */
  --al-color-gold-light: #E0BC72;
  --al-gold-on-dark: #E0BC72;

  /* 20% Gold Deep (#7A5A14): Vàng dùng TRÊN nền sáng (Ivory/Cream/Trắng):
     icon, viền ô nhập, chữ nhấn, đường kẻ, badge thương hiệu.
     Độ tương phản: 5,9:1 trên Ivory (Đạt chuẩn WCAG AA cho chữ thường, AAA cho chữ lớn)
     QUY TẮC: KHÔNG dùng trên nền burgundy. */
  --al-color-gold-deep: #7A5A14;
  --al-gold-on-light: #7A5A14;

  /* 10% Accent Red (#A3120F): Trạng thái hover CTA, huy hiệu mới/giảm giá, liên kết nhấn.
     Độ tương phản: 7,3:1 trên Ivory (Đạt chuẩn WCAG AAA) */
  --al-color-accent-red: #A3120F;
  --al-accent-hover: #A3120F;

  /* ------------------------------------------------------------------------
     2. NHÓM NỀN TRUNG TÍNH (Không tính vào tỷ lệ 70-20-10)
     ------------------------------------------------------------------------ */
  --al-bg-ivory: #FBF5E8;       /* Nền nội dung chính toàn trang */
  --al-bg-cream: #F3E7CF;       /* Nền section phụ, thẻ thông tin, highlight */
  --al-bg-champagne: #EBD9C6;   /* Section quà tặng, nội dung cảm xúc, tôn vinh */
  --al-bg-white: #FFFFFF;       /* Nền thẻ nội dung nổi bật, ô nhập liệu */

  /* ------------------------------------------------------------------------
     3. NHÓM CHỮ TRUNG TÍNH (Không tính vào tỷ lệ 70-20-10)
     ------------------------------------------------------------------------ */
  --al-text-ink: #1F0D0B;       /* Chữ chính, nội dung dài (Tương phản 17,3:1 trên Ivory) */
  --al-text-muted: #5A4033;     /* Chữ phụ, chú thích, metadata (Tương phản 8,7:1 trên Ivory) */
  --al-text-on-dark: #FFF8EA;   /* Chữ trên nền burgundy / nền tối (Tương phản 13,1:1 trên Burgundy) */

  /* ------------------------------------------------------------------------
     4. TYPOGRAPHY TOKENS (Montserrat Primary & Playfair Display Editorial Accent)
     ------------------------------------------------------------------------ */
  --al-font-main: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --al-font-heading: 'STIX Two Text', -apple-system, BlinkMacSystemFont, Georgia, serif;
  --al-font-serif: 'STIX Two Text', Georgia, 'Times New Roman', serif;

  /* Border radius & Shadows */
  --al-radius-sm: 4px;
  --al-radius-md: 8px;
  --al-radius-lg: 12px;
  --al-radius-xl: 16px;
  --al-radius-full: 9999px;

  --al-shadow-sm: 0 2px 6px rgba(94, 10, 6, 0.05);
  --al-shadow-md: 0 4px 16px rgba(94, 10, 6, 0.08);
  --al-shadow-lg: 0 10px 30px rgba(94, 10, 6, 0.12);
  --al-shadow-hover: 0 12px 32px rgba(163, 18, 15, 0.2);

  --al-transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   GLOBAL TYPOGRAPHY HIERARCHY
   ========================================================================== */
body {
  font-family: var(--al-font-main);
  background-color: var(--al-bg-ivory);
  color: var(--al-text-ink);
  line-height: 1.65;
  font-size: 15px;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Heading Scale with Clear Hierarchy */
h1, .al-h1 {
  font-family: var(--al-font-heading);
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--al-color-burgundy);
  letter-spacing: -0.015em;
  margin-bottom: 0.6em;
}

h2, .al-h2 {
  font-family: var(--al-font-heading);
  font-size: clamp(1.5rem, 2.5vw, 2.15rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--al-color-burgundy);
  letter-spacing: -0.01em;
  margin-bottom: 0.5em;
}

h3, .al-h3 {
  font-family: var(--al-font-heading);
  font-size: clamp(1.2rem, 1.8vw, 1.55rem);
  font-weight: 600;
  line-height: 1.35;
  color: var(--al-color-burgundy);
  margin-bottom: 0.4em;
}

h4, .al-h4 {
  font-family: var(--al-font-heading);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--al-text-ink);
  margin-bottom: 0.4em;
}

h5, .al-h5 {
  font-family: var(--al-font-heading);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--al-text-ink);
  margin-bottom: 0.3em;
}

h6, .al-h6 {
  font-family: var(--al-font-heading);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--al-color-gold-deep);
  margin-bottom: 0.3em;
}

/* Editorial Serif Accent for Hero & Quotes */
.al-font-serif,
.serif-heading {
  font-family: var(--al-font-serif) !important;
}

p, .al-body {
  font-size: 1rem;
  color: var(--al-text-ink);
  line-height: 1.65;
  margin-bottom: 1em;
}

.al-lead {
  font-size: 1.125rem;
  font-weight: 400;
  color: var(--al-text-muted);
  line-height: 1.6;
}

.al-caption, small, .al-meta {
  font-size: 0.85rem;
  color: var(--al-text-muted);
  line-height: 1.5;
}

.al-eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--al-color-gold-deep);
  margin-bottom: 8px;
}

/* ==========================================================================
   SHARED UI COMPONENT SYSTEM
   ========================================================================== */

/* 1. BUTTONS (Theo đúng quy tắc nhận diện)
   - Nút CTA chính: nền Burgundy (#5E0A06), chữ Text on Dark (#FFF8EA); hover Accent Red (#A3120F).
   - Nút phụ: viền Gold Deep (#7A5A14), chữ Burgundy (#5E0A06), nền trong suốt.
   -------------------------------------------------------------------------- */
.al-btn,
.btn-primary,
.btn-secondary,
.btn-outline,
.button.alt,
.single_add_to_cart_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--al-font-main);
  font-weight: 600;
  border-radius: var(--al-radius-full);
  cursor: pointer;
  text-decoration: none;
  transition: var(--al-transition);
  text-align: center;
  white-space: nowrap;
}

/* CTA Chính */
.btn-primary,
.al-btn-primary,
.button.alt,
.single_add_to_cart_button,
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
  background-color: var(--al-color-burgundy) !important;
  color: var(--al-text-on-dark) !important;
  border: 1.5px solid var(--al-color-burgundy) !important;
  padding: 12px 28px;
  font-size: 14.5px;
  box-shadow: 0 4px 14px rgba(94, 10, 6, 0.22);
}

.btn-primary:hover,
.al-btn-primary:hover,
.button.alt:hover,
.single_add_to_cart_button:hover,
.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
  background-color: var(--al-color-accent-red) !important;
  border-color: var(--al-color-accent-red) !important;
  color: var(--al-text-on-dark) !important;
  box-shadow: 0 6px 20px rgba(163, 18, 15, 0.32);
  transform: translateY(-2px);
}

.btn-primary:active,
.al-btn-primary:active {
  transform: translateY(0);
}

/* Nút Phụ (Secondary) */
.btn-secondary,
.al-btn-secondary,
.btn-outline,
.al-btn-outline {
  background-color: transparent !important;
  color: var(--al-color-burgundy) !important;
  border: 1.5px solid var(--al-color-gold-deep) !important;
  padding: 11.5px 26px;
  font-size: 14.5px;
}

.btn-secondary:hover,
.al-btn-secondary:hover,
.btn-outline:hover,
.al-btn-outline:hover {
  background-color: var(--al-bg-cream) !important;
  border-color: var(--al-color-burgundy) !important;
  color: var(--al-color-burgundy) !important;
  transform: translateY(-2px);
}

/* Nút trên nền Burgundy / Nền tối */
.al-btn-on-dark-primary {
  background-color: var(--al-color-gold-light) !important;
  color: var(--al-color-burgundy) !important;
  border: 1.5px solid var(--al-color-gold-light) !important;
  padding: 12px 28px;
  font-weight: 700;
}

.al-btn-on-dark-primary:hover {
  background-color: var(--al-text-on-dark) !important;
  border-color: var(--al-text-on-dark) !important;
  color: var(--al-color-burgundy) !important;
  box-shadow: 0 6px 20px rgba(224, 188, 114, 0.35);
  transform: translateY(-2px);
}

.al-btn-on-dark-secondary {
  background-color: transparent !important;
  color: var(--al-text-on-dark) !important;
  border: 1.5px solid rgba(224, 188, 114, 0.6) !important;
  padding: 11.5px 26px;
}

.al-btn-on-dark-secondary:hover {
  background-color: rgba(224, 188, 114, 0.15) !important;
  border-color: var(--al-color-gold-light) !important;
  color: var(--al-color-gold-light) !important;
}

/* Kích cỡ Button chuẩn */
.al-btn-sm {
  padding: 8px 18px !important;
  font-size: 13px !important;
}

.al-btn-lg {
  padding: 15px 34px !important;
  font-size: 16px !important;
}

/* --------------------------------------------------------------------------
   2. BREADCRUMB DÙNG CHUNG TOÀN TRANG
   -------------------------------------------------------------------------- */
.al-breadcrumb-bar,
.about-breadcrumb-bar,
.shop-breadcrumb-bar,
.storefront-breadcrumb-bar,
.dentaluck-breadcrumbs {
  background-color: var(--al-bg-ivory);
  border-bottom: 1px solid rgba(122, 90, 20, 0.12);
  padding: 12px 0;
}

.al-breadcrumb-nav,
.woocommerce-breadcrumb,
.shop-breadcrumb,
.about-breadcrumb-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13.5px;
  color: var(--al-text-muted);
  margin: 0;
  padding: 0;
}

.al-breadcrumb-nav a,
.woocommerce-breadcrumb a,
.shop-breadcrumb a,
.about-breadcrumb-nav a {
  color: var(--al-text-muted);
  text-decoration: none;
  transition: var(--al-transition);
}

.al-breadcrumb-nav a:hover,
.woocommerce-breadcrumb a:hover,
.shop-breadcrumb a:hover,
.about-breadcrumb-nav a:hover {
  color: var(--al-color-burgundy);
  text-decoration: underline;
}

.al-breadcrumb-sep,
.about-breadcrumb-nav .sep,
.shop-breadcrumb .sep,
.woocommerce-breadcrumb .sep {
  color: var(--al-color-gold-deep);
  font-size: 12px;
  opacity: 0.75;
}

.al-breadcrumb-current,
.about-breadcrumb-nav .current,
.shop-breadcrumb .current,
.woocommerce-breadcrumb .current {
  color: var(--al-text-ink);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   3. THẺ SẢN PHẨM DÙNG CHUNG (Tỷ lệ ảnh, tên, giá, hành động đồng nhất)
   -------------------------------------------------------------------------- */
.al-product-card,
.product-card,
.woocommerce ul.products li.product {
  background-color: var(--al-bg-white);
  border: 1px solid rgba(122, 90, 20, 0.15);
  border-radius: var(--al-radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: var(--al-transition);
  position: relative;
}

.al-product-card:hover,
.product-card:hover,
.woocommerce ul.products li.product:hover {
  border-color: var(--al-color-gold-deep);
  box-shadow: var(--al-shadow-md);
  transform: translateY(-3px);
}

/* Tỷ lệ ảnh cố định 1:1, giữ màu sắc chân thực bao bì (không phủ overlay làm sai lệch) */
.al-product-thumb,
.product-card .product-thumb,
.woocommerce ul.products li.product .woocommerce-LoopProduct-link img {
  aspect-ratio: 1 / 1;
  width: 100%;
  object-fit: cover;
  background-color: var(--al-bg-ivory);
  transition: transform 0.35s ease;
}

.al-product-card:hover .al-product-thumb,
.product-card:hover .product-thumb img {
  transform: scale(1.03);
}

/* Tên sản phẩm */
.al-product-title,
.product-card .product-title,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--al-font-heading);
  font-size: 15px;
  font-weight: 600;
  color: var(--al-text-ink);
  line-height: 1.4;
  margin: 4px 0 8px 0;
  padding: 0;
  text-align: left;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: var(--al-transition);
}

.al-product-card:hover .al-product-title,
.product-card:hover .product-title {
  color: var(--al-color-burgundy);
}

/* Giá sản phẩm */
.al-product-price,
.product-card .product-price,
.woocommerce ul.products li.product .price {
  font-size: 16px;
  font-weight: 700;
  color: var(--al-color-burgundy);
  margin: 0 0 12px 0;
  padding: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.al-product-price del,
.product-card .price del,
.woocommerce ul.products li.product .price del {
  font-size: 13px;
  font-weight: 400;
  color: var(--al-text-muted);
}

.al-product-price ins,
.product-card .price ins,
.woocommerce ul.products li.product .price ins {
  text-decoration: none;
  color: var(--al-color-burgundy);
  font-weight: 700;
}

/* Huy hiệu (Badge) Sản phẩm */
.al-badge-sale,
.product-badge-sale,
.woocommerce span.onsale {
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: var(--al-color-accent-red) !important;
  color: var(--al-text-on-dark) !important;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border-radius: var(--al-radius-full);
  z-index: 2;
}

.al-badge-origin {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: var(--al-bg-cream);
  color: var(--al-color-gold-deep);
  border: 1px solid rgba(122, 90, 20, 0.3);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: var(--al-radius-sm);
  z-index: 2;
}

/* --------------------------------------------------------------------------
   4. FORM & INPUT CONTROLS DÙNG CHUNG (Tương phản cao, focus viền Gold Deep)
   -------------------------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="search"],
input[type="number"],
select,
textarea,
.form-control {
  width: 100%;
  background-color: var(--al-bg-white);
  border: 1px solid rgba(122, 90, 20, 0.35);
  border-radius: var(--al-radius-md);
  padding: 10px 14px;
  font-family: var(--al-font-main);
  font-size: 14.5px;
  color: var(--al-text-ink);
  transition: var(--al-transition);
  box-sizing: border-box;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus {
  border-color: var(--al-color-gold-deep) !important;
  box-shadow: 0 0 0 3px rgba(122, 90, 20, 0.16) !important;
  outline: none;
}

/* Loại bỏ hoàn toàn khung chữ nhật bên trong của input search ở Header */
.search-form input[type="search"],
.search-form .search-input,
.search-input-group input[type="search"],
.search-input-group .search-input {
  border: none !important;
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 12px 0 0 !important;
  margin: 0 !important;
  height: 100% !important;
}

input::placeholder,
textarea::placeholder {
  color: #8E7146;
  opacity: 0.85;
}

label {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--al-text-ink);
  margin-bottom: 6px;
}

/* --------------------------------------------------------------------------
   5. PHÂN TRANG (PAGINATION) DÙNG CHUNG
   -------------------------------------------------------------------------- */
.al-pagination,
.woocommerce-pagination,
.pagination,
.nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 32px 0;
  list-style: none;
  padding: 0;
}

.al-pagination a,
.al-pagination span,
.woocommerce-pagination .page-numbers a,
.woocommerce-pagination .page-numbers span,
.pagination .page-numbers {
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--al-radius-md);
  border: 1px solid rgba(122, 90, 20, 0.25);
  background-color: var(--al-bg-white);
  color: var(--al-color-burgundy);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: var(--al-transition);
}

.al-pagination .current,
.woocommerce-pagination .page-numbers.current,
.pagination .page-numbers.current {
  background-color: var(--al-color-burgundy) !important;
  color: var(--al-text-on-dark) !important;
  border-color: var(--al-color-burgundy) !important;
}

.al-pagination a:hover,
.woocommerce-pagination .page-numbers a:hover,
.pagination .page-numbers a:hover {
  background-color: var(--al-bg-cream) !important;
  border-color: var(--al-color-gold-deep) !important;
  color: var(--al-color-burgundy) !important;
}

/* --------------------------------------------------------------------------
   6. BÀI VIẾT LIÊN QUAN / TIN TỨC (RELATED POSTS) DÙNG CHUNG
   -------------------------------------------------------------------------- */
.al-post-card,
.blog-card,
.related-article-card {
  background-color: var(--al-bg-white);
  border: 1px solid rgba(122, 90, 20, 0.15);
  border-radius: var(--al-radius-lg);
  overflow: hidden;
  transition: var(--al-transition);
  display: flex;
  flex-direction: column;
}

.al-post-card:hover,
.blog-card:hover,
.related-article-card:hover {
  border-color: var(--al-color-gold-deep);
  box-shadow: var(--al-shadow-md);
  transform: translateY(-3px);
}

.al-post-card-thumb,
.blog-card .thumb-wrapper {
  aspect-ratio: 16 / 9;
  width: 100%;
  overflow: hidden;
  background-color: var(--al-bg-cream);
}

.al-post-card-thumb img,
.blog-card .thumb-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.al-post-card:hover .al-post-card-thumb img {
  transform: scale(1.04);
}

.al-post-card-body {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.al-post-card-category {
  display: inline-block;
  align-self: flex-start;
  background-color: var(--al-bg-cream);
  color: var(--al-color-gold-deep);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 8px;
  border-radius: var(--al-radius-sm);
  margin-bottom: 10px;
}

.al-post-card-title {
  font-family: var(--al-font-heading);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--al-text-ink);
  margin-bottom: 8px;
  transition: var(--al-transition);
}

.al-post-card:hover .al-post-card-title {
  color: var(--al-color-burgundy);
}

.al-post-card-meta {
  font-size: 12.5px;
  color: var(--al-text-muted);
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* --------------------------------------------------------------------------
   7. SECTION CONTAINERS & SURFACE UTILITIES
   -------------------------------------------------------------------------- */
.al-section-ivory {
  background-color: var(--al-bg-ivory);
}

.al-section-cream {
  background-color: var(--al-bg-cream);
}

.al-section-champagne {
  background-color: var(--al-bg-champagne);
}

.al-section-burgundy {
  background-color: var(--al-color-burgundy);
  color: var(--al-text-on-dark);
}

.al-section-burgundy h1,
.al-section-burgundy h2,
.al-section-burgundy h3,
.al-section-burgundy h4,
.al-section-burgundy .al-h1,
.al-section-burgundy .al-h2,
.al-section-burgundy .al-h3 {
  color: var(--al-text-on-dark) !important;
}

.al-section-burgundy p,
.al-section-burgundy .al-body {
  color: rgba(255, 248, 234, 0.9) !important;
}

.al-section-burgundy .al-eyebrow,
.al-section-burgundy .gold-accent {
  color: var(--al-color-gold-light) !important;
}