/**
 * LoveMeGifting — WooCommerce Styles
 * Product cards, archive hero, promo card
 * Version: 1.0.0
 */

/* ============================================
   Archive Hero
   ============================================ */

.lmg-archive-hero {
  padding: var(--lmg-space-8) var(--lmg-space-4) var(--lmg-space-5);
  text-align: center;
}

.lmg-archive-hero .lmg-eyebrow {
  display: block;
  margin-bottom: var(--lmg-space-3);
}

.lmg-archive-hero__title {
  font-size: var(--lmg-text-h2);
  font-weight: var(--lmg-fw-bold);
  color: var(--lmg-ink);
  margin: 0 0 var(--lmg-space-3);
}

.lmg-archive-hero__desc {
  max-width: 560px;
  margin: 0 auto;
  color: var(--lmg-muted);
  font-size: var(--lmg-text-small);
  line-height: var(--lmg-leading-relaxed);
}

@media (min-width: 768px) {
  .lmg-archive-hero {
    padding: var(--lmg-space-10) var(--lmg-space-4) var(--lmg-space-6);
  }
  .lmg-archive-hero__title {
    font-size: var(--lmg-text-h1);
  }
}

/* ============================================
   Trust Strip
   ============================================ */

.lmg-trust-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--lmg-space-5);
  max-width: var(--lmg-container-max);
  margin: 0 auto;
  padding: 0 var(--lmg-container-gutter) var(--lmg-space-6);
}

.lmg-trust-strip__item {
  display: flex;
  align-items: center;
  gap: var(--lmg-space-3);
}

.lmg-trust-strip__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  color: var(--lmg-burgundy);
  background: var(--lmg-cream);
  border-radius: var(--lmg-radius-full);
}

.lmg-trust-strip__icon svg {
  width: 20px;
  height: 20px;
}

.lmg-trust-strip__text {
  font-size: var(--lmg-text-small);
  font-weight: var(--lmg-fw-medium);
  color: var(--lmg-text);
  line-height: var(--lmg-leading-snug);
}

@media (min-width: 768px) {
  .lmg-trust-strip {
    grid-template-columns: repeat(4, 1fr);
    padding-bottom: var(--lmg-space-8);
  }
}

/* ============================================
   Category Showcase
   ============================================ */

.lmg-category-showcase {
  max-width: var(--lmg-container-max);
  margin: 0 auto;
  padding: 0 var(--lmg-container-gutter) var(--lmg-space-8);
}

.lmg-category-showcase__title {
  font-size: var(--lmg-text-h3);
  font-weight: var(--lmg-fw-bold);
  color: var(--lmg-ink);
  text-align: center;
  margin: 0 0 var(--lmg-space-5);
}

.lmg-category-showcase__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--lmg-space-4);
}

.lmg-category-card {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 140px;
  border-radius: var(--lmg-radius-lg);
  overflow: hidden;
  background: linear-gradient(135deg, var(--lmg-brown), var(--lmg-burgundy));
  text-decoration: none;
  box-shadow: var(--lmg-shadow-sm);
  transition: box-shadow var(--lmg-transition-base), transform var(--lmg-transition-base);
}

.lmg-category-card:hover {
  box-shadow: var(--lmg-shadow-md);
  transform: translateY(-2px);
}

.lmg-category-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: var(--lmg-z-base);
}

.lmg-category-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(42, 31, 24, 0.75), rgba(42, 31, 24, 0) 60%);
  z-index: var(--lmg-z-base);
}

.lmg-category-card--placeholder::after {
  background: linear-gradient(to top, rgba(42, 31, 24, 0.35), rgba(42, 31, 24, 0) 60%);
}

.lmg-category-card__name {
  position: relative;
  z-index: var(--lmg-z-dropdown);
  padding: var(--lmg-space-3) var(--lmg-space-4);
  color: var(--lmg-white);
  font-size: var(--lmg-text-body);
  font-weight: var(--lmg-fw-semibold);
}

