:root {
	--wd-text-font: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
	--wd-text-font-weight: 400;
	--wd-text-color: #777777;
	--wd-text-font-size: 15px;
	--wd-title-font: "Mali", Arial, Helvetica, sans-serif;
	--wd-title-font-weight: 700;
	--wd-title-color: #242424;
	--wd-entities-title-font: "Mali", Arial, Helvetica, sans-serif;
	--wd-entities-title-font-weight: 600;
	--wd-entities-title-color: #333333;
	--wd-entities-title-color-hover: rgb(51 51 51 / 65%);
	--wd-alternative-font: "Mali", Arial, Helvetica, sans-serif;
	--wd-widget-title-font: "Mali", Arial, Helvetica, sans-serif;
	--wd-widget-title-font-weight: 700;
	--wd-widget-title-transform: capitalize;
	--wd-widget-title-color: #333;
	--wd-widget-title-font-size: 16px;
	--wd-header-el-font: "IBM Plex Sans Thai", Arial, Helvetica, sans-serif;
	--wd-header-el-font-weight: 600;
	--wd-header-el-transform: capitalize;
	--wd-header-el-font-size: 14px;
	--wd-brd-radius: 10px;
	--wd-otl-style: dotted;
	--wd-otl-width: 2px;
	--wd-primary-color: #D62828;
	--wd-alternative-color: rgb(255,199,44);
	--btn-default-bgcolor: #f7f7f7;
	--btn-default-bgcolor-hover: #efefef;
	--btn-accented-bgcolor: rgb(140,188,103);
	--btn-accented-bgcolor-hover: rgb(128,171,94);
	--btn-transform: capitalize;
	--wd-form-brd-width: 1px;
	--notices-success-bg: #459647;
	--notices-success-color: #fff;
	--notices-warning-bg: #E0B252;
	--notices-warning-color: #fff;
	--wd-link-color: #333333;
	--wd-link-color-hover: #242424;
	--wd-sticky-btn-height: 95px;
}
.wd-age-verify-wrap {
	--wd-popup-width: 500px;
}
.wd-popup.wd-promo-popup {
	background-color: #111111;
	background-image: none;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: left center;
}
.wd-promo-popup-wrap {
	--wd-popup-width: 800px;
}
:is(.woodmart-archive-shop .wd-builder-off,.wd-wishlist-content,.related-and-upsells,.cart-collaterals,.wd-shop-product,.wd-fbt) .wd-products-with-bg, :is(.woodmart-archive-shop .wd-builder-off,.wd-wishlist-content,.related-and-upsells,.cart-collaterals,.wd-shop-product,.wd-fbt) .wd-products-with-bg :is(.wd-product,.wd-cat) {
	--wd-prod-bg:rgb(255,255,255);
	--wd-bordered-bg:rgb(255,255,255);
}
:is(.woodmart-woocommerce-layered-nav, .wd-product-category-filter) .wd-scroll-content {
	max-height: 223px;
}
.wd-page-title .wd-page-title-bg img {
	object-fit: cover;
	object-position: center center;
}
.wd-footer {
	background-color: rgb(140,188,103);
	background-image: none;
}
html .wd-nav-mobile > li > a {
	text-transform: capitalize;
}
html .wd-checkout-steps {
	text-transform: capitalize;
}
html .page-title > .container > .title, html .page-title .wd-title-wrapp > .title {
	font-size: 32px;
}
html table th {
	text-transform: capitalize;
}
:is(.page, .search-no-results, .error404) :is(.wd-page-content, .whb-header) {
	background-color: rgb(255,248,236);
	background-image: none;
}
.woodmart-archive-shop:not(.single-product) :is(.wd-page-content, .whb-header) {
	background-color: rgb(250,248,245);
	background-image: none;
}
.single-product :is(.wd-page-content, .whb-header) {
	background-color: rgb(250,248,245);
	background-image: none;
}
.woodmart-archive-blog :is(.wd-page-content, .whb-header) {
	background-color: rgb(250,248,245);
	background-image: none;
}
.single-post :is(.wd-page-content, .whb-header) {
	background-color: rgb(250,248,245);
	background-image: none;
}
.woodmart-archive-portfolio :is(.wd-page-content, .whb-header) {
	background-color: rgb(250,248,245);
	background-image: none;
}
.single-portfolio :is(.wd-page-content, .whb-header) {
	background-color: rgb(250,248,245);
	background-image: none;
}
html .widget_price_filter [class*="price_slider_amount"] .button {
	color: rgb(255,255,255);
	background: rgb(140,188,103);
}
html .widget_price_filter [class*="price_slider_amount"] .button:hover {
	color: rgb(255,255,255);
	background: rgb(128,171,94);
}
body, [class*=color-scheme-light], [class*=color-scheme-dark], .wd-search-form[class*="wd-header-search-form"] form.searchform, .wd-el-search .searchform {
	--wd-form-bg: rgb(255,255,255);
}
.wd-nav-arrows.wd-pos-sep:not(:where(.wd-custom-style)) {
	--wd-arrow-size: 40px;
	--wd-arrow-icon-size: 16px;
	--wd-arrow-offset-h: 20px;
	--wd-arrow-color: rgb(51,51,51);
	--wd-arrow-color-hover: rgb(255,255,255);
	--wd-arrow-color-dis: rgba(51,51,51,0.8);
	--wd-arrow-bg: rgb(255,255,255);
	--wd-arrow-bg-hover: rgb(140,188,103);
	--wd-arrow-bg-dis: rgb(255,255,255);
	--wd-arrow-radius: 10px;
	--wd-arrow-shadow: 0px 0px 0px 0px rgba(255,255,255,0);
}
.wd-nav-scroll {
	--wd-nscroll-height: 3px;
	--wd-nscroll-drag-bg: rgb(140,188,103);
	--wd-nscroll-drag-bg-hover: rgb(128,171,94);
}
.wd .product-label.new {
	background-color: rgb(140,188,103);
	color: rgb(255,255,255);
}
.mfp-wrap.wd-popup-quick-view-wrap {
	--wd-popup-width: 920px;
}

