/* Thank You: customer note box */
.ng-ty .order-note{
  margin-top:14px;
  padding:12px 14px;
  background:#f7f7f7;
  border:1px solid #eee;
  border-left:4px solid #111;
  border-radius:8px;
}
.ng-ty .order-note h4{
  margin:0 0 6px;
  font-size:16px;
  line-height:1.3;
}
.ng-ty .order-note p{
  margin:0;
  line-height:1.6;
}

/* Thank You - Address section tweaks */
.ng-ty .grid.two { align-items: start; gap: 24px; }
.ng-ty .grid.two h4 { margin: 0 0 8px; font-size: 18px; font-weight: 600; }

.ng-ty address{
  font-style: normal;      /* 取消默认斜体 */
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;        /* 更紧凑但易读 */
  color: #333;
  margin: 0;               /* 去掉多余外边距 */
}
.ng-ty address p{          /* Woo 可能把地址包在 <p> 里 */
  margin: 0;
}
.ng-ty .grid.two > div > p{ /* “Phone: …” 这行 */
  margin: 6px 0 0;
  color: #09090B;
  font-size: 15px;
}

.ng-ty .addr-phone{ 
  margin-top: 6px; 
  color:#09090B; 
  font-size:15px; 
}

/* Thank You — phone/email lines with icons */
.ng-ty .addr-line{
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 0;
  font-size: 15px;
  color: #333;
}
.ng-ty .addr-line .icon{
  width: 18px;
  height: 18px;
  line-height: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: .75;
}
.ng-ty .addr-line .icon svg{
  width: 18px;
  height: 18px;
}
.ng-ty .addr-line a{
  color: inherit;
  text-decoration: none;
}
.ng-ty .addr-line a:hover{
  text-decoration: underline;
}

/* Thank You page：让 Elementor 控宽 */
.woocommerce-order-received .ng-ty{
  max-width: none !important;
  margin: 0;
  padding: 0; /* 如果想要上下留白，改成 padding:24px 0; */
}

/* Hide any default Woo thankyou blocks if they slip through */
.woocommerce-order .woocommerce-order-details,
.woocommerce-order .woocommerce-customer-details,
.woocommerce-order > p{
  display: none !important;
}

/* === Order Confirmation — Overview (brand style) === */
:root{
  --ty-text:#09090b;
  --ty-muted:#6b6b6b;
  --ty-border:#e9e9ec;
  --ty-accent:#ffdb01;
  --ty-chip-bg:#fff7cc;     /* yellow 15% */
}
.ng-ty .ty-summary{
  border-radius: 16px;
  padding: 20px 20px 16px;
  border: 1px solid var(--ty-border);
  background: #fff;
  box-shadow: 0 6px 18px rgba(9,9,11,0.06);
}

/* header */
.ng-ty .ty-summary__head{
  display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px;
}
.ng-ty .ty-summary__title{
  font-size: 28px; font-weight: 700; line-height:1.2; color: var(--ty-text); margin:0;
}
.ng-ty .ty-summary__meta{
  display:flex; flex-wrap:wrap; gap:8px;
}
.ng-ty .meta-chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:999px; font-size:14px; line-height:1;
  border:1px solid var(--ty-border); color: var(--ty-text); background:#fff;
}
.ng-ty .meta-chip.chip-total{ font-weight:700; }
.ng-ty .meta-chip.chip-status{ border-color: var(--ty-accent); background: var(--ty-chip-bg); }

