/* ===== WC Engraving Popup Styles ===== */

/* --- Trigger Button --- */
.engraving-btn-wrapper {
  margin-top: 8px;
  margin-bottom: 12px;
}

.engraving-trigger-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  background: #fff !important;
  color: #1a1a1a !important;
  border: 1.5px solid #1a1a1a !important;
  padding: 10px 20px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  border-radius: 6px !important;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.engraving-trigger-btn:hover {
  background: #1a1a1a !important;
  color: #fff !important;
}

/* --- Overlay --- */
.engraving-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 99999;
  align-items: center;
  justify-content: center;
  padding: 16px;
  backdrop-filter: blur(3px);
}

.engraving-overlay.is-open {
  display: flex !important;
  animation: fadeIn 0.2s ease;
}

body:has(.engraving-overlay.is-open), html:has(.engraving-overlay.is-open){
  overflow: hidden !important;
}

@keyframes fadeIn { from { opacity:0 } to { opacity:1 } }

/* --- Popup Box --- */
.engraving-popup {
  background: #fff;
  width: 100%;
  max-width: 900px;
  min-height: 90vh;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  animation: slideUp 0.25s ease;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE, Edge cũ */
}

@keyframes slideUp { from { transform: translateY(20px); opacity:0 } to { transform: translateY(0); opacity:1 } }

/* --- Header: full-width, nằm ngoài 2 cột --- */
.engraving-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 12px 40px 40px;
  flex-shrink: 0;
}

.engraving-header-left {
  display: flex;
  align-items: center;
  gap: 10px;

}

.engraving-header-left h3{
  margin:0;
  font-size: 24px;
  font-weight: 600;
  color: #1E2856;
}

.engraving-close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: #888;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}

.engraving-close:hover { background: #f5f5f5; color: #1a1a1a; }

/* --- Body --- */
.engraving-body {
  overflow-x: hidden;
}

/* --- Tabs: full-width, nằm ngoài 2 cột --- */
.engraving-tabs {
  display: flex;
  border-bottom: 1px solid #1E28560D;
  overflow-x: auto;
  scrollbar-width: none;
  flex-shrink: 0;
  padding:0 40px;
  gap: 48px;
}

/* --- 2-Column Layout (bên dưới header + tabs) --- */
.engraving-layout {
  display: flex;
  flex: 1;
  padding:40px;
  gap: 40px;
}

/* Cột trái: ảnh mẫu swatch preview */
.engraving-col-left {
  width: calc(50% - 20px);
  flex-shrink: 0;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  height: max-content;
}

.engraving-preview-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  gap: 8px;
}

.eng-swatch-preview-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: #ccc;
  font-size: 13px;
  text-align: center;
}

/* Cột phải: body + footer */
.engraving-col-right {
  width: calc(50% - 20px);
  display: flex;
  flex-direction: column;
  min-height: 0;
  gap: 24px;
}



.engraving-tabs::-webkit-scrollbar { display: none; }

.eng-tab {
  padding-bottom: 8px;
  border: none;
  background: none;
  font-size: 18px;
  font-weight: 600;
  color: #1E2856;
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 1px solid transparent;
  transition: color 0.15s, border-color 0.15s;
  flex-shrink: 0;
  padding: 0;
}