@media (max-width: 1024px) {
	:root {
		--wd-sticky-btn-height: 95px;
	}
	html .page-title > .container > .title, html .page-title .wd-title-wrapp > .title {
		font-size: 28px;
	}
	[class*="thumbs-grid-bottom"] .woocommerce-product-gallery__wrapper.wd-grid {
		--wd-col: 1;
	}

}

@media (max-width: 768.98px) {
	:root {
		--wd-sticky-btn-height: 42px;
	}
	[class*="thumbs-grid-bottom"] .woocommerce-product-gallery__wrapper.wd-grid {
		--wd-col: 1;
	}

}
:root{
--wd-container-w: 1200px;
--wd-form-brd-radius: 5px;
--btn-default-color: #333;
--btn-default-color-hover: #333;
--btn-accented-color: #fff;
--btn-accented-color-hover: #fff;
--btn-default-brd-radius: 5px;
--btn-default-box-shadow: none;
--btn-default-box-shadow-hover: none;
--btn-accented-brd-radius: 5px;
--btn-accented-box-shadow: none;
--btn-accented-box-shadow-hover: none;
}

@media (min-width: 1200px) {
section.elementor-section.wd-section-stretch > .elementor-container {
margin-left: auto;
margin-right: auto;
}
}


.wd-page-title {
background-color: rgb(250,248,245);
}

/* ==============================================================
   บังคับ Main Header ให้อยู่ในระยะ Boxed (1200px) ไม่ชิดขอบจอ
============================================================== */
.whb-main-header .container {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding-left: 15px !important;
  padding-right: 15px !important;
  width: 100% !important;
}

/* เผื่อแถบ Top bar (Utility Strip) ชิดขอบไปด้วย */
.whb-top-bar .container {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding-left: 15px !important;
  padding-right: 15px !important;
  width: 100% !important;
}
/* ==============================================================
   Aroijung Hero Background (Elementor Optimized)
============================================================== */

/* 1. กำหนดกรอบพื้นหลังหลักให้ Elementor Container */
.aroijung-hero-bg {
  position: relative;
  background-color: #FFF8EC; /* สี Body Background */
  overflow: hidden;
  /* ท่าไม้ตาย! สร้าง Layer พิเศษไม่ให้ z-index -1 ทะลุหายไปหลังเว็บ */
  isolation: isolate; 
}

