/*
Theme Name: AERE Hello Elementor Child
Theme URI: https://aereofficial.com
Template: hello-elementor
Description: Child theme for AERÉ — houses site-specific customizations (loop card product meta, quantity stepper, etc.) so they survive Hello Elementor updates.
Author: AERÉ
Version: 1.1.0
Text Domain: aere-child
*/

/* ==========================================================================
   Quantity stepper — applies site-wide (loop cards, single product, cart,
   mini-cart) because .quantity is WooCommerce's own class used everywhere.
   No wrapper class needed on any specific template anymore.
   ========================================================================== */

.quantity {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-basis: 40% !important;
}

.quantity input.qty {
  width: 42px;
  height: 40px;
  text-align: center;
  border: 1px solid #B7AEA4; /* Stone */
  border-radius: 4px;
  -moz-appearance: textfield;
  font-size: 14px;
  color: #49433F;
}

.quantity input.qty::-webkit-inner-spin-button,
.quantity input.qty::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.aere-qty-btn:focus-visible {
  outline: 2px solid #49433F;
  outline-offset: 2px;
}

/* Elementor generates its own per-widget rule targeting ".cart button"
   (meant for the Add to Cart button) with higher specificity than a plain
   class selector — it also catches our injected +/- buttons since they're
   <button> tags inside the same .cart form. Since that rule's selector is
   auto-generated per widget ID and can't be reliably out-specified, force
   our intended look with !important instead of chasing specificity. */
.aere-qty-btn,
.cart .aere-qty-btn,
.cart button.aere-qty-btn {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid #B7AEA4 !important; /* Stone */
  border-radius: 4px !important;
  background-color: transparent !important;
  color: #49433F !important; /* Deep Greige */
  font-size: 16px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

.cart .aere-qty-btn:hover {
  background-color: #F5F1E9 !important; /* Warm Ivory */
  color: #49433F !important;
}

/* ==========================================================================
   Add to Cart button — บังคับให้เหมือนกันทั้ง Loop (<a class="add_to_cart_button">,
   AJAX link) และ Single Product (<button class="single_add_to_cart_button alt">,
   form submit) โดยไม่ต้องพึ่งการตั้งค่า Style ของ Elementor widget แต่ละ instance
   แยกกัน (สอง context นี้เป็นคนละ widget/คนละ HTML tag กันตั้งแต่ต้น)
   ========================================================================== */

.woocommerce a.add_to_cart_button,
.woocommerce .single_add_to_cart_button,
.woocommerce .cart .button {
  background-color: #49433F !important;
  color: #FBF9F4 !important;
  border: none !important;
  border-radius: 4px !important; /* ไม่ใช้ pill ตามบรีฟ */
  font-weight: 500 !important;
  text-decoration: none !important;
}

.woocommerce a.add_to_cart_button:hover,
.woocommerce .single_add_to_cart_button:hover,
.woocommerce .cart .button:hover {
  background-color: #D8C7B2 !important;
  color: #49433F !important;
}

/* ==========================================================================
   Mood Tags — [aere_mood_tags style="dots|chips"]
   "dots"  ใช้ในหน้า Loop/Product Card: Calm · Clear · Effortless
   "chips" ใช้ในหน้า Single Product: ปุ่มสี่เหลี่ยมแยกแต่ละ tag
   ========================================================================== */

.aere-mood-dots {
  font-size: 12px;
  letter-spacing: 0.02em;
  color: #756A61; /* Warm Taupe */
}

.aere-mood-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.aere-mood-chip {
  display: inline-block;
  padding: 4px 12px;
  border: 1px solid #D8C7B2; /* Champagne Beige */
  border-radius: 4px; /* ไม่ใช้ pill ตามบรีฟ */
  font-size: 12px;
  color: #756A61; /* Warm Taupe */
}

/* ==========================================================================
   Related Product — [aere_related_product] "Discover the other aura"
   ========================================================================== */

.aere-related {
  display: flex;
  flex-direction: column;
}

.aere-related__image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 16px;
  display: block;
}

.aere-related__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  color: #49433F; /* Deep Greige */
  text-decoration: none;
  border-bottom: 1px solid #49433F;
  padding-bottom: 10px;
  transition: color 200ms ease, border-color 200ms ease;
}

