/* ==========================================================================
   TMR COMBO BUILDER - PREMIUM LUXURY UI (V1.6.4 COMPACT REDESIGN)
   Tone: Đỏ Booc-đô (#8B1A2B), Vàng Gold (#C5A44E), Kem (#FCFAF6)
   ========================================================================== */

:root {
  --tmr-maroon: #8B1A2B;
  --tmr-maroon-dark: #630C1A;
  --tmr-maroon-light: #FBF0F2;
  --tmr-gold: #C5A44E;
  --tmr-gold-dark: #9A7C2C;
  --tmr-gold-light: #FBF7EE;
  --tmr-gold-border: rgba(197, 164, 78, 0.35);
  --tmr-cream: #FCFAF6;
  --tmr-cream-card: #F7F3EA;
  --tmr-dark: #231F20;
  --tmr-muted: #6B6865;
  --tmr-border: #E8E2D6;
  --tmr-white: #FFFFFF;
  --tmr-green: #2E7D32;
  --tmr-radius: 12px;
  --tmr-radius-sm: 8px;
  --tmr-shadow: 0 4px 16px rgba(35, 31, 32, 0.06);
  --tmr-shadow-lg: 0 10px 30px rgba(35, 31, 32, 0.1);
}

#tmr-combo-app {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  color: var(--tmr-dark) !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 12px 14px !important;
  box-sizing: border-box !important;
  line-height: 1.45 !important;
}

#tmr-combo-app *,
#tmr-combo-app *::before,
#tmr-combo-app *::after {
  box-sizing: border-box !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   BỐ CỤC TỔNG THỂ 2 CỘT (DESKTOP & TABLET)
   ══════════════════════════════════════════════════════════════════════════ */
#tmr-combo-app .tmr-main-layout {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  width: 100% !important;
}

/* Desktop: Trái (64%) & Phải (36%) */
@media (min-width: 992px) {
  #tmr-combo-app .tmr-main-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1.85fr) minmax(0, 1.15fr) !important;
    gap: 20px !important;
    align-items: start !important;
  }
}

/* Tablet (768px - 991px): 58% & 42% */
@media (min-width: 768px) and (max-width: 991px) {
  #tmr-combo-app .tmr-main-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1.3fr) !important;
    gap: 16px !important;
    align-items: start !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   CỘT TRÁI: HỘP QUÀ 3D + KHUNG CHỌN SẢN PHẨM
   ══════════════════════════════════════════════════════════════════════════ */
#tmr-combo-app .tmr-left-col {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

/* ── 1. KHUNG QUÀ TẶNG (CÁC BƯỚC Ở TRÊN CÙNG + HỘP 3D) ── */
#tmr-combo-app .tmr-box-preview-card {
  background: var(--tmr-cream) !important;
  border: 1.5px solid var(--tmr-gold-border) !important;
  border-radius: var(--tmr-radius) !important;
  padding: 10px 12px !important;
  box-shadow: var(--tmr-shadow) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  position: relative !important;
}

/* Thanh các bước đặt trên cùng mô phỏng hộp quà */
#tmr-combo-app .tmr-steps-header {
  width: 100% !important;
}

#tmr-combo-app .tmr-steps {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 6px !important;
}

#tmr-combo-app .tmr-step-ind {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  padding: 6px 4px !important;
  background: var(--tmr-white) !important;
  color: var(--tmr-muted) !important;
  border: 1.5px solid var(--tmr-border) !important;
  border-radius: 20px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.22s ease !important;
  text-decoration: none !important;
  outline: none !important;
}

#tmr-combo-app .tmr-step-ind:hover:not(:disabled) {
  border-color: var(--tmr-gold) !important;
  background: var(--tmr-gold-light) !important;
  color: var(--tmr-dark) !important;
}

#tmr-combo-app .tmr-step-ind:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  background: #fbfaf8 !important;
}

#tmr-combo-app .tmr-step-num {
  width: 17px !important;
  height: 17px !important;
  border-radius: 50% !important;
  background: #ede9e1 !important;
  color: var(--tmr-dark) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  flex-shrink: 0 !important;
}

/* Active Step */
#tmr-combo-app .tmr-step-ind.tmr-active {
  background: var(--tmr-maroon) !important;
  color: var(--tmr-white) !important;
  border-color: var(--tmr-maroon) !important;
  box-shadow: 0 2px 8px rgba(139,26,43,0.25) !important;
}

#tmr-combo-app .tmr-step-ind.tmr-active .tmr-step-num {
  background: var(--tmr-white) !important;
  color: var(--tmr-maroon) !important;
}

/* Completed Step */
#tmr-combo-app .tmr-step-ind.tmr-completed:not(.tmr-active) .tmr-step-num {
  background: var(--tmr-gold) !important;
  color: var(--tmr-white) !important;
}

@media (max-width: 520px) {
  #tmr-combo-app .tmr-step-text { display: none !important; }
  #tmr-combo-app .tmr-step-ind { padding: 5px 2px !important; border-radius: 6px !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   HỘP QUÀ = ẢNH THỰC TẾ LÀM GIAO DIỆN
   Ảnh hộp quà thật hiển thị nguyên bản, các vùng click TRONG SUỐT đặt
   chồng lên đúng vị trí từng ngăn khay trong ảnh.
   Kích thước thực tế:
   - Hộp đóng: 23cm (ngang) × 30cm (cao)
   - Hộp bung: 46.5cm (ngang) × 30cm (cao)
   - Quà nhỏ: 8cm × 11cm | Quà lớn: 8cm × 15cm
   ══════════════════════════════════════════════════════════════════════════ */

#tmr-combo-app .tmr-scene {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  --tmr-box-height: clamp(280px, 34vw, 480px);
}

/*
 * Hộp đóng giữ đúng tỉ lệ 23 : 30. Khi mở, chiều cao giữ nguyên và
 * chiều ngang tăng lên 46.5 : 30, tương đương kích thước hộp thực tế.
 */
#tmr-combo-app .tmr-box {
  position: relative !important;
  width: calc(var(--tmr-box-height) * 0.766667) !important;
  height: var(--tmr-box-height) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.25) !important;
  line-height: 0 !important;
  transition: width 0.9s cubic-bezier(0.22, 0.8, 0.28, 1), box-shadow 0.35s ease !important;
}

#tmr-combo-app .tmr-box.tmr-box-open {
  width: calc(var(--tmr-box-height) * 1.55) !important;
  box-shadow: 0 12px 34px rgba(0,0,0,0.28) !important;
}

/* Ảnh mặt trong luôn có tỉ lệ 46.5 : 30 khi hộp đã bung. */
#tmr-combo-app .tmr-box-photo {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 8px !important;
}

@media (max-width: 767px) {
  #tmr-combo-app .tmr-scene {
    --tmr-box-height: clamp(160px, 54vw, 300px);
  }
}

