/* ==========================================================================
   Hero Walkthrough Demo 2 — Create Wishlist & Management Flow
   Exact Production UI Clone (Hazlnut Design System)
   ========================================================================== */

/* Universal 0px Border Radius Override */
.hw-create-flow-container,
.hw-create-flow-container * {
  border-radius: 0px !important;
}

.hw-create-flow-container {
  width: 100%;
  max-width: 760px;
  height: 520px;
  margin: 30px auto;
  background: #EDE6DC;
  border: 1.5px solid #561023;
  box-shadow: 8px 8px 0 0 #561023, -12px -10px 30px rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;
  font-family: var(--hw-font-sans, system-ui, sans-serif);
  color: #561023;
  box-sizing: border-box;
}

.hw-create-flow-container .walkthrough-cursor {
  /* Allow translate3d positioning */
}

/* App Outer Shell */
.hw-cf-shell {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

/* Header Bar */
.hw-cf-header {
  height: 52px;
  background: #561023;
  color: #EDE6DC;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  flex-shrink: 0;
  z-index: 10;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.hw-cf-header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.hw-cf-hamburger {
  font-size: 16px;
  color: #EDE6DC;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.hw-cf-hamburger span {
  display: block;
  width: 16px;
  height: 2px;
  background: #EDE6DC;
}

.hw-cf-logo {
  font-family: 'Nanum Myeongjo', serif;
  font-size: 22px;
  font-weight: 700;
  color: #EDE6DC;
  letter-spacing: -0.5px;
}

.hw-cf-header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.hw-cf-bell {
  position: relative;
  font-size: 14px;
  color: #EDE6DC;
}

.hw-cf-bell-count {
  position: absolute;
  top: -4px;
  right: -6px;
  background: #E45558;
  color: #FFF;
  font-size: 9px;
  font-weight: 700;
  width: 13px;
  height: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hw-cf-avatar {
  width: 28px;
  height: 28px;
  background: #EDE6DC;
  color: #561023;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--hw-font-mono, monospace);
  position: relative;
}

.hw-cf-avatar::after {
  content: '∨';
  font-size: 8px;
  margin-left: 2px;
}

/* Sidebar & Content Body Layout */
.hw-cf-body {
  display: flex;
  flex-grow: 1;
  height: 100%;
  position: relative;
  overflow: hidden;
}

/* Left Icon Sidebar */
.hw-cf-sidebar {
  width: 52px;
  background: #561023;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  flex-shrink: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.hw-cf-sidebar-top,
.hw-cf-sidebar-bottom {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: center;
}

.hw-cf-side-icon {
  color: rgba(237, 230, 220, 0.7);
  font-size: 15px;
  cursor: pointer;
  transition: color 0.2s ease;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hw-cf-side-icon.active {
  background: rgba(255, 255, 255, 0.16);
  color: #FFFFFF;
}

/* Main Dashboard Canvas */
.hw-cf-main-canvas {
  flex-grow: 1;
  background: #EDE6DC;
  overflow: hidden !important;
  position: relative;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.hw-cf-main-canvas::-webkit-scrollbar {
  display: none !important;
}

.hw-cf-dashboard-view {
  padding: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.hw-cf-dashboard-content {
  padding: 18px 32px 22px 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Welcome Hero Banner (Host Home - Full width edge-to-edge) */
.hw-cf-welcome-banner {
  background: #561023;
  color: #EDE6DC;
  padding: 22px 32px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
}

.hw-cf-welcome-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Watermark Motif Background Pattern (Production Matching) */
.hw-cf-hero-deco {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  background-color: rgba(228, 85, 88, 0.13);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.hw-cf-hero-deco.deco-star {
  width: 160px;
  height: 160px;
  top: -20px;
  right: -20px;
  transform: rotate(7deg);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%22304%22 height%3D%22326%22 viewBox%3D%220 0 304 326%22 fill%3D%22%23000%22%3E%3Cpath d%3D%22M 151.176 80.39 L 76.489 0 L 72.42 80.39 L 0 80.39 L 75.562 167.337 L 0 243.39 L 69.381 243.39 L 75.562 326 L 151.176 245.61 L 230.55 326 L 230.55 246.694 L 304 246.694 L 232.61 163 L 304 82.61 L 225.45 79.306 L 226.481 0 L 151.176 80.39 Z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%22304%22 height%3D%22326%22 viewBox%3D%220 0 304 326%22 fill%3D%22%23000%22%3E%3Cpath d%3D%22M 151.176 80.39 L 76.489 0 L 72.42 80.39 L 0 80.39 L 75.562 167.337 L 0 243.39 L 69.381 243.39 L 75.562 326 L 151.176 245.61 L 230.55 326 L 230.55 246.694 L 304 246.694 L 232.61 163 L 304 82.61 L 225.45 79.306 L 226.481 0 L 151.176 80.39 Z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
}

.hw-cf-hero-deco.deco-seal {
  width: 120px;
  height: 120px;
  right: 140px;
  bottom: -25px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%22333%22 height%3D%22355%22 viewBox%3D%220 0 333 355%22 fill%3D%22%23000%22%3E%3Cpath d%3D%22M 0 177.623 L 50.16 230.929 L 50.16 301.941 L 117.08 301.941 L 166.993 355 L 216.906 301.941 L 283.826 301.941 L 283.826 229.942 L 333 177.623 L 283.826 125.305 L 283.826 53.306 L 217.091 53.306 L 166.993 0 L 116.833 53.306 L 50.16 53.306 L 50.16 124.256 L 0 177.623 Z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%22333%22 height%3D%22355%22 viewBox%3D%220 0 333 355%22 fill%3D%22%23000%22%3E%3Cpath d%3D%22M 0 177.623 L 50.16 230.929 L 50.16 301.941 L 117.08 301.941 L 166.993 355 L 216.906 301.941 L 283.826 301.941 L 283.826 229.942 L 333 177.623 L 283.826 125.305 L 283.826 53.306 L 217.091 53.306 L 166.993 0 L 116.833 53.306 L 50.16 53.306 L 50.16 124.256 L 0 177.623 Z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
}

.hw-cf-welcome-eyebrow {
  font-family: var(--hw-font-mono, monospace);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(237, 230, 220, 0.85);
}

.hw-cf-welcome-eyebrow span {
  color: #E45558;
}

.wedding-page .hw-cf-welcome-title,
.hw-cf-welcome-title {
  font-family: 'Nanum Myeongjo', serif !important;
  font-size: 26px !important;
  font-weight: 400 !important;
  line-height: 1.25 !important;
  letter-spacing: normal !important;
  margin: 0 !important;
  color: #EDE6DC !important;
  max-width: 500px !important;
}

.hw-cf-welcome-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}

.hw-cf-btn-primary {
  background: #E45558;
  color: #FFFFFF;
  border: none;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--hw-font-sans, sans-serif);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.hw-cf-btn-secondary {
  background: transparent;
  color: #EDE6DC;
  border: 1px solid rgba(237, 230, 220, 0.4);
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 500;
  font-family: var(--hw-font-sans, sans-serif);
  cursor: pointer;
}

.hw-cf-motifs-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}

.hw-cf-motif-box {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.hw-cf-motif-box .hzl-motif {
  width: 14px;
  height: 14px;
  display: inline-block;
  background-color: currentColor;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.hw-cf-motif-box.m1 { background: #E45558; color: #FFF; }
.hw-cf-motif-box.m2 { background: #D5C800; color: #561023; }
.hw-cf-motif-box.m3 { background: #B4CEED; color: #561023; }
.hw-cf-motif-box.m4 { background: #E163C3; color: #FFF; }

/* Tabs Row */
.hw-cf-tabs-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 6px;
  margin-bottom: 8px;
}

.hw-cf-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  font-family: var(--hw-font-mono, monospace);
  font-size: 12px;
  font-weight: 600;
  border: 1px solid #561023;
  cursor: pointer;
}

.hw-cf-tab.active {
  background: #561023;
  color: #EDE6DC;
}

.hw-cf-tab.inactive {
  background: transparent;
  color: #561023;
  border-color: rgba(86, 16, 35, 0.3);
}

.hw-cf-tab-badge {
  background: rgba(255, 255, 255, 0.2);
  padding: 1px 6px;
  font-size: 10px;
}

.hw-cf-tab.inactive .hw-cf-tab-badge {
  background: rgba(86, 16, 35, 0.1);
}

/* Registry Section Title */
.hw-cf-section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 10px;
  margin-bottom: 10px;
}

.wedding-page .hw-cf-section-title,
.hw-cf-section-title {
  font-family: 'Nanum Myeongjo', serif !important;
  font-size: 25px !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  line-height: 1.2 !important;
  color: #561023 !important;
  margin: 0 !important;
}

.hw-cf-section-meta {
  font-family: var(--hw-font-mono, monospace);
  font-size: 11px;
  color: #7A6A60;
}

/* Wishlist Creation Grid */
.hw-cf-grid {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 20px;
  margin-top: 8px;
}

.hw-cf-create-card {
  width: 240px;
  height: 155px;
  border: 1.5px dashed rgba(86, 16, 35, 0.35);
  /* background: rgba(255, 255, 255, 0.4); */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.hw-cf-create-card:hover {
  border-color: #561023;
  background: rgba(255, 255, 255, 0.8);
}

.hw-cf-card-tile {
  width: 42px;
  height: 42px;
  background: #E45558;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.hw-cf-card-tile .hzl-motif {
  width: 22px;
  height: 22px;
  display: inline-block;
  background-color: currentColor;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.hw-cf-card-text {
  text-align: center;
}

.hw-cf-card-title {
  font-family: var(--hw-font-mono, monospace);
  font-size: 13px;
  font-weight: 700;
  color: #561023;
  margin: 0 0 4px 0;
}

.hw-cf-card-sub {
  font-family: var(--hw-font-mono, monospace);
  font-size: 10px;
  color: #7A6A60;
  margin: 0;
}

/* ==========================================================================
   CREATE WISHLIST MODAL OVERLAY (Screenshot 2 & 3)
   ========================================================================== */

.hw-cf-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #EDE6DC;
  backdrop-filter: none;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.hw-cf-modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.hw-cf-modal-popup {
  width: 100%;
  height: 100%;
  max-width: 100%;
  background: #EDE6DC;
  border: none !important;
  box-shadow: none !important;
  padding: 24px 32px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  box-sizing: border-box;
}

.hw-cf-modal-close {
  position: absolute;
  top: 16px;
  right: 20px;
  background: transparent;
  border: none;
  font-size: 22px;
  color: #561023;
  cursor: pointer;
  line-height: 1;
}

.hw-cf-modal-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hw-cf-modal-eyebrow {
  font-family: var(--hw-font-mono, monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #E45558;
  text-transform: uppercase;
}

.wedding-page .hw-cf-modal-title,
.hw-cf-modal-title {
  font-family: 'Nanum Myeongjo', serif !important;
  font-size: 32px !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  color: #561023 !important;
  margin: 0 !important;
  line-height: 1.1 !important;
}

.hw-cf-modal-desc {
  font-family: var(--hw-font-serif, serif);
  font-size: 13px;
  color: #561023;
  opacity: 0.85;
  margin: 2px 0 0 0;
}

.hw-cf-modal-label {
  font-family: var(--hw-font-mono, monospace);
  font-size: 10px;
  font-weight: 700;
  color: #7A6A60;
  text-transform: uppercase;
  margin-bottom: 6px;
  letter-spacing: 0.5px;
}

/* Occasion Grid */
.hw-cf-occasion-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.hw-cf-occasion-card {
  background: #F5EFE6;
  border: 1px solid #D9D0C3;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: all 0.25s ease;
  box-sizing: border-box;
}

/* Screenshot 3: Selected Dark Maroon State */
.hw-cf-occasion-card.selected {
  background: #561023 !important;
  border: 1.5px solid #E45558 !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 12px rgba(86, 16, 35, 0.3);
}

.hzl-motif,
.hw-cf-occasion-card .hzl-motif {
  width: 22px;
  height: 22px;
  display: inline-block;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.hw-cf-occasion-card:nth-child(1) .hzl-motif { color: #E45558; }
.hw-cf-occasion-card:nth-child(2) .hzl-motif { color: #D5C800; }
.hw-cf-occasion-card:nth-child(3) .hzl-motif { color: #E163C3; }
.hw-cf-occasion-card:nth-child(4) .hzl-motif { color: #194234; }
.hw-cf-occasion-card:nth-child(5) .hzl-motif { color: #6F9FD5; }
.hw-cf-occasion-card:nth-child(6) .hzl-motif { color: #561023; }

.hw-cf-occasion-card.selected .hzl-motif {
  color: #D5C800 !important;
  background-color: #D5C800 !important;
}

.hw-cf-occasion-name {
  font-family: 'Nanum Myeongjo', serif;
  font-size: 14px;
  color: #561023;
  font-weight: 600;
}

.hw-cf-occasion-card.selected .hw-cf-occasion-name {
  color: #FFFFFF !important;
}

/* Form Inputs */
.hw-cf-input-field {
  width: 100%;
  padding: 10px 14px;
  background: #FFFFFF;
  border: 1px solid #D9D0C3;
  font-family: 'Nanum Myeongjo', serif;
  font-size: 15px;
  color: #561023;
  box-sizing: border-box;
  outline: none;
}

.hw-cf-input-field:focus {
  border-color: #561023;
}

.hw-cf-date-wrapper {
  position: relative;
  width: 100%;
}

.hw-cf-date-icon {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #7A6A60;
  font-size: 14px;
}

/* Screenshot 3 Calendar Popover (Positioned upwards above input for full visibility) */
.hw-cf-calendar-popover {
  position: absolute;
  bottom: calc(100% + 6px);
  top: auto;
  left: 0;
  width: 210px;
  background: #EDE6DC;
  border: 1.5px solid #561023;
  padding: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  z-index: 100;
  display: none;
  font-family: var(--hw-font-mono, monospace);
  box-sizing: border-box;
}

.hw-cf-calendar-popover.active {
  display: block;
}

.hw-cf-cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 700;
  color: #561023;
  margin-bottom: 8px;
}

.hw-cf-cal-header button {
  background: transparent;
  border: 1px solid #561023;
  color: #561023;
  font-size: 10px;
  padding: 1px 6px;
  cursor: pointer;
}

.hw-cf-cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: 8px;
  font-weight: 700;
  color: #7A6A60;
  margin-bottom: 4px;
}

.hw-cf-cal-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  text-align: center;
  font-size: 10px;
  color: #561023;
}

.hw-cf-cal-day {
  padding: 3px 0;
  cursor: pointer;
}

.hw-cf-cal-day.selected {
  border: 1.5px solid #E45558;
  color: #E45558;
  font-weight: 700;
}

.hw-cf-cal-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 9px;
  font-weight: 700;
  color: #E45558;
  border-top: 1px solid rgba(86, 16, 35, 0.15);
  padding-top: 6px;
}

/* Modal Actions Footer */
.hw-cf-modal-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 6px;
}

.hw-cf-modal-cancel {
  background: #FFFFFF;
  border: 1.5px solid #561023;
  color: #561023;
  padding: 10px 20px;
  font-family: var(--hw-font-mono, monospace);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
}

.hw-cf-modal-submit {
  background: #F2A4A6;
  border: none;
  color: #FFFFFF;
  padding: 10px 22px;
  font-family: var(--hw-font-mono, monospace);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.hw-cf-modal-submit.active {
  background: #E45558;
}

/* ==========================================================================
   CREATED WISHLIST DETAIL PAGE (Clean Centered Wishlist Card - Image 2)
   ========================================================================== */

.hw-cf-detail-view {
  display: flex;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #EDE6DC;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  z-index: 50;
}

.hw-cf-detail-view.active {
  opacity: 1;
  pointer-events: auto;
}

.hw-cf-detail-left-canvas {
  flex-grow: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px 40px;
  box-sizing: border-box;
  transition: background-color 0.8s ease, color 0.8s ease, padding 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Zero top/side padding when Full Image Mode is active so image flushes to 0px top edge */
#hero-create-flow-component .hw-cf-detail-left-canvas.has-full-mode,
#hero-create-flow-component .hw-cf-detail-left-canvas:has(.layout-full),
#hero-create-flow-component .hw-cf-detail-left-canvas:has(.frame-full),
.hw-cf-detail-left-canvas.has-full-mode {
  padding-top: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
}

.hw-cf-detail-left-canvas::-webkit-scrollbar {
  display: none !important;
}

/* Color Themes */
.hw-cf-detail-left-canvas.theme-cream {
  background: #EDE6DC;
  color: #561023;
}
.hw-cf-detail-left-canvas.theme-cream .hw-hero-name,
.hw-cf-detail-left-canvas.theme-cream .hw-wishlist-subtitle,
.hw-cf-detail-left-canvas.theme-cream .hw-wishlist-message {
  color: #561023 !important;
}
.hw-cf-detail-left-canvas.theme-cream .hw-title-ampersand {
  color: #E45558 !important;
}
.hw-cf-detail-left-canvas.theme-cream .hw-date-rule span {
  color: #7A6A60 !important;
}
.hw-cf-detail-left-canvas.theme-cream .hw-date-rule::before,
.hw-cf-detail-left-canvas.theme-cream .hw-date-rule::after {
  background: rgba(86, 16, 35, 0.25) !important;
}

.hw-cf-detail-left-canvas.theme-red {
  background: #561023;
  color: #EDE6DC;
}
.hw-cf-detail-left-canvas.theme-red .hw-hero-name,
.hw-cf-detail-left-canvas.theme-red .hw-wishlist-subtitle,
.hw-cf-detail-left-canvas.theme-red .hw-wishlist-message {
  color: #EDE6DC !important;
}
.hw-cf-detail-left-canvas.theme-red .hw-title-ampersand {
  color: #E45558 !important;
}
.hw-cf-detail-left-canvas.theme-red .hw-date-rule span {
  color: rgba(237, 230, 220, 0.8) !important;
}
.hw-cf-detail-left-canvas.theme-red .hw-date-rule::before,
.hw-cf-detail-left-canvas.theme-red .hw-date-rule::after {
  background: rgba(237, 230, 220, 0.3) !important;
}

.hw-cf-detail-left-canvas.theme-blue {
  background: #B4CEED;
  color: #561023;
}
.hw-cf-detail-left-canvas.theme-blue .hw-hero-name,
.hw-cf-detail-left-canvas.theme-blue .hw-wishlist-subtitle,
.hw-cf-detail-left-canvas.theme-blue .hw-wishlist-message {
  color: #561023 !important;
}
.hw-cf-detail-left-canvas.theme-blue .hw-title-ampersand {
  color: #E45558 !important;
}
.hw-cf-detail-left-canvas.theme-blue .hw-date-rule span {
  color: #561023 !important;
}
.hw-cf-detail-left-canvas.theme-blue .hw-date-rule::before,
.hw-cf-detail-left-canvas.theme-blue .hw-date-rule::after {
  background: rgba(86, 16, 35, 0.3) !important;
}

/* Wishlist Hero Card Base Container */
.hw-cf-detail-left-canvas .hw-wishlist-hero-card {
  display: flex;
  width: 100%;
  transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  box-sizing: border-box;
}

/* -------------------------------------------------------------------------- */
/* FULL IMAGE MODE (Flush Top Banner + Increased 250px Height + Text Below)    */
/* -------------------------------------------------------------------------- */
#hero-create-flow-component .hw-cf-detail-left-canvas .hw-wishlist-hero-card.layout-full,
#hero-create-flow-component .hw-cf-detail-left-canvas .hw-wishlist-hero-card:has(.frame-full),
.hw-cf-detail-left-canvas .hw-wishlist-hero-card.layout-full {
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 16px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-top: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-top: 0 !important;
}

#hero-create-flow-component .hw-cf-detail-left-canvas .hw-cover-image-frame.frame-full,
.hw-cf-detail-left-canvas .hw-cover-image-frame.frame-full {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: 0 !important;
  height: 250px !important;
  min-height: 250px !important;
  max-height: 250px !important;
  max-width: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  flex-shrink: 0 !important;
  transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.hw-cf-detail-left-canvas .hw-wishlist-hero-card.layout-full .hw-wishlist-info,
.hw-cf-detail-left-canvas .hw-wishlist-hero-card:has(.frame-full) .hw-wishlist-info {
  max-width: 520px;
  margin: 0 auto;
}

/* -------------------------------------------------------------------------- */
/* CARTOUCHE FRAME MODE (Scaled Up Vertical Frame Left + Rich Bold Text Right)*/
/* -------------------------------------------------------------------------- */
.hw-cf-detail-left-canvas .hw-wishlist-hero-card.layout-cartouche,
.hw-cf-detail-left-canvas .hw-wishlist-hero-card:has(.frame-cartouche) {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 44px;
  max-width: 720px;
  margin: 0 auto;
}

.hw-cf-detail-left-canvas .hw-wishlist-hero-card.layout-cartouche .hw-cover-image-frame,
.hw-cf-detail-left-canvas .hw-cover-image-frame.frame-cartouche {
  width: 260px !important;
  height: 330px !important;
  margin: 0 !important;
  flex-shrink: 0;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);
  -webkit-mask-image: url("../assets/hero_frames/frame-cartouche.svg") !important;
  mask-image: url("../assets/hero_frames/frame-cartouche.svg") !important;
  transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.hw-cf-detail-left-canvas .hw-wishlist-hero-card.layout-cartouche .hw-wishlist-info,
.hw-cf-detail-left-canvas .hw-wishlist-hero-card:has(.frame-cartouche) .hw-wishlist-info {
  flex: 1;
  max-width: 380px;
}

.hw-cf-detail-left-canvas .hw-cover-image-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  display: block;
}

/* Wishlist Info Typography & Spacing (Richly Scaled Up Content) */
.hw-cf-detail-left-canvas .hw-wishlist-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}

.hw-cf-detail-left-canvas .hw-hero-title-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.hw-cf-detail-left-canvas .hw-hero-name {
  font-family: 'Nanum Myeongjo', serif;
  font-size: 38px;
  font-weight: 400;
  line-height: 1.1;
  transition: color 0.8s ease;
}

.hw-cf-detail-left-canvas .hw-title-ampersand {
  font-family: 'Nanum Myeongjo', serif;
  font-style: italic;
  font-size: 36px;
  line-height: 1.1;
  transition: color 0.8s ease;
}

.hw-cf-detail-left-canvas .hw-wishlist-subtitle {
  font-family: 'Nanum Myeongjo', serif;
  font-size: 28px;
  font-weight: 400;
  margin: 0;
  line-height: 1.15;
  transition: color 0.8s ease;
}

.hw-cf-detail-left-canvas .hw-date-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  margin: 10px 0;
  font-family: var(--hw-font-mono, monospace);
  font-size: 12px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
}

.hw-cf-detail-left-canvas .hw-date-rule::before,
.hw-cf-detail-left-canvas .hw-date-rule::after {
  content: '';
  height: 1px;
  width: 42px;
  transition: background-color 0.8s ease;
}

.hw-cf-detail-left-canvas .hw-wishlist-message {
  font-family: 'Nanum Myeongjo', serif;
  font-style: italic;
  font-size: 15px;
  line-height: 1.5;
  max-width: 380px;
  margin: 6px 0 0 0;
  opacity: 0.92;
  transition: color 0.8s ease;
}

/* Right Management Sidepane (Screenshot 4) */
.hw-cf-management-sidepane {
  width: 310px;
  background: #EDE6DC;
  border-left: 1px solid rgba(86, 16, 35, 0.12);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  height: 100%;
  box-shadow: -6px 0 20px rgba(0, 0, 0, 0.06);
  z-index: 20;
}

/* Blue Header Box in Sidepane */
.hw-cf-manage-header-box {
  background: #BED6F0;
  padding: 32px 24px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  overflow: hidden;
}

.hw-cf-cover-tooltip {
  position: absolute;
  top: 8px;
  left: 8px;
  background: #111111;
  color: #FFFFFF;
  font-family: var(--hw-font-mono, monospace);
  font-size: 9px;
  padding: 2px 6px;
  z-index: 2;
  pointer-events: none;
}

.hw-cf-manage-header-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hw-cf-manage-star-deco {
  position: absolute;
  top: -20px;
  right: -35px;
  width: 180px;
  height: 180px;
  background-color: rgba(86, 16, 35, 0.12);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%22304%22 height%3D%22326%22 viewBox%3D%220 0 304 326%22 fill%3D%22%23000%22%3E%3Cpath d%3D%22M 151.176 80.39 L 76.489 0 L 72.42 80.39 L 0 80.39 L 75.562 167.337 L 0 243.39 L 69.381 243.39 L 75.562 326 L 151.176 245.61 L 230.55 326 L 230.55 246.694 L 304 246.694 L 232.61 163 L 304 82.61 L 225.45 79.306 L 226.481 0 L 151.176 80.39 Z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%22304%22 height%3D%22326%22 viewBox%3D%220 0 304 326%22 fill%3D%22%23000%22%3E%3Cpath d%3D%22M 151.176 80.39 L 76.489 0 L 72.42 80.39 L 0 80.39 L 75.562 167.337 L 0 243.39 L 69.381 243.39 L 75.562 326 L 151.176 245.61 L 230.55 326 L 230.55 246.694 L 304 246.694 L 232.61 163 L 304 82.61 L 225.45 79.306 L 226.481 0 L 151.176 80.39 Z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  pointer-events: none;
  z-index: 0;
}

.hw-cf-manage-eyebrow {
  font-family: var(--hw-font-mono, monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #561023;
  text-transform: uppercase;
}

.hw-cf-manage-title {
  font-family: 'Nanum Myeongjo', serif;
  font-size: 24px;
  font-weight: 400;
  color: #561023;
  margin: 0;
  line-height: 1.1;
}

.hw-cf-manage-title span {
  font-style: italic;
  color: #E45558;
}

.hw-cf-manage-sub {
  font-family: var(--hw-font-mono, monospace);
  font-size: 11px;
  color: #561023;
  opacity: 0.8;
}

.hw-cf-private-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #E45558;
  color: #FFFFFF;
  padding: 3px 8px;
  font-family: var(--hw-font-mono, monospace);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-top: 4px;
  width: fit-content;
}

.hw-cf-private-desc {
  font-family: 'Nanum Myeongjo', serif;
  font-style: italic;
  font-size: 12px;
  color: #561023;
  margin: 4px 0 0 0;
  opacity: 0.85;
}

/* Sidepane Actions & Menu */
.hw-cf-manage-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 16px;
  box-sizing: border-box;
}

.hw-cf-manage-btns {
  display: flex;
  gap: 10px;
}

.hw-cf-publish-btn {
  flex: 1;
  background: #194234;
  color: #FFFFFF;
  border: none;
  padding: 10px 0;
  font-family: var(--hw-font-mono, monospace);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.hw-cf-share-btn {
  flex: 1;
  background: #E5DBD0;
  color: #A3968B;
  border: 1px solid #D9D0C3;
  padding: 10px 0;
  font-family: var(--hw-font-mono, monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: not-allowed;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.hw-cf-publish-hint {
  font-family: var(--hw-font-mono, monospace);
  font-size: 10px;
  color: #E45558;
  margin: -6px 0 4px 0;
}

.hw-cf-menu-list {
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: space-between;
  border-top: 1px solid #D9D0C3;
}

.hw-cf-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  flex: 1;
  border-bottom: 1px solid #D9D0C3;
  font-family: 'Nanum Myeongjo', serif;
  font-size: 15px;
  color: #561023;
  cursor: pointer;
}

.hw-cf-menu-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hw-cf-menu-icon {
  width: 24px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #561023;
  flex-shrink: 0;
}

.hw-cf-menu-right {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--hw-font-mono, monospace);
  font-size: 12px;
  color: #561023;
}

.hw-cf-chevron {
  font-family: var(--hw-font-serif, serif);
  font-size: 14px;
  font-weight: 300;
  color: #561023;
  opacity: 0.7;
}

.hw-cf-chevron.diag {
  font-size: 13px;
  opacity: 0.85;
}

.hw-cf-pill-badge {
  font-family: var(--hw-font-mono, monospace);
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.hw-cf-pill-badge.green {
  background: #CBE0D4;
  color: #194234;
  border: 1px solid #194234;
}

.hw-cf-pill-badge.red-outline {
  background: transparent;
  color: #E45558;
  border: 1px solid #E45558;
}