.aere-related__link:hover {
  color: #756A61; /* Warm Taupe */
  border-color: #756A61;
}

.aere-related__arrow {
  font-size: 16px;
  line-height: 1;
}

/* ==========================================================================
   WooCommerce — Cart / Checkout / My Account
   ใช้ token สีเดียวกับทั้งเว็บ: Porcelain/Warm Ivory เป็นพื้น, Deep Greige เป็น
   ตัวอักษรหลัก/ปุ่ม, Stone/Champagne Beige เป็นเส้นแบ่งบางๆ ไม่มี pure white/black
   ========================================================================== */

/* ---- Form fields (ใช้ร่วมกันทั้ง Checkout billing/shipping และ My Account) ---- */

/* form-row-first/-last ของ Woo ใช้ float + width:47% เดิม แต่ theme บาง reset float
   ทิ้งจนช่องที่อยู่ติดกัน (เช่น First Name / Last Name, หรือ Country ที่ตามมา) ไม่มี
   gap เลย เปลี่ยนมาใช้ flexbox คุม gap เองแทนให้ชัวร์ไม่ว่า theme จะ reset อะไรมา */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper .form-row {
  flex: 1 1 240px;
  width: auto !important;
  float: none !important;
  margin-bottom: 16px !important;
}

.woocommerce form .form-row label {
  font-size: 13px;
  color: #756A61; /* Warm Taupe */
  margin-bottom: 4px;
}

.woocommerce form .form-row .required {
  color: #756A61;
  text-decoration: none;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce-account form input.input-text,
.woocommerce-account form textarea,
.select2-container .select2-selection--single,
.woocommerce select {
  background-color: #F5F1E9 !important; /* Warm Ivory — ไม่เอาขาวล้วน */
  border: 1px solid #B7AEA4 !important; /* Stone */
  border-radius: 4px;
  color: #49433F; /* Deep Greige */
  font-size: 14px;
  padding: 12px 14px;
  min-height: 48px;
  box-shadow: none;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce-account form input.input-text:focus {
  border-color: #49433F !important;
  outline: none;
}

/* Select2 (ใช้กับ dropdown ประเทศ/จังหวัดใน Checkout) render เป็น markup ของตัวเอง
   ต้องไล่ style ให้ครบทุกชิ้นส่วนย่อย ไม่ใช่แค่กล่องนอก ไม่งั้นขอบ/สีจะไม่ตรงกับ
   input ช่องอื่นบนหน้าเดียวกัน */
.select2-container .select2-selection--single {
  height: auto !important;
  display: flex;
  align-items: center;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #49433F !important;
  line-height: 1.4 !important;
  padding-left: 0;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100%;
}

.select2-dropdown {
  border-color: #B7AEA4 !important; /* Stone */
  border-radius: 4px !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: #49433F !important; /* Deep Greige */
  color: #FBF9F4 !important;
}

/* ---- ปุ่มทั่วไปของ WooCommerce (Update cart / Apply coupon / Proceed to Checkout /
   Place order / My Account actions ฯลฯ) — ให้เหมือนปุ่ม Add to Cart ที่ตั้งไว้แล้ว ---- */

.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  background-color: #49433F !important;
  color: #FBF9F4 !important;
  border: none !important;
  border-radius: 4px !important;
  font-weight: 500 !important;
  padding: 14px 28px !important;
  height: auto !important;
  line-height: 1.2 !important;
  text-transform: none;
  text-decoration: none !important;
  box-shadow: none;
}

.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
  background-color: #D8C7B2 !important;
  color: #49433F !important;
}

.woocommerce a.button.disabled,
.woocommerce button.button:disabled {
  background-color: #B7AEA4 !important; /* Stone */
  color: #FBF9F4 !important;
  opacity: 1 !important;
}

/* ---- Cart page ---- */

/* .alignwide เป็น class ของ WordPress core (wide-alignment block) ที่มักติดมากับ
   page content wrapper เวลาผสม page builder กับ block editor — ปกติมันจะดัน
   margin ซ้าย/ขวาแบบ calc(50% - 50vw) ให้ content กว้างกว่าปกติ ทำให้ layout เพี้ยน
   และเป็นสาเหตุที่ทำให้ selector เฉพาะทาง (เช่น .cart .button) โดน override ด้วย
   ค่า default ของ core block styles ที่แนบมาด้วย — reset กลับเป็นปกติเฉพาะใน
   context ของหน้า Woo เพื่อไม่ให้กระทบหน้าอื่นที่อาจตั้งใจใช้ .alignwide จริงๆ */