/* ── CÁC VÙNG CLICK TRONG SUỐT CHỒNG LÊN ẢNH ──
   Toạ độ % đo từ ảnh đã crop (732×469px)
   Cánh trái:  left≈2.5%,  width≈17.2% (= 8cm / 46.5cm)
   Cánh phải:  left≈80.3%, width≈17.2% (= 8cm / 46.5cm)
   Quà nhỏ:    top≈8%,     height≈36.7% (= 11cm / 30cm)
   Quà lớn:    top≈49%,    height≈50% (= 15cm / 30cm)
   Chai rượu:  left≈34%,   width≈32%, top≈4%, height≈92%
   ────────────────────────────────────────────── */

#tmr-combo-app .tmr-overlay-slot {
  position: absolute !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  border: 2px dashed transparent !important;
  border-radius: 6px !important;
  background: transparent !important;
  transition: all 0.25s ease !important;
  overflow: hidden !important;
  padding: 3px !important;
  box-sizing: border-box !important;
  line-height: 1.3 !important;
}

/* Hover: viền vàng nhẹ hiện ra trên ảnh hộp */
#tmr-combo-app .tmr-overlay-slot:hover {
  border-color: rgba(197, 164, 78, 0.7) !important;
  background: rgba(197, 164, 78, 0.12) !important;
}

/* Khi đã chọn quà: nền trắng mờ + viền vàng */
#tmr-combo-app .tmr-overlay-slot.tmr-slot-filled {
  border: 2px solid var(--tmr-gold) !important;
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow: 0 3px 12px rgba(0,0,0,0.3) !important;
}

/* Hộp quà mẫu hiển thị vừa khít trong từng khoang của cánh hộp. */
#tmr-combo-app .tmr-overlay-slot.tmr-slot-filled:has(.tmr-gift-box-card) {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Fallback cho trình duyệt cũ chưa hỗ trợ :has(). */
#tmr-combo-app #tmr-slot-sl.tmr-slot-filled,
#tmr-combo-app #tmr-slot-sr.tmr-slot-filled,
#tmr-combo-app #tmr-slot-ll.tmr-slot-filled,
#tmr-combo-app #tmr-slot-lr.tmr-slot-filled {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

#tmr-combo-app .tmr-gift-box-card {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  border-radius: 2px !important;
  line-height: 1 !important;
}

#tmr-combo-app .tmr-overlay-slot .tmr-gift-box-card img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: fill !important;
}

#tmr-combo-app .tmr-gift-box-name {
  position: absolute !important;
  top: 51% !important;
  left: 8% !important;
  right: 8% !important;
  transform: translateY(-50%) !important;
  color: #fff9e7 !important;
  font-size: clamp(7px, 0.82vw, 12px) !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  text-shadow: 0 1px 3px rgba(72, 0, 8, 0.85) !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 3 !important;
}

/* ── VỊ TRÍ % CÁC Ô TRÊN ẢNH ── */

/*
 * Các ô quà được lùi vào trong phần khay đỏ của hai cánh hộp.  Không dùng
 * toàn bộ chiều rộng/cao của cánh để ảnh quà luôn nằm gọn trong viền hộp,
 * giống bố cục hộp quà thực tế.
 */
/* Cánh trái - Quà nhỏ 1 (trên) */
#tmr-combo-app #tmr-slot-sl {
  left: 3.8% !important;
  top: 10.5% !important;
  width: 15.8% !important;
  height: 34.5% !important;
}
/* Cánh trái - Quà lớn 1 (dưới) */
#tmr-combo-app #tmr-slot-ll {
  left: 3.8% !important;
  top: 49% !important;
  width: 15.8% !important;
  height: 44.5% !important;
}
/* Giữa - Chai rượu (khuôn dập nổi) */
#tmr-combo-app #tmr-slot-bottle {
  left: 34% !important;
  top: 4% !important;
  width: 32% !important;
  height: 92% !important;
}
/* Cánh phải - Quà nhỏ 2 (trên) */
#tmr-combo-app #tmr-slot-sr {
  left: 80.4% !important;
  top: 10.5% !important;
  width: 15.8% !important;
  height: 34.5% !important;
}
/* Cánh phải - Quà lớn 2 (dưới) */
#tmr-combo-app #tmr-slot-lr {
  left: 80.4% !important;
  top: 49% !important;
  width: 15.8% !important;
  height: 44.5% !important;
}

/* ── CHAI RƯỢU KHI CHỌN: trong suốt, chai nổi trên khuôn ── */
#tmr-combo-app #tmr-slot-bottle.tmr-slot-filled {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

#tmr-combo-app #tmr-slot-bottle.tmr-slot-filled img.tmr-bottle-img {
  max-height: 85% !important;
  max-width: 80% !important;
  object-fit: contain !important;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,0.65)) !important;
}

#tmr-combo-app #tmr-slot-bottle.tmr-slot-filled .tmr-bottle-lbl {
  background: rgba(20, 2, 5, 0.88) !important;
  color: #F8D37E !important;
  border: 1px solid rgba(197, 164, 78, 0.5) !important;
  padding: 2px 8px !important;
  border-radius: 10px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  margin-top: 4px !important;
  white-space: nowrap !important;
  max-width: 95% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* ── ẢNH QUÀ TRONG Ô ── */
#tmr-combo-app .tmr-overlay-slot img {
  max-width: 85% !important;
  max-height: 60% !important;
  object-fit: contain !important;
}

#tmr-combo-app .tmr-slot-placeholder {
  font-size: 9.5px !important;
  font-weight: 700 !important;
  color: rgba(197, 164, 78, 0.8) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
  text-align: center !important;
  line-height: 1.2 !important;
}

#tmr-combo-app .tmr-overlay-slot .tmr-lbl,
#tmr-combo-app .tmr-overlay-slot .tmr-bottle-lbl {
  font-size: 9px !important;
  font-weight: 700 !important;
  text-align: center !important;
  max-width: 95% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#tmr-combo-app .tmr-slot-tag {
  font-size: 8.5px !important;
  font-weight: 700 !important;
  color: var(--tmr-maroon-dark) !important;
  margin-top: 1px !important;
  text-align: center !important;
  max-width: 95% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

@media (max-width: 600px) {
  #tmr-combo-app .tmr-slot-placeholder {
    font-size: 7px !important;
  }
  #tmr-combo-app .tmr-slot-tag {
    font-size: 7px !important;
  }
  #tmr-combo-app #tmr-slot-bottle.tmr-slot-filled .tmr-bottle-lbl {
    font-size: 8px !important;
    padding: 1px 4px !important;
  }
}

/* ── NẮP HỘP (2 Cánh) ── */
#tmr-combo-app .tmr-scene {
  perspective: 1200px !important;
}

#tmr-combo-app .tmr-doors-container {
  position: absolute !important;
  inset: 0 !important;
  z-index: 10 !important;
  perspective: 1400px !important;
  transform-style: preserve-3d !important;
}

#tmr-combo-app .tmr-door {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 50% !important;
  background-image: url('images/tmr-box-closed.png');
  background-size: 200% 100% !important;
  background-repeat: no-repeat !important;
  transition: transform 0.9s cubic-bezier(0.22, 0.8, 0.28, 1), opacity 0.18s ease !important;
  box-shadow: inset 0 0 10px rgba(0,0,0,0.3) !important;
  backface-visibility: hidden !important;
  will-change: transform, opacity !important;
}