.eng-tab:hover { border-bottom-color: #DBAB49; }
.eng-tab.active {border-bottom-color: #DBAB49; }

/* --- Panels --- */
.eng-panel { display: none; }
.eng-panel.active { display: flex; flex-direction: column; gap: 16px; }

/* --- Preview --- */
.eng-preview-wrap {
  display: flex;
  justify-content: center;
}

.eng-preview {
  background: linear-gradient(135deg, #f8f8f8, #efefef);
  border: 1px dashed #ddd;
  border-radius: 10px;
  padding: 20px 28px;
  min-height: 80px;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-family: serif;
}

.prev-line1 {
  font-size: 18px;
  font-weight: 700;
  color: #555;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.prev-line1.prev-serif {
  font-family: Georgia, serif;
  font-style: italic;
}

.prev-line2 {
  font-size: 13px;
  color: #888;
}

.prev-icon {
  font-size: 22px;
  margin-bottom: 4px;
}

.prev-sport-icon {
  font-size: 28px;
}

.prev-logo img { max-height: 40px; opacity: 0.5; }

/* --- Fields --- */
.eng-fields {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.eng-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.eng-field label {
  font-size: 14px;
  font-weight: 600;
  color: #1E2856;
  margin:0
}

.eng-hint {
  font-weight: 400;
  color: #aaa;
  font-size: 12px;
  margin-left: 4px;
}

.eng-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.eng-input {
  width: 100%;
  padding: 10px 0 10px 0 !important;
  border: none !important;
  border-bottom: 1px solid #1E285626 !important;
  border-radius: 0px !important;
  font-size: 14px !important;
  transition: border-color 0.15s !important;
  box-sizing: border-box;
  outline: none !important;
}

.eng-counter {
  position: absolute;
  font-size: 14px;
  font-weight: 300;
  color: #1E2856;
  pointer-events: none;
  right: 0;
}

/* --- Upload Area --- */
.eng-upload-area {
  border: 1px dashed #1E285626;
  padding: 11px 8px;
  cursor: pointer;
  position: relative;
  transition: border-color 0.15s, background 0.15s;
  text-align: center;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: start;
}

.eng-upload-area:hover {
  border-color: #c9a84c;
  background: rgba(201,168,76,0.04);
}

.eng-file-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.eng-upload-placeholder {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  color: #aaa;
  font-size: 13px;
  pointer-events: none;
}

.eng-upload-placeholder span{
  font-size: 15px;
  color: #1E2856;
}

.eng-logo-thumb {
  max-height: 60px;
  max-width: 100%;
  border-radius: 4px;
  object-fit: contain;
}

/* --- Wedding Templates --- */
.eng-wedding-templates {
  margin-bottom: 8px;
}

.eng-template-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
}

.eng-template-item {
  aspect-ratio: 1;
  border: 1.5px solid #e0e0e0;
  border-radius: 6px;
  background: #fafafa;
  font-size: 11px;
  color: #666;
  cursor: pointer;
  font-weight: 500;
  transition: border-color 0.15s, background 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.eng-template-item:hover { border-color: #c9a84c; }
.eng-template-item.active { border-color: #c9a84c; background: rgba(201,168,76,0.1); color: #b8962a; }

/* --- Icon Group (Birthday) --- */
.eng-icon-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.eng-icon-btn {
  width: 44px;
  height: 44px;
  border: 2px solid #e0e0e0;
  border-radius: 10px;
  background: #fafafa;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s, background 0.15s;
}

.eng-icon-btn:hover { border-color: #c9a84c; }
.eng-icon-btn.active { border-color: #c9a84c; background: rgba(201,168,76,0.1); }

/* --- Sport Group --- */
.eng-sport-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.eng-sport-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  border: 1.5px solid #e0e0e0;
  border-radius: 10px;
  background: #fafafa;
  font-size: 11px;
  color: #555;
  cursor: pointer;
  font-weight: 500;
  transition: border-color 0.15s, background 0.15s;
}

.eng-sport-btn .sport-icon { font-size: 18px; }
.eng-sport-btn:hover { border-color: #c9a84c; }
.eng-sport-btn.active { border-color: #c9a84c; background: rgba(201,168,76,0.1); color: #b8962a; }

/* --- Footer --- */
.engraving-footer {
  border-top: 1px solid #f0f0f0;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.eng-price-summary {
  background: #FBF9F6;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.eng-price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: #1E2856;
}

.eng-highlight {
  color: #c9a84c;
  font-weight: 500;
}

.eng-total {
  font-weight: 600;
  font-size: 16px;
  color: #1E2856;
  border-top: 1px solid #1E285626;
  padding-top: 12px;
}

.eng-note {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #aaa;
  font-style: italic;
}

.eng-qty-row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 500;
}

.eng-qty-row .eng-add-btn {
  flex: 1;
  width: auto !important;
  padding: 15px !important;
  height: auto !important;
  line-height: normal !important;
  border-radius: 0 !important;
  background: #1E2856 !important;
}

.eng-qty-row .eng-add-btn:hover{
  background: #29335E !important;
}

.eng-qty-row .eng-add-btn span{
  position: relative;
  display: inline-flex;
  padding-left: 28px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: 12px;
}

.icon1, .icon2{
  position: absolute;
  display: flex;
  left: 0;
  transition:0.3s ease-in-out;

}
.icon1{
  top: -1px;
}
.icon2{
  top: 50px;
}

.eng-qty-row .eng-add-btn:hover .icon1{
  top: -50px;
  transition:0.3s ease-in-out;
}
.eng-qty-row .eng-add-btn:hover .icon2{
  top: -1px;
  transition:0.3s ease-in-out;
}

.eng-qty-control {
  display: flex;
  align-items: center;
  border: 1px solid #1E285626;
  overflow: hidden;
}

.eng-qty-btn {
  width: 45px;
  height: 45px;
  border: none;
  background: transparent;
  font-size: 18px;
  cursor: pointer;
  color: #1E2856;
  transition: background 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.eng-qty-input {
  width: 45px;
  height: 45px;
  border: none;
  text-align: center;
  font-size: 15px;
  font-weight: 300;
  border: 0 !important;
  color: #1E2856;
  -moz-appearance: textfield;
}

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

.eng-add-btn {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px !important;
  background: #e8a020 !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  border: none !important;
  border-radius: 10px !important;
  cursor: pointer;
  transition: background 0.2s;
}

.eng-add-btn:hover { background: #d4901a !important; }

.eng-add-btn:disabled {
  background: #ddd !important;
  cursor: not-allowed;
}

.eng-cart-message {
  text-align: center;
  padding: 10px;
  border-radius: 8px;
  font-size: 14px;
}

.eng-cart-message.success {
  background: #f0fff4;
  color: #2d7a4a;
  border: 1px solid #b7e4c7;
}

.eng-cart-message.error {
  background: #fff5f5;
  color: #c53030;
  border: 1px solid #fed7d7;
}

/* --- Scrollbar within body --- */
.engraving-body::-webkit-scrollbar { width: 4px; }
.engraving-body::-webkit-scrollbar-track { background: transparent; }
.engraving-body::-webkit-scrollbar-thumb { background: #ddd; border-radius: 4px; }

/* --- Responsive --- */
@media (max-width: 600px) {
  /* Header + Tabs vẫn full-width, chỉ stack 2 cột thành dọc */
  .engraving-popup {
    max-height: 95vh;
    max-width: 100%;
  }
  .engraving-overlay { align-items: flex-end; padding: 0; }
  .engraving-layout { flex-direction: column; }
  .engraving-col-left {
    width: 100%;
    border-right: none;
  }
  .engraving-col-right { width: 100%; }
  .eng-template-grid { grid-template-columns: repeat(6, 1fr); }
}

/* ── Image Swatch ─────────────────────────────────────── */
.eng-image-swatch-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 8px;
}

/* --- Swatch Slider (khi > 10 swatch, dùng Swiper) ──────── */
.eng-image-swatch-group.is-slider {
  gap: 12px 8px;
  position: relative;
  flex-wrap: nowrap;
  overflow: hidden;
  padding-bottom: 36px;
}

.eng-image-swatch-group.is-slider .swiper {
  width: 100%;
  overflow: hidden;
}

.eng-image-swatch-group.is-slider .swiper-wrapper {
  align-items: stretch;
}

.eng-image-swatch-group.is-slider .swiper-slide {
  display: flex;
  flex-wrap: wrap;
  gap:12px 8px;
  height: auto;
}

.eng-swatch-nav {
  position: absolute;
  bottom: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: border-color .15s, background .15s, opacity .2s;
  background: transparent;
  border: none;
  padding:0;
  transform: translateY(-30%);
}

.eng-swatch-nav svg {
  width: 24px;
  height: 24px;
  display: block;
}

.eng-swatch-nav:hover {
  border-color: #c9a84c;
  background: #FBF9F6;
}

.eng-swatch-nav.swiper-button-disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}

.eng-swatch-nav-prev { left: 0; }
.eng-swatch-nav-next { right: 0; }

.eng-swatch-pagination {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  z-index: 2;
}

.eng-swatch-pagination .swiper-pagination-bullet {
  width: 16px;
  height: 16px;
  padding: 5px;
  opacity: 1;
  cursor: pointer;
  transition: background .15s, transform .15s;
  margin: 0 !important;
  background: transparent;
  position: relative;
}

.eng-swatch-pagination .swiper-pagination-bullet::after{
  position: absolute;
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #1E2856;
  opacity: 0.5;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.eng-swatch-pagination .swiper-pagination-bullet-active {
  border:1px solid #1E2856;
}

.eng-swatch-pagination .swiper-pagination-bullet-active::after{
  opacity: 1;
}

.eng-swatch-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: none;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
  width: 71px;
  text-align: center;
  border:none;
  padding: 0;
}

.eng-swatch-btn img {
  display: block;
}

.eng-swatch-btn .eng-swatch-wrap-img{
  width: 100%;
  height: 71px;
  display: flex;
  align-items: center;
  justify-content: center;
  border:1px solid #1E2856;
}

.eng-swatch-label {
  font-size: 12px;
  color: #1E2856;
  word-break: break-word;
  max-width: 71px;
  font-weight: 400;
}

.eng-swatch-btn:hover .eng-swatch-wrap-img, .eng-swatch-btn.active .eng-swatch-wrap-img{
  background: #1E2856;
}

.eng-swatch-btn:hover .eng-swatch-wrap-img img, .eng-swatch-btn.active .eng-swatch-wrap-img img{
  filter: brightness(0) invert(1);
}

/* ── Ảnh mẫu sau khi khắc (theo swatch đang chọn) ────── */
/* Box gốc trong panel được ẩn đi — nội dung được mirror sang cột trái */
.eng-swatch-preview-box {
  display: none !important;
}

/* Preview hiển thị trong cột trái */
.engraving-preview-column .eng-swatch-preview-img {
  object-fit: contain;
  display: block;
  width:100%
}

.engraving-preview-column .preview-image-box{
  width: 100%;
}

.engraving-preview-column .eng-swatch-preview-placeholder {
  font-size: 13px;
  color: #aaa;
  text-align: center;
  padding: 16px 0;
}

.engraving-preview-column span{
  font-size: 13px;
  display: block;
  color: #1E2856;
  text-align: center;
  font-weight: 400;
}

/* Nút mở popup bị disabled khi chưa chọn biến thể */
#open-engraving-popup:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: auto; /* giữ để title tooltip hiện được */
}
/* ================================================================
   CART & MINI-CART: Engraving meta display
   ================================================================ */

/*
 * WooCommerce renders woocommerce_get_item_data as a <dl> with <dt>/<dd> pairs.
 * We target .wce-cart-* classes injected via the 'display' key.
 */

/* ── Row 1: "Khắc Laser" label ────────────────────────────────── */
.woocommerce-cart-form .cart_item .woocommerce-cart-item__meta dl dt:has(+ dd .wce-cart-field),
.cart_item .wc-item-meta dt,
dl.variation dt {
    /* WC default – keep as-is, styling comes from theme */
}

/* Make the entire DL a clean stacked layout */
.wc-item-meta,
.woocommerce-cart-item__meta dl {
    margin-top: 6px;
}

/* ── Shared field chip ─────────────────────────────────────────── */
.wce-cart-field {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    color: #1E2856;
    font-weight: 400;
    white-space: nowrap;
}

/* ── Swatch field: label + info icon ──────────────────────────── */
.wce-cart-swatch {
    gap: 4px;
}

.wce-cart-swatch-label {
    font-size: 12px;
    color: #1E2856;
    font-weight: 400;
}

/* ── Info icon wrapper ─────────────────────────────────────────── */
.wce-cart-swatch-info {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    line-height: 1;
    width: 16px;
    height: 16px;
    background-repeat:no-repeat;
    background-position:center;
    background-size:contain;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M7.33301 11.334H8.66634V7.33398H7.33301V11.334ZM8.47501 5.80932C8.60256 5.68132 8.66634 5.52287 8.66634 5.33398C8.66634 5.1451 8.60234 4.98687 8.47434 4.85932C8.34634 4.73176 8.18812 4.66776 7.99967 4.66732C7.81123 4.66687 7.65301 4.73087 7.52501 4.85932C7.39701 4.98776 7.33301 5.14598 7.33301 5.33398C7.33301 5.52198 7.39701 5.68043 7.52501 5.80932C7.65301 5.93821 7.81123 6.00198 7.99967 6.00065C8.18812 5.99932 8.34656 5.93532 8.47501 5.80865M7.99967 14.6673C7.07745 14.6673 6.21079 14.4922 5.39968 14.142C4.58856 13.7918 3.88301 13.3169 3.28301 12.7173C2.68301 12.1178 2.20812 11.4122 1.85834 10.6007C1.50856 9.7891 1.33345 8.92243 1.33301 8.00065C1.33256 7.07887 1.50768 6.21221 1.85834 5.40065C2.20901 4.5891 2.6839 3.88354 3.28301 3.28398C3.88212 2.68443 4.58768 2.20954 5.39968 1.85932C6.21168 1.5091 7.07834 1.33398 7.99967 1.33398C8.92101 1.33398 9.78767 1.5091 10.5997 1.85932C11.4117 2.20954 12.1172 2.68443 12.7163 3.28398C13.3155 3.88354 13.7906 4.5891 14.1417 5.40065C14.4928 6.21221 14.6677 7.07887 14.6663 8.00065C14.665 8.92243 14.4899 9.7891 14.141 10.6007C13.7921 11.4122 13.3172 12.1178 12.7163 12.7173C12.1155 13.3169 11.4099 13.792 10.5997 14.1427C9.78945 14.4933 8.92279 14.6682 7.99967 14.6673Z' fill='%231E2856' fill-opacity='0.5'/%3E%3C/svg%3E");
}

.wce-cart-swatch-info svg {
    display: block;
    flex-shrink: 0;
    transition: opacity 0.15s;
}

.wce-cart-swatch-info:hover svg,
.wce-cart-swatch-info:focus svg {
    opacity: 0.75;
}

/* ── Tooltip bubble ────────────────────────────────────────────── */
.wce-swatch-tooltip {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    background: #fff;
    border: 1px solid rgba(30,40,86,0.12);
    box-shadow: 0 4px 16px rgba(0,0,0,0.14);
    padding: 6px;
    pointer-events: none;
    white-space: nowrap;
    min-width: max-content;
    text-align: center;
}

/* Arrow */
.wce-swatch-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #fff;
    filter: drop-shadow(0 1px 0 rgba(30,40,86,0.1));
}

.wce-swatch-tooltip img {
    display: block;
    width: auto;
    height: auto;
    max-width: 120px;
    max-height: 120px;
    object-fit: contain;
}

/* Show on hover / focus */
.wce-cart-swatch-info:hover .wce-swatch-tooltip,
.wce-cart-swatch-info:focus .wce-swatch-tooltip,
.wce-cart-swatch-info:focus-within .wce-swatch-tooltip {
    display: block;
}

/* ── Key/value typography tweaks ──────────────────────────────── */
.wc-item-meta dt,
.woocommerce-cart-item__meta dl dt {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #1E2856 !important;
    margin-bottom: 1px !important;
}

.wc-item-meta dd,
.woocommerce-cart-item__meta dl dd {
    font-size: 12px !important;
    color: #1E2856 !important;
    margin: 0 0 4px !important;
}

/* Strong price highlight inside dd */
.wc-item-meta dd strong,
.woocommerce-cart-item__meta dl dd strong {
    font-weight: 600;
    color: #1E2856;
}

/* ── Mini-cart ─────────────────────────────────────────────────── */
.widget_shopping_cart .wc-item-meta dt,
.woocommerce-mini-cart-item .wc-item-meta dt {
    font-size: 11px !important;
}

.widget_shopping_cart .wc-item-meta dd,
.woocommerce-mini-cart-item .wc-item-meta dd {
    font-size: 11px !important;
}

/* Tooltip flips downward in mini-cart to avoid clipping at the top */
.widget_shopping_cart .wce-swatch-tooltip,
.woocommerce-mini-cart-item .wce-swatch-tooltip {
    bottom: auto;
    top: calc(100% + 8px);
}

.widget_shopping_cart .wce-swatch-tooltip::after,
.woocommerce-mini-cart-item .wce-swatch-tooltip::after {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: #fff;
    filter: drop-shadow(0 -1px 0 rgba(30,40,86,0.1));
}

/* ================================================================
   Engraving info box (single <dd>, no dt/dd splitting needed)
   ================================================================
 * The PHP side now emits ONE woocommerce_get_item_data entry whose
 * 'display' value is a single <div class="wce-cart-box"> containing
 * both the "Khắc Laser" row and the "Kiểu dáng" row. WooCommerce still
 * wraps this in its own auto-generated <dt>Thông tin khắc:</dt>, which
 * we simply hide — everything visible lives inside the box below.
 */

/* Hide the auto-generated <dt> for this merged entry */
.wc-item-meta dt:has(+ dd .wce-cart-box),
.woocommerce-cart-item__meta dl dt:has(+ dd .wce-cart-box),
dl.variation dt:has(+ dd .wce-cart-box) {
    display: none !important;
}

/* The <dd> itself shouldn't add its own margin/padding — the box inside
   provides all the spacing */
.wc-item-meta dd:has(.wce-cart-box),
.woocommerce-cart-item__meta dl dd:has(.wce-cart-box),
dl.variation dd:has(.wce-cart-box) {
    margin: 0 !important;
    padding: 0 !important;
}

.wce-cart-box {
    background: #1E28560D;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wce-cart-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

.wce-cart-label {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #1E2856 !important;
    white-space: nowrap;
}

.wce-cart-value-header{
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #1E2856 !important;
}

.wce-cart-value {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #1E2856BF !important;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;

}

.wce-cart-value strong {
    font-weight: 600;
}

.wce-cart-fields {
    gap: 8px;
}

@media(max-width:767px){
  .engraving-header{
    padding:20px;
  }
  .engraving-header-left h3{
    font-size: 22px;
  }
  .engraving-layout{
    padding: 20px;
  }
  .engraving-tabs{
    padding:0 20px
  }
  .eng-tab{
    font-size: 16px;
  }
  .engraving-preview-column .preview-image-box{
    overflow: hidden;
  }
  .eng-qty-row .eng-add-btn span{
    padding-left: 0;
  }
}