/* ── /shop UI polish ──────────────────────────────────────────────
   Brand-consistent warm-gold treatment for the shop page, matching the
   /service polish. Scoped to body.shop-preview-page and loaded ONLY by
   shop.html, so shared style.css (.btn.primary, .card, #sideDeities …)
   is untouched on every other page.
   Phase 1: page surface + product cards + primary buttons + sold badge.
   Phase 2: hero heading + left sidebar category chips / tools.
   Phase 4: flashy micro-interactions (image zoom, button sheen).
   (Phase 3 sticky cart + toast live in js/shop-ui-polish.js, styled below.) */

/* ═══ Phase 1 — Page surface, cards, primary buttons + "sold" badge ═══ */

/* Warm the cool blue-grey page background (#f4f6fb → warm stone). */
body.shop-preview-page{ background:#f6f5f2; }

/* Product cards → warm-white gradient, gold hairline, soft warm shadow,
   gentle lift on hover. Covers both the normal grid and the hot grid. */
body.shop-preview-page .grid .card{
  background:linear-gradient(165deg, #fffdf8 0%, #fff8ee 100%);
  border:1px solid rgba(199,164,106,.3);
  box-shadow:0 10px 28px rgba(92,69,38,.1);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
body.shop-preview-page .grid .card:hover{
  border-color:rgba(176,129,54,.46);
  box-shadow:0 16px 38px rgba(92,69,38,.17);
  transform:translateY(-3px);
}
/* Hot cards keep a slightly stronger gold edge. */
body.shop-preview-page .grid.hot-grid .card{
  border-color:rgba(217,164,65,.5);
}

/* Unify the green-blue primary actions (查看詳情 / 加入購物車 …). */
body.shop-preview-page .btn.primary{
  position:relative;
  overflow:hidden;
  background:linear-gradient(135deg, #ffb347 0%, #f28c28 46%, #d97706 100%);
  border:1px solid rgba(166,96,20,.68);
  color:#fff;
  border-radius:999px;
  box-shadow:0 12px 24px rgba(231,137,30,.32);
  font-weight:800;
}
body.shop-preview-page .btn.primary:hover{
  filter:brightness(1.05);
  transform:translateY(-2px);
  border-color:rgba(166,96,20,.82);
  box-shadow:0 16px 30px rgba(231,137,30,.42);
}
/* Card CTA buttons are pinned to 12px inside .cta — re-assert the pill. */
body.shop-preview-page .grid .card .cta .btn.primary{
  border-radius:999px;
}
body.shop-preview-page .btn.primary:disabled{
  background:linear-gradient(135deg, #e8c9a0, #d9b487);
  border-color:rgba(166,96,20,.3);
  box-shadow:none;
}
/* The shared .btn:hover lifts the border to green — warm it up. */
body.shop-preview-page .btn:hover{
  border-color:rgba(199,164,106,.5);
}

/* "已售出 N" → gold-foil chip with a gilded dot (same as /service). */
body.shop-preview-page .card .meta .badge-sold{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:linear-gradient(135deg, #fffaf0, #f7ead0);
  border:1px solid rgba(199,164,106,.55);
  color:#6e5222;
  border-radius:10px;
  font-weight:800;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 4px 10px rgba(150,116,55,.12);
}
body.shop-preview-page .card .meta .badge-sold::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  flex:0 0 auto;
  background:linear-gradient(135deg, #d9a441, #b07f2a);
  box-shadow:0 0 0 2px rgba(217,164,65,.25);
}

/* ═══ Phase 2 — Hero heading + left sidebar ═══ */

/* SEO hero title: cool slate → warm deep brown-gold. */
body.shop-preview-page .shop-seo-intro h1{ color:#5b3d1a; }

/* Category chips (#sideDeities .side-cat-btn) — style.css paints them
   white/orange. Beat its [1,1,1] rule with body.shop-preview-page prefix. */
body.shop-preview-page #sideDeities .side-cat-btn{
  border:1px solid #f0d6a0;
  border-radius:12px;
  background:linear-gradient(135deg, #fffdf7 0%, #fff6de 58%, #f7ead0 100%);
  color:#7a5a2e;
  box-shadow:0 8px 16px rgba(180,137,53,.12), inset 0 1px 0 rgba(255,255,255,.9);
}
body.shop-preview-page #sideDeities .side-cat-btn:hover{
  border-color:#e8bf6e;
  box-shadow:0 12px 22px rgba(180,137,53,.18);
}
body.shop-preview-page #sideDeities .cats .list button.active,
body.shop-preview-page #sideDeities .side-cat-btn.active{
  border-color:#d9a441;
  color:#6e4a17;
  background:linear-gradient(135deg, #ffeecb 0%, #f7d99a 100%);
  box-shadow:0 12px 22px rgba(180,137,53,.24);
}

/* Tool links (美食/寺廟地圖 …) + dot + cart fab + section heading,
   mirroring the /service sidebar treatment. */
body.shop-preview-page #sideDeities .tool-link{
  border-color:#f0d6a0;
  background:linear-gradient(135deg, #fffdf7 0%, #fff6de 58%, #f7ead0 100%);
  color:#7a5a2e;
  box-shadow:0 10px 20px rgba(180,137,53,.12), inset 0 1px 0 rgba(255,255,255,.9);
}
body.shop-preview-page #sideDeities .tool-link:hover{
  border-color:#e8bf6e;
  box-shadow:0 14px 24px rgba(180,137,53,.18);
}
body.shop-preview-page .tool-link-dot{
  background:linear-gradient(135deg, #d9a441, #b07f2a);
  box-shadow:0 0 0 4px rgba(217,164,65,.16);
}
body.shop-preview-page #cartFab{
  border:1px solid rgba(199,164,106,.4);
  background:linear-gradient(135deg, #fffdf8, #fff3dd);
  color:#6b4d31;
}
body.shop-preview-page #cartFab:hover{ background:#fff5e1; }
body.shop-preview-page #sideDeities .tools-box h4{ color:#6e5222; }

/* ═══ Phase 4 — Flashy micro-interactions ═══ */
@media (prefers-reduced-motion: no-preference){
  /* Slow image zoom inside the (overflow-hidden) .pic on card hover. */
  body.shop-preview-page .card .pic img{
    transition:transform .5s cubic-bezier(.22,.61,.36,1);
  }
  body.shop-preview-page .grid .card:hover .pic img{
    transform:scale(1.06);
  }
  /* Gold sheen sweep across primary buttons on hover. */
  body.shop-preview-page .btn.primary::after{
    content:"";
    position:absolute; top:0; bottom:0; left:-60%; width:45%;
    background:linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
    transform:skewX(-18deg);
    pointer-events:none; opacity:0;
  }
  body.shop-preview-page .btn.primary:hover::after{
    animation:shopBtnSheen .6s ease;
  }
  @keyframes shopBtnSheen{
    from{ left:-60%; opacity:.9; }
    to{ left:130%; opacity:0; }
  }
}

/* ═══ Phase 3 styling — add-to-cart toast (shown by shop-ui-polish.js) ═══ */
.shop-toast{
  position:fixed; left:50%; bottom:calc(92px + env(safe-area-inset-bottom));
  transform:translateX(-50%) translateY(12px);
  z-index:61; display:inline-flex; align-items:center; gap:8px;
  padding:11px 20px; border-radius:999px;
  background:linear-gradient(135deg, #5b422b, #7a5a34); color:#ffe8c4;
  border:1px solid rgba(69,49,29,.5); box-shadow:0 14px 30px rgba(89,62,36,.34);
  font-weight:800; font-size:13.5px; opacity:0; pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
}
.shop-toast::before{
  content:"✓"; display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; border-radius:50%;
  background:linear-gradient(135deg, #ffb347, #d97706); color:#fff;
  font-size:11px; font-weight:900;
}
.shop-toast.is-on{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ═══ Phase 3 styling — mobile sticky cart bar (shown by shop-ui-polish.js) ═══ */
.shop-sticky-cart{
  position:fixed; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom));
  z-index:60; display:none; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 12px 10px 18px; border-radius:999px;
  border:1px solid rgba(69,49,29,.55);
  background:linear-gradient(135deg, rgba(58,42,24,.97) 0%, rgba(86,62,35,.97) 100%);
  box-shadow:0 18px 40px rgba(40,28,12,.45);
  opacity:0; transform:translateY(14px);
  transition:opacity .3s ease, transform .3s ease; pointer-events:none;
}
body.uc-mobile-nav-enabled .shop-sticky-cart{ bottom:calc(74px + env(safe-area-inset-bottom)); }
.shop-sticky-cart.is-on{ opacity:1; transform:none; pointer-events:auto; }
.shop-sticky-cart__text{
  min-width:0; display:flex; align-items:baseline; gap:6px;
  color:#ffeec9; font-size:13.5px; font-weight:800;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.shop-sticky-cart__count{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:20px; height:20px; padding:0 6px; border-radius:999px;
  background:linear-gradient(135deg, #ffb347, #d97706); color:#fff;
  font-size:12px; font-weight:900;
}
.shop-sticky-cart__btn{
  flex:0 0 auto; border:1px solid rgba(166,96,20,.68); border-radius:999px;
  padding:9px 18px; background:linear-gradient(135deg, #ffb347 0%, #f28c28 46%, #d97706 100%);
  color:#fff; font-size:13.5px; font-weight:900; cursor:pointer; font-family:inherit;
  white-space:nowrap; box-shadow:0 10px 20px rgba(231,137,30,.4);
}
@media (min-width:769px){ .shop-sticky-cart{ display:none !important; } }
@media (max-width:768px){ .shop-sticky-cart{ display:flex; } }