#tmr-combo-app .tmr-door-left {
  left: 0 !important;
  background-position: left center !important;
  transform-origin: left center !important;
}

#tmr-combo-app .tmr-door-right {
  right: 0 !important;
  background-position: right center !important;
  transform-origin: right center !important;
}

/* Khi mở nắp */
#tmr-combo-app .tmr-doors-container.tmr-open {
  pointer-events: none !important;
}

#tmr-combo-app .tmr-doors-container.tmr-open .tmr-door-left {
  transform: rotateY(-102deg) translateZ(1px) !important;
  opacity: 0 !important;
  transition-delay: 0s, 0.58s !important;
}

#tmr-combo-app .tmr-doors-container.tmr-open .tmr-door-right {
  transform: rotateY(102deg) translateZ(1px) !important;
  opacity: 0 !important;
  transition-delay: 0s, 0.58s !important;
}

/* Lớp text "Chọn rượu" phủ lên nắp */
#tmr-combo-app .tmr-lid-text-overlay {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  text-align: center !important;
  background: rgba(40, 4, 9, 0.8) !important;
  padding: 12px 20px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(197, 164, 78, 0.5) !important;
  color: #fff !important;
  transition: opacity 0.3s ease !important;
  z-index: 11 !important;
}

#tmr-combo-app .tmr-doors-container.tmr-open .tmr-lid-text-overlay {
  opacity: 0 !important;
  pointer-events: none !important;
}

#tmr-combo-app .tmr-lid-emblem {
  font-size: 26px !important;
  margin-bottom: 4px !important;
}

#tmr-combo-app .tmr-lid-text {
  color: #FFFFFF !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  margin: 0 !important;
}

/* Điều khiển mở/đóng nằm ngoài ảnh để không che sản phẩm trong hộp. */
#tmr-combo-app .tmr-box-controls {
  display: flex !important;
  justify-content: center !important;
  margin-top: 2px !important;
}

#tmr-combo-app .tmr-box-toggle {
  appearance: none !important;
  border: 1px solid var(--tmr-gold-dark) !important;
  border-radius: 999px !important;
  background: var(--tmr-maroon) !important;
  color: var(--tmr-white) !important;
  padding: 7px 14px !important;
  font: inherit !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  cursor: pointer !important;
  box-shadow: 0 3px 8px rgba(99, 12, 26, 0.2) !important;
  transition: transform 0.2s ease, background 0.2s ease, opacity 0.2s ease !important;
}

#tmr-combo-app .tmr-box-toggle:hover:not(:disabled) {
  background: var(--tmr-maroon-dark) !important;
  transform: translateY(-1px) !important;
}

#tmr-combo-app .tmr-box-toggle:disabled {
  cursor: not-allowed !important;
  opacity: 0.62 !important;
  background: #8f817f !important;
  border-color: #8f817f !important;
}

#tmr-combo-app .tmr-pop-in {
  animation: tmrPopIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

@keyframes tmrPopIn {
  from { opacity: 0; transform: scale(0.6); }
  to { opacity: 1; transform: scale(1); }
}

/* Status Pills under Box */
#tmr-combo-app .tmr-box-status-pills {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

#tmr-combo-app .tmr-pill {
  flex: 1 !important;
  min-width: 75px !important;
  background: var(--tmr-white) !important;
  border: 1px solid var(--tmr-border) !important;
  border-radius: 20px !important;
  padding: 3px 6px !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  color: var(--tmr-muted) !important;
  text-align: center !important;
  white-space: nowrap !important;
}

#tmr-combo-app .tmr-pill span {
  color: var(--tmr-maroon) !important;
  font-weight: 800 !important;
}


/* ── 2. KHU VỰC CHỌN SẢN PHẨM & QUÀ TẶNG (TÍCH HỢP NÚT TIẾP THEO NHỎ GỌN) ── */
#tmr-combo-app .tmr-selection-section {
  background: var(--tmr-white) !important;
  border: 1.5px solid var(--tmr-border) !important;
  border-radius: var(--tmr-radius) !important;
  padding: 12px 14px !important;
  box-shadow: var(--tmr-shadow) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

/* Thanh Header nhỏ gọn tích hợp tiêu đề bước + nút chuyển */
#tmr-combo-app .tmr-selection-topbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding-bottom: 8px !important;
  border-bottom: 1.5px dashed var(--tmr-gold-border) !important;
}

#tmr-combo-app .tmr-step-desc-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 13.5px !important;
  color: var(--tmr-dark) !important;
}

#tmr-combo-app .tmr-step-desc-icon {
  font-size: 14px !important;
}

#tmr-combo-app .tmr-step-desc-text strong {
  color: var(--tmr-maroon) !important;
  font-weight: 800 !important;
}

#tmr-combo-app .tmr-badge-count {
  font-weight: 800 !important;
  color: var(--tmr-maroon) !important;
  background: var(--tmr-maroon-light) !important;
  padding: 1px 6px !important;
  border-radius: 4px !important;
  margin-left: 4px !important;
}

/* Nút điều hướng nhỏ gọn (Compact Navigation Buttons) */
#tmr-combo-app .tmr-nav-compact {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

#tmr-combo-app .tmr-btn-sm {
  padding: 5px 12px !important;
  font-size: 12.5px !important;
  border-radius: 6px !important;
  height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

#tmr-combo-app .tmr-btn-primary.tmr-btn-sm {
  background: var(--tmr-maroon) !important;
  color: var(--tmr-white) !important;
  border: none !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(139,26,43,0.22) !important;
}

#tmr-combo-app .tmr-btn-primary.tmr-btn-sm:hover:not(:disabled) {
  background: var(--tmr-maroon-dark) !important;
  box-shadow: 0 3px 10px rgba(139,26,43,0.3) !important;
}

#tmr-combo-app .tmr-btn-primary.tmr-btn-sm:disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

#tmr-combo-app .tmr-btn-ghost.tmr-btn-sm {
  background: var(--tmr-white) !important;
  border: 1px solid var(--tmr-border) !important;
  color: var(--tmr-muted) !important;
  font-weight: 600 !important;
}

#tmr-combo-app .tmr-btn-ghost.tmr-btn-sm:hover {
  border-color: var(--tmr-dark) !important;
  color: var(--tmr-dark) !important;
  background: var(--tmr-cream) !important;
}

#tmr-combo-app .tmr-spinner {
  width: 12px !important;
  height: 12px !important;
  border: 2px solid rgba(255,255,255,0.3) !important;
  border-top-color: #ffffff !important;
  border-radius: 50% !important;
  animation: tmrSpin 0.7s linear infinite !important;
  display: inline-block !important;
}

@keyframes tmrSpin { to { transform: rotate(360deg); } }

/* Step Panels */
#tmr-combo-app .tmr-step-panel {
  width: 100% !important;
  animation: tmrFadeSlide 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

@keyframes tmrFadeSlide {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Product Cards Grid */
#tmr-combo-app .tmr-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
  gap: 10px !important;
}

