/*
Theme Name: JustEvent – Emoza Child
Theme URI: https://justevent.example/
Description: Child theme ของ Emoza WooCommerce – ปรับโทนแบรนด์ Just Event (แดง-ดำ ฟอนต์ Prompt/Sarabun การ์ดมุมโค้ง ปุ่มแดง) ให้กับหน้าร้าน WooCommerce และทั้งเว็บ
Author: Just Event Group
Template: emoza-woocommerce
Version: 1.1.0
Text Domain: justevent-emoza-child
*/

/* ============================================================
   1) ตัวแปรสีและฟอนต์ของแบรนด์ (ดึงค่าจริงจากดีไซน์ SPA)
   ============================================================ */
:root{
  --je-red:#D91F26;       /* แดงหลัก */
  --je-red-dark:#A8161C;  /* แดงเข้ม (hover) */
  --je-pink:#FFF0F0;      /* ชมพูอ่อน (พื้นกล่องราคา/ปุ่มเล็ก) */
  --je-black:#1A1A1A;
  --je-gray:#888;
  --je-gray-dark:#444;
  --je-line:#F2F2F2;
  --je-off:#F8F8F8;
  --je-gold:#E8A020;      /* ป้ายส่วนลด */
  --je-radius:16px;
  --je-radius-sm:8px;
  --je-shadow:0 2px 12px rgba(0,0,0,.07);
  --je-shadow-hover:0 16px 40px rgba(0,0,0,.14);
  --je-font-head:'Prompt',sans-serif;
  --je-font-body:'Sarabun',sans-serif;
}

/* ============================================================
   2) ฟอนต์ทั้งเว็บ
   ============================================================ */
body,
.woocommerce,
.woocommerce-page,
button, input, select, textarea{
  font-family:var(--je-font-body);
  color:var(--je-black);
}
h1,h2,h3,h4,h5,h6,
.entry-title,
.product_title,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.site-title{
  font-family:var(--je-font-head);
  font-weight:700;
}

/* ============================================================
   3) ปุ่มทั่วเว็บ + ปุ่ม WooCommerce ให้เป็นแดงแบรนด์
   ============================================================ */
a.button, button.button, input.button, .button.alt,
.wp-block-button__link,
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .single_add_to_cart_button,
.woocommerce ul.products li.product .button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce-checkout #place_order{
  background-color:var(--je-red) !important;
  color:#fff !important;
  border:2px solid var(--je-red) !important;
  border-radius:var(--je-radius-sm) !important;
  font-family:var(--je-font-head) !important;
  font-weight:600 !important;
  letter-spacing:.2px;
  transition:all .2s ease;
  box-shadow:none;
  text-shadow:none;
}
a.button:hover, button.button:hover, input.button:hover, .button.alt:hover,
.wp-block-button__link:hover,
input[type="submit"]:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce .single_add_to_cart_button:hover,
.woocommerce ul.products li.product .button:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce-checkout #place_order:hover{
  background-color:var(--je-red-dark) !important;
  border-color:var(--je-red-dark) !important;
  color:#fff !important;
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(217,31,38,.35) !important;
}

/* ปุ่มรองแบบโครง (เช่น "ดูสินค้า" ในการ์ด) – พื้นชมพู ตัวอักษรแดง */
.woocommerce ul.products li.product .button.add_to_cart_button,
.woocommerce ul.products li.product .button.product_type_variable,
.woocommerce ul.products li.product .button.product_type_simple{
  background-color:var(--je-pink) !important;
  color:var(--je-red) !important;
  border-color:var(--je-pink) !important;
}
.woocommerce ul.products li.product .button.add_to_cart_button:hover,
.woocommerce ul.products li.product .button.product_type_variable:hover,
.woocommerce ul.products li.product .button.product_type_simple:hover{
  background-color:var(--je-red) !important;
  color:#fff !important;
  border-color:var(--je-red) !important;
}