.woocommerce-cart .alignwide,
.woocommerce-checkout .alignwide,
.woocommerce-account .alignwide {
  width: auto !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.woocommerce-cart table.cart {
  border: none;
  border-collapse: collapse;
  width: 100%;
  table-layout: auto;
}

.woocommerce-cart table.cart th {
  background: none;
  border: none;
  border-bottom: 1px solid #B7AEA4; /* Stone */
  color: #756A61; /* Warm Taupe */
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 12px 10px;
}

.woocommerce-cart table.cart td {
  border: none;
  border-bottom: 1px solid #E8DED0; /* Soft Beige */
  padding: 16px 10px;
  vertical-align: middle;
}

.woocommerce-cart table.cart td.product-thumbnail img {
  border-radius: 4px;
  width: 80px;
}

.woocommerce-cart table.cart td.product-name a {
  color: #49433F !important; /* Deep Greige — เจอสีชมพู default ทับมาก่อนหน้านี้ */
  font-weight: 500;
  text-decoration: none !important;
}

.woocommerce-cart table.cart td.product-price,
.woocommerce-cart table.cart td.product-subtotal {
  color: #49433F !important;
}

.woocommerce-cart table.cart td.product-remove a.remove {
  background: none !important;
  color: #756A61 !important; /* Warm Taupe */
  font-size: 20px;
}

.woocommerce-cart table.cart td.product-remove a.remove:hover {
  background: none !important;
  color: #49433F !important;
}

.woocommerce-cart .cart-collaterals .cart_totals {
  background: #F5F1E9; /* Warm Ivory */
  border: none;
  border-radius: 4px;
  padding: 24px;
}

.woocommerce-cart .cart_totals h2 {
  font-family: 'Cormorant Garamond', serif;
  color: #49433F;
  font-size: 22px;
  margin-bottom: 12px;
}

.woocommerce-cart .cart_totals table {
  border: none;
}

.woocommerce-cart .cart_totals table th,
.woocommerce-cart .cart_totals table td {
  border-top: 1px solid #E8DED0; /* Soft Beige */
  border-bottom: none;
  color: #49433F;
  padding: 12px 0;
}

.woocommerce-cart .cart_totals .order-total .amount {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  font-weight: 600;
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
  width: 100%;
  text-align: center;
  display: block;
}

.woocommerce-cart .coupon .input-text {
  min-height: 44px;
}

/* ---- Checkout page ---- */

.woocommerce-checkout #customer_details {
  background: none;
}

.woocommerce-checkout h3 {
  font-family: 'Cormorant Garamond', serif;
  color: #49433F;
  font-size: 22px;
}

.woocommerce-checkout #order_review {
  background: #F5F1E9; /* Warm Ivory */
  border-radius: 4px;
  padding: 24px;
}

.woocommerce-checkout #order_review table.shop_table {
  border: none;
}

.woocommerce-checkout #order_review table.shop_table th,
.woocommerce-checkout #order_review table.shop_table td {
  border-top: 1px solid #E8DED0; /* Soft Beige */
  color: #49433F;
  padding: 10px 0;
}

.woocommerce-checkout ul.wc_payment_methods {
  border: none;
  padding: 0;
  list-style: none;
}

.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method {
  border-bottom: 1px solid #E8DED0; /* Soft Beige */
  padding: 12px 0;
}

.woocommerce-checkout ul.wc_payment_methods label {
  color: #49433F;
}

.woocommerce-checkout .payment_box {
  background: #FBF9F4 !important; /* Porcelain */
  color: #756A61;
  border-radius: 4px;
}

.woocommerce-checkout .payment_box::before {
  border-bottom-color: #FBF9F4 !important;
}

.woocommerce-checkout #place_order,
.woocommerce-checkout .woocommerce-checkout-payment #place_order,
.woocommerce-checkout #payment #place_order {
  width: 100%;
  background-color: #49433F !important; /* Deep Greige */
  color: #FBF9F4 !important;
  border-radius: 4px !important;
  border: none !important;
  text-decoration: none !important;
}

