:root{
  --ecu-surface:#fff;
  --ecu-text:#0f172a;
  --ecu-muted:#64748b;
  --ecu-border:#e5e7eb;
  --ecu-primary:#2563eb;
  --ecu-radius:16px;
  --ecu-shadow: -24px 0 48px rgba(2,6,23,.20);
}

/* ===== Badge บนไอคอน/ปุ่ม ===== */
.edd-cart-count{
  display:inline-flex; min-width:1.1em; height:1.1em; padding:0 .35em;
  align-items:center; justify-content:center;
  font-size:.75rem; line-height:1; font-weight:700;
  background:#ef4444; color:#fff; border-radius:999px; margin-left:.35rem;
  transform: translateY(-1px);
}
.edd-cart-count.is-empty{ display:none; }
.edd-cart-count.pulse{ animation:eddPulse .28s ease; }
@keyframes eddPulse{ 50%{ transform:scale(1.12); } }

/* =======================================================================
   Drawer – เวอร์ชันเดียว (ชิดขอบบน/ขวา, สูงเต็มจอ, ไม่ชนกับชุดอื่น)
   ======================================================================= */
#edd-cart-drawer{
  position: fixed;
  inset: 0;                 /* top/right/bottom/left: 0 */
  z-index: 9999;
  pointer-events: none;
  visibility: hidden;       /* ซ่อนทั้งกล่อง */
}

/* Backdrop เต็มจอ */
#edd-cart-drawer .edd-drawer__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
  opacity: 0;
  transition: opacity .2s ease;
}

/* Panel ชิดขอบบน/ขวา สูงเต็ม viewport */
#edd-cart-drawer .edd-drawer__panel{
  position: absolute;
  top: 0;
  right: 0;
  width: min(420px, 92vw);
  height: 100vh;                    /* สูงเต็มจอ */
  background: var(--ecu-surface);
  color: var(--ecu-text);
  border-left: 1px solid var(--ecu-border);
  box-shadow: var(--ecu-shadow);
  transform: translateX(100%);      /* ดันออกนอกจอด้านขวา */
  transition: transform .25s ease;
  display: flex;
  flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* เปิด */
#edd-cart-drawer.open{
  pointer-events: auto;
  visibility: visible;
}
#edd-cart-drawer.open .edd-drawer__panel{ transform: translateX(0); }
#edd-cart-drawer.open .edd-drawer__backdrop{ opacity: 1; }

/* กันธีมอื่น override เผลอทำให้มองเห็น */
#edd-cart-drawer:not(.open) .edd-drawer__panel{ transform: translateX(100%) !important; }
#edd-cart-drawer:not(.open){ visibility: hidden !important; }

/* ===== Header/Close ชิดบน ===== */
.edd-drawer__header{
  position: sticky; top: 0; z-index: 1;
  display:flex; align-items:center; justify-content:space-between;
  padding: calc(12px + env(safe-area-inset-top,0px)) 16px 12px;
  background:#fff; border-bottom:1px solid var(--ecu-border);
}
.edd-drawer__header h3{ margin:0; font-size:16px; }
.edd-drawer__close{
  background:transparent; border:0; font-size:18px; cursor:pointer; line-height:1;
  color:#334155; padding:6px; border-radius:10px;
}
.edd-drawer__close:hover{ background:#f1f5f9; }

/* ===== เนื้อหาเลื่อนภายใน panel ===== */
.edd-drawer__body{
  padding:14px;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
}
.edd-drawer__placeholder{ padding:20px; text-align:center; color:var(--ecu-muted); }

/* ===== รายการสินค้า (รูป 16:9 เต็มกรอบ) ===== */
.ecu-edd-cart-list{ display:grid; gap:12px; }

.ecu-edd-item{
  display:grid;
  grid-template-columns: 112px 1fr auto; /* กล่องรูป + เนื้อหา + ปุ่มลบ */
  gap:12px; align-items:center;
  border:1px solid var(--ecu-border); border-radius:12px; padding:10px;
}

/* กล่องรูปอัตราส่วน 16:9 */
.ecu-edd-item__media{
  width:112px; aspect-ratio:16 / 9;
  border-radius:12px; overflow:hidden; background:#f3f4f6;
}
.ecu-edd-thumb{
  width:100%; height:100%; display:block;
  object-fit:cover; object-position:center;
  border-radius:inherit;
}

.ecu-edd-title{ color:var(--ecu-text); text-decoration:none; font-weight:700; }
.ecu-edd-title:hover{ text-decoration:underline; }
.ecu-edd-meta{ color:var(--ecu-muted); font-size:.85rem; margin-top:2px; }

.ecu-edd-item__act .ecu-edd-remove{
  border:1px solid var(--ecu-border); background:#fff; color:#111827; border-radius:10px;
  height:34px; padding:0 10px; cursor:pointer;
}
.ecu-edd-item__act .ecu-edd-remove:hover{ background:#f8fafc; }

/* ===== Footer ติดล่าง ===== */
.ecu-edd-footer{
  position: sticky; bottom: 0; z-index: 1;
  background: var(--ecu-surface);
  border-top:1px solid var(--ecu-border);
  padding:12px 14px; display:grid; gap:10px;
}
.ecu-edd-total{ display:flex; justify-content:space-between; align-items:center; font-weight:700; }
.ecu-edd-checkout{
  display:inline-flex; align-items:center; justify-content:center; height:42px; border-radius:12px;
  background:var(--ecu-primary); color:#fff; text-decoration:none; font-weight:700;
}

/* ===== Empty ===== */
.edd-empty{ text-align:center; padding:22px; border:1px dashed var(--ecu-border); border-radius:12px; }
.edd-empty__icon svg{ width:54px; height:54px; }
.edd-empty__icon{ margin:6px 0 10px; color:#64748b; }
.edd-empty__btn{
  display:inline-flex; align-items:center; justify-content:center; height:40px; padding:0 14px; border-radius:10px;
  background:#f3f4f6; color:#111827; border:1px solid var(--ecu-border); text-decoration:none; font-weight:600;
}
.edd-empty__btn:hover{ background:#eef2ff; border-color:#dbeafe; }
.edd-empty__text {
    padding: 16px;
}
/* ===== Mobile panel เต็มจอ ===== */
@media (max-width: 640px){
  #edd-cart-drawer .edd-drawer__panel{ width:100vw; }
}

/* ===== (ทางเลือก) ซ่อนปุ่ม toggle เดิมบน desktop ===== */
@media (min-width: 1024px){
  #edd-cart-toggle{ display:none !important; }
}
/* รีเซ็ต margin/padding ของเลย์เอาต์บล็อกที่ครอบอยู่ภายใน Drawer */
#edd-cart-drawer,
#edd-cart-drawer * { box-sizing: border-box; }

#edd-cart-drawer :where(.is-layout-flow),
#edd-cart-drawer :where(.wp-block-group){
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
  padding-block-start: 0 !important;
  padding-block-end: 0 !important;
  --wp--style--block-gap: 0 !important;
}

/* กันกรณีใช้ <dialog> หรือ role=dialog */
#edd-cart-drawer dialog,
#edd-cart-drawer [role="dialog"]{
  margin: 0 !important;   /* UA บางตัวให้ margin เริ่มต้นกับ <dialog> */
}
#edd-cart-drawer{ position: fixed; inset: 0; margin: 0 !important; }