/* ============================================================
   4) การ์ดสินค้าในหน้า Shop / Archive
   ============================================================ */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product{
  background:#fff;
  border-radius:var(--je-radius);
  box-shadow:var(--je-shadow);
  overflow:hidden;
  padding:0 0 1rem;
  transition:transform .25s ease, box-shadow .25s ease;
  border:none;
}
.woocommerce ul.products li.product:hover{
  transform:translateY(-6px);
  box-shadow:var(--je-shadow-hover);
}
.woocommerce ul.products li.product a img{
  border-radius:0;
  margin-bottom:.75rem;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--je-font-head);
  font-weight:700;
  font-size:15px;
  line-height:1.4;
  color:var(--je-black);
  padding:0 1rem;
}
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price{
  color:var(--je-red) !important;
  font-family:var(--je-font-head);
  font-weight:800;
  font-size:18px;
}
.woocommerce ul.products li.product .price{
  padding:0 1rem;
}
.woocommerce ul.products li.product .price del{
  color:var(--je-gray) !important;
  font-weight:400;
  opacity:.7;
}
.woocommerce ul.products li.product .button{
  margin:.4rem 1rem 0;
  border-radius:var(--je-radius-sm) !important;
  font-size:13px !important;
  padding:.5em 1em !important;
}

/* ป้าย SALE */
.woocommerce span.onsale{
  background:var(--je-gold) !important;
  color:#fff !important;
  border-radius:4px;
  font-family:var(--je-font-head);
  font-weight:700;
  min-height:auto;
  min-width:auto;
  padding:3px 10px;
  line-height:1.4;
}

/* ============================================================
   5) หน้าสินค้าเดี่ยว (Single Product)
   ============================================================ */
