/* SAYURI_HOMEPAGE_PANEL_V2_PRODUCTION_CSS
 * Canonical production renderer under current Homepage Panel V2 authority.
 */

/* SAYURI_HOMEPAGE_PANEL_V2_VIEWPORT_CENTER_AUTHORITY */
body.sayuri-app-shell [data-sayuri-homepage-panel-v2-mount="1"],
[data-sayuri-homepage-panel-v2-mount="1"] {
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
}

/* Auto-collapse keeps the canonical manual-collapsed mount footprint while the same V2 root floats. */
body.sayuri-app-shell [data-sayuri-homepage-panel-v2-mount="1"][data-sayuri-panel-auto-reserved="1"],
[data-sayuri-homepage-panel-v2-mount="1"][data-sayuri-panel-auto-reserved="1"] {
  min-height: var(--sayuri-homepage-panel-auto-reserved-min-height) !important;
}

/* SAYURI_HOMEPAGE_PANEL_V2_FINAL_EFFECTIVE_V1_PARITY_LOCK */
body.sayuri-app-shell .sayuri-homepage-panel-v2,
.sayuri-homepage-panel-v2 {
  --shp-bg-ivory: #f8edda;
  --shp-bg-cream: #f6e6c7;
  --shp-bg-highlight: #fff8ea;
  --shp-line: rgba(189, 167, 125, .48);
  --shp-line-strong: rgba(145, 128, 96, .46);
  --shp-text: #172027;
  --shp-muted: #76827b;
  --shp-green: #255415;
  --shp-radius: clamp(18px, 5.25vw, 22px);
  --shp-left-col: 45%;
  --shp-right-col: 55%;
  --shp-panel-pad-x: 3.2%;
  --shp-divider-x: 45%;
  --shp-right-x: 47.4%;
  --shp-right-w: 49.4%;
  --shp-right-icon-left-final: 1%;
  --shp-icon-size: 38px;
  --shp-label-size: 9.22px;
  --shp-value-size: 10.6px;
  --shp-label-weight: 500;
  --shp-value-weight: 590;
  box-sizing: border-box !important;
  display: block !important;
  position: relative !important;
  width: min(400px, calc(100vw - 12px)) !important;
  max-width: 400px !important;
  aspect-ratio: 1285 / 490 !important;
  min-height: 0 !important;
  height: auto !important;
  margin-top: 0 !important;
  margin-bottom: 8px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  left: 0 !important;
  right: auto !important;
  transform: none !important;
  flex: 0 0 auto !important;
  align-self: center !important;
  justify-self: center !important;
  overflow: hidden !important;
  isolation: isolate !important;
  border: 1px solid rgba(189, 167, 125, .44) !important;
  border-radius: var(--shp-radius) !important;
  background:
    radial-gradient(circle at 12% 16%, rgba(250, 241, 222, .50), transparent 34%),
    radial-gradient(circle at 88% 12%, rgba(247, 242, 230, .58), transparent 40%),
    radial-gradient(circle at 15% 90%, rgba(232, 218, 188, .34), transparent 42%),
    linear-gradient(135deg, #f3ddb8 0%, #f6e6c7 25%, #f8ecd8 54%, #f7f3ea 100%) !important;
  box-shadow:
    0 2px 8px rgba(80, 61, 28, .08),
    inset 0 1px 0 rgba(255, 255, 255, .56) !important;
  color: var(--shp-text) !important;
  font-family: Inter, "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

body.sayuri-app-shell .sayuri-homepage-panel-v2::before,
.sayuri-homepage-panel-v2::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  opacity: .22 !important;
  background-image: radial-gradient(rgba(80, 64, 34, .16) .55px, transparent .7px) !important;
  background-size: 9px 9px !important;
}

body.sayuri-app-shell .sayuri-homepage-panel-v2::after,
.sayuri-homepage-panel-v2::after {
  content: "" !important;
  position: absolute !important;
  inset: 4px !important;
  z-index: 2 !important;
  border-radius: calc(var(--shp-radius) - 4px) !important;
  border: 2px solid transparent !important;
  background:
    linear-gradient(135deg, rgba(253, 248, 240, .92) 0%, rgba(250, 244, 232, .70) 38%, rgba(238, 225, 202, .28) 72%, rgba(222, 203, 166, .18) 100%) border-box !important;
  -webkit-mask:
    linear-gradient(#000 0 0) padding-box,
    linear-gradient(#000 0 0) border-box !important;
  -webkit-mask-composite: xor !important;
  mask:
    linear-gradient(#000 0 0) padding-box,
    linear-gradient(#000 0 0) border-box !important;
  mask-composite: exclude !important;
  box-shadow:
    inset 0 0 0 1px rgba(232, 228, 216, .42),
    0 0 0 1px rgba(172, 158, 130, .16),
    inset 0 1px 2px rgba(246, 241, 230, .62),
    inset 0 -1px 2px rgba(132, 128, 116, .16) !important;
  pointer-events: none !important;
}

body.sayuri-app-shell .sayuri-homepage-panel-v2[data-shp-v2-height-minus8="1"],
.sayuri-homepage-panel-v2[data-shp-v2-height-minus8="1"] {
  height: var(--shp-panel-height-minus8) !important;
  min-height: var(--shp-panel-height-minus8) !important;
  aspect-ratio: auto !important;
}

.shp-v2-expanded-view,
.shp-v2-collapsed-view {
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
}

.shp-v2-expanded-view {
  display: block !important;
}

.shp-v2-collapsed-view {
  display: none !important;
}

.shp-v2-slot,
.shp-v2-cart-identity-action,
.shp-v2-pencil,
.shp-v2-collapse-handle,
.shp-v2-collapsed-expand {
  box-sizing: border-box !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: inherit !important;
  cursor: pointer !important;
  font-family: inherit !important;
  margin: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
}

.shp-v2-slot {
  position: absolute !important;
  display: block !important;
  text-align: left !important;
}

/* SAYURI_HOMEPAGE_PANEL_V2_CART_INDEPENDENT_ACTION_TOPOLOGY_LOCK */
.shp-v2-cart-identity-action {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  display: block !important;
  text-align: left !important;
}

/* SAYURI_HOMEPAGE_PANEL_V2_CANONICAL_V1_VISUAL_GEOMETRY_LOCK */
.shp-v2-slot[data-sayuri-panel-slot="cart"] {
  left: var(--shp-panel-pad-x) !important;
  top: 6.5% !important;
  width: calc(var(--shp-divider-x) - var(--shp-panel-pad-x)) !important;
  height: 86.5% !important;
}

.shp-v2-slot[data-sayuri-panel-slot="cart"]::after {
  content: "" !important;
  position: absolute !important;
  right: -0.4% !important;
  top: 8.2% !important;
  width: 1px !important;
  height: 80.2% !important;
  background: linear-gradient(to bottom, transparent, rgba(96, 107, 78, .42), transparent) !important;
  pointer-events: none !important;
}

.shp-v2-slot[data-sayuri-panel-slot="schedule"] {
  left: var(--shp-right-x) !important;
  top: 6.5% !important;
  width: var(--shp-right-w) !important;
  height: 41.6% !important;
}

.shp-v2-slot[data-sayuri-panel-slot="address"] {
  left: var(--shp-right-x) !important;
  top: 52.3% !important;
  width: var(--shp-right-w) !important;
  height: 40.2% !important;
}

.shp-v2-slot[data-sayuri-panel-slot="schedule"]::after {
  content: "" !important;
  position: absolute !important;
  left: 4.2% !important;
  right: 7.2% !important;
  bottom: -7.8% !important;
  height: 1px !important;
  background: linear-gradient(to right, rgba(145, 128, 96, .18), rgba(145, 128, 96, .42), rgba(145, 128, 96, .20)) !important;
  pointer-events: none !important;
}

.shp-v2-icon-box {
  position: absolute !important;
  width: var(--shp-icon-size) !important;
  height: var(--shp-icon-size) !important;
  min-width: var(--shp-icon-size) !important;
  max-width: var(--shp-icon-size) !important;
  min-height: var(--shp-icon-size) !important;
  max-height: var(--shp-icon-size) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--shp-green) !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, .78) !important;
  background:
    radial-gradient(circle at 35% 25%, rgba(255, 255, 255, .86), transparent 42%),
    linear-gradient(145deg, #fff7e7, #ead7ad) !important;
  box-shadow:
    0 7px 14px rgba(83, 65, 34, .18),
    inset 0 1px 0 rgba(255, 255, 255, .72),
    inset 0 -2px 3px rgba(151, 112, 48, .16) !important;
  pointer-events: none !important;
}

.shp-v2-cart-icon-box {
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) translateY(-6px) !important;
}

.shp-v2-schedule-icon-box,
.shp-v2-address-icon-box {
  left: var(--shp-right-icon-left-final) !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

.shp-v2-icon-svg {
  width: 54% !important;
  height: 54% !important;
  display: block !important;
}

.shp-v2-icon-svg,
.shp-v2-icon-svg * {
  fill: none !important;
  stroke: var(--shp-green) !important;
  stroke-width: 1.9 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.shp-v2-pin-icon-svg path,
.shp-v2-pin-icon-svg circle {
  fill: var(--shp-green) !important;
  stroke: var(--shp-green) !important;
}

.shp-v2-label {
  position: absolute !important;
  color: var(--shp-muted) !important;
  display: block !important;
  font-size: var(--shp-label-size) !important;
  font-weight: var(--shp-label-weight) !important;
  font-style: italic !important;
  letter-spacing: .005em !important;
  line-height: 1.05 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.shp-v2-value,
.shp-v2-value * {
  color: var(--shp-text) !important;
  font-size: var(--shp-value-size) !important;
  font-weight: var(--shp-value-weight) !important;
  font-style: normal !important;
  letter-spacing: 0 !important;
  line-height: 1.12 !important;
}

.shp-v2-cart-identity {
  position: absolute !important;
  left: 7.1% !important;
  top: 12px !important;
  width: 88.5% !important;
  height: 48px !important;
  display: block !important;
  overflow: visible !important;
}

.shp-v2-cart-label {
  left: calc(var(--shp-icon-size) + 10px) !important;
  top: 1px !important;
  width: calc(100% - var(--shp-icon-size) - 14px) !important;
  max-width: calc(100% - var(--shp-icon-size) - 14px) !important;
  transform: translateY(-20px) !important;
  translate: 0 2px !important;
}

/* SAYURI_HOMEPAGE_PANEL_V2_CART_NAME_PILL_PARITY_LOCK */
.shp-v2-cart-name-pill {
  position: absolute !important;
  left: calc(var(--shp-icon-size) + 10px) !important;
  top: 17px !important;
  width: fit-content !important;
  min-width: 0 !important;
  max-width: 120px !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: 37.53px !important;
  display: inline-block !important;
  overflow: hidden !important;
  contain: paint !important;
  clip-path: inset(0 round 4px) !important;
  transform: translate(-8px, -20px) !important;
  translate: 0 4px !important;
  padding: 3px 6px 5px 6px !important;
  border-radius: 4px !important;
  border: 1px solid rgba(108, 132, 100, 0.22) !important;
  background: linear-gradient(135deg, rgba(235, 242, 222, 0.72), rgba(249, 235, 202, 0.72)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.62), 0 1px 2px rgba(92,73,38,0.08) !important;
  color: #25652d !important;
  font-size: 11.1px !important;
  font-weight: 595 !important;
  line-height: 11.6px !important;
  white-space: normal !important;
}

.shp-v2-km-name-pill-inner,
.shp-v2-alamat-value-pill-inner {
  box-sizing: border-box !important;
  display: block !important;
  width: max-content !important;
  max-width: 100% !important;
  height: auto !important;
  overflow: hidden !important;
  contain: paint !important;
  clip-path: inset(0) !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  text-overflow: clip !important;
  color: inherit !important;
  font: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* SAYURI_HOMEPAGE_PANEL_V2_CART_NOTE_ROWS_5_LOCK */
.shp-v2-cart-notes {
  position: absolute !important;
  left: 7.1% !important;
  top: 45.5% !important;
  width: 84.5% !important;
  height: 38% !important;
  z-index: 2 !important;
  display: grid !important;
  grid-template-rows: 13px repeat(5, 1fr) !important;
  row-gap: 0 !important;
  color: var(--shp-muted) !important;
  pointer-events: none !important;
}

.shp-v2-cart-notes::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 27% !important;
  height: 1px !important;
  background: rgba(145, 128, 96, .28) !important;
}

.shp-v2-cart-notes-label {
  color: transparent !important;
  font-size: var(--shp-label-size) !important;
  line-height: 1.05 !important;
  pointer-events: none !important;
}

.shp-v2-cart-note-row {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 10px 128px !important;
  align-items: center !important;
  color: var(--shp-green) !important;
  overflow: hidden !important;
}

.shp-v2-cart-note-bullet {
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  border: 1px solid #255415 !important;
  box-sizing: border-box !important;
  background: transparent !important;
  justify-self: center !important;
}

.shp-v2-cart-note-text {
  width: 128px !important;
  max-width: 128px !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
  color: var(--shp-muted) !important;
  font-size: 8.9px !important;
  line-height: 1.1 !important;
}

.shp-v2-label.shp-v2-schedule-label,
.shp-v2-label.shp-v2-address-label {
  left: calc(var(--shp-right-icon-left-final) + var(--shp-icon-size) + 10px) !important;
  top: 4px !important;
  width: calc(100% - var(--shp-right-icon-left-final) - var(--shp-icon-size) - 24px) !important;
}

.shp-v2-schedule-label {
  transform: translateY(-5px) !important;
}

.shp-v2-address-label {
  transform: translateY(-9px) !important;
}

.shp-v2-schedule-value,
.shp-v2-address-pill {
  position: absolute !important;
  left: calc(var(--shp-right-icon-left-final) + var(--shp-icon-size) + 10px) !important;
  top: 20px !important;
  width: calc(100% - var(--shp-right-icon-left-final) - var(--shp-icon-size) - 24px) !important;
  display: block !important;
  overflow: hidden !important;
}

/* SAYURI_HOMEPAGE_PANEL_V2_TIME_SPLIT_SOFT_CHIPS_V7_SOURCE_MIGRATION */
.shp-v2-schedule-date {
  display: block !important;
  transform: translateY(-4px) !important;
  white-space: nowrap !important;
}

.shp-v2-schedule-time-chip {
  display: block !important;
  margin-top: 1px !important;
  transform: translateY(-2px) !important;
}

.shp-v2-time-text {
  --sayuri-time-dash-render-size: 11.6px;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  column-gap: 0 !important;
  row-gap: 0 !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  width: auto !important;
  inline-size: auto !important;
  min-width: 0 !important;
  min-inline-size: 0 !important;
  max-width: none !important;
  max-inline-size: none !important;
  color: #25652d !important;
  font-size: 10.6px !important;
  font-weight: 590 !important;
}

.shp-v2-time-text .shp-v2-time-start,
.shp-v2-time-text .shp-v2-time-end {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: auto !important;
  inline-size: auto !important;
  min-width: 0 !important;
  min-inline-size: 0 !important;
  max-width: none !important;
  max-inline-size: none !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 3px 6px !important;
  border-radius: 4px !important;
  border: 1px solid rgba(108, 132, 100, 0.22) !important;
  background:
    linear-gradient(135deg, rgba(235, 242, 222, 0.72), rgba(249, 235, 202, 0.72)) !important;
  color: #25652d !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: 595 !important;
  line-height: 1 !important;
  letter-spacing: inherit !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.62),
    0 1px 2px rgba(92,73,38,0.08) !important;
}

.shp-v2-time-text .shp-v2-time-dash {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  width: auto !important;
  inline-size: auto !important;
  min-width: 0 !important;
  min-inline-size: 0 !important;
  max-width: none !important;
  max-inline-size: none !important;
  flex: 0 0 auto !important;
  padding: 0 !important;
  margin-left: 4px !important;
  margin-right: 4px !important;
  font-family: inherit !important;
  font-size: 0 !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  color: transparent !important;
  text-shadow: none !important;
  opacity: .92 !important;
  letter-spacing: 0 !important;
  transform: none !important;
}

.shp-v2-time-text .shp-v2-time-dash::before {
  content: "\2013" !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: inherit !important;
  font-size: var(--sayuri-time-dash-render-size, 11.6px) !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  color: rgba(25, 34, 30, 0.88) !important;
  opacity: .92 !important;
  letter-spacing: 0 !important;
  transform: none !important;
}

.shp-v2-time-text:not(:has(.shp-v2-time-start)):not(:has(.shp-v2-time-end)):not(:has(.shp-v2-time-dash)) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: auto !important;
  inline-size: auto !important;
  min-width: 0 !important;
  min-inline-size: 0 !important;
  max-width: none !important;
  max-inline-size: none !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 3px 6px !important;
  border-radius: 4px !important;
  border: 1px solid rgba(108, 132, 100, 0.22) !important;
  background:
    linear-gradient(135deg, rgba(235, 242, 222, 0.72), rgba(249, 235, 202, 0.72)) !important;
  color: #25652d !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: 595 !important;
  line-height: 1 !important;
  letter-spacing: inherit !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.62),
    0 1px 2px rgba(92,73,38,0.08) !important;
}

/* SAYURI_HOMEPAGE_PANEL_V2_ADDRESS_PILL_3ROW_PARITY_LOCK */
.shp-v2-address-pill {
  width: fit-content !important;
  min-width: 0 !important;
  max-width: 150px !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: 44.95px !important;
  display: inline-block !important;
  overflow: hidden !important;
  contain: paint !important;
  clip-path: inset(0 round 4px) !important;
  transform: translate(-8px, -9px) !important;
  padding: 3px 6px 5px 6px !important;
  border-radius: 4px !important;
  border: 1px solid rgba(108, 132, 100, 0.22) !important;
  background: linear-gradient(135deg, rgba(235, 242, 222, 0.72), rgba(249, 235, 202, 0.72)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.62), 0 1px 2px rgba(92,73,38,0.08) !important;
  color: #25652d !important;
  font-size: 10.1px !important;
  font-weight: 595 !important;
  line-height: 11.87px !important;
  white-space: normal !important;
}

.shp-v2-alamat-value-pill-inner {
  max-height: 35.62px !important;
}

/* SAYURI_HOMEPAGE_PANEL_V2_ACTION_CHEVRON_PENCIL_LOCK */
.shp-v2-row-chevron {
  position: absolute !important;
  right: 0 !important;
  top: 50% !important;
  width: 10px !important;
  height: 10px !important;
  color: var(--shp-green) !important;
  pointer-events: none !important;
}

.shp-v2-km-chevron {
  top: calc(50% + 17px) !important;
  translate: 12px 0 !important;
}

.shp-v2-schedule-chevron {
  top: calc(50% + 12px) !important;
  translate: 10px 0 !important;
}

.shp-v2-address-chevron {
  top: calc(50% + 20px) !important;
  translate: 10px 0 !important;
}

.shp-v2-row-chevron-svg,
.shp-v2-row-chevron-svg * {
  fill: none !important;
  stroke: var(--shp-green) !important;
  stroke-width: 1.4 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.shp-v2-pencil {
  position: absolute !important;
  right: 1px !important;
  top: var(--shp-catatan-pencil-top, 62px) !important;
  width: 19px !important;
  height: 19px !important;
  transform: translateY(-50%) !important;
  translate: -2px 0 !important;
  color: var(--shp-green) !important;
  z-index: 3 !important;
  pointer-events: auto !important;
}

.shp-v2-pencil-icon {
  width: 18px !important;
  height: 18px !important;
  display: block !important;
}

.shp-v2-pencil-icon * {
  fill: none !important;
  stroke: var(--shp-green) !important;
  stroke-width: 1.85 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.shp-v2-collapse-handle {
  position: absolute !important;
  left: 50% !important;
  bottom: 0 !important;
  transform: translateX(-50%) !important;
  width: 23px !important;
  height: 11.5px !important;
  min-width: 23px !important;
  min-height: 11.5px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-top: 1.5px solid rgba(189, 167, 125, .44) !important;
  border-left: 1.5px solid rgba(189, 167, 125, .44) !important;
  border-right: 1.5px solid rgba(189, 167, 125, .44) !important;
  border-bottom: 0 !important;
  border-top-left-radius: 5.75px !important;
  border-top-right-radius: 5.75px !important;
  background:
    radial-gradient(circle at 20% 18%, rgba(255, 255, 255, .58), transparent 44%),
    linear-gradient(135deg, #f3ddb8 0%, #f6e6c7 35%, #f8ecd8 72%, #f7f3ea 100%) !important;
  color: var(--shp-green) !important;
  z-index: 35 !important;
}

.shp-v2-collapse-handle-icon,
.shp-v2-collapsed-decor-handle-icon {
  width: 11.5px !important;
  height: 11.5px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: none !important;
}

.shp-v2-collapse-chevron-svg,
.shp-v2-collapsed-decor-chevron-svg,
.shp-v2-collapse-chevron-svg *,
.shp-v2-collapsed-decor-chevron-svg * {
  width: 100% !important;
  height: 100% !important;
  fill: none !important;
  stroke: var(--shp-green) !important;
  stroke-width: 2.2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

/* SAYURI_HOMEPAGE_PANEL_V2_COLLAPSED_400X40_LOCK */
.sayuri-homepage-panel-v2[data-sayuri-panel-collapsed="1"] {
  width: min(400px, calc(100vw - 12px)) !important;
  max-width: min(400px, calc(100vw - 12px)) !important;
  height: 40px !important;
  min-height: 0 !important;
  max-height: 40px !important;
  aspect-ratio: auto !important;
  border-radius: 18px !important;
  overflow: hidden !important;
}

.sayuri-homepage-panel-v2[data-sayuri-panel-collapsed="1"] .shp-v2-expanded-view {
  display: none !important;
}

.sayuri-homepage-panel-v2[data-sayuri-panel-collapsed="1"] .shp-v2-collapsed-view {
  display: block !important;
}

.shp-v2-collapsed-expand {
  position: absolute !important;
  inset: 0 !important;
  z-index: 4 !important;
  width: 100% !important;
  height: 40px !important;
  display: grid !important;
  grid-template-columns: 105px 1px 117px 1px 144px !important;
  column-gap: 3px !important;
  align-items: center !important;
  justify-items: center !important;
  padding: 0 10px !important;
  overflow: hidden !important;
  color: var(--shp-green) !important;
  font-size: 9.8px !important;
  font-weight: 550 !important;
  letter-spacing: -.01em !important;
  line-height: 1.1 !important;
}

.shp-v2-collapsed-group {
  position: relative !important;
  z-index: 2 !important;
  min-width: 0 !important;
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 20px minmax(0, auto) !important;
  column-gap: 8px !important;
  align-items: center !important;
  justify-content: center !important;
  justify-items: start !important;
  overflow: visible !important;
  color: var(--shp-green) !important;
}

.shp-v2-collapsed-cart {
  transform: translate(-4px, 0) !important;
}

.shp-v2-collapsed-address {
  transform: translate(3px, 0) !important;
}

.shp-v2-collapsed-icon {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  max-width: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
}

.shp-v2-collapsed-icon .shp-v2-icon-svg {
  width: 20px !important;
  height: 20px !important;
}

.shp-v2-collapsed-text {
  display: block !important;
  min-width: 0 !important;
  max-width: 140px !important;
  max-height: 24px !important;
  padding-bottom: 3px !important;
  margin-bottom: -3px !important;
  overflow: hidden !important;
  text-align: left !important;
  white-space: normal !important;
}

.shp-v2-collapsed-cart .shp-v2-collapsed-text {
  max-width: 101px !important;
}

.sayuri-collapsed-descender-inner {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  width: 100% !important;
  max-height: 22.2px !important;
  overflow: hidden !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  text-align: left !important;
  color: inherit !important;
  font: inherit !important;
}

.shp-v2-collapsed-schedule {
  grid-template-columns: 20px max-content !important;
  justify-items: center !important;
}

.shp-v2-collapsed-schedule-stack {
  display: grid !important;
  grid-template-rows: auto auto !important;
  row-gap: 1px !important;
  line-height: 1.05 !important;
  justify-items: center !important;
}

.shp-v2-collapsed-date-line,
.shp-v2-collapsed-time-line {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  text-align: center !important;
  font-size: 9.8px !important;
  font-weight: 550 !important;
  color: var(--shp-green) !important;
}

.shp-v2-collapsed-separator {
  position: relative !important;
  z-index: 2 !important;
  width: 1px !important;
  height: 20px !important;
  justify-self: center !important;
  background: linear-gradient(to bottom, transparent, rgba(96, 107, 78, .42), transparent) !important;
  border-radius: 99px !important;
  pointer-events: none !important;
}

.shp-v2-collapsed-decor-handle {
  position: absolute !important;
  left: 50% !important;
  top: 34px !important;
  width: 23px !important;
  height: 11.5px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transform: translateX(-50%) rotate(180deg) !important;
  border-top: 1.5px solid rgba(189, 167, 125, .44) !important;
  border-left: 1.5px solid rgba(189, 167, 125, .44) !important;
  border-right: 1.5px solid rgba(189, 167, 125, .44) !important;
  border-top-left-radius: 5.75px !important;
  border-top-right-radius: 5.75px !important;
  background: linear-gradient(135deg, #f3ddb8 0%, #f6e6c7 35%, #f8ecd8 72%, #f7f3ea 100%) !important;
  pointer-events: none !important;
}

/* SAYURI_HOMEPAGE_PANEL_V2_AUTO_COLLAPSE_IDLE_RETURN_V1 */
body.sayuri-app-shell .sayuri-homepage-panel-v2[data-sayuri-panel-collapsed="1"][data-sayuri-panel-auto-collapsed="1"],
.sayuri-homepage-panel-v2[data-sayuri-panel-collapsed="1"][data-sayuri-panel-auto-collapsed="1"] {
  position: fixed !important;
  top: calc(env(safe-area-inset-top) + 64px) !important;
  right: auto !important;
  bottom: auto !important;
  left: 50% !important;
  width: min(400px, calc(100vw - 12px)) !important;
  max-width: min(400px, calc(100vw - 12px)) !important;
  height: 40px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  transform: translateX(-50%) !important;
  z-index: 9999998 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition-property: opacity !important;
  transition-duration: 0s !important;
  transition-timing-function: linear !important;
}

body.sayuri-app-shell.sayuri-homepage-panel-auto-idle-admitted
.sayuri-homepage-panel-v2[data-sayuri-panel-collapsed="1"][data-sayuri-panel-auto-collapsed="1"] {
  opacity: 1 !important;
  pointer-events: auto !important;
  transition-duration: calc(var(--sayuri-app-bottom-navigation-dock-transition-ms) * 1ms) !important;
}

/* SAYURI_HOMEPAGE_PANEL_V2_EXACT_VISUAL_PARITY_RESIDUAL_CORRECTION_V1 */

/* Exact terminal V1 Catatan typography. */
.shp-v2-cart-notes > :first-child:not([data-sayuri-cart-note-row]),
.shp-v2-cart-notes > :first-child:not([data-sayuri-cart-note-row]) *,
.shp-v2-cart-notes-label,
.shp-v2-cart-note-label {
  font-size: 9.22px !important;
  line-height: 1.05 !important;
}

.shp-v2-cart-note-row,
.shp-v2-cart-note-row *,
.shp-v2-cart-note-text {
  font-size: 9.22px !important;
  line-height: 1.18 !important;
}

/* Exact V1 label-center chevron Y ownership, translated to V2 semantic slots. */
.shp-v2-km-chevron {
  top: var(--shp-km-chevron-top, 50%) !important;
}

.shp-v2-schedule-chevron {
  top: var(--shp-jadwal-chevron-top, 50%) !important;
}

.shp-v2-address-chevron {
  top: var(--shp-alamat-chevron-top, 50%) !important;
}

/* Exact V1 presentation-only Address pill boundary. */
.shp-v2-address-pill {
  max-width: var(--shp-address-pill-max-width, none) !important;
}


/* SAYURI_HOMEPAGE_PANEL_V2_MECHANICAL_V1_PARITY_CLOSEOUT_V1 */

/* Expanded shell: exact terminal V1 paint/texture/outflow. */
.sayuri-homepage-panel-v2[data-sayuri-panel-collapsed="0"] {
  overflow: visible !important;
  color: #111827 !important;
  box-shadow:
    0 10px 18px rgba(96, 72, 36, .06),
    0 2px 5px rgba(116, 96, 60, .045),
    inset 0 1px 0 rgba(255, 255, 255, .62),
    inset 0 -1px 3px rgba(171, 130, 62, .08) !important;
}

.sayuri-homepage-panel-v2[data-sayuri-panel-collapsed="0"]::before {
  opacity: .23 !important;
  background-image:
    radial-gradient(circle at 16% 20%, rgba(90, 70, 35, .12) 0 1px, transparent 1.2px),
    radial-gradient(circle at 70% 32%, rgba(90, 70, 35, .08) 0 1px, transparent 1.3px),
    radial-gradient(circle at 38% 82%, rgba(90, 70, 35, .07) 0 1px, transparent 1.2px) !important;
  background-size: 17px 19px, 23px 21px, 29px 25px !important;
  mix-blend-mode: multiply !important;
}

/* Exact V1 left divider. */
.shp-v2-slot[data-sayuri-panel-slot="cart"]::after {
  right: -3.1% !important;
  top: 8.1% !important;
  height: 80.5% !important;
  background:
    linear-gradient(
      to bottom,
      transparent 0%,
      rgba(185, 153, 95, .28) 8%,
      rgba(145, 128, 96, .42) 50%,
      rgba(185, 153, 95, .28) 92%,
      transparent 100%
    ) !important;
}

/* Cart identity is translated because V2 keeps the independent action carrier. */
.shp-v2-cart-identity {
  transform: translateX(-10px) !important;
}

.shp-v2-cart-icon-box {
  top: calc(40% - 8px) !important;
  transform: translateY(-50%) !important;
  color: #111827 !important;
  font-weight: 400 !important;
  text-align: start !important;
}

.shp-v2-cart-label {
  top: 8px !important;
  overflow: visible !important;
  text-overflow: clip !important;
  text-align: start !important;
}

.shp-v2-cart-name-pill {
  top: 20px !important;
  width: calc(100% - 48px) !important;
  text-align: start !important;
}

.shp-v2-km-name-pill-inner {
  width: auto !important;
  max-width: 100% !important;
  white-space: normal !important;
}

/* Exact V1 Catatan container + row flow. */
.shp-v2-cart-notes {
  transform: translate(-4px, -13px) !important;
  padding-top: 3px !important;
  display: block !important;
  overflow: visible !important;
  color: var(--shp-muted) !important;
  font-size: 9.8px !important;
  font-style: italic !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  text-align: start !important;
}

.shp-v2-cart-notes::before {
  width: 91% !important;
  background-color: transparent !important;
  background-image:
    linear-gradient(
      to right,
      rgba(145, 128, 96, .16),
      rgba(145, 128, 96, .34),
      rgba(145, 128, 96, .14)
    ) !important;
  transform: translateY(2.2px) !important;
}

.shp-v2-cart-notes-label {
  display: block !important;
  font-size: 9.22px !important;
  font-style: italic !important;
  font-weight: 400 !important;
  line-height: 1.05 !important;
  color: var(--shp-muted) !important;
  text-align: start !important;
  overflow: visible !important;
}

.shp-v2-cart-note-row {
  width: 100% !important;
  height: 9.67708px !important;
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center !important;
  gap: 7px !important;
  margin-bottom: 3px !important;
  color: var(--shp-muted) !important;
  font-size: 9.22px !important;
  font-style: italic !important;
  font-weight: 400 !important;
  line-height: 1.18 !important;
  text-align: start !important;
  overflow: visible !important;
}

.shp-v2-cart-note-bullet {
  flex: 0 0 5px !important;
  width: 5px !important;
  height: 5px !important;
  min-width: 5px !important;
  max-width: 5px !important;
  justify-self: auto !important;
  color: var(--shp-muted) !important;
  font-style: italic !important;
  text-align: start !important;
}

.shp-v2-cart-note-text {
  flex: 1 1 auto !important;
  width: auto !important;
  max-width: none !important;
  color: var(--shp-muted) !important;
  font-size: 9.22px !important;
  font-style: italic !important;
  font-weight: 400 !important;
  line-height: 1.18 !important;
  text-align: start !important;
  overflow: visible !important;
}

/* V1 final pencil artwork already matches; copy its carrier presentation. */
.shp-v2-pencil {
  top: 69.156px !important;
  right: 1px !important;
  translate: 1.292px 0 !important;
  border-radius: 6px !important;
  opacity: .88 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  z-index: 25 !important;
  font-family: "Source Sans Pro", HelveticaNeue-Light, "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif !important;
}

.shp-v2-pencil-icon {
  overflow: visible !important;
}

/* Right-side rows: exact terminal V1 vertical tuning. */
.shp-v2-schedule-icon-box,
.shp-v2-address-icon-box {
  top: calc(50% - 8px) !important;
  transform: translateY(-50%) !important;
  color: #111827 !important;
  font-weight: 400 !important;
  text-align: start !important;
}

.shp-v2-schedule-label,
.shp-v2-address-label {
  top: 8px !important;
  overflow: visible !important;
  text-overflow: clip !important;
  text-align: start !important;
}

.shp-v2-slot[data-sayuri-panel-slot="address"] {
  transform: translateY(2px) !important;
}

.shp-v2-schedule-value {
  height: 34.8125px !important;
  overflow: visible !important;
  letter-spacing: -.014em !important;
  text-align: start !important;
}

.shp-v2-schedule-date {
  padding-bottom: 1.696px !important;
  margin-bottom: -1.696px !important;
  letter-spacing: -.014em !important;
  overflow: visible !important;
  text-align: start !important;
}

.shp-v2-schedule-time-chip,
.shp-v2-time-text {
  width: auto !important;
  font-size: 11.6px !important;
  line-height: 1.04 !important;
  letter-spacing: -.014em !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-align: start !important;
}

.shp-v2-time-text {
  display: flex !important;
  align-items: baseline !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  margin-top: 0 !important;
  padding-bottom: 1.856px !important;
  margin-bottom: -1.856px !important;
}

.shp-v2-time-start,
.shp-v2-time-end {
  font-size: 11.6px !important;
  line-height: 1 !important;
  letter-spacing: -.014em !important;
  text-align: start !important;
}

/* V1 chevron label-center rules translated to the V2 independent carriers. */
.shp-v2-km-chevron {
  right: 16.031px !important;
  top: calc(var(--shp-km-chevron-top, 6.838px) + 16.65px) !important;
  transform: translateY(-50%) !important;
  translate: 12px 0 !important;
  overflow: hidden !important;
  font-weight: 400 !important;
  text-align: start !important;
}

.shp-v2-schedule-chevron {
  right: 7.24px !important;
  top: calc(var(--shp-jadwal-chevron-top, 7.838px) + 11.60px) !important;
  transform: translateY(-50%) !important;
  translate: 10px 0 !important;
  overflow: hidden !important;
  font-weight: 400 !important;
  text-align: start !important;
}

.shp-v2-address-chevron {
  right: 7.24px !important;
  top: calc(var(--shp-alamat-chevron-top, 3.838px) + 15.81px) !important;
  transform: translateY(-50%) !important;
  translate: 10px 0 !important;
  overflow: hidden !important;
  font-weight: 400 !important;
  text-align: start !important;
}

.shp-v2-icon-svg,
.shp-v2-pencil-icon,
.shp-v2-collapse-chevron-svg {
  overflow: visible !important;
}

/* Expanded disclosure terminal skin. */
.shp-v2-collapse-handle {
  box-shadow:
    0 -1px 3px rgba(116, 96, 60, .045),
    inset 0 1px 0 rgba(255, 255, 255, .58) !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

/* ----------------------------------------------------------------------- */
/* COLLAPSED: same V2 root, but the visible child copies the V1 400x40      */
/* standalone shell. The ±0.666667px translation compensates only for the   */
/* already-existing V2 parent border; it does not create a second shell.     */
/* ----------------------------------------------------------------------- */

.sayuri-homepage-panel-v2[data-sayuri-panel-collapsed="1"] {
  overflow: visible !important;
}

.sayuri-homepage-panel-v2[data-sayuri-panel-collapsed="1"] .shp-v2-collapsed-expand {
  top: -.666667px !important;
  right: -.666667px !important;
  bottom: auto !important;
  left: -.666667px !important;
  width: auto !important;
  height: 40px !important;
  box-sizing: border-box !important;
  border: .666667px solid rgba(189, 167, 125, .44) !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 12% 16%, rgba(250, 241, 222, .50), transparent 34%),
    radial-gradient(circle at 88% 12%, rgba(247, 242, 230, .58), transparent 40%),
    radial-gradient(circle at 15% 90%, rgba(232, 218, 188, .34), transparent 42%),
    linear-gradient(135deg, #f3ddb8 0%, #f6e6c7 25%, #f8ecd8 54%, #f7f3ea 100%) !important;
  box-shadow:
    0 2px 8px rgba(80, 61, 28, .08),
    inset 0 1px 0 rgba(255, 255, 255, .56) !important;
  overflow: hidden !important;
}

.sayuri-homepage-panel-v2[data-sayuri-panel-collapsed="1"] .shp-v2-collapsed-expand::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  opacity: .22 !important;
  border-radius: 18px !important;
  background-image: radial-gradient(rgba(80, 64, 34, .16) .55px, transparent .7px) !important;
  background-size: 9px 9px !important;
}

.sayuri-homepage-panel-v2[data-sayuri-panel-collapsed="1"] .shp-v2-collapsed-expand::after {
  content: "" !important;
  position: absolute !important;
  inset: 4px !important;
  z-index: 1 !important;
  border-radius: 16px !important;
  border: 2px solid transparent !important;
  background:
    linear-gradient(135deg, rgba(253, 248, 240, .92) 0%, rgba(250, 244, 232, .70) 38%, rgba(238, 225, 202, .28) 72%, rgba(222, 203, 166, .18) 100%) border-box !important;
  -webkit-mask:
    linear-gradient(#000 0 0) padding-box,
    linear-gradient(#000 0 0) border-box !important;
  -webkit-mask-composite: xor !important;
  mask:
    linear-gradient(#000 0 0) padding-box,
    linear-gradient(#000 0 0) border-box !important;
  mask-composite: exclude !important;
  box-shadow:
    inset 0 0 0 1px rgba(232, 228, 216, .42),
    0 0 0 1px rgba(172, 158, 130, .16),
    inset 0 1px 2px rgba(246, 241, 230, .62),
    inset 0 -1px 2px rgba(132, 128, 116, .16) !important;
  pointer-events: none !important;
}

.shp-v2-collapsed-group,
.shp-v2-collapsed-separator {
  z-index: 2 !important;
}

.shp-v2-collapsed-date-line,
.shp-v2-collapsed-time-line {
  overflow: visible !important;
  line-height: 1.08 !important;
}


/* SAYURI_HOMEPAGE_PANEL_V2_NARROW_REGEX_CATATAN_PARITY_FIX_V1 */
/* Exact V1 Catatan label -> native-row rhythm translated to V2 semantic children. */
.shp-v2-cart-notes-label {
  margin-top: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 4px !important;
  margin-left: 0 !important;
}

.shp-v2-cart-note-row {
  transform: translateY(2.2px) !important;
}


/* SAYURI_HOMEPAGE_PANEL_V2_FINAL_BOUNDED_PARITY_CLOSEOUT_V1 */

/* V1 compatibility variable retained as presentation metadata only. */
body.sayuri-app-shell .sayuri-homepage-panel-v2,
.sayuri-homepage-panel-v2 {
  --shp-right-icon-left: 2.8%;
}

/* Higher-specificity terminal expanded shell ownership.
 * This intentionally beats the original body.sayuri-app-shell base rule.
 */
body.sayuri-app-shell .sayuri-homepage-panel-v2[data-sayuri-panel-collapsed="0"],
.sayuri-homepage-panel-v2[data-sayuri-panel-collapsed="0"] {
  overflow: visible !important;
  color: #111827 !important;
  box-shadow:
    0 10px 18px rgba(96, 72, 36, .06),
    0 2px 5px rgba(116, 96, 60, .045),
    inset 0 1px 0 rgba(255, 255, 255, .62),
    inset 0 -1px 3px rgba(171, 130, 62, .08) !important;
}

body.sayuri-app-shell .sayuri-homepage-panel-v2[data-sayuri-panel-collapsed="0"]::before,
.sayuri-homepage-panel-v2[data-sayuri-panel-collapsed="0"]::before {
  opacity: .23 !important;
  background-image:
    radial-gradient(circle at 16% 20%, rgba(90, 70, 35, .12) 0 1px, transparent 1.2px),
    radial-gradient(circle at 70% 32%, rgba(90, 70, 35, .08) 0 1px, transparent 1.3px),
    radial-gradient(circle at 38% 82%, rgba(90, 70, 35, .07) 0 1px, transparent 1.2px) !important;
  background-size: 17px 19px, 23px 21px, 29px 25px !important;
  mix-blend-mode: multiply !important;
}

/* Button/wrapper defaults translated to the V1 non-button presentation. */
.sayuri-homepage-panel-v2[data-sayuri-panel-collapsed="0"] .shp-v2-slot,
.sayuri-homepage-panel-v2[data-sayuri-panel-collapsed="0"] .shp-v2-cart-identity {
  color: #111827 !important;
  font-weight: 400 !important;
  text-align: start !important;
}

/* Exact terminal V1 divider geometry. */
.sayuri-homepage-panel-v2[data-sayuri-panel-collapsed="0"] .shp-v2-slot[data-sayuri-panel-slot="cart"]::after {
  right: -0.4% !important;
  top: 8.2% !important;
  height: 80.2% !important;
}

.sayuri-homepage-panel-v2[data-sayuri-panel-collapsed="0"] .shp-v2-slot[data-sayuri-panel-slot="schedule"]::after {
  transform: translateY(-3px) !important;
}

/* The base V2 compound selector had higher specificity and held these 4px
 * above their canonical V1 positions. This is the translated terminal owner.
 */
.sayuri-homepage-panel-v2[data-sayuri-panel-collapsed="0"] .shp-v2-label.shp-v2-schedule-label,
.sayuri-homepage-panel-v2[data-sayuri-panel-collapsed="0"] .shp-v2-label.shp-v2-address-label {
  top: 8px !important;
}

/* V2 has one extra semantic wrapper around the split-time visual.
 * Shrink that wrapper to the exact V1 visible time width and translate its
 * structural baseline by +3px without changing schedule truth.
 */
.sayuri-homepage-panel-v2[data-sayuri-panel-collapsed="0"] .shp-v2-schedule-time-chip {
  display: inline-block !important;
  width: auto !important;
  max-width: none !important;
  transform: translateY(1px) !important;
}

/* Visible chevron carrier = canonical SVG box.
 * V1's chevron is the SVG itself; V2 keeps an independent semantic span.
 * Zeroing the carrier line box prevents the SVG from sitting ~8px below it.
 */
.sayuri-homepage-panel-v2[data-sayuri-panel-collapsed="0"] .shp-v2-row-chevron {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 0 !important;
}

.sayuri-homepage-panel-v2[data-sayuri-panel-collapsed="0"] .shp-v2-row-chevron-svg {
  display: block !important;
  width: 10px !important;
  height: 10px !important;
}

/* Exact final V1 label-center rules translated to V2 slot coordinates. */
.sayuri-homepage-panel-v2[data-sayuri-panel-collapsed="0"] .shp-v2-km-chevron {
  top: calc(var(--shp-km-chevron-top, 50%) + 17px) !important;
}

.sayuri-homepage-panel-v2[data-sayuri-panel-collapsed="0"] .shp-v2-schedule-chevron {
  top: calc(var(--shp-jadwal-chevron-top, 50%) + 12px) !important;
}

.sayuri-homepage-panel-v2[data-sayuri-panel-collapsed="0"] .shp-v2-address-chevron {
  top: calc(var(--shp-alamat-chevron-top, 50%) + 16px) !important;
}

/* V1 final pencil Y = Catatan label center + 15px.
 * X remains untouched because the fresh Pass1/Pass2 capture already matched.
 */
.sayuri-homepage-panel-v2[data-sayuri-panel-collapsed="0"] .shp-v2-pencil {
  top: calc(var(--shp-catatan-pencil-top, 41.325%) + 15px) !important;
}

/* Exact Address text alignment after button-to-V2 semantic translation. */
.sayuri-homepage-panel-v2[data-sayuri-panel-collapsed="0"] .shp-v2-address-pill,
.sayuri-homepage-panel-v2[data-sayuri-panel-collapsed="0"] .shp-v2-alamat-value-pill-inner {
  text-align: start !important;
}

/* Collapsed must be 40px at the ACTUAL V2 root even if the expanded
 * data-shp-v2-height-minus8 marker was present earlier in the same lifecycle.
 * The JS release above removes the stale marker; this rule is the CSS fail-safe.
 */
body.sayuri-app-shell .sayuri-homepage-panel-v2[data-sayuri-panel-collapsed="1"],
.sayuri-homepage-panel-v2[data-sayuri-panel-collapsed="1"] {
  height: 40px !important;
  min-height: 0 !important;
  max-height: 40px !important;
  aspect-ratio: auto !important;
  overflow: hidden !important;
}

/* Canonical V1 collapsed row inner rim: inset 2px / 1.5px line / no shadow. */
.sayuri-homepage-panel-v2[data-sayuri-panel-collapsed="1"] .shp-v2-collapsed-expand::after {
  inset: 2px !important;
  border-width: 1.5px !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}

/* Canonical collapsed text micro geometry. */
.sayuri-homepage-panel-v2[data-sayuri-panel-collapsed="1"] .shp-v2-collapsed-text {
  line-height: 1.12 !important;
}

.sayuri-homepage-panel-v2[data-sayuri-panel-collapsed="1"] .shp-v2-collapsed-schedule-stack {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  row-gap: 2px !important;
  overflow: visible !important;
}

/* Fresh canonical V1 capture has the decorative collapsed portal present but
 * not visually admitted. Preserve the V2 node but remove its visible paint.
 */
.sayuri-homepage-panel-v2[data-sayuri-panel-collapsed="1"] .shp-v2-collapsed-decor-handle {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}


/* SAYURI_HOMEPAGE_PANEL_V2_FINAL_THREE_VISUAL_RESIDUALS_V1 */

/* 1) Schedule/Address separator:
 * V1 terminal source uses bottom:-7.8% plus translateY(-3px).
 * Runtime proved the pseudo transform ineffective in V2.
 * Equivalent visual geometry is bottom = -7.8% + 3px with transform:none.
 */
.sayuri-homepage-panel-v2[data-sayuri-panel-collapsed="0"] .shp-v2-slot[data-sayuri-panel-slot="schedule"]::after {
  bottom: calc(-7.8% + 3px) !important;
  transform: none !important;
}

/* 2) Exact canonical V1 pin hollow center.
 * V2 already has the exact canonical SVG geometry:
 * path M12 21s6.2... and circle cx=12 cy=9.95 r=2.75.
 * This copies only the V1 paint that had been lost in V2.
 */
.sayuri-homepage-panel-v2 .shp-v2-pin-icon-svg circle {
  fill: #fff7e7 !important;
  stroke: none !important;
}

/* Collapsed V1 bridge uses the same reused expanded pin artwork,
 * with its filled pin path at .6 stroke width and cream center hole.
 */
.sayuri-homepage-panel-v2[data-sayuri-panel-collapsed="1"] .shp-v2-collapsed-address .shp-v2-pin-icon-svg path {
  fill: var(--shp-green, #255415) !important;
  stroke: var(--shp-green, #255415) !important;
  stroke-width: .6 !important;
}

.sayuri-homepage-panel-v2[data-sayuri-panel-collapsed="1"] .shp-v2-collapsed-address .shp-v2-pin-icon-svg circle {
  fill: #fff7e7 !important;
  stroke: none !important;
}

/* 3) Canonical collapsed arrow-handle visual.
 * V1 settled handle is visually outside the 40px pill:
 * source top = row top + 38px, then translateY(+2px).
 * V2 keeps the handle as a child of the canonical same-root expand button;
 * allowing overflow is the topology translation, not a second panel/root.
 */
body.sayuri-app-shell .sayuri-homepage-panel-v2[data-sayuri-panel-collapsed="1"],
.sayuri-homepage-panel-v2[data-sayuri-panel-collapsed="1"] {
  overflow: visible !important;
}

.sayuri-homepage-panel-v2[data-sayuri-panel-collapsed="1"] .shp-v2-collapsed-expand {
  overflow: visible !important;
}

.sayuri-homepage-panel-v2[data-sayuri-panel-collapsed="1"] .shp-v2-collapsed-decor-handle {
  --shp-collapsed-decor-w: 23px;
  --shp-collapsed-decor-h: 11.5px;
  --shp-collapsed-decor-icon: 11.5px;
  --shp-collapsed-decor-radius: 5.75px;
  --shp-collapsed-decor-color: var(--shp-green, #255415);

  position: absolute !important;
  left: 50% !important;
  top: 38px !important;
  width: var(--shp-collapsed-decor-w) !important;
  height: var(--shp-collapsed-decor-h) !important;
  transform: translate(-50%, 2px) !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  box-sizing: border-box !important;
  z-index: 6 !important;

  border-left: 1.5px solid rgba(189, 167, 125, .58) !important;
  border-right: 1.5px solid rgba(189, 167, 125, .58) !important;
  border-bottom: 1.5px solid rgba(189, 167, 125, .58) !important;
  border-top: 1px solid rgba(189, 167, 125, .58) !important;

  border-radius: 0 0 var(--shp-collapsed-decor-radius) var(--shp-collapsed-decor-radius) !important;

  background:
    radial-gradient(circle at 50% 86%, rgba(255, 255, 255, .72), transparent 48%),
    linear-gradient(180deg, #f5e3bd 0%, #fff7e8 100%) !important;

  box-shadow:
    0 3px 6px rgba(90, 70, 38, .12),
    inset 0 -1px 0 rgba(255, 255, 255, .78) !important;

  opacity: 1 !important;
  visibility: visible !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}

.sayuri-homepage-panel-v2[data-sayuri-panel-collapsed="1"] .shp-v2-collapsed-decor-handle::before {
  content: "" !important;
  position: absolute !important;
  left: .8px !important;
  right: .8px !important;
  top: .5px !important;
  bottom: .5px !important;

  border-left: 1px solid rgba(255, 255, 255, .76) !important;
  border-right: 1px solid rgba(255, 255, 255, .76) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .76) !important;
  border-top: 1px solid rgba(255, 255, 255, .76) !important;

  border-radius:
    0 0
    calc(var(--shp-collapsed-decor-radius) - 1px)
    calc(var(--shp-collapsed-decor-radius) - 1px) !important;

  pointer-events: none !important;
}

.sayuri-homepage-panel-v2[data-sayuri-panel-collapsed="1"] .shp-v2-collapsed-decor-handle-icon {
  width: var(--shp-collapsed-decor-icon) !important;
  height: var(--shp-collapsed-decor-icon) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  z-index: 2 !important;
  color: var(--shp-collapsed-decor-color) !important;
  transform: translateY(.3px) !important;
  pointer-events: none !important;
}

.sayuri-homepage-panel-v2[data-sayuri-panel-collapsed="1"] .shp-v2-collapsed-decor-chevron-svg {
  width: var(--shp-collapsed-decor-icon) !important;
  height: var(--shp-collapsed-decor-icon) !important;
  display: block !important;
  overflow: visible !important;
  transform: none !important;
  pointer-events: none !important;
}

.sayuri-homepage-panel-v2[data-sayuri-panel-collapsed="1"] .shp-v2-collapsed-decor-chevron-svg path {
  fill: none !important;
  stroke: var(--shp-collapsed-decor-color) !important;
  stroke-width: 1.9 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

/* Root scroll-hide already moves the whole canonical V2 root.
 * No independent second lifecycle/controller is created for the handle.
 */

/* SAYURI_HOMEPAGE_PANEL_V2_FINAL3_MEASURED_GEOMETRY_PARITY_LOCK */

/*
 * Proven live trial:
 * V1 Schedule visible time wrapper = 20.792px high.
 * Preserve its already-matched X/Y/width and only lock the wrapper height.
 */
[data-sayuri-homepage-panel-root="v2"][data-sayuri-panel-collapsed="0"]
[data-sayuri-schedule-display-time],
[data-sayuri-homepage-panel-root="v2"][data-sayuri-panel-collapsed="0"]
.shp-v2-schedule-time-chip {
  height: 20.792px !important;
  min-height: 20.792px !important;
  max-height: none !important;
}

/*
 * Proven live trial:
 * V1 collapsed Cart group = 22.198px.
 * V1 collapsed Cart text visible rect = 25.198px because the text box is
 * content-box with the existing 3px bottom padding.
 */
[data-sayuri-homepage-panel-root="v2"][data-sayuri-panel-collapsed="1"]
.shp-v2-collapsed-cart {
  height: 22.198px !important;
  grid-template-rows: 22.198px !important;
}

[data-sayuri-homepage-panel-root="v2"][data-sayuri-panel-collapsed="1"]
.shp-v2-collapsed-cart .shp-v2-collapsed-text {
  box-sizing: content-box !important;
  height: 22.198px !important;
}

/*
 * Proven live trial:
 * V1 collapsed Address group = 22.198px.
 * V1 collapsed Address text visible rect = 25.198px using the same existing
 * 3px bottom-padding/content-box relationship.
 */
[data-sayuri-homepage-panel-root="v2"][data-sayuri-panel-collapsed="1"]
.shp-v2-collapsed-address {
  height: 22.198px !important;
  grid-template-rows: 22.198px !important;
}

[data-sayuri-homepage-panel-root="v2"][data-sayuri-panel-collapsed="1"]
.shp-v2-collapsed-address .shp-v2-collapsed-text {
  box-sizing: content-box !important;
  height: 22.198px !important;
}


/* SAYURI_HOMEPAGE_MULTI_CART_FAVORIT_P8_EXPANDED_ONLY_BEGIN */
.shp-v2-p8-commerce-external {
  --shp-muted: #76827b;
  --shp-green: #255415;
  box-sizing: border-box !important;
  position: relative !important;
  left: 50% !important;
  width: min(776px, 100vw) !important;
  max-width: 776px !important;
  margin: 0 0 8px !important;
  padding: 8px 12px !important;
  transform: translateX(-50%) !important;
  display: grid !important;
  grid-template-rows: repeat(2, minmax(34px, auto)) !important;
  gap: 6px !important;
  isolation: isolate !important;
  border: 1px solid rgba(189, 167, 125, .44) !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 12% 16%, rgba(250, 241, 222, .50), transparent 34%),
    radial-gradient(circle at 88% 12%, rgba(247, 242, 230, .58), transparent 40%),
    linear-gradient(135deg, #f3ddb8 0%, #f6e6c7 34%, #f8ecd8 64%, #f7f3ea 100%) !important;
  box-shadow:
    0 4px 12px rgba(80, 61, 28, .08),
    inset 0 1px 0 rgba(255, 255, 255, .56) !important;
  color: #172027 !important;
  font-family: Inter, "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

.shp-v2-p8-commerce-external[hidden] {
  display: none !important;
}
.shp-v2-p8-row {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 5px !important;
}
.shp-v2-p8-row + .shp-v2-p8-row {
  border-top: 1px solid rgba(145, 128, 96, .24) !important;
  padding-top: 5px !important;
}
.shp-v2-p8-row-label {
  color: var(--shp-muted) !important;
  font-size: 9.4px !important;
  font-style: italic !important;
  font-weight: 650 !important;
  white-space: nowrap !important;
}
.shp-v2-p8-rail {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 3px !important;
}
.shp-v2-p8-scroll {
  min-width: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
}
.shp-v2-p8-scroll::-webkit-scrollbar { display: none !important; }
.shp-v2-p8-strip {
  width: max-content !important;
  min-width: 100% !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}
.shp-v2-p8-pill-wrap {
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  border-radius: 999px !important;
}
.shp-v2-p8-pill,
.shp-v2-p8-heart-save,
.shp-v2-p8-scroll-arrow,
.shp-v2-p8-docked-action {
  box-sizing: border-box !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  font-family: inherit !important;
  cursor: pointer !important;
}
.shp-v2-p8-pill {
  max-width: 122px !important;
  min-height: 25px !important;
  padding: 4px 9px !important;
  border: 1px solid rgba(72, 111, 62, .25) !important;
  border-radius: 999px !important;
  background: rgba(247, 250, 242, .88) !important;
  color: #355c2c !important;
  font-size: 9.8px !important;
  font-weight: 650 !important;
  line-height: 1.1 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.shp-v2-p8-pill-wrap.is-selected {
  padding: 2px !important;
  border: 2px solid rgba(42, 100, 48, .78) !important;
  background: rgba(238, 247, 230, .95) !important;
}
.shp-v2-p8-pill-wrap.is-selected .shp-v2-p8-active-pill {
  border: 0 !important;
  background: transparent !important;
  padding-right: 4px !important;
}
.shp-v2-p8-heart-save {
  width: 24px !important;
  min-width: 24px !important;
  height: 24px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #296133 !important;
  font-size: 17px !important;
  line-height: 1 !important;
}
.shp-v2-p8-favorit-pill {
  border-color: rgba(164, 119, 36, .34) !important;
  background: linear-gradient(135deg, rgba(255, 247, 222, .96), rgba(239, 217, 169, .92)) !important;
  color: #835f18 !important;
}
.shp-v2-p8-ghost-pill {
  border-style: dashed !important;
  border-color: rgba(81, 112, 72, .36) !important;
  background: rgba(255, 255, 255, .48) !important;
  color: rgba(62, 88, 55, .74) !important;
  font-weight: 520 !important;
}
.shp-v2-p8-favorit-empty {
  max-width: 190px !important;
  color: #8a744c !important;
  font-size: 9.2px !important;
  font-style: italic !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
}
.shp-v2-p8-scroll-arrow {
  width: 18px !important;
  height: 24px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #42623a !important;
  font-size: 17px !important;
  line-height: 1 !important;
}
.shp-v2-p8-scroll-arrow[hidden] { display: none !important; }
.shp-v2-p8-scroll-arrow:disabled { opacity: .28 !important; cursor: default !important; }
.shp-v2-p8-row-actions {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
}
.shp-v2-p8-docked-action {
  width: 27px !important;
  height: 27px !important;
  padding: 0 !important;
  border: 1px solid rgba(67, 102, 60, .26) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .75) !important;
  color: #315f34 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}
.shp-v2-p8-more { font-size: 17px !important; }
.shp-v2-p8-row-favorit .shp-v2-p8-more {
  border-color: rgba(164, 119, 36, .30) !important;
  color: #835f18 !important;
}
/* SAYURI_HOMEPAGE_MULTI_CART_FAVORIT_P8_EXPANDED_ONLY_END */