.woocommerce-checkout #place_order:hover,
.woocommerce-checkout #payment #place_order:hover {
  background-color: #D8C7B2 !important; /* Champagne Beige */
  color: #49433F !important;
}

/* ---- My Account page ---- */

.woocommerce-account .woocommerce-MyAccount-navigation {
  background: #F5F1E9; /* Warm Ivory */
  border-radius: 4px;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 8px;
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
  border: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 12px 14px;
  color: #756A61; /* Warm Taupe */
  font-size: 14px;
  text-decoration: none;
  border-radius: 4px;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
  background: #E8DED0; /* Soft Beige */
  color: #49433F;
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
  background: #49433F; /* Deep Greige */
  color: #FFFDF8; /* Soft White */
}

.woocommerce-account .woocommerce-MyAccount-content {
  color: #49433F;
}

/* text-link ทั่ว My Account ที่ไม่ใช่ปุ่ม ใช้สี accent ตามที่ระบุ
   หมายเหตุ: #D8C7B2 (Champagne Beige) ตัดกับพื้น Warm Ivory/Porcelain ค่อนข้างน้อย —
   บรีฟเองห้าม "ใช้ Taupe อ่อนบน Beige อ่อนสำหรับข้อความสำคัญ" เพราะอ่านยาก ถ้าใช้จุดนี้
   แนะนำเฉพาะลิงก์รอง/ไม่สำคัญมาก ถ้าเป็นลิงก์ที่ต้องอ่านชัด (เช่น "Confirm email address")
   ควรพิจารณาใช้ Warm Taupe #756A61 แทนเพื่อความชัดเจน — ใส่ตามที่ขอไว้ก่อน ปรับทีหลังได้ */
.woocommerce-account .woocommerce-MyAccount-content a:not(.button) {
  color: #D8C7B2;
  text-decoration: underline;
}

.woocommerce-account .woocommerce-MyAccount-content a:not(.button):hover {
  color: #49433F;
}

.woocommerce-account table.woocommerce-orders-table {
  border: none;
  width: 100%;
}

.woocommerce-account table.woocommerce-orders-table th {
  border: none;
  border-bottom: 1px solid #B7AEA4; /* Stone */
  color: #756A61;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.woocommerce-account table.woocommerce-orders-table td {
  border: none;
  border-bottom: 1px solid #E8DED0; /* Soft Beige */
  color: #49433F;
}

/* edit-account: เว้นระยะก่อนปุ่ม Save changes */
.woocommerce-account .woocommerce-EditAccountForm button[name="save_account_details"],
.woocommerce-account .woocommerce-EditAccountForm .button {
  margin-top: 24px;
}

/* Responsive: ตาราง Orders/Cart พังบนมือถือถ้าไม่มีการพับเป็นแบบ stacked —
   ใส่ fallback เองเผื่อ theme ไม่มี responsive CSS ของ WooCommerce ครบ */
@media screen and (max-width: 600px) {
  .woocommerce-account table.woocommerce-orders-table thead,
  .woocommerce-cart table.cart thead {
    display: none;
  }

  .woocommerce-account table.woocommerce-orders-table tr,
  .woocommerce-cart table.cart tr {
    display: block;
    border-bottom: 1px solid #E8DED0; /* Soft Beige */
    padding: 12px 0;
  }

  .woocommerce-account table.woocommerce-orders-table td,
  .woocommerce-cart table.cart td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: none !important;
    padding: 6px 0 !important;
  }

  .woocommerce-account table.woocommerce-orders-table td::before,
  .woocommerce-cart table.cart td::before {
    content: attr(data-title);
    font-weight: 500;
    color: #756A61; /* Warm Taupe */
    margin-right: 12px;
  }

  .woocommerce-cart table.cart td.product-thumbnail::before {
    content: none;
  }
}

/* ---- Notice / message boxes (ใช้ทั้ง 3 หน้า) — คงพาเลตต์เดิม ไม่ใช้เขียว/แดงสด ---- */

.woocommerce-message,
.woocommerce-error,
.woocommerce-info,
.woocommerce-noreviews,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message {
  background: #F5F1E9 !important; /* Warm Ivory */
  color: #49433F !important;
  border-top: none !important;
  border-left: 3px solid #D8C7B2; /* Champagne Beige — ปกติ/สำเร็จ */
  border-radius: 4px !important;
  padding: 16px 20px !important;
  font-family: 'Noto Sans Thai', 'IBM Plex Sans Thai', sans-serif !important;
  font-size: 14px !important;
  line-height: 1.6;
  list-style: none;
}

