/* ============================================================
   Front-end UI templates
   Scoped by body.theme-<id>. theme-classic keeps style.css look.
   ============================================================ */

/* ===== theme-elegant : dark gold, centered stacked header, underline nav ===== */
body.theme-elegant{
  --brand:#c9a86a;--brand-dark:#a8853f;--brand-2:#e0c48f;
  --price:#b8860b;--bg:#f6f3ec;--card:#fffdf8;--line:#e7e0d2;--text:#2b2823;--muted:#93876f;--r:14px;
}
body.theme-elegant .topbar{background:#1c1b22;color:#cbc3b3}
body.theme-elegant .topbar-slogan{color:#e6ddcb}
body.theme-elegant .topbar-hi{color:#e0c48f}
body.theme-elegant .topbar-links a{color:#cbc3b3}
body.theme-elegant .topbar-links a:hover{color:#fff}
body.theme-elegant .shop-header{background:linear-gradient(180deg,#fffdf8,#f6f3ec);border-bottom:1px solid #e7e0d2}
body.theme-elegant .logo-mark{background:linear-gradient(135deg,#1c1b22,#3a3730);color:#e0c48f}
body.theme-elegant .logo-text b{color:#1c1b22}
body.theme-elegant .search-bar{border:1px solid #d8cdb4;box-shadow:0 6px 20px rgba(160,130,60,.08)}
body.theme-elegant .search-bar .search-icon{color:#1c1b22}
body.theme-elegant .cart-entry{border-color:#e0d6c2;color:#5c5342}
body.theme-elegant .cart-text i{background:#1c1b22;color:#e0c48f}
body.theme-elegant .hot-words b{color:#5c5342}
body.theme-elegant .cat-nav{background:#fffdf8;border-top:1px solid #e7e0d2;border-bottom:1px solid #e7e0d2}
body.theme-elegant .cat-nav a{color:#5c5342;padding:13px 20px;border-bottom:2px solid transparent}
body.theme-elegant .cat-nav a:hover,body.theme-elegant .cat-nav a.on{background:transparent;color:#a8853f;border-bottom-color:#c9a86a}
body.theme-elegant .btn,body.theme-elegant .pill{border-radius:999px}
body.theme-elegant .btn.primary{background:linear-gradient(135deg,#c9a86a,#a8853f)}
body.theme-elegant .btn.primary:hover{box-shadow:0 8px 22px rgba(168,133,63,.35)}
body.theme-elegant .prod-card,body.theme-elegant .quick-cat,body.theme-elegant .panel,body.theme-elegant .account-nav-card,body.theme-elegant .banner-nav-card{border-radius:16px}
body.theme-elegant .quick-cat i{background:linear-gradient(135deg,#f3ead6,#e8d9b6)}
body.theme-elegant .promo-card{border-radius:14px;background:linear-gradient(135deg,#fbf7ee,#f3ead6);border-color:#e8dcc2}
body.theme-elegant .promo-card.alt{background:linear-gradient(135deg,#f5f1e8,#efe6d2);border-color:#e6dcc4}
body.theme-elegant .promo-card b{color:#8a6a1f}
body.theme-elegant .promo-card span{color:#9a8560}
body.theme-elegant .home-cta{background:linear-gradient(135deg,#1c1b22,#3a3730);border-radius:18px}
body.theme-elegant .home-cta h2{color:#e0c48f}
body.theme-elegant .mid-band{background:#fffdf8}
body.theme-elegant .mid-band i{color:#c9a86a}
body.theme-elegant .sec-head{border-bottom:1px solid #e7e0d2}
body.theme-elegant .sec-head h2{letter-spacing:.06em}
body.theme-elegant .prod-tags span{background:rgba(28,27,34,.86)}
body.theme-elegant .prod-buy .now{background:linear-gradient(135deg,#c9a86a,#a8853f)}
body.theme-elegant .prod-buy .add{border-color:#c9a86a;color:#a8853f}
body.theme-elegant .prod-buy .add:hover{background:#c9a86a;color:#fff}
body.theme-elegant .prod-name:hover{color:#a8853f}
body.theme-elegant .price-box{background:linear-gradient(135deg,#fbf7ee,#f3ead6);border-color:#e8dcc2}
body.theme-elegant .price-row .save{background:#f0e6cf;color:#8a6a1f}
body.theme-elegant .detail-tag{background:#1c1b22;color:#e0c48f}
body.theme-elegant .tab-nav{border-bottom-color:#e7e0d2}
body.theme-elegant .tab-nav button.on{background:#1c1b22;color:#e0c48f}
body.theme-elegant .detail-section h2{border-left-color:#c9a86a}
body.theme-elegant .address-box h3,body.theme-elegant .order-items h3{border-left-color:#c9a86a}
body.theme-elegant .checkout-steps span.on{background:linear-gradient(135deg,#1c1b22,#3a3730)}
body.theme-elegant .service-float{background:linear-gradient(135deg,#1c1b22,#3a3730);box-shadow:0 10px 28px rgba(28,27,34,.4)}
body.theme-elegant .mobile-tabbar a.on{color:#a8853f}
body.theme-elegant .mobile-tabbar a.on:before{background:linear-gradient(135deg,#c9a86a,#a8853f)}
body.theme-elegant .im-faq-chip{background:#fbf7ee;border-color:#e0d3b4;color:#8a6a1f}
body.theme-elegant .im-faq-chip.im-faq-agent{background:linear-gradient(135deg,#c9a86a,#a8853f)}
body.theme-elegant .im-faq-chip:hover{background:#c9a86a;color:#fff;border-color:#c9a86a}
body.theme-elegant .im-message.user{background:#fbf7ee;border-color:#e6dcc2}
body.theme-elegant .im-message b{color:#a8853f}
body.theme-elegant .im-form{border-color:#e7e0d2}
body.theme-elegant .badge{background:#fbf7ee;border-color:#e6dcc2;color:#a8853f}
body.theme-elegant .order-status{background:#fbf7ee;border-color:#e6dcc2;color:#a8853f}
body.theme-elegant .order-card-head{background:#faf8f2}
body.theme-elegant .order-tabs a.on{color:#a8853f;border-bottom-color:#a8853f}
body.theme-elegant .auth{border-radius:20px}
body.theme-elegant .auth-logo{background:linear-gradient(135deg,#1c1b22,#3a3730);color:#e0c48f}
body.theme-elegant .profile .avatar,body.theme-elegant .avatar{background:linear-gradient(135deg,#1c1b22,#3a3730);color:#e0c48f}
body.theme-elegant .admin-tabs a.active,body.theme-elegant .admin-tabs a:hover{color:#a8853f}
body.theme-elegant .footer{background:#1c1b22}
body.theme-elegant .shop-footer{background:#1c1b22;border-top:0;color:#cbc3b3}
body.theme-elegant .promise-band{background:#232129;border-bottom-color:#312e26}
body.theme-elegant .promise-inner span{color:#a89e8b}
body.theme-elegant .promise-inner span b{color:#e7dcc4}
body.theme-elegant .footer-col h4{color:#e7dcc4}
body.theme-elegant .footer-col a,body.theme-elegant .footer-col span{color:#a89e8b}
body.theme-elegant .footer-col a:hover{color:#e0c48f}
body.theme-elegant .footer-legal{border-top-color:#312e26;color:#a89e8b}
body.theme-elegant .footer-legal a{color:#a89e8b}
body.theme-elegant .footer-legal a:hover{color:#e0c48f}
body.theme-elegant footer .footer-line{color:#a89e8b}
body.theme-elegant .footer-qr img{border-color:#312e26;background:#232129}
body.theme-elegant .footer-qr .qr-ph{border-color:#4a4536;background:#232129;color:#c9a86a}
body.theme-elegant .pay-icon{background:#232129;border-color:#312e26;color:#a89e8b}

/* ===== theme-fresh : green, card header, chip nav, soft shadows ===== */
body.theme-fresh{
  --brand:#0f9d6b;--brand-dark:#0b7d54;--brand-2:#3ecf8e;
  --price:#e8590c;--bg:#f1faf5;--card:#ffffff;--line:#dcece2;--text:#22312b;--muted:#7f9a8d;--r:14px;
}
body.theme-fresh .topbar{background:#0b3d2b;color:#c8e6d6}
body.theme-fresh .topbar-slogan{color:#e2f5ea}
body.theme-fresh .topbar-hi{color:#9ff0c4}
body.theme-fresh .topbar-links a{color:#c8e6d6}
body.theme-fresh .topbar-links a:hover{color:#fff}
body.theme-fresh .logo-mark{background:linear-gradient(135deg,#0f9d6b,#3ecf8e)}
body.theme-fresh .logo-text b{color:#0f9d6b}
body.theme-fresh .search-bar{border:1px solid var(--line);box-shadow:0 6px 18px rgba(15,157,107,.08)}
body.theme-fresh .search-bar .search-icon{color:#0f9d6b}
body.theme-fresh .cart-entry{border-color:#c4efd7;color:#0b7d54}
body.theme-fresh .cart-text i{background:#0f9d6b}
body.theme-fresh .hot-words b{color:#0b7d54}
body.theme-fresh .cat-nav{background:rgba(241,250,245,.95);border-top:0;border-bottom:0;padding:10px 0}
body.theme-fresh .cat-nav-inner{gap:8px}
body.theme-fresh .cat-nav a{background:#fff;border:1px solid var(--line);border-radius:999px;color:#0f9d6b;padding:9px 18px;box-shadow:0 2px 8px rgba(15,157,107,.06)}
body.theme-fresh .cat-nav a:hover,body.theme-fresh .cat-nav a.on{background:linear-gradient(135deg,#0f9d6b,#3ecf8e);color:#fff;border-color:transparent}
body.theme-fresh .btn,body.theme-fresh .pill{border-radius:999px}
body.theme-fresh .btn.primary{background:linear-gradient(135deg,#0f9d6b,#3ecf8e)}
body.theme-fresh .btn.primary:hover{box-shadow:0 8px 22px rgba(15,157,107,.32)}
body.theme-fresh .prod-card,body.theme-fresh .quick-cat,body.theme-fresh .panel,body.theme-fresh .account-nav-card,body.theme-fresh .banner-nav-card{border-radius:16px}
body.theme-fresh .prod-card{border-color:#dcece2;box-shadow:0 6px 20px rgba(15,157,107,.06)}
body.theme-fresh .quick-cat i{background:linear-gradient(135deg,#dff6e8,#c4efd7)}
body.theme-fresh .banner-nav-card:hover,body.theme-fresh .quick-cat:hover,body.theme-fresh .prod-card:hover{border-color:rgba(15,157,107,.4);box-shadow:0 12px 28px rgba(15,157,107,.12)}
body.theme-fresh .banner-nav-card:hover b{color:#0f9d6b}
body.theme-fresh .promo-card{background:linear-gradient(135deg,#eafaf1,#dff6e8);border-color:#c4efd7}
body.theme-fresh .promo-card.alt{background:linear-gradient(135deg,#e6f0ff,#dbe8ff);border-color:#cfe0ff}
body.theme-fresh .promo-card b{color:#0b7d54}
body.theme-fresh .promo-card.alt b{color:#2563eb}
body.theme-fresh .promo-card span{color:#4f7a67}
body.theme-fresh .promo-card.alt span{color:#4b6fa8}
body.theme-fresh .home-cta{background:linear-gradient(135deg,#0f9d6b,#3ecf8e);border-radius:16px}
body.theme-fresh .mid-band{background:#fff;border-color:#dcece2}
body.theme-fresh .mid-band i{color:#0f9d6b}
body.theme-fresh .sec-head{border-bottom-color:#c4efd7}
body.theme-fresh .sec-head h2{color:#1c3b2e}
body.theme-fresh .prod-tags span{background:rgba(15,157,107,.92)}
body.theme-fresh .prod-buy .now{background:linear-gradient(135deg,#0f9d6b,#3ecf8e)}
body.theme-fresh .prod-buy .add{border-color:#0f9d6b;color:#0f9d6b}
body.theme-fresh .prod-buy .add:hover{background:#0f9d6b;color:#fff}
body.theme-fresh .prod-name:hover{color:#0f9d6b}
body.theme-fresh .price-box{background:linear-gradient(135deg,#f0fbf5,#e6f7ee);border-color:#c4efd7}
body.theme-fresh .price-row .save{background:#d5f2e3;color:#0b7d54}
body.theme-fresh .detail-tag{background:#0f9d6b}
body.theme-fresh .detail-section h2{border-left-color:#0f9d6b}
body.theme-fresh .address-box h3,body.theme-fresh .order-items h3{border-left-color:#0f9d6b}
body.theme-fresh .tab-nav{border-bottom-color:#c4efd7}
body.theme-fresh .tab-nav button.on{background:#0f9d6b}
body.theme-fresh .checkout-steps span.on{background:linear-gradient(135deg,#0f9d6b,#3ecf8e)}
body.theme-fresh .service-float{background:linear-gradient(135deg,#0f9d6b,#3ecf8e);box-shadow:0 10px 26px rgba(15,157,107,.35)}
body.theme-fresh .mobile-tabbar a.on{color:#0f9d6b}
body.theme-fresh .mobile-tabbar a.on:before{background:linear-gradient(135deg,#0f9d6b,#3ecf8e)}
body.theme-fresh .im-faq-chip{background:#f0fbf5;border-color:#c4efd7;color:#0b7d54}
body.theme-fresh .im-faq-chip.im-faq-agent{background:linear-gradient(135deg,#0f9d6b,#3ecf8e)}
body.theme-fresh .im-faq-chip:hover{background:#0f9d6b;color:#fff;border-color:#0f9d6b}
body.theme-fresh .im-message.user{background:#eafaf1;border-color:#c4efd7}
body.theme-fresh .im-message b{color:#0f9d6b}
body.theme-fresh .badge{background:#eafaf1;border-color:#c4efd7;color:#0b7d54}
body.theme-fresh .order-status{background:#eafaf1;border-color:#c4efd7;color:#0b7d54}
body.theme-fresh .order-card-head{background:#f6fdf9}
body.theme-fresh .order-tabs a.on{color:#0f9d6b;border-bottom-color:#0f9d6b}
body.theme-fresh .auth{border-radius:20px}
body.theme-fresh .auth-logo{background:linear-gradient(135deg,#0f9d6b,#3ecf8e)}
body.theme-fresh .profile .avatar,body.theme-fresh .avatar{background:linear-gradient(135deg,#0f9d6b,#3ecf8e)}
body.theme-fresh .admin-tabs a.active,body.theme-fresh .admin-tabs a:hover{color:#0f9d6b}
body.theme-fresh .shop-footer{background:#fff;border-top-color:#dcece2}
body.theme-fresh .promise-band{background:#f1faf5}
body.theme-fresh .promise-inner span b{color:#1c3b2e}
body.theme-fresh .footer-col h4{color:#1c3b2e}
body.theme-fresh .footer-col a:hover{color:#0f9d6b}
body.theme-fresh .footer-qr .qr-ph{border-color:#c4efd7;background:#f0fbf5;color:#0f9d6b}

/* ===== desktop layout differences (safe for mobile: mobile keeps base layout) ===== */
@media(min-width:761px){
  body.theme-elegant .shop-header{position:relative}
  body.theme-elegant .shop-header-inner{flex-direction:column;align-items:center;gap:16px;padding:26px 0 16px}
  body.theme-elegant .logo{justify-content:center}
  body.theme-elegant .search-bar{max-width:560px;width:100%;order:2}
  body.theme-elegant .cart-entry{position:absolute;top:26px;right:min(3vw,26px)}
  body.theme-elegant .hot-words{justify-content:center}
  body.theme-elegant .home-banner{grid-template-columns:minmax(0,1fr) 300px}
  body.theme-elegant .banner-side{grid-column:1/-1;grid-template-columns:repeat(5,minmax(0,1fr))}
  body.theme-elegant .slider{grid-column:1}
  body.theme-elegant .banner-promo{grid-column:2}
  body.theme-elegant .prod-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  body.theme-elegant .sec-head .sec-title{flex-direction:column;align-items:flex-start;gap:0}
  body.theme-elegant .quick-cats{grid-template-columns:repeat(5,minmax(0,1fr))}

  body.theme-fresh .shop-header{background:transparent;border-bottom:0}
  body.theme-fresh .shop-header-inner{background:#fff;border:1px solid var(--line);border-radius:22px;padding:14px 18px;margin-top:16px;box-shadow:0 12px 32px rgba(15,157,107,.08)}
  body.theme-fresh .shop-header .hot-words{padding:10px 8px 0}
  body.theme-fresh .home-banner{grid-template-columns:1fr;gap:14px;margin-top:14px}
  body.theme-fresh .banner-side{grid-column:1;grid-template-columns:repeat(5,minmax(0,1fr))}
  body.theme-fresh .slider{grid-column:1}
  body.theme-fresh .banner-promo{grid-column:1;grid-template-columns:repeat(2,minmax(0,1fr))}
  body.theme-fresh .mid-band{border-radius:16px}
}

/* small screens: keep elegant header usable */
@media(max-width:760px){
  body.theme-elegant .logo{justify-content:center}
  body.theme-elegant .shop-header-inner{gap:12px}
}