/* 2. สร้างแสง Gradient ออร่าตรงกลางให้ฟินเหมือนในรูป */
.aroijung-hero-bg::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90vw; /* ขยายวงแสงให้กว้างครอบคลุมขึ้น */
  height: 90vw;
  /* ปรับความสว่างของการไล่สี (Gradient) ให้ชัดและเนียนขึ้น */
  background: radial-gradient(circle, rgba(255, 199, 44, 0.4) 0%, rgba(255, 248, 236, 0) 65%);
  border-radius: 50%;
  z-index: -1; /* ผลักไปอยู่ข้างหลังสุด! */
  pointer-events: none;
}

/* 3. สร้าง Pattern จุดกระจายๆ (ผลักไปอยู่ข้างหลังเช่นกัน) */
.aroijung-hero-bg::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(#FFC72C 3px, transparent 3px),
    radial-gradient(#D62828 2.5px, transparent 2.5px);
  background-size: 120px 120px;
  background-position: 0 0, 60px 60px;
  opacity: 0.3;
  z-index: -1; /* ผลักไปอยู่ข้างหลังสุด! ไม่บังรูปแน่นอน */
  pointer-events: none;
}
/* ==============================================================
   Aroijung Visual Showcase (Clean & Bottom Mascot)
============================================================== */
.aroijung-visual-showcase {
  position: relative;
  width: 100%;
  min-height: 450px; /* กำหนดพื้นที่ให้ซองมีที่ลอย */
  display: flex;
  justify-content: center;
  z-index: 1; 
}

/* 1. ตั้งค่าขนาดน้องมาสคอต (เล็กลงและชิดขอบล่างสุด) */
.aj-mascot-img {
  position: absolute;
  bottom: 0; /* ดึงน้องมาติดขอบล่างของ Section */
  left: 50%;
  transform: translateX(-50%); /* จัดให้อยู่กึ่งกลางเป๊ะๆ */
  width: 40%; /* ปรับขนาดให้เล็กลง */
  max-width: 220px;
  z-index: 5; /* ให้อยู่หน้าสุด */
  filter: drop-shadow(0 10px 15px rgba(0,0,0,0.15));
}

/* 2. สไตล์หลักของซองสินค้าทั้ง 3 รส */
.aj-pack-img {
  position: absolute;
  width: 32%;
  max-width: 180px;
  border-radius: 8px;
  box-shadow: 0 15px 25px rgba(0,0,0,0.2);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* ลูกเล่น Hover: เอาเมาส์ชี้แล้วซองเด้งมาข้างหน้า */
.aj-pack-img:hover {
  transform: translateY(-20px) scale(1.15) rotate(0deg) !important;
  z-index: 10 !important;
  box-shadow: 0 25px 35px rgba(0,0,0,0.3);
  cursor: pointer;
  animation-play-state: paused; /* หยุดการลอยตอนเมาส์ชี้ */
}

/* 3. สร้างอนิเมชั่นลอยขึ้น-ลง ช้าๆ ละมุนๆ */
@keyframes floatOriginal {
  0%, 100% { transform: translateY(0) rotate(-12deg); }
  50% { transform: translateY(-15px) rotate(-12deg); }
}
@keyframes floatSpicy {
  0%, 100% { transform: translateY(0) rotate(15deg); }
  50% { transform: translateY(-15px) rotate(15deg); }
}
@keyframes floatSquid {
  0%, 100% { transform: translateY(0) rotate(5deg); }
  50% { transform: translateY(-15px) rotate(5deg); }
}

/* ตำแหน่งซองปลาหมึก (สีม่วง) - ดันขึ้นบนให้เห็นชัด */
.aj-pack-squid {
  top: 5%;
  left: 33%;
  z-index: 2; 
  animation: floatSquid 5s ease-in-out infinite;
}

/* ตำแหน่งซองออริจินัล (สีเขียว) */
.aj-pack-original {
  left: 5%;
  top: 20%;
  z-index: 4;
  animation: floatOriginal 4s ease-in-out infinite;
}

/* ตำแหน่งซองสไปซี่ (สีแดง) */
.aj-pack-spicy {
  right: 5%;
  top: 25%;
  z-index: 3;
  animation: floatSpicy 4.5s ease-in-out infinite;
}

/* ปรับให้สวยงามบนหน้าจอมือถือ */
@media (max-width: 768px) {
  .aroijung-visual-showcase { min-height: 350px; }
  .aj-mascot-img { width: 50%; }
  .aj-pack-img { width: 38%; }
  .aj-pack-squid { top: -5%; }
}
/* ==============================================================
   Aroijung Promo Badge (ป้ายแคปซูลไฮไลต์)
============================================================== */
.aj-promo-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #FFFFFF; /* พื้นหลังสีขาวให้ตัวหนังสือป๊อปอัป */
  border: 2px solid #D62828; /* ขอบสีแดง Primary ตาม Design System */
  border-radius: 50px; /* ทรงแคปซูล */
  padding: 8px 20px;
  margin-bottom: 20px; /* ดันข้อความด้านล่างให้ห่างออกไปนิดนึง */
  box-shadow: 0 4px 15px rgba(214, 40, 40, 0.15); /* เงาสีแดงจางๆ ดูมีมิติ */
  transition: transform 0.3s ease; /* เตรียมไว้เผื่ออยากให้เด้งตอนชี้ */
}

/* เอฟเฟกต์เบาๆ ตอนเอาเมาส์ไปชี้ */
.aj-promo-badge:hover {
  transform: translateY(-3px);
}

/* สไตล์ข้อความด้านในป้าย */
.aj-promo-badge span {
  font-family: 'IBM Plex Thai', sans-serif;
  font-weight: 600; /* ตัวหนาให้อ่านง่าย */
  font-size: 16px;
  color: #D62828; /* สีข้อความแดง Primary */
  letter-spacing: 0.5px;
}

/* สไตล์ไอคอนดาว */
.aj-badge-icon {
  width: 20px;
  height: 20px;
  margin-right: 8px; /* ระยะห่างระหว่างดาวกับข้อความ */
}

/* ปรับขนาดให้พอดีบนมือถือ */
@media (max-width: 768px) {
  .aj-promo-badge {
    padding: 6px 16px;
  }
  .aj-promo-badge span {
    font-size: 14px;
  }
  .aj-badge-icon {
    width: 16px;
    height: 16px;
  }
}
/* ==============================================================
   Aroijung Social Proof (ลูกค้า 10k+ รีวิว)
============================================================== */
.aj-social-proof {
  display: flex;
  align-items: center;
  gap: 15px; /* ระยะห่างระหว่างกลุ่มรูปภาพ กับ ข้อความ */
  margin-bottom: 20px;
  font-family: 'IBM Plex Thai', sans-serif;
}

/* จัดกลุ่มรูปภาพ */
.aj-avatars-group {
  display: flex;
  align-items: center;
}

/* ตั้งค่าให้รูปภาพเป็นวงกลมและซ้อนทับกัน */
.aj-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 3px solid #FFF8EC; /* ใช้สีเดียวกับพื้นหลังเว็บ เพื่อให้การตัดขอบดูเนียนตา */
  object-fit: cover;
  margin-left: -15px; /* ดึงรูปให้มาซ้อนทับกันทางซ้าย */
  background-color: #EEE; /* เผื่อรูปโหลดไม่ขึ้น */
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* ลบ margin ซ้ายของรูปแรกสุด ไม่ให้ออกนอกกรอบ */
.aj-avatar:first-child {
  margin-left: 0;
}

/* สไตล์กล่องตัวเลข 10k+ */
.aj-avatar-count {
  background-color: #FFC72C; /* สี Secondary */
  color: #7A2E1B; /* สีข้อความเข้มๆ ให้อ่านง่าย */
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: -0.5px;
}

/* ฝั่งข้อความและดาว */
.aj-proof-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* สไตล์ไอคอนดาว */
.aj-stars {
  display: flex;
  gap: 2px;
}
.aj-stars svg {
  width: 18px;
  height: 18px;
  fill: #FFC72C; /* สีดาว */
}

/* สไตล์ข้อความรีวิว */
.aj-proof-content p {
  margin: 0;
  font-size: 14px;
  color: #333333;
  line-height: 1.2;
}
.aj-proof-content p strong {
  color: #D62828; /* ไฮไลต์ตัวเลขด้วยสี Primary */
  font-weight: 700;
}

/* ปรับให้พอดีหน้าจอมือถือ */
@media (max-width: 768px) {
  .aj-social-proof { justify-content: center; } /* จัดกลางบนมือถือ */
  .aj-avatar { width: 36px; height: 36px; }
  .aj-stars svg { width: 16px; height: 16px; }
  .aj-proof-content p { font-size: 13px; }
}

/* ==============================================================
   Aroijung Product Grid (3 Items)
============================================================== */
/* จัดโครงสร้าง Grid 3 คอลัมน์ */
.aj-product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  font-family: 'IBM Plex Thai', sans-serif;
}

