/************************************************************
 WooCommerce Notices — Full-width bar inside page container
 适用页面：全站（Cart、Checkout、Shop、单品等）
************************************************************/

/* 可按需覆盖的容器变量（若主题已定义相同变量会继承） */
:root{
  --wc-container-width: 1440px;   /* 你的版心宽 */
  --wc-container-px: 20px;        /* 两侧内边距 */
  --wc-success: #64D199;          /* 成功背景色（绿） */
  --wc-info:    #2B6CB0;          /* 信息背景色（蓝） */
  --wc-error:   #E11D48;          /* 错误背景色（红） */
}

/* —— notices 外层 wrapper：占满容器宽，不超出 —— */
.woocommerce-notices-wrapper{
  width: 100% !important;
  max-width: var(--wc-container-width) !important;
  margin-bottom: 50px !important;
  box-sizing: border-box !important;
}

/* Cart/Shop 等页面若有网格/两栏：跨整行显示 */
body.woocommerce-cart .woocommerce-notices-wrapper,
body.woocommerce-checkout .woocommerce-notices-wrapper,
body.woocommerce-page .woocommerce-notices-wrapper{
  grid-column: 1 / -1 !important;
}

/* —— 通知条本体：满宽横幅，左右两端布局 —— */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error{
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 16px 20px !important;
  border: 0 !important;
  border-radius: 0 !important;     /* 与你的风格一致：直角 */
  color: #ffffff !important;
  position: static !important;              /* 移除相对定位的依赖 */	
}

/* 背景色分别处理 */
.woocommerce-message{ background: var(--wc-success) !important; }
.woocommerce-info{ background: var(--wc-info) !important; }
.woocommerce-error{ background: var(--wc-error) !important; }

/* 默认 Woo 可能是 <ul><li>，把 li 展平为一行 */
.woocommerce-error li,
.woocommerce-info li{
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* 左侧图标（✓、i、!） */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before{
  position: static !important;              /* 关键：不再绝对定位 */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 18px;                          /* 给图标留出占位 */
  margin-right: 10px !important;            /* 与文字的间距 */
  margin-left: 0 !important;
  top: auto !important; right: auto !important;
  bottom: auto !important; left: auto !important;
  transform: none !important;
  background: none !important;
  border: 0 !important;
  line-height: 1 !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif !important;
  /* 你的符号 */
  content: "\2713" !important;               /* message: check mark */
}
.woocommerce-info::before{ content: "\2139" !important; }
.woocommerce-error::before{ content: "!" !important; }

/* 右侧链接（如 Undo? / View cart / Return to shop）靠右 */
.woocommerce-message > a:last-child,
.woocommerce-info > a:last-child,
.woocommerce-error > a:last-child{
  margin-left: auto !important;
  color: #ffffff !important;
  text-decoration: underline !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

/* 避免按钮类（.button）把行高/背景带进来 */
.woocommerce-message a.button,
.woocommerce-info a.button,
.woocommerce-error a.button{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  color: #ffffff !important;
  text-decoration: underline !important;
}

/* —— 自适应：小屏可换行，但不溢出 —— */
@media (max-width: 768px){
  .woocommerce-notices-wrapper{
    margin-top: 20px !important;
	margin-bottom: 20px !important;
  }
  .woocommerce-message,
  .woocommerce-info,
  .woocommerce-error{
    padding: 14px 16px !important;
    flex-wrap: wrap !important;            /* 允许换行 */
    row-gap: 8px !important;
  }
  .woocommerce-message > a:last-child,
  .woocommerce-info > a:last-child,
  .woocommerce-error > a:last-child{
    margin-left: 0 !important;             /* 换行时贴左 */
  }
	
  /* 容器：允许换行，所有子项都能收缩 */
  .woocommerce-message,
  .woocommerce-info,
  .woocommerce-error{
    display:flex !important;
    align-items:flex-start !important;
    gap:10px !important;
    flex-wrap:wrap !important;
    /* 关键：长词也断、任何地方都可断，不会把容器撐爆 */
    overflow-wrap:anywhere !important;
    word-break:break-word !important;
    hyphens:auto !important;
  }

  /* 图标改回绝对定位 + 左内边距，避免与首行文字抢行且不重叠 */
  .woocommerce-message,
  .woocommerce-info,
  .woocommerce-error{
    position:relative !important;
    padding-left: 32px !important;  /* 给图标留出占位 */
  }
  .woocommerce-message::before,
  .woocommerce-info::before,
  .woocommerce-error::before{
    position:absolute !important;
    left:12px !important;
    top:14px !important;            /* 基本垂直居中（与你的内边距相配）*/
    transform:none !important;
    margin:0 !important;
  }

  /* 右侧链接（如 Undo?）换到下一行，且不溢出 */
  .woocommerce-message > a:last-child,
  .woocommerce-info > a:last-child,
  .woocommerce-error > a:last-child{
    margin-left:0 !important;       /* 小屏不要靠右挤同一行 */
    white-space:nowrap !important;  /* 文案本身不拆 */
    max-width:100% !important;      /* 兜底不超出 */
  }

  /* UL 结构的 error/info 也不会被 <li> 撐坏 */
  .woocommerce-error li,
  .woocommerce-info li{
    display:inline !important;
    overflow-wrap:anywhere !important;
    word-break:break-word !important;
  }	
}