/* assets/css/foodshop.css */

/* 商品卡 */
.product-card{
  border:1px solid #eee;
  background:#fff;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  transition:transform .18s ease, box-shadow .18s ease;
}
.product-card:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 26px rgba(0,0,0,.10);
}
.product-card .p-img{
  aspect-ratio: 4/3;
  background:#fafafa;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.product-card .p-img img{
  width:100%; height:100%; object-fit:cover;
}
.product-card .p-body{
  padding:14px 14px 16px;
}
.product-card .p-title{
  font-size:1rem; font-weight:700; margin:0 0 6px;
}
.product-card .price{
  margin-top:6px; display:flex; align-items:baseline; gap:.5rem;
}
.product-card .price .sp{
  font-weight:800; font-size:1.1rem;
}
.product-card .price .orig{
  color:#9aa0a6; text-decoration:line-through; font-size:.9rem;
}

/* 讓 CTA 圓角與品牌色系一致（不動原本站色） */
.btn-pill{ border-radius:999px; }

/* 食品主視覺可加一點圓角 */
#heroBg{ border-radius:12px; }

/* 讓商品標題像文字連結 */
.btn-reset{
  border:0;
  background:none;
  padding:0;
  margin:0;
  color:inherit;
  font:inherit;
  cursor:pointer;
}

/* 精選商品小角標 */
.product-card .featured-badge{
  position:absolute;
  left:10px;
  top:10px;
  background:#f97316;
  color:#fff;
  font-size:0.75rem;
  padding:2px 8px;
  border-radius:999px;
}
.product-card .p-img{
  position:relative;
}

/* 商品上方工具列 */
.product-toolbar{
  padding:10px 14px;
  margin-bottom:6px;
  background:#edf5f4;
  border-radius:16px;
}

/* 分類 Chips */
#productCats{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
#productCats .chip{
  border-radius:999px;
  border:1px solid #d1dde2;
  background:#fff;
  padding:6px 16px;
  font-size:0.9rem;
  cursor:pointer;
  color:#334155;
  transition:all .16s ease;
}
#productCats .chip:hover{
  background:#f3faf9;
}
#productCats .chip.active{
  background:#0f766e;
  border-color:#0f766e;
  color:#fff;
}

/* 搜尋框寬度 */
.product-toolbar .search-box{
  min-width:180px;
  max-width:260px;
}

/* 讓「標題按鈕」／圖片按鈕看起來像一般文字或圖片 */
.btn-reset,
.product-card .img-btn{
  border:0;
  background:none;
  padding:0;
  margin:0;
  color:inherit;
  font:inherit;
  cursor:pointer;
}

/* 精選角標 */
.product-card .p-img{
  position:relative;
}
.product-card .featured-badge{
  position:absolute;
  left:10px;
  top:10px;
  background:#f97316;
  color:#fff;
  font-size:0.75rem;
  padding:2px 8px;
  border-radius:999px;
  z-index:2;
}
.product-card .img-btn img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Modal 視覺調整，避免「位置跑掉」感覺 */
.product-modal .modal-dialog{
  max-width:960px;
}
.product-modal .modal-body{
  padding:24px 24px 20px;
}
.product-modal-img{
  border-radius:16px;
  overflow:hidden;
  background:#f8fafc;
}
.product-modal-img img{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
}
.product-modal-price .price-orig{
  text-decoration:line-through;
}

/* 手機版：商品卡片的按鈕改成直式滿版，避免變形擠在一起 */
@media (max-width: 575.98px){
  .product-card .p-body .btn-group-mobile {
    flex-direction: column;
    align-items: stretch;
  }
  .product-card .p-body .btn-group-mobile .btn{
    width: 100%;
    justify-content: center;
  }
}

/* 讓商品卡片高度自動拉齊，按鈕固定在最下方 */
.product-card {
  display: flex;
  flex-direction: column;
}

.product-card .p-body {
  display: flex;
  flex: 1;
  flex-direction: column;
}

/* Bootstrap 的 .mt-2 有 !important，因此這裡也要加 !important 才壓得過去 */
.product-card .p-body .btn-group-mobile {
  margin-top: auto !important;
}

/* 商品介紹圖片 */
.cp-product-intro img {
    max-width: 100% !important; /* 只能縮小、不放大 */
    width: auto !important;     /* 覆蓋 inline width:100% */
    height: auto !important;
    display: block;
}
.cp-product-intro img[style*="width"] {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
}

@media (min-width: 1121px) {
  .cp-product-intro img[style*="width"] {
      width: auto !important;
      max-width: 60% !important;
      height: auto !important;
  }
}
/* /.商品介紹圖片 */