@media (min-width: 1200px) {
  #tmr-combo-app .tmr-grid {
    grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)) !important;
  }
}

#tmr-combo-app .tmr-card {
  background: var(--tmr-white) !important;
  border: 1.5px solid var(--tmr-border) !important;
  border-radius: var(--tmr-radius-sm) !important;
  padding: 8px 8px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  cursor: pointer !important;
  position: relative !important;
  transition: all 0.22s ease !important;
  background-clip: padding-box !important;
}

#tmr-combo-app .tmr-card:hover {
  border-color: var(--tmr-gold) !important;
  box-shadow: 0 4px 12px rgba(197, 164, 78, 0.2) !important;
  transform: translateY(-2px) !important;
}

#tmr-combo-app .tmr-card.tmr-selected {
  border-color: var(--tmr-maroon) !important;
  background: var(--tmr-maroon-light) !important;
  box-shadow: 0 0 0 1.5px var(--tmr-maroon), 0 4px 14px rgba(139, 26, 43, 0.18) !important;
}

#tmr-combo-app .tmr-card-badge-check {
  position: absolute !important;
  top: 6px !important;
  right: 6px !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background: var(--tmr-border) !important;
  color: var(--tmr-white) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  transition: all 0.2s ease !important;
}

#tmr-combo-app .tmr-card.tmr-selected .tmr-card-badge-check {
  background: var(--tmr-maroon) !important;
  transform: scale(1.08) !important;
}

#tmr-combo-app .tmr-ic {
  width: 100% !important;
  height: 80px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 6px !important;
  overflow: hidden !important;
}

#tmr-combo-app .tmr-ic img {
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  transition: transform 0.3s ease !important;
}

#tmr-combo-app .tmr-card:hover .tmr-ic img {
  transform: scale(1.05) !important;
}

#tmr-combo-app .tmr-ic-fallback {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: var(--tmr-cream-card) !important;
  color: var(--tmr-gold-dark) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  font-weight: 800 !important;
}

#tmr-combo-app .tmr-card-info {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

#tmr-combo-app .tmr-nm {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: var(--tmr-dark) !important;
  margin: 0 !important;
  line-height: 1.3 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  min-height: 30px !important;
}

#tmr-combo-app .tmr-pr {
  font-size: 12.5px !important;
  font-weight: 800 !important;
  color: var(--tmr-maroon) !important;
  margin: 0 !important;
}

/* Card Drawer Accordion */
#tmr-combo-app .tmr-btn-drawer-toggle {
  margin-top: 4px !important;
  padding: 2px 6px !important;
  background: var(--tmr-cream) !important;
  border: 1px solid var(--tmr-border) !important;
  border-radius: 4px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  color: var(--tmr-muted) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  transition: all 0.18s ease !important;
  outline: none !important;
}

#tmr-combo-app .tmr-btn-drawer-toggle:hover {
  background: var(--tmr-gold-light) !important;
  color: var(--tmr-gold-dark) !important;
  border-color: var(--tmr-gold-border) !important;
}

#tmr-combo-app .tmr-card-drawer {
  width: 100% !important;
  max-height: 0 !important;
  overflow: hidden !important;
  transition: max-height 0.3s cubic-bezier(0, 1, 0, 1) !important;
  text-align: left !important;
  font-size: 10.5px !important;
  color: var(--tmr-dark) !important;
  line-height: 1.35 !important;
}

#tmr-combo-app .tmr-card.tmr-drawer-open .tmr-card-drawer {
  max-height: 160px !important;
  transition: max-height 0.35s ease-in-out !important;
}

#tmr-combo-app .tmr-drawer-inner {
  margin-top: 6px !important;
  padding: 6px 8px !important;
  background: var(--tmr-cream) !important;
  border-radius: 6px !important;
  border: 1px solid var(--tmr-gold-border) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}

#tmr-combo-app .tmr-drawer-item strong {
  color: var(--tmr-gold-dark) !important;
}

/* ── BƯỚC 4: CHI TIẾT CHỐT ĐƠN ── */
#tmr-combo-app .tmr-checkout-details-card {
  width: 100% !important;
}

#tmr-combo-app .tmr-checkout-table {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

#tmr-combo-app .tmr-checkout-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 6px 10px !important;
  background: var(--tmr-cream) !important;
  border: 1px solid var(--tmr-border) !important;
  border-radius: 8px !important;
}

#tmr-combo-app .tmr-checkout-item-main {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

#tmr-combo-app .tmr-checkout-thumb {
  width: 34px !important;
  height: 34px !important;
  border-radius: 6px !important;
  background: var(--tmr-white) !important;
  border: 1px solid var(--tmr-border) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}

#tmr-combo-app .tmr-checkout-thumb img {
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}

#tmr-combo-app .tmr-checkout-text {
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
}

#tmr-combo-app .tmr-checkout-badge {
  font-size: 9px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  display: inline-block !important;
  color: var(--tmr-muted) !important;
}

#tmr-combo-app .tmr-checkout-badge.tmr-badge-wine { color: var(--tmr-maroon) !important; }
#tmr-combo-app .tmr-checkout-badge.tmr-badge-box { color: var(--tmr-gold-dark) !important; }
#tmr-combo-app .tmr-checkout-badge.tmr-badge-small { color: var(--tmr-green) !important; }
#tmr-combo-app .tmr-checkout-badge.tmr-badge-large { color: #A83232 !important; }

#tmr-combo-app .tmr-checkout-name {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  margin: 0 !important;
  color: var(--tmr-dark) !important;
}

#tmr-combo-app .tmr-checkout-price {
  font-size: 12.5px !important;
  font-weight: 800 !important;
  color: var(--tmr-maroon) !important;
  white-space: nowrap !important;
}

#tmr-combo-app .tmr-checkout-summary-block {
  margin-top: 8px !important;
  padding: 8px 10px !important;
  background: var(--tmr-gold-light) !important;
  border: 1px solid var(--tmr-gold-border) !important;
  border-radius: 8px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

#tmr-combo-app .tmr-summary-line {
  display: flex !important;
  justify-content: space-between !important;
  font-size: 12px !important;
  color: var(--tmr-dark) !important;
}

#tmr-combo-app .tmr-summary-grand-total {
  border-top: 1.5px dashed var(--tmr-gold-border) !important;
  padding-top: 5px !important;
  margin-top: 2px !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
}

#tmr-combo-app .tmr-grand-price {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: var(--tmr-maroon) !important;
}

/* ── COMBO CÓ SẴN (GỢI Ý) ── */
#tmr-combo-app .tmr-combo-section {
  margin-top: 6px !important;
  padding-top: 8px !important;
  border-top: 1px dashed var(--tmr-border) !important;
}

#tmr-combo-app .tmr-combo-heading {
  font-size: 13.5px !important;
  font-weight: 800 !important;
  color: var(--tmr-maroon) !important;
  margin: 0 0 2px 0 !important;
}

#tmr-combo-app .tmr-combo-desc {
  font-size: 11px !important;
  color: var(--tmr-muted) !important;
  margin: 0 0 8px 0 !important;
}