.woocommerce-error {
  border-left-color: #49433F; /* Deep Greige — เน้นว่าต้องดูก่อน */
}

.woocommerce-message::before,
.woocommerce-error::before,
.woocommerce-info::before {
  color: #756A61 !important;
}

.woocommerce-message .button,
.woocommerce-error .button,
.woocommerce-info .button {
  background-color: #49433F !important;
  color: #FBF9F4 !important;
}

/* ---- Text-links ในหน้า Cart ที่ไม่ใช่ปุ่ม (เช่น ชื่อสินค้า, "Continue shopping",
   coupon toggle) — คุมสีให้อยู่ในพาเลตต์ ไม่ให้หลุดเป็นสี default (มักเป็นฟ้า) ---- */

.woocommerce-cart a:not(.button):not(.remove):not(.checkout-button) {
  color: #49433F; /* Deep Greige */
  text-decoration: underline;
  text-decoration-color: #B7AEA4; /* Stone — เส้นใต้บางเบากว่าตัวอักษร */
}

.woocommerce-cart a:not(.button):not(.remove):not(.checkout-button):hover {
  color: #756A61; /* Warm Taupe */
  text-decoration-color: currentColor;
}

/* ==========================================================================
   WooCommerce BLOCKS (Cart & Checkout blocks) — คนละระบบกับ classic template
   ทั้งหมดด้านบน! เว็บนี้ใช้ Cart/Checkout แบบ Block editor (class ขึ้นต้นด้วย
   wc-block-*, wp-block-woocommerce-*) ไม่ใช่ shortcode แบบเดิม (table.cart,
   #place_order, .cart_totals ฯลฯ) เลยไม่มีผลอะไรกับปุ่มพวกนี้มาก่อนหน้านี้เลย —
   ต้องเขียน selector ชุดใหม่แยกต่างหากสำหรับระบบนี้โดยเฉพาะ
   ========================================================================== */

/* ปุ่มทุกตัวของ Blocks (Proceed to Checkout, Place Order, Apply coupon ฯลฯ)
   ใช้ class ฐานร่วมกัน .wc-block-components-button.wp-element-button —
   แก้จุดเดียวครอบคลุมทั้ง Cart และ Checkout */