/* 結帳按鈕 */
/* 浮動「結帳」按鈕 */
.ec9-floating-cart-btn {
  position: fixed;
  right: 8px;          /* 靠右貼邊一點 */
  bottom: 200px;        /* 往上移，避免蓋到 GoTop */
  z-index: 1050;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, #0f766e, #16a34a);
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
  transform: translateZ(0); /* 提升渲染品質 */
}

/* 滑過時稍微亮一點 */
.ec9-floating-cart-btn:hover {
  text-decoration: none;
  background: linear-gradient(135deg, #059669, #22c55e);
}

/* icon */
.ec9-cart-icon {
  font-size: 14px;
  line-height: 1;
}

/* 「結帳」文字 */
.ec9-cart-label {
  white-space: nowrap;
}

/* 件數小圓點 */
.ec9-cart-count {
  min-width: 20px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.95);
  color: #047857;
  font-weight: 700;
  text-align: center;
  font-size: 12px;
}

/* 手機版稍微縮小一點，避免佔太多空間 */
@media (max-width: 575.98px) {
  .ec9-floating-cart-btn {
    right: 6px;
    bottom: 70px;    /* 手機 GoTop 通常更貼底，可以再微調 */
    padding: 7px 11px;
    font-size: 12px;
  }

  .ec9-cart-count {
    min-width: 18px;
    padding: 1px 5px;
    font-size: 11px;
  }
}

/* 結帳按鈕彈跳動畫 keyframes */
@keyframes ec9-cart-pulse {
  0% {
    transform: translateZ(0) scale(1);
    box-shadow: 0 6px 16px rgba(0,0,0,.25);
  }
  30% {
    transform: translateZ(0) scale(1.08);
    box-shadow: 0 10px 22px rgba(0,0,0,.30);
  }
  60% {
    transform: translateZ(0) scale(0.97);
    box-shadow: 0 5px 14px rgba(0,0,0,.22);
  }
  100% {
    transform: translateZ(0) scale(1);
    box-shadow: 0 6px 16px rgba(0,0,0,.25);
  }
}

/* 加上這個 class 時，跑一次彈跳動畫 */
.ec9-floating-cart-btn.ec9-cart-animate {
  animation: ec9-cart-pulse 0.6s ease-out;
}


/* /.結帳按鈕 */

/* footer */
/* 桌機／平板：右下角結帳按鈕 */
.ec9-floating-cart-btn {
  position: fixed;
  right: 8px;
  bottom: var(--ec9-cart-float-bottom, 80px); /* 用 JS 調整 */
  z-index: 1050;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, #0f766e, #16a34a);
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
}

.ec9-floating-cart-btn:hover {
  text-decoration: none;
  background: linear-gradient(135deg, #059669, #22c55e);
}

.ec9-cart-icon {
  font-size: 14px;
  line-height: 1;
}

.ec9-cart-label {
  white-space: nowrap;
}

.ec9-cart-count {
  min-width: 20px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.95);
  color: #047857;
  font-weight: 700;
  text-align: center;
  font-size: 12px;
}

/* 手機底部結帳 bar */
.ec9-cart-bottom-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--ec9-cart-bottom-bar-bottom, 0);
  z-index: 1050;
  padding: 8px 16px;
  background: linear-gradient(135deg, #0f766e, #16a34a);
  color: #fff;
  text-decoration: none;
}

.ec9-cart-bottom-main {
  max-width: 540px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
}

.ec9-cart-bottom-count {
  min-width: 20px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.95);
  color: #047857;
  font-weight: 700;
  text-align: center;
  font-size: 12px;
}

/* 動畫：輕微放大縮回 */
@keyframes ec9-cart-pulse {
  0% {
    transform: translateZ(0) scale(1);
    box-shadow: 0 6px 16px rgba(0,0,0,.25);
  }
  30% {
    transform: translateZ(0) scale(1.08);
    box-shadow: 0 10px 22px rgba(0,0,0,.30);
  }
  60% {
    transform: translateZ(0) scale(0.97);
    box-shadow: 0 5px 14px rgba(0,0,0,.22);
  }
  100% {
    transform: translateZ(0) scale(1);
    box-shadow: 0 6px 16px rgba(0,0,0,.25);
  }
}

.ec9-cart-animate {
  animation: ec9-cart-pulse 0.6s ease-out;
}

/* RWD：手機只顯示底部 bar，桌機只顯示浮動按鈕 */
@media (max-width: 767.98px) {
  .ec9-floating-cart-btn {
    display: none !important;
  }
}

@media (min-width: 768px) {
  .ec9-cart-bottom-bar {
    display: none !important;
  }
}

/* /.footer */