#tmr-combo-app .tmr-combo-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
  gap: 8px !important;
}

#tmr-combo-app .tmr-combo-item {
  background: var(--tmr-cream) !important;
  border: 1px solid var(--tmr-gold-border) !important;
  border-radius: 8px !important;
  padding: 8px 10px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

#tmr-combo-app .tmr-combo-item:hover {
  background: var(--tmr-gold-light) !important;
  border-color: var(--tmr-gold) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(197,164,78,0.2) !important;
}

#tmr-combo-app .tmr-combo-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 8px !important;
}

#tmr-combo-app .tmr-cname {
  font-size: 12px !important;
  font-weight: 700 !important;
  margin: 0 0 2px 0 !important;
  color: var(--tmr-dark) !important;
}

#tmr-combo-app .tmr-cdesc {
  font-size: 10px !important;
  color: var(--tmr-muted) !important;
  margin: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 1 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

#tmr-combo-app .tmr-combo-action {
  text-align: right !important;
  flex-shrink: 0 !important;
}

#tmr-combo-app .tmr-cprice {
  font-size: 12px !important;
  font-weight: 800 !important;
  color: var(--tmr-maroon) !important;
  margin: 0 0 2px 0 !important;
}

#tmr-combo-app .tmr-combo-btn {
  display: inline-block !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  padding: 2px 6px !important;
  background: var(--tmr-maroon) !important;
  color: var(--tmr-white) !important;
  border-radius: 4px !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   CỘT PHẢI: BẢNG TÍNH TIỀN COMBO (STICKY SIDEBAR)
   ══════════════════════════════════════════════════════════════════════════ */
#tmr-combo-app .tmr-right-col {
  width: 100% !important;
}

#tmr-combo-app .tmr-sticky-sidebar {
  position: sticky !important;
  top: 16px !important;
  z-index: 20 !important;
}

#tmr-combo-app .tmr-price-calculator {
  background: var(--tmr-white) !important;
  border: 1.5px solid var(--tmr-gold-border) !important;
  border-radius: var(--tmr-radius) !important;
  padding: 12px 14px !important;
  box-shadow: var(--tmr-shadow-lg) !important;
}

#tmr-combo-app .tmr-calc-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding-bottom: 8px !important;
  border-bottom: 1.5px solid var(--tmr-gold-border) !important;
  margin-bottom: 8px !important;
}

#tmr-combo-app .tmr-calc-title {
  margin: 0 !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  color: var(--tmr-maroon) !important;
}

#tmr-combo-app .tmr-calc-badge {
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 2px 7px !important;
  border-radius: 12px !important;
  background: var(--tmr-gold-light) !important;
  color: var(--tmr-gold-dark) !important;
  border: 1px solid var(--tmr-gold-border) !important;
}

#tmr-combo-app .tmr-calc-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
}

#tmr-combo-app .tmr-calc-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  font-size: 11.5px !important;
  color: var(--tmr-dark) !important;
  padding: 3px 4px !important;
  border-radius: 4px !important;
  transition: background 0.15s ease !important;
}

#tmr-combo-app .tmr-calc-row-interactive {
  cursor: pointer !important;
}

#tmr-combo-app .tmr-calc-row-interactive:hover {
  background: var(--tmr-cream-card) !important;
}

#tmr-combo-app .tmr-calc-item-info {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  max-width: 70% !important;
}

#tmr-combo-app .tmr-calc-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}

#tmr-combo-app .tmr-dot-wine { background: var(--tmr-maroon) !important; }
#tmr-combo-app .tmr-dot-box { background: var(--tmr-gold) !important; }
#tmr-combo-app .tmr-dot-gift { background: var(--tmr-green) !important; }

#tmr-combo-app .tmr-calc-name {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  color: var(--tmr-muted) !important;
}

#tmr-combo-app .tmr-calc-val {
  font-weight: 700 !important;
  color: var(--tmr-dark) !important;
}

#tmr-combo-app .tmr-calc-row-box {
  background: var(--tmr-gold-light) !important;
  padding: 3px 6px !important;
  border-radius: 4px !important;
  margin: 1px 0 !important;
}

#tmr-combo-app .tmr-calc-row-box .tmr-calc-name {
  color: var(--tmr-gold-dark) !important;
  font-weight: 700 !important;
}

#tmr-combo-app .tmr-calc-subtotal {
  border-top: 1px dashed var(--tmr-border) !important;
  padding-top: 6px !important;
  margin-top: 2px !important;
  font-weight: 700 !important;
}

#tmr-combo-app .tmr-calc-val-subtotal {
  font-size: 13px !important;
  font-weight: 800 !important;
  color: var(--tmr-dark) !important;
}

/* Bộ chọn số lượng (Quantity Stepper) */
#tmr-combo-app .tmr-checkout-qty-card {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 6px 0 !important;
  margin: 2px 0 !important;
  border-top: 1px dashed var(--tmr-border) !important;
  border-bottom: 1px dashed var(--tmr-border) !important;
}

#tmr-combo-app .tmr-qty-title {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: var(--tmr-dark) !important;
}

#tmr-combo-app .tmr-qty-control {
  display: inline-flex !important;
  align-items: center !important;
  border: 1px solid var(--tmr-border) !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  background: var(--tmr-white) !important;
}

#tmr-combo-app .tmr-qty-btn {
  width: 26px !important;
  height: 26px !important;
  background: var(--tmr-cream) !important;
  border: none !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--tmr-dark) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.15s ease !important;
}

#tmr-combo-app .tmr-qty-btn:hover {
  background: var(--tmr-gold-light) !important;
  color: var(--tmr-maroon) !important;
}

#tmr-combo-app #tmr-qty-input {
  width: 34px !important;
  height: 26px !important;
  border: none !important;
  border-left: 1px solid var(--tmr-border) !important;
  border-right: 1px solid var(--tmr-border) !important;
  text-align: center !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  color: var(--tmr-dark) !important;
  padding: 0 !important;
  margin: 0 !important;
  -moz-appearance: textfield !important;
}

#tmr-combo-app #tmr-qty-input::-webkit-outer-spin-button,
#tmr-combo-app #tmr-qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

/* Tổng cộng cuối */
#tmr-combo-app .tmr-calc-total {
  font-size: 13px !important;
  font-weight: 800 !important;
  color: var(--tmr-dark) !important;
  padding-top: 4px !important;
}

#tmr-combo-app .tmr-calc-final-amt {
  font-size: 17px !important;
  font-weight: 800 !important;
  color: var(--tmr-maroon) !important;
}

/* Nút thêm vào giỏ hàng trên sidebar */
#tmr-combo-app .tmr-btn-sidebar-cart {
  width: 100% !important;
  margin-top: 8px !important;
  padding: 10px 14px !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  background: var(--tmr-maroon) !important;
  color: var(--tmr-white) !important;
  border: none !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  box-shadow: 0 3px 10px rgba(139,26,43,0.25) !important;
  transition: all 0.2s ease !important;
}