/* status colors by slug */
.ng-ty .status-pill{ display:inline-block; padding:4px 10px; border-radius:999px; font-size:14px; line-height:1; font-weight:600; }
.ng-ty .status-pill.st-processing,
.ng-ty .meta-chip.st-processing{ background: var(--ty-chip-bg); color: var(--ty-text); border:1px solid var(--ty-accent); }
.ng-ty .status-pill.st-pending,
.ng-ty .meta-chip.st-pending{ background: var(--ty-chip-bg); color: var(--ty-text); border:1px solid var(--ty-accent); }
.ng-ty .status-pill.st-completed,
.ng-ty .meta-chip.st-completed{ background:#e7f7e7; color:#0b4d1e; border:1px solid #3fb950; }
.ng-ty .status-pill.st-on-hold{ background:#eef2ff; color:#1e3a8a; border:1px solid #818cf8; }
.ng-ty .status-pill.st-failed{ background:#fee2e2; color:#991b1b; border:1px solid #ef4444; }

/* details list */
.ng-ty .ty-summary__list{
  display:grid; grid-template-columns: 220px 1fr; column-gap:16px; row-gap:10px;
}
.ng-ty .ty-summary__list .row{ display:contents; } /* allows dt/dd to form rows in grid */
.ng-ty .ty-summary__list dt{
  color: var(--ty-muted); font-weight:600; margin:0;
}
.ng-ty .ty-summary__list dd{
  margin:0; color: var(--ty-text);
}
@media (max-width: 768px){
  .ng-ty .ty-summary__head{ align-items:flex-start; }
  .ng-ty .ty-summary__title{ font-size:24px; }
  .ng-ty .ty-summary__list{ grid-template-columns: 1fr; row-gap:6px; }
  .ng-ty .ty-summary__list dt{ margin-top:8px; }
  .ng-ty .ty-summary__list dd{ margin-bottom:6px; }
}

/* optional: thin yellow accent bar under title */
.ng-ty .ty-summary__title::after{
  content:''; display:block; width:56px; height:6px; border-radius:6px; background: var(--ty-accent);
  margin-top:8px;
}

/* ===== Thank You — Order details (beautified) ===== */
:root{
  --ty-text:#09090b;
  --ty-muted:#6b6b6b;
  --ty-border:#e9e9ec;
  --ty-accent:#ffdb01;
  --ty-accent-soft:#fff7cc;
}

.ng-ty .ty-items{ border:1px solid var(--ty-border); border-radius:16px; background:#fff; padding:20px; box-shadow:0 6px 18px rgba(9,9,11,0.06); }
.ng-ty .ty-items__title{ font-size:28px; font-weight:700; margin:0 0 12px; color:var(--ty-text); }
.ng-ty .ty-items__title::after{ content:''; display:block; width:56px; height:6px; border-radius:6px; background:var(--ty-accent); margin-top:8px; }

/* table container */
.ng-ty .ty-tablewrap{ border:1px solid var(--ty-border); border-radius:12px; overflow:hidden; }
.ng-ty .ty-items__table{ width:100%; border-collapse:separate; border-spacing:0; table-layout:auto; }
.ng-ty .ty-items__table thead th{
  background:#f7f7f9; color:var(--ty-text); font-weight:600; padding:12px 14px; text-align:left; border-bottom:1px solid var(--ty-border);
}
.ng-ty .ty-items__table td{ padding:12px 14px; border-bottom:1px solid var(--ty-border); vertical-align:top; color:var(--ty-text); }
.ng-ty .ty-items__table tr:nth-child(even) td{ background:#fbfbfd; }
.ng-ty .ty-items__table tbody tr:hover td{ background:#fffbea; }

/* columns */
.ng-ty .ty-items__table th.qty, .ng-ty .ty-items__table td.qty{ width:90px; text-align:center; }
.ng-ty .ty-items__table th.line-total, .ng-ty .ty-items__table td.line-total{ width:160px; text-align:right; white-space:nowrap; font-variant-numeric: tabular-nums; }

/* product cell: thumb + text */
.ng-ty .ty-items__table td.item-name .cell{ display:flex; align-items:flex-start; gap:12px; }
.ng-ty .ty-items__table td.item-name .thumb{ flex:0 0 auto; }
.ng-ty .ty-items__table td.item-name .thumb img.thumb-img{
  width:48px; height:48px; object-fit:cover; border-radius:8px; border:1px solid var(--ty-border);
}
.ng-ty .ty-items__table td.item-name .meta{ flex:1 1 auto; min-width:0; }
.ng-ty .ty-items__table td.item-name .name{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  font-weight:600; color:var(--ty-text);
}
.ng-ty .ty-items__table td.item-name a{ color:inherit; text-decoration:none; }
.ng-ty .ty-items__table td.item-name a:hover{ text-decoration:underline; }
.ng-ty .ty-items__table td.item-name .sku{ color:var(--ty-muted); font-weight:400; font-size:12px; margin-left:6px; }
.ng-ty .ty-items__table td.item-name .item-meta{ display:block; color:var(--ty-muted); font-size:13px; margin-top:4px; }

/* qty pill */
.ng-ty .qty-pill{
  display:inline-block; min-width:28px; padding:4px 8px; text-align:center;
  border-radius:999px; background:var(--ty-accent-soft); border:1px solid var(--ty-accent); font-weight:700;
}

/* totals */
.ng-ty .ty-totals{ margin-top:14px; border-top:1px solid var(--ty-border); }
.ng-ty .ty-totals .t-row{ display:flex; justify-content:space-between; gap:16px; padding:10px 0; border-bottom:1px solid var(--ty-border); }
.ng-ty .ty-totals .t-row:last-child{ border-bottom:none; }
.ng-ty .ty-totals .t-label{ color:var(--ty-muted); }
.ng-ty .ty-totals .t-val{ color:var(--ty-text); font-weight:600; font-variant-numeric: tabular-nums; }
.ng-ty .ty-totals .t-row.grand{ margin-top:10px; padding:12px 14px; border:1px solid var(--ty-accent); background:var(--ty-accent-soft); border-radius:12px; }

/* note box stays as before (you already added) */
.ng-ty .order-note{ margin-top:14px; padding:12px 14px; background:#f7f7f7; border:1px solid #eee; border-left:4px solid #09090b; border-radius:8px; }
.ng-ty .order-note h4{ margin:0 0 6px; font-size:16px; line-height:1.3; }
.ng-ty .order-note p{ margin:0; line-height:1.6; }

/* Order details：统一产品行背景为白色，保留表头灰底 */
.ng-ty .ty-items__table tbody td{
  background: #fff !important;
}
.ng-ty .ty-items__table tr:nth-child(even) td{
  background: #fff !important; /* 覆盖之前的斑马纹 */
}

/* ===== Thank You — Addresses (brand cards) ===== */
:root{
  --ty-text:#09090b;
  --ty-muted:#6b6b6b;
  --ty-border:#e9e9ec;
  --ty-accent:#ffdb01;
  --ty-accent-soft:#fff7cc;
}

.ng-ty .ty-addresses{ margin-top: 6px; }
.ng-ty .ty-addr-title{
  font-size: 22px; font-weight: 700; margin: 0 0 12px; color: var(--ty-text);
}
.ng-ty .ty-addr-title::after{
  content:''; display:block; width:56px; height:6px; border-radius:6px; background:var(--ty-accent); margin-top:8px;
}

.ng-ty .addr-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media (max-width: 768px){ .ng-ty .addr-grid{ grid-template-columns:1fr; } }

.ng-ty .addr-card{
  background:#fff; border:1px solid var(--ty-border); border-radius:16px; padding:16px;
  box-shadow:0 6px 18px rgba(9,9,11,0.06);
}

.ng-ty .addr-head{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.ng-ty .addr-head h4{ margin:0; font-size:18px; font-weight:700; color:var(--ty-text); }
.ng-ty .addr-head .iconbox{
  width:28px; height:28px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center;
  background:var(--ty-accent-soft); border:1px solid var(--ty-accent); color:var(--ty-text);
}

.ng-ty .addr-body{ font-style: normal; margin:0 0 6px; color:#333; line-height:1.6; }
.ng-ty .addr-body p{ margin:0; }

.ng-ty .addr-line{ display:flex; align-items:center; gap:8px; margin:6px 0 0; font-size:15px; color:#333; }
.ng-ty .addr-line .icon{ width:18px; height:18px; line-height:0; display:inline-flex; align-items:center; justify-content:center; opacity:.8; }
.ng-ty .addr-line .icon svg{ width:18px; height:18px; }
.ng-ty .addr-line a{ color:inherit; text-decoration:none; }
.ng-ty .addr-line a:hover{ text-decoration:underline; }

.ng-ty .addr-actions{ margin-top:8px; }
.ng-ty .addr-map{
  display:inline-block; padding:6px 10px; border-radius:10px;
  border:1px solid var(--ty-accent); background:var(--ty-accent-soft);
  font-size:13px; color:var(--ty-text); text-decoration:none;
}
.ng-ty .addr-map:hover{ filter:brightness(0.98); }

.ng-ty .addr-actions{ display:none !important; }

/* === Thank You — Actions (brand buttons) === */
:root{
  --ty-text:#09090b;
  --ty-border:#e9e9ec;
  --ty-accent:#ffdb01;
}

/* Actions 外层容器去边框（兼容 .card + .ty-actions）*/
.ng-ty .card.ty-actions,
.ng-ty .ty-actions{
  border: 0 !important;
}

.ng-ty .ty-actions{
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0;  /* 需要保留内边距就删掉这一行 */
}
.ng-ty .ty-actions .btn-row{
  display:flex; flex-wrap:wrap; gap:20px; align-items:center;
}

/* base button */
.ng-ty .btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 16px;
  border-radius:12px;
  font-weight:500; font-size:14px;
  text-decoration:none;
  border:1px solid transparent;
  transition:transform .08s ease, box-shadow .12s ease, background-color .12s ease, border-color .12s ease;
  box-shadow:0 1px 0 rgba(0,0,0,.04);
}
.ng-ty .btn .icon{ width:18px; height:18px; line-height:0; display:inline-flex; align-items:center; justify-content:center; }
.ng-ty .btn .icon svg{ width:18px; height:18px; }

/* styles */
.ng-ty .btn-primary{ background:#09090b; color:#fff; border-color:#09090b; }
.ng-ty .btn-primary:hover{ transform:translateY(-1px); box-shadow:0 6px 16px rgba(9,9,11,.18); }
.ng-ty .btn-primary:focus{ outline:2px solid var(--ty-accent); outline-offset:2px; }

.ng-ty .btn-ghost{ background:#fff; color:var(--ty-text); border-color:var(--ty-border); }
.ng-ty .btn-ghost:hover{ border-color:#cfcfd6; transform:translateY(-1px); }

.ng-ty .btn-accent{ background:var(--ty-accent); color:var(--ty-text); border-color:var(--ty-accent); }
.ng-ty .btn-accent:hover{ filter:brightness(.98); transform:translateY(-1px); }

/* Mobile tweaks */
@media (max-width: 640px){
  .ng-ty .ty-items__table th.qty, .ng-ty .ty-items__table td.qty{ width:auto; }
  .ng-ty .ty-items__table th.line-total, .ng-ty .ty-items__table td.line-total{ width:auto; }
  .ng-ty .ty-items__table td{ padding:10px 12px; }
  .ng-ty .ty-items__title{ font-size:20px; }
	
/* 1) 隐藏表头，卡片化每一行 */
  .ng-ty .ty-items__table thead{ display:none; }

  /* 行->两行网格：第一行=名称，第二行=数量+总价 */
  .ng-ty .ty-items__table tbody tr{
    display: grid;
    grid-template-columns: minmax(0,1fr) max-content; /* 左=可收缩, 右=自适应 */
    grid-template-areas: "name total";
    gap: 10px 12px;
    padding: 12px;
    margin: 10px 0;
    position: relative;
    border: 1px solid var(--ty-border);
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(9,9,11,.06);
    background: #fff;
  }
  .ng-ty .ty-items__table tbody tr td{ 
    border-bottom: 0;                          /* 去掉单元格分割线 */
    padding: 0;
  }
  .ng-ty .ty-items__table tbody tr td.item-name{ grid-area: name; }
  .ng-ty .ty-items__table tbody tr td.qty{ grid-area: qty; align-self:center; }
  .ng-ty .ty-items__table tbody tr td.line-total{ 
    grid-area: total; 
    align-self:center; 
    justify-self:end; 
    text-align:right;
	font-weight: 600;  
    font-size: 13px;
  }

  /* 2) 名称单元内部：缩略图 + 两行标题 */
  .ng-ty .ty-items__table td.item-name .cell{
    display: grid;
    grid-template-columns: 56px minmax(0,1fr);
    gap: 10px;
    align-items: center;
  }
	
.ng-ty .ty-items__table td.item-name .meta{ 
	min-width: 0;
	align-self: start; /* 顶部对齐 */
	}	
	
.ng-ty .ty-items__table td.item-name .thumb{
    width: 56px; height: 56px;
    display: flex; align-items: center; justify-content: center; /* 居中 */
    border: 1px solid var(--ty-border);
    border-radius: 10px; background: #f6f7f9;
    overflow: hidden;
  }
	
  .ng-ty .ty-items__table td.item-name .thumb img.thumb-img{
    width: 100%; height: 100%;
    object-fit: contain;              /* 完整显示图片，不裁切 */
  }
  .ng-ty .ty-items__table td.item-name .name{
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 24ch; /* ← 调整可见字符数，常见 18–28ch */
  }
	
 .ng-ty .ty-items__table td.item-name .name a{
	 font-size: 14px;
	 font-weight: 500;
	 
	}
	
  .ng-ty .ty-items__table td.item-name .sku,
  .ng-ty .ty-items__table td.item-name .item-meta{
    display:none;                               /* 手机端隐藏 SKU/变体小字，干净些 */
  }

  /* 3) 数量与金额更紧凑 */
  .ng-ty .qty-pill{
  --size: 20px;

  display: inline-flex;           /* 让宽高生效并可内联 */
  align-items: center;            /* 垂直居中 */
  justify-content: center;        /* 水平居中 */

  width: var(--size);
  height: var(--size);
  padding: 0;                     /* 去掉内边距，避免挤偏 */
  border-radius: 999px;

  font-size: 10px;
  line-height: 1;                 /* 避免基线干扰 */
  font-weight: 700;
  background: var(--ty-accent-soft);
  border: 1px solid var(--ty-accent);

  margin-left: 8px;
  vertical-align: middle;         /* 与文字同一基线更好看 */
  box-sizing: border-box;         /* 宽高包含边框 */
}
  .ng-ty .ty-items__table th.qty, 
  .ng-ty .ty-items__table td.qty,
  .ng-ty .ty-items__table th.line-total, 
  .ng-ty .ty-items__table td.line-total{
    width:auto;                                  /* 释放固定列宽 */
  }
	
  .ng-ty .ty-items__table td.qty{
    position: absolute; 
    left: calc(12px + 48px + 10px);  /* 卡边距12 + 图48 + 间距10 */
    bottom: 10px;
  }	

  /* 4) 卡片化容器圆角、阴影，提升层次 */
  .ng-ty .ty-tablewrap{ border:0; }
  .ng-ty .ty-items__table{ border-spacing:0; }
  .ng-ty .ty-items__table tbody tr{
    border:1px solid var(--ty-border);
    border-radius:12px;
    box-shadow:0 2px 8px rgba(9,9,11,.05);
    margin:10px 0;
  }

  /* 5) 标题与区块留白缩小 */
  .ng-ty .ty-items{ padding:16px; }
  .ng-ty .ty-items__title{ font-size:20px; margin-bottom:8px; }
  .ng-ty .ty-items__title::after{ width:48px; height:5px; margin-top:6px; }

  /* 6) 总计区域更紧凑 */
  .ng-ty .ty-totals{ margin-top:10px; }
  .ng-ty .ty-totals .t-row{ padding:8px 0; }
  .ng-ty .ty-totals .t-row.grand{ padding:10px 12px; }	
	
/* 0) 去掉单元格的所有边框/背景，避免网格线 */
  .ng-ty .ty-items__table thead{ display:none; }
  .ng-ty .ty-items__table tbody td{
    border: none !important;
    background: transparent !important;
    padding: 0;
  }

/* === Thank You — Actions (brand buttons) === */	
.ng-ty .ty-actions{ padding:14px; }
  .ng-ty .btn{ flex:1 1 auto; justify-content:center; }	
	
.ng-ty .ty-summary__meta{
    display: none !important;
  }	
}