.wc-block-components-button.wp-element-button,
a.wc-block-components-button.wp-element-button,
button.wc-block-components-button.wp-element-button {
  background-color: #49433F !important; /* Deep Greige */
  color: #FBF9F4 !important;
  border: none !important;
  border-radius: 4px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

.wc-block-components-button.wp-element-button:hover,
a.wc-block-components-button.wp-element-button:hover,
button.wc-block-components-button.wp-element-button:hover {
  background-color: #D8C7B2 !important; /* Champagne Beige */
  color: #49433F !important;
}

.wc-block-components-button.wp-element-button:disabled,
.wc-block-components-button.wp-element-button.is-loading {
  background-color: #B7AEA4 !important; /* Stone */
  color: #FBF9F4 !important;
  opacity: 1 !important;
}

/* ชื่อสินค้าใน Cart block (แถวสินค้าใน Blocks ใช้ class นี้แทน td.product-name a
   ของ classic table) */
.wc-block-components-product-name {
  color: #49433F !important; /* Deep Greige */
  font-weight: 500;
  text-decoration: none !important;
}

.wc-block-components-product-name:hover {
  color: #756A61 !important; /* Warm Taupe */
}

/* กล่อง Cart totals / Order summary ของ Blocks */
.wc-block-components-totals-wrapper,
.wp-block-woocommerce-cart-order-summary-block {
  color: #49433F;
}

.wc-block-cart__totals-title {
  font-family: 'Cormorant Garamond', serif;
  color: #49433F;
}

.wc-block-components-totals-item__label,
.wc-block-components-totals-item__value {
  color: #49433F;
}

/* Checkout block: ช่อง input/select ให้ตรงกับ field อื่นในเว็บ (Warm Ivory bg,
   ขอบ Stone, มุมโค้ง 4px) เพราะ Checkout block render input ของตัวเอง ไม่ใช่
   .woocommerce form .form-row input.input-text แบบ classic */
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-address-form input,
.wc-block-components-combobox input {
  background-color: #F5F1E9 !important; /* Warm Ivory */
  border-color: #B7AEA4 !important; /* Stone */
  border-radius: 4px !important;
  color: #49433F !important;
}

.wc-block-components-text-input label,
.wc-block-components-address-form label {
  color: #756A61 !important; /* Warm Taupe */
}

/* Custom Select ของ Checkout block เอง (dropdown ประเทศ/จังหวัด) — ไม่ใช่ Select2
   คนละ component กัน ต้องเจาะ class เฉพาะของมัน
   โครงสร้างจริง: .wc-blocks-components-select > .wc-blocks-components-select__container
   (กล่องที่มองเห็น border/bg) ครอบ <select class="...__select"> ที่มักถูกทำให้
   โปร่งใส/ไม่มีขอบเอง เพื่อวางซ้อนกับไอคอนลูกศร SVG ให้ดูเป็นกล่องเดียวกัน —
   ใส่ bg/border ที่ container ตัวจริงที่มองเห็น ไม่ใช่แค่ <select> ข้างใน */
.wc-blocks-components-select,
.wc-blocks-components-select__container {
  background-color: #F5F1E9 !important; /* Warm Ivory */
  border: 1px solid #B7AEA4 !important; /* Stone */
  border-radius: 4px !important;
}

.wc-blocks-components-select__select {
  background-color: transparent !important;
  border: none !important;
  color: #49433F !important;
}

.wc-blocks-components-select__label {
  color: #756A61 !important; /* Warm Taupe */
}

.wc-blocks-components-select__expand path {
  fill: #756A61; /* Warm Taupe */
}

.wc-blocks-components-select__container:focus-within {
  border-color: #49433F !important; /* Deep Greige */
  outline: none;
}

/* Checkbox (Add order note / Terms) */
.wc-block-components-checkbox__input {
  accent-color: #49433F; /* Deep Greige — วิธีสั้นสุดที่ browser สมัยใหม่รองรับ */
}

.wc-block-components-checkbox__label {
  color: #49433F;
}

.wc-block-checkout__terms {
  color: #756A61; /* Warm Taupe */
  font-size: 13px;
}

.wc-block-checkout__terms a {
  color: #49433F;
}

/* หัวข้อแต่ละ step (Contact information / Billing address / Payment options) */
.wc-block-components-checkout-step__title {
  font-family: 'Cormorant Garamond', serif;
  color: #49433F;
  font-size: 22px;
  font-weight: 600;
}

/* การ์ดที่อยู่ (โหมดอ่านอย่างเดียว ก่อนกด Edit) */
.wc-block-components-address-card {
  color: #49433F;
}

.wc-block-components-address-card__edit {
  color: #49433F;
  text-decoration: underline;
  cursor: pointer;
}

.wc-block-components-address-card__edit:hover {
  color: #756A61;
}

/* Notice Banner แบบ inline ของ Blocks (เช่น "no payment methods available")
   คนละตัวกับ toast (.woocommerce-message/.woocommerce-error/.woocommerce-info)
   เพราะตัวนี้ต้องค้างอยู่ในหน้าให้ user เห็นตลอด ไม่ใช่ popup ชั่วคราว */
.wc-block-components-notice-banner {
  background: #F5F1E9 !important; /* Warm Ivory */
  color: #49433F !important;
  border: none !important;
  border-left: 3px solid #49433F; /* error — เน้นว่าต้องดูก่อน */
  border-radius: 4px !important;
  padding: 16px 20px !important;
  font-family: 'Noto Sans Thai', 'IBM Plex Sans Thai', sans-serif;
  font-size: 14px;
  line-height: 1.6;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.wc-block-components-notice-banner.is-success {
  border-left-color: #D8C7B2; /* Champagne Beige */
}

.wc-block-components-notice-banner.is-info {
  border-left-color: #B7AEA4; /* Stone */
}

.wc-block-components-notice-banner svg {
  fill: #756A61; /* Warm Taupe */
  flex-shrink: 0;
}

.wc-block-components-notice-banner__content a {
  color: #49433F;
}

/* Order Summary (sidebar ฝั่งขวาของ Checkout) */
.wc-block-components-checkout-order-summary__title-text {
  font-family: 'Cormorant Garamond', serif;
  color: #49433F;
  font-size: 20px;
}

.wc-block-components-checkout-order-summary__title-price {
  color: #49433F;
}

.wc-block-components-order-summary-item__description h3.wc-block-components-product-name {
  font-size: 14px;
  margin: 0 0 4px;
}

.wc-block-components-product-metadata__description p {
  color: #756A61; /* Warm Taupe */
  font-size: 12px;
  margin: 4px 0 0;
}

.wc-block-components-order-summary-item__quantity {
  background: #49433F; /* Deep Greige */
  color: #FBF9F4;
  border-radius: 50%;
  font-size: 11px;
}

.wc-block-components-product-price .wc-block-components-formatted-money-amount {
  color: #49433F;
}

/* ==========================================================================
   My Account — /edit-address/ (classic template, .woocommerce-Addresses)
   อ้างอิงจาก vachboy-plugins/hello-elementor-child/assets/css/woo-my-account.css
   ปรับสี/ฟอนต์ให้ตรง CI ของ AERÉ
   ========================================================================== */

/* h2 "Billing address" / "Shipping address" บนหน้าฟอร์มแก้ไข — เดิมใหญ่เกิน
   เพราะไม่มี CSS คุมเลย ใช้ default h2 ของ theme ตรงๆ */
.woocommerce-account .woocommerce-MyAccount-content h2 {
  font-family: 'Cormorant Garamond', serif;
  color: #49433F;
  font-size: 24px;
  font-weight: 600;
}

@media (max-width: 767px) {
  .woocommerce-account .woocommerce-MyAccount-content h2 {
    font-size: 20px;
  }
}

/* หัวข้อ "Billing address"/"Shipping address" บนหน้ารายการที่อยู่ (ก่อนกด Edit)
   เป็น h3 ในระบบ classic ไม่ใช่ h2 */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses h3 {
  font-family: 'Cormorant Garamond', serif;
  color: #49433F;
  font-size: 18px;
  font-weight: 600;
}

/* หัวข้อหน้า (Elementor Heading widget ที่ใส่ไว้ในแต่ละ My Account template
   เช่น "Orders", "Addresses") — บังคับให้ทุกหน้าใน my-account ใช้ขนาดเดียวกัน
   จุดเดียวในโค้ด แทนที่จะต้องไปตั้งค่าใน Elementor ทีละ widget ให้ตรงกันเอง
   ค่าประมาณจากบรีฟ ("Section Heading": 36-48px desktop / 28-34px mobile) —
   ถ้าไม่ตรงกับขนาด H1 จริงที่ใช้อยู่ แจ้งตัวเลขที่ถูกต้องมาปรับให้ตรงเป๊ะได้ */
.woocommerce-account .elementor-widget-heading .elementor-heading-title {
  font-family: 'Cormorant Garamond', serif;
  color: #49433F;
  font-size: 40px;
  font-weight: 600;
}

@media (max-width: 767px) {
  .woocommerce-account .elementor-widget-heading .elementor-heading-title {
    font-size: 30px;
  }
}

/* กล่อง address แต่ละใบ (Billing/Shipping) ใน .woocommerce-Addresses */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses .woocommerce-Address {
  position: relative;
  border: 1px solid #B7AEA4; /* Stone */
  border-radius: 4px;
  padding: 20px;
  margin-bottom: 24px;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses .woocommerce-Address-title {
  margin-bottom: 12px;
}

/* ซ่อนคำว่า "Edit" แล้ววาง pencil icon แทนที่มุมบนขวาของกล่อง address —
   ตามที่เคยทำไว้ในโปรเจกต์ vachboy พอร์ตมาปรับสีเป็น Deep Greige */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses .woocommerce-Address-title a {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 0 !important;
  color: transparent !important;
  text-decoration: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  opacity: 0.6;
  transition: opacity 0.2s;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses .woocommerce-Address-title a:hover {
  opacity: 1;
}

/* Pencil icon — Heroicons pencil-square, สี Deep Greige #49433F (%23494 33F) */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses .woocommerce-Address-title a::before {
  content: '';
  display: block;
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='%2349433F'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}