#tmr-combo-app .tmr-btn-sidebar-cart:hover:not(:disabled) {
  background: var(--tmr-maroon-dark) !important;
  box-shadow: 0 4px 14px rgba(139,26,43,0.35) !important;
  transform: translateY(-1px) !important;
}

#tmr-combo-app .tmr-btn-sidebar-cart:disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  background: #a39e9a !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Gift studio: viewport layout, scoped to the shortcode. */
#tmr-combo-app {
  width: 100% !important; max-width: none !important;
  /* Leave room below the builder for the site footer. Themes may override this variable. */
  --tmr-footer-space: 80px;
  height: calc(100vh - var(--tmr-footer-space)) !important; height: calc(100dvh - var(--tmr-footer-space)) !important;
  min-height: 0 !important; padding: 20px 32px 0 !important;
  background: #f8f5ef !important; position: relative !important;
  display: flex !important; flex-direction: column !important; gap: 14px !important;
  overflow: hidden !important; isolation: isolate; border: 1px solid #e5ddcf;
}
#tmr-combo-app .tmr-studio-header { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-shrink:0; }
#tmr-combo-app .tmr-eyebrow { font-size:10px; font-weight:700; letter-spacing:2px; color:#947442; }
#tmr-combo-app .tmr-studio-header h2 { font-family:Georgia,'Times New Roman',serif; font-size:clamp(22px,2.3vw,34px); line-height:1.2; font-weight:400; color:#59252c; margin:0; }
#tmr-combo-app .tmr-studio-note { font-size:12px; color:#86786b; }
#tmr-combo-app .tmr-steps-header { flex-shrink:0; }
#tmr-combo-app .tmr-steps { max-width:648px; margin:auto; gap:10px !important; }
#tmr-combo-app .tmr-step-ind { min-height:40px; border-radius:8px !important; background:transparent !important; font-size:12px !important; border-color:#e4dbce !important; }
#tmr-combo-app .tmr-step-ind.tmr-active { background:#792735 !important; border-color:#792735 !important; }
#tmr-combo-app .tmr-step-num { width:22px !important; height:22px !important; }
#tmr-combo-app .tmr-main-layout { display:grid !important; grid-template-columns:minmax(0,1.39fr) minmax(0,1fr) !important; gap:24px !important; align-items:stretch !important; flex:1; min-height:0; }
#tmr-combo-app .tmr-left-col { display:contents !important; }
#tmr-combo-app .tmr-box-preview-card { min-width:0; min-height:0; padding:16px !important; border:1px solid #e7dece !important; border-radius:16px !important; box-shadow:none !important; background:radial-gradient(ellipse at 50% 40%,#fffefb,#eee6d9) !important; gap:8px !important; }
#tmr-combo-app .tmr-preview-heading { display:flex; justify-content:space-between; align-items:center; font-size:11px; color:#8d7561; flex-shrink:0; }
#tmr-combo-app .tmr-scene { flex:1; min-height:0; container-type:size; --tmr-box-height:min(62cqw, 96cqh); }
#tmr-combo-app .tmr-box { border-radius:3px !important; box-shadow:0 18px 25px -15px #4e160c88 !important; }
#tmr-combo-app .tmr-box-photo { border-radius:2px !important; }
#tmr-combo-app .tmr-lid-text-overlay { background:#45121ac9 !important; padding:14px 10px !important; width:80%; backdrop-filter:blur(4px); }
#tmr-combo-app .tmr-box-controls { flex-shrink:0; display:flex !important; align-items:center; justify-content:space-between !important; gap:12px !important; }
#tmr-combo-app .tmr-box-caption { margin:0 !important; min-width:0; color:#857361; font-size:11px; line-height:1.4; text-align:left; }
#tmr-combo-app .tmr-box-toggle { min-height:36px; font-size:11px !important; }
#tmr-combo-app .tmr-box-status-pills { flex-wrap:nowrap !important; flex-shrink:0; }
#tmr-combo-app .tmr-pill { min-width:0 !important; overflow:hidden; text-overflow:ellipsis; padding:7px 8px !important; background:#ffffff80 !important; font-size:10px !important; }
#tmr-combo-app .tmr-slot-placeholder { color:#ffe2a3 !important; }
#tmr-combo-app .tmr-overlay-slot:not(.tmr-slot-filled) { border-color:#efcc7d70 !important; background:#4b061630 !important; }
#tmr-combo-app .tmr-selection-section { min-height:0; min-width:0; padding:0 !important; background:transparent !important; border:0 !important; box-shadow:none !important; gap:14px !important; }
#tmr-combo-app .tmr-selection-topbar { flex-shrink:0; min-height:38px; padding-bottom:12px !important; border-bottom:1px solid #e1d7c8 !important; }
#tmr-combo-app .tmr-step-desc-icon { display:none; }
#tmr-combo-app .tmr-step-desc-wrap { font-size:14px !important; }
#tmr-combo-app .tmr-catalogue-scroll { min-height:0; overflow:auto; flex:1; padding:3px 6px 16px 3px; scrollbar-width:thin; scrollbar-color:#cdbb9f transparent; }
#tmr-combo-app .tmr-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:12px !important; }
#tmr-combo-app .tmr-card { min-width:0; padding:14px !important; border-radius:12px !important; border:1px solid #e5ded3 !important; box-shadow:none !important; }
#tmr-combo-app .tmr-card.tmr-selected { border-color:#8b3542 !important; background:#fffaf6 !important; box-shadow:inset 0 0 0 1px #8b3542 !important; }
#tmr-combo-app .tmr-ic { height:clamp(85px,15vh,160px) !important; background:#faf8f4; border-radius:8px; padding:8px; margin-bottom:12px !important; }
#tmr-combo-app .tmr-nm { font-size:13px !important; min-height:34px !important; }
#tmr-combo-app .tmr-pr { font-size:14px !important; margin-top:5px !important; }
#tmr-combo-app .tmr-price-note { margin:3px 0 0; font-size:10px; line-height:1.4; color:var(--tmr-muted); }
#tmr-combo-app .tmr-card-badge-check { width:22px !important; height:22px !important; top:10px !important; right:10px !important; z-index:1; }
#tmr-combo-app .tmr-btn-drawer-toggle { min-height:32px; font-size:11px !important; }
#tmr-combo-app .tmr-card.tmr-drawer-open .tmr-card-drawer { max-height:none !important; }
#tmr-combo-app .tmr-studio-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-shrink:0; background:#fffdf9; border-top:1px solid #e1d7c8; margin:0 -32px; padding:14px 32px max(14px,env(safe-area-inset-bottom)); }
#tmr-combo-app .tmr-total-toggle { display:flex; flex-direction:column; align-items:flex-start; gap:3px; border:0; background:transparent; cursor:pointer; padding:0; color:#766a5e; font:inherit; font-size:11px; }
#tmr-combo-app .tmr-total-toggle strong { font-size:23px; color:#792735; }
#tmr-combo-app .tmr-btn-sm { height:46px !important; padding:0 22px !important; border-radius:8px !important; }
#tmr-combo-app .tmr-right-col { position:static !important; grid-column:2; grid-row:1; min-width:0; min-height:0; width:100% !important; max-height:none; overflow:auto; padding:12px; background:#fffdf9; border:1px solid #dbc9ad; border-radius:14px; box-shadow:none; }
#tmr-combo-app .tmr-right-col[hidden], #tmr-combo-app .tmr-selection-section[hidden] { display:none !important; }
#tmr-combo-app .tmr-box-preview-card { grid-column:1; grid-row:1; }
#tmr-combo-app .tmr-selection-section { grid-column:2; grid-row:1; }
#tmr-combo-app .tmr-sticky-sidebar { position:static !important; }
#tmr-combo-app .tmr-price-calculator { padding:8px !important; border:0 !important; box-shadow:none !important; }
#tmr-combo-app .tmr-detail-close { display:block; margin-left:auto; border:0; background:transparent; color:#792735; min-height:40px; cursor:pointer; }
#tmr-combo-app .tmr-calc-row { min-height:30px; }
#tmr-combo-app .tmr-qty-btn, #tmr-combo-app #tmr-qty-input { height:40px !important; width:40px !important; }
#tmr-combo-app :focus-visible { outline:2px solid #ac803d !important; outline-offset:3px !important; }
#tmr-combo-app .tmr-empty-state { grid-column:1/-1; padding:24px; color:#776858; }
@media(min-width:1400px) { #tmr-combo-app .tmr-grid { grid-template-columns:repeat(3,minmax(0,1fr)) !important; } }
@media(max-width:900px) {
  #tmr-combo-app { padding:16px 18px 0 !important; gap:12px !important; }
  #tmr-combo-app .tmr-main-layout { gap:16px !important; grid-template-columns:minmax(0,1.22fr) minmax(0,1fr) !important; }
  #tmr-combo-app .tmr-studio-note { display:none; }
  #tmr-combo-app .tmr-box-preview-card { padding:12px !important; }
  #tmr-combo-app .tmr-studio-footer { margin:0 -18px; padding:12px 18px max(12px,env(safe-area-inset-bottom)); }
}
@media(max-width:600px) {
  /* Very short phones can scroll the page, keeping the box and catalogue usable. */
  #tmr-combo-app { min-height:640px !important; padding:12px 12px 0 !important; gap:10px !important; }
  #tmr-combo-app .tmr-studio-header h2 { font-size:21px; margin-top:0; }
  #tmr-combo-app .tmr-eyebrow { font-size:8px; letter-spacing:1.5px; }
  #tmr-combo-app .tmr-steps { gap:5px !important; }
  #tmr-combo-app .tmr-step-ind { min-height:36px; font-size:9px !important; gap:4px !important; }
  #tmr-combo-app .tmr-step-text { display:inline !important; }
  #tmr-combo-app .tmr-step-num { width:18px !important; height:18px !important; }
  #tmr-combo-app .tmr-main-layout { grid-template-columns:minmax(0,1fr) !important; grid-template-rows:clamp(240px,calc(64.52vw + 36px),400px) minmax(0,1fr); gap:12px !important; }
  #tmr-combo-app .tmr-box-preview-card { padding:8px 10px !important; gap:2px !important; }
  #tmr-combo-app .tmr-scene { --tmr-box-height:min(64cqw, 98cqh); }
  #tmr-combo-app .tmr-preview-heading { font-size:9px; }
  #tmr-combo-app .tmr-box-status-pills { display:none !important; }
  #tmr-combo-app .tmr-box-controls { position:static !important; gap:8px !important; }
  #tmr-combo-app .tmr-box-caption { font-size:9px; max-width:65%; }
  #tmr-combo-app .tmr-box-toggle { font-size:9px !important; padding:5px 7px !important; max-width:90px; min-height:32px; background:#fff9ed !important; }
  #tmr-combo-app .tmr-lid-text-overlay { padding:4px !important; }
  #tmr-combo-app .tmr-lid-emblem { font-size:16px !important; }
  #tmr-combo-app .tmr-lid-text { font-size:8px !important; }
  #tmr-combo-app .tmr-selection-section { gap:6px !important; }
  #tmr-combo-app .tmr-selection-topbar { min-height:28px; padding-bottom:6px !important; }
  #tmr-combo-app .tmr-step-desc-wrap { font-size:12px !important; }
  #tmr-combo-app .tmr-grid { gap:8px !important; }
  #tmr-combo-app .tmr-card { padding:9px !important; }
  #tmr-combo-app .tmr-ic { height:86px !important; margin-bottom:7px !important; }
  #tmr-combo-app .tmr-nm { font-size:11px !important; min-height:29px !important; }
  #tmr-combo-app .tmr-pr { font-size:12px !important; }
  #tmr-combo-app .tmr-checkout-price { max-width:42%; text-align:right; white-space:normal; }
  #tmr-combo-app .tmr-studio-footer { margin:0 -12px; padding:10px 12px max(10px,env(safe-area-inset-bottom)); gap:6px; }
  #tmr-combo-app .tmr-total-toggle strong { font-size:18px; }
  #tmr-combo-app .tmr-btn-sm { height:42px !important; padding:0 10px !important; font-size:11px !important; }
  #tmr-combo-app .tmr-nav-compact { gap:4px !important; }
}
@media(max-height:520px) and (min-width:601px) {
  #tmr-combo-app { min-height:0 !important; gap:6px !important; padding-top:8px !important; }
  #tmr-combo-app .tmr-studio-header h2 { font-size:20px; }
  #tmr-combo-app .tmr-box-status-pills { display:none !important; }
  #tmr-combo-app .tmr-studio-footer { padding-top:6px; padding-bottom:6px; }
}
@media(prefers-reduced-motion:reduce) {
  #tmr-combo-app *, #tmr-combo-app *::before, #tmr-combo-app *::after { transition:none !important; animation:none !important; scroll-behavior:auto !important; }
}
/* Escape centered theme containers without adding a horizontal scrollbar. */
#tmr-combo-app { width:var(--tmr-viewport-width,100%) !important; margin-left:calc((100% - var(--tmr-viewport-width,100%)) / 2) !important; margin-right:0 !important; }
#tmr-combo-app .tmr-checkout-item-main { min-width:0; }
#tmr-combo-app .tmr-checkout-text { min-width:0; overflow-wrap:anywhere; }
#tmr-combo-app .tmr-checkout-row { gap:12px; }
#tmr-combo-app .tmr-checkout-price { flex-shrink:0; }
@media(max-width:600px) { #tmr-combo-app .tmr-box-toggle { color:#792735 !important; } }

/* Both catalogue and price details occupy the same grid cell, never the preview. */
#tmr-combo-app .tmr-studio-footer { position:relative; z-index:1; min-height:76px; }
#tmr-combo-app .tmr-detail-close { font:inherit; font-size:12px; }
@media(max-width:600px) {
  #tmr-combo-app { --tmr-footer-space:64px; }
  #tmr-combo-app .tmr-selection-section, #tmr-combo-app .tmr-right-col { grid-column:1; grid-row:2; }
  #tmr-combo-app .tmr-total-toggle { font-size:10px; }
  #tmr-combo-app .tmr-studio-footer { min-height:68px; }
}
@media(max-height:520px) and (min-width:601px) {
  #tmr-combo-app { --tmr-footer-space:48px; }
  #tmr-combo-app .tmr-studio-footer { min-height:60px; }
  #tmr-combo-app .tmr-box-preview-card { gap:4px !important; padding:8px !important; }
}

/* Frame the supplied interior photo without changing its original pixels. */
#tmr-combo-app .tmr-box-photo.tmr-box-photo-default {
  position:absolute !important;
  width:140.42% !important;
  height:129.42% !important;
  max-width:none !important;
  max-height:none !important;
  left:-20.08% !important;
  top:-10.77% !important;
}

/* Product-specific middle tray photographs; side gift slots stay interactive. */
#tmr-combo-app #tmr-slot-bottle.tmr-wine-panel {
  left:25.2% !important; top:1.5% !important;
  width:49.6% !important; height:97% !important;
  padding:0 !important; border:0 !important; border-radius:1px !important;
  background:transparent !important; box-shadow:none !important;
}
#tmr-combo-app #tmr-slot-bottle.tmr-wine-panel img.tmr-wine-panel-img {
  display:block !important; width:100% !important; height:100% !important;
  max-width:none !important; max-height:none !important;
  object-fit:fill !important; filter:none !important;
}