/* สไตล์พื้นฐานของกล่องสินค้า (Card) */
.aj-product-card {
  background: #FFFFFF;
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0,0,0,0.03);
  position: relative;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  display: flex;
  flex-direction: column;
}

/* เอฟเฟกต์ตอนเอาเมาส์ชี้การ์ด */
.aj-product-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 30px rgba(214, 40, 40, 0.1); /* เงาสีแดงอ่อนๆ */
}

/* ป้าย Badge มุมซ้ายบน */
.aj-badge {
  position: absolute;
  top: 20px;
  left: 20px;
  padding: 4px 12px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 700;
  z-index: 2;
}
.aj-badge-bestseller {
  background-color: #FFC72C; /* สี Secondary */
  color: #7A2E1B;
}

/* ส่วนรูปภาพสินค้า */
.aj-product-img {
  width: 100%;
  text-align: center;
  margin-bottom: 20px;
  overflow: hidden;
}
.aj-product-img img {
  width: 100%;
  max-width: 180px;
  height: auto;
  object-fit: contain;
  transition: transform 0.4s ease;
  filter: drop-shadow(0 10px 10px rgba(0,0,0,0.1));
}

/* ให้รูปขยายขึ้นนิดนึงตอน Hover */
.aj-product-card:hover .aj-product-img img {
  transform: scale(1.08) rotate(2deg);
}

