:root{
  --bg:#f6f7f9;
  --card:#ffffff;
  --ink:#1f2733;
  --muted:#7a8696;
  --line:#e7eaf0;
  --accent:#ff5b2e;       /* CTA / 價格 */
  --accent-dark:#e84417;
  --teal:#0d9488;
  --radius:14px;
  --shadow:0 1px 2px rgba(20,30,50,.05),0 8px 24px rgba(20,30,50,.06);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,-apple-system,"Segoe UI",sans-serif;
  background:var(--bg);color:var(--ink);line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
.container{max-width:1280px;margin:0 auto;padding:0 20px}



/* ---- 手機版手動 ---- */
@media(max-width:840px){
 .container{margin:0 auto;padding:0px!important;}
 .store-about-section {padding: 0px!important; }
  .toolbar {margin: 5px 0 5px!important; padding:0px 10px!important;}
  .shop-main {padding: 0 10px!important;}
  .detail {padding: 0 10px!important;}
  .product-desc-section {padding: 10px 10px!important;}
  .comments {padding: 0 10px!important;}
  .sitelink {display: none!important;}
  .details {padding: 0px!important; margin: 0px!important;}
  .gallery {padding: 0px!important;}
  .info {padding: 10px 10px!important;}
  .main-img {border-radius:0!important;}
  .gallery-slider {padding: 0 10px!important;}
  .social-fav-row {margin: 15px!important; }
  .info .cat-link{ margin-bottom: 2px!important;}
  .p-title { font-size: 18px!important;
    line-height: 1.4!important;
    margin: 0 0 2px!important;
    font-weight: 700!important;}
   .grid {padding: 0 0px!important;display: grid!important;
    grid-template-columns: repeat(auto-fill, minmax(180px, 2fr))!important;
    gap: 5px!important;
	margin-bottom: 20px!important; }
   .sale-ribbon{padding: 3px 7px!important;}
   .price {font-size: 17px!important;}
   .p-price {font-size: 25px!important;}
   .price-was {font-size: 13px!important;margin-left: 0px!important;}
   .card .meta {display:flex!important;align-items:baseline!important;width:100%;}
   .card .meta .stock {margin-left:auto;white-space:nowrap;text-align:right;}
   .card .body {gap: 1px!important;} 
   .m-15 {padding: 10px 10px!important;}
   .brand{padding: 0px!important;}
   .notif-list,.lead ,.msg-list{padding: 10px 10px!important;}
   .panel{padding: 10px 10px!important;}
   .member-auth{padding: 10px 10px!important;}
   .tabpane{padding: 0 10px!important;}
   .spec {width: 100%!important; border-spacing: 0 4px!important; line-height: 12px!important; margin-top:0px!important; font-size: 14px!important;}  
    .pay-notice {margin-top:0px!important;}
	.mono {font-weight: 600!important;}
	.muted sm {font-size: 13px!important;}
	.mb-order {border-left: 3px solid #ffcfbf!important;}
	.notice {margin: 0 10px!important;}
	.field { gap: 2px!important; margin-bottom: 8px!important;}
	.flash { margin: 10px!important;}
	.cart-wrap { padding: 0 10px!important; margin: 10px 0 30px!important; }
  .summary {margin: 0px 10px!important;}
  .checkout-wrap{gap: 0px!important;}
  .color-options{margin: 0px!important;}
  .color-options h4 {margin: 1px!important;}
  .p-price-box {margin: 0px!important;}
  .buy {
    display: grid !important;
    grid-template-columns: 130px minmax(0, 1fr);
    grid-template-areas:
      "qty button"
      "sold .";
    align-items: end;
    column-gap: 16px;
    row-gap: 7px;
    margin-bottom: 22px;
  }
  .buy-qty {
    grid-area: qty;
    margin: 10px 0 0!important;
  }
  .buy .qty {
    width: 100% !important;
    height: 46px;
  }
  .buy .btn-buy {
    grid-area: button;
    width: 100%;
    min-height: 52px;
    padding: 12px 14px;
  }
  .buy .p-sold-count {
    grid-area: sold;
    display: block;
    margin: 0;
    color: var(--muted);
    font-size: 12px!important;
    font-weight: 400;
  }
  
 
  
  .fav-btn {border:0px!important;box-shadow: 0 1px 4px rgba(0, 0, 0, 0)!important;}
  .p-title-actions.mobile-only-flex {display:flex!important;}
  .moball {display:none!important;}

  }

.m-15 {}
.p-title-actions.mobile-only-flex {display:none;}
.moball {}



/* ---- Header ---- */
.site-header{position:sticky;top:0;z-index:30;background:#fff;border-bottom:1px solid var(--line)}
.site-header .bar{display:flex;align-items:center;gap:20px;height:64px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px;letter-spacing:.3px}
.brand .dot{width:26px;height:26px;border-radius:8px;background:linear-gradient(135deg,var(--accent),#ff8a3d);display:inline-block}
.nav{display:flex;align-items:center;gap:8px;margin-left:auto}
.nav a{padding:8px 14px;border-radius:10px;font-size:14px;font-weight:600;color:var(--muted);display:inline-flex;align-items:center;gap:6px;}
.nav a:hover{background:var(--bg);color:var(--ink)}
.nav a.cta{background:var(--ink);color:#fff}
.nav a.cta:hover{background:#000;color:#fff}
.cart-pill{position:relative}
.cart-pill .badge{
  position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 5px;
  background:var(--accent);color:#fff;font-size:11px;font-weight:700;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
}
.header-search{display:flex;align-items:center;min-width:0}
.desktop-header-search{flex:0 1 230px;margin-right:4px}
.header-search input{width:100%;min-width:0;height:42px;border:1px solid var(--line);border-radius:12px 0 0 12px;padding:9px 12px;font:inherit;color:var(--ink);background:#fff}
.header-search input:focus{outline:0px solid #333;outline-offset:-1px;}
.header-search button{width:42px;height:42px;flex:0 0 42px;border:1px solid var(--line);border-left:0;border-radius:0 12px 12px 0;background:#fff;color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.header-search button:hover{background:var(--bg)}
.mobile-header-search-panel,.mobile-search-toggle{display:none}

/* Keep the signed-in desktop header on one line. The shared 1280px content
   container is too narrow once every member action is visible. */
@media(min-width:821px){
  body:not(.admin) .site-header .bar{
    width:100%;
    max-width:none;
    padding-inline:clamp(20px,1.6vw,32px);
    gap:clamp(12px,1.15vw,20px);
  }
  body:not(.admin) .site-header .brand,
  body:not(.admin) .desktop-nav,
  body:not(.admin) .desktop-nav>a,
  body:not(.admin) .desktop-nav>span,
  body:not(.admin) .nav-item-dropdown>a{
    white-space:nowrap;
  }
  body:not(.admin) .desktop-nav{
    min-width:0;
    gap:clamp(2px,.45vw,8px);
  }
  body:not(.admin) .desktop-nav>a{
    flex:none;
    padding-inline:clamp(8px,.75vw,14px);
  }
  body:not(.admin) .desktop-header-search{
    flex:1 1 230px;
    min-width:180px;
    max-width:300px;
  }
}

/* ---- Search / filter ---- */
.toolbar{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:26px 0 18px}
.toolbar h1{font-size:22px;margin:0;font-weight:800}
.toolbar .count{color:var(--muted);font-size:13px;font-weight:600}
.search{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.search input,.search select{
  border:1px solid var(--line);background:#fff;border-radius:10px;padding:9px 12px;font-size:14px;
  font-family:inherit;color:var(--ink);min-width:150px;
}
.search input:focus,.search select:focus{outline:0px solid #333;border-color:var(--accent)}
.search button{
  background:var(--accent);color:#fff;border:0;border-radius:10px;padding:9px 16px;
  font-weight:700;cursor:pointer;font-size:14px;
}
.search button:hover{background:var(--accent-dark)}

/* ---- Featured products ---- */
.featured-products{margin:0 0 24px}
.featured-head{display:flex;align-items:center;justify-content:space-between;margin:0 0 12px}
.featured-head h2{font-size:22px;margin:0;font-weight:700}
.featured-controls{display:flex;gap:8px}
.featured-arrow{width:40px;height:40px;border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--ink);font:700 30px/1 Arial,sans-serif;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0 0 4px}
.featured-arrow:hover,.featured-arrow:focus-visible{background:var(--ink);color:#fff;outline:none}
.featured-viewport{overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:20px;scroll-behavior:smooth;scrollbar-width:none;overscroll-behavior-x:contain}
.featured-viewport::-webkit-scrollbar{display:none}
.featured-track{display:flex;gap:18px;}
.featured-item{flex:0 0 calc((100% - 54px)/4);min-width:0;scroll-snap-align:start}
.featured-item:first-child{margin-left:30px}
.featured-item .card{height:100%}

.featured-viewport{background:var(--featured-bg, #eeeeee);padding:20px 20px 20px 0;border-radius: 12px;}

@media(max-width:767px){
  .featured-products{margin:16px 10px 20px}
  .featured-head h2{font-size:20px}
  .featured-controls{display:none}
  .featured-track{gap:12px}
  .featured-item{flex-basis:calc((100% - 12px)/2);scroll-snap-stop:always}
  .featured-viewport{touch-action:pan-x pan-y}
  .toolbar h1{font-size:18px;margin:0;font-weight:800}
}

/* ---- Product grid ---- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px;margin-bottom:48px}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  display:flex;flex-direction:column;transition:transform .12s ease,box-shadow .12s ease;
}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.thumb{position:relative;display:block;aspect-ratio:1/1;background:#eef1f5;overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s ease}
.card:hover .thumb img{transform:scale(1.04)}
.thumb .ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#b6bfcc;font-size:13px}
.tag{position:absolute;left:10px;top:10px;background:rgba(13,148,136,.92);color:#fff;font-size:11px;font-weight:700;padding:3px 9px;border-radius:8px}
.sold-out{position:absolute;inset:0;background:rgba(255,255,255,.7);display:flex;align-items:center;justify-content:center;font-weight:800;color:#9aa4b2;letter-spacing:2px}
.card .body{padding:12px 13px 14px;display:flex;flex-direction:column;gap:8px;flex:1}
.card .name{font-size:14px;font-weight:600;line-height:1.45;min-height:40px;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .name:hover{color:var(--accent)}
.card .meta{display:flex;align-items:baseline;justify-content:space-between;margin-top:auto}
.price{color:var(--accent);font-weight:800;font-size:18px}
.stock{font-size:12px;color:var(--muted)}
.add-row{display:flex;gap:8px;margin-top:6px}
.qty{width:58px;border:1px solid var(--line);border-radius:9px;padding:7px;text-align:center;font-size:14px;font-family:inherit}
.btn-add{flex:1;background:var(--accent);color:#fff;border:0;border-radius:9px;padding:8px;font-weight:700;cursor:pointer;font-size:13px}
.btn-add:hover{background:var(--accent-dark)}
.btn-add:disabled{background:#cdd4de;cursor:not-allowed}

/* ---- Empty / notice ---- */
.notice{background:#fff;border:1px dashed var(--line);border-radius:var(--radius);padding:36px;text-align:center;color:var(--muted)}
.notice a{color:var(--accent);font-weight:700}
.flash{background:#ecfdf5;border:1px solid #a7f3d0;color:#065f46;padding:12px 16px;border-radius:12px;margin:18px 0;font-weight:600}
.flash.err{background:#fef2f2;border-color:#fecaca;color:#991b1b}

/* ---- Cart ---- */
.cart-wrap{display:grid;grid-template-columns:1fr 320px;gap:24px;margin:24px 0 56px;align-items:start}
@media(max-width:840px){
  .cart-wrap{grid-template-columns:1fr}
  

  .cart-item{display:grid !important; grid-template-areas: "img name name" "img price sub" "img qty ." !important; gap: 8px 14px !important; align-items: center;}
  .cart-item > img { grid-area: img; margin: auto 0; }
  .cart-item > div:nth-child(2) { grid-area: name; display: block !important; }
  .cart-item .ci-price { margin-top: 0; }
  .cart-item .stepper { grid-area: qty; justify-self: start; margin-top: 6px; }
  .cart-item .ci-sub { grid-area: sub; justify-self: end; }
  .cart-item form[action="cart.php"]:has(input[value="remove"]) { position: absolute; top: 10px; right: 10px; }
  .cart-item { position: relative; padding: 12px !important; }
  .cart-item .ci-del { background: rgba(255,255,255,0.8) !important; padding: 4px 8px !important; border-radius: 6px !important; border: 1px solid var(--line) !important; color: #dc2626 !important; }
}
.cart-list{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.cart-item{display:flex;gap:14px;padding:16px;border-bottom:1px solid var(--line);align-items:center}
.cart-item:last-child{border-bottom:0}
.cart-item img{width:72px;height:72px;border-radius:10px;object-fit:cover;background:#eef1f5;flex:none}
.cart-item .ci-name{font-weight:600;font-size:14px}
.cart-item .ci-cat{font-size:12px;color:var(--muted);margin-top:2px}
.cart-item .ci-price{color:var(--accent);font-weight:700;margin-top:4px;font-size:14px}
.stepper{display:flex;align-items:center;gap:6px}
.stepper a{width:30px;height:30px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:8px;font-weight:700;color:var(--ink)}
.stepper a:hover{background:var(--bg)}
.stepper .n{min-width:34px;text-align:center;font-weight:700}
.ci-sub{font-weight:800;min-width:84px;text-align:right}
.ci-del{color:var(--muted);font-size:12px;margin-top:6px;display:inline-block}
.ci-del:hover{color:#dc2626}
.summary{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px;position:sticky;top:84px}
.summary h3{margin:0 0 14px;font-size:16px}
.sum-row{display:flex;justify-content:space-between;padding:8px 0;font-size:14px;color:var(--muted)}
.sum-total{display:flex;justify-content:space-between;padding:14px 0 4px;border-top:1px solid var(--line);margin-top:8px;font-size:20px;font-weight:800;color:var(--ink)}
.sum-total .price{font-size:22px}
.btn-primary{display:block;width:100%;text-align:center;background:var(--accent);color:#fff;border:0;border-radius:11px;padding:13px;font-weight:800;font-size:15px;cursor:pointer;margin-top:16px}
.btn-primary:hover{background:var(--accent-dark)}
.btn-ghost{display:block;width:100%;text-align:center;background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:11px;padding:11px;font-weight:700;margin-top:10px}
.btn-ghost:hover{background:var(--bg)}

/* ---- Import ---- */
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;margin:24px 0;box-shadow:var(--shadow)}
.panel h2{margin:0 0 6px;font-size:20px}
.panel p.lead{color:var(--muted);margin:0 0 18px;font-size:14px}
.drop{border:2px dashed #cfd6e0;border-radius:12px;padding:30px;text-align:center;color:var(--muted);background:var(--bg)}
.drop input[type=file]{margin-top:10px}
.btn-teal{background:var(--teal);color:#fff;border:0;border-radius:11px;padding:12px 22px;font-weight:700;cursor:pointer;font-size:15px;margin-top:16px}
.btn-teal:hover{filter:brightness(.94)}
.filetypes{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:18px}
.ftype{border:1px solid var(--line);border-radius:10px;padding:12px 14px;font-size:13px}
.ftype b{display:block;color:var(--ink);margin-bottom:2px}
.ftype span{color:var(--muted)}
.result-tbl{width:100%;border-collapse:collapse;margin-top:8px;font-size:14px}
.result-tbl td,.result-tbl th{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left}
.result-tbl th{color:var(--muted);font-weight:600}
.danger-link{color:#dc2626;font-size:13px;font-weight:600}

footer.site-foot{border-top:1px solid var(--line);background:#fff;color:var(--muted);font-size:13px;margin-top: 20px;
    bottom: 0px;
    width: 100%; }
footer.site-foot .container{padding:20px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}

/* ---- Product detail ---- */
.detail , .details{display:grid;grid-template-columns:minmax(0,460px) 1fr;gap:36px;margin:14px 0 56px;align-items:start}
@media(max-width:820px){.detail,.details{display: block; grid-template-columns:1fr;gap:22px}
.gallery {margin-bottom: 20px;
        padding-bottom: 20px;
        border-bottom: 1px solid #dbdbdb;}}

.gallery .main-img{position:relative;aspect-ratio:1/1;background:#eef1f5;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line)}
.gallery .main-img img{width:100%;height:100%;object-fit:cover;display:block}
.gallery .thumbs{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.thumb-btn{width:70px;height:70px;padding:0;border:2px solid var(--line);border-radius:10px;overflow:hidden;cursor:pointer;background:#eef1f5}
.thumb-btn img{width:100%;height:100%;object-fit:cover;display:block}
.thumb-btn.active{border-color:var(--accent)}
.thumb-btn:hover{border-color:var(--accent)}

.info .cat-link{display:inline-block;background:var(--teal-softer, #e7f6f5);color:var(--teal); border:1px solid #d8d8d8;font-size:12px;font-weight:700;padding:4px 11px;border-radius:8px;margin-bottom:12px}
.p-title{font-size:24px;line-height:1.4;margin:0 0 18px;font-weight:800}
.p-price-box{display:flex;align-items:baseline;gap:16px;padding:0px;background:var(--bg);border-radius:12px;margin-bottom:22px}
.p-price{font-size:30px;font-weight:800;color:var(--accent)}
.p-stock{font-size:13px;color:var(--muted);font-weight:600}
.p-stock.out{color:#dc2626}
.buy{display:flex;align-items:flex-end;gap:14px;margin-bottom:28px;flex-wrap:wrap}
.buy-qty{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted);font-weight:600}
.buy .qty{width:90px}
.btn-buy{background:var(--accent);color:#fff;border:0;border-radius:11px;padding:13px 34px;font-weight:800;font-size:15px;cursor:pointer}
.btn-buy:hover{background:var(--accent-dark)}
.btn-buy:disabled{background:#cdd4de;cursor:not-allowed}
.spec h3{font-size:15px;margin:0 0 10px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.spec table{width:100%;border-collapse:collapse;font-size:13px}
.spec th{text-align:left;color:var(--muted);font-weight:600;padding:9px 0;width:110px;vertical-align:top}
.spec td{padding:9px 0;color:var(--ink)}
.spec tr+tr th,.spec tr+tr td{border-top:1px solid var(--line)}
.gallery .main-img .ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#b6bfcc}

/* ---- Product description ---- */
.desc{margin:4px 0 26px}
.desc h3{font-size:15px;margin:0 0 10px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.desc-body{white-space:pre-wrap;word-break:break-word;font-size:14.5px;line-height:1.7;color:#3a4250}
.desc-body a{color:var(--teal);font-weight:600;text-decoration:underline;word-break:break-all}
.desc-body a:hover{color:var(--accent)}


.track-toolbar{width:100%;max-width:520px;margin-left:auto;margin-right:auto}
.track-form{width:100%;max-width:520px;margin:0 auto 22px;padding:30px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}
.track-form form{display:flex;flex-direction:column}
.track-form .lead{margin:0 0 20px;padding:0;color:var(--muted)}
.track-form .field{width:100%!important;display:flex!important;flex-direction:column;gap:6px;margin-bottom:16px}
.track-form .btn-primary{width:100%;min-height:46px;margin-top:4px}



/* ============ Checkout form ============ */
.checkout-wrap{display:grid;grid-template-columns:1fr 320px;gap:24px;margin:8px 0 56px;align-items:start}
@media(max-width:840px){.checkout-wrap{grid-template-columns:1fr}
.track-toolbar{padding:0 10px}
.track-form.panel{width:calc(100% - 20px);padding:20px 16px!important}
}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.field label{font-size:13px;font-weight:700;color:var(--ink)}
.field .req{color:var(--accent)}

.ship-opt input{
	width: fit-content!important; 
}

.field input,.field textarea,.field select{
  border:1px solid var(--line);border-radius:10px;padding:11px 13px;font-size:14px;
  font-family:inherit;color:var(--ink);background:#fff;width:100%;
}
.field input:focus,.field textarea:focus{outline:2px solid #ffd9cc;border-color:var(--accent)}
.field textarea{resize:vertical}
.field-row{display:flex;gap:14px}
.field-row .field{flex:1}
@media(max-width:560px){.field-row{flex-direction:column;gap:0}}
.ferr{color:#dc2626;font-size:12px;font-weight:600}
.ship-opts{display:flex;gap:10px;flex-wrap:wrap}
.ship-opt{display:flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:10px;padding:10px 14px;cursor:pointer;font-size:14px;font-weight:600}
.ship-opt:has(input:checked){border-color:var(--accent);background:#fff5f1;color:var(--accent-dark)}
.ship-opt input{accent-color:var(--accent)}
.ship-hint{font-size:12.5px;color:var(--teal);font-weight:700;padding:4px 0}
.ship-hint.ok{color:var(--accent)}
.pay-mini{font-size:12px;color:var(--muted);margin:12px 0 0;line-height:1.5}
.checkout-totals{margin-top:14px}

/* 訂單成立通知 */
.pay-notice{background:#fffbf6;border:1px solid #ffe1be;color:#1a1a1a;border-radius:0px;padding:14px 16px;font-size:14px;line-height:1.7;margin:6px 0 14px}
.recap{margin-top:22px}
.recap h3{font-size:15px;margin:0 0 10px;padding-bottom:8px;border-bottom:1px solid var(--line)}

/* ============ Admin ============ */
.admin-header .brand{color:var(--teal)}
.nav a.on{background:var(--bg);color:var(--ink)}
.admin-header .nav a.cta{background:var(--teal)}
.admin-header .nav a.cta:hover{filter:brightness(.93)}

/* 登入頁 */
.login-page{display:flex;align-items:center;justify-content:center;min-height:100vh;background:var(--bg)}
.login-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:34px 30px;width:340px;box-shadow:var(--shadow)}

/* 狀態篩選列 */
.status-filter{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0}
.status-filter a{border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 14px;font-size:13px;font-weight:600;color:var(--muted)}
.status-filter a.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.status-filter a em{font-style:normal;opacity:.7;margin-left:3px}

/* 訂單表格 */
.otbl{width:100%;border-collapse:collapse;font-size:14px}
.otbl th{text-align:left;color:var(--muted);font-weight:600;padding:13px 16px;border-bottom:1px solid var(--line);background:var(--bg)}
.otbl td{padding:13px 16px;border-bottom:1px solid var(--line);vertical-align:middle}
.otbl tr:last-child td{border-bottom:0}
.otbl tr:hover td{background:#fafbfc}
.otbl .r{text-align:right}
.otbl .mono{font-family:ui-monospace,Menlo,monospace;font-size:13px;font-weight:600}
.otbl .muted{color:var(--muted)}
.otbl .sm{font-size:12px}
.view-link{color:var(--teal);font-weight:700}
.view-link:hover{color:var(--accent)}

/* 狀態徽章 */
.badge-st{display:inline-block;font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px;vertical-align:middle}
.st-wait{background:#fff7ed;color:#c2410c}
.st-paid{background:#eff6ff;color:#1d4ed8}
.st-ship{background:#f0fdfa;color:#0f766e}
.st-done{background:#ecfdf5;color:#047857}
.st-return{background:#fef2f2;color:#b91c1c}
.st-other{background:#f3f4f6;color:#4b5563}

/* 訂單明細 */
.order-detail .od-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:6px}
@media(max-width:760px){.order-detail .od-grid{grid-template-columns:1fr;gap:22px}}
.od-h{font-size:14px;margin:0 0 10px;padding-bottom:8px;border-bottom:1px solid var(--line);color:var(--muted)}
.status-form{display:flex;gap:10px;align-items:center}
.status-form select{flex:1;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:14px;font-family:inherit}

/* ============ Admin 商品管理 ============ */
.ptbl .pthumb{width:56px}
.ptbl .pthumb img{width:46px;height:46px;border-radius:8px;object-fit:cover;background:#eef1f5;display:block}
.ptbl .pthumb .noimg{display:flex;width:46px;height:46px;border-radius:8px;background:#eef1f5;color:#b6bfcc;font-size:11px;align-items:center;justify-content:center}
.ptbl .pname{font-weight:600;color:var(--ink)}
.ptbl .pname:hover{color:var(--accent)}
.ptbl .nowrap{white-space:nowrap}
.stock-form{display:flex;gap:6px;align-items:center}
.stock-form .qty{width:64px;padding:6px;border:1px solid var(--line);border-radius:8px;text-align:center;font-family:inherit;font-size:14px}
.mini-btn{background:var(--teal);color:#fff;border:0;border-radius:8px;padding:6px 10px;font-size:12px;font-weight:700;cursor:pointer}
.mini-btn:hover{filter:brightness(.93)}
.del-link{background:none;border:0;color:#dc2626;font-weight:600;font-size:13px;cursor:pointer;margin-left:10px;padding:0}
.del-link:hover{text-decoration:underline}
.pager{display:flex;gap:6px;justify-content:center;margin:22px 0 48px;flex-wrap:wrap}
.pager a{border:1px solid var(--line);background:#fff;border-radius:8px;padding:7px 12px;font-size:13px;font-weight:600;color:var(--muted)}
.pager a.on{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ============ 手機版優化 ============ */
@media(max-width:720px){
  /* 頂部選單：允許換行、縮小間距，避免擠成一團 */
  .site-header .bar{height:auto;min-height:56px;flex-wrap:wrap;gap:6px 10px;padding:8px 8px}
  .brand{font-size:17px}
  .nav{margin-left:auto;gap:4px;flex-wrap:wrap;justify-content:flex-end}
  .nav a{padding:7px 10px;font-size:13px}

  /* 工具列換行 */
  .toolbar{gap:8px}
  .toolbar .search{margin-left:0;width:100%}
  .toolbar .search input{flex:1;min-width:0}

  /* 後台表格 → 卡片式（解決擋到按鈕、難閱讀）*/
  .otbl thead{display:none}
  .otbl, .otbl tbody, .otbl tr, .otbl td{display:;width:100%}
  .otbl tr{
    border-bottom: 1px solid var(--line);
        border-radius: 12px;
        padding: 6px 10px;
        margin: 10px auto;
        background: #fff;
        display: block;
  }
	.panel {
    background: transparent; 
    border: 0px solid var(--line); 
    border-radius:0;
    padding: 0px; 
    margin:0px;
     box-shadow:none;
}

  .member-auth .panel {
    background: #fff; 
    border: 0px solid var(--line); 
    border-radius:15px;
    padding: 10px; 
    margin: 15px 0;
        box-shadow: var(--shadow);
}
  
  .panel.order-table, .panel.prod-table{padding:12px 0 !important;overflow:visible !important}
  .otbl td{
    border:0;padding:3px 14px;text-align:left !important;
    display:flex;justify-content:space-between;align-items:center;gap:12px;
  }
  .otbl td::before{
    content:attr(data-label);color:var(--muted);font-size:12px;font-weight:600;
    flex:none;
  }
  .otbl td[data-label=""]{justify-content:flex-end}
  .otbl td[data-label=""]::before{display:none}
  .otbl .pthumb{justify-content:flex-start}
  .otbl .sm{display:inline}
  .stock-form{justify-content:flex-end}
  .del-link{margin-left:14px}
  /* 訂單明細左右欄改直排 */
  .order-detail .od-grid{grid-template-columns:1fr}
  
  .gal-grid{display:grid;grid-template-columns:repeat(3,1fr)!important;gap:14px;}
  
  /* 針對商品列表 ptbl 的手機版特化：緊湊網格 */
  .prod-table .ptbl tr {
    display: grid !important;
    grid-template-columns: 20px 46px 1fr auto;
    grid-template-areas: 
      "cb img name name"
      ".  img cat   price"
      ".  .   stock act";
    gap: 8px 10px;
    align-items: center;
    padding: 14px 12px;
  }
  .prod-table .ptbl td {
    display: flex !important;
    padding: 0 !important;
    border: 0 !important;
    text-align: left !important;
  }
  .prod-table .ptbl td::before { display: none !important; }
  .prod-table .ptbl .cbcol { grid-area: cb; align-self: start; margin-top: 4px; }
  .prod-table .ptbl .pthumb { grid-area: img; align-self: start; }
  .prod-table .ptbl td:nth-child(3) { grid-area: name; flex-direction: column; align-items: flex-start !important; align-self: start; line-height: 1.35;margin-left: 10px; }
  .prod-table .ptbl td:nth-child(3) .sm { margin-top: 4px; }
  .prod-table .ptbl td:nth-child(4) { grid-area: cat; font-size: 13px; }
  .prod-table .ptbl td:nth-child(5) { grid-area: price; justify-content: flex-end !important; font-weight: 700; }
  .prod-table .ptbl td:nth-child(6) { grid-area: stock; display: block !important; }
  .prod-table .ptbl td:nth-child(7) { grid-area: act; justify-content: flex-end !important; }
  .prod-table .ptbl .stock-form { justify-content: flex-start; }
  
  
  

.search button{
  background:var(--accent);color:#fff;border:0;border-radius:10px;padding:9px 16px;
  font-weight:700;cursor:pointer;font-size:14px;width:100%;
}
}





/* ============ 買家訂單查詢 ============ */
.track-result .tr-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.track-result .tr-no{font-size:18px;font-weight:800;margin-top:2px}
.steps{display:flex;gap:6px;margin:18px 0 4px}
.steps .step{flex:1;text-align:center;position:relative}
.steps .step .dot{
  width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  margin:0 auto 6px;background:#e7eaf0;color:#9aa4b2;font-weight:700;font-size:13px;position:relative;z-index:1;
}
.steps .step .lbl{font-size:12px;color:var(--muted);font-weight:600}
.steps .step::before{content:"";position:absolute;top:15px;left:-50%;width:100%;height:2px;background:#e7eaf0;z-index:0}
.steps .step:first-child::before{display:none}
.steps .step.done .dot{background:var(--teal);color:#fff}
.steps .step.done::before{background:var(--teal)}
.steps .step.active .dot{background:var(--accent);color:#fff;box-shadow:0 0 0 4px #ffe3d9}
.steps .step.active .lbl{color:var(--accent-dark)}
.steps .step.active::before{background:var(--teal)}
.tr-note{background:var(--bg);border-radius:10px;padding:12px 14px;font-size:14px;color:#3a4250;margin-top:14px}

/* 會員明細：訂單小表可橫向捲動（桌機窄欄時）*/
.table-scroll{overflow-x:auto}
@media(max-width:760px){
  .members-detail .od-grid, .panel .od-grid{grid-template-columns:1fr !important}
}

/* ============ 會員中心 ============ */
.member-auth{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:1000px; margin:0 auto; align-items:start}
.member-grid{display:grid;grid-template-columns:360px 1fr;gap:24px;align-items:start;margin-bottom:48px}
@media(max-width:820px){
	.member-auth,.member-grid{
		grid-template-columns:1fr}	
  .member-auth{
	  display:block;
  }
  }

.mb-items{margin:12px 0;display:flex;flex-direction:column;gap:6px}
.mb-item{display:flex;justify-content:space-between;font-size:14px;color:#3a4250;background: #f9f9f9;
    padding: 10px;}
.mb-order .pay-notice{font-size:13px}


/* ============ 末五碼回報 ============ */
.last5-box{margin-top:10px;display:flex;flex-direction:column;gap:6px; background: #fff1ec;
    padding: 6px;}
.last5-form{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.last5-form label{font-size:13px;font-weight:600;color:var(--ink)}
.last5-form input{width:120px;border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-family:inherit;font-size:14px}
.ok-tag{color:var(--teal);font-weight:700;font-size:13px}

/* ============ 商品留言 ============ */
.product-content-card{width:100%;max-width:1300px;margin:40px auto;padding:20px;background:#fff}
.product-tabs{display:none}
@media(min-width:821px){
  .product-tabs{display:flex;width:100%;max-width:1300px;margin:40px auto 0;padding:0 20px;border-bottom:1px solid var(--line)}
  .product-tabs button{position:relative;min-height:58px;padding:0 28px;border:0;background:transparent;color:var(--muted);font:inherit;font-size:16px;font-weight:700;cursor:pointer}
  .product-tabs button:hover{color:var(--ink);background:var(--bg)}
  .product-tabs button[aria-selected="true"]{color:var(--accent)}
  .product-tabs button[aria-selected="true"]::after{content:"";position:absolute;left:20px;right:20px;bottom:-1px;height:3px;background:var(--accent);border-radius:3px 3px 0 0}
  .product-tabs button:focus-visible{outline:3px solid #ffd9cc;outline-offset:-4px}
  .product-tab-panel{margin:0 auto 70px}
  .product-tab-panel.is-tab-hidden{display:none!important}
}
.comments{margin:0px auto}
.cmt-title{font-size:16px;margin:0 0 16px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.cmt-form{display:flex;flex-direction:column;gap:10px;margin-bottom:24px}
.cmt-form textarea{border:1px solid var(--line);border-radius:10px;padding:12px;font-family:inherit;font-size:14px;resize:vertical}
.cmt-form textarea:focus{outline:2px solid #ffd9cc;border-color:var(--accent)}
.cmt-form button{align-self:flex-start}
.cmt-login{background:var(--bg);border:1px dashed var(--line);border-radius:10px;padding:14px 16px;color:var(--muted);font-size:14px;margin-bottom:20px}
.cmt-login a{color:var(--accent);font-weight:700}
.cmt-list{display:flex;flex-direction:column;gap:16px}
.cmt{border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:#fff}
.cmt-head{display:flex;gap:10px;align-items:baseline;margin-bottom:6px}
.cmt-name{font-weight:700}
.cmt-body{font-size:14.5px;line-height:1.6;color:#3a4250}
.cmt-reply{margin-top:12px;background:#f0fdfa;border-left:3px solid var(--teal);border-radius:0 8px 8px 0;padding:10px 14px}
.cmt-reply-tag{display:inline-block;font-size:12px;font-weight:700;color:var(--teal);margin-bottom:4px}
.cmt-reply div{font-size:14px;line-height:1.6;color:#274}

/* 後台留言 */
.cmt-admin-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:10px}
.cmt-admin-body{background:var(--bg);border-radius:10px;padding:12px 14px;font-size:14.5px;line-height:1.6;margin-bottom:12px}
.cmt-reply-form textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-family:inherit;font-size:14px;resize:vertical}
.cmt-reply-form textarea:focus{outline:2px solid #d6f5ee;border-color:var(--teal)}
.cmt-del-wrap{margin-left:auto}

/* 導覽未回覆數徽章 */
.navbadge{display:inline-block;min-width:16px;height:16px;line-height:16px;text-align:center;background:var(--accent);color:#fff;border-radius:8px;font-size:11px;font-weight:700;padding:0 4px;vertical-align:top}

/* ============ App 風格導覽（手機底部列 + 上方圖示）============ */
.top-actions{display:none}
.bottom-nav{display:none}
.mobile-category-toggle,.mobile-menu-button,.mobile-menu-backdrop,.mobile-category-drawer{display:none}
.nav-badge-wrap{position:relative}
.ic{width:22px;height:22px;display:block}
.icon-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:10px;color:var(--ink);text-decoration:none}
.icon-btn:hover{background:var(--bg)}
.ic-badge{position:absolute;top:2px;right:2px;min-width:16px;height:16px;line-height:16px;padding:0 4px;background:var(--accent);color:#fff;border-radius:8px;font-size:11px;font-weight:700;text-align:center}

@media(max-width:820px){
  body:not(.admin) .site-header .bar{
    display:grid;
    grid-template-columns:42px minmax(0,1fr) auto;
    align-items:center;
    column-gap:10px;
    row-gap:6px;
    height:auto;
    min-height:58px;
    padding:8px;
  }
  .mobile-menu-button{grid-column:1;grid-row:1}
  body:not(.admin) .site-header .brand{grid-column:2;grid-row:1;min-width:0}
  .top-actions{grid-column:3;grid-row:1}
  .desktop-nav{display:none}
  .desktop-header-search{display:none}
  .top-actions{display:flex;gap:4px;align-items:center;margin-left:auto}
  .mobile-search-toggle{display:inline-flex;border:0;background:transparent;padding:0;font:inherit}
  .mobile-search-toggle[aria-expanded="true"]{background:var(--bg)}
  .mobile-header-search-panel{display:block;grid-column:1/-1;grid-row:2;width:95%;margin-left:auto;margin-right:auto;padding:4px 2px 8px}
  .mobile-header-search-panel[hidden]{display:none!important}
  .mobile-header-search{width:100%}
  .mobile-header-search input{height:48px;border-radius:24px 0 0 24px;padding-left:18px;font-size:16px;background:var(--bg)}
  .mobile-header-search button{height:48px;background:var(--bg)}
  .mobile-header-search button[type="submit"]{border-radius:0}
  .mobile-header-search .mobile-search-close{display:flex;width:46px;flex-basis:46px;border:1px solid var(--line);border-left:0;border-radius:0 24px 24px 0;font-size:28px;font-weight:300;line-height:1}
  .mobile-category-toggle{position:absolute;opacity:0;pointer-events:none}
  .mobile-menu-button{
    display:flex;flex:0 0 42px;width:42px;height:42px;border-radius:10px;
    cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:5px;
  }
  .mobile-menu-button span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px}
  .mobile-menu-backdrop{
    position:fixed;inset:0;z-index:70;background:rgba(20,27,36,.42);cursor:pointer;
  }
  .mobile-category-drawer{
    display:flex;position:fixed;top:0;bottom:auto;left:0;z-index:71;width:min(82vw,320px);
    height:100dvh;max-height:100dvh;
    flex-direction:column;background:#fff;box-shadow:8px 0 24px rgba(0,0,0,.14);
    transform:translateX(-105%);transition:transform .22s ease;overflow-y:auto;
    padding-bottom:calc(88px + env(safe-area-inset-bottom));
    scroll-padding-bottom:calc(88px + env(safe-area-inset-bottom));
    overscroll-behavior:contain;
  }
  .mobile-category-head{
    min-height:64px;display:flex;align-items:center;justify-content:space-between;
    padding:0 16px;border-bottom:1px solid var(--line);font-size:18px;
    position:sticky;top:0;z-index:1;background:#fff;flex:0 0 auto;
  }
  .mobile-menu-close{
    display:flex;width:38px;height:38px;align-items:center;justify-content:center;
    border-radius:50%;font-size:30px;font-weight:300;line-height:1;cursor:pointer;color:var(--muted);
  }
  .mobile-category-drawer a{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:14px 18px;border-bottom:1px solid var(--line);
    color:var(--ink);font-size:15px;text-decoration:none;
  }
  .mobile-category-count{
    flex:none;min-width:25px;height:22px;padding:0 7px;border-radius:11px;
    display:inline-flex;align-items:center;justify-content:center;
    background:var(--bg);color:var(--muted);font-size:12px;font-weight:700;
  }
  .mobile-category-drawer a:hover{background:var(--bg);color:var(--accent)}
  .mobile-category-drawer .mobile-category-all{font-weight:800;color:var(--accent)}
  .mobile-category-empty{padding:18px;color:var(--muted);font-size:14px}
  .mobile-support-group{margin-top:auto;border-top:1px solid var(--line);padding:12px 0 8px}
  .mobile-support-group>strong{display:block;padding:4px 18px 8px;font-size:15px;color:var(--ink)}
  .mobile-support-group a{padding:11px 18px;border-bottom:0}
  .mobile-category-toggle:checked ~ .mobile-menu-backdrop{display:block}
  .mobile-category-toggle:checked ~ .mobile-category-drawer{transform:translateX(0)}
  .site-header:has(.mobile-category-toggle:checked){z-index:80}
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  .bottom-nav{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;
    background:#fff;border-top:1px solid var(--line);
    padding-bottom:env(safe-area-inset-bottom);
    box-shadow:0 -2px 12px rgba(0,0,0,.05);
  }
  .bottom-nav a{
    flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
    padding:8px 0 7px;color:var(--muted);text-decoration:none;font-size:11px;font-weight:600;
  }
  .bottom-nav a .ic{width:24px;height:24px}
  .bottom-nav a.on{color:var(--accent)}
  .bottom-nav .bn-ic{position:relative;display:block}
}

/* ============ 通知頁 ============ */
.notif-list{display:flex;flex-direction:column;gap:10px;max-width:1180px;margin:0 auto;}
.notif{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.notif.unread{background:#fff8f5;border-color:#ffd9cc}
.notif-ic{flex:none;width:38px;height:38px;border-radius:50%;background:var(--bg);display:flex;align-items:center;justify-content:center;color:var(--teal)}
.notif.unread .notif-ic{background:#ffe3d9;color:var(--accent)}
.notif-title{font-weight:700;margin-bottom:2px}
.notif-body{font-size:14px;color:#3a4250;line-height:1.5}
.notif-meta{font-size:12px;color:var(--muted);margin-top:5px}
.notif-meta a{color:var(--teal);font-weight:600}

/* ============ 我的留言頁 ============ */
.msg-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px}
.msg-prod{font-weight:700;color:var(--ink);text-decoration:none}
.msg-prod:hover{color:var(--accent)}
.msg-q{font-size:14.5px;line-height:1.6;color:#3a4250}

/* 會員工具列的文字連結按鈕 */
.link-btn{color:var(--teal);font-weight:700;font-size:14px;text-decoration:none;white-space:nowrap}
.link-btn:hover{text-decoration:underline}

/* ============ 銷售總覽 ============ */
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:8px}
.stat-grid.small{grid-template-columns:repeat(4,1fr)}
.stat-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 20px;text-decoration:none;color:var(--ink);display:block}
.stat-card.primary{background:linear-gradient(135deg,#fff6f2,#fff);border-color:#ffd9cc}
.stat-card.link{transition:box-shadow .15s,transform .15s}
.stat-card.link:hover{box-shadow:0 6px 18px rgba(0,0,0,.07);transform:translateY(-1px)}
.stat-card.attention{border-left:3px solid var(--accent)}
.stat-label{font-size:13px;color:var(--muted);font-weight:600;margin-bottom:8px}
.stat-label span{display:inline-block;margin-left:6px;font-size:11px;color:#aab;font-weight:500}
.stat-num{font-size:28px;font-weight:800;letter-spacing:-.5px}
.stat-num small{font-size:14px;font-weight:600;color:var(--muted)}
.stat-num.accent{color:var(--accent)}
.sec-title{font-size:16px;margin:26px 0 12px}
.stat-mini{display:flex;flex-wrap:wrap;gap:10px 20px;margin-top:14px;font-size:14px;color:var(--muted)}
.stat-mini b{color:var(--ink);font-weight:700;margin-left:2px}
@media(max-width:760px){
  .stat-grid,.stat-grid.small{grid-template-columns:repeat(2,1fr)}
  .stat-num{font-size:24px}
}

/* ============ 訂單搜尋/排序/匯出 ============ */
.order-search{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.order-search input[type=text]{flex:1;min-width:180px;border:1px solid var(--line);border-radius:10px;padding:9px 12px;font-family:inherit;font-size:14px}
.order-search select{border:1px solid var(--line);border-radius:10px;padding:9px 10px;font-family:inherit;font-size:14px;background:#fff}
.order-search button{border:0;background:var(--ink);color:#fff;border-radius:10px;padding:9px 18px;font-weight:600;cursor:pointer}
.order-search .clear-search{color:var(--muted);font-size:13px;text-decoration:none}
.order-search .clear-search:hover{text-decoration:underline}
.btn-csv{margin-left:auto;background:var(--teal);color:#fff;border-radius:10px;padding:9px 16px;font-weight:600;font-size:14px;text-decoration:none;white-space:nowrap}
.btn-csv:hover{filter:brightness(.95)}
@media(max-width:600px){.btn-csv{}}
@media(max-width:840px){
	.order-search{
		padding:10px 10px 0px 10px;
	}
	.status-filter {
		padding:0px 10px;
	}
	.status-filter {
    display: flex;
    gap: 5px; 
	}
	.notice {
	        margin: 10px 10px !important;	
	}
	.bulk-bar {
		    margin: 0 0 0px;
	}
	.otbl, .otbl tbody, .otbl tr, .otbl td {
		margin: 0% 2%;
        width: 96%;
	}
	.stat-grid {    padding: 10px 10px 0px 10px;}
	
	.sec-title{    padding: 0px 10px;
	margin: 5px 0 0px 5px; }
	.btn-teal {margin: 0 10px;}
	.stat-mini { padding: 0px 10px;}
	.btn-teal { margin: 0px 10px 20px 10px;}
}

.hint {font-size: 14px;}


/* ============ 商店設定 ============ */
.settings-form{max-width:none}
.set-sec{margin:0 0 16px}
.set-sec h2{font-size:16px;margin:0 0 14px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.settings-form .hint{font-size:12px;color:var(--muted);margin-top:6px}
.settings-form textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-family:inherit;font-size:14px;resize:vertical}
.check-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media(max-width:600px){.check-grid{grid-template-columns:repeat(2,1fr)}}
.inline-check{display:flex;align-items:center;gap:7px;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;margin-top:8px}
.inline-check input{width:17px;height:17px}
.logo-preview{margin-bottom:8px}
.logo-preview img{max-height:60px;max-width:240px;border:1px solid var(--line);border-radius:8px;padding:6px;background:#fff}
/* 前台頁首 logo */
.brand-logo{height:40px;max-width:180px;object-fit:contain;display:block}

/* 結帳：超商門市欄位（預設隱藏，選超商取貨才顯示） */
#storeBlock{display:none}
.store-hint{font-size:12px;color:var(--muted);margin-top:6px}

/* ============ 優惠 / 最愛 ============ */
/* 卡片愛心 */
.card{position:relative}
.fav-form{position:absolute;top:8px;right:8px;z-index:3;margin:0}
.fav-btn{width:34px;height:34px;border-radius:50%;border:0;background:rgba(255,255,255,.92);
  color:#c9ccd3;font-size:18px;line-height:1;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.15);transition:transform .1s}
.fav-btn:hover{transform:scale(1.1)}
.fav-btn.on{color:var(--accent)}
/* 折扣標 */
.sale-ribbon{
  position:absolute;top:0px;left:12px;z-index:2;
  background:var(--sale-ribbon-bg, #fff1ed);color:var(--sale-ribbon-text, var(--accent));
  font-size:12px;font-weight:700;line-height:1.2;padding:6px 7px;
  border-radius:2px;box-shadow:0 1px 3px rgba(0,0,0,0)
}
.price.sale{color:var(--accent)}
.price-was{color:var(--muted);text-decoration:line-through;font-size:.86em;margin-left:4px}
.sale-badge{display:inline-block;background:#fff0eb;color:var(--accent);font-size:12px;font-weight:700;
  padding:1px 7px;border-radius:6px;margin-left:2px}
/* 商品頁 */
.p-price.sale{color:var(--accent)}
.p-price-was{color:var(--muted);text-decoration:line-through;font-size:16px;margin-left:0px}
.fav-line{margin:0 0 14px}
.fav-toggle{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:#fff;
  color:var(--ink);border-radius:10px;padding:8px 16px;font-weight:600;cursor:pointer;font-size:14px}
.fav-toggle .fav-ic{color:#c9ccd3;font-size:16px}
.fav-toggle.on{border-color:var(--accent);color:var(--accent)}
.fav-toggle.on .fav-ic{color:var(--accent)}
/* 後台優惠設定 */
.sale-set{background:var(--bg);border-radius:10px;padding:12px 14px}
.sale-disc{display:flex;align-items:center;gap:8px;margin-top:8px}
.sale-disc label{margin:0}
.sale-disc input{width:90px;border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-family:inherit}
.sale-disc .hint{font-size:12px;color:var(--muted)}
.sale-tag{display:inline-block;background:#fff0eb;color:var(--accent);font-size:11px;font-weight:700;padding:1px 6px;border-radius:5px;margin-left:6px}

/* ============ 商品管理：篩選 + 批次優惠 ============ */
.prod-search select{border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-family:inherit;font-size:14px;background:#fff}
.bulk-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--bg);
  border:1px solid var(--line);border-radius:12px;padding:10px 14px;margin:0 0 12px}
.bulk-bar .bulk-count{font-size:14px}
.bulk-bar label{font-size:13px;font-weight:700;display:flex;align-items:center;gap:6px}
.bulk-bar input[type=number]{width:90px;border:1px solid var(--line);border-radius:8px;padding:7px 10px;font-family:inherit}
.bulk-bar .mini-btn.teal{background:var(--teal);color:#fff;border-color:var(--teal)}
.bulk-bar .bulk-hint{font-size:12px;color:var(--muted)}
.ptbl .cbcol{width:38px;text-align:center}
.ptbl .rowcb,#checkAll{width:18px;height:18px;cursor:pointer}
@media(max-width:760px){
  .bulk-bar{position:sticky;top:0;z-index:5}
  .ptbl .cbcol{width:auto}
}

/* ============ 後台：漢堡選單 + 置底快捷列 + 分頁籤 + 1000 置中 ============ */
/* 編輯商品/設定頁：桌機 1000px 置中 */
.admin-narrow{max-width:1000px;margin:0 auto}

/* 漢堡按鈕（桌機隱藏） */
.hamburger{display:none;margin-left:auto;width:42px;height:42px;border-radius:10px;
  cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:4px}
.hamburger span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;transition:.2s}
.nav-toggle-cb:checked ~ .hamburger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle-cb:checked ~ .hamburger span:nth-child(2){opacity:0}
.nav-toggle-cb:checked ~ .hamburger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* 後台置底快捷列（桌機隱藏） */
.admin-bottom-nav{display:none}

/* 分頁籤（會員資料 / 訂單紀錄） */
.adm-tabs .tabradio{position:absolute;opacity:0;pointer-events:none}
.adm-tabs .tabbar{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:18px;overflow-x:auto}
.adm-tabs .tabbar label{padding:10px 18px;font-weight:700;font-size:14px;color:var(--muted);
  cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.adm-tabs .tabbar label:hover{color:var(--ink)}
.adm-tabs .tabpane{display:none}

#mtab-info:checked ~ .tabpane#pane-info,
#mtab-orders:checked ~ .tabpane#pane-orders,
#mtab-profile:checked ~ .tabpane#pane-profile,
#mtab-favs:checked ~ .tabpane#pane-favs,
#mtab-contact:checked ~ .tabpane#pane-contact {display:block}

#mtab-info:checked ~ .tabbar label[for="mtab-info"],
#mtab-orders:checked ~ .tabbar label[for="mtab-orders"],
#mtab-profile:checked ~ .tabbar label[for="mtab-profile"],
#mtab-favs:checked ~ .tabbar label[for="mtab-favs"],
#mtab-contact:checked ~ .tabbar label[for="mtab-contact"] {color:var(--teal);border-bottom-color:var(--teal)}

@media(max-width:820px){
	
  /* 後台改用漢堡選單 */
  body.admin{overflow-x:hidden}
  .admin-header .bar{display:flex;width:95%;max-width:100%;flex-wrap:wrap;align-items:center}
  .admin-header .brand{flex:0 1 auto;min-width:0;margin-right:auto}
  .admin-header .hamburger{display:flex;flex:0 0 42px;margin-left:0}
  .admin-header .nav{display:none;flex:0 0 100%;width:100%;min-width:0;flex-direction:column;align-items:stretch;gap:2px;margin:4px 0 6px}
  .admin-header .nav-toggle-cb:checked ~ .nav{display:flex}
  .admin-header .nav a{padding:12px 12px;border-radius:8px;font-size:15px}
  .admin-header .nav a.cta{text-align:center}

  /* 置底快捷列 */
  body.admin{padding-bottom:calc(62px + env(safe-area-inset-bottom))}
  .admin-bottom-nav{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;background:#fff;
    border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom);
    box-shadow:0 -2px 12px rgba(0,0,0,.05);
  }
  .admin-bottom-nav a{
    flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
    padding:8px 0 7px;color:var(--muted);text-decoration:none;font-size:11px;font-weight:600;
  }
  .admin-bottom-nav a svg{width:23px;height:23px}
  .admin-bottom-nav a.on{color:var(--teal)}
  .admin-bottom-nav .bn-ic{position:relative;display:block}
  
  .gal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
}

/* ============ 後台圖庫 ============ */
.gallery-upload{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.up-drop{flex:1;min-width:220px;display:flex;align-items:center;justify-content:center;gap:8px;
  border:2px dashed var(--line);border-radius:12px;padding:18px;cursor:pointer;color:var(--muted);
  font-weight:600;background:var(--bg);text-align:center}
.up-drop:hover{border-color:var(--teal);color:var(--ink)}
.up-drop input[type=file]{max-width:60%}
.gal-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--bg);
  border:1px solid var(--line);border-radius:12px;padding:10px 14px;margin:0 0 14px}
.gal-bar .gal-n{font-size:14px}
.mini-btn.danger{background:#fff;border:1px solid #f3c0b6;color:var(--accent)}
.mini-btn.danger:hover{background:#fff0eb}
.gal-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.gal-item{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;position:relative;display:flex;flex-direction:column}
.gal-pick{position:absolute;top:8px;left:8px;z-index:2;background:rgba(255,255,255,.9);border-radius:6px;padding:2px;line-height:0}
.gal-pick input{width:18px;height:18px;cursor:pointer}
.gal-thumb{aspect-ratio:1/1;background:var(--bg);display:flex;align-items:center;justify-content:center;overflow:hidden}
.gal-thumb img{width:100%;height:100%;object-fit:cover}
.gal-copy{border-radius:0;border:0;border-top:1px solid var(--line);width:100%}
.gal-item .gal-copy:hover{background:var(--bg)}

/* 商品編輯：圖庫挑選 + 主圖預覽 */
.img-preview{margin-top:10px}
.img-preview img{max-height:120px;max-width:160px;border:1px solid var(--line);border-radius:8px;padding:4px;background:#fff;object-fit:contain}
.gallery-pick{background:var(--bg);border-radius:12px;padding:12px 14px}
.gp-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.gp-link{font-size:13px;color:var(--teal);font-weight:700}
.gp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;max-height:340px;overflow:auto;padding:2px}
.gp-item{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.gp-thumb{position:relative;aspect-ratio:1/1;background:var(--bg);display:flex;align-items:center;justify-content:center;overflow:hidden;width:100%;padding:0;border:0;border-radius:0;cursor:pointer}
.gp-thumb img{width:100%;height:100%;object-fit:cover}
.gp-select-label{display:none;position:absolute;right:7px;bottom:7px;padding:4px 7px;border-radius:999px;background:rgba(15,118,110,.92);color:#fff;font-size:11px;font-weight:700;line-height:1.2;pointer-events:none}
.gp-item.is-main{border-color:var(--teal);box-shadow:0 0 0 2px rgba(15,118,110,.2)}
.gp-item.is-main .gp-select-label{display:block}
.gp-btns{display:flex;flex-direction:column}
.gp-btns .mini-btn{border-radius:0;border:0;border-top:1px solid var(--line);width:100%;font-size:12px}
.gp-btns .mini-btn:hover{background:var(--bg)}

@media(max-width:720px){
  .gallery-pick{padding:10px}
  .gp-head{align-items:flex-start;flex-wrap:wrap}
  .gp-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-auto-rows:max-content;
    align-items:start;
    max-height:70vh;
    gap:10px;
    overflow-y:auto;
    overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
  }
  .gp-item{display:flex;min-width:0;flex-direction:column;align-self:start}
  .gp-thumb{display:block;flex:none;width:100%;height:auto;min-height:0;aspect-ratio:1 / 1}
  .gp-thumb img{display:block;width:100%;height:100%;object-fit:cover}
  .gp-select-label{display:block}
  .gp-btns{display:grid !important;grid-template-columns:1fr 1fr;flex:0 0 auto}
  .gp-btns .mini-btn{
    display:block !important;
    min-width:0;
    min-height:40px;
    padding:7px 4px;
    line-height:1.25;
    white-space:normal;
  }
  .gp-btns .mini-btn + .mini-btn{border-left:1px solid rgba(255,255,255,.35)}
}


input{width:120px;border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-family:inherit;font-size:14px}

/* 首頁佈局：桌機左側分類，右側商品 */
.shop-layout {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}
.shop-sidebar {
  width: 200px;
  flex-shrink: 0;
  display: none; /* 預設手機版隱藏 */
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
  position: sticky;
  top: 20px; /* 捲動時固定在畫面上方 */
}
.shop-sidebar h3 {
  margin: 0 0 12px 0;
  font-size: 16px;
}
.shop-sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.shop-sidebar a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  color: var(--ink);
  text-decoration: none;
  border-radius: 8px;
  transition: background-color 0.2s;
  font-size: 14px;
}
.shop-sidebar-count {
  flex: 0 0 auto;
  min-width: 22px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--teal-softer, #e7f6f5);
  color: var(--muted);
  font-size: 12px;
  line-height: 20px;
  text-align: center;
}
.shop-sidebar a.active .shop-sidebar-count {
  background: var(--teal-soft, #d6efed);
  color: var(--teal);
}
.shop-sidebar a:hover {
  background-color: var(--bg);
}
.shop-sidebar a.active {
  background-color: var(--teal-soft, #d6efed);
  color: var(--teal);
  font-weight: 700;
}
.shop-main {
  flex: 1;
  min-width: 0; /* 防止網格撐破 */
}
.shop-support-links{margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.shop-support-links h3{margin-bottom:8px}
.shop-support-links ul{gap:3px}
.shop-support-links a{justify-content:flex-start;padding:7px 12px}

/* 支援中心內容頁 */
.support-page-wrap{max-width:920px;margin:28px auto 56px}
.support-page-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px 32px;box-shadow:var(--shadow)}
.support-page-card h1{margin:0 0 22px;font-size:28px;line-height:1.35}
.support-page-card .ck-content{min-width:0;overflow-wrap:anywhere}
.support-page-card .ck-content img{display:block;max-width:100%!important;height:auto!important}
.support-page-card .ck-content figure{max-width:100%!important;margin-left:0;margin-right:0}
@media(max-width:820px){
  .support-page-wrap{margin:16px 10px 32px}
  .support-page-card{padding:20px 18px;border-radius:14px}
  .support-page-card h1{font-size:23px;margin-bottom:16px}
}

@media (min-width: 768px) {
  .shop-sidebar {
    display: block; /* 桌機顯示 */
  }
  body:not(.admin) .toolbar select[name="cat"] {
    display: none; /* 桌機隱藏原本的下拉選單 */
  }
  
  /* 隱藏上方導覽列的訊息連結 */
  .desktop-nav a[href="messages.php"] {
    display: none;
  }
}
@media (max-width: 767px) {
footer.site-foot{ display:none;}}



/* 通知下拉選單 */
.nav-item-dropdown {
  position: relative;
  display: inline-block;
  padding: 10px 0; /* 增加感應區域 */
  margin: -10px 0;
}
.dropdown-menu.notif-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  right: -50px;
  width: 320px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  border-radius: 8px;
  z-index: 100;
  overflow: hidden;
}
.nav-item-dropdown:hover .dropdown-menu.notif-dropdown {
  display: block;
}
.dropdown-menu.notif-dropdown::before {
  content: '';
  position: absolute;
  top: -6px; right: 70px;
  border-width: 0 6px 6px 6px;
  border-style: solid;
  border-color: transparent transparent #fff transparent;
  z-index: 10;
}
.dropdown-menu.notif-dropdown::after {
  content: '';
  position: absolute;
  top: -7px; right: 69px;
  border-width: 0 7px 7px 7px;
  border-style: solid;
  border-color: transparent transparent var(--line) transparent;
  z-index: 9;
}
.nd-head {
  padding: 12px 16px;
  background: #fafafa;
  font-weight: 700;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
}
.nd-list {
  max-height: 360px;
  overflow-y: auto;
}
.nd-empty {
  padding: 30px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}
.nd-item {
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink);
  transition: background 0.2s;
}
.nd-item:hover {
  background: var(--bg);
}
.nd-item.unread {
  background: #fff4eb;
}
.nd-item.unread:hover {
  background: #ffe3d1;
}
.nd-ic {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  background: var(--accent);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nd-ic svg {
  width: 16px;
  height: 16px;
}
.nd-content {
  flex: 1;
  min-width: 0;
}
.nd-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 3px;
}
.nd-body {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.3;
  font-weight: 500!important;
  word-break: break-all; /* 避免過長的英文或數字撐開版面 */
}
.nd-more {
  display: block;
  text-align: center;
  padding: 12px;
  font-size: 14px;
  text-decoration: none;
  color: var(--teal);
  background: #fafafa;
  font-weight: 600;
}
/* 懸浮聊天視窗 */
.chat-widget-container {
  display: none; /* 預設手機版隱藏 */
}

@media (min-width: 768px) {
  .chat-widget-container {
    display: block;
    position: fixed;
    bottom: 0px;
    right: 24px;
    z-index: 1000;
  }
  
  .chat-toggle-btn {
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 8px 8px 0 0;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    gap: 8px;
    position: absolute;
    bottom: 0;
    right: 0;
    transition: background 0.2s;
	width:100px;
  }
  .chat-toggle-btn:hover {
    background: #333;
  }
  
  .chat-window {
    position: absolute;
    bottom: 40px;
    right: 0;
    width: 340px;
    height: 480px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px 12px 0 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .chat-window.split {
    width: 600px;
    flex-direction: row;
  }
  
  .cw-sidebar {
    width: 220px;
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    background: #fff;
  }
  .cw-side-head {
    padding: 12px 16px;
    font-weight: 700;
    border-bottom: 1px solid var(--line);
    background: #fafafa;
    color: var(--muted);
    font-size: 14px;
  }
  .cw-thread-list {
    flex: 1;
    overflow-y: auto;
  }
  .cw-thread-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
    cursor: pointer;
    transition: background 0.2s;
  }
  .cw-thread-item:hover {
    background: var(--bg);
  }
  .cw-thread-item.active {
    background: #fff5f1;
    border-right: 3px solid var(--accent);
  }
  .cw-ti-av {
    width: 36px; height: 36px;
    background: var(--accent);
    color: #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .cw-ti-img {
    width: 36px; height: 36px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--line);
    flex-shrink: 0;
  }
  .cw-ti-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .cw-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  
  .cw-head {
    background: var(--bg);
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .cw-close {
    background: transparent;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: var(--muted);
    padding: 0;
  }
  
  .cw-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    background: #f4f5f7;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  
  .cw-foot {
    border-top: 1px solid var(--line);
    padding: 10px;
    background: #fff;
  }
  .cw-foot form {
    display: flex;
    gap: 8px;
  }
  .cw-foot input {
    flex: 1;
    min-width: 0;
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: 20px;
    font-size: 14px;
  }
  .cw-send {
    background: transparent;
    border: none;
    color: var(--accent);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
  }
  
  .chat-msg {
    display: flex;
    flex-direction: column;
    max-width: 80%;
  }
  .chat-msg.user {
    align-self: flex-end;
    align-items: flex-end;
  }
  .chat-msg.admin {
    align-self: flex-start;
    align-items: flex-start;
  }
  .chat-bubble {
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.4;
  }
  .chat-msg.user .chat-bubble {
    background: #d1f4e0;
    color: var(--ink);
    border-bottom-right-radius: 4px;
  }
  .chat-msg.admin .chat-bubble {
    background: #fff;
    color: var(--ink);
    border: 1px solid var(--line);
    border-bottom-left-radius: 4px;
  }
  .chat-time {
    font-size: 11px;
    color: #999;
    margin-top: 4px;
  }
}
/* Thumbnail slider */
.gallery-slider {
  position: relative;
  margin-top: 12px;
  display: block;
}
.gallery .thumbs {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  flex-wrap: nowrap;
  width: 100%;
  min-width: 0;
}
.gallery .thumbs::-webkit-scrollbar {
  display: none;
}
.slider-btn {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--line);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  color: var(--ink);
}
.slider-btn.prev { left: 4px; transform: translateY(-50%); }
.slider-btn.next { right: 4px; transform: translateY(-50%); }
.slider-btn:hover { color: var(--teal); border-color: var(--teal); }
.thumb-btn { flex: 0 0 70px; }

/* Social Share & Fav */
.social-fav-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 24px;
  flex-wrap: wrap;
}
.share-links {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  color: var(--ink);
}
.share-links a {
  display: inline-flex;
  text-decoration: none;
}
.share-links img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}
.fav-btn-style {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 15px;
  color: var(--ink);
  font-family: inherit;
}
.fav-btn-style .fav-ic {
  font-size: 24px;
  color: #ff424f; /* Shopee like pink/red */
}
.fav-btn-style.on .fav-ic {
  color: #ff424f; /* Filled state */
}
.divider {
  width: 1px;
  height: 24px;
  background: var(--line);
}

/* Mobile Product Page Updates */
.desktop-only { display: block; }
.mobile-only { display: none; }

@media(max-width: 820px) {
  .desktop-only { display: none !important; }
  .mobile-only { display: block; }
  
  /* Make gallery full width */
  .detail {
    margin: 0 0 58px;
    gap: 16px;
  }
  .gallery.mobile-only {
    margin-left: 0px;
    margin-right: 0px;
    position: relative;
    margin-bottom: 0;
  }
  
  .mobile-main-slider {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    position: relative;
    background: #f0f0f0;
  }
  .mobile-main-slider::-webkit-scrollbar { display: none; }
  
  .mobile-slide {
    flex: 0 0 100%;
    width: 100%;
    scroll-snap-align: start;
    position: relative;
    aspect-ratio: 1; /* Square images like Shopee */
  }
  .mobile-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  
  .mobile-back-btn {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(0,0,0,0.4);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    cursor: pointer;
  }
  
  .mobile-img-counter {
    position: absolute;
    bottom: 16px;
    right: 16px;
    background: rgba(0,0,0,0.5);
    color: #fff;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 13px;
    z-index: 10;
  }
  
  .mobile-color-thumbs {
    display: flex;
    gap: 10px;
    padding: 12px 20px;
    overflow-x: auto;
    scrollbar-width: none;
    border-bottom: 1px solid var(--line);
    background: #fff;
  }
  .mobile-color-thumbs::-webkit-scrollbar { display: none; }
  
  .mc-thumb {
    flex: 0 0 50px;
    width: 50px;
    height: 50px;
    border-radius: 4px;
    border: 1px solid var(--line);
    overflow: hidden;
    cursor: pointer;
  }
  .mc-thumb.active {
    border-color: #ee4d2d;
    border-width: 2px;
  }
  .mc-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  /* Product bottom bar */
  .product-bottom-bar.mobile-only { display: flex !important; z-index: 9999 !important;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: calc(58px + env(safe-area-inset-bottom));
    align-items: center;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    background: #fff;
    border-top: 1px solid var(--line);
    box-shadow: 0 -2px 10px rgba(20,30,50,.06);
  }
  
  .pbb-chat {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex: 0 0 19%;
    height: 100%;
    color: var(--product-bar-chat, #ee4d2d);
  }

  .pbb-chat::after {
    content: "";
    position: absolute;
    top: 4px;
    right: 0;
    bottom: 4px;
    width: 1px;
    background: #d8d8d8;
  }

  .pbb-chat svg {
    width: 28px;
    height: 28px;
    stroke-width: 2;
  }
  
  .pbb-add-cart {
    flex: 0 0 19%;
    height: 100%;
    background: #fff;
    color: var(--product-bar-cart-text, #ee4d2d);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }

  .pbb-add-cart .ic {
    width: 29px;
    height: 29px;
    stroke-width: 2;
  }

  .pbb-chat span,
  .pbb-add-cart span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
  }
  
  .pbb-buy-now {
    flex: 1 1 62%;
    align-self: stretch;
    background: var(--product-bar-buy, #ee4d2d);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 0;
    font-weight: 700;
  }

  .pbb-buy-now::before {
    content: "立即購買";
    font-size: 18px;
  }
  
  body.product-page .bottom-nav {
    display: none !important;
  }

  body.product-page .product-comments {
    display: none !important;
  }
  

  /* Mobile Chat Window Fixes */
  .chat-widget-container {
    display: block !important;
  }
  .chat-toggle-btn {
    display: none !important; /* Hide original toggle button on mobile */
  }
  .chat-window {
    position: fixed;
    top: var(--chat-viewport-top, 0px) !important;
    bottom: auto !important;
    left: 0;
    right: 0;
    width: 100% !important;
    height: var(--chat-viewport-height, 100dvh) !important;
    max-height: var(--chat-viewport-height, 100dvh) !important;
    background: #fff;
    flex-direction: column !important;
    border-radius: 0 !important; /* Full screen doesn't need radius */
    box-shadow: none !important;
    z-index: 9999 !important; /* Over product bottom bar */
    overflow: hidden !important;
    overscroll-behavior: none;
  }
  html.chat-open,
  html.chat-open body {
    overflow: hidden !important;
    overscroll-behavior: none;
  }
  .chat-window .cw-sidebar {
    width: 100%;
    height: 100px;
    flex: 0 0 100px;
    border-bottom: 1px solid var(--line);
    border-right: none;
    flex-direction: column;
    padding: 0;
  }
  .chat-window .cw-side-head {
    display: none;
  }
  .chat-window .cw-thread-list {
    display: flex;
    flex-direction: row;
    padding: 8px;
    overflow-y: hidden;
    overflow-x: auto;
    height: 100%;
    align-items: center;
  }
  .chat-window .cw-thread-item {
    flex-direction: column;
    padding: 8px;
    min-width: 70px;
    justify-content: center;
    border-radius: 8px;
  }
  .chat-window .cw-thread-item.active {
    background: #eef8f5;
  }
  .chat-window .cw-ti-title {
    font-size: 11px;
    text-align: center;
    margin-top: 4px;
    margin-left: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  

  /* Mobile Chat UI Improvements */
  .chat-window .cw-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0; /* Important for flex child scrolling */
  }
  .chat-window .cw-head {
    background: var(--bg);
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .chat-window .cw-close {
    background: transparent;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: var(--muted);
  }
  .chat-window .cw-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    background: #fafafa;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .chat-window .cw-foot {
    flex: 0 0 auto;
    border-top: 1px solid var(--line);
    padding: 12px 16px max(12px, env(safe-area-inset-bottom));
    background: #fff;
    position: relative;
    z-index: 2;
  }
  .chat-window .cw-foot form {
    display: flex;
    gap: 10px;
    margin: 0;
    width: 100%;
    min-width: 0;
  }
  .chat-window .cw-foot input {
    flex: 1;
    min-width: 0;
    width: 0;
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: 20px;
    outline: none;
    font-size: 16px;
  }
  .chat-window .cw-send {
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .chat-window .chat-msg {
    display: flex;
    flex-direction: column;
    max-width: 80%;
  }
  .chat-window .chat-msg.user {
    align-self: flex-end;
    align-items: flex-end;
  }
  .chat-window .chat-msg.admin {
    align-self: flex-start;
    align-items: flex-start;
  }
  .chat-window .chat-bubble {
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.4;
  }
  .chat-window .chat-msg.user .chat-bubble {
    background: #d1f4e0;
    color: var(--ink);
    border-bottom-right-radius: 4px;
  }
  .chat-window .chat-msg.admin .chat-bubble {
    background: #fff;
    color: var(--ink);
    border: 1px solid var(--line);
    border-bottom-left-radius: 4px;
  }
  .chat-window .chat-time {
    font-size: 11px;
    color: #999;
    margin-top: 4px;
  }
  

  /* Mobile Chat List/Thread Toggle */
  .chat-window .cw-sidebar {
    width: 100% !important;
    height: 100% !important;
    flex: 1 !important;
    border: none !important;
    flex-direction: column !important;
  }
  .chat-window .cw-side-head {
    display: block !important;
    text-align: center;
    border-bottom: 1px solid var(--line);
    padding: 10px 72px !important;
    min-height: 46px;
  }
  .chat-window .cw-my-comments {
    display: inline-flex !important;
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--teal);
    font-size: 13px;
    font-weight: 700;
  }
  .chat-window .cw-thread-list {
    flex-direction: column !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  .chat-window .cw-thread-item {
    display: flex !important; /* Ensure it is flex */
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: center !important;
    padding: 12px 16px !important;
    border-bottom: 1px solid var(--line);
    width: 100%;
    box-sizing: border-box;
  }
  .chat-window .cw-ti-title {
    font-size: 15px !important;
    text-align: left !important;
    margin-top: 0 !important;
    margin-left: 10px !important;
    white-space: normal !important;
    overflow: visible !important;
  }
  .chat-window .cw-main {
    display: none !important; /* Hide chat thread by default */
  }
  
  /* When viewing a specific chat thread */
  .chat-window.view-chat .cw-sidebar {
    display: none !important;
  }
  .chat-window.view-chat .cw-main {
    display: flex !important;
  }
  
  /* Desktop resets just in case */
  @media(min-width: 821px) {
    .chat-window .cw-back { display: none !important; }
    .chat-window.view-chat .cw-sidebar { display: flex !important; }
  }

  /* Mobile Chat Thread List Images */
  .chat-window .cw-ti-img {
    width: 40px !important;
    height: 40px !important;
    object-fit: cover !important;
    border-radius: 8px !important;
    border: 1px solid var(--line) !important;
    flex-shrink: 0 !important;
  }
  .chat-window .cw-ti-av {
    width: 40px !important;
    height: 40px !important;
    background: var(--accent) !important;
    color: #fff !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }
  .chat-window .cw-thread-item {
    align-items: center !important; /* Ensure image and text are aligned vertically */
  }
  .chat-window .cw-ti-title {
    margin: 0 0 0 12px !important; /* Proper margin between image and text */
  }
}

/* Checkout accessibility and purchase reassurance */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:3px solid color-mix(in srgb,var(--accent) 35%,white);outline-offset:2px
}
.checkout-fieldset{min-width:0;margin:0 0 16px;padding:0;border:0}
.checkout-fieldset legend{margin-bottom:8px;font-size:13px;font-weight:700;color:var(--ink)}
.checkout-error-summary{margin-bottom:16px}
.checkout-error-summary:focus{outline:3px solid #fecaca;outline-offset:2px}
.purchase-trust{display:grid;gap:10px;margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.purchase-trust-item{display:flex;align-items:flex-start;gap:9px;color:var(--muted);font-size:12.5px;line-height:1.45}
.purchase-trust-item strong,.purchase-trust-item span{display:block}
.purchase-trust-item strong{margin-bottom:1px;color:var(--ink);font-size:13px}
.purchase-trust-check{display:flex!important;flex:0 0 22px;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--teal-softer);color:var(--teal);font-weight:800}
.ci-img-placeholder{display:block;flex:none;width:72px;height:72px;border-radius:10px;background:#eef1f5}

/* Product Title Row and Actions */
.p-title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 12px;
}

/* ============ 商品評價 ============ */
.product-reviews{margin:0px auto 70px}
.product-reviews>h2{font-size:16px;margin:0 0 16px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.review-summary{display:flex;align-items:center;gap:28px;padding:22px;    background: #f8f8f8;
    border: 1px solid #ebebeb;border-radius:12px}
.review-average{min-width:145px;text-align:center;color:var(--accent)}
.review-average strong{font-size:34px;line-height:1}
.review-average>span{font-size:16px;font-weight:700}
.review-stars{display:flex;gap:2px;justify-content:center;margin-top:8px}
.review-stars span{color:#d7dce3;font-size:23px;line-height:1}
.review-stars span.on{color:#f59e0b}
.review-stars.small{justify-content:flex-start;margin-top:5px}
.review-stars.small span{font-size:17px}
.review-filters{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.review-filters a{display:inline-flex;align-items:center;justify-content:center;min-width:84px;min-height:44px;padding:9px 14px;border:1px solid var(--line);border-radius:9px;background:#fff;font-size:14px;line-height:1.25;cursor:pointer;user-select:none}
.review-filters a:hover{border-color:var(--accent);color:var(--accent);background:#fffaf8}
.review-filters a:focus-visible{outline:3px solid rgba(255,91,46,.22);outline-offset:2px}
.review-filters a.on{border-color:var(--accent);color:var(--accent);font-weight:700}
.review-list{display:grid;gap:16px;margin-top:20px;background:transparent;border:0;border-radius:0;overflow:visible}
.review-card{padding:20px;border:1px solid var(--line);border-radius:12px;background:#fff}
.review-card:last-child{border-bottom:1px solid var(--line)}
.review-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.review-spec{margin-top:8px}
.review-body{margin:12px 0 0;line-height:1.7;white-space:normal;word-break:break-word}
.review-photos,.review-image-preview{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.review-photos img,.review-image-preview img{width:100px;height:100px;object-fit:cover;border-radius:8px;border:1px solid var(--line);display:block}
.review-empty{margin-top:18px}

.review-form-wrap{max-width:720px;margin:0 auto 60px}
.review-product-card{display:flex;align-items:center;gap:14px;padding:14px;background:#fff;border:1px solid var(--line);border-radius:12px}
.review-product-card img{width:72px;height:72px;object-fit:cover;border-radius:9px;border:1px solid var(--line)}
.review-form{margin-top:16px}
.review-rating-field{border:0;padding:0;margin:0 0 20px}
.review-rating-field legend{font-size:14px;font-weight:700;margin-bottom:9px}
.required{color:var(--accent)}
.review-star-input{display:inline-flex;flex-direction:row-reverse;justify-content:flex-end;gap:4px}
.review-star-input input{position:absolute;opacity:0;pointer-events:none}
.review-star-input label{font-size:38px;line-height:1;color:#d7dce3;cursor:pointer}
.review-star-input input:checked~label,.review-star-input input:checked+label,
.review-star-input label:hover,.review-star-input label:hover~label{color:#f59e0b}
.review-form textarea{width:100%;resize:vertical;border:1px solid var(--line);border-radius:10px;padding:12px;font:inherit}
.review-form input[type=file]{width:100%;border:1px dashed var(--line);border-radius:10px;padding:12px;background:#fff}
.member-review-actions{display:flex;align-items:center;gap:10px}
.review-action-link{padding:5px 10px;border:1px solid var(--accent);border-radius:7px;color:var(--accent);font-size:12px;font-weight:700;white-space:nowrap}
.reviewed-label{padding:5px 9px;border-radius:7px;background:#ecfdf5;color:#047857;font-size:12px;font-weight:700;white-space:nowrap}
.admin-review-list{display:grid;gap:14px}
.admin-review-card{margin:0;background:#fff}
.admin-review-card.is-hidden{opacity:.65;background:#f8fafc}

@media(max-width:820px){
  .product-content-card{margin:16px auto;padding:16px 12px}
  .product-reviews{margin:16px auto 72px}
  .review-summary{align-items:flex-start;gap:16px;padding:16px}
  .review-average{min-width:92px}
  .review-average strong{font-size:28px}
  .review-stars span{font-size:18px}
  .review-filters{gap:6px}
  .review-filters a{min-width:72px;min-height:40px;padding:7px 10px;font-size:12px}
  .review-card{padding:16px 12px}
  .review-photos img,.review-image-preview img{width:82px;height:82px}
  .review-form-wrap{padding:0 10px}
  .member-review-item{align-items:flex-start!important;gap:10px}
  .member-review-actions{flex-direction:column;align-items:flex-end;gap:6px}
}
.p-title-left {
  flex: 1;
}
.p-title-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  padding-top: 4px;
}
.action-icon-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 4px;
}
.action-icon-btn.on svg {
  fill: #ee4d2d;
}
.fav-count-num {
  font-size: 14px;
  color: var(--muted);
}

/* Share Sheet Overlay */
.share-sheet-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  z-index: 10000;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.share-sheet {
  background: #fff;
  border-radius: 16px 16px 0 0;
  padding: 24px 16px 16px;
  animation: slideUp 0.3s ease-out;
}
@keyframes slideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
.share-sheet-title {
  text-align: center;
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 20px;
}
.share-sheet-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px 8px;
  margin-bottom: 24px;
}
.ss-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--ink);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}
.ss-item img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 50%;
}
.ss-item span {
  font-size: 12px;
}
.ss-icon-circle {
  width: 48px;
  height: 48px;
  background: #f0f0f0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
}
.share-sheet-cancel {
  width: 100%;
  padding: 14px 0;
  background: #f0f0f0;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
}

@media(min-width: 821px) {
  .mobile-only-flex {
    display: none !important;
  }
}
@media(max-width: 820px) {
  body.product-page footer.site-foot {
    margin-bottom: 58px;
  }
}

/* Mobile Homepage Updates */
@media(max-width: 820px) {
  .toolbar {
    position: sticky;
    top: 56px;
    z-index: 28;
    background: #fff;
    margin: 0 !important;
    padding: 7px 10px !important;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 3px 8px rgba(20,30,50,.06);
  }
  .toolbar .search {
    display: flex;
    gap: 8px;
    width: 100%;
    margin: 0;
  }
  .toolbar .search input {
    flex: 1;
    min-width: 0;
  }
  .toolbar .search button {
    width: auto !important;
    flex-shrink: 0;
  }
  .mobile-cat-scroll {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    padding: 5px 10px 0px;
	margin-bottom: 8px;
    gap: 16px;
    background: #fff;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .mobile-cat-scroll::-webkit-scrollbar {
    display: none;
  }
  .mcs-item {
    font-size: 15px;
    color: var(--ink);
    text-decoration: none;
    padding: 8px 4px;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
  }
  .mcs-item:hover {
    border-bottom-color: #ee4d2d;
  }
  .mcs-item.active {
    color: #ee4d2d;
    font-weight: bold;
    border-bottom-color: #ee4d2d;
  }
}