/* Independent box designs and legal document links. */
#tmr-combo-app .tmr-box-design-control { display:flex; align-items:center; gap:10px; min-width:0; flex:1; }
#tmr-combo-app .tmr-box-design-name { color:#792735; font-size:12px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
#tmr-combo-app .tmr-box-choose { flex-shrink:0; border:1px solid #bda680; background:#fffaf0; color:#792735; border-radius:7px; padding:8px 10px; min-height:36px; font:inherit; font-size:11px; cursor:pointer; }
#tmr-combo-app .tmr-box-choose:disabled { opacity:.5; cursor:default; }
#tmr-combo-app .tmr-legal-link { display:inline-flex; align-items:center; justify-content:center; min-height:36px; padding:6px 10px; margin-top:6px; border:1px solid #d6c5ad; border-radius:6px; background:#fffaf0; color:#792735; font-size:11px; font-weight:700; text-decoration:none; }
#tmr-combo-app .tmr-legal-link:hover { background:#f4e8d6; }
#tmr-combo-app .tmr-box-dialog { width:min(680px,calc(100vw - 32px)); max-width:680px; max-height:80dvh; margin:auto; padding:24px; color:#59252c; background:#fffdf9; border:1px solid #dbc9ad; border-radius:16px; box-shadow:0 24px 80px #29100b55; overflow:auto; box-sizing:border-box; }
#tmr-combo-app .tmr-box-dialog:not([open]) { display:none !important; }
#tmr-combo-app .tmr-box-dialog::backdrop { background:#29100b99; }
#tmr-combo-app .tmr-box-dialog-header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
#tmr-combo-app .tmr-box-dialog-header h3 { margin:0; font:700 20px/1.3 'Plus Jakarta Sans',sans-serif; }
#tmr-combo-app #tmr-box-dialog-close { border:0; border-radius:6px; background:#f6eee2; color:#792735; cursor:pointer; font:inherit; font-size:26px; width:40px; height:40px; }
#tmr-combo-app .tmr-box-dialog-note { color:#857361; font-size:12px; line-height:1.6; margin:12px 0 20px; }
#tmr-combo-app .tmr-box-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
#tmr-combo-app .tmr-box-option { display:flex; flex-direction:column; align-items:center; gap:10px; min-width:0; padding:14px; background:#fff; border:1px solid #e5ded3; border-radius:10px; color:#59252c; font:inherit; font-size:13px; cursor:pointer; }
#tmr-combo-app .tmr-box-option img { display:block; width:100%; height:150px; object-fit:contain; }
#tmr-combo-app .tmr-box-option strong { overflow-wrap:anywhere; }
#tmr-combo-app .tmr-box-option span { color:#857361; font-size:11px; }
#tmr-combo-app .tmr-box-option[aria-pressed="true"] { background:#fffaf0; border:2px solid #792735; padding:13px; }
#tmr-combo-app .tmr-box-photo[hidden] { display:none !important; }
#tmr-combo-app .tmr-extra-options[hidden], #tmr-combo-app .tmr-calc-row[hidden] { display:none !important; }
#tmr-combo-app .tmr-extra-options { display:grid; gap:8px; margin:0 0 16px; color:#59252c; font-size:13px; }
#tmr-combo-app .tmr-extra-options > strong, #tmr-combo-app .tmr-wine-heading { font-size:13px; color:#59252c; font-weight:700; }
#tmr-combo-app .tmr-extra-options label { display:flex; align-items:center; gap:10px; padding:12px; border:1px solid #e1d3be; border-radius:9px; background:#fffaf3; cursor:pointer; line-height:1.4; }
#tmr-combo-app .tmr-extra-options label:has(input:checked) { border-color:#8b3542; background:#fff5ed; box-shadow:inset 0 0 0 1px #8b3542; }
#tmr-combo-app .tmr-extra-options label > span { flex:1; min-width:0; }
#tmr-combo-app .tmr-extra-options label small { display:block; margin-top:3px; color:#776858; font-size:11px; }
#tmr-combo-app .tmr-extra-options .tmr-extra-price { color:#792735; margin-left:auto; white-space:nowrap; }
#tmr-combo-app .tmr-wine-heading { margin:0 0 9px; }
#tmr-combo-app #tmr-slot-bottle .tmr-extra-photo { display:block; width:100%; height:100%; background-repeat:no-repeat; }
#tmr-combo-app #tmr-slot-bottle .tmr-extra-photo--red { background-size:286% 148%; background-position:58% 49%; }
#tmr-combo-app #tmr-slot-bottle .tmr-extra-photo--green { background-size:282% 149%; background-position:50% 58%; }
#tmr-combo-app .tmr-checkout-qty-visible { margin:16px 0; display:flex; align-items:center; justify-content:space-between; gap:12px; }
#tmr-combo-app .tmr-checkout-qty-visible input { width:54px; height:40px; text-align:center; }
#tmr-combo-app .tmr-combo-price-note { margin:8px 0; color:#776858; font-size:12px; line-height:1.5; }
@media(max-width:600px) {
  #tmr-combo-app .tmr-box-design-control { gap:6px; }
  #tmr-combo-app .tmr-box-design-name { font-size:9px; }
  #tmr-combo-app .tmr-box-choose { font-size:9px; padding:5px 7px; min-height:32px; }
  #tmr-combo-app .tmr-box-dialog { padding:16px; }
  #tmr-combo-app .tmr-box-options { gap:10px; }
  #tmr-combo-app .tmr-box-option { padding:10px; font-size:11px; }
  #tmr-combo-app .tmr-box-option[aria-pressed="true"] { padding:9px; }
  #tmr-combo-app .tmr-box-option img { height:110px; }
}