@media (min-width: 768px) {
  .lmg-category-showcase__grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .lmg-category-card {
    min-height: 200px;
  }
}

/* ============================================
   Product Card
   ============================================ */

.woocommerce ul.products li.product,
.wc-block-grid__products .wc-block-grid__product {
  position: relative;
}

/* Image container */
.woocommerce ul.products li.product a img,
.wc-block-grid__product-image img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--lmg-radius-md);
  transition: transform var(--lmg-transition-slow);
}

.woocommerce ul.products li.product a:hover img {
  transform: scale(1.03);
}

/* Image overflow clip */
.woocommerce ul.products li.product .woocommerce-loop-product__link {
  display: block;
  overflow: hidden;
  border-radius: var(--lmg-radius-md);
  margin-bottom: var(--lmg-space-3);
}

/* Product title */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: var(--lmg-text-small);
  font-weight: var(--lmg-fw-medium);
  color: var(--lmg-ink);
  margin: 0 0 var(--lmg-space-2);
  line-height: var(--lmg-leading-snug);
}

/* Price */
.woocommerce ul.products li.product .price {
  font-size: var(--lmg-text-body);
  font-weight: var(--lmg-fw-semibold);
  color: var(--lmg-ink);
}

.woocommerce ul.products li.product .price ins {
  color: var(--lmg-burgundy);
  text-decoration: none;
  font-weight: var(--lmg-fw-bold);
}

.woocommerce ul.products li.product .price del {
  color: var(--lmg-muted);
  font-weight: var(--lmg-fw-normal);
  font-size: var(--lmg-text-small);
}

/* Add to cart button */
.woocommerce ul.products li.product .button {
  display: block;
  width: 100%;
  margin-top: var(--lmg-space-3);
  padding: 10px 16px;
  background: var(--lmg-burgundy);
  color: var(--lmg-white);
  font-family: var(--lmg-font-primary);
  font-size: var(--lmg-text-small);
  font-weight: var(--lmg-fw-medium);
  text-align: center;
  border-radius: var(--lmg-radius-md);
  min-height: 44px;
  transition: background-color var(--lmg-transition-base);
}

.woocommerce ul.products li.product .button:hover {
  background: var(--lmg-burgundy-dark);
  color: var(--lmg-white);
}

/* ============================================
   Product Badge Overlay
   ============================================ */

.lmg-product-badge {
  position: absolute;
  top: var(--lmg-space-3);
  left: var(--lmg-space-3);
  z-index: var(--lmg-z-base);
}

/* ============================================
   Sale Flash (WooCommerce default) — override
   ============================================ */

.woocommerce ul.products li.product .onsale {
  background: var(--lmg-error);
  color: var(--lmg-white);
  border-radius: var(--lmg-radius-sm);
  font-family: var(--lmg-font-primary);
  font-size: 11px;
  font-weight: var(--lmg-fw-medium);
  letter-spacing: var(--lmg-tracking-wide);
  min-width: auto;
  min-height: auto;
  line-height: 1;
  padding: 4px 10px;
  top: var(--lmg-space-3);
  left: auto;
  right: var(--lmg-space-3);
}

/* ============================================
   Mid-grid Promo Card
   ============================================ */

.woocommerce ul.products li.lmg-promo-card {
  background: var(--lmg-burgundy);
  border-radius: var(--lmg-radius-lg);
  overflow: hidden;
}

.lmg-promo-card__inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  height: 100%;
  padding: var(--lmg-space-6);
  text-decoration: none;
  gap: var(--lmg-space-3);
}

.lmg-promo-card .lmg-eyebrow {
  color: rgba(255, 255, 255, 0.7);
}

.lmg-promo-card__title {
  font-size: var(--lmg-text-h3);
  font-weight: var(--lmg-fw-bold);
  color: var(--lmg-white);
  margin: 0;
  line-height: var(--lmg-leading-snug);
}

.lmg-promo-card__text {
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--lmg-text-small);
  margin: 0;
}

.lmg-promo-card .lmg-btn-secondary {
  background: var(--lmg-white);
  color: var(--lmg-burgundy);
  border-color: var(--lmg-white);
}