/* แท็กบอกรสชาติ */
.aj-flavor-tag {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  display: inline-block;
  margin-bottom: 10px;
}
.aj-tag-original { background-color: #E8F5E9; color: #2E7D32; } /* สีเขียว */
.aj-tag-spicy { background-color: #FFEBEE; color: #D62828; } /* สีแดง */
.aj-tag-squid { background-color: #F3E5F5; color: #6A1B9A; } /* สีม่วง */

/* ชื่อสินค้า */
.aj-product-title {
  font-size: 16px;
  font-weight: 600;
  color: #222222;
  margin: 0 0 16px 0;
  line-height: 1.4;
  flex-grow: 1; /* ดันปุ่มลงไปล่างสุดเสมอ */
}

/* แถวราคา และ ปุ่ม */
.aj-product-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
}

/* ราคา */
.aj-price {
  font-size: 22px;
  font-weight: 700;
  color: #D62828; /* สี Primary */
}

/* ปุ่มหยิบใส่ตะกร้า */
.aj-add-to-cart {
  background-color: #D62828;
  color: #FFFFFF;
  border: none;
  border-radius: 50px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  font-family: 'IBM Plex Thai', sans-serif;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: background-color 0.2s;
}
.aj-add-to-cart:hover {
  background-color: #B22222;
}

/* 📱 Responsive สำหรับมือถือและแท็บเล็ต */
@media (max-width: 991px) {
  .aj-product-grid { grid-template-columns: repeat(2, 1fr); } /* แท็บเล็ต 2 คอลัมน์ */
}
@media (max-width: 576px) {
  .aj-product-grid { grid-template-columns: 1fr; } /* มือถือ 1 คอลัมน์ */
  .aj-product-card { padding: 20px; }
}

/* ===================================================================
   Aroijung.com — Product Card Section CSS
   ตาม Design System v1.1 (section 2 + 9.3)
   วิธีใช้: แปะทั้งหมดนี้ใน Woodmart > Theme Settings > Custom CSS
   (หรือ Appearance > Customize > Additional CSS ก็ได้)
=================================================================== */

.arj-cards-section {
  --color-crimson: #D62828;
  --color-crimson-deep: #A81D1D;
  --color-gold: #FFC72C;
  --color-hot: #E85C8E;
  --color-cream: #FFF8EC;
  --color-ink: #2A1A0E;
  font-family: 'IBM Plex Thai', system-ui, sans-serif;
  background: #FFFFFF;
  padding: 10px 24px;
  box-sizing: border-box;
}
.arj-cards-grid {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
@media (max-width: 900px) {
  .arj-cards-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .arj-cards-grid { grid-template-columns: 1fr; }
}

.arj-card {
  position: relative;
  background: var(--color-cream);
  border-radius: 24px;
  padding: 20px;
  border: 2px solid transparent;
  box-shadow: 0 12px 30px -8px rgba(214,40,40,0.18), 0 4px 10px -4px rgba(42,26,14,0.08);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
  font-family: 'IBM Plex Thai', sans-serif;
}
.arj-card:hover {
  transform: translateY(-4px);
  border-color: rgba(214,40,40,0.15);
}

.arj-card-wishlist {
  display: none; /* เอาไอคอนหัวใจ/รายการที่ชอบออก — เปลี่ยนเป็น flex ถ้าต้องการใช้คืน */
  position: absolute;
  top: 36px; right: 36px;
  width: 36px; height: 36px;
  border-radius: 9999px;
  background: rgba(255,255,255,0.8);
  align-items: center; justify-content: center;
  z-index: 3;
  cursor: pointer;
}
.arj-card-wishlist svg { width: 18px; height: 18px; stroke: var(--color-ink); fill: none; }

.arj-card-badge {
  position: absolute;
  top: 36px; left: 36px;
  background: var(--color-crimson);
  color: white;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 5px 12px;
  border-radius: 9999px 9999px 9999px 4px;
  z-index: 3;
}

.arj-card-image-box {
  position: relative;
  border-radius: 18px;
  padding: 16px 16px 22px;
  overflow: hidden;
  margin-bottom: 16px;
}
.arj-card-image-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding-bottom: 14px;
}
.arj-brand-pill {
  background: var(--color-gold);
  border: 2px solid rgba(255,255,255,0.6);
  border-radius: 14px;
  padding: 6px 18px;
  text-align: center;
  line-height: 1.1;
}
.arj-brand-pill .th { font-family: 'Mali', sans-serif; font-weight: 700; font-size: 15px; color: var(--color-ink); display: block; }
.arj-brand-pill .en { font-size: 9px; letter-spacing: 0.12em; color: rgba(42,26,14,0.7); }

.arj-flavor-pill {
  background: var(--color-gold);
  color: var(--color-ink);
  font-weight: 700;
  font-size: 13px;
  padding: 6px 18px;
  border-radius: 9999px;
}

.arj-card-photo {
  position: relative;
  aspect-ratio: 3/4;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.arj-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.arj-card-meta-row {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
  padding: 0 4px;
}

/* color variants per flavor */
.arj-card[data-flavor="original"] .arj-card-image-box { background: #0E7C3A; }
.arj-card[data-flavor="spicy"]    .arj-card-image-box { background: var(--color-crimson); }
.arj-card[data-flavor="squid"]    .arj-card-image-box { background: #3B2A22; }

.arj-card-info { padding: 0 4px; }
.arj-card-rating {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: rgba(42,26,14,0.6);
  margin-bottom: 6px;
}
.arj-card-rating strong { color: var(--color-ink); font-weight: 700; }
.arj-star { width: 14px; height: 14px; fill: var(--color-gold); flex-shrink: 0; }

.arj-card-name {
  font-family: 'Mali', sans-serif;
  font-weight: 700;
  font-size: 21px;
  color: var(--color-ink);
  margin: 0 0 2px;
}
.arj-card-sub {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(42,26,14,0.5);
  margin: 0 0 14px;
}

.arj-card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
  padding-bottom: 2px;
}
.arj-price-group { display: flex; align-items: baseline; gap: 8px; }
.arj-price {
  font-family: 'Mali', sans-serif;
  font-weight: 700;
  font-size: 26px;
  color: var(--color-crimson);
}
.arj-price-old {
  font-size: 14px;
  color: rgba(42,26,14,0.4);
  text-decoration: line-through;
}

.arj-add-btn {
  width: 48px; height: 48px;
  border-radius: 9999px;
  background: var(--color-crimson);
  border: none;
  box-shadow: 0 4px 0 0 var(--color-crimson-deep);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
  flex-shrink: 0;
}
.arj-add-btn:hover { transform: translateY(2px); box-shadow: none; }
.arj-add-btn svg { width: 22px; height: 22px; stroke: white; stroke-width: 3.5; }

/* ===================================================================
   WooCommerce Add to Cart override
   ครอบปุ่ม [add_to_cart id="X"] ของ WooCommerce ให้หน้าตาเหมือน .arj-add-btn
   วิธีใช้: ห่อ shortcode ด้วย <div class="arj-add-btn-wrap">[add_to_cart id="X"]</div>
=================================================================== */
.arj-add-btn-wrap {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  position: relative;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}
.arj-add-btn-wrap,
.arj-add-btn-wrap * {
  box-sizing: border-box;
}
/* Elementor/Woodmart มักห่อ shortcode ด้วย wrapper เพิ่ม เช่น .elementor-shortcode หรือ <p>
   ตัดกรอบ/ระยะห่างของ wrapper เหล่านั้นทั้งหมด ไม่ให้มีกรอบเทาหรือพื้นที่ส่วนเกินโผล่มา */
.arj-add-btn-wrap .elementor-shortcode,
.arj-add-btn-wrap p {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  outline: none !important;
  line-height: 0 !important;
  width: 48px;
  height: 48px;
}
.arj-add-btn-wrap .added_to_cart {
  display: none !important; /* ซ่อนลิงก์ "ดูตะกร้า" ที่ WooCommerce เพิ่มมาให้หลังกดสำเร็จ */
}
.arj-add-btn-wrap a.button,
.arj-add-btn-wrap a.add_to_cart_button,
.arj-add-btn-wrap a.ajax_add_to_cart {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 48px !important;
  height: 48px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 9999px !important;
  background: var(--color-crimson, #D62828) !important;
  box-shadow: 0 4px 0 0 var(--color-crimson-deep, #A81D1D) !important;
  border: none !important;
  outline: none !important;
  color: transparent !important;        /* ซ่อนตัวหนังสือ "ใส่ตะกร้า" เดิม */
  font-size: 0 !important;
  line-height: 0 !important;
  text-indent: -9999px;
  overflow: hidden;
  position: relative;
  transition: transform .15s ease, box-shadow .15s ease;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* บางธีม (Woodmart) ใส่ outline/box-shadow ตอน focus หรือ visited มาเอง ตัดทุก state ทิ้ง */
.arj-add-btn-wrap a.button:focus,
.arj-add-btn-wrap a.button:active,
.arj-add-btn-wrap a.button:visited,
.arj-add-btn-wrap a.add_to_cart_button:focus,
.arj-add-btn-wrap a.add_to_cart_button:active,
.arj-add-btn-wrap a.add_to_cart_button:visited {
  outline: none !important;
  border: none !important;
  box-shadow: 0 4px 0 0 var(--color-crimson-deep, #A81D1D) !important;
}
.arj-add-btn-wrap a.button:hover,
.arj-add-btn-wrap a.add_to_cart_button:hover {
  transform: translateY(2px);
  box-shadow: none !important;
}
/* วาดเครื่องหมาย + ทับด้วย CSS (เพราะข้อความเดิมถูกซ่อนแล้ว) */
.arj-add-btn-wrap a.button::before,
.arj-add-btn-wrap a.add_to_cart_button::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 3.5px;
  background: white;
  border-radius: 2px;
  text-indent: 0;
  transition: opacity .15s ease;
}
.arj-add-btn-wrap a.button::after,
.arj-add-btn-wrap a.add_to_cart_button::after {
  content: '';
  position: absolute;
  width: 3.5px;
  height: 20px;
  background: white;
  border-radius: 2px;
  text-indent: 0;
  transition: opacity .15s ease;
}
/* สถานะ Loading (WooCommerce เพิ่ม class นี้ตอนกำลังเพิ่มสินค้า) */
.arj-add-btn-wrap a.loading::before,
.arj-add-btn-wrap a.loading::after {
  opacity: 0.4;
}
/* สำคัญ: ไม่หมุน ::before/::after ตอน class "added" ติดมา
   เพราะ WooCommerce ไม่ลบ class "added" ออกเอง — ถ้าหมุนเป็น X จะค้างเป็น X ตลอดไป
   ปล่อยให้ปุ่มเป็นเครื่องหมาย + เหมือนเดิมเสมอ ส่วน feedback "เพิ่มสำเร็จ" ให้ทำผ่าน
   JS เป็นการ flash ไอคอน ✓ ชั่วคราวแทน (ดูตัวอย่างใน HTML ไฟล์) */