:root {
  --pink: #ff1493;
  --pink-deep: #d90078;
  --pink-soft: #fff0f7;
  --ink: #211a22;
  --muted: #766b75;
  --cream: #fffafc;
  --line: #f0dbe7;
  --gold: #c79346;
  --green: #23845b;
  --shadow: 0 18px 55px rgba(64, 16, 44, 0.1);
  --radius: 18px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--cream); font-family: 'Outfit', system-ui, sans-serif; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.skip-link { position: fixed; top: -50px; left: 16px; z-index: 20; padding: 10px 14px; background: var(--ink); color: #fff; border-radius: 8px; }
.skip-link:focus { top: 16px; }

.announcement { padding: 9px 20px; color: #fff; background: linear-gradient(90deg, #b90072, var(--pink), #b90072); text-align: center; font-size: 12px; letter-spacing: .12em; }
.site-header { position: sticky; top: 0; z-index: 10; background: rgba(255,255,255,.94); border-bottom: 1px solid var(--line); backdrop-filter: blur(16px); }
.header-inner { max-width: 1240px; min-height: 76px; margin: auto; padding: 0 24px; display: flex; align-items: center; gap: 34px; }
.brand { display: inline-flex; align-items: center; gap: 12px; flex-shrink: 0; }
.brand-mark { width: 45px; height: 45px; border-radius: 12px; display: grid; place-content: center; color: #fff; background: var(--pink); box-shadow: 0 8px 20px rgba(255,20,147,.2); text-align: center; line-height: 1; }
.brand-mark span { font-family: Georgia, serif; font-size: 18px; letter-spacing: .05em; }
.brand-mark small { margin-top: 4px; font-size: 8px; letter-spacing: .08em; }
.brand-copy { display: grid; gap: 3px; }
.brand-copy strong { font-size: 12px; letter-spacing: .18em; }
.brand-copy em { color: var(--muted); font-style: normal; font-size: 11px; letter-spacing: .1em; }
.main-nav { display: flex; align-items: center; justify-content: center; gap: 24px; flex: 1; }
.main-nav a { position: relative; padding: 29px 0 26px; color: #4e444c; font-size: 14px; white-space: nowrap; }
.main-nav a::after { position: absolute; right: 0; bottom: 17px; left: 0; height: 2px; content: ''; background: var(--pink); transform: scaleX(0); transition: transform .18s ease; }
.main-nav a:hover, .main-nav a:focus-visible { color: var(--pink-deep); }
.main-nav a:hover::after, .main-nav a:focus-visible::after { transform: scaleX(1); }
.header-actions { display: flex; align-items: center; gap: 9px; }
.icon-button, .cart-button, .login-button { border: 0; cursor: pointer; }
.icon-button { width: 34px; height: 34px; color: var(--pink-deep); background: transparent; font-size: 26px; line-height: 1; }
.cart-button { padding: 9px 11px; color: var(--pink-deep); font-size: 13px; }
.cart-count { display: inline-grid; width: 20px; height: 20px; place-items: center; margin-left: 4px; border-radius: 50%; color: #fff; background: var(--pink); font-size: 11px; }
.login-button { padding: 10px 17px; border-radius: 9px; color: #fff; background: var(--pink); font-size: 13px; transition: transform .18s ease, background .18s ease; }
.login-button:hover { background: var(--pink-deep); transform: translateY(-1px); }
.mobile-menu { display: none; border: 0; color: var(--pink-deep); background: transparent; font-size: 24px; cursor: pointer; }
.static-notice { padding: 10px 20px; color: #6d4760; background: #fff5fa; border-bottom: 1px solid var(--line); text-align: center; font-size: 12px; letter-spacing: .04em; }
.status-dot { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--green); }

main { min-height: 700px; }
.page-wrap { max-width: 1180px; margin: 0 auto; padding: 60px 24px 84px; }
.hero { position: relative; overflow: hidden; min-height: 580px; display: grid; align-items: center; background: radial-gradient(circle at 78% 30%, rgba(255,20,147,.28), transparent 26%), linear-gradient(115deg, #240b1d 0%, #571040 52%, #a31a66 100%); }
.hero::before, .hero::after { position: absolute; content: ''; border-radius: 50%; filter: blur(1px); }
.hero::before { width: 530px; height: 530px; right: -120px; top: -190px; border: 1px solid rgba(255,255,255,.15); box-shadow: 0 0 0 35px rgba(255,255,255,.025), 0 0 0 70px rgba(255,255,255,.02); }
.hero::after { width: 260px; height: 260px; right: 13%; bottom: -170px; border: 1px solid rgba(255,255,255,.12); }
.hero-content { position: relative; z-index: 1; width: min(600px, 100%); margin-left: max(24px, calc((100vw - 1180px) / 2)); padding: 70px 24px; color: #fff; }
.eyebrow { color: var(--pink); font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; }
.hero h1 { max-width: 540px; margin: 16px 0; font-family: 'Noto Serif TC', serif; font-size: clamp(42px, 6vw, 76px); font-weight: 500; letter-spacing: .04em; line-height: 1.15; }
.hero p { max-width: 450px; margin: 0 0 28px; color: rgba(255,255,255,.8); font-size: 16px; line-height: 1.9; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 22px; border: 1px solid transparent; border-radius: 10px; cursor: pointer; font-size: 14px; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.button:hover { transform: translateY(-2px); box-shadow: 0 9px 22px rgba(64,16,44,.14); }
.button-primary { color: #fff; background: var(--pink); }
.button-light { color: #fff; border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.08); }
.button-outline { color: var(--pink-deep); border-color: var(--pink); background: #fff; }
.button-muted { color: var(--muted); border-color: var(--line); background: #fff; }
.section { padding: 72px 24px; }
.section-inner { max-width: 1180px; margin: auto; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 28px; }
.section-heading h2 { margin: 8px 0 0; font-family: 'Noto Serif TC', serif; font-size: clamp(28px, 4vw, 42px); font-weight: 500; }
.section-heading p { max-width: 460px; margin: 0; color: var(--muted); line-height: 1.7; }
.text-link { padding: 0; border: 0; color: var(--pink-deep); background: transparent; cursor: pointer; font-size: 13px; }
.grid { display: grid; gap: 20px; }
.product-grid { grid-template-columns: repeat(4, 1fr); }
.product-card { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; transition: transform .2s ease, box-shadow .2s ease; }
.product-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.product-image { position: relative; min-height: 220px; display: grid; place-items: center; overflow: hidden; background: linear-gradient(145deg, #fff1f7, #f4d7e7); }
.product-image::before { position: absolute; width: 86px; height: 170px; border-radius: 42% 42% 14% 14%; content: ''; background: linear-gradient(90deg, #38111e, #8e1a46 42%, #280914); box-shadow: -18px 19px 24px rgba(32,5,17,.22); }
.product-image::after { position: absolute; width: 31px; height: 45px; top: 19px; border-radius: 8px 8px 4px 4px; content: ''; background: linear-gradient(90deg, #49111e, #b02d52, #37101a); box-shadow: 0 0 0 5px rgba(48,7,19,.16); }
.bottle-label { position: relative; z-index: 1; width: 48px; height: 70px; margin-top: 45px; display: grid; place-items: center; color: #7e2650; background: #f7e8cb; font-family: Georgia, serif; font-size: 8px; text-align: center; }
.badge { position: absolute; top: 14px; left: 14px; padding: 5px 8px; border-radius: 5px; color: #fff; background: var(--pink); font-size: 10px; font-weight: 600; letter-spacing: .06em; }
.heart { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; border: 0; border-radius: 50%; color: var(--pink-deep); background: rgba(255,255,255,.9); cursor: pointer; font-size: 17px; }
.product-info { padding: 17px; }
.product-origin { margin: 0 0 6px; color: var(--muted); font-size: 11px; letter-spacing: .05em; }
.product-info h3 { min-height: 45px; margin: 0 0 8px; font-family: 'Noto Serif TC', serif; font-size: 17px; font-weight: 500; line-height: 1.4; }
.product-price { display: flex; align-items: baseline; gap: 7px; }
.product-price strong { color: var(--pink-deep); font-size: 20px; }
.product-price del { color: #aaa; font-size: 12px; }
.product-meta { display: flex; justify-content: space-between; margin-top: 12px; color: var(--muted); font-size: 11px; }
.feature-strip { background: #fff2f7; border-block: 1px solid var(--line); }
.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.feature { display: flex; align-items: flex-start; gap: 14px; }
.feature-icon { width: 38px; height: 38px; display: grid; place-items: center; flex-shrink: 0; border-radius: 50%; color: #fff; background: var(--pink); font-family: Georgia, serif; font-size: 16px; }
.feature h3 { margin: 0 0 5px; font-family: 'Noto Serif TC', serif; font-size: 15px; font-weight: 600; }
.feature p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }

.page-hero { padding: 62px 24px; color: #fff; background: linear-gradient(120deg, #2d0d23, #78114d 65%, #d20b78); }
.page-hero-inner { max-width: 1180px; margin: auto; }
.page-hero h1 { margin: 9px 0; font-family: 'Noto Serif TC', serif; font-size: clamp(34px, 5vw, 58px); font-weight: 500; }
.page-hero p { max-width: 570px; margin: 0; color: rgba(255,255,255,.82); line-height: 1.8; }
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 25px; }
.search-box { display: flex; gap: 8px; }
.search-box input { min-width: 250px; padding: 12px 15px; border: 1px solid var(--line); border-radius: 9px; outline: 0; }
.search-box input:focus { border-color: var(--pink); box-shadow: 0 0 0 3px rgba(255,20,147,.12); }
.filter-row { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-chip { padding: 9px 14px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: #fff; cursor: pointer; font-size: 12px; }
.filter-chip.active, .filter-chip:hover { border-color: var(--pink); color: #fff; background: var(--pink); }

.auction-card { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.auction-image { position: relative; min-height: 220px; display: grid; place-items: center; background: linear-gradient(145deg, #120c11, #4f112f); }
.auction-image .product-image::before { background: linear-gradient(90deg, #1c080c, #9d213d 42%, #110408); }
.auction-image .product-image::after { background: linear-gradient(90deg, #32090d, #af2a41, #1b060a); }
.lot { position: absolute; top: 16px; left: 16px; color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .12em; }
.rating { position: absolute; top: 14px; right: 14px; padding: 6px 8px; border-radius: 5px; color: #ffd77b; background: rgba(0,0,0,.4); font-size: 11px; }
.countdown { position: absolute; right: 13px; bottom: 13px; left: 13px; padding: 10px 12px; border-radius: 999px; color: var(--pink-deep); background: #fff; font-size: 13px; font-weight: 600; text-align: center; }
.auction-content { padding: 18px; }
.auction-content h3 { margin: 5px 0 8px; font-family: 'Noto Serif TC', serif; font-size: 20px; font-weight: 600; }
.auction-location { color: var(--muted); font-size: 11px; }
.auction-stats { display: flex; justify-content: space-between; margin: 17px 0; padding: 12px 0; border-block: 1px solid var(--line); }
.auction-stats span { display: grid; gap: 4px; color: var(--muted); font-size: 11px; }
.auction-stats strong { color: var(--ink); font-size: 15px; }
.auction-stats .current strong { color: var(--pink-deep); }
.full-button { width: 100%; }

.dashboard { display: grid; grid-template-columns: 1.15fr .85fr; gap: 22px; }
.panel { padding: 25px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: 0 8px 30px rgba(64,16,44,.04); }
.panel h2, .panel h3 { margin: 0 0 18px; font-family: 'Noto Serif TC', serif; font-weight: 600; }
.metric-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; }
.metric { padding: 17px; border-radius: 14px; background: var(--pink-soft); }
.metric small { color: var(--muted); font-size: 11px; }
.metric strong { display: block; margin-top: 6px; color: var(--pink-deep); font-size: 25px; }
.metric em { color: var(--green); font-size: 12px; font-style: normal; }
.progress-row { margin: 19px 0; }
.progress-label { display: flex; justify-content: space-between; margin-bottom: 8px; color: var(--muted); font-size: 12px; }
.progress { height: 9px; overflow: hidden; border-radius: 999px; background: #f0e4eb; }
.progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--pink), #ff75be); }
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th { color: var(--muted); font-size: 11px; font-weight: 500; text-align: left; }
.table th, .table td { padding: 13px 7px; border-bottom: 1px solid var(--line); }
.table td:last-child, .table th:last-child { text-align: right; }
.star-row { color: #f4af23; letter-spacing: 2px; }
.review { padding: 15px 0; border-bottom: 1px solid var(--line); }
.review:last-child { border: 0; }
.review-top { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; }
.review p { margin: 8px 0 0; color: var(--muted); font-size: 13px; line-height: 1.6; }

.article-grid { grid-template-columns: repeat(3,1fr); }
.article-card { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.article-visual { min-height: 160px; padding: 18px; display: flex; align-items: end; color: #fff; background: linear-gradient(135deg, #2b1020, #a71966); }
.article-card:nth-child(2) .article-visual { background: linear-gradient(135deg, #5c2f18, #d18c43); }
.article-card:nth-child(3) .article-visual { background: linear-gradient(135deg, #162b3a, #5790a1); }
.article-visual strong { font-family: 'Noto Serif TC', serif; font-size: 22px; font-weight: 500; }
.article-body { padding: 17px; }
.article-body small { color: var(--pink-deep); font-size: 10px; letter-spacing: .12em; }
.article-body h3 { margin: 8px 0; font-family: 'Noto Serif TC', serif; font-size: 17px; }
.article-body p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; }

.cart-layout { display: grid; grid-template-columns: 1fr 340px; gap: 22px; }
.cart-item { display: flex; align-items: center; gap: 15px; padding: 17px 0; border-bottom: 1px solid var(--line); }
.cart-thumb { width: 70px; height: 80px; display: grid; place-items: center; flex-shrink: 0; border-radius: 10px; background: var(--pink-soft); }
.cart-thumb::before { width: 28px; height: 56px; border-radius: 40% 40% 9px 9px; content: ''; background: linear-gradient(90deg, #44101c, #a32347, #2a0812); }
.cart-copy { flex: 1; }
.cart-copy h3 { margin: 0 0 5px; font-family: 'Noto Serif TC', serif; font-size: 16px; }
.cart-copy p { margin: 0; color: var(--muted); font-size: 12px; }
.cart-price { color: var(--pink-deep); font-weight: 600; }
.empty { padding: 50px 20px; border: 1px dashed var(--line); border-radius: var(--radius); color: var(--muted); text-align: center; }

.callout { padding: 25px; border-radius: var(--radius); color: #fff; background: linear-gradient(105deg, #3a102b, #a80c62); }
.callout h2 { margin: 0 0 8px; font-family: 'Noto Serif TC', serif; font-weight: 500; }
.callout p { margin: 0 0 18px; color: rgba(255,255,255,.78); line-height: 1.7; }
.form-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 15px; }
.field { display: grid; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field label { color: var(--muted); font-size: 12px; }
.field input, .field textarea, .field select { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: #fff; outline: 0; }
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--pink); box-shadow: 0 0 0 3px rgba(255,20,147,.1); }

.site-footer { padding: 55px 24px 24px; color: #fff; background: #241521; }
.footer-grid { max-width: 1180px; margin: auto; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 32px; }
.footer-brand .brand-copy strong { color: #fff; }
.footer-brand .brand-copy em, .footer-text, .site-footer p { color: rgba(255,255,255,.56); }
.footer-text { max-width: 260px; margin: 18px 0 0; font-size: 13px; line-height: 1.7; }
.site-footer h3 { margin: 0 0 15px; font-size: 13px; font-weight: 600; letter-spacing: .08em; }
.site-footer a:not(.brand), .site-footer p { display: block; margin: 0 0 9px; font-size: 12px; }
.site-footer a:not(.brand):hover, .site-footer .text-link:hover { color: #ff7bc2; }
.site-footer .text-link { color: #fff; }
.footer-bottom { max-width: 1180px; margin: 45px auto 0; padding-top: 18px; display: flex; justify-content: space-between; border-top: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.4); font-size: 11px; }
.toast { position: fixed; right: 20px; bottom: 20px; z-index: 30; max-width: 340px; padding: 13px 17px; border-radius: 10px; color: #fff; background: #241521; box-shadow: var(--shadow); opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity .18s ease, transform .18s ease; font-size: 13px; }
.toast.show { opacity: 1; transform: translateY(0); }

@media (max-width: 960px) {
  .header-inner { gap: 16px; }
  .main-nav { gap: 13px; }
  .main-nav a { font-size: 12px; }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .dashboard, .cart-layout { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .header-inner { min-height: 64px; padding: 0 16px; }
  .brand-copy { display: none; }
  .mobile-menu { display: block; order: 2; margin-left: auto; }
  .main-nav { position: absolute; top: 64px; right: 0; left: 0; display: none; padding: 12px 18px 18px; flex-direction: column; align-items: stretch; gap: 0; background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 12px 25px rgba(64,16,44,.08); }
  .main-nav.open { display: flex; }
  .main-nav a { padding: 13px 4px; }
  .main-nav a::after { bottom: 4px; }
  .header-actions { gap: 2px; }
  .cart-button { padding-inline: 5px; font-size: 0; }
  .cart-button::before { content: '袋'; font-size: 13px; }
  .login-button { padding: 9px 11px; font-size: 12px; }
  .static-notice { text-align: left; font-size: 11px; }
  .hero { min-height: 520px; }
  .hero-content { margin: 0; padding: 50px 24px; }
  .hero h1 { font-size: 43px; }
  .section, .page-wrap { padding: 45px 16px 60px; }
  .section-heading { display: block; }
  .section-heading p { margin-top: 12px; }
  .product-grid { gap: 12px; }
  .product-image { min-height: 180px; }
  .product-info { padding: 13px; }
  .product-info h3 { min-height: 52px; font-size: 15px; }
  .product-price strong { font-size: 17px; }
  .feature-grid, .article-grid, .metric-grid, .form-grid { grid-template-columns: 1fr; }
  .toolbar { display: block; }
  .search-box { margin-top: 15px; }
  .search-box input { min-width: 0; flex: 1; }
  .page-hero { padding: 45px 16px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px 16px; }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
  .footer-bottom { display: block; line-height: 1.9; }
  .footer-bottom span { display: block; }
}


/* ─────────────────────────────────────────────────────────────────────────────
   React Magenta UI parity layer
   將 PHP 版視覺統一為 Heavenly Cellar 粉紅色 React 版本風格
   ───────────────────────────────────────────────────────────────────────────── */
:root {
  --pink: #d92b82;
  --pink-deep: #9f185b;
  --pink-soft: #fff2f8;
  --ink: #2a1b24;
  --muted: #796a73;
  --cream: #fffaf6;
  --line: #ecd8df;
  --gold: #c79a57;
  --gold-light: #e4c58d;
  --wine-deep: #321522;
  --wine-mid: #721d49;
  --shadow: 0 18px 44px rgba(50, 21, 34, .14);
  --radius: 14px;
}

body {
  background: var(--cream);
  color: var(--ink);
  font-family: 'Lato', system-ui, sans-serif;
}
h1, h2, h3, h4, .brand-copy strong, .product-info h3, .auction-content h3,
.section-heading h2, .page-hero h1, .hero h1, .panel h2, .panel h3,
.callout h2, .cart-copy h3, .article-body h3 {
  font-family: 'Cormorant Garamond', 'Noto Serif TC', Georgia, serif;
}

.announcement {
  background: linear-gradient(90deg, #6f1747, var(--pink), #6f1747);
  font-family: 'Lato', sans-serif;
  letter-spacing: .16em;
}
.site-header {
  background: rgba(255, 250, 246, .94);
  border-bottom-color: rgba(199, 154, 87, .32);
}
.header-inner { max-width: 1280px; min-height: 82px; }
.brand-mark {
  width: 48px; height: 48px; border-radius: 50%;
  background: linear-gradient(145deg, var(--pink), var(--pink-deep));
  box-shadow: 0 8px 20px rgba(217, 43, 130, .28);
}
.brand-copy strong { color: var(--wine-deep); letter-spacing: .2em; }
.brand-copy em { color: var(--pink-deep); font-family: 'Noto Serif TC', serif; }
.main-nav { gap: 28px; }
.main-nav a { color: #59434f; font-family: 'Lato', sans-serif; font-size: 13px; letter-spacing: .04em; }
.main-nav a::after { background: var(--gold); height: 3px; border-radius: 99px; }
.main-nav a:hover, .main-nav a:focus-visible { color: var(--pink-deep); }
.login-button, .button-primary {
  background: linear-gradient(135deg, var(--pink), var(--pink-deep));
  box-shadow: 0 8px 18px rgba(159, 24, 91, .18);
}
.login-button:hover, .button-primary:hover { background: var(--pink-deep); }
.cart-button { color: var(--pink-deep); font-family: 'Lato', sans-serif; }
.static-notice { background: #fff4f8; border-bottom-color: rgba(199, 154, 87, .3); color: #80536a; }

.hero {
  min-height: 650px;
  background-image: linear-gradient(90deg, rgba(40, 14, 29, .9) 0%, rgba(91, 23, 61, .63) 52%, rgba(217, 43, 130, .08) 100%), url('https://images.unsplash.com/photo-1510812431401-41d2bd2722f3?w=1800&q=85');
  background-size: cover;
  background-position: center;
}
.hero::before { border-color: rgba(228, 197, 141, .22); }
.hero-content { max-width: 650px; }
.hero h1 { font-weight: 400; letter-spacing: .03em; text-shadow: 0 3px 18px rgba(0,0,0,.22); }
.hero .eyebrow, .page-hero .eyebrow { color: var(--gold-light); }
.hero p { font-family: 'Lato', sans-serif; }
.button { border-radius: 5px; font-family: 'Lato', sans-serif; letter-spacing: .04em; }
.button-light { border-color: rgba(228,197,141,.7); color: #fff; }
.button-light:hover { background: rgba(255,255,255,.16); }

.section { padding-block: 78px; }
.section-heading h2 { color: var(--wine-deep); font-weight: 500; }
.section-heading p { font-family: 'Lato', sans-serif; }
.feature-strip { background: #f9eee5; border-block-color: rgba(199, 154, 87, .34); }
.feature-icon { color: var(--wine-deep); background: var(--gold-light); }
.feature h3 { color: var(--wine-deep); }

.product-card, .auction-card, .article-card, .panel {
  border-color: rgba(199, 154, 87, .3);
  border-radius: 12px;
  box-shadow: 0 5px 22px rgba(50, 21, 34, .045);
}
.product-card:hover, .auction-card:hover { box-shadow: var(--shadow); }
.product-image { background: linear-gradient(145deg, #fff4f8, #efd6df); }
.product-info h3 { color: var(--wine-deep); font-weight: 600; }
.product-price strong, .cart-price { color: var(--pink-deep); }
.badge { background: var(--pink); border-radius: 3px; }
.text-link { color: var(--pink-deep); font-family: 'Lato', sans-serif; }

.page-hero {
  padding-block: 76px;
  background: linear-gradient(120deg, #2c1021 0%, #6e1b48 62%, #c52b7b 100%);
}
.page-hero h1 { font-weight: 400; }
.auction-image { background: linear-gradient(145deg, #25121e, #7b1b4b); }
.auction-content h3 { color: var(--wine-deep); }
.countdown { color: var(--pink-deep); border: 1px solid rgba(199,154,87,.35); }
.metric { background: linear-gradient(135deg, #fff0f7, #f9e5ee); }
.metric strong { color: var(--pink-deep); }

.callout { background: linear-gradient(105deg, #351326, #8d1c57); }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--pink); box-shadow: 0 0 0 3px rgba(217,43,130,.14); }
.site-footer { background: linear-gradient(135deg, #24121d, #40162e); }
.site-footer h3 { color: var(--gold-light); }
.footer-bottom { border-top-color: rgba(228,197,141,.22); }

.mobile-menu { display: none; }
@media (max-width: 700px) {
  .mobile-menu { display: block; order: 2; margin-left: auto; padding: 6px 8px; border: 0; color: var(--pink-deep); background: transparent; font-size: 24px; cursor: pointer; }
  .header-actions { order: 3; }
  .hero { min-height: 600px; background-position: 62% center; }
  .hero-content { padding-top: 80px; }
  .hero h1 { font-size: 48px; }
  .main-nav { z-index: 11; }
}

/* CMS admin helpers */
.admin-nav { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:22px; }
.admin-nav .button { min-height:40px; padding-inline:16px; }
.table form { margin:0; }
.table .text-link { font-size:12px; }
.admin-actions { min-width:190px; white-space:nowrap; }
.product-detail-link { display:block; }
.product-detail-link:focus-visible { outline:3px solid rgba(217,43,130,.35); outline-offset:-3px; }
.product-detail-title { color:inherit; text-decoration:none; }
.product-detail-title:hover { color:var(--pink-deep); }
.button-small { min-height:34px; padding:0 12px; font-size:12px; }
.button-danger { color:#fff; border-color:#b42352; background:#b42352; }
.button-danger:hover { color:#fff; background:#8f1640; }
.approval-form { display:grid !important; gap:7px; min-width:190px; }
.approval-note { width:190px; padding:8px 10px; border:1px solid var(--line); border-radius:8px; font-size:12px; }
.status-pill { display:inline-block; padding:7px 10px; border-radius:999px; color:var(--pink-deep); background:var(--pink-soft); font-size:12px; }
.wysiwyg-toolbar { display:flex; flex-wrap:wrap; gap:6px; padding:8px; border:1px solid var(--line); border-bottom:0; border-radius:9px 9px 0 0; background:var(--pink-soft); }
.wysiwyg-toolbar button { min-width:34px; padding:6px 10px; border:1px solid var(--line); border-radius:6px; color:var(--pink-deep); background:#fff; cursor:pointer; font-size:12px; }
.wysiwyg-toolbar button:hover { color:#fff; background:var(--pink); }
.wysiwyg-editor { min-height:150px; padding:14px; border:1px solid var(--line); border-radius:0 0 9px 9px; background:#fff; outline:0; line-height:1.8; }
.wysiwyg-editor:focus { border-color:var(--pink); box-shadow:0 0 0 3px rgba(217,43,130,.12); }
.wysiwyg-editor:empty::before { color:var(--muted); content:attr(data-placeholder); }
.wysiwyg-editor ul, .wysiwyg-editor ol { padding-left:24px; }
.wysiwyg-source { display:none; }
.rich-content { margin:18px 0; line-height:1.9; }
.rich-content p { margin:0 0 10px; }
.rich-content ul, .rich-content ol { padding-left:24px; }
.publish-actions { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:18px; }
.publish-actions span { margin-right:auto; color:var(--muted); font-size:13px; }
.publish-actions strong { color:var(--pink-deep); }
.login-alert { margin:0 0 18px; padding:12px 14px; border:1px solid rgba(190,35,91,.25); border-radius:9px; background:#fff0f5; color:#9a174c; line-height:1.6; }
.login-alert.success { border-color:rgba(31,132,86,.25); background:#effaf4; color:#176b46; }
.admin-filter { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:14px 0 18px; padding:12px; border:1px solid var(--line); border-radius:9px; background:#fff8fb; }
.admin-filter input { min-width:220px; flex:1; }
.admin-filter select { min-height:36px; padding:0 10px; border:1px solid var(--line); border-radius:7px; background:#fff; }
.inline-form { display:flex; flex-wrap:wrap; align-items:center; gap:5px; margin-top:5px; }
.inline-form .approval-note { width:150px; }
@media (max-width:700px) { .admin-nav { display:grid; grid-template-columns:1fr 1fr; } .admin-nav .button { width:100%; } }

.brand-logo{width:54px;height:54px;border-radius:10px;object-fit:cover;display:block}.footer-brand .brand-logo{width:64px;height:64px}.announcement{display:flex;justify-content:center;gap:34px;letter-spacing:.14em}.header-actions{display:flex;align-items:center;gap:12px;margin-left:auto}.icon-action{display:inline-flex;align-items:center;gap:7px;border:0;color:var(--ink);background:transparent;cursor:pointer;font-size:13px}.icon-action:hover{color:var(--pink-deep)}.icon-action i{color:var(--pink-deep);font-size:17px}.cart-count{display:inline-grid;min-width:21px;height:21px;padding:0 5px;place-items:center;border-radius:999px;color:#fff;background:var(--pink-deep);font-size:11px;font-weight:700}.site-search-panel{display:none;padding:16px 24px;border-bottom:1px solid var(--line);background:#fff7fb}.site-search-panel.is-open{display:block}.site-search-form{max-width:900px;margin:auto;display:flex;gap:8px}.site-search-form input{flex:1;min-height:44px;padding:0 16px;border:1px solid var(--line);border-radius:9px}.server-notice{padding:9px 20px;color:var(--muted);background:#fff;text-align:center;font-size:12px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.modal-backdrop{position:fixed;inset:0;z-index:50;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(31,15,26,.6)}.modal-backdrop.is-open{display:flex}.modal-box{position:relative;width:min(440px,100%);max-height:90vh;overflow:auto;padding:30px;border-radius:18px;background:#fff;box-shadow:0 24px 80px rgba(31,15,26,.3)}.modal-box-wide{width:min(760px,100%)}.modal-box h2{margin:0 0 22px;font-family:'Noto Serif TC',serif}.modal-close{position:absolute;top:12px;right:14px;width:32px;height:32px;border:0;border-radius:50%;color:var(--muted);background:var(--pink-soft);cursor:pointer}.modal-small{margin:16px 0 0;color:var(--muted);font-size:11px;line-height:1.7;text-align:center}.modal-small a,.modal-forgot{color:var(--pink-deep);text-decoration:underline}.modal-forgot{display:block;margin-top:10px;font-size:12px;text-align:center}
.product-price{display:flex;align-items:baseline;gap:9px}.product-price del,.detail-original-price,.quote-cart-table del{color:var(--muted);font-size:12px}.product-price .sale-price,.detail-price.sale-price,.quote-cart-table .sale-price{color:var(--pink-deep);font-size:22px}.detail-price-row{align-items:baseline}
.quote-cart-page{padding:22px}.quote-cart-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.quote-cart-table-wrap{overflow:auto}.quote-cart-table{width:100%;min-width:780px;border-collapse:collapse}.quote-cart-table th{padding:14px 10px;color:#443b42;background:#f1f3f6;font-size:13px;text-align:left;white-space:nowrap}.quote-cart-table td{padding:13px 10px;border-bottom:1px solid var(--line);vertical-align:middle}.quote-cart-table td:nth-last-child(-n+2),.quote-cart-table th:nth-last-child(-n+2){text-align:right}.quote-cart-table td strong{display:block}.quote-cart-table td small{display:block;margin-top:5px;color:var(--muted)}.quote-table-thumb{width:62px;height:62px;overflow:hidden;border-radius:7px;background:#f5edf2}.quote-table-thumb img{width:100%;height:100%;object-fit:cover}.quote-qty-control{position:relative;display:flex;align-items:center;gap:7px}.quote-page-qty{width:58px;padding:8px;border:1px solid var(--line);border-radius:6px}.qty-loading{display:none;color:var(--pink-deep)}.quote-row.is-loading .qty-loading{display:inline-block}.quote-row.is-loading{opacity:.65}.icon-only{width:34px;height:34px;border:0;border-radius:50%;color:#fff;background:#ef645a;cursor:pointer}.quote-cart-summary{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-top:22px}.quote-cart-summary>div:first-child{display:flex;gap:16px;align-items:baseline}.quote-cart-summary strong{color:var(--pink-deep);font-size:22px}.quote-cart-actions{display:flex;gap:9px}.quote-cart-modal-item{display:flex;gap:13px;padding:13px 0;border-bottom:1px solid var(--line)}.quote-cart-thumb{width:68px;height:68px;flex:0 0 68px;overflow:hidden;border-radius:7px;background:var(--pink-soft);display:grid;place-items:center}.quote-cart-thumb img{width:100%;height:100%;object-fit:cover}.quote-cart-modal-copy{flex:1}.quote-cart-modal-copy small{display:block;margin:4px 0 8px;color:var(--muted)}.quote-cart-modal-controls{display:flex;justify-content:space-between;align-items:center}.quote-qty{width:58px;padding:6px;border:1px solid var(--line);border-radius:5px}.quote-cart-modal-item.is-loading{opacity:.55}.quote-cart-modal-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:18px}.quote-cart-modal-footer strong{color:var(--pink-deep);font-size:20px}
.breadcrumbs{display:flex;gap:9px;align-items:center;padding-top:22px;padding-bottom:0;color:var(--muted);font-size:12px}.breadcrumbs a:hover{color:var(--pink-deep)}.related-products{padding-top:24px}.related-carousel{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px 2px 18px}.related-carousel .product-card{min-width:260px;max-width:280px;scroll-snap-align:start}.carousel-controls{display:flex;gap:6px}.carousel-controls button{width:34px;height:34px;border:1px solid var(--line);border-radius:50%;color:var(--pink-deep);background:#fff;cursor:pointer;font-size:22px}.about-cms-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.about-page-content{max-width:860px;margin:auto;min-height:300px}.warning-banner{position:fixed;z-index:30;left:0;right:0;bottom:0;padding:0;background:#22151d;box-shadow:0 -4px 18px rgba(0,0,0,.12)}.warning-banner img{display:block;width:100%;height:36px;object-fit:cover;object-position:center}
.dataTables_wrapper .dt-layout-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 0}.dataTables_wrapper .dt-layout-cell{display:flex;align-items:center;gap:8px}.dataTables_wrapper .dt-length,.dataTables_wrapper .dt-search{color:var(--muted);font-size:13px}.dataTables_wrapper .dt-search{text-align:right}.dataTables_wrapper .dt-paging{margin-left:auto}.dataTables_wrapper .dt-paging button{min-width:32px;min-height:32px;margin-left:4px}.admin-actions{min-width:180px;text-align:right!important;white-space:nowrap}.admin-actions .button{margin-left:5px}.product-image,.article-visual,.cart-thumb-image,.warning-banner{background-size:cover;background-position:center;background-repeat:no-repeat}.profile-divider{margin:24px 0;border:0;border-top:1px solid var(--line)}
@media(max-width:800px){.announcement{gap:12px;padding-inline:8px;font-size:10px}.header-inner{gap:12px;padding-inline:12px}.brand-copy,.main-nav{display:none}.header-actions{gap:10px}.icon-action span{display:none}.icon-action i{font-size:19px}.desktop-only{display:none}.site-search-form{flex-wrap:wrap}.site-search-form input{flex-basis:100%}.quote-cart-summary{align-items:stretch;flex-direction:column}.quote-cart-actions{justify-content:stretch}.quote-cart-actions .button{flex:1}.about-cms-grid{grid-template-columns:1fr}.warning-banner img{height:28px}.dataTables_wrapper .dt-layout-row{align-items:stretch;flex-direction:column;gap:6px}.dataTables_wrapper .dt-layout-cell,.dataTables_wrapper .dt-search{justify-content:flex-start;text-align:left}.dataTables_wrapper .dt-paging{margin-left:0}.admin-actions{min-width:160px}}
.product-image-real img{display:block;width:100%;height:100%;min-height:220px;object-fit:cover;object-position:center}.product-image-empty{display:grid;place-items:center}.quote-cart-modal-item.is-loading:after{content:' ';width:16px;height:16px;border:2px solid var(--pink);border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}

/* 本輪導覽與詢價車修正 */
.logout-inline{display:inline-flex;margin:0;padding:0}.logout-inline .icon-action{padding:0}.mobile-menu{order:0}.product-image-real::before,.product-image-real::after,.product-image-empty::before,.product-image-empty::after,.product-image .bottle-label{display:none!important}.product-image-real img{position:relative;z-index:1;display:block;width:100%;height:100%;min-height:220px;object-fit:cover;object-position:center}.button-continue{color:#fff!important;background:linear-gradient(135deg,#d6a04d,#a96a1f)!important;border-color:#b77d2b!important}.modal-box .button-continue{color:#fff!important}.quote-cart-modal-footer{flex-wrap:wrap}.quote-cart-modal-footer .button-continue{background:linear-gradient(135deg,var(--pink),var(--pink-deep))!important;border-color:var(--pink-deep)!important}.footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr 1.3fr}.header-actions .cart-count{display:inline-grid!important}.main-nav a i{margin-right:6px}
@media(max-width:700px){.mobile-menu{display:block;order:2;margin-left:auto}.header-actions{order:3}.main-nav{top:64px}.header-actions .icon-action span{display:none}.header-actions .icon-action .cart-count{display:inline-grid!important;margin-left:2px}.header-actions .quote-cart-trigger{font-size:0}.header-actions .quote-cart-trigger i{font-size:19px}.header-actions .quote-cart-trigger .cart-count{font-size:11px}.footer-grid{grid-template-columns:1fr 1fr}.footer-grid>div:first-child{grid-column:1/-1}.quote-cart-modal-footer .button{flex:1;min-width:130px}}



/* 10-12-C 會員登入、訪客詢價車與搜尋區修正 */
.site-search-panel{background:var(--pink-soft)!important;border-bottom:1px solid var(--line)}
.site-search-form{max-width:1180px;margin:0 auto;padding:14px 24px}
.site-search-form .button-muted{color:#6f1747;border-color:#6f1747;background:#fff}
.site-search-form .button-muted:hover{color:#fff;background:#6f1747;border-color:#6f1747}
.modal-account-links{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;margin:16px 0 0;color:var(--muted);font-size:13px}
.modal-account-links .modal-forgot{margin:0}.modal-register{min-height:34px;padding:0 13px;font-size:12px}
.footer-contact-item{display:flex;align-items:center;gap:12px;margin:0 0 12px}.footer-contact-item i{width:20px;color:#ff7bc2;text-align:center;font-size:17px}.footer-contact-item a{margin:0!important}
.modal-cart-login p{margin:12px 0 16px}
@media(max-width:700px){.site-search-form{padding:10px 16px;gap:6px}.site-search-form input{min-width:0;padding:9px 10px}.site-search-form .button{min-height:34px;padding:0 10px;border-radius:8px;font-size:12px}.site-search-form .button-primary{font-size:0}.site-search-form .button-primary i{font-size:14px}.site-search-form .button-muted{font-size:0}.site-search-form .button-muted::after{content:'清除';font-size:12px}.modal-account-links{gap:8px}}
CSS
php -l /home/ubuntu/heavenly-cellar-php/app/bootstrap.php && php -l /home/ubuntu/heavenly-cellar-php/app/views/layout.php && php -l /home/ubuntu/heavenly-cellar-php/public/api/auth.php && php -l /home/ubuntu/heavenly-cellar-php/public/index.php


/* 10-13 商品匯入 CMS */
.import-step{display:flex;gap:18px;align-items:flex-start;margin-top:22px}.import-step-number{width:34px;height:34px;display:grid;place-items:center;flex:0 0 34px;border-radius:50%;color:#fff;background:var(--pink-deep);font-weight:700}.import-step h2{margin:0 0 8px}.import-step p{margin:0 0 15px;color:var(--muted)}.import-url-form{display:flex;gap:10px;align-items:center;margin:14px 0}.import-url-input{width:min(680px,70vw);padding:13px 15px;border:1px solid var(--line);border-radius:9px}.import-url-input:focus{border-color:var(--pink);outline:0;box-shadow:0 0 0 3px rgba(255,20,147,.12)}.import-step small{color:var(--muted)}.import-select-tools{display:flex;gap:24px;align-items:center;margin:14px 0;padding:12px;background:var(--pink-soft);border-radius:9px}.import-select-tools strong{color:var(--pink-deep)}.import-thumb{width:58px;height:58px;display:grid;place-items:center;overflow:hidden;border-radius:8px;background:var(--pink-soft)}.import-thumb img{width:100%;height:100%;object-fit:cover}.import-table td small{display:block;margin-top:4px;color:var(--muted)}.import-table td:nth-child(1),.import-table th:nth-child(1){text-align:center}.import-confirm{display:flex;gap:18px;align-items:flex-start;margin-top:24px;padding-top:22px;border-top:1px solid var(--line)}.import-result{margin-top:22px;padding:17px 20px;border:1px solid #a9dec5;border-radius:12px;color:#17683f;background:#effaf4}.import-step-four{border-left:4px solid var(--gold)}
@media(max-width:700px){.import-step{gap:12px;padding:18px}.import-url-form{align-items:stretch;flex-direction:column}.import-url-input{width:100%}.import-url-form .button{width:100%}.import-select-tools{align-items:flex-start;flex-direction:column;gap:8px}.import-table{min-width:660px}}
CSS


/* 2026-10-14 前台與 CMS 互動升級 */
.product-price,.detail-price-row,.quote-row-total{justify-content:flex-end;text-align:right}.product-price strong,.product-price del{font-size:.9rem}.product-image-wrap{position:relative}.preorder-badge{position:absolute;left:12px;top:22px;padding:4px 8px;border-radius:999px;background:#8c174a;color:#fff;font-size:11px;font-weight:700;z-index:2}.quote-cart-modal-footer{display:flex;align-items:center;justify-content:space-between;gap:16px}.quote-cart-modal-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px}.quote-cart-modal-controls{display:flex;align-items:center;gap:8px}.quote-modal-remove{color:#8c174a}.quote-cart-modal-item.is-loading,.quote-row.is-loading{opacity:.55}.quote-cart-modal-item .quote-cart-line-total{margin-left:auto;text-align:right;font-size:.88rem}.quote-cart-table td:nth-child(6),.quote-cart-table td:nth-child(7){text-align:right}.quote-cart-table td:nth-child(6){font-size:.86rem}.quote-cart-summary{display:flex;justify-content:flex-end;text-align:right}.quote-cart-summary>div:first-child{min-width:180px}.quote-cart-summary strong[data-quote-total]{font-size:1.15rem}.breadcrumbs{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.related-carousel{display:flex;overflow-x:auto;gap:18px;scroll-behavior:smooth;scroll-snap-type:x mandatory}.related-carousel .product-card{min-width:250px;scroll-snap-align:start}.carousel-controls{display:flex;gap:8px}.carousel-controls button{width:36px;height:36px;border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--pink-deep);font-size:22px}.carousel-indicators{display:flex;justify-content:center;gap:6px;margin:15px 0}.carousel-indicators button{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:#d8a7c2}.carousel-indicators button:first-child{background:var(--pink-deep)}.cms-status-tabs{display:flex;gap:0;border-bottom:1px solid var(--line);margin:10px 0 14px}.cms-status-tabs a{padding:11px 22px;color:var(--muted);border-bottom:3px solid transparent}.cms-status-tabs a.is-active{color:var(--pink-deep);border-color:var(--pink-deep);font-weight:700}.data-table tbody tr:hover,.table tbody tr:hover{background:#fff0f8!important}.upload-library{grid-column:1/-1;margin:8px 0 14px;padding:12px;border:1px solid var(--line);border-radius:10px}.upload-library-grid{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.upload-library-item{width:68px;height:68px;padding:3px;border:2px solid transparent;border-radius:7px;background:#fff;cursor:pointer}.upload-library-item:hover,.upload-library-item.is-selected{border-color:var(--pink-deep);box-shadow:0 0 0 2px rgba(255,20,147,.12)}.upload-library-item img{width:100%;height:100%;object-fit:cover;border-radius:4px}.auction-toggle-form{display:flex;align-items:center;gap:8px}.switch{position:relative;display:inline-block;width:42px;height:23px}.switch input{width:0;height:0;opacity:0}.slider{position:absolute;inset:0;cursor:pointer;border-radius:23px;background:#c7c7c7;transition:.2s}.slider:before{position:absolute;content:"";width:17px;height:17px;left:3px;top:3px;border-radius:50%;background:#fff;transition:.2s}.switch input:checked+.slider{background:#198754}.switch input:checked+.slider:before{transform:translateX(19px)}.preview-modal-backdrop{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:20px;background:rgba(33,12,24,.6)}.preview-modal{position:relative;width:min(900px,96vw);max-height:90vh;overflow:auto;padding:28px;border-radius:16px;background:#fff}.preview-modal h2{margin-top:0}.preview-grid{display:grid;grid-template-columns:minmax(220px,.8fr) 1.2fr;gap:24px}.preview-detail{padding:20px;border-left:1px solid var(--line)}
@media(max-width:700px){.quote-cart-modal-footer{align-items:stretch;flex-direction:column}.quote-cart-modal-actions{flex-wrap:wrap}.quote-cart-modal-actions .button{flex:1}.quote-cart-summary{justify-content:stretch}.quote-cart-summary>div:first-child{width:100%}.preview-grid{grid-template-columns:1fr}.preview-detail{border-left:0;border-top:1px solid var(--line)}}


/* CMS 圖片資料夾 Modal 與詢價車互動修正版 */
.cms-status-tabs{border:1px solid var(--line);border-radius:10px;background:#fff;padding:4px;display:inline-flex;gap:4px;overflow:hidden}
.cms-status-tabs a{border:1px solid transparent;border-radius:7px;padding:10px 22px;text-decoration:none}
.cms-status-tabs a.is-active{background:var(--pink-deep);border-color:var(--pink-deep);color:#fff;box-shadow:0 2px 8px rgba(140,23,74,.2)}
.upload-library-open{margin:4px 0 0}
.upload-library-modal{position:fixed;inset:0;z-index:1200;display:none;place-items:center;padding:20px;background:rgba(33,12,24,.62)}
.upload-library-modal.is-open{display:grid}
.upload-library-modal-box{position:relative;width:min(860px,96vw);max-height:88vh;overflow:auto;padding:30px;border-radius:16px;background:#fff;box-shadow:0 20px 70px rgba(33,12,24,.3)}
.upload-library-modal-box h3{margin:0 0 18px;color:var(--pink-deep)}
.upload-library-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px;margin-top:12px}
.upload-library-item{width:100%;min-height:180px;padding:8px;border:2px solid #ead5e0;border-radius:10px;background:#fff;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;color:var(--pink-deep);transition:.2s}
.upload-library-item:hover,.upload-library-item.is-selected{border-color:var(--pink-deep);box-shadow:0 0 0 3px rgba(255,20,147,.14);transform:translateY(-2px)}
.upload-library-item img{display:block;width:100%;max-width:200px;height:160px;object-fit:cover;border-radius:6px}
.upload-library-item span{font-size:.82rem;font-weight:700}
#admin-imageUrl{cursor:pointer;background:#fffafd}
.quote-cart-modal-item,.quote-row{transition:opacity .2s,background .2s}
.quote-cart-modal-item.is-loading,.quote-row.is-loading{pointer-events:none}
@media(max-width:700px){.upload-library-modal-box{padding:22px 16px}.upload-library-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.upload-library-item{min-height:130px}.upload-library-item img{height:105px}}