.lmg-promo-card .lmg-btn-secondary:hover {
  background: var(--lmg-cream);
  color: var(--lmg-burgundy-dark);
}

/* Phantom li — hidden, exists only to absorb the template's closing </li> */
.woocommerce ul.products li.lmg-promo-card-phantom {
  display: none !important;
}

/* ------------------------------------------------------------------ *
 * Single product — make the title the anchor of the summary column.
 * Astra ships it at 20px/400, lighter than the price beneath it.
 * ------------------------------------------------------------------ */
.single-product .summary h1.product_title.entry-title {
  font-family: var(--lmg-font-primary);
  font-size: var(--lmg-text-h2); /* 26px mobile → 36px desktop (tokens) */
  font-weight: var(--lmg-fw-bold);
  line-height: var(--lmg-leading-snug);
  letter-spacing: var(--lmg-tracking-tight);
  color: var(--lmg-ink);
  margin-bottom: var(--lmg-space-3);
}

/* ------------------------------------------------------------------ *
 * Archive add-to-cart button — JetWooBuilder markup.
 *
 * The shop/category grids are rendered by JetWooBuilder inside an
 * Elementor template (post 2538), not by WooCommerce's own
 * `ul.products li.product` markup, so the rule above never reaches them.
 * That template pins the button to Elementor global colour 6, which maps
 * to Astra palette slot 6 (#eddacd) — white label on pale cream, about
 * 1.3:1, effectively invisible. Its selector carries the Elementor
 * element id, so !important is needed to win.
 *
 * Proper fix when the shop template is rebuilt: set the JetWoo Products
 * widget's button colour to global colour 0 in Elementor and drop this.
 * ------------------------------------------------------------------ */
.jet-woo-products .jet-woo-product-button .button,
.jet-woo-products__item .button.add_to_cart_button,
.jet-woo-products__item .button.product_type_variable {
  background: var(--lmg-primary) !important;
  color: var(--lmg-white) !important;
  font-family: var(--lmg-font-primary);
  font-size: var(--lmg-text-small);
  font-weight: var(--lmg-fw-medium);
  border-radius: var(--lmg-radius-md);
  transition: background-color var(--lmg-transition-base);
}

.jet-woo-products .jet-woo-product-button .button:hover,
.jet-woo-products__item .button.add_to_cart_button:hover,
.jet-woo-products__item .button.product_type_variable:hover {
  background: var(--lmg-primary-dark) !important;
  color: var(--lmg-white) !important;
}

/* ------------------------------------------------------------------ *
 * หน้าสินค้าเดี่ยว: คำบรรยาย (แท็บ) ซ้าย 50% · FAQ ขวา 50%
 * (inc/woocommerce/product-faq.php)
 *
 * .woocommerce-tabs ถูก Woo พิมพ์ออกมาระหว่าง hook priority 9 กับ 11
 * จึงกลายเป็นลูกคนแรกของกริดนี้เอง ไม่ต้องแตะ markup ของ Woo
 * สินค้าที่ไม่มีคำบรรยาย Woo จะไม่พิมพ์แท็บ -> FAQ เลื่อนไปอยู่คอลัมน์ซ้ายเอง
 * ------------------------------------------------------------------ */
.lmg-prod-extra {
  /* แกลเลอรีกับ summary เป็น float อยู่ใน .ast-article-single ที่เป็น inline-block
     ไม่ clear กล่องนี้จะไหลไปแทรกข้าง ๆ แล้วเหลือความกว้างแค่ ~50px
     (.woocommerce-tabs ของ Woo เองก็มี clear:both ด้วยเหตุผลเดียวกัน) */
  clear: both;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--lmg-space-8, 48px);
  align-items: start;
  margin-top: var(--lmg-space-6, 32px);
}

.woocommerce div.product .lmg-prod-extra .woocommerce-tabs {
  margin: 0;
  padding: 0;
}