.woocommerce div.product .product_title{
  font-family:var(--je-font-head);
  font-weight:800;
  color:var(--je-black);
}
.woocommerce div.product p.price,
.woocommerce div.product .summary .price{
  font-family:var(--je-font-head);
  font-weight:900;
  font-size:2rem;
  color:var(--je-red) !important;
  background:var(--je-pink);
  border-left:4px solid var(--je-red);
  border-radius:14px;
  padding:1rem 1.25rem;
  display:inline-block;
}
.woocommerce div.product .woocommerce-product-gallery__image img,
.woocommerce div.product div.images img{
  border-radius:var(--je-radius);
}
/* ตัวเลือก (variations) ให้เหมือน pill */
.woocommerce div.product form.variations_form table.variations td.value select,
.woocommerce div.product form.cart .quantity .qty{
  border:1.5px solid #ccc;
  border-radius:var(--je-radius-sm);
  padding:8px 12px;
  font-family:var(--je-font-head);
}
/* แท็บรายละเอียด */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active{
  border-bottom-color:var(--je-red);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{
  color:var(--je-red);
}

/* ============================================================
   6) ลิงก์ / accent / breadcrumbs
   ============================================================ */
a{ color:var(--je-red); }
a:hover{ color:var(--je-red-dark); }
.woocommerce-breadcrumb a{ color:var(--je-gray-dark); }
.woocommerce-breadcrumb a:hover{ color:var(--je-red); }

/* แถบ message / info ของ Woo ใช้สีแบรนด์ */
.woocommerce-message,
.woocommerce-info{
  border-top-color:var(--je-red);
}
.woocommerce-message::before,
.woocommerce-info::before{
  color:var(--je-red);
}

/* ตัวกรองหมวด / widget ราคา */
.woocommerce .widget_price_filter .ui-slider .ui-slider-range,
.woocommerce .widget_price_filter .ui-slider .ui-slider-handle{
  background-color:var(--je-red);
}

/* ============================================================
   7) ปรับเล็กน้อยให้การ์ดดูโปร่ง (ระยะห่าง grid)
   ============================================================ */
.woocommerce ul.products,
.woocommerce-page ul.products{
  gap:1.5rem;
}
@media (max-width:480px){
  .woocommerce ul.products li.product .woocommerce-loop-product__title{ font-size:14px; }
  .woocommerce div.product .summary .price{ font-size:1.6rem; }
}

/* ============================================================
   8) HEADER ให้เหมือน SPA (ขาว สะอาด ฟอนต์ Prompt accent แดง)
   หมายเหตุ: Emoza จัด header ผ่าน Customizer เป็นหลัก —
   ตั้งโลโก้/เมนู/สีหลัก (แดง #D91F26) ที่ Customizer ด้วย
   ============================================================ */
.site-header, header#masthead, header.site-header, #site-header,
.site-header-inner, .header-main, .emoza-header{
  background:#fff !important;
  box-shadow:0 2px 20px rgba(0,0,0,.08);
}
.main-navigation a, .site-header a, .menu a, .primary-menu a, nav.main-navigation li a{
  font-family:var(--je-font-head);
  font-weight:500;
  color:var(--je-gray-dark);
}
.main-navigation .current-menu-item > a,
.menu .current-menu-item > a,
.main-navigation a:hover, .menu a:hover{
  color:var(--je-red);
}
/* โลโก้ตัวอักษร (ถ้าใช้ site-title แทนรูป) */
.site-title a, .site-title{ font-family:var(--je-font-head); font-weight:800; color:var(--je-red) !important; }

/* ============================================================
   9) การ์ดหมวดสินค้าในหน้า Home (.je-cat-card)
   ============================================================ */
.je-cat-card{
  background:#fff;
  border-radius:var(--je-radius);
  box-shadow:var(--je-shadow);
  padding:1.6rem 1.4rem;
  height:100%;
  transition:transform .25s ease, box-shadow .25s ease;
  border-top:4px solid var(--je-red);
}
.je-cat-card:hover{ transform:translateY(-6px); box-shadow:var(--je-shadow-hover); }
.je-cat-card h3{ font-family:var(--je-font-head); font-weight:700; color:var(--je-black); margin:0 0 .5rem; }
.je-cat-card p{ color:var(--je-gray-dark); font-size:14px; line-height:1.6; }
.je-cat-link a{ font-family:var(--je-font-head); font-weight:600; color:var(--je-red); text-decoration:none; }
.je-cat-link a:hover{ color:var(--je-red-dark); }

/* ============================================================
   10) FOOTER สไตล์ SPA (.je-footer)
   ============================================================ */
.je-footer{
  background:var(--je-black);
  color:#cfcfcf;
  font-family:var(--je-font-body);
  margin-top:3rem;
}
.je-footer-inner{
  max-width:1200px; margin:0 auto;
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:2.5rem;
  padding:3rem 1.5rem 2rem;
}
.je-footer .je-logo{ display:flex; align-items:center; gap:10px; margin-bottom:1rem; }
.je-footer .je-logo-badge{
  width:42px; height:42px; background:var(--je-red); border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--je-font-head); font-weight:900; color:#fff; font-size:16px;
}
.je-footer .je-logo-text{ font-family:var(--je-font-head); font-weight:800; color:#fff; font-size:16px; }
.je-footer .je-fbrand p{ font-size:14px; line-height:1.7; color:#aaa; max-width:320px; }
.je-footer h4{ font-family:var(--je-font-head); font-weight:700; color:#fff; font-size:15px; margin:0 0 1rem; }
.je-footer ul{ list-style:none; margin:0; padding:0; }
.je-footer li{ margin-bottom:.6rem; font-size:14px; color:#aaa; }
.je-footer a{ color:#aaa; text-decoration:none; transition:color .2s; }
.je-footer a:hover{ color:var(--je-red); }
.je-footer-bottom{
  border-top:1px solid rgba(255,255,255,.1);
  text-align:center; padding:1.2rem; font-size:13px; color:#888;
  max-width:1200px; margin:0 auto;
}
@media (max-width:782px){
  .je-footer-inner{ grid-template-columns:1fr 1fr; gap:1.8rem; }
}
@media (max-width:480px){
  .je-footer-inner{ grid-template-columns:1fr; }
}

/* ============================================================
   11) ปุ่มพิเศษบนพื้นเข้ม/พื้นแดง (กันไม่ให้ถูกกฎปุ่มแดงทับ)
   ============================================================ */
.je-btn-white .wp-block-button__link{
  background:#fff !important; color:var(--je-red) !important; border:2px solid #fff !important;
}
.je-btn-white .wp-block-button__link:hover{
  background:#f2f2f2 !important; color:var(--je-red-dark) !important; border-color:#f2f2f2 !important;
}
.je-btn-ghost .wp-block-button__link{
  background:transparent !important; color:#fff !important; border:2px solid rgba(255,255,255,.5) !important;
}
.je-btn-ghost .wp-block-button__link:hover{
  background:rgba(255,255,255,.12) !important; border-color:#fff !important; color:#fff !important;
}

/* ============================================================
   12) ซ่อนแถบเครดิตเริ่มต้นของ Emoza (กัน footer ซ้ำกับ footer SPA)
   ถ้ายังเห็น "Proudly powered by Emoza" ให้ไปเคลียร์ที่
   Customize → Footer (Copyright Area) เพิ่มเติม
   ============================================================ */
.site-info,
.footer-credits,
.copyright-bar,
.site-footer .copyright,
footer .powered-by,
.emoza-footer-copyright{
  display:none !important;
}

/* ============================================================
   13) หน้า Shop / หมวด: hero ดำ + filter pills + ป้ายหมวด
   ============================================================ */
.je-shop-hero{
  width:100vw; margin-left:calc(50% - 50vw);
  background:linear-gradient(135deg,#1a0000 0%,#2d0000 45%,#1a1a1a 100%);
  color:#fff; text-align:center; padding:4rem 1.5rem;
}
.je-shop-hero-inner{ max-width:1200px; margin:0 auto; }
.je-shop-hero h1{
  font-family:var(--je-font-head); font-weight:900; color:#fff;
  font-size:2.6rem; line-height:1.15; margin:0 0 .6rem;
}
.je-shop-hero p{ color:#cfcfcf; font-size:1.05rem; margin:0; }

.je-pills{
  width:100vw; margin-left:calc(50% - 50vw);
  background:#fff; border-bottom:1px solid var(--je-line); padding:1rem 1.5rem;
}
.je-pills-inner{
  max-width:1200px; margin:0 auto;
  display:flex; flex-wrap:wrap; gap:.6rem;
}
.je-pill{
  border:1px solid #ccc; border-radius:20px; padding:6px 18px;
  font-family:var(--je-font-head); font-weight:500; font-size:14px;
  color:var(--je-gray-dark); text-decoration:none; white-space:nowrap;
  transition:all .2s; cursor:pointer;
}
.je-pill:hover{ border-color:var(--je-red); color:var(--je-red); }
.je-pill-active, .je-pill-active:hover{
  background:var(--je-red); color:#fff; border-color:var(--je-red);
}

/* ป้ายหมวดบนการ์ด */
.woocommerce ul.products li.product{ position:relative; }
.je-cat-badge{
  position:absolute; top:10px; left:10px; z-index:3;
  background:var(--je-red); color:#fff;
  font-family:var(--je-font-head); font-weight:600; font-size:11px;
  padding:3px 10px; border-radius:4px; line-height:1.5;
}
@media (max-width:480px){
  .je-shop-hero{ padding:2.8rem 1rem; }
  .je-shop-hero h1{ font-size:1.9rem; }
}

/* ============================================================
   14) แถบ marquee สีแดง (เลื่อนอัตโนมัติ ด้วย CSS ล้วน)
   ============================================================ */
.je-marquee{
  background:var(--je-red);
  overflow:hidden;
  padding:14px 0;
  width:100vw; margin-left:calc(50% - 50vw);
}
.je-marquee-track{
  display:flex; width:max-content;
  animation:je-mq 30s linear infinite;
}
.je-marquee-track:hover{ animation-play-state:paused; }
.je-mq-group{
  display:flex; align-items:center; gap:3rem; padding-right:3rem;
}
.je-mqitem{
  display:flex; align-items:center;
  color:#fff; font-family:var(--je-font-head); font-weight:500; font-size:14px;
  white-space:nowrap;
}
.je-mqdot{
  width:6px; height:6px; background:rgba(255,255,255,.55); border-radius:50%;
}
@keyframes je-mq{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}