/* FAQ */
.lmg-prod-faq__title {
  margin: 0 0 var(--lmg-space-4, 16px);
  font-family: var(--lmg-font-display);
  font-size: var(--lmg-text-h3, 22px);
  line-height: 1.3;
  color: var(--lmg-ink);
}

.lmg-prod-faq__item {
  border-bottom: 1px solid var(--lmg-line);
}

.lmg-prod-faq__item > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 16px 0;
  font-family: var(--lmg-font-primary);
  font-size: var(--lmg-text-body, 16px);
  font-weight: var(--lmg-fw-semibold, 600);
  color: var(--lmg-primary-dark);
  transition: color 0.2s ease;
}

.lmg-prod-faq__item > summary::-webkit-details-marker { display: none; }

/* เครื่องหมาย + / x วาดด้วย CSS ไม่ต้องโหลดไอคอน */
.lmg-prod-faq__item > summary::after {
  content: "";
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  background:
    linear-gradient(currentColor, currentColor) center/100% 1.6px no-repeat,
    linear-gradient(currentColor, currentColor) center/1.6px 100% no-repeat;
  transition: transform 0.3s ease;
}

.lmg-prod-faq__item[open] > summary::after { transform: rotate(135deg); }

.lmg-prod-faq__item > summary:hover,
.lmg-prod-faq__item > summary:focus-visible { color: var(--lmg-primary); }

.lmg-prod-faq__answer {
  padding: 0 0 20px;
  font-size: var(--lmg-text-small, 14px);
  line-height: 1.7;
  color: var(--lmg-text);
}

.lmg-prod-faq__answer p { margin: 0 0 0.8em; }
.lmg-prod-faq__answer p:last-child { margin-bottom: 0; }
.lmg-prod-faq__answer ul { margin: 0 0 0.8em; padding-left: 1.2em; }
.lmg-prod-faq__answer li { margin-bottom: 0.4em; }

@media (max-width: 921px) {
  .lmg-prod-extra {
    grid-template-columns: 1fr;
    gap: var(--lmg-space-6, 32px);
  }
}

/* ------------------------------------------------------------------ *
 * แถบช่องทางชำระเงิน ใต้ปุ่มหยิบใส่ตะกร้า (หน้าสินค้าเดี่ยว)
 * markup มาจาก inc/woocommerce/payment-icons.php
 *
 * โลโก้คุมด้วยความสูงอย่างเดียว ปล่อยความกว้างตามสัดส่วนจริงของแต่ละยี่ห้อ
 * ถ้าไปบังคับความกว้างเท่ากันหมด โลโก้ที่ยาว (Mastercard) จะถูกบีบจนเสียรูป
 * ------------------------------------------------------------------ */
.lmg-pay {
  margin: var(--lmg-space-4) 0 0;
}

.lmg-pay__title {
  margin: 0 0 var(--lmg-space-2);
  font-size: var(--lmg-text-caption);
  font-weight: var(--lmg-fw-medium);
  letter-spacing: var(--lmg-tracking-wide);
  color: var(--lmg-muted);
  text-align: center;
}

.lmg-pay__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lmg-pay__item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding: 3px 5px;
  margin: 0;
  border: 1px solid var(--lmg-line);
  border-radius: var(--lmg-radius-sm);
  background: var(--lmg-white);
  box-sizing: border-box;
}

.lmg-pay__item img {
  display: block;
  height: 22px;
  width: auto;
  max-width: 56px;
  object-fit: contain;
}

/* PromptPay ไม่มีไฟล์โลโก้บนเซิร์ฟเวอร์ จึงใช้ชิปตัวอักษร
   ไม่วาดโลโก้เลียนแบบขึ้นมาเอง */
.lmg-pay__item--text {
  padding: 0 10px;
  font-size: var(--lmg-text-caption);
  font-weight: var(--lmg-fw-semibold);
  color: var(--lmg-ink);
  white-space: nowrap;
}

@media (max-width: 544px) {
  .lmg-pay__list { gap: 5px; }
  .lmg-pay__item { height: 28px; }
  .lmg-pay__item img { height: 20px; }
}