html, body { touch-action: manipulation; }
/* =========================================================
   SAYURI APP SHELL — FULL CSS (CLEANED + COMPLETE)
   Source: Your uploaded "Sayuri App Shell CSS Only.css"
   Goal: Deduped, ordered, readable, SAME behavior
   ========================================================= */

/* ---------------------------------------------------------
   0) Full-bleed shell reset (ONLY under body.sayuri-app-shell)
   --------------------------------------------------------- */
body.sayuri-app-shell,
body.sayuri-app-shell *{
  box-sizing: border-box;
}

body.sayuri-app-shell{
  margin: 0 !important;
  padding-bottom: 80px;
  overflow-x: hidden;
}

/* SAYURI_APP_SHELL_GLOBAL_BASE_BG_V1_BEGIN
 * Global App Shell base background.
 * Source of truth for the app/page cream base layer.
 * Do not move this to homepage panel CSS.
 */
body.sayuri-app-shell {
  --sayuri-app-global-base-bg: #FDF8F0;
  --sayuri-app-page-bg: var(--sayuri-app-global-base-bg);
  --sayuri-bg: var(--sayuri-app-global-base-bg);
  background: var(--sayuri-app-global-base-bg) !important;
  background-color: var(--sayuri-app-global-base-bg) !important;
}
/* SAYURI_APP_SHELL_GLOBAL_BASE_BG_V1_END */

html.sayuri-page-boot-lock,
html.sayuri-page-boot-lock body{
  overflow: hidden !important;
}

#sayuri_page_boot_overlay{
  --sayuri-page-boot-bg-scrim: none;
  --sayuri-page-boot-bg-desktop: none;
  --sayuri-page-boot-bg-mobile: var(--sayuri-page-boot-bg-desktop);
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
  overflow: hidden;
  background-color: #ffffff;
  color: #fff;
  pointer-events: all;
}

#sayuri_page_boot_overlay::before{
  content: "";
  position: absolute;
  inset: 0;
  background-color: #166534;
  background-image:
    var(--sayuri-page-boot-bg-scrim),
    var(--sayuri-page-boot-bg-desktop);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms ease;
}

@media (max-width: 767px){
  #sayuri_page_boot_overlay::before{
    background-image:
      var(--sayuri-page-boot-bg-scrim),
      var(--sayuri-page-boot-bg-mobile, var(--sayuri-page-boot-bg-desktop));
  }
}

#sayuri_page_boot_overlay[hidden]{
  display: none !important;
}

#sayuri_page_boot_overlay[data-sayuri-visual-ready="0"]{
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  background: #ffffff !important;
  background-image: none !important;
}

#sayuri_page_boot_overlay[data-sayuri-visual-ready="1"]{
  opacity: 1;
}

#sayuri_page_boot_overlay[data-sayuri-visual-ready="1"]::before{
  opacity: 1;
}

#sayuri_page_boot_overlay[data-sayuri-visual-ready="0"] .sayuri-page-boot-card{
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
}

#sayuri_page_boot_overlay[data-sayuri-visual-ready="1"] .sayuri-page-boot-card{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition:
    opacity 240ms ease 80ms,
    transform 240ms ease 80ms,
    visibility 0s linear 80ms;
}

@media (prefers-reduced-motion: reduce){
  #sayuri_page_boot_overlay::before,
  #sayuri_page_boot_overlay .sayuri-page-boot-card{
    transition: none !important;
  }
}

.sayuri-page-boot-card{
  width: min(320px, 88vw);
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  transition:
    opacity 240ms ease 80ms,
    transform 240ms ease 80ms,
    visibility 0s linear 80ms;
}

.sayuri-page-boot-product{
  display: flex;
  justify-content: center;
  width: 100%;
  margin-bottom: 18px;
}

.sayuri-page-boot-product-img{
  display: block;
  width: min(56vw, 220px);
  max-width: 220px;
  max-height: 220px;
  object-fit: contain;
}

.sayuri-page-boot-logo{
  display: flex;
  justify-content: center;
  width: 100%;
  margin-bottom: 8px;
}

.sayuri-page-boot-logo-img{
  display: block;
  max-width: min(70vw, 280px);
  max-height: 90px;
  object-fit: contain;
}

.sayuri-page-boot-brand{
  font-size: 28px;
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: 0;
}

.sayuri-page-boot-sub{
  min-height: 18px;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 700;
  color: rgba(255,255,255,0.86);
  transform: translateY(0);
  transition: opacity 200ms ease, transform 200ms ease;
}

.sayuri-page-boot-sub.is-exiting{
  opacity: 0;
  transform: translateY(4px);
}

.sayuri-page-boot-sub.is-entering{
  animation: sayuriPageBootSubEnter 200ms ease both;
}

@keyframes sayuriPageBootSubEnter{
  from{
    opacity: 0;
    transform: translateY(-4px);
  }
  to{
    opacity: 1;
    transform: translateY(0);
  }
}

.sayuri-page-boot-bar{
  width: 100%;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,0.24);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18);
}

.sayuri-page-boot-fill{
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: #bbf7d0;
  transition: width 220ms ease;
}

.sayuri-page-boot-status{
  max-width: 100%;
  min-height: 16px;
  display: none;
  color: rgba(255,255,255,0.82);
  font-size: 11px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.sayuri-page-boot-actions{
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.sayuri-page-boot-actions button{
  border: 0;
  border-radius: 999px;
  padding: 9px 13px;
  background: #fff;
  color: #14532d;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce){
  .sayuri-page-boot-sub{
    transition: opacity 120ms ease;
  }
  .sayuri-page-boot-sub.is-exiting,
  .sayuri-page-boot-sub.is-entering{
    animation: none;
    transform: none;
  }
}

body.sayuri-app-shell #page,
body.sayuri-app-shell #content,
body.sayuri-app-shell .site,
body.sayuri-app-shell .site-content,
body.sayuri-app-shell .content-area,
body.sayuri-app-shell .site-main,
body.sayuri-app-shell main,
body.sayuri-app-shell .entry-content,
body.sayuri-app-shell .col-full,
body.sayuri-app-shell .container,
body.sayuri-app-shell .container-fluid{
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Hide theme chrome on shell pages */
body.sayuri-app-shell .site-header,
body.sayuri-app-shell .site-footer,
body.sayuri-app-shell .entry-header,
body.sayuri-app-shell .page-title,
body.sayuri-app-shell .entry-title{
  display: none !important;
}

/* ---------------------------------------------------------
   1) Bottom nav
   --------------------------------------------------------- */
.sayuri-app-bottom-nav{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 56px;
  background: #fff;
  border-top: 1px solid #e5e7eb;
  display: flex;
  z-index: 99998;
}

.sayuri-app-bottom-nav-item{
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 11px;
  color: #6b7280;
  text-decoration: none;
}

.sayuri-app-bottom-nav-item-icon{
  width: 22px;
  height: 22px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f3f4f6;
  color: #4b5563;
}

/* ---------------------------------------------------------
   2) White hero container
   --------------------------------------------------------- */
.sayuri-home-hero{
  background: #fff;
  min-height: 100dvh;
  min-height: 100vh;

  display: flex;
  flex-direction: column;
  align-items: center;

  padding: 0 14px 0;
  overflow: visible;

  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------------------------------------------------------
   3) HERO (ChatGPT-like final layout — source of truth)
   --------------------------------------------------------- */
.sayuri-hero-top{
  width: calc(100% + 28px) !important;
  max-width: none !important;
  display: block;
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  min-height: 0;
  margin: 0 -14px !important;
  padding: 8px 14px;
  box-sizing: border-box;
  z-index: auto;
  background: transparent;
  border-bottom: none;
  overflow: visible;
  transform: none !important;
}

/* Canonical Search Toolbar first-paint fallback.
 * Geometry mirrors sayuri-homepage-search-toolbar.css so load order never
 * changes docking or sizing. */
.sayuri-hero-nav-row2{
  position: relative;
  left: auto;
  right: auto;
  top: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 0;
  margin: 0;
}
.sayuri-hero-inputwrap{
  flex: 1 1 auto;
  min-width: 0;
  border-radius: 999px;
  position: relative;
}
.sayuri-hero-inputwrap.search-active{
  z-index: 9999991;
}
.sayuri-hero-nav-row2 #sayuri_hero_search{
  width: 100%;
  height: 46px;
  min-height: 46px;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 999px;
  background: rgba(255,255,255,.98);
  color: #1e293b;
  caret-color: #1e293b;
  padding: 0 14px 0 42px;
  font-size: 12px;
  font-weight: 500;
  opacity: 1;
  background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='6' cy='6' r='4' stroke='%23166534' stroke-width='1.4'/%3E%3Cline x1='9.2' y1='9.2' x2='12' y2='12' stroke='%23166534' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 12px center;
  box-shadow: 0 8px 22px rgba(15,23,42,.10);
}
.sayuri-hero-nav-row2 #sayuri_hero_search::placeholder{ color:#94a3b8; }
.sayuri-hero-nav-row2 #sayuri_hero_search:focus{
  outline:none;
  border-color:rgba(22,101,52,.18);
  background-color:rgba(255,255,255,.98);
}
.sayuri-hero-nav-row2 .sayuri-hero-plusfab{
  width:46px;
  height:46px;
  min-width:46px;
  max-width:46px;
  flex:0 0 46px;
  align-self:center;
  border:1px solid rgba(22,101,52,.18);
  border-radius:50%;
  background:#fff;
  color:#166534;
  font-size:22px;
  font-weight:300;
  box-shadow:0 8px 22px rgba(15,23,42,.10);
  padding:0;
  line-height:1;
}
.sayuri-hero-nav-row2 .sayuri-hero-plusfab:active{ opacity:.85; }
.sayuri-hero-nav-row2 .sayuri-hero-suggest{
  top:calc(100% + 6px);
  border-radius:14px;
  box-shadow:0 8px 24px rgba(0,0,0,.15);
}

.sayuri-hero-logo{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 8px rgba(0,0,0,.08);
  color: #111827;
  flex: 0 0 auto;
}

/* Header center — slot pill (design-reference §5.1, §5.2) */
.sayuri-hero-top-center{
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.sayuri-hero-slot-pill{
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  background: var(--sayuri-green-light);
  padding: 5px 14px;
  border-radius: 20px;
  border: 1px solid rgba(22,101,52,0.15);
  line-height: 1.35;
  cursor: pointer;
  transition: background 0.15s, transform 0.12s;
  user-select: none;
  -webkit-user-select: none;
}
.sayuri-hero-slot-pill:hover  { background: #bbf7d0; }
.sayuri-hero-slot-pill:active { transform: scale(0.97); }
.sayuri-slot-date{ font-size: 9px;  font-weight: 700; color: var(--sayuri-green); opacity: 0.7; }
.sayuri-slot-time{ font-size: 12px; font-weight: 800; color: var(--sayuri-green); }

/* Drawer */
.sayuri-hero-drawer-overlay{
  position: fixed;
  left: 0; top: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,.35);
  z-index: var(--sayuri-z-sheet-backdrop, 10000000);
}

.sayuri-hero-drawer{
  position: fixed;
  left: 0; top: 0; bottom: 0;
  width: 80vw;
  max-width: 360px;

  background: #fff;
  border-right: 1px solid #e5e7eb;
  box-shadow: 16px 0 32px rgba(0,0,0,.18);

  transform: translateX(-102%);
  transition: transform .18s ease;
  z-index: var(--sayuri-z-sheet-surface, 10000001);

  display: flex;
  flex-direction: column;
}

.sayuri-hero-drawer.is-open{
  transform: translateX(0);
}

.sayuri-hero-drawer-head{
  padding: 14px 14px 10px;
  border-bottom: 1px solid #e5e7eb;
}

.sayuri-hero-drawer-title{
  font-size: 14px;
  font-weight: 800;
  color: #111827;
  letter-spacing: -0.01em;
}

.sayuri-hero-drawer-body{
  padding: 12px 14px;
  flex: 1;
  overflow: auto;
}

/* Phase 3 — Drawer nav items */
.sayuri-hero-drawer-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 16px 14px;
  border-bottom: 0.5px solid #e2e8f0;
}
.sayuri-hero-drawer-title{
  font-size: 17px;
  font-weight: 800;
  color: #1e293b;
}
.shd-close-btn{
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #f1f5f9;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
}
.shd-close-btn:hover{ background: #e2e8f0; }
.shd-close-btn svg{ pointer-events: none; }

.shd-nav{
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 6px 0;
}
.shd-nav-item{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  border: none;
  border-bottom: 0.5px solid #f1f5f9;
  background: #fff;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background 0.1s;
}
.shd-nav-item:last-child{ border-bottom: none; }
.shd-nav-item:hover{ background: #f8fafc; }
.shd-nav-item:active{ background: #f1f5f9; }
#sayuri_hero_drawer .shd-main-view .shd-main-footer{
  display: flex !important;
  justify-content: flex-end;
  padding: 0 16px 12px;
}
#sayuri_hero_drawer .shd-main-view .shd-logout-link{
  color: #64748b;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}
#sayuri_hero_drawer .shd-main-view .shd-logout-link:hover{ color: #166534; text-decoration: underline; }
.shd-nav-icon-box{
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 18px;
}
.shd-nav-icon{
  font-size: 18px;
  flex-shrink: 0;
}
.shd-nav-label-wrap{
  flex: 1;
  min-width: 0;
}
.shd-nav-label{
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
  display: block;
}
.shd-nav-sublabel{
  font-size: 10px;
  color: #94a3b8;
  display: block;
  margin-top: 1px;
}
.shd-nav-chevron{
  color: #94a3b8;
  flex-shrink: 0;
}

.shd-main-view{
  display: flex;
  flex-direction: column;
  height: 100%;
}

.sayuri-hero-drawer-empty{
  font-size: 13px;
  color: #6b7280;
}

.sayuri-hero-title{
  width: 100%;
  max-width: 720px;
  text-align: center;

  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;

  margin: 0 0 12px;
  padding: 0 0 12px;
  color: #111827;
}

.sayuri-hero-deliverywrap{
  width: 100%;
  max-width: 720px;
  margin: 2px auto 4px; /* 🔧 tighten gap below fixed header */
  padding: 0 14px;
  display: flex;
  justify-content: flex-start;
  position: relative;
  z-index: 2; /* ensure it's above background layers (header still stays on top) */
}

.sayuri-hero-deliverywrap .sdsw-delivery-root{
  margin: 0 !important; /* SDSW default margin was creating extra top gap */
}

/* Show ONLY the summary CTA (hide date/time controls etc) */
.sayuri-hero-deliverywrap .sdsw-delivery-root > :not(.sdsw-main-summary){
  display: none !important;
}

/* Make CTA look like plain text (no background fill) */
.sayuri-hero-deliverywrap .sdsw-main-summary{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;

  padding: 2px 0 !important;     /* ✅ keep it “text-only” but visible */
  min-height: 22px !important;   /* ✅ prevents the bubble collapsing */

  text-align: left !important;
}

.sayuri-hero-deliverywrap .sdsw-main-summary-line1{
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #111827 !important;
}

/* App Shell: delivery summary icons (always present, including placeholder) */
.sayuri-hero-deliverywrap #sdsw_main_summary_line1{
  display: flex;
  align-items: center;
  gap: 8px;
}
.sayuri-hero-deliverywrap #sdsw_main_summary_line1::before{
  content: "🕒";
  font-size: 14px;
  line-height: 1;
  display: inline-block;
  opacity: .9;
}

/* ✅ Unselected-state safety: if JS clears the line, still show placeholder */
.sayuri-hero-deliverywrap #sdsw_main_summary_line1:empty::after{
  content: "Pilih waktu pengiriman";
  color: #111827 !important;   /* black */
  font-weight: 700;            /* slightly light */
  display: inline-block;
}

.sayuri-hero-deliverywrap .sdsw-main-summary-place{
  margin-top: 2px;
  font-size: 12px !important;
  color: #6b7280 !important;
}

.sayuri-hero-deliverywrap #sdsw_main_summary_place{
  display: flex;
  align-items: center;
  gap: 4px;
  column-gap: 2px;

  color: #111827;   /* black */
  font-weight: 700; /* slightly light */
}

.sayuri-hero-deliverywrap #sdsw_main_summary_place::before{
  content: "📍";
  font-size: 14px;
  line-height: 1;
  display: inline-block;
  opacity: .9;
}

.sayuri-hero-deliverywrap #sdsw_main_summary_place:empty::after{
  content: "Pilih alamat pengiriman";
  color: #111827 !important;   /* black */
  font-weight: 700;            /* slightly light */
  display: inline-block;
}

.sayuri-hero-deliverywrap .sdsw-main-summary-tag-inline{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin-left: 8px;
  height: 20px;
  padding: 0 10px;
  border-radius: 999px;

  font-size: 12px;
  font-weight: 800;

  background: #dcfce7;
  color: #166534;
  vertical-align: middle;
}

/* Tabs bar (hero style) */
.sayuri-hero-tabs{
  /* Tabs V1: strip background must be a SOLID color for round-out masking */
  --sayuri-tabstrip-bg: #d1fae5;
  --sayuri-tab-stroke-w: 1px; /* 50% thinner */
  --sayuri-tab-stroke: rgba(17,24,39,0.70); /* softer stroke (applies to all outlines) */
  --sayuri-tab-divider: rgba(17,24,39,0.18); /* light gray divider (Edge-like) */

  /* Round-out geometry (single source of truth) */
  --sayuri-tab-ear: 7px; /* reduced by 50% for correct visual proportion */

  /* Tabs bar layout (avoid mini-pill tabs) */
  width: 100%;
  max-width: 980px;
  margin: 0 auto 0;
  display: flex;
  align-items: flex-end;
  gap: 4px;

  /* Light mint strip (Edge-like light header) */
  background: var(--sayuri-tabstrip-bg);
  border: 1px solid rgba(0,0,0,0.10);
  border-bottom: none; /* critical: remove seam under tabs */
  border-radius: 18px 18px 0 0;

  padding: 4px 8px 0;

  /* Make the whole strip scroll so + follows tabs */
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */

  position: relative;
  z-index: 5; /* ensure tabs sit above panel edge */

  /* Strip must not contribute to the black outline (panel owns the continuous stroke) */
  border: none !important;
}

/* Edge-like partial dividers ONLY between two INACTIVE neighbor tabs */
.sayuri-hero-tab:not(.is-active):not(:last-child){
  /* default: no divider */
  background-image: none;
}

/* Show divider when THIS tab is inactive AND NEXT tab is also inactive */
.sayuri-hero-tab:not(.is-active):not(:last-child):has(+ .sayuri-hero-tab:not(.is-active)){
  background-image: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 22%,
    var(--sayuri-tab-divider) 22%,
    var(--sayuri-tab-divider) 78%,
    rgba(0,0,0,0) 78%
  );
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 1px 100%;
}

/* Divider before the "+" button (inactive tab -> .sayuri-hero-tabs-plus) */
.sayuri-hero-tab:not(.is-active):has(+ button.sayuri-hero-tabs-plus){
  background-image: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 22%,
    var(--sayuri-tab-divider) 22%,
    var(--sayuri-tab-divider) 78%,
    rgba(0,0,0,0) 78%
  );
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 1px 100%;
}

/* Continuous top stroke across ALL tabs (drawn on strip bottom edge) */
.sayuri-hero-tabs:after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  height: var(--sayuri-tab-stroke-w);
  background: var(--sayuri-tab-stroke);

  /* Sit BELOW active tab outline, ABOVE panel */
  z-index: 1;
  pointer-events: none;
}

/* Cut the strip line under the ACTIVE tab only (pixel-perfect: stop at curve ends) */
.sayuri-hero-tab.is-active > span:after{
  content:"";
  position:absolute;

  /* Extend cutout to exactly cover both ear overhangs */
  left: calc(-1 * (var(--sayuri-tab-ear) + var(--sayuri-tab-stroke-w)));
  right: calc(-1 * (var(--sayuri-tab-ear) + var(--sayuri-tab-stroke-w)));

  bottom: 0; /* align EXACTLY to .sayuri-hero-tabs:after */
  height: calc(var(--sayuri-tab-stroke-w) + 1px); /* cover fractional stroke/AA */

  /* Paint over the strip line so it stops at curve end */
  background: transparent;

  /* Above strip line (:after z=1), below tab outline */
  z-index: 2;
  pointer-events: none;
}

.sayuri-hero-tabs::-webkit-scrollbar{ height: 0; } /* WebKit */

/* Tabs V1: wrap tabs + panel like a browser */
.sayuri-hero-tabwrap{
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 18px;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Tab panel visually “belongs” to the active tab */
.sayuri-hero-tabpanel{
  width: 100%;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0 0 3px;
  position: relative;
  top: 0;
  z-index: 1;
}

/* When delivery/list live inside tab panel, remove “global max-width/padding” */
.sayuri-hero-tabpanel .sayuri-hero-deliverywrap{
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 10px;
  padding: 0;
}

.sayuri-hero-tabpanel .sayuri-hero-list{
  margin-top: 10px;
}

/* Preferred timeslot (per tab) */
#sayuri_hero_prefwrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 6px 2px 10px;
}

.sayuri-pref-left{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}

.sayuri-pref-check{
  width:18px;
  height:18px;
  accent-color:#10b981;
  cursor:pointer;
}

.sayuri-pref-label{
  font-weight:900;
  font-size:12px;
  color:#111827;
  white-space:nowrap;
}

.sayuri-pref-sub{
  font-size:11px;
  color:#6b7280;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.sayuri-pref-hint{
  font-size:11px;
  color:#6b7280;
  white-space:nowrap;
}

/* Scrollable tab strip (mobile OK) */
.sayuri-hero-tabs-scroll{
  flex: 0 0 auto;
  min-width: 0;

  display: flex;
  align-items: flex-end;
  gap: 6px;

  /* parent (.sayuri-hero-tabs) is the scroller now */
  overflow: visible;
  padding: 0 2px;
  position: relative; /* anchor divider */

}

/* Edge-like partial divider at the right edge of scroll container
   Show ONLY when the LAST tab inside scroll is NOT active. */
.sayuri-hero-tabs-scroll:after{
  content:"";
  position:absolute;
  right: 0;
  top: 22%;
  height: 56%;
  width: 1px;
  background: var(--sayuri-tab-divider);
  pointer-events: none;
  z-index: 2;
}

/* Hide the divider when the last tab is active (no divider between active tab and "+ Tambah") */
.sayuri-hero-tabs-scroll:has(> .sayuri-hero-tab.is-active:last-child):after{
  display: none !important;
}

/* Edge-like tabs (not pills) */
.sayuri-hero-tab{
  display: inline-flex;
  align-items: center;
  gap: 8px;

  height: 36px;
  padding: 0 14px; /* inactive: maximize label width */

  /* Fixed tab width (match Tab0 measured width) */
  flex: 0 0 93px;
  width: 93px;
  justify-content: center;

  /* Force rectangle shape: top rounded only */
  border-radius: 8px 8px 0 0 !important;

  /* Inactive tabs: NO outline (only active tab shows outline) */
  border: none !important;
  border-bottom: none !important;

  /* Inactive tab background fully transparent */
  background-color: transparent !important;

  box-shadow: none;
  font-size: 10px; /* -25% from 13px */

  /* Make inactive lighter */
  font-weight: 500 !important;

  color: #111827 !important;
  cursor: pointer;
  white-space: nowrap;

  /* CRITICAL: ears extend outside the button; never clip */
  overflow: visible !important;

  position: relative;
  top: 1px;
  z-index: 1; /* baseline for siblings */
}

/* Active tab shows controls, so reserve extra space for ✎ and × */
.sayuri-hero-tab.is-active{
  padding: 0 28px;
}

/* Mobile seam polish: active tab needs a -1px lift so the curve isn't clipped at the bottom */
@media (hover: none) and (pointer: coarse){
  .sayuri-hero-tab.is-active{
    transform: translateY(-1px);
  }
}

/* Seam fix (root cause): active tab mask stroke sits ~0.33px too low; nudge it up slightly */
.sayuri-hero-tab.is-active .sayuri-tab-mask-stroke{
  bottom: 0.5px !important; /* was 1px; +0.5px moves stroke up to align with curve */
}

/* Mobile seam fix (definitive):
   span is still painting a white border-bottom (confirmed by elementFromPoint).
   Kill the border entirely (color-only override was losing to a later rule).
*/
.sayuri-hero-tab.is-active > span{
  border-bottom: 1px !important;
}

/* Tabs V1: remove ugly focus ring on "+ Tambah" (browser :focus-visible outline) */
.sayuri-hero-tabs-plus:focus,
.sayuri-hero-tabs-plus:focus-visible{
  outline: none !important;
  box-shadow: none !important;
}

/* Tabs V1: max tabs notice (red nudge above tabs) */
@keyframes sayuriTabsNudgeX{
  0%{ transform: translateX(0); }
  20%{ transform: translateX(-4px); }
  40%{ transform: translateX(4px); }
  60%{ transform: translateX(-3px); }
  80%{ transform: translateX(3px); }
  100%{ transform: translateX(0); }
}

#sayuri_hero_tabs{ position: relative; }

/* Tabs V1: bottom rail that spans the full scrollWidth (match tab stroke) */
#sayuri_hero_tabs .sayuri-hero-tabs-rail{
  position: absolute;
  left: 0;
  bottom: 0;

  height: 0; /* draw via border for fractional hairline */
  background: transparent;
  border-bottom: var(--sayuri-rail-w, 0.666667px) solid var(--sayuri-rail-color, rgba(17, 24, 39, 0.7));

  pointer-events: none;
  z-index: 1;
}

/* Tabs V1: active tab label vertical centering + prevent descender clipping (g/j) */
body.sayuri-app-shell .sayuri-hero-tab.is-active > span{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  /* More vertical breathing room so descenders never clip */
  padding-top: 10px !important;
  padding-bottom: 15px !important;

  line-height: 1.15 !important;
  overflow: visible !important;
}

body.sayuri-app-shell .sayuri-hero-tab.is-active > span .sayuri-hero-tab-label{
  line-height: 1.15 !important;
  transform: translateY(-1px); /* visually center + counteract extra bottom padding */

  /* Prevent descender clipping inside the line-clamp box */
  padding-bottom: 2px;
  margin-bottom: -2px;
}

.sayuri-tabs-maxnotice{
  position: fixed; /* pure overlay; MUST NOT affect layout */
  left: 0;
  top: 0;

  transform: none; /* JS will position it */
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  border-radius: 0;

  color: #b42318;
  font-weight: 900;

  /* ~70% smaller than before (12px -> ~8px) */
  font-size: 8px;
  line-height: 1.1;

  display: none;
  z-index: 1000007;
  pointer-events: none;

  white-space: nowrap; /* text only */
}

.sayuri-tabs-maxnotice.is-show{
  display: block;
  animation: sayuriTabsNudgeX 220ms ease-in-out 0s 2;
}

/* Tabs V1: inline controls (Rename pencil + Delete X) */
.sayuri-hero-tab .sayuri-hero-tab-pen,
.sayuri-hero-tab .sayuri-hero-tab-x{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 999px;
  font-style: normal;
  line-height: 1;
  cursor: pointer;

  opacity: 0.72;
  user-select: none;
  -webkit-user-select: none;
}

.sayuri-hero-tab .sayuri-hero-tab-pen{
  left: 2px; /* more air gap near label */
  font-weight: 900;
  font-size: 12px;
}

.sayuri-hero-tab .sayuri-hero-tab-x{
  right: 2px; /* more air gap near label */
  font-weight: 900;
  font-size: 14px;
}

.sayuri-hero-tab:hover .sayuri-hero-tab-pen,
.sayuri-hero-tab:hover .sayuri-hero-tab-x{
  opacity: 1;
}

/* Tabs V1: keep controls above active tab mask layers */
.sayuri-hero-tab .sayuri-hero-tab-pen,
.sayuri-hero-tab .sayuri-hero-tab-x{
  z-index: 9999 !important;
  pointer-events: auto !important;
}

/* Tabs V1: 2-line centered wrap for long names (max 2 lines visually)
   IMPORTANT: do NOT make the parent <span> flex; it contains masking <i> nodes that must not become extra rows.
*/
.sayuri-hero-tab > span{
  position: relative;
  display: inline-block;
  width: 100%;
  text-align: center;
  white-space: normal;
  line-height: 1.05;
}

/* Only the label wraps/clamps */
.sayuri-hero-tab > span > .sayuri-hero-tab-label{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  margin: 0 auto;

  white-space: normal;
  word-break: normal;
  overflow-wrap: normal; /* prefer breaking at spaces */
  hyphens: none;
}

/* Remove native button look (Edge tabs should feel like surfaces, not buttons) */
.sayuri-hero-tab,
.sayuri-hero-tabs-plus{
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  box-shadow: none;
  background-clip: padding-box;
}

/* "+" add tab button: align and center like normal tabs */
button.sayuri-hero-tabs-plus{
  height: 36px;                 /* match tab height */
  display: inline-flex;
  align-items: center;          /* vertical centering */
  justify-content: center;
  gap: 6px;

  padding: 0 14px;
  flex: 0 0 auto;

  background: transparent;
  border: none;
  box-shadow: none;

  position: relative;
  top: 1px;                     /* same baseline nudge as tabs */
  cursor: pointer;

  font-size: 13px;              /* same as tabs */
  font-weight: 600;
  color: #111827;
  white-space: nowrap;

  text-indent: 0 !important;
  margin-left: 10px;   /* air gap from last tab / divider */
}

/* Storefront theme disables button::after globally; re-enable for Sayuri tab ears */
.sayuri-hero-tab.is-active::after{
  display: block !important;
}

/* Safety: ensure our left ear can render if any theme also touches ::before */
.sayuri-hero-tab.is-active::before{
  display: block;
}

/* Active tab fuses into the white panel */
.sayuri-hero-tab.is-active{
  background: #ffffff !important;
  color: #111827 !important;
  font-weight: 850 !important;

  /* Keep ears visible */
  overflow: visible !important;

  /* ONE outline owner (real stroke), no shadows, no clip-path */
  border: var(--sayuri-tab-stroke-w) solid var(--sayuri-tab-stroke) !important;
  border-bottom: none !important;

  /* Force rectangle top only */
  border-radius: 14px 14px 0 0 !important;

  /* spacing / size handled by inner <span> canvas (required for masking) */
  padding: 0 !important;
  min-width: 120px;

  /* Must sit above strip */
  position: relative;
  z-index: 20;
  top: 0;

  /* Fuse into panel without negative hacks */
  margin-bottom: 0 !important;

  /* ensure label spans full area for inner pseudos */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Ensure stroke owner inherits the same rounding as the tab element */
.sayuri-hero-tab.is-active > span{
  border-radius: inherit;
}

/* Tab0 (first tab) should only have RIGHT ear */
.sayuri-hero-tab.is-active:first-child:before{ display:none !important; }

/* Tabs V1 mask viewport: MUST clip circle into a quadrant (no full donut) */
.sayuri-hero-tab.is-active .sayuri-tab-mask{
  position: absolute;
  bottom: 0;

  /* Strict viewport: ear × ear */
  width: var(--sayuri-tab-ear);
  height: var(--sayuri-tab-ear);

  /* The entire point: clip the circle + stroke into a quarter */
  overflow: hidden;

  /* Keep it above tab fill, below any future debug overlays */
  z-index: 2;

  pointer-events: none;
}

/* Round-out masking layer (uses existing <span> inside the tab) */
.sayuri-hero-tab.is-active > span{
  position: absolute;
  z-index: 2;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  /* real tab padding lives here so masks align to the true tab box */
  padding: 10px 22px 12px;
  box-sizing: border-box;
}

/* Unify active tab outline to the same stroke (single source of truth) */
.sayuri-hero-tab.is-active{
  box-shadow: none !important;
  outline: none !important;
  border: none !important; /* kill any legacy border on the container */
}

/* Only ONE stroke is allowed: draw it here */
.sayuri-hero-tab.is-active > span{
  outline: none !important;      /* some themes add focus outline here */
  box-shadow: none !important;   /* kill any inset/outer stroke shadow */

  /* Stroke must match the REAL tab rounding (no guessed radius) */
  border-top-left-radius: inherit !important;
  border-top-right-radius: inherit !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;

  border: var(--sayuri-tab-stroke-w) solid var(--sayuri-tab-stroke) !important;

  /* Fuse into panel WITHOUT mint bleed:
     draw a bottom border in panel color, then pull it back up (no height change). */
  border-bottom: var(--sayuri-tab-stroke-w) solid transparent !important;
  margin-bottom: calc(-1 * var(--sayuri-tab-stroke-w));

  background: transparent;
}

/* (disabled) legacy rectangle mask (replaced by circle+square CSS-tricks masks) */
.sayuri-hero-tab.is-active > span:before,
.sayuri-hero-tab.is-active > span:after{ content:none !important; }

/* ================================
   Round-out masking (CSS-Tricks):
   square (panel) + circle (strip)
   ================================ */

.sayuri-hero-tab.is-active .sayuri-tab-mask{
  position: absolute;
  pointer-events: none;
  width: var(--sayuri-tab-ear);
  height: calc(var(--sayuri-tab-ear) + var(--sayuri-tab-stroke-w));
  bottom: calc(-1 * var(--sayuri-tab-stroke-w));
  z-index: 2; /* same layer as label canvas */
}

/* Left mask anchor */
.sayuri-hero-tab.is-active .sayuri-tab-mask--l{
  left: calc(-1 * var(--sayuri-tab-ear) + var(--sayuri-tab-stroke-w));
}

/* Right mask anchor */
.sayuri-hero-tab.is-active .sayuri-tab-mask--r{
  right: calc(-1 * var(--sayuri-tab-ear));
}

/* Square: panel fill under the ear */
.sayuri-hero-tab.is-active .sayuri-tab-mask::after{
  content:"";
  position:absolute;
  top: -1px;  /* overpaint to remove seam */
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  z-index: 1; /* IMPORTANT: keep white BELOW the mint circle */
}

/* Circle: strip cutout above the ear (removes white above curve) */
.sayuri-hero-tab.is-active .sayuri-tab-mask::before{
  content:"";
  position:absolute;
  width: calc(var(--sayuri-tab-ear) * 2);
  height: calc(var(--sayuri-tab-ear) * 2);
  background: var(--sayuri-tabstrip-bg);
  border-radius: 999px;
  top: calc(-1 * var(--sayuri-tab-ear));
  z-index: 2; /* IMPORTANT: mint circle ABOVE white square */
}

/* Position circle for left side */
.sayuri-hero-tab.is-active .sayuri-tab-mask--l::before{
  /* push circle center outward so vertical stroke merges into outer radius */
  left: calc(-1 * var(--sayuri-tab-ear) - var(--sayuri-tab-stroke-w));
}

/* Position circle for right side */
.sayuri-hero-tab.is-active .sayuri-tab-mask--r::before{
  /* right viewport is anchored at -ear; keep circle center consistent (avoid 2px drift) */
  right: calc(-1 * var(--sayuri-tab-ear));
}

/* Stroke derived from the SAME circle geometry (single source of truth) */
.sayuri-hero-tab.is-active .sayuri-tab-mask .sayuri-tab-mask-stroke{
  position: absolute;
  pointer-events: none;
  box-sizing: border-box;

  width: calc(var(--sayuri-tab-ear) * 2);
  height: calc(var(--sayuri-tab-ear) * 2);
  top: calc(-1 * var(--sayuri-tab-ear));

  border-radius: 999px;
  border: var(--sayuri-tab-stroke-w) solid var(--sayuri-tab-stroke);
  background: transparent;

  /* Above mint circle + white square so it stays crisp */
  z-index: 3;
}

/* Match circle horizontal position exactly (so it can never drift) */
.sayuri-hero-tab.is-active .sayuri-tab-mask--l .sayuri-tab-mask-stroke{
  left: calc(-1 * var(--sayuri-tab-ear) - var(--sayuri-tab-stroke-w));
}
.sayuri-hero-tab.is-active .sayuri-tab-mask--r .sayuri-tab-mask-stroke{
  right: calc(-1 * var(--sayuri-tab-ear));
}

.sayuri-hero-tab .sayuri-hero-tab-pin{
  font-size: 12px;
  opacity: .75;
}

.sayuri-hero-tab .sayuri-hero-tab-sub{
  font-size: 11px;
  font-weight: 800;
  color: rgba(0,0,0,.55);
}

/* Plus button matches strip language (not a floating pill) */
.sayuri-hero-tabs-plus{
  flex: 0 0 auto;
  height: 30px;
  width: 40px;

  border-radius: 8px 8px 0 0;

  border: none !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;

  box-shadow: none;

  font-weight: 900;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  color: #111827;

  outline: none;
  -webkit-tap-highlight-color: transparent;
}

/* Tabs apply lock + overlay spinner (block user actions during tab apply) */
body.sayuri-tabs-applying #sayuri_hero_tabs,
body.sayuri-tabs-applying #sayuri_hero_tabs_plus,
body.sayuri-tabs-applying .sayuri-hero-deliverywrap,
body.sayuri-tabs-applying #sayuri_hero_prefwrap{
  pointer-events: none !important;
  opacity: 0.88;
}

/* Fullscreen overlay */
#sayuri_tabs_apply_spinner{
  display:none;
  position: fixed;
  inset: 0;
  z-index: 999999; /* above hero UI */
  background: rgba(17, 24, 39, 0.28); /* greyed */
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  pointer-events: auto; /* capture clicks */
}

body.sayuri-tabs-applying #sayuri_tabs_apply_spinner{
  display:none !important;
}

#sayuri_tabs_apply_spinner .sayuri-tabs-apply-center{
  position:absolute;
  left:50%;
  top:38%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: rgba(255,255,255,0.92);
  box-shadow: 0 10px 28px rgba(0,0,0,0.14);
  display:flex;
  align-items:center;
  justify-content:center;
}

#sayuri_tabs_apply_spinner .sayuri-tabs-apply-ring{
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 3px solid rgba(17,24,39,0.18);
  border-top-color: rgba(16,185,129,0.95);
  animation: none !important;
}

@keyframes sayuriSpin{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}

/* Actions (two buttons same size) */
.sayuri-hero-actions{
  width: 100%;
  max-width: 720px;
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 0 0 18px;
  flex-wrap: nowrap;
}

/* Debug cart total under Favorite buttons */
.sayuri-hero-carttotal{
  width: 100%;
  max-width: 720px;
  margin: -10px auto 16px;
  text-align: center;
  font-size: 12px;
  font-weight: 800;
  color: #111827;
}

.sayuri-hero-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  white-space: nowrap;

  height: 36px;
  min-width: 168px;
  padding: 0 14px;

  font-size: 13px;
  font-weight: 600;

  border: 1px solid #e5e7eb;
  background: #fff;
  border-radius: 999px;

  cursor: pointer;
  box-shadow: 0 3px 8px rgba(0,0,0,.08);
}

.sayuri-hero-resetwrap{
  width: 100%;
  max-width: 720px;
  display: flex;
  justify-content: center;
  margin: 0 0 10px;
}

.sayuri-hero-btn-reset{
  min-width: 180px;
  border-color: rgba(220,38,38,.35);
  color: #b91c1c;
  background: #fff;
}
.sayuri-hero-btn-reset:hover{
  background: rgba(220,38,38,.06);
}

/* Canvas cleanup (HOTFIX-20260401-CANVAS-CLEANUP) */
.sayuri-hero-resetwrap { display:none !important; }
.sayuri-hero-actions { display:none !important; }
.sayuri-hero-carttotal { display:none !important; }

/* Phase 4 — Empty state visibility (JS-driven via updateEmptyState()) */
.sayuri-hero-title{
  display: none; /* hidden by default — JS shows when cart is empty */
}

/* ── Phase 5 — Keranjangmu Block ── */
.sayuri-km-block{
  background: #ffffff;
  border-bottom: 0.5px solid #e2e8f0;
  padding: 0;
  margin-top: -10px;
  margin-left: -14px;
  margin-right: -14px;
  width: calc(100% + 28px);
}
#sayuri_addr_canvas_wrap{
  margin-left: -14px;
  margin-right: -14px;
  width: calc(100% + 28px);
  box-sizing: border-box;
  border-bottom: 0.5px solid #e2e8f0;
}

/* Identity row */
.sayuri-km-identity{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  cursor: pointer;
}
.sayuri-km-icon-box{
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: var(--accent-bg, #fef3c7);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sayuri-km-name{
  flex: 1;
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
}
.sayuri-km-dots{
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 6px;
}
.sayuri-km-dots:hover{ background: #f1f5f9; }

/* Notes section */
.sayuri-km-notes{
  padding: 0 14px 10px;
}
.sayuri-km-notes-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.sayuri-km-notes-label{
  font-size: 8px;
  font-weight: 600;
  color: #94a3b8;
}
.sayuri-km-notes-counter{
  font-size: 9px;
  color: #94a3b8;
}
.sayuri-km-notes-counter.is-warning{
  color: #dc2626;
}
@keyframes sayuri-km-nudge {
  0%   { transform: translateX(0); }
  25%  { transform: translateX(-4px); }
  75%  { transform: translateX(4px); }
  100% { transform: translateX(0); }
}
.sayuri-km-notes-counter.is-nudge {
  animation: sayuri-km-nudge 0.25s ease;
}

/* Bullet rows */
.sayuri-km-bullet-row{
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 3px;
}
.sayuri-km-bullet-dot{
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #e2e8f0;
}
.sayuri-km-bullet-dot.is-filled{
  background: #166534;
}
.sayuri-km-bullet-input{
  flex: 1;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  font-size: 10px;
  font-family: inherit;
  font-style: italic;
  color: #334155;
  background: transparent !important;
  line-height: 1.5;
  padding: 0 !important;
  resize: none;
}

.sayuri-hero-prefwrap { display:none !important; }
#sayuri_cart_fab { display:none !important; }
.sayuri-kp-wa-btn{
  flex-shrink: 0;
  width: 32px !important; height: 32px !important;
  min-width: 32px;
  border-radius: 50% !important;
  padding: 0;
  background: var(--sayuri-pill-bg,#1c3d24);
  border: none;
  color: #86efac;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-left: 8px;
}
.sayuri-kp-wa-btn:active { transform: scale(0.94); }

/* ── Phase 6 — Jadwal + Alamat rows ── */

/* Shared row layout */
.sayuri-jadwal-row,
.sayuri-alamat-row{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  cursor: pointer;
  position: relative;
  background: #ffffff;
  transition: background 0.1s;
}
.sayuri-jadwal-row:active,
.sayuri-alamat-row:active{
  background: #f8fafc;
}

/* Jadwal wrapper */
.sayuri-jadwal-row{
  border-bottom: 0.5px solid #e2e8f0;
  margin-left: -14px;
  margin-right: -14px;
  width: calc(100% + 28px);
}

/* Alamat wrapper */
.sayuri-alamat-row{
  width: 100%;
}

/* Icon boxes */
.sayuri-jadwal-icon-box,
.sayuri-alamat-icon-box{
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: var(--accent-bg, #fef3c7);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s;
}

/* Content area */
.sayuri-jadwal-content,
.sayuri-alamat-content{
  flex: 1;
  min-width: 0;
}
.sayuri-jadwal-label,
.sayuri-alamat-label{
  font-size: 10px;
  font-weight: 600;
  color: #64748b;
  margin-bottom: 2px;
}
.sayuri-jadwal-value,
.sayuri-alamat-value{
  font-size: 12px;
  font-weight: 700;
  color: #1e293b;
  display: flex;
  align-items: center;
  gap: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sayuri-jadwal-dot{
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #475569;
  flex-shrink: 0;
  display: inline-block;
}

/* Chevron */
.sayuri-row-chevron{
  flex-shrink: 0;
}

/* ── Phase 7 — Category Cards + Headers ── */

/* Category header — fixed Sayuri colors */
.sayuri-hero-cat{
  background: #fef3c7 !important;
  color: #166534 !important;
  border: none !important;
  border: 0.5px solid #e9cc6a !important;
  border-radius: 25px !important;
  min-height: 44px !important;
  height: 44px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  padding: 0 14px !important;
  box-sizing: border-box !important;
  justify-content: space-between !important;
}

/* Caret — fixed Sayuri green */
.sayuri-hero-cat-caret{
  color: #166534 !important;
  opacity: 1;
  font-size: 18px !important;
  width: 18px !important;
  min-width: 18px !important;
  height: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  transform: rotate(180deg) !important;
}

/* Collapsed state: chevron direction */
.sayuri-hero-cards-wrap.is-collapsed .sayuri-hero-cat-caret{
  opacity: 1;
  transform: rotate(-90deg) !important;
}

/* Phase 7 — Harga Grosir toggle follows accent theme */
.sayuri-hero-grosir-toggle{
  background: var(--accent-bg, #fef3c7) !important;
  color: var(--accent-text, #166534) !important;
}
.sayuri-hero-grosir-caret{
  color: var(--accent-text, #166534) !important;
  opacity: 0.5;
}

/* Phase 7 — full bleed layout */
#sayuri_hero_tabpanel{
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 3px !important;
  border-radius: 0 !important;
}
#sayuri_hero_list{
  margin-left: -14px !important;
  margin-right: -14px !important;
  margin-top: 0 !important;
  width: calc(100% + 28px) !important;
}
.sayuri-hero-cards-wrap{
  border: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  padding-top: 6px !important;
}
.sayuri-hero-cards{
  padding-top: 0 !important;
  box-sizing: border-box !important;
}
.sayuri-hero-cat{
  border-radius: 25px !important;
  margin: 0 5px !important;
  width: calc(100% - 10px) !important;
  box-sizing: border-box !important;
}
.sayuri-hero-cat-name{
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
.sayuri-hero-cat-action{
  flex: 0 0 auto !important;
  height: 34px !important;
  min-width: 32px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  background: #fffdf7 !important;
  border: 1px solid rgba(20,83,45,0.18) !important;
  box-shadow: 0 1px 4px rgba(15,23,42,0.16) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  color: #166534 !important;
}
.sayuri-hero-cat-action-label{
  display: none !important;
  white-space: nowrap !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}
.sayuri-hero-cards-wrap.is-collapsed .sayuri-hero-cat-action{
  min-width: 122px !important;
  padding: 0 14px !important;
}
.sayuri-hero-cards-wrap.is-collapsed .sayuri-hero-cat-action-label{
  display: inline !important;
}
.sayuri-hero-item{
  padding-left: 24px !important;
  padding-right: 14px !important;
}
#sayuri_hero_list{
  background: transparent !important;
  border: none !important;
}
.sayuri-hero-cards-wrap{
  margin-top: 6px !important;
}
#sayuri_hero_list .sayuri-hero-cards-wrap > .sayuri-hero-cards > .sayuri-hero-item + .sayuri-hero-item{
  margin-top: var(--sy-home-product-row-item-gap, 0px) !important;
}
#sayuri_hero_list .sayuri-hero-cards-wrap + .sayuri-hero-cards-wrap{
  margin-top: var(--sy-home-product-row-category-group-gap, 6px) !important;
}
#sayuri_addr_canvas_wrap{
  border-bottom: none !important;
}
.sayuri-hero-deliverywrap{
  margin-bottom: 0 !important;
}
#sayuri_hero_list .sayuri-hero-cards-wrap{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Desktop full-bleed harmonization */
body .sayuri-hero-title{
  max-width: none !important;
}
#sayuri_bottom_dock{
  max-width: 776px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Slice B: Homepage tabpanel backing remains removed after Hero banner retirement. */
body.sayuri-app-shell #sayuri_hero_tabpanel::before {
  content: none !important;
  display: none !important;
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* ── Phase 8 — Item Row Reskin ── */

/* Grid: widen image column 68px → 74px */
.sayuri-hero-card{
  grid-template-columns: 74px 1fr auto !important;
}

/* Image wrap: 74×74px, flush (no negative margin) */
.sayuri-hero-card .sayuri-hero-imgwrap{
  width: 74px !important;
  height: 74px !important;
  margin-left: 0 !important;
  border-radius: 9px !important;
  background: transparent !important;
  overflow: hidden !important;
}

/* Image clip: match wrap size */
.sayuri-hero-imgclip{
  width: 74px !important;
  height: 74px !important;
  border-radius: 9px !important;
  overflow: hidden !important;
}

/* Image: 74×74px, no scale transform, accent-bg fallback */
.sayuri-hero-card .sayuri-hero-img{
  width: 74px !important;
  height: 74px !important;
  border-radius: 9px !important;
  transform: none !important;
  background: transparent !important;
}

/* Bodygrid: remove negative left margin from old layout */
.sayuri-hero-bodygrid{
  margin-left: 0 !important;
}

/* Chips: flex:1 so all chips share equal width */
.sayuri-chip{
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 0 !important;
}

/* Chip — selected (active) state: accent-chip-active */
.sayuri-chip.is-selected{
  background: var(--accent-chip-active, #166534) !important;
  border-color: var(--accent-chip-active, #166534) !important;
  color: #ffffff !important;
  outline: none !important;
  box-shadow: none !important;
}
.sayuri-chip.is-selected .sayuri-chip-label{
  color: #ffffff !important;
}

/* Chip label base color */
.sayuri-chip .sayuri-chip-label{
  color: #374151;
  font-size: 9px !important;
  font-weight: 700;
}

/* Chip row: allow chips to stretch */
.sayuri-chip-row{
  width: 100% !important;
}

/* Action column: remove negative right margin */
.sayuri-hero-actcol{
  margin-right: 0 !important;
  padding-right: 4px;
}

/* Tick circle — active (trash) */
.sayuri-hero-card .sayuri-hero-tick{
  left: -8px !important;
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  background: #166534 !important;
  background-image: none !important;
  background-color: #166534 !important;
  z-index: 2 !important;
  position: absolute;
  cursor: pointer;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.sayuri-hero-card .sayuri-hero-tick.is-on{
  background: #166534 !important;
  background-color: #166534 !important;
  background-image: none !important;
}
.sayuri-hero-card .sayuri-hero-tick::after{
  content: none !important;
}

/* Tick placeholder circle — inactive toggle button */
.sayuri-hero-card .sayuri-hero-tick-placeholder{
  left: 8px !important;
  top: 8px !important;
  bottom: auto !important;
  transform: none !important;
  width: 25px !important;
  height: 25px !important;
  border-radius: 50% !important;
  border: 2px solid #e2e8f0 !important;
  background: #ffffff !important;
  z-index: 9999 !important;
  position: absolute;
  cursor: pointer;
}
.sayuri-hero-card .sayuri-hero-tick-placeholder::after{
  content: none !important;
}
.sayuri-hero-card .sayuri-hero-tick-placeholder.is-off{
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
}

/* Inactive card: muted opacity */
.sayuri-hero-item.is-inactive .sayuri-hero-card{
  opacity: 0.45;
}
.sayuri-hero-item.is-inactive .sayuri-hero-tick-placeholder{
  opacity: 1;
}

/* Phase 8c — imgwrap overflow visible so ticks are not clipped */
.sayuri-hero-card .sayuri-hero-imgwrap{
  overflow: visible !important;
}

/* Phase 8c — hide delete tick entirely (delete only via stepper at qty 0) */
.sayuri-hero-card .sayuri-hero-tick{
  display: none !important;
}

/* Phase 8c — placeholder is now the sole toggle button for all items */
/* Active item: green filled circle with checkmark */
.sayuri-hero-card .sayuri-hero-tick-placeholder{
  background: #166534 !important;
  border-color: #166534 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 10l3.5 3.5L15 7' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-size: 100% !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}
/* Inactive item: white outline circle */
.sayuri-hero-item.is-inactive .sayuri-hero-card .sayuri-hero-tick-placeholder{
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
}

/* Phase 8 — Stepper horizontal layout per contract */

/* Card 3rd column: 74px to match stepper width */
.sayuri-hero-card{
  grid-template-columns: 74px 1fr 74px !important;
}

/* Actcol: span both rows, align top */
.sayuri-hero-actcol{
  grid-column: 3 !important;
  grid-row: 1 / span 2 !important;
  align-self: start !important;
  justify-content: flex-start !important;
  padding-right: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
}

/* Hook: full width */
#sayuri_hero_list .sayuri-hero-actcol .sayuri-card-cart-hook{
  width: 74px !important;
}

/* Plus button: horizontal 74×26px */
#sayuri_hero_list .sayuri-hero-actcol .sayuri-card-plus{
  width: 74px !important;
  height: 26px !important;
  border-radius: 6px !important;
}

/* Stepper: horizontal row, 74×26px */
#sayuri_hero_list .sayuri-hero-actcol .sayuri-card-stepper{
  flex-direction: row !important;
  width: 74px !important;
  min-width: 74px !important;
  height: 26px !important;
  min-height: 26px !important;
  position: relative !important;
  top: auto !important;
  right: auto !important;
  border-radius: 6px !important;
  border: none !important;
  box-shadow: 0 0 0 0.5px #475569 !important;
  overflow: hidden !important;
  filter: none !important;
  align-items: stretch !important;
  justify-content: stretch !important;
}

/* Minus button: left side, flex:1, reset order */
#sayuri_hero_list .sayuri-hero-actcol .sayuri-card-stepper .sayuri-stepper-btn.is-minus{
  order: 0 !important;
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  flex: 1 !important;
  width: auto !important;
  height: 100% !important;
  border-radius: 0 !important;
  align-self: stretch !important;
  border-bottom: none !important;
}

/* Plus button inside stepper: right side, flex:1 */
#sayuri_hero_list .sayuri-hero-actcol .sayuri-card-stepper .sayuri-stepper-btn.is-plus{
  position: relative !important;
  flex: 1 !important;
  width: auto !important;
  height: 100% !important;
  border-radius: 0 !important;
  align-self: stretch !important;
}

/* Qty: center, flex:1 */
#sayuri_hero_list .sayuri-hero-actcol .sayuri-card-stepper .sayuri-stepper-qty{
  flex: 1 !important;
  width: auto !important;
  min-width: 0 !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  position: relative !important;
  z-index: 1 !important;
  font-weight: 600 !important;
}

/* Phase 8 — Card flex layout per contract */
#sayuri_hero_list .sayuri-hero-card{
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
}
#sayuri_hero_list .sayuri-hero-imgwrap{
  grid-column: unset !important;
  grid-row: unset !important;
  flex-shrink: 0 !important;
  margin-top: 2px !important;
  align-self: flex-start !important;
}
#sayuri_hero_list .sayuri-hero-bodygrid{
  grid-column: unset !important;
  grid-row: unset !important;
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  padding-left: var(--sayuri-home-product-row-content-gap, 4px) !important;
  position: relative !important;
}
#sayuri_hero_list .sayuri-hero-r1l{
  grid-column: unset !important;
  grid-row: unset !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
#sayuri_hero_list .sayuri-hero-r1l .sayuri-hero-pname{
  flex: 1 !important;
  font-weight: 700 !important;
}
#sayuri_hero_list .sayuri-hero-actcol{
  grid-column: unset !important;
  grid-row: unset !important;
  position: static !important;
  align-self: unset !important;
}
#sayuri_hero_list .sayuri-hero-r2l{
  grid-column: unset !important;
  grid-row: unset !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
#sayuri_hero_list .sayuri-hero-pricecol{
  grid-column: unset !important;
  grid-row: unset !important;
}
#sayuri_hero_list .sayuri-hero-linesub{
  grid-column: unset !important;
  grid-row: unset !important;
  margin-right: 0 !important;
}

/* Phase 8 — bodygrid children stretch to full width */
#sayuri_hero_list .sayuri-hero-bodygrid{
  align-items: stretch !important;
}
#sayuri_hero_list .sayuri-hero-r1l,
#sayuri_hero_list .sayuri-hero-pricecol,
#sayuri_hero_list .sayuri-hero-r2l,
#sayuri_hero_list .sayuri-hero-linesub{
  width: 100% !important;
  align-self: auto !important;
  justify-self: auto !important;
}

/* Phase 8 — stepper [−][qty][+] always show all three parts */
#sayuri_hero_list .sayuri-card-stepper .sayuri-stepper-btn.is-plus{
  display: flex !important;
}
/* Fix hook top offset */
#sayuri_hero_list .sayuri-hero-actcol .sayuri-card-cart-hook{
  top: 0 !important;
}
/* Fix plus button position */
#sayuri_hero_list .sayuri-hero-actcol .sayuri-card-plus{
  position: relative !important;
  top: auto !important;
}
/* Phase 8 — stepper button reskin: white bg, no focus ring, no internal separators */
#sayuri_hero_list .sayuri-card-stepper .sayuri-stepper-btn.is-plus,
#sayuri_hero_list .sayuri-card-stepper .sayuri-stepper-btn.is-minus{
  background-color: #ffffff !important;
  color: #166534 !important;
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
}
#sayuri_hero_list .sayuri-card-stepper .sayuri-stepper-btn.is-plus:focus,
#sayuri_hero_list .sayuri-card-stepper .sayuri-stepper-btn.is-minus:focus,
#sayuri_hero_list .sayuri-card-stepper .sayuri-stepper-btn.is-plus:focus-visible,
#sayuri_hero_list .sayuri-card-stepper .sayuri-stepper-btn.is-minus:focus-visible{
  outline: none !important;
  box-shadow: none !important;
}
/* Preserve trash state bg on minus */
#sayuri_hero_list .sayuri-card-stepper .sayuri-stepper-btn.is-minus.is-zero{
  background-color: #fef2f2 !important;
  color: transparent !important;
}
/* Stepper − button: red trash icon when qty = 0 — LAST in cascade, wins over base rules */
#sayuri_hero_list .sayuri-card-stepper .sayuri-stepper-btn.is-minus.is-zero{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13' fill='none'%3E%3Cpath d='M2 3.5h9M4.5 3.5V2.5a.5.5 0 01.5-.5h3a.5.5 0 01.5.5v1M5.5 6v4M7.5 6v4M3 3.5l.5 7a.5.5 0 00.5.5h5a.5.5 0 00.5-.5l.5-7' stroke='%23ef4444' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C%2Fsvg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 13px 13px !important;
}
/* Phase 8 — stepper qty straight separator */
#sayuri_hero_list .sayuri-card-stepper .sayuri-stepper-qty{
  border-left: 0.5px solid #475569 !important;
  border-right: 0.5px solid #475569 !important;
  border-radius: 0 !important;
  padding: 10px 0 !important;
  margin: -10px 0 !important;
}

/* Phase 8 — row order: chips before price */
#sayuri_hero_list .sayuri-hero-r1l { order: 1 !important; }
#sayuri_hero_list .sayuri-hero-r2l { order: 2 !important; }
#sayuri_hero_list .sayuri-hero-pricecol { order: 3 !important; }
#sayuri_hero_list .sayuri-hero-linesub { position: absolute !important; bottom: 0 !important; right: -74px !important; width: auto !important; flex: none !important; margin: 0 !important; height: 20px !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; }
#sayuri_hero_list .sayuri-hero-linesub .sayuri-hero-linesub-val{ font-size: 12px !important; font-weight: 700 !important; color: #1e293b !important; }
#sayuri_hero_list .sayuri-hero-bodygrid { flex-wrap: wrap !important; }

/* Phase 8 — actcol align flex-end + hook left reset */
#sayuri_hero_list .sayuri-hero-actcol{
  align-items: flex-end !important;
}
#sayuri_hero_list .sayuri-hero-actcol .sayuri-card-cart-hook{
  left: 0 !important;
}

/* Phase 8 — addon dropdown position + style */
#sayuri_hero_list .sayuri-hero-addon{
  position: absolute !important;
  top: 30px !important;
  right: -76px !important;
  min-width: 74px !important;
  max-width: 74px !important;
  height: 26px !important;
  box-shadow: 0 0 0 0.8px #475569 !important;
  border: none !important;
  border-radius: 6px !important;
  outline: none !important;
  font-size: 10px !important;
  background: white !important;
  box-sizing: border-box !important;
  display: block !important;
}

/* Phase 8 — item left shift + chip width + km block padding */
#sayuri_hero_list .sayuri-hero-item{
  padding-left: 14px !important;
}
#sayuri_hero_list .sayuri-hero-r2l .sayuri-var-chips{
  flex: 1 !important;
  width: calc(100% - 82px) !important;
  max-width: calc(100% - 82px) !important;
}
#sayuri_hero_list .sayuri-chip-row{
  width: 100% !important;
}
#sayuri_km_block > *{
  padding-top: 16px !important;
}

/* ── Phase 8AN — km block notes gap reduction ── */
#sayuri_km_block .sayuri-km-identity{
  padding-bottom: 3px !important;
}
#sayuri_km_block .sayuri-km-notes{
  padding-top: 3px !important;
}

/* ── Phase 8AP — chip label descender fix ── */
#sayuri_hero_list .sayuri-chip-label{
  line-height: 13px !important;
  overflow: visible !important;
}

/* ── Phase 8AO — chip fixed width 51px ── */
#sayuri_hero_list .sayuri-chip{
  flex: 0 0 51px !important;
  width: 51px !important;
}

/* Zone 8 — supplemental (HOTFIX-20260401-ZONE8-SUPPFIX) */
.sayuri-summary{ display: none !important; }

/* Zone 8 — Delivery Picker Redesign (HOTFIX-20260401-ZONE8-PICKER) */
.sayuri-pk-dz{
  background: var(--sayuri-pill-bg,#1c3d24);
  padding: 10px 16px 14px;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 10;
}
.sayuri-pk-handle{
  width: 36px; height: 4px;
  background: rgba(255,255,255,0.2); border-radius: 2px;
  margin: 0 auto 12px;
}
.sayuri-pk-top{
  display: flex; align-items: center;
  justify-content: space-between; margin-bottom: 10px;
}
.sayuri-pk-sel{
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.08); border-radius: 10px;
  padding: 10px 12px; flex: 1; margin-right: 10px;
}
.sayuri-pk-dot{
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--sayuri-green-mid,#22c55e); flex-shrink: 0;
}
.sayuri-pk-seltext{
  font-size: 13px; font-weight: 800; color: #86efac;
}
.sayuri-pk-close{
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255,255,255,0.1); border: none;
  color: rgba(255,255,255,0.7); font-size: 13px;
  cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.sayuri-pk-fav{
  display: flex; align-items: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px; padding: 9px 12px; gap: 10px;
}
.sayuri-pk-fav-info{ flex: 1; }
.sayuri-pk-fav-label{
  font-size: 9px; color: rgba(255,255,255,0.45); margin-bottom: 2px;
}
.sayuri-pk-fav-val{
  font-size: 12px; font-weight: 800; color: #86efac;
}
.sayuri-pk-fav-apply{
  background: rgba(134,239,172,0.16); color: #86efac;
  border: 1px solid rgba(134,239,172,0.25); border-radius: 8px;
  padding: 6px 12px; font-size: 11px; font-weight: 700;
  cursor: pointer; font-family: inherit; flex-shrink: 0;
}
/* Active tile overrides */
.sayuri-date-item.sayuri-date-active{
  background: var(--sayuri-green,#166534) !important;
  border-color: var(--sayuri-green,#166534) !important;
  color: #fff !important;
}
.sayuri-date-item.sayuri-date-active .sayuri-date-main,
.sayuri-date-item.sayuri-date-active .sayuri-date-sub{
  color: #fff !important;
}
.sayuri-time-item.sayuri-time-active{
  background: var(--sayuri-green,#166534) !important;
  border-color: var(--sayuri-green,#166534) !important;
  color: #fff !important;
}
/* Confirm button override */
.sdsw-page2-save{
  background: var(--sayuri-green,#166534) !important;
  border-radius: 12px !important;
  padding: 13px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  width: 100% !important;
}
/* Star button */
.sayuri-pk-star{
  position: absolute; right: 8px; top: 50%;
  transform: translateY(-50%);
  width: 26px; height: 26px; border-radius: 7px;
  border: none; background: transparent; cursor: pointer;
  font-size: 15px; display: flex; align-items: center;
  justify-content: center; transition: transform 0.1s;
  padding: 0;
}
.sayuri-pk-star:hover{ transform: translateY(-50%) scale(1.15); }
/* Zone 8 — SDSW picker modal bottom-sheet override (HOTFIX-20260402-PICKER-SHEET) */
body.sayuri-app-shell .sdsw-map-modal{
  background: rgba(10,20,12,0.72);
  backdrop-filter: blur(2px);
  flex-direction: column;
  justify-content: flex-end;
}
body.sayuri-app-shell .sdsw-map-modal.sdsw-sheet-open{
  display: flex !important;
}
body.sayuri-app-shell .sdsw-map-dialog{
  position: relative;
  inset: auto;
  width: 100%;
  max-height: 88vh;
  border-radius: 20px 20px 0 0;
  background: var(--sayuri-white);
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.32s cubic-bezier(0.32,0.72,0,1);
  overflow: hidden;
}
/* Pages 5 & 6 render full-height — no rounded corners */
body.sayuri-app-shell .sdsw-map-dialog:has(.sdsw-page-5.is-active),
body.sayuri-app-shell .sdsw-map-dialog:has(.sdsw-page-6.is-active){
  border-radius: 0 !important;
}
/* Sheet-open: make flow-pages the scroll container; flow-page static so it contributes height */
body.sayuri-app-shell .sdsw-map-modal.sdsw-sheet-open .sdsw-flow-pages{
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}
body.sayuri-app-shell .sdsw-map-modal.sdsw-sheet-open .sdsw-flow-page{
  position: static !important;
  inset: auto !important;
  height: auto !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  padding-bottom: 0 !important;
}
body.sayuri-app-shell .sdsw-map-modal.sdsw-sheet-open .sdsw-flow-page:not(.is-active){
  display: none !important;
}
body.sayuri-app-shell .sdsw-map-modal.sdsw-sheet-open .sdsw-flow-page.sdsw-page-6{
  height: 100% !important;
}
/* Counter delivery-core position:fixed on save footer — sticky inside scroll container */
body.sayuri-app-shell .sdsw-map-modal.sdsw-sheet-open .sdsw-page2-footer{
  position: sticky !important;
  bottom: 0 !important;
  left: auto !important;
  right: auto !important;
  z-index: 10 !important;
  background: var(--sayuri-white, #fff) !important;
}

body.sayuri-app-shell .sdsw-map-modal.sdsw-sheet-open .sdsw-map-dialog{
  transform: translateY(0);
}
body.sayuri-app-shell .sdsw-map-modal.sdsw-sheet-open .sdsw-map-dialog {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
}
body.sayuri-app-shell .sdsw-map-header{
  display: none !important;
}
body.sayuri-app-shell .sdsw-map-modal.sdsw-sheet-open .sdsw-map-dialog {
  max-height: 100% !important;
  height: 100% !important;
  top: 0 !important;
  position: relative !important;
}

body.sayuri-app-shell .sdsw-map-modal.sdsw-sheet-open {
  margin-bottom: 0 !important;
}

body.sayuri-app-shell .sdsw-map-modal.sdsw-sheet-open {
  z-index: var(--sayuri-z-sheet-surface, 10000001) !important;
}
body.sayuri-app-shell .sdsw-page-nav-bar {
  background: #1a3d2b !important;
}
body.sayuri-app-shell .sdsw-page-nav-title {
  color: #fff !important;
}
body.sayuri-app-shell .sdsw-page-nav-back {
  border-color: rgba(255,255,255,0.3) !important;
  background: rgba(255,255,255,0.1) !important;
}

body.sayuri-app-shell .sdsw-page-nav-bar {
  background: #1a3d2b !important;
}
body.sayuri-app-shell .sdsw-page-nav-title {
  color: #fff !important;
}
body.sayuri-app-shell .sdsw-page-nav-back {
  border-color: rgba(255,255,255,0.3) !important;
  background: rgba(255,255,255,0.1) !important;
}

/* Reserve space so list is not hidden behind bottom composer */
  background: #f9fafb !important;
}

/* Reserve space so list is not hidden behind bottom composer */
.sayuri-hero-list{
  width: 100%;
  max-width: 100%;
  align-self: stretch; /* ✅ force full width inside align-items:center */
  margin-top: 16px;
  padding-bottom: calc(var(--sayuri-dock-total-h) + env(safe-area-inset-bottom) + 20px); /* reserve space for dock */
}

/* ---------------------------------------------------------
  4) Bottom dock (composer + footer nav)
   --------------------------------------------------------- */
:root{
  --sayuri-dock-total-h: 56px;  /* Phase 2b: dock = nav bar only */
  --sayuri-dock-emerald: #166534;
  /* Design tokens (sayuri-design-reference.md §1) */
  --sayuri-green:       #166534;
  --sayuri-green-mid:   #22c55e;
  --sayuri-green-light: #dcfce7;
  --sayuri-green-dark:  #14532d;
  --sayuri-pill-bg:     #1c3d24;
  --sayuri-text:        #111827;
  --sayuri-muted:       #6b7280;
  --sayuri-strike:      #9ca3af;
  --sayuri-white:       #ffffff;
  --sayuri-bg:          #f3f4f6;
  --sayuri-border:      #e5e7eb;
  --sayuri-red:         #ef4444;
  --sayuri-red-light:   #fef2f2;
  --sayuri-amber:       #f59e0b;
  --sayuri-amber-light: #fffbeb;
  --sayuri-mint:        #86efac;

  /* Fixed Sayuri accent tokens. Runtime color overrides are retired. */
  --accent-bg:              #fef3c7;  /* header bg, icon box bg, product image bg */
  --accent-text:            #166534;  /* header text, icon SVG strokes             */
  --accent-border:          #e9cc6a;  /* header bottom border (auto-derived)       */
  --accent-chip-active:     #166534;  /* active variation chip fill               */
  --accent-chip-inactive:   #d4e8c2;  /* inactive has-qty chip bg (auto-derived)  */
  --accent-chip-outline:    #166534;  /* chip border for has-qty chips            */
}

#sayuri_bottom_dock{
  position: fixed;
  left: 0; right: 0;
  bottom: var(--sayuri-kb, 0px);
  z-index: 9999999;
  padding: 0;
  pointer-events: none;
  opacity: 1;
  transition-property: opacity !important;
  transition-duration: calc(var(--sayuri-app-bottom-navigation-dock-transition-ms, 100) * 1ms) !important;
  transition-timing-function: linear !important;
}
#sayuri_bottom_dock.is-hidden{
  opacity: 0;
  pointer-events: none;
}
.sse-mbco-real-overlay[data-sse-mbco-section-key="app_bottom_navigation"]{
  transition: opacity calc(var(--sayuri-app-bottom-navigation-dock-transition-ms, 100) * 1ms) linear;
}
body.sayuri-dock-hidden .sse-mbco-real-overlay[data-sse-mbco-section-key="app_bottom_navigation"]{
  opacity: 0 !important;
}
#sayuri_bottom_dock .sayuri-dock-surface{
  pointer-events: auto;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.00) 62%),
    linear-gradient(135deg, #14532D 0%, #16A34A 55%, #86EFAC 100%);
  border: 1px solid #e5e7eb;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 10px 24px rgba(0,0,0,0.10);
  padding: 8px 12px calc(6px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 0;
}

#sayuri_hero_composer,
.sayuri-hero-composer{
  z-index: 9999999 !important;
}

.sayuri-hero-composer{
  position: relative;
  left: auto; right: auto;
  bottom: auto;
  padding: 0;
  pointer-events: none;
}


#sayuri_bottom_dock .sayuri-dock-promo{
  margin: -8px -12px 0;
  padding: 6px 12px;
  background: transparent;
  color: rgba(255,255,255,0.92);
  text-shadow: 0 1px 2px rgba(0,0,0,0.22);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: 16px 16px 0 0;
}

.sayuri-hero-composer-inner{
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: auto;
}

.sayuri-hero-plusfab{
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #fff;

  font-size: 16px;
  font-weight: 650;

  display: flex;
  align-items: center;
  justify-content: center;

  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

.sayuri-hero-inputwrap{
  flex: 1;
  position: relative;
}

.sayuri-dock-nav{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  align-items: stretch;
}
/* Force the nav row to neutral white and preserve rounded corners */
#sayuri_bottom_dock .sayuri-dock-nav{
  background: #ffffff;
  margin: 0 -12px -6px;
  padding: 6px 12px calc(6px + env(safe-area-inset-bottom));
  border-radius: 0 0 16px 16px;
  border-top: 1px solid rgba(15,23,42,0.08);
}
.sayuri-dock-nav-item{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 4px 8px;
  border: none;
  background: transparent;
  border-radius: 10px;
  font-size: 12px;
  position: relative;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
  transition: color 160ms ease, background 160ms ease, transform 140ms ease;
}
.sayuri-dock-nav-item .sayuri-dock-nav-ico{ display: inline-flex; width: 20px; height: 20px; line-height: 1; align-items: center; justify-content: center; }
.sayuri-dock-nav-item.is-active{
  color: var(--accent-chip-active, #166534);
  background: transparent;
}
.sayuri-dock-nav-item.is-active::before{
  content: "";
  position: absolute;
  top: auto;
  bottom: 6px;
  left: 14px;
  right: 14px;
  height: 3px;
  border-radius: 999px;
  background: var(--accent-chip-active, #166534);
  opacity: 0.9;
  pointer-events: none;
}
.sayuri-dock-nav-item:active{ transform: translateY(1px); }
.sayuri-dock-nav-item:focus-visible{ outline: 2px solid #0b9f6a; outline-offset: 2px; }

body.sayuri-dock-hidden #sayuri_hero_suggest_float,
body.sayuri-dock-hidden #sayuri_hero_suggest{ display: none !important; }
body.sayuri-kb-open #sayuri_dock_nav{ display: none !important; }

/* Floating cart: scale down and lift above dock */
#sayuri_cart_fab{
  transform: scale(0.5);
  transform-origin: bottom right;
  right: 12px;
  bottom: calc(var(--sayuri-dock-total-h, 156px) + env(safe-area-inset-bottom) + var(--sayuri-kb, 0px) + 12px);
}
#sayuri_cart_fab:active{ transform: scale(0.48); }

/* kill any wrapper shadow to prevent double shadow */
.sayuri-hero-searchwrap{
  box-shadow: none !important;
}

/* ---------------------------------------------------------
   5) Suggest dropdown (legacy + floating)
   --------------------------------------------------------- */
.sayuri-hero-suggest{
  position: absolute;
  top: 60px;
  left: 0;
  right: 0;

  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 18px;

  box-shadow: 0 16px 32px rgba(0,0,0,.12);
  overflow: hidden;

  z-index: 9999999 !important;
}

.sayuri-hero-suggest button{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;

  padding: 12px 14px;
  border: 0;
  background: #fff;

  cursor: pointer;
  font-weight: 900;
  font-size: 14px;
}

.sayuri-hero-suggest button:hover{
  background: #f3f4f6;
}

/* ---------------------------------------------------------
   5B) Toast + Category Bottom Sheet
   --------------------------------------------------------- */
.sayuri-toast{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom) + 86px);
  z-index: 10000050;

  max-width: 86vw;
  padding: 10px 14px;

  background: rgba(17, 24, 39, .92);
  color: #fff;

  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .2px;

  box-shadow: 0 10px 22px rgba(0,0,0,.20);
}

/* ---------------------------------------------------------
   Fly-to-cart animation (catalog "+" -> floating cart icon)
   --------------------------------------------------------- */
.sayuri-fly-ghost{
  position: fixed;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  z-index: 10000080;
  pointer-events: none;

  /* layout */
  display: flex;
  flex-direction: column;

  /* crisp Sayuri green ring */
  border-radius: 16px;
  overflow: hidden;
  background: #fff;

  /* 1px hard edge + 2px solid ring */
  border: 1px solid #16a34a;
  box-shadow:
    0 12px 24px rgba(0,0,0,.18),
    0 0 0 2px #16a34a;

  transform: translate3d(0,0,0) scale(1);
  opacity: 1;
}

.sayuri-fly-ghost-img{
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sayuri-fly-ghost-img img{
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.sayuri-fly-ghost-name{
  flex: 0 0 24px; /* 2-line label; still inside same ghost size */
  height: 24px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: .2px;
  text-align: center;
  color: #064e3b;
  background: rgba(255,255,255,.92);
  padding: 2px 6px 3px; /* keeps text away from bottom border */
  overflow: hidden;
}

.sayuri-fly-ghost-name span{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* max 2 rows */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal; /* allow wrapping */
  line-height: 10px;
  max-height: 20px;
}

.sayuri-fly-ghost-name.is-small{
  font-size: 6.4px; /* 80% of 8px */
}

.sayuri-fly-ghost img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Fly ghost: ring snap exactly when it pauses at center */
.sayuri-fly-ghost.is-pause{
  animation: sayuriFlyRingSnap 220ms cubic-bezier(.2,.9,.2,1) 1;
}

@keyframes sayuriFlyRingSnap{
  0%{
    box-shadow:
      0 12px 24px rgba(0,0,0,.18),
      0 0 0 2px #16a34a;
  }
  55%{
    /* quick “snap” (crisp Sayuri ring pop) */
    box-shadow:
      0 14px 28px rgba(0,0,0,.22),
      0 0 0 4px #16a34a;
  }
  100%{
    box-shadow:
      0 12px 24px rgba(0,0,0,.18),
      0 0 0 2px #16a34a;
  }
}

/* Search fly: show full image (no crop) */
.sayuri-fly-ghost.is-contain img{
  object-fit: contain;
  background: #fff;
}

.sayuri-cart-pop{
  animation: sayuri_cart_pop .22s ease-out;
}

.sayuri-cart-glow{
  animation: sayuri_cart_glow .42s ease-out;
}

@keyframes sayuri_cart_glow{
  0%{
    box-shadow: 0 0 0 0 rgba(22,163,74,.0);
  }
  40%{
    box-shadow: 0 0 0 6px rgba(22,163,74,.35);
  }
  100%{
    box-shadow: 0 0 0 0 rgba(22,163,74,0);
  }
}

/* Hero cart count bounce */
.sayuri-count-bounce{
  animation: sayuri_count_bounce .26s ease-out;
}

@keyframes sayuri_count_bounce{
  0%   { transform: scale(1); }
  55%  { transform: scale(1.22); }
  100% { transform: scale(1); }
}

@keyframes sayuri_cart_pop{
  0%   { transform: scale(1); }
  55%  { transform: scale(1.14); }
  100% { transform: scale(1); }
}

.sayuri-cat-backdrop{
  position: fixed;
  inset: 0;
  z-index: 10000020;
  background: rgba(0,0,0,.22);
}

.sayuri-cat-sheet{
  position: fixed;
  left: 0; right: 0;
  bottom: 0;
  z-index: 10000030;

  background: #fff;
  border-radius: 18px 18px 0 0;

  max-height: 75vh;
  box-shadow: 0 -14px 28px rgba(0,0,0,.18);
  overflow: hidden;

  transform: translateY(12px);
}

.sayuri-cat-sheet-head{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;

  padding: 12px 12px;
  background: #14532d; /* Sayuri hero green */
  border-bottom: 1px solid rgba(255,255,255,.12);
}

.sayuri-cat-sheet-title{
  font-size: 16px;
  font-weight: 900;
  color: #fff;
  letter-spacing: .2px;
  margin-left: -2px;
}

.sayuri-cat-sheet-close{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 0;
  outline: 0;
  background: transparent;

  color: #fff;
  font-weight: 900;
  font-size: 18px; /* slightly larger for × */
  line-height: 1;

  display: flex;
  align-items: center;
  justify-content: center;
}

.sayuri-cat-sheet-close:hover{
  background: rgba(255,255,255,.12);
}

.sayuri-cat-sheet-body{
  padding: 12px 12px 16px;
  overflow: auto;
  max-height: calc(75vh - 58px);

  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 12px;
}

.sayuri-cat-row{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;

  width: 100%;
  padding: 0;

  border: 0;
  background: transparent;
  cursor: pointer;
}

.sayuri-cat-row:hover .sayuri-cat-thumb{
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
  transform: translateY(-1px);
}

.sayuri-cat-thumb{
  width: 100%;
  aspect-ratio: 1 / 1;

  border-radius: 16px;
  overflow: hidden;
  background: #e5e7eb;

  display: flex;
  align-items: center;
  justify-content: center;

  transition: transform .12s ease, box-shadow .12s ease;
  box-shadow: 0 8px 18px rgba(0,0,0,.08);
}

.sayuri-cat-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sayuri-cat-name{
  width: 100%;
  text-align: center;
  font-size: 13px;
  font-weight: 900;
  color: #111827;

  line-height: 1.15;
  height: calc(1.15em * 2);   /* fixed 2-line box so all tiles align */
  overflow: hidden;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Floating suggest panel (appended to body) */
.sayuri-hero-suggest-float{
  position: absolute;

  background: #ffffff;
  border: 0.5px solid #e2e8f0;
  border-radius: 16px;

  box-shadow: 0 8px 32px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);
  z-index: 99999999;

  max-height: 320px;
  overflow: auto;

  font-family: 'Plus Jakarta Sans', 'Nunito', sans-serif;
}

/* Zone 2 — Search canvas dim overlay */
#sayuri_search_dim{
  position: fixed; inset: 0;
  background: rgba(10,20,12,0.4);
  z-index: 9999990;
  display: none;
  pointer-events: none;
  transition: opacity 0.15s;
}
#sayuri_search_dim.active{ display: block; pointer-events: auto; }

/* Zone 2 — Search active border */
.sayuri-hero-inputwrap.search-active #sayuri_hero_search{
  outline: 1.5px solid var(--sayuri-green);
  background: var(--sayuri-white);
}

/* Phase 2d — Nav search active: restore dark text on white bg */
.sayuri-hero-nav-row2 .sayuri-hero-inputwrap.search-active #sayuri_hero_search{
  color: #1e293b;
  caret-color: #1e293b;
  background: #ffffff;
  border-color: rgba(255,255,255,.6);
  outline: none;
  background-image: none;
  padding: 0 14px 0 42px;
}
.sayuri-hero-nav-row2 .sayuri-hero-inputwrap.search-active #sayuri_hero_search::placeholder{
  color: #94a3b8;
}

/* Phase 2d — Suggestion dropdown — Homepage B design system */

/* Section header (PENCARIAN TERKINI / PRODUK) */
.sug-section{
  padding: 8px 14px 5px;
  font-size: 8px;
  font-weight: 700;
  color: #94a3b8;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  background: #f8fafc;
  border-bottom: 0.5px solid #e2e8f0;
}

/* Recent search chips row */
.sug-recents{
  padding: 8px 14px 10px;
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  border-bottom: 0.5px solid #e2e8f0;
}
.sug-recent-chip{
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 600;
  color: #64748b;
  background: #f1f5f9;
  border: 0.5px solid #e2e8f0;
  cursor: pointer;
  transition: border-color 0.1s, color 0.1s, background 0.1s;
}
.sug-recent-chip:hover{
  border-color: var(--accent-chip-active, #166534);
  color: var(--accent-chip-active, #166534);
  background: #f8fafc;
}

/* Product suggestion item */
.sug-item{
  width: 100%;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: none;
  border-bottom: 0.5px solid #f1f5f9;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background 0.1s;
}
.sug-item:last-child{ border-bottom: none; }
.sug-item:hover{ background: #f8fafc; }

/* Product name — matched characters highlighted in accent color */
.sug-name{
  font-size: 12px;
  font-weight: 700;
  color: #1e293b;
}
.sug-name strong{
  color: var(--accent-chip-active, #166534);
  font-weight: 800;
}

/* Category label below name */
.sug-cat{
  font-size: 10px;
  font-weight: 600;
  color: #94a3b8;
  margin-top: 2px;
}

/* Price — HIDDEN (removed from design, kept as display:none in case
   the element still exists in cached renders) */
.sug-price{
  display: none;
}

/* ── Zone 3: Delivery Address Canvas Card ─────────────────────────────── */
.ph-delivery{
  display:flex; align-items:center; gap:8px;
  width:100%; padding:10px 14px;
  background:var(--sayuri-white); border:1.5px solid var(--sayuri-border);
  border-radius:14px; cursor:pointer;
  transition:border-color .15s, box-shadow .15s;
}
.ph-delivery:active{ border-color:var(--sayuri-green); box-shadow:0 0 0 3px rgba(22,101,52,.12); }
.ph-dot{ width:10px; height:10px; border-radius:50%; background:var(--sayuri-green); flex-shrink:0; margin-top:1px; }
.ph-delivery-label{ font-size:9px; color:var(--sayuri-muted); margin-bottom:1px; }
.ph-delivery-addr{ font-size:11px; font-weight:700; color:var(--sayuri-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ph-delivery-addr:empty::before{ content:'Pilih alamat pengiriman'; color:var(--sayuri-muted); font-weight:400; }
.ph-delivery-edit{ margin-left:auto; font-size:11px; color:var(--sayuri-green); font-weight:600; flex-shrink:0; }

/* ── Zone 3: Addr Modal — backdrop + sheet ─────────────────────────────── */
.sayuri-addr-back{
  display:none; position:fixed; inset:0;
  background:rgba(10,20,12,0.72); backdrop-filter:blur(2px); z-index:var(--sayuri-z-sheet-backdrop, 10000000);
}
.sayuri-addr-back.active{ display:block; }
.sayuri-addr-sheet{
  display:flex; flex-direction:column;
  position:fixed; bottom:0; left:0; right:0;
  max-height:88vh; background:var(--sayuri-white);
  border-radius:20px 20px 0 0;
  z-index:var(--sayuri-z-sheet-surface, 10000001);
  transform:translateY(100%);
  transition:transform 0.32s cubic-bezier(0.32,0.72,0,1);
}
.sayuri-addr-sheet.active{ transform:translateY(0); }
.sayuri-addr-dz{ display:flex; flex-direction:column; align-items:center; gap:4px; padding:12px 16px 10px; background:var(--sayuri-pill-bg,#1c3d24); border-radius:20px 20px 0 0; position:relative; }
.sayuri-addr-dz-handle{ width:36px; height:4px; border-radius:2px; background:rgba(255,255,255,0.2); margin-bottom:4px; }
.sayuri-addr-dz-close{ position:absolute; right:14px; top:50%; transform:translateY(-50%); width:28px; height:28px; border-radius:50%; background:rgba(255,255,255,0.1); border:none; cursor:pointer; color:rgba(255,255,255,0.7); font-size:13px; display:flex; align-items:center; justify-content:center; }
.sayuri-addr-body{ flex:1; overflow-y:auto; overflow-x:visible; padding:12px 14px 8px; display:flex; flex-direction:column; gap:10px; }

/* ── Zone 3: Address cards ─────────────────────────────────────────────── */
.addr-card{ border:1.5px solid var(--sayuri-border); border-radius:14px; background:var(--sayuri-white); display:flex; align-items:stretch; position:relative; cursor:pointer; transition:border-color .15s; }
.addr-card.active{ border-color:var(--sayuri-green); }
.addr-panel{ width:42px; flex-shrink:0; background:var(--sayuri-green-light,#f0fdf4); border-radius:12px 0 0 12px; display:flex; flex-direction:column; align-items:center; justify-content:space-between; padding:4px 0 18px; transition:background .15s; }
.addr-card.active .addr-panel{ background:var(--sayuri-green); }
.addr-check{ width:18px; height:18px; border-radius:50%; border:1.5px solid rgba(22,101,52,0.3); background:var(--sayuri-white); display:flex; align-items:center; justify-content:center; font-size:8px; color:transparent; flex-shrink:0; transition:all .15s; margin-top:4px; }
.addr-card.active .addr-check{ background:#fff; border-color:#fff; color:var(--sayuri-green); }
.addr-initial{ width:28px; height:28px; border-radius:50%; background:rgba(22,101,52,0.12); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:11px; font-weight:800; color:var(--sayuri-green,#16a34a); letter-spacing:-0.5px; transition:color .15s, background .15s; }
.addr-card.active .addr-initial{ color:#fff; background:rgba(255,255,255,0.2); }
.addr-panel-dot{ width:5px; height:5px; border-radius:50%; background:rgba(22,101,52,0.2); transition:background .15s; }
.addr-card.active .addr-panel-dot{ background:rgba(255,255,255,0.3); }
.addr-content{ flex:1; padding:10px 12px; min-width:0; }
.addr-top-row{ display:flex; align-items:center; gap:6px; margin-bottom:5px; flex-wrap:wrap; }
.addr-tag{ display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:700; color:var(--sayuri-green); background:var(--sayuri-green-light,#f0fdf4); border:1px solid var(--sayuri-green-mid,#bbf7d0); border-radius:20px; padding:2px 8px; }
.addr-utama{ font-size:10px; font-weight:700; color:var(--sayuri-amber,#d97706); background:var(--sayuri-amber-light,#fef3c7); border:1px solid #fde68a; border-radius:20px; padding:2px 8px; }
.addr-name{ font-size:12px; font-weight:700; color:var(--sayuri-text); margin-bottom:2px; }
.addr-contact{ font-size:10px; color:var(--sayuri-muted); margin-bottom:2px; }
.addr-line{ font-size:10px; color:var(--sayuri-muted); line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.addr-chips{ display:flex; gap:4px; flex-wrap:wrap; margin-top:4px; }
.addr-chip-instr{ font-size:10px; font-weight:600; color:var(--sayuri-green); background:var(--sayuri-green-light,#f0fdf4); border:1px solid var(--sayuri-green-mid,#bbf7d0); border-radius:20px; padding:2px 8px; }
.addr-chip-detail{ font-size:10px; font-weight:500; color:var(--sayuri-muted); background:var(--sayuri-bg,#f8fafc); border:1px solid var(--sayuri-border); border-radius:20px; padding:2px 8px; }
.addr-three-dot{ position:absolute; top:10px; right:10px; width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:transparent; border:none; outline:none; cursor:pointer; font-size:18px; color:var(--sayuri-muted); transition:background .12s; }
.addr-three-dot:hover{ background:var(--sayuri-bg,#f8fafc); }
.addr-three-dot:focus,.addr-three-dot:active{ outline:none; background:transparent; }

/* ── Zone 3: Context menu ─────────────────────────────────────────────── */
.addr-ctx-menu{ display:none; position:absolute; top:36px; right:10px; background:var(--sayuri-white); border:1px solid var(--sayuri-border); border-radius:10px; box-shadow:0 4px 16px rgba(0,0,0,.12); z-index:9999995; min-width:160px; overflow:hidden; }
.addr-ctx-menu.open{ display:block; }
.addr-ctx-item{ display:block; width:100%; padding:10px 16px; font-size:13px; font-weight:500; color:var(--sayuri-text); background:none; border:none; text-align:left; cursor:pointer; transition:background .1s; }
.addr-ctx-item:hover{ background:var(--sayuri-bg,#f8fafc); }
.addr-ctx-item.danger{ color:var(--sayuri-red,#dc2626); }
.addr-ctx-item.danger:hover{ background:var(--sayuri-red-light,#fef2f2); }

/* ── Zone 3: Add address card ─────────────────────────────────────────── */
.addr-add-card{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:14px; border:2px dashed var(--sayuri-border); border-radius:14px; background:none; cursor:pointer; transition:border-color .15s, background .15s; }
.addr-add-card:hover{ border-color:var(--sayuri-green); background:var(--sayuri-green-light,#f0fdf4); }
.addr-add-icon{ font-size:20px; color:var(--sayuri-green); }
.addr-add-label{ font-size:13px; font-weight:600; color:var(--sayuri-green); }

/* ── Zone 3: Confirm bar ───────────────────────────────────────────────── */
.sayuri-addr-confirm{ padding:12px 14px; border-top:1px solid var(--sayuri-border); }
.sayuri-addr-confirm-btn{ width:100%; padding:13px; background:var(--sayuri-green); color:#fff; border:none; border-radius:14px; font-size:15px; font-weight:700; cursor:pointer; transition:background .15s; }
.sayuri-addr-confirm-btn:hover{ background:var(--sayuri-green-dark,#14532d); }

/* ── Zone 3: Sub-screen (rename / delete) ────────────────────────────── */
.sayuri-addr-sub{ display:flex; flex-direction:column; position:absolute; inset:0; background:var(--sayuri-white); z-index:10; transform:translateX(100%); transition:transform 0.28s cubic-bezier(0.32,0.72,0,1); }
.sayuri-addr-sub.active{ transform:translateX(0); }
.sayuri-addr-sub-hdr{ display:flex; align-items:center; gap:8px; padding:14px 16px; border-bottom:1px solid var(--sayuri-border); }
.sayuri-addr-sub-back{ background:none; border:none; font-size:20px; cursor:pointer; color:var(--sayuri-text); padding:0 4px; }
.sayuri-addr-sub-title{ font-size:15px; font-weight:700; color:var(--sayuri-text); }
.sayuri-addr-sub-body{ flex:1; overflow-y:auto; padding:18px 16px; display:flex; flex-direction:column; gap:14px; }

/* Hide SDSW summary in canvas — canvas card + slot pill replace it */
.sayuri-hero-deliverywrap .sdsw-main-summary{ display:none !important; }

/* Hide legacy tab strip — keranjang pill replaces it */
#sayuri_hero_tabs{ display:none !important; }

/* ── Zone 3b: Keranjang Pill ────────────────────────────────────────────── */
.pill-float{ display:flex; justify-content:center; padding:2px 0 10px; }
.sayuri-kp-pill{ display:inline-flex; align-items:center; gap:8px; padding:10px 18px; background:var(--sayuri-pill-bg,#1c3d24); border:1px solid rgba(255,255,255,0.06); border-radius:24px; box-shadow:0 4px 16px rgba(22,101,52,0.45),0 1px 4px rgba(0,0,0,0.25); cursor:pointer; transition:opacity .15s; text-align:left; }
.sayuri-kp-pill:active{ opacity:.85; }
.sayuri-kp-pill-icon{ font-size:18px; flex-shrink:0; }
.sayuri-kp-pill-name{ font-size:13px; font-weight:700; color:#fff; max-width:160px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sayuri-kp-pill-count{ display:inline-flex; align-items:center; font-size:11px; font-weight:600; color:rgba(255,255,255,0.75); background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.15); border-radius:20px; padding:2px 8px; flex-shrink:0; }
.kp-count{ display:inline-flex; align-items:center; color:rgba(255,255,255,0.75); background:rgba(255,255,255,0.1); padding:2px 8px; border-radius:10px; font-size:11px; font-weight:600; flex-shrink:0; }
.kp-new{ display:inline-flex; align-items:center; color:#86efac; background:rgba(134,239,172,0.14); padding:2px 8px; border-radius:10px; font-size:11px; font-weight:600; flex-shrink:0; }
.sayuri-kp-pill-ganti{ font-size:12px; font-weight:700; color:#86efac; flex-shrink:0; }
.kp-add-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px; border-top:1px solid var(--sayuri-border); padding-top:12px; }
.kp-add-item{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:16px 8px; border:2px dashed var(--sayuri-border); border-radius:14px; background:none; cursor:pointer; transition:border-color .15s, background .15s; width:100%; box-sizing:border-box; }
.kp-add-item:not(.kp-add-disabled):hover{ border-color:var(--sayuri-green); background:var(--sayuri-green-light,#f0fdf4); }
.kp-add-item.kp-add-disabled{ opacity:0.5; cursor:default; }
.kp-add-item-icon{ font-size:22px; }
.kp-add-item-label{ color:var(--sayuri-green); }

/* ── Zone 3b: Modal backdrop + sheet ───────────────────────────────────── */
.sayuri-kp-back{ display:none; position:fixed; inset:0; background:rgba(10,20,12,0.72); backdrop-filter:blur(2px); z-index:var(--sayuri-z-sheet-backdrop, 10000000); }
.sayuri-kp-back.active{ display:block; }
.sayuri-kp-sheet{ display:flex; flex-direction:column; position:fixed; left:0; right:0; bottom:0; background:transparent; z-index:var(--sayuri-z-sheet-surface, 10000001); transform:translateY(100%); transition:transform 0.32s cubic-bezier(0.32,0.72,0,1); overflow:hidden; isolation:isolate; }
.sayuri-kp-sheet.active{ transform:translateY(0); }
.sayuri-kp-dz{ position:relative; display:flex; align-items:center; justify-content:center; padding:0 48px; flex-shrink:0; }
.sayuri-kp-body{ flex:1; min-height:0; overflow-y:auto; padding:12px 14px 8px; display:flex; flex-direction:column; gap:10px; position:relative; z-index:60; }
.sayuri-kp-confirm{ padding:12px 14px; border-top:1px solid var(--sayuri-border); position:relative; z-index:60; flex-shrink:0; }
.sayuri-kp-confirm-btn{ width:100%; padding:13px; background:var(--sayuri-green); color:#fff; border:none; border-radius:14px; font-size:15px; font-weight:700; cursor:pointer; transition:background .15s; }
.sayuri-kp-confirm-btn:hover{ background:var(--sayuri-green-dark,#14532d); }
.sayuri-kp-open-create{ width:100%; padding:13px; border:1.5px dashed var(--sayuri-green); border-radius:14px; background:#f0fdf4; color:var(--sayuri-green-dark,#14532d); font-size:14px; font-weight:800; cursor:pointer; text-align:center; }
.sayuri-kp-sheet .sayuri-kp-logical-view{ flex:1 1 auto; min-height:0; z-index:60; display:none; visibility:hidden; pointer-events:none; overflow-y:auto; background:transparent; transform:none; transition:none; flex-direction:column; }
.sayuri-kp-sheet .sayuri-kp-logical-view.active{ display:flex; visibility:visible; pointer-events:auto; transform:none; }
.sayuri-kp-rename-footer{ display:none; flex-shrink:0; padding:12px 14px; position:relative; z-index:60; }
.sayuri-kp-sheet[data-sayuri-kp-view="CREATE"] #sayuri_kp_body,
.sayuri-kp-sheet[data-sayuri-kp-view="NAME"] #sayuri_kp_body,
.sayuri-kp-sheet[data-sayuri-kp-view="RENAME"] #sayuri_kp_body,
.sayuri-kp-sheet[data-sayuri-kp-view="FAVORIT_ACTIONS"] #sayuri_kp_body,
.sayuri-kp-sheet[data-sayuri-kp-view="FAVORIT_TARGET"] #sayuri_kp_body,
.sayuri-kp-sheet[data-sayuri-kp-view="TEMPLATE"] #sayuri_kp_body,
.sayuri-kp-sheet[data-sayuri-kp-view="CREATE"] .sayuri-kp-confirm,
.sayuri-kp-sheet[data-sayuri-kp-view="NAME"] .sayuri-kp-confirm,
.sayuri-kp-sheet[data-sayuri-kp-view="RENAME"] .sayuri-kp-confirm,
.sayuri-kp-sheet[data-sayuri-kp-view="FAVORIT_ACTIONS"] .sayuri-kp-confirm,
.sayuri-kp-sheet[data-sayuri-kp-view="FAVORIT_TARGET"] .sayuri-kp-confirm,
.sayuri-kp-sheet[data-sayuri-kp-view="TEMPLATE"] .sayuri-kp-confirm{ display:none; }
.sayuri-kp-sheet[data-sayuri-kp-view="NAME"] #sayuri_kp_name_footer{ display:flex; }
.sayuri-kp-sheet[data-sayuri-kp-view="RENAME"] #sayuri_kp_rename_footer{ display:flex; }

/* ── Zone 3b: Tab cards (§5.9 simple flex row) ──────────────────────────── */
.k-card{ border:1.5px solid var(--sayuri-border); border-radius:14px; padding:11px 12px; display:flex; align-items:center; gap:10px; background:var(--sayuri-white); cursor:pointer; transition:border-color .15s, background .15s; position:relative; }
.k-card.active{ border-color:var(--sayuri-green); background:#f0fdf4; }
.k-check{ width:20px; height:20px; border-radius:50%; border:1.5px solid var(--sayuri-border); display:flex; align-items:center; justify-content:center; font-size:10px; color:transparent; flex-shrink:0; transition:all .15s; }
.k-card.active .k-check{ background:var(--sayuri-green); border-color:var(--sayuri-green); color:#fff; }
.k-emoji{ width:38px; height:38px; border-radius:10px; background:var(--sayuri-green-light,#f0fdf4); display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; }
.k-info{ flex:1; min-width:0; }
.k-name{ color:var(--sayuri-text); margin-bottom:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.k-meta{ color:var(--sayuri-muted); }
.k-dots{ width:28px; height:28px; border-radius:8px; border:none; background:transparent; cursor:pointer; font-size:16px; color:var(--sayuri-muted); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:background .1s; }
.k-dots:hover{ background:var(--sayuri-bg,#f9fafb); color:var(--sayuri-text); }

.sayuri-hero-suggest-item{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;

  gap: 10px;
  padding: 12px 14px;

  border: 0;
  background: #fff;
  cursor: pointer;

  font-weight: 600;
  font-size: 14px;
}

.sayuri-hero-suggest-item:hover{
  background: #f3f4f6;
}

/* ---------------------------------------------------------
   6) (Optional / Legacy) Top hero search bar styles
   - Kept for compatibility if elements still exist
   - Reduced so it won’t fight bottom composer
   --------------------------------------------------------- */
.sayuri-hero-searchbar{
  width: 100%;
  display: flex;
  justify-content: center;
}

.sayuri-hero-plus{ display: none; }

/* Plus inside legacy top bar */
.sayuri-hero-plus-inline{
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);

  width: 36px;
  height: 36px;
  border-radius: 999px;

  border: 1px solid #e5e7eb;
  background: #fff;

  font-size: 20px;
  font-weight: 650;

  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;

  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

/* ---------------------------------------------------------
   7) Hero shopping list (CARD layout, Floating Cart-style)
   --------------------------------------------------------- */
.sayuri-hero-cards-wrap{
  width: 100%;
  max-width: 100%;

  overflow: visible;            /* ✅ no internal scrolling */
  overflow-x: visible;          /* ✅ allow tick to overflow left (-8px) */
  overflow-y: visible;          /* ✅ no internal scrolling */

  border: none;
  border-radius: 16px;
  box-shadow: none;

  background: transparent;
  max-height: none;             /* ✅ allow category to grow */
  -webkit-overflow-scrolling: auto;
}

.sayuri-hero-cards{ display:flex; flex-direction:column; }

.sayuri-hero-cat{
  width: calc(100% - 10px);
  min-height: 44px;
  height: 44px;
  padding: 0 14px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;

  background: #fef3c7;
  color: #166534;
  font-weight: 800;

  border: 1px solid #e9cc6a;
  border-radius: 25px;
  margin: 0 5px;

  font-size: 13px;
  line-height: 1.2;
  box-sizing: border-box;

  cursor: pointer;
  user-select: none;
}

.sayuri-hero-cat-caret{
  color: #166534;
  width: 18px;
  min-width: 18px;
  height: 18px;

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

  font-size: 14px;
  line-height: 1;

  transition: transform 160ms ease;
}

/* Expanded = up caret */
.sayuri-hero-cat-caret{ transform: rotate(180deg); }

/* Collapsed = right caret */
.sayuri-hero-cards-wrap.is-collapsed .sayuri-hero-cat-caret{ transform: rotate(-90deg); }

.sayuri-hero-cat-name{
  flex: 1 1 auto;
  min-width: 0;
}

.sayuri-hero-cat-action{
  flex: 0 0 auto;
  height: 34px;
  min-width: 32px;
  padding: 0;
  border-radius: 999px;
  background: #fffdf7;
  border: 1px solid rgba(20,83,45,0.18);
  box-shadow: 0 1px 4px rgba(15,23,42,0.16);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.sayuri-hero-cat-action-label{
  display: none;
  white-space: nowrap;
}

.sayuri-hero-cards-wrap.is-collapsed .sayuri-hero-cat-action{
  min-width: 122px;
  padding: 0 14px;
}

.sayuri-hero-cards-wrap.is-collapsed .sayuri-hero-cat-action-label{
  display: inline;
}

/* Collapse behavior */
.sayuri-hero-cards-wrap.is-collapsed .sayuri-hero-cards{
  display: none !important;
}

.sayuri-hero-cards-wrap.is-collapsed .sayuri-hero-cat-caret{
  transform: rotate(-90deg); /* looks like ">" */
}

/* When collapsed, make header look like a complete pill-card */
.sayuri-hero-cards-wrap.is-collapsed .sayuri-hero-cat{
  border-radius: 25px !important;   /* ✅ round all corners */
  border-bottom: 1px solid #e9cc6a; /* ✅ restore bottom border since list is hidden */
}

/* ✅ Add "air gap" only when a category starts after items (i.e., not the first one) */
.sayuri-hero-item + .sayuri-hero-cat{
  margin-top: 10px;   /* ✅ clearer category separation */
}

/* ✅ After per-category wrapper refactor, headers are inside wraps.
   Gap must be applied BETWEEN wraps (not item + header). */
.sayuri-hero-cards-wrap + .sayuri-hero-cards-wrap{
  margin-top: 18px !important;  /* adjust: 14–24px */
}

/* ✅ Prevent a double seam line between header and the first item below it */
.sayuri-hero-cat + .sayuri-hero-item{
  border-top: 0 !important;
}

.sayuri-hero-item{
  border-top: 1px solid #e5e7eb;
  padding: 12px 6px 18px 6px; /* ✅ more bottom air gap under chips */
}

/* ---------------------------------------------------------
   Inactive hero item (excluded from totals / non-editable)
   --------------------------------------------------------- */
.sayuri-hero-item.is-inactive{
  opacity: 0.55;
}

.sayuri-hero-item.is-inactive .sayuri-hero-img{
  filter: grayscale(1);
  opacity: 0.9;
}

.sayuri-hero-item.sayuri-hero-item--preparing{
  opacity: 0.62;
}
.sayuri-hero-item.sayuri-hero-item--preparing .sayuri-hero-card{
  position: relative;
}
.sayuri-hero-item.sayuri-hero-item--preparing .sayuri-hero-bodygrid,
.sayuri-hero-item.sayuri-hero-item--preparing .sayuri-hero-bodygrid *,
.sayuri-hero-item.sayuri-hero-item--preparing .sayuri-hero-actcol,
.sayuri-hero-item.sayuri-hero-item--preparing .sayuri-hero-actcol *,
.sayuri-hero-item.sayuri-hero-item--preparing .sayuri-var-chips,
.sayuri-hero-item.sayuri-hero-item--preparing .sayuri-var-chips *,
.sayuri-hero-item.sayuri-hero-item--preparing .sayuri-card-cart-hook,
.sayuri-hero-item.sayuri-hero-item--preparing .sayuri-card-cart-hook *,
.sayuri-hero-item.sayuri-hero-item--preparing .sayuri-hero-addon,
.sayuri-hero-item.sayuri-hero-item--preparing .sayuri-hero-note-btn,
.sayuri-hero-item.sayuri-hero-item--preparing .sayuri-hero-tick,
.sayuri-hero-item.sayuri-hero-item--preparing .sayuri-hero-tick-placeholder{
  pointer-events: none !important;
}
.sayuri-row-prep-overlay{
  position: absolute;
  inset: 0;
  z-index: 10020;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 12px;
  background: rgba(255,255,255,0.68);
  color: #14532d;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  pointer-events: auto;
}
.sayuri-row-prep-spinner{
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid rgba(20,83,45,0.18);
  border-top-color: #16a34a;
  animation: sayuriSpin .75s linear infinite;
}

/* Block edits: disable descendants too (stepper buttons are .sayuri-card-plus/.sayuri-card-minus) */
.sayuri-hero-item.is-inactive .sayuri-hero-bodygrid,
.sayuri-hero-item.is-inactive .sayuri-hero-bodygrid *,
.sayuri-hero-item.is-inactive .sayuri-hero-actcol,
.sayuri-hero-item.is-inactive .sayuri-hero-actcol *,
.sayuri-hero-item.is-inactive .sayuri-var-chips,
.sayuri-hero-item.is-inactive .sayuri-var-chips *,
.sayuri-hero-item.is-inactive .sayuri-card-cart-hook,
.sayuri-hero-item.is-inactive .sayuri-card-cart-hook *,
.sayuri-hero-item.is-inactive select,
.sayuri-hero-item.is-inactive input,
.sayuri-hero-item.is-inactive textarea,
.sayuri-hero-item.is-inactive .sayuri-hero-note-btn{
  pointer-events: none !important;
}

/* Keep control buttons clickable even when inactive */
.sayuri-hero-item.is-inactive .sayuri-hero-tick,
.sayuri-hero-item.is-inactive .sayuri-hero-tick-placeholder{
  pointer-events: auto !important;
  opacity: 1 !important;
}

/* Placeholder tick shows "off" state when inactive */
.sayuri-hero-tick-placeholder.is-off{
  background: #9ca3af !important;
  border-color: #9ca3af !important;
}

/* ---------------------------------------------------------
   Hero cards v2 (Mobile matches Photoshop layout)
   - 2 rows
   - image spans 2 rows
   - Row1: Name + pack | + Layanan
   - Row2: reg+sale+badges | + Rp fee
   - stepper at far right, centered, never overlaps
   --------------------------------------------------------- */

/* Card frame inside each item (Floating Cart method) */
.sayuri-hero-card{
  position: relative;                    /* ✅ anchor tick to card corner */
  display: grid;
  grid-template-columns: 68px 1fr 28px;  /* img | content | stepper (match + width) */
  grid-template-rows: 26px 26px;
  column-gap: 2px;
  row-gap: 0;
  align-items: center;
}

/* Allow tick to overflow above border */
.sayuri-hero-card{
  overflow: visible;         /* ✅ tick can sit above card border */
  border-radius: 12px;
}

/* Image wrapper: allow tick to overflow (FIX clipped tick) */
.sayuri-hero-card .sayuri-hero-imgwrap{
  position: relative;
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: center;

  width: 64px;              /* 🔧 smaller wrapper */
  height: 64px;             /* 🔧 smaller wrapper */

  margin-left: -6px;

  overflow: visible;        /* ✅ allow buttons to extend (no clipping) */
  border-radius: 0;         /* clip moved to .sayuri-hero-imgclip */

  z-index: 1;
}

/* Image clipper: crops ONLY the image, not the buttons */
.sayuri-hero-imgclip{
  width: 64px;
  height: 64px;
  overflow: hidden;
  border-radius: 12px;
}

/* Put product name above the image visually */
.sayuri-hero-r1l .sayuri-hero-pname{
  position: relative;
  z-index: 5;
}
.sayuri-stock-inline-note{
  margin-left: 4px;
  color: #dc2626;
  font-size: 9px;
  font-style: italic;
  font-weight: 400;
  line-height: 1.2;
  vertical-align: baseline;
  white-space: normal;
}

/* Image itself keeps rounded corners */
.sayuri-hero-card .sayuri-hero-img{
  width: 68px;
  height: 68px;
  border-radius: 14px;
  object-fit: cover;
  display: block;
  background: #f3f4f6;

  transform: scale(1.12);         /* ✅ crop ~10% border (zoom in) */
  transform-origin: center center;/* keep crop symmetric */
}

/* Hard guard: hero product image must never gray out on stepper actions */
.sayuri-hero-card .sayuri-hero-img{
  filter: none !important;
  opacity: 1 !important;
}

/* Tick location (inside card corner; never clipped) */
/* Action button (trash) — bottom-left (lowered to align with chips row) */
.sayuri-hero-card .sayuri-hero-tick{
  position: absolute;
  bottom: -6px; /* ✅ push lower (outside image zone) */
  left: 6px;
  top: auto;
  z-index: 9999; /* ✅ always on top */
}

/* Action button (was green tick) — now red trash */
.sayuri-hero-tick{
  width: 18px;
  height: 18px;
  border-radius: 999px;

  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  background: #ef4444;

  /* white trash-can icon (encoded SVG for reliable CSS parsing) */
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3%206h18%27/%3E%3Cpath%20d%3D%27M8%206V4h8v2%27/%3E%3Cpath%20d%3D%27M6%206l1%2016h10l1-16%27/%3E%3Cpath%20d%3D%27M10%2011v6%27/%3E%3Cpath%20d%3D%27M14%2011v6%27/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 11px 11px;
}

/* keep logic class but DO NOT reset background-image */
.sayuri-hero-tick.is-on{
  background-color: #ef4444;
}

/* ensure old tick mark never renders */
.sayuri-hero-tick:after,
.sayuri-hero-tick.is-on:after{
  content: none !important;
}

/* Placeholder tick (top-left) — UI-only */
.sayuri-hero-tick-placeholder{
  width: 16px;
  height: 16px;
  border-radius: 5px;

  border: 2px solid #16a34a;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  background: #16a34a;
}

.sayuri-hero-tick-placeholder:after{
  content: "";
  width: 7px;
  height: 4px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
  margin-top: 0;
}

/* Tick delete in-flight overlay (prevents rapid actions during cart sync; no fixed delay) */
.sayuri-tick-nuke-overlay{
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.22);
}

.sayuri-tick-nuke-overlay.is-on{
  display: flex;
}

.sayuri-tick-nuke-box{
  background: #fff;
  border-radius: 12px;
  padding: 14px 14px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.18);
}

.sayuri-tick-nuke-spinner{
  display: none !important;
}

.sayuri-tick-nuke-text{
  font-size: 12px;
  font-weight: 700;
  color: #111827;
}

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


/* Content grid: 2x2.
   Column 2 is shrink-to-content so it DOES NOT reserve empty space when addon missing. */
.sayuri-hero-bodygrid{
  grid-column: 2;
  grid-row: 1 / span 2;

  display: grid;
  grid-template-columns: minmax(0,1fr) auto;  /* keep 2 cols for compatibility */
  grid-template-rows: 24px 20px 24px;         /* name / price / chips */
  column-gap: 0;
  row-gap: 2px;                       /* ✅ create separation so rows never collide */
  align-items: center;
  min-width: 0;
  margin-left: -9px;
}

/* Row 1 left: name + pack */
.sayuri-hero-r1l{
  grid-column: 1;
  grid-row: 1;
  display: flex;
  gap: 4px;            /* ✅ +2px air gap (final tuning) */
  align-items: center;
  min-width: 0;
}

.sayuri-hero-r1l .sayuri-hero-pname{
  font-weight: 900;
  font-size: 12px;
  color: #111827;
  line-height: 24px;

  flex: 0 0 auto;        /* ✅ content-sized: DO NOT fill remaining width */
  min-width: 0;
  white-space: nowrap;   /* keep single-line title */
  overflow: visible;     /* ✅ no clipping */
  text-overflow: unset;  /* ✅ no ellipsis */

  padding-top: 1px;      /* small lift so top never feels clipped */
}

/* pack tighter so name stays visible */
.sayuri-hero-pack{
  height: 16px;
  padding: 0 2px 0 2px !important;
  border-radius: 6px;

  font-weight: 650;
  font-size: 8px !important;

  width: 55px;
  max-width: 55px;
  min-width: 0;

  line-height: 16px;
  text-align: center;
  white-space: nowrap;
  overflow: visible;

  margin-top: 0;
}

/* Row 1 right: addon dropdown (only takes space when select exists) */
.sayuri-hero-r1r{
  grid-column: 2;
  grid-row: 1;
  justify-self: start;

  display: flex;
  align-items: center;
  height: 24px;

  transform: translateX(-10px); /* ✅ actually tails the name (tight gap) */
}

/* Allow select text to visually overflow if needed (no wrap) */
.sayuri-hero-r1r{
  overflow: visible;
}

/* addon select: hard clamp width (Android select has large intrinsic width) */
.sayuri-hero-addon{
  height: 16px;
  padding: 0 2px !important;
  border-radius: 6px;

  font-weight: 650;
  font-size: 8px !important;

  width: 65px;
  max-width: 65px;
  min-width: 65px;

  line-height: 16px;
  text-align: center;
  white-space: nowrap;
  overflow: visible;

  margin-top: 0;
  margin-left: 0;
  transform: none;         /* ✅ keep only ONE positioning source (r1r) */

  flex: 0 0 auto; /* ✅ ensure it stays right after the name */
}

/* Price column sits directly left of stepper (right-aligned, increased air gap) */
.sayuri-hero-pricecol{
  grid-column: 1 / span 2;    /* span across bodygrid */
  grid-row: 2;                /* price row */
  align-self: center;

  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;  /* ✅ align left like product name */

  gap: 6px;
  min-width: 0;
  overflow: hidden;
}

/* Price line is 1 row (inline): del + ins side-by-side */
.sayuri-hero-pricecol .sayuri-hero-harga{
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;   /* ✅ align left */

  height: auto !important;                /* ✅ critical: stop overlapping row 1 */
  gap: 6px !important;                    /* spacing between del and ins */

  line-height: 20px;                      /* fits your row-2 height */
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Price must be single-line: del + ins side-by-side */
.sayuri-hero-pricecol .sayuri-hero-harga del,
.sayuri-hero-pricecol .sayuri-hero-harga ins{
  display: inline !important;
  white-space: nowrap !important;
}

/* Hero price row */
.sayuri-hero-pricecol .sayuri-sale-wrap{
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

/* Row 2 left: price line must NEVER wrap */
.sayuri-hero-r2l{
  grid-column: 1;
  grid-row: 3;   /* chips row */
  min-width: 0;
}

/* Per-line subtotal: bottom-right, aligned with chips row */
.sayuri-hero-linesub{
  grid-column: 2;
  grid-row: 3;
  justify-self: end;
  align-self: center;

  font-size: 11px;
  font-weight: 900;
  color: #111827;

  white-space: nowrap;
  opacity: 0.75;
  margin-right: 8px;
}
.sayuri-hero-item.is-inactive .sayuri-hero-linesub{
  opacity: 0.25;
}

.sayuri-hero-linesub-val{
  line-height: 1.05;
}

/* Price-pending is now an internal/diagnostic state only: no visible loading UI. */
.sayuri-price-pending .sayuri-sale-wrap ins,
.sayuri-price-pending .sayuri-hero-linesub-val,
.sayuri-price-pending .scd-vaedp-tag {
  visibility: visible;
  opacity: 1;
}

/* Price-col: offset parent for dotsHarga absolute overlay.
   Linesub: offset parent for dotsLsv absolute overlay. */
.sayuri-hero-pricecol {
  position: relative;
}

.sayuri-hero-linesub {
  position: relative;
}

.sayuri-hero-harga,
.sayuri-hero-harga .sayuri-sale-wrap{
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important; /* spacing between final price and HH tag */
  white-space: nowrap !important;
  flex-wrap: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ✅ Real gap: regular price (del) vs final price (sale-wrap) */
.sayuri-hero-harga .sayuri-sale-line{
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 6px !important; /* ✅ tuned air gap */
  white-space: nowrap !important;
}

/* Row 2 right: addon fee aligned under +Layanan */
.sayuri-hero-r2r{
  grid-column: 2;
  grid-row: 2;
  justify-self: start;
}

.sayuri-hero-addonfee{
  font-weight: 900;
  font-size: 12px;
  color: #111827;
  white-space: nowrap;
}

.sayuri-hero-r2l{
  min-width: 0;
}

.sayuri-hero-harga{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
  min-width: 0;

  font-size: 12px;     /* ✅ match pname scale */
  line-height: 1.1;
}
.sayuri-hero-harga del{
  font-size: 11px;
}
.sayuri-hero-harga ins{
  font-size: 12px;
  font-weight: 1000; /* final price only */
  color: #16a34a;    /* ✅ Sayuri green */
}
.sayuri-hero-harga ins.scd-vaedp-price,
.sayuri-hero-harga .scd-vaedp-price{
  font-size: 12px !important;
  font-weight: 1000 !important;
  color: #16a34a !important;
  line-height: inherit !important;
  opacity: 1 !important;
  text-decoration: none !important;
}
body.sayuri-app-shell .sayuri-hero-item[data-sayuri-qty0-preview="1"]
.sayuri-hero-harga .sayuri-sale-wrap ins,
body.sayuri-app-shell .sayuri-hero-item[data-sayuri-qty0-preview="1"]
.sayuri-hero-harga .scd-vaedp-price{
  opacity: 1 !important;
  color: #16a34a !important;
}

/* Fee line: aligned with "+ Layanan" column */
.sayuri-hero-addonfee{
  font-weight: 800;
  font-size: 12px;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =========================================================
   HERO LIST — B2B "Harga Grosir" collapsible tier table
   - Only visible on biggest pack
   - Same width as card content
   ========================================================= */

.sayuri-hero-grosirwrap{
  margin-top: 6px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.10);
}

.sayuri-hero-grosir-toggle{
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-start;

  background: #0f5b2f;
  color: #fff;

  border: 0;
  padding: 8px 10px;
  cursor: pointer;

  font-weight: 900;
  font-size: 12px;
  line-height: 1.1;
}

.sayuri-hero-grosir-caret{
  font-size: 12px;
  line-height: 12px;
  margin-top: -1px;
}

.sayuri-hero-grosir-panel{
  background: #fff;
  padding: 8px 10px;
}

/* Make the reused tier HTML fit the hero list nicely */
.sayuri-hero-grosir-panel .sayuri-tier-mini-table{
  width: 100% !important;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 12px;
}

.sayuri-hero-grosir-panel .sayuri-tier-mini-table th,
.sayuri-hero-grosir-panel .sayuri-tier-mini-table td{
  padding: 6px 6px;
  border: 1px solid rgba(0,0,0,.08);
  text-align: center;
  vertical-align: middle;
}

.sayuri-hero-grosir-panel .sayuri-tier-mini-table th:first-child,
.sayuri-hero-grosir-panel .sayuri-tier-mini-table td:first-child{
  text-align: left;
  width: 28%;
}

/* Stepper column */
.sayuri-hero-actcol{
  display: flex;
  justify-content: flex-end;
  align-items: center;

  margin-right: -8px; /* ✅ push whole stepper toward card edge */
}

/* =========================================================
   HERO LIST — STEPPER FINAL (PIXEL LOCKED, NO GREYED +)
   - Keep the ORIGINAL + visible and pinned
   - Stepper dropdown starts BELOW the +
   - +/- width matches the white qty area (no mismatch)
   ========================================================= */

.sayuri-hero-actcol .sayuri-card-cart-hook{
  position: relative !important;
  width: 28px !important;
  height: 40px !important;
  overflow: visible !important;
}

/* Collapsed + (always visible, never covered) */
.sayuri-hero-actcol .sayuri-card-plus{
  position: absolute !important;
  top: -8px !important;
  right: 0px !important;
  z-index: 3 !important;
  width: 28px !important;
  height: 19px !important;
  padding: 0px !important;
  box-sizing: border-box !important;
  border-radius: 6px !important;
}

/* Expanded: keep + integrated with the rail (flat bottom) */
.sayuri-hero-actcol .sayuri-card-cart-hook.sayuri-stepper-open .sayuri-card-plus{
  border-radius: 6px 6px 0 0 !important;
}

.sayuri-hero-actcol .sayuri-card-plus:active{
  transform: none !important;
}

/* Expanded stepper starts BELOW the + and forms a single connected white rail */
.sayuri-hero-actcol .sayuri-card-stepper{
  position: absolute !important;
  top: 10px !important;                 /* ✅ (19px button height - 1px overlap) + (-5px move) = 13px */
  right: 0 !important;

  width: 28px !important;
  min-width: 28px !important;

  height: auto !important;
  min-height: 48px !important;          /* ✅ rail was too tall; reduce it */

  padding: 0 !important;
  display: none;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;

  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-top: 0 !important;             /* ✅ remove seam under + */
  border-radius: 0 0 6px 6px !important;/* ✅ flat top, rounded bottom */
  overflow: hidden !important;

  box-sizing: border-box !important;

  animation: none !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Qty: flexible spacer so '-' pins to true bottom */
.sayuri-hero-actcol .sayuri-card-stepper .sayuri-stepper-qty{
  width: 100% !important;
  min-width: 0 !important;

  flex: 1 1 auto !important;
  min-height: 18px !important;     /* ✅ still comfy, but won’t inflate rail */

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

  font-size: 11px !important;
  font-weight: 900 !important;     /* stronger weight */
  line-height: 1 !important;

  margin: 0 !important;
  padding: 1px 0 !important;
}

/* Minus: pinned to bottom of rail, same size as + */
.sayuri-hero-actcol .sayuri-card-stepper .sayuri-stepper-btn.is-minus{
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;

  order: 3 !important;            /* ✅ force minus to bottom (last in column) */

  width: 100% !important;         /* ✅ full rail width (matches + rail) */
  height: 19px !important;
  padding: 0 !important;
  box-sizing: border-box !important;

  margin-top: 0 !important;       /* ✅ no longer relying on auto-margins */
  align-self: stretch !important; /* ✅ no “floating smaller button” look */

  border-radius: 0 0 6px 6px !important;
  box-shadow: none !important;
}

/* =========================================================
   HERO STEPper BONUS: slider + type-in qty (HERO ONLY)
   - Slider appears as optional tool (never blocks normal taps)
   - Fully scoped to .sayuri-hero-actcol so other steppers are untouched
   ========================================================= */

/* Slider wrapper (State 1 = opaque but functional; State 2 = active) */
.sayuri-hero-actcol .sayuri-hero-qtyslider{
  position: absolute !important;

  /* place to the LEFT of the stepper rail (+ / qty / -) */
  right: 34px !important;            /* 28px rail + small gap */
  top: calc(50% + 6px) !important; /* nudge wrapper lower */
  transform: translateY(-50%) scale(0.98) !important;

  width: 96px !important;
  height: 18px !important;

  display: none;
  align-items: center !important;
  justify-content: center !important;

  background: rgba(255,255,255,0.96) !important;
  border: 1px solid rgba(16,185,129,0.28) !important; /* Sayuri green border hint */
  border-radius: 10px !important;

  box-shadow: 0 2px 10px rgba(0,0,0,0.08) !important;
  z-index: 6 !important;

  opacity: 0.78; /* State 1: more obvious (less transparent) */
  transform-origin: center center !important;
  transition: opacity 160ms ease-out, transform 160ms ease-out;
  will-change: opacity, transform;
  pointer-events: auto;
}

.sayuri-hero-actcol .sayuri-hero-qtyslider.is-active{
  opacity: 1; /* State 2 */
}

/* Closing: smooth ease-out */
.sayuri-hero-actcol .sayuri-hero-qtyslider.is-closing{
  opacity: 0 !important;
  transform: translateY(-50%) scale(0.98) !important;
}

/* slider input */
.sayuri-hero-actcol .sayuri-hero-qtyslider input[type="range"]{
  width: 86px !important;
  height: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;

  /* Modern browsers: tint track + thumb */
  accent-color: #10b981 !important; /* Sayuri green */
}

/* WebKit fallback: ensure thumb is green (Chromium/Safari) */
.sayuri-hero-actcol .sayuri-hero-qtyslider input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: #10b981;
  border: 1px solid rgba(0,0,0,0.12);
  box-shadow: 0 1px 4px rgba(0,0,0,0.18);

  margin-top: -6px; /* micro-nudge up: thumb was slightly below track */
  cursor: pointer;
}

/* WebKit track subtle */
.sayuri-hero-actcol .sayuri-hero-qtyslider input[type="range"]::-webkit-slider-runnable-track{
  height: 4px;
  border-radius: 999px;
  background: rgba(16,185,129,0.35);
}

/* Type-in qty (replaces the qty text temporarily) */
.sayuri-hero-actcol .sayuri-card-stepper .sayuri-hero-qtyinput{
  width: 100% !important;
  height: 18px !important;
  border: 0 !important;
  outline: none !important;
  background: transparent !important;
  text-align: center !important;

  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1 !important;

  padding: 0 !important;
  margin: 0 !important;

  /* HERO ONLY: kill native number-input bevel/top line (mobile WebKit) */
  -webkit-appearance: none !important;
  appearance: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* HERO ONLY: hide native number spinners (Chrome/Edge/Safari/Firefox) */
.sayuri-hero-actcol .sayuri-card-stepper .sayuri-hero-qtyinput::-webkit-outer-spin-button,
.sayuri-hero-actcol .sayuri-card-stepper .sayuri-hero-qtyinput::-webkit-inner-spin-button{
  -webkit-appearance: none !important;
  margin: 0 !important;
}

.sayuri-hero-actcol .sayuri-card-stepper .sayuri-hero-qtyinput{
  -moz-appearance: textfield !important; /* Firefox */
  appearance: textfield !important;
}

/* Slight visual cue while user is dragging slider (preview) */
.sayuri-hero-actcol .sayuri-card-stepper.is-slider-preview .sayuri-stepper-qty{
  opacity: 0.92;
}

/* =========================================================
   HERO ONLY: make qty easier to tap on mobile (type-in)
   - current hitbox is ~27px wide, too small for thumb taps
   - expand hitbox without changing layout (padding + negative margin)
   - keep it above +/- so taps near number reliably open type-in
   ========================================================= */

.sayuri-hero-actcol .sayuri-card-stepper .sayuri-stepper-qty{
  position: relative;
  z-index: 3; /* win taps vs nearby buttons */
  padding: 10px 12px;     /* enlarge tap area */
  margin: -10px -12px;    /* keep layout unchanged */
  border-radius: 10px;    /* nice feel for hitbox */
}

/* Optional: keep +/- still easy but not stealing qty center.
   (We keep them roughly same, but ensure they don't overlay qty) */
.sayuri-hero-actcol .sayuri-card-stepper .sayuri-stepper-btn.is-minus{
  position: relative;
  z-index: 2;
}
.sayuri-hero-actcol .sayuri-card-plus{
  position: relative;
  z-index: 2;
}

/* =========================================================
   HERO ONLY: remove browser tap/focus styling + add pulse snap
   - prevents gray active fill + purple focus outline on mobile
   - uses transform/opacity only (fast)
   ========================================================= */

/* Target ONLY hero + / - buttons */
.sayuri-hero-actcol .sayuri-card-plus,
.sayuri-hero-actcol .sayuri-card-stepper .sayuri-stepper-btn.is-minus{
  -webkit-tap-highlight-color: transparent !important; /* kill gray tap highlight */
  outline: none !important;
  border-color: inherit !important;

  position: relative;
  isolation: isolate;
}

/* Remove purple focus ring */
.sayuri-hero-actcol .sayuri-card-plus:focus,
.sayuri-hero-actcol .sayuri-card-plus:focus-visible,
.sayuri-hero-actcol .sayuri-card-stepper .sayuri-stepper-btn.is-minus:focus,
.sayuri-hero-actcol .sayuri-card-stepper .sayuri-stepper-btn.is-minus:focus-visible{
  outline: none !important;
  box-shadow: none !important;
}

/* Snap feel on press (no color change) */
.sayuri-hero-actcol .sayuri-card-plus:active,
.sayuri-hero-actcol .sayuri-card-stepper .sayuri-stepper-btn.is-minus:active{
  transform: scale(0.96);
}

/* HERO ONLY: keep + button color stable on press (no gray flash) */
.sayuri-hero-actcol .sayuri-card-plus:active{
  background: #16a34a !important;
  color: #ffffff !important;
}

/* HERO ONLY: keep + stable on hover/focus too (prevents gray hover) */
.sayuri-hero-actcol .sayuri-card-plus:hover,
.sayuri-hero-actcol .sayuri-card-plus:focus,
.sayuri-hero-actcol .sayuri-card-plus:focus-visible{
  background: #16a34a !important;
  color: #ffffff !important;
  filter: none !important;
  opacity: 1 !important;
}

/* Pulse ring (floating-cart style): transform + opacity (not affected by box-shadow resets) */
@keyframes sayuriHeroStepPulse{
  0%   { transform: scale(0.86); opacity: 0.40; }
  55%  { transform: scale(1.18); opacity: 0.18; }
  100% { transform: scale(1.28); opacity: 0; }
}

/* HERO ONLY: allow pulse ring to escape the stepper rail (minus was clipped) */
.sayuri-hero-actcol .sayuri-card-stepper{
  overflow: visible !important;
}

/* Create pulse ring via ::before (safe layering; no z-index:-1) */
.sayuri-hero-actcol .sayuri-card-plus::before,
.sayuri-hero-actcol .sayuri-card-stepper .sayuri-stepper-btn.is-minus::before{
  content: "";
  position: absolute;
  inset: -10px;                /* ring radius */
  border-radius: 999px;
  background: rgba(16,185,129,0.32);
  opacity: 0;
  transform: scale(0.86);
  pointer-events: none;
}

/* Trigger pulse on press */
.sayuri-hero-actcol .sayuri-card-plus:active::before,
.sayuri-hero-actcol .sayuri-card-stepper .sayuri-stepper-btn.is-minus:active::before{
  animation: sayuriHeroStepPulse 280ms ease-out;
  opacity: 1;
}

/* Mobile-specific tightening */
@media (max-width: 560px){
  .sayuri-hero-item{
    padding: 12px 8px 18px 8px; /* ✅ more bottom air gap under chips (mobile too) */
  }

  /* ✅ Keep addon column collapsing, but reduce the inter-column gap */
  .sayuri-hero-bodygrid{
    grid-template-columns: minmax(0,1fr);
    column-gap: 0;
  }

  .sayuri-hero-r1l{
    gap: 2px;
  }

/* Pack stays compact on mobile (do not grow larger than text) */
.sayuri-hero-pack{
  width: 44px;
  max-width: 44px;
  min-width: 0;
}

  /* Remove big “Tambah” button on mobile (Photoshop uses + only) */
  .sayuri-hero-note-btn,
  .sayuri-hero-tier-toggle{
    display: none !important;
  }
}

/* HERO LIST: never show the internal stepper "+" (use original "+" as anchor) */
.sayuri-hero-actcol .sayuri-card-stepper .sayuri-stepper-btn.is-plus{
  display: none !important;
}

/* ---------------------------------------------------------
   8) Home sections (topbar, greeting, etc.)
   --------------------------------------------------------- */
.sayuri-home{ width: 100%; max-width: 100%; margin: 0; padding: 0; }


/* B2B Login modal */
.sayuri-b2b-login-modal{ position: fixed; inset: 0; z-index: 1000001; display: none; }
.sayuri-b2b-login-modal.is-open{ display: block; }
.sayuri-b2b-login-backdrop{ position: absolute; inset: 0; background: rgba(0,0,0,.45); }

.sayuri-b2b-login-dialog{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 58vh;
  background: #fff;
  border-radius: 18px 18px 0 0;
  overflow: hidden;

  display: flex;
  flex-direction: column;
  box-shadow: 0 -10px 30px rgba(15,23,42,.22);
}

.sayuri-b2b-login-header{
  height: 48px;
  background: #bbf7d0;
  color: #14532d;
  display: flex;
  align-items: center;
  padding: 0 14px;
  font-weight: 900;
}

.sayuri-b2b-login-close{
  margin-left: auto;
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: #14532d;
}

.sayuri-b2b-login-body{
  padding: 16px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* Product strip */
.sayuri-section-head{
  padding: 12px 16px 8px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.sayuri-section-title{ font-size: 16px; font-weight: 900; color: #111827; }
.sayuri-section-link{ font-size: 12px; font-weight: 900; color: #16a34a; text-decoration: none; }

.sayuri-strip{
  padding: 0 16px 12px;
  display: flex;
  gap: 12px;

  align-items: stretch;
  overflow-x: auto;
  overflow-y: hidden;

  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;

  touch-action: auto;
  overscroll-behavior-y: auto;
}

/* All products grid (3 columns standard) */
.sayuri-grid{
  padding: 0 12px 20px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

@media (min-width: 900px){
  .sayuri-grid{
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
  .sayuri-grid .sayuri-card{
    max-width: 320px;
    margin: 0 auto;
  }
}

/* Grid must not inherit slider width rules */
.sayuri-grid-item{ max-width: none !important; flex: unset !important; width: 100% !important; }
.sayuri-grid .sayuri-card-wrap{ flex: unset !important; max-width: none !important; width: 100% !important; }
.sayuri-grid-head{ margin-top: 4px; }
body.sayuri-app-shell #sayuri_cat_1418.sayuri-section-head.sayuri-grid-head{ margin-top: 28px; }

/* ---------------------------------------------------------
   9) B2B View Toggle + Table View
   --------------------------------------------------------- */
.sayuri-view-toggle{
  padding: 0 16px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  width: fit-content;
  margin: 0 auto;

  transform: scale(0.70);
  transform-origin: center top;
}

/* icon button */
.sayuri-view-icon{
  width: 42px;
  height: 42px;

  border-radius: 14px;
  border: 1px solid #e5e7eb;
  background: #fff;

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  box-shadow: 0 10px 18px rgba(0,0,0,.08);

  color: #16a34a; /* base */
}

/* Force SVG visible */
.sayuri-view-icon svg{
  width: 30% !important;
  height: 30% !important;
  display: block !important;
}

/* Bullet-proof SVG visibility (themes may reset paths) */
.sayuri-view-toggle .sayuri-view-icon svg,
.sayuri-view-toggle .sayuri-view-icon svg *{
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Ensure currentColor works */
.sayuri-view-toggle .sayuri-view-icon{ color: #111827 !important; }
.sayuri-view-toggle .sayuri-view-icon.is-active{ color: #16a34a !important; }

/* Make icon fill square more */
.sayuri-view-toggle .sayuri-view-icon svg{
  width: 30px !important;
  height: 30px !important;
}

/* Explicit per icon type */
.sayuri-view-toggle .sayuri-icon-grid path{
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sayuri-view-toggle .sayuri-icon-list path{
  fill: currentColor !important;
  stroke: none !important;
}

/* active icon */
.sayuri-view-icon.is-active{
  border-color: #16a34a;
  box-shadow: 0 12px 22px rgba(0,0,0,.12);
  color: #16a34a;
}

/* center track */
.sayuri-view-track{
  position: relative;
  width: 78px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #fff;
  cursor: pointer;
  box-shadow: 0 10px 18px rgba(0,0,0,.08);
}

.sayuri-view-thumb{
  position: absolute;
  top: 4px;
  left: 4px;

  width: 34px;
  height: 34px;
  border-radius: 999px;

  background: #16a34a;
  box-shadow: 0 12px 26px rgba(0,0,0,.20);
  transition: transform .18s ease;
}

.sayuri-view-toggle[data-sayuri-view-active="table"] .sayuri-view-thumb{
  transform: translateX(36px);
}

/* B2B table */
.sayuri-b2b-table-wrap{ padding: 0 12px 20px; }

.sayuri-b2b-table-scroll{
  overflow: auto;
  -webkit-overflow-scrolling: touch;

  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 12px 26px rgba(0,0,0,.10);
}

.sayuri-b2b-table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 900px;
}

.sayuri-b2b-table thead th{
  position: sticky;
  top: 0;

  background: #166534;
  color: #fff;

  font-weight: 900;
  font-size: 12px;
  text-align: left;

  padding: 10px 10px;
  z-index: 2;
}

.sayuri-b2b-table td{
  padding: 10px 10px;
  border-top: 1px solid #e5e7eb;
  vertical-align: middle;
  font-size: 12px;
  color: #111827;
}

.sayuri-b2b-cat td{
  background: #f3f4f6;
  font-weight: 900;
  color: #111827;
  border-top: none;
}

.sayuri-b2b-row-wrap{
  display: flex;
  flex-direction: column;
  gap: 6px;

  position: relative;   /* anchor for .sayuri-card-cart-hook */
  padding-right: 52px;  /* reserve space for +/stepper */
  min-height: 44px;
}
.sayuri-b2b-row-wrap .pname{ font-weight: 900; }

.sayuri-b2b-row-wrap .sayuri-card-cart-hook{
  position: absolute;
  right: 8px;
  top: 8px;
}

.sayuri-b2b-pack-select{
  width: 100%;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  font-weight: 900;
  background: #fff;
}

.sayuri-b2b-promo{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 4px 8px;
  border-radius: 999px;

  font-weight: 900;
  font-size: 11px;

  border: 1px solid #e5e7eb;
  background: #fff;
}
.sayuri-b2b-promo--hh{ border-color: #16a34a; }

.sayuri-b2b-tier-price,
.sayuri-b2b-price-normal,
.sayuri-b2b-price-promo{
  font-weight: 900;
  white-space: nowrap;
}

/* hidden chips exist only so existing JS stepper can read selected vid */
.sayuri-b2b-hidden-chips{ display: none !important; }

/* ---------------------------------------------------------
   10) Cards (slider + grid shared)
   --------------------------------------------------------- */
.sayuri-card-wrap{
  flex: 0 0 31.5%;
  max-width: 31.5%;
  scroll-snap-align: start;
}

@media (min-width: 900px){
  .sayuri-card-wrap{ flex: 0 0 260px; max-width: 260px; }
}

.sayuri-card-wrap .sayuri-card{ width: 100%; }

.sayuri-card{
  position: relative;

  background: #fff;
  border-radius: 16px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 12px 26px rgba(0,0,0,.10);

  padding: 6px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  aspect-ratio: 1 / 1;
  min-height: 0;
}

/* B2C cards: free layout (avoid 1:1 collision) */
.sayuri-card:not(.sayuri-card--has-tier){
  aspect-ratio: auto !important;
  height: auto !important;
  min-height: unset !important;
  justify-content: flex-start !important;
  padding-bottom: 12px !important;
}

/* B2C chips: not overlay */
.sayuri-card:not(.sayuri-card--has-tier) .sayuri-var-chips{
  position: relative !important;
  bottom: auto !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  margin-top: 14px !important;
  z-index: 1;
}


.sayuri-legacy-catalog-gate{display:flex;flex-direction:column;align-items:center;gap:6px;padding:18px 16px 10px;}
.sayuri-legacy-catalog-toggle{appearance:none;border:1px solid rgba(22,101,52,.28);border-radius:999px;background:rgba(255,255,255,.94);color:#166534;box-shadow:0 6px 18px rgba(0,0,0,.08);padding:10px 18px;font:inherit;font-weight:800;line-height:1.2;cursor:pointer;touch-action:manipulation;}
.sayuri-legacy-catalog-toggle[aria-busy="true"]{opacity:.68;cursor:wait;}
.sayuri-legacy-catalog-status{min-height:16px;font-size:12px;color:#6b7280;}
#sayuri_legacy_catalog_panel[hidden]{display:none!important;}

/* Image */
.sayuri-card-thumb-wrap{
  position: relative;
  flex: 0 0 auto;
  aspect-ratio: 1 / 1;
  width: 100%;
}

.sayuri-card-thumb{
  border-radius: 14px;
  overflow: hidden;
  display: block;
  height: 100%;
}

.sayuri-card-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Title/price fade */
.sayuri-card-title,
.sayuri-card-price-row{
  flex-shrink: 0;
  transition: opacity 180ms ease-out;
}

.sayuri-card-wrap.is-var-switching .sayuri-card-title,
.sayuri-card-wrap.is-var-switching .sayuri-card-price-row,
.sayuri-card-wrap.is-var-switching .sayuri-tier-mini{
  opacity: 0.72;
}

/* Variation chips */
.sayuri-var-chips{
  margin-top: 2px;      /* move chips UP */
  padding-top: 4px;     /* keep breathing room */
  overflow: visible;
}

.sayuri-chip-row{
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  overflow: visible;
  padding: 0;
  align-items: stretch;
  justify-content: flex-start;
}

.sayuri-chip{
  scroll-snap-align: start;
  position: relative;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;

  border: 1px solid #e5e7eb;
  border-width: 1px !important;
  box-sizing: border-box !important;

  background: #fff;
  border-radius: 10px;

  cursor: pointer;
  flex: 0 0 48px;
  width: 48px;
  min-width: 48px;
  text-align: center;
  overflow: visible;

  height: 21px;
  min-height: 21px;
  padding: 4px 3px 3px;

  transition: background-color 180ms ease-out, opacity 180ms ease-out;
}

.sayuri-chip.is-selected{
  border-color: #16a34a;
  background: #ecfdf5;
  outline: 3px solid rgba(22,163,74,.22);
  outline-offset: 0;
  box-shadow: none;
}

.sayuri-chip-label{
  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 9px;        /* increased */
  font-weight: 800;
  color: #111827;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  width: 100%;
  line-height: 1;
}

.sayuri-chip-qty{
  position: absolute;
  top: -6px;
  right: -6px;

  background: #111827;
  color: #fff;

  border-radius: 999px;

  font-size: 7px;
  font-weight: 900;
  line-height: 1;

  min-width: 13px;
  height: 13px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0 4px;
  pointer-events: none;

  box-shadow: 0 6px 14px rgba(0,0,0,.18);
}

/* Chip qty badge pulse (all variation chips) */
@keyframes sayuriChipQtyPulse{
  0%   { transform: scale(0.86); opacity: 0.38; }
  55%  { transform: scale(1.20); opacity: 0.18; }
  100% { transform: scale(1.30); opacity: 0; }
}

/* Halo ring behind the black badge */
.sayuri-chip-qty::before{
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 999px;
  background: rgba(16,185,129,0.30);
  opacity: 0;
  transform: scale(0.86);
  pointer-events: none;
}

/* Trigger on value change */
.sayuri-chip-qty.is-pulse::before{
  animation: sayuriChipQtyPulse 280ms ease-out;
  opacity: 1;
}

/* ---------------------------------------------------------
   11) Stepper / plus
   --------------------------------------------------------- */
.sayuri-card-cart-hook{
  position: absolute;
  right: 8px;
  top: 8px;
  z-index: 6;

  pointer-events: auto;
  touch-action: manipulation;

  width: 36px;
  height: 36px;
  overflow: visible;
}

.sayuri-card-cart-hook *{ pointer-events: auto; }

.sayuri-card-cart-hook::before{
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 999px;
  pointer-events: auto;
  background: transparent;
}

.sayuri-card-cart-hook .sayuri-card-plus,
.sayuri-card-cart-hook .sayuri-card-stepper{
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
}

/* Collapsed + */
.sayuri-card-plus{
  position: absolute;
  top: 0;
  right: 0;

  width: 19px;
  height: 19px;

  padding: 0 !important;
  line-height: 1 !important;

  border-radius: 6px;
  border: none;

  background: #16a34a;
  color: #fff;

  font-size: 13px;
  font-weight: 900;

  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;

  box-shadow: 0 3px 8px rgba(0,0,0,.22);
}

/* Stepper pill */
.sayuri-card-stepper{
  position: absolute;
  top: 0;
  right: 0;

  height: 20px;
  min-width: 68px;

  display: none;
  align-items: center;
  justify-content: center;

  background: rgba(255,255,255,0.92);
  border: 1px solid #e5e7eb;
  border-radius: 6px;

  box-shadow: 0 3px 8px rgba(0,0,0,.14);
  padding: 0 14px;
  box-sizing: border-box;

  overflow: visible;
  transform-origin: right center;
  will-change: transform, opacity;
}

/* Expand animation */
@keyframes sayuriStepperIn{
  0%   { opacity: 0; transform: scaleX(0.92); }
  100% { opacity: 1; transform: scaleX(1); }
}

.sayuri-card-stepper[style*="display: flex"],
.sayuri-card-stepper[style*="display:flex"]{
  animation: sayuriStepperIn 160ms cubic-bezier(.2,.8,.2,1) both;
}

/* Expanded +/- */
.sayuri-card-stepper .sayuri-stepper-btn.is-plus,
.sayuri-card-stepper .sayuri-stepper-btn.is-minus{
  position: absolute;
  top: 0;

  width: 19px;
  height: 19px;

  padding: 0 !important;
  line-height: 1 !important;

  border-radius: 6px;
  border: none;

  background: #16a34a;
  color: #fff;

  font-size: 13px;
  font-weight: 900;

  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;

  z-index: 2;
  box-shadow: 0 3px 8px rgba(0,0,0,.22);
}

.sayuri-card-stepper .sayuri-stepper-btn.is-plus{ right: 0; }
.sayuri-card-stepper .sayuri-stepper-btn.is-minus{ left: 0; }

.sayuri-card-stepper .sayuri-stepper-btn.is-plus::before,
.sayuri-card-stepper .sayuri-stepper-btn.is-minus::before{
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 999px;
}

/* Qty */
.sayuri-card-stepper .sayuri-stepper-qty{
  display: flex;
  align-items: center;
  justify-content: center;

  min-width: 22px;
  padding: 0 4px;

  font-size: 9.5px;
  font-weight: 900;
  color: #111827;
  line-height: 1;
}

/* ---------------------------------------------------------
   12) Title / price (cards)
   --------------------------------------------------------- */
.sayuri-card-title{
  position: absolute;
  left: 12px;
  bottom: 34px;
  right: 12px;

  font-size: 10px;
  font-weight: 750;
  color: #111827;

  line-height: 1.15;
  margin: 0;
}

.sayuri-card-price-row{
  position: absolute;
  left: 12px;
  bottom: 12px;
  right: 12px;
  margin: 0;
  display: block;
}

.sayuri-card-price{
  padding: 0 4px;
}

.sayuri-card:not(.sayuri-card--has-tier) .sayuri-card-title{
  position: static !important;
  margin-top: 10px !important;
  margin-bottom: 6px !important;
  padding: 0 4px !important;
}

.sayuri-card:not(.sayuri-card--has-tier) .sayuri-card-price-row{
  position: static !important;
  margin-top: 0 !important;
  padding: 0 4px !important;
}

.sayuri-card-price-text{
  font-size: 10px;
  font-weight: 400;
  color: #16a34a;

  display: block;
  margin: 0;
  padding: 0;

  white-space: nowrap;
  max-width: 100%;
  overflow: visible;
}

.sayuri-card-price-text ins{ text-decoration: none; font-weight: 400; }
.sayuri-card-price-text del{ opacity: 0.6; font-weight: 600; }

.sayuri-sale-wrap{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding-right: 0;
  max-width: 100%;
}

/* ---------------------------------------------------------
   13) Tier table (mini)
   --------------------------------------------------------- */
.sayuri-tier-mini{ width: 100%; padding: 0; }

.sayuri-tier-mini-table{
  width: 100%;
  table-layout: fixed;
  box-sizing: border-box;
  border-collapse: collapse;
  border-spacing: 0;
  border: 0;
  border-radius: 0;
  background: #fff;
}

.sayuri-tier-mini-table thead th{
  width: 50%;
  background: #16a34a;
  color: #ffffff;
  font-weight: 800;

  padding: 9px 8px;
  line-height: 1.1;
  min-height: 34px;

  text-align: center;
  letter-spacing: 0.02em;

  white-space: nowrap !important;
  word-break: keep-all !important;
  font-size: 9.5px;
}

.sayuri-tier-mini-table tbody td{
  width: 50%;
  padding: 7px 8px;
  text-align: center;

  border-top: 1px solid #e5e7eb;
  white-space: nowrap;

  font-weight: 700;
  line-height: 1.1;
  font-size: 9.5px;

  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";

  transition: background-color 180ms ease-out, opacity 180ms ease-out;
}

.sayuri-tier-mini-table tbody tr:nth-child(odd) td{ background: #ffffff; }
.sayuri-tier-mini-table tbody tr:nth-child(even) td{ background: #ecfdf5; }

/* Active tier row */
.sayuri-card-wrap.sayuri-tier-enabled .sayuri-tier-mini-table tbody tr.is-active td{
  color: #064e3b;
  background: #86efac !important;
  text-shadow: 0 0 0 rgba(0,0,0,0.01);
  border-left: 0 !important;
  border-right: 0 !important;
}

/* Single-outline active row */
.sayuri-card-wrap.sayuri-tier-enabled .sayuri-tier-mini-table tbody tr.is-active{
  position: relative;
}
.sayuri-card-wrap.sayuri-tier-enabled .sayuri-tier-mini-table tbody tr.is-active::after{
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(6,78,59,0.16);
}

@keyframes sayuriTierFlash{
  0%   { filter: brightness(1.04); }
  100% { filter: brightness(1.00); }
}
.sayuri-card-wrap.sayuri-tier-enabled .sayuri-tier-mini-table tbody tr.is-active.sayuri-tier-flash td{
  animation: sayuriTierFlash 220ms ease-out;
}

.sayuri-card-wrap.sayuri-tier-enabled .sayuri-tier-mini-table tbody tr.is-active td{
  box-shadow: none !important;
}

/* Qty column centering */
.sayuri-tier-mini-table tbody td:first-child{
  text-align: center !important;
  font-variant-numeric: tabular-nums;
}

/* Shift divider left */
.sayuri-tier-mini-table thead th:first-child,
.sayuri-tier-mini-table tbody td:first-child{ width: 42% !important; }
.sayuri-tier-mini-table thead th:last-child,
.sayuri-tier-mini-table tbody td:last-child{ width: 58% !important; }

/* Press feedback */
.sayuri-tier-mini-table tbody td{
  transition: filter 140ms ease-out, transform 140ms ease-out;
}
.sayuri-tier-mini-table tbody tr:active td{ filter: brightness(0.97); }
.sayuri-tier-mini-table tbody tr.is-active:active td{ filter: brightness(0.95); }
.sayuri-tier-mini-table tbody tr:active td{ transform: translateY(0.5px); }

/* Lock unit label width ONLY on Harga/kg header */
.sayuri-tier-mini-table thead th::after{ content: none !important; }
.sayuri-tier-mini-table thead th:last-child::after{
  content: "";
  display: inline-block;
  width: 2ch;
}

/* ---------------------------------------------------------
   14) BULLETPROOF B2B tier cards (no :has())
   --------------------------------------------------------- */
.sayuri-card--has-tier{
  aspect-ratio: auto !important;
  justify-content: flex-start !important;
  padding-bottom: 0 !important;
}

/* keep image area square */
.sayuri-card--has-tier .sayuri-card-thumb-wrap{
  aspect-ratio: 1 / 1 !important;
  position: relative;
  z-index: 0;
}

.sayuri-card--has-tier .sayuri-card-thumb,
.sayuri-card--has-tier .sayuri-card-thumb img{
  position: relative;
  z-index: 0;
}

/* Move content up into image’s lower white area */
.sayuri-card--has-tier .sayuri-card-title,
.sayuri-card--has-tier .sayuri-card-price-row,
.sayuri-card--has-tier .sayuri-grosir-line,
.sayuri-card--has-tier .sayuri-tier-table--in-card,
.sayuri-card--has-tier .sayuri-var-chips{
  position: relative;
  z-index: 2;
  transform: translateY(-18px);
}

/* Title/price flow */
.sayuri-card--has-tier .sayuri-card-title{
  position: static !important;
  padding: 0 4px !important;
  text-align: left !important;
  width: 100% !important;
  align-self: flex-start !important;
  margin-top: 6px !important;
  margin-bottom: 2px !important;
}

.sayuri-card--has-tier .sayuri-card-price-row{
  position: static !important;
  padding: 0 4px !important;
  text-align: left !important;
  width: 100% !important;
  align-self: flex-start !important;
  margin-top: 0 !important;
  margin-bottom: 2px !important;
}

.sayuri-card--has-tier .sayuri-card-price-row *{ text-align: left !important; }

/* B2B price blocks */
.sayuri-card--has-tier .sayuri-card-price-text{
  display: block;
  line-height: 1.25;
}
.sayuri-card--has-tier .sayuri-card-price-text del{ opacity: 0.75; }
.sayuri-card--has-tier .sayuri-card-price-text ins{
  font-style: normal;
  font-weight: 400;
  text-decoration: none;
}
.sayuri-card--has-tier.is-wsx-wholesale-active .sayuri-card-price-text ins{
  text-decoration: line-through;
  opacity: 0.7;
}

/* Grosir line (reserved height) */
.sayuri-grosir-line{
  margin-top: 0;
  margin-bottom: 2px;
  padding: 0 4px !important;

  font-size: 10px;
  font-weight: 750;
  color: #111827;
  line-height: 1.15;

  min-height: 24px;
  display: block !important;
  visibility: visible !important;
}
.sayuri-grosir-line:empty::before{ content: "a0"; }

.sayuri-grosir-label{ font-weight: 900; }
.sayuri-grosir-price{ color: #16a34a; font-weight: 750 !important; }

/* Full-bleed tier wrapper inside card */
.sayuri-tier-table--in-card{
  margin-top: 6px !important;
  margin-bottom: 0 !important;
  padding: 0 !important;

  border-radius: 0 !important;
  box-shadow: none;
  overflow: visible;

  margin-left: -6px !important;
  margin-right: -6px !important;
}

.sayuri-tier-table--in-card table{
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}

.sayuri-tier-table--in-card th,
.sayuri-tier-table--in-card td{
  padding: 4px 6px;
  border-bottom: 1px solid #e5e7eb;
  text-align: left;
}

/* Zero gap: chips touch table + flush to card bottom */
.sayuri-card--has-tier .sayuri-var-chips{
  margin-top: -8px !important;
  margin-bottom: -6px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Hide WholesaleX inline label inside price HTML */
body.sayuri-app-shell .sayuri-card-price-text .wholesalex-wholesale-price,
body.sayuri-app-shell .sayuri-card-price-text .wholesalex_wholesale_price,
body.sayuri-app-shell .sayuri-card-price-text .wholesale-price,
body.sayuri-app-shell .sayuri-card-price-text .wsx-wholesale-price{
  display: none !important;
}

/* ---------------------------------------------------------
   15) B2B meta modal
   --------------------------------------------------------- */
.sayuri-b2b-meta-modal{ position: fixed; inset: 0; z-index: 999999; display: none; }
.sayuri-b2b-meta-modal.is-open{ display: block; }
.sayuri-b2b-meta-backdrop{ position: absolute; inset: 0; background: rgba(0,0,0,.45); }

.sayuri-b2b-meta-dialog{
  position: absolute;
  left: 0; right: 0; bottom: 0;

  height: 92vh;
  background: #fff;
  border-radius: 18px 18px 0 0;

  overflow: hidden;
  display: flex;
  flex-direction: column;

  box-shadow: 0 -10px 30px rgba(15,23,42,.22);
}

.sayuri-b2b-meta-header{
  height: 48px;
  background: #bbf7d0;
  color: #14532d;

  display: flex;
  align-items: center;

  padding: 0 14px;
  font-weight: 900;

  border-radius: 18px 18px 0 0;
}

.sayuri-b2b-meta-close{
  margin-left: auto;
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: #14532d;
}

.sayuri-b2b-meta-body{
  padding: 16px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.sayuri-steps-viewport{ overflow: hidden; width: 100%; }
.sayuri-steps-track{ display: flex; transition: transform .28s ease; will-change: transform; }
.sayuri-step{ flex: 0 0 100%; width: 100%; }
.sayuri-step-inner{ padding: 0 2px; }

.sayuri-step-title{
  font-size: 16px;
  font-weight: 900;
  color: #111827;
  margin: 6px 0 10px;
}

.sayuri-b2b-meta-body label{
  font-weight: 900;
  font-size: 12px;
  color: #374151;
  display: block;
  margin-top: 12px;
}

.sayuri-b2b-meta-input{
  width: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 12px;

  font-size: 14px;
  outline: none;
  background: #f3f4f6;
}

.sayuri-b2b-meta-input:focus{
  background: #fff;
  border-color: #16a34a;
  box-shadow: 0 0 0 3px rgba(22,163,74,.18);
}

.sayuri-inline-error{ font-size: 12px; color: #dc2626; margin-top: 6px; display: none; }
.sayuri-inline-error.is-show{ display: block; }
.sayuri-inline-success{ font-size: 12px; color: #16a34a; margin-top: 6px; display: none; font-weight: 900; }
.sayuri-inline-success.is-show{ display: block; }

/* Password toggle */
.sayuri-pass-wrap{ position: relative; width: 100%; }
.sayuri-pass-wrap .sayuri-b2b-meta-input{ padding-right: 110px; }

.sayuri-pass-toggle{
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);

  height: 34px;
  min-width: 90px;

  border: 1px solid #e5e7eb;
  background: #fff;

  border-radius: 999px;
  padding: 6px 10px;

  font-weight: 900;
  font-size: 12px;
  cursor: pointer;
}

.sayuri-strength{ display: none; margin-top: 10px; }
.sayuri-strength.is-show{ display: block; }
.sayuri-strength-bar{ height: 8px; border-radius: 999px; background: #e5e7eb; overflow: hidden; }
.sayuri-strength-fill{ height: 100%; width: 0%; background: #dc2626; transition: width .15s ease; }

.sayuri-strength-label{
  margin-top: 6px;
  font-size: 12px;
  font-weight: 900;
  color: #6b7280;
  display: flex;
  justify-content: space-between;
}

.sayuri-caps-warning{ font-size: 12px; color: #b45309; display: none; margin-top: 6px; }
.sayuri-caps-warning.is-show{ display: block; }

.sayuri-step-actions{
  display: flex;
  gap: 10px;
  margin-top: 18px;
  padding-bottom: 8px;
}

.sayuri-step-actions button{
  flex: 1;
  height: 52px;
  border-radius: 999px;
  padding: 0 16px;

  font-weight: 900;
  font-size: 16px;

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

  line-height: 1;
  text-align: center;

  cursor: pointer;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #111827;
}

.sayuri-step-actions button.primary{
  border: none;
  background: #16a34a;
  color: #fff;
}

.sayuri-step-actions button:disabled{
  opacity: .45;
  cursor: not-allowed;
}

/* WhatsApp bubble */
.sayuri-b2b-wa{
  position: fixed;
  right: 18px;
  bottom: 110px;

  width: 56px;
  height: 56px;
  border-radius: 999px;

  background: #25D366;
  color: #fff;

  display: flex;
  align-items: center;
  justify-content: center;

  text-decoration: none;
  font-size: 22px;
  line-height: 1;

  box-shadow: 0 12px 28px rgba(0,0,0,.25);
  z-index: 1000000;
}

/* Math modal */
.sayuri-math-modal{ position: fixed; inset: 0; z-index: 1000000; display: none; }
.sayuri-math-modal.is-open{ display: block; }
.sayuri-math-backdrop{ position: absolute; inset: 0; background: rgba(0,0,0,.45); }

.sayuri-math-dialog{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);

  width: min(520px, 70vw);
  background: #fff;

  border-radius: 16px;
  border: 1px solid #e5e7eb;

  box-shadow: 0 18px 40px rgba(0,0,0,.25);
  padding: 14px;
}

.sayuri-math-title{ font-weight: 900; font-size: 14px; margin-bottom: 10px; }
.sayuri-math-q{ font-weight: 900; font-size: 16px; color: #166534; margin-bottom: 10px; }
.sayuri-math-actions{ display: flex; gap: 10px; margin-top: 10px; }

.sayuri-math-btn{
  flex: 1;
  border-radius: 999px;
  padding: 12px 14px;
  font-weight: 900;
  border: 1px solid #e5e7eb;
  cursor: pointer;
}
.sayuri-math-btn.primary{ border: none; background: #16a34a; color: #fff; }
.sayuri-math-btn.ghost{ background: #fff; color: #374151; }

/* Success modal */
.sayuri-success-modal{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  display: none;

  z-index: 1000002;
  align-items: center;
  justify-content: center;
}
.sayuri-success-modal.is-open{ display: flex; }

.sayuri-success-card{
  background: #fff;
  border-radius: 18px;
  padding: 24px;
  text-align: center;
  width: min(380px, 90vw);
  box-shadow: 0 20px 50px rgba(0,0,0,.25);
}
.sayuri-success-icon{ font-size: 42px; margin-bottom: 10px; }
.sayuri-success-title{ font-weight: 900; font-size: 18px; }
.sayuri-success-text{ margin-top: 6px; color: #64748b; font-weight: 700; }

/* Pack picker modal (themed replacement for native select on mobile) */
.sayuri-pack-modal{ position: fixed; inset: 0; z-index: 1000003; display: none; }
.sayuri-pack-modal.is-open{ display: flex; align-items: center; justify-content: center; padding: 16px; }
.sayuri-pack-backdrop{ position: absolute; inset: 0; background: rgba(0,0,0,.45); }

.sayuri-pack-sheet{
  position: relative;
  left: auto;
  bottom: auto;
  transform: none;

  width: min(520px, 70vw);
  background: #fff;
  border-radius: 16px;
  overflow: hidden;

  box-shadow: 0 20px 50px rgba(0,0,0,.28);
  border: 1px solid rgba(0,0,0,.06);
}

.sayuri-pack-head{
  background: #0f5b2f; /* dark green */
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
}
.sayuri-pack-title{ font-weight: 900; font-size: 13px; letter-spacing: .2px; }
.sayuri-pack-x{
  appearance: none;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 18px;
  line-height: 18px;
  padding: 6px 8px;
  cursor: pointer;
  border-radius: 10px;
}
.sayuri-pack-x:hover{ background: rgba(255,255,255,.14); }

.sayuri-pack-list{ background: #fff; }
.sayuri-pack-item{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  padding: 14px 14px;
  border: 0;
  background: #fff;
  cursor: pointer;

  font-weight: 900;
  font-size: 16px;
  color: #111827;
}
.sayuri-pack-item + .sayuri-pack-item{ border-top: 1px solid rgba(0,0,0,.08); }


/* Addon picker modal (themed replacement for native addon select on mobile) */
.sayuri-addon-modal{ position: fixed; inset: 0; z-index: 1000003; display: none; align-items: center; justify-content: center; padding: 16px; }
.sayuri-addon-modal.is-open{ display: flex; }
.sayuri-addon-backdrop{ position: absolute; inset: 0; background: rgba(0,0,0,.45); }

.sayuri-addon-sheet{
  position: relative;
  width: min(520px, 70vw);
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,.28);
  border: 1px solid rgba(0,0,0,.06);
}

.sayuri-addon-head{
  background: #0f5b2f;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
}
.sayuri-addon-title{
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sayuri-addon-title-line1{
  font-weight: 800;
  font-size: 12px;
  opacity: .95;
}

.sayuri-addon-title-line2{
  font-weight: 900;
  font-size: 14px;
}
.sayuri-addon-x{
  appearance:none;border:0;background:transparent;color:#fff;
  font-size:18px;line-height:18px;padding:6px 8px;cursor:pointer;border-radius:10px;
}
.sayuri-addon-x:hover{ background: rgba(255,255,255,.14); }

.sayuri-addon-list{ background:#fff; }
.sayuri-addon-item{
  width: 100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 14px 14px;
  border: 0;
  background: #fff;
  cursor: pointer;
  font-weight: 900;
  font-size: 15px;
  color: #111827;
}
.sayuri-addon-item + .sayuri-addon-item{ border-top: 1px solid rgba(0,0,0,.08); }

.sayuri-addon-radio{
  width: 18px;
  height: 18px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 2px rgba(15,91,47,.45);
  background: #fff;
  position: relative;
  flex: 0 0 auto;
}
.sayuri-addon-item.is-active .sayuri-addon-radio:after{
  content:"";
  position:absolute;
  inset:4px;
  border-radius:999px;
  background:#0f5b2f;
}

.sayuri-pack-radio{
  width: 18px;
  height: 18px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 2px rgba(15,91,47,.45);
  background: #fff;
  position: relative;
  flex: 0 0 auto;
}
.sayuri-pack-item.is-active .sayuri-pack-radio{
  box-shadow: inset 0 0 0 2px rgba(15,91,47,.0);
  background: #fff;
}
.sayuri-pack-item.is-active .sayuri-pack-radio:after{
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 999px;
  background: #0f5b2f;
}

.sayuri-pack-item.is-active .sayuri-pack-radio:after{
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 999px;
  background: #0f5b2f;
}

/* Hidden iframe */
.sayuri-b2b-hidden-iframe{
  position: fixed;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  left: -9999px;
  top: -9999px;
}
.sayuri-b2b-hidden-frame{ width: 1px; height: 1px; border: 0; }

/* ---------------------------------------------------------
   16) Small screens + responsive rules
   --------------------------------------------------------- */
@media (min-width: 900px){
  .sayuri-hero-table-wrap{ max-height: none; }
}

/* ---------------------------------------------------------
   17) Animations
   --------------------------------------------------------- */
/* Card HH pulse (scale) */
@keyframes sayuri-hh-pulse{
  0%   { opacity: 1;    transform: scale(0.72); }
  50%  { opacity: 0.65; transform: scale(0.75); }
  100% { opacity: 1;    transform: scale(0.72); }
}

/* Hero badge HH pulse (opacity only — avoids transform conflict) */
@keyframes sayuri-hh-pulse-lite{
  0%   { opacity: 1; }
  50%  { opacity: 0.65; }
  100% { opacity: 1; }
}

/* ---------------------------------------------------------
   18) SVG hardening (kept)
   --------------------------------------------------------- */
.sayuri-view-toggle .sayuri-view-icon svg{
  overflow: visible !important;
  clip-path: none !important;
  mask: none !important;
  filter: none !important;
}
.sayuri-view-toggle .sayuri-view-icon svg *{
  clip-path: none !important;
  mask: none !important;
  filter: none !important;
}

/* ================================
   Disable internal scroll on shopping list
   ================================ */
#sayuri_hero_list{
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
  overflow-y: visible !important;
}

/* ================================
   Disable internal scroll on shopping list
   ================================ */
#sayuri_hero_list{
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
  overflow-y: visible !important;
}

/* HARD DISABLE LEGACY BOTTOM FOOTER/NAV
   Canonical Block Action Footer primitives are excluded because their
   visibility is owned by the shared Block Action Footer runtime. */
body.sayuri-app-shell footer:not([data-sayuri-block-primitive-type="block-action-footer"]),
body.sayuri-app-shell [class*="footer"]:not([data-sayuri-block-primitive-type="block-action-footer"]),
body.sayuri-app-shell [id*="footer"]:not([data-sayuri-block-primitive-type="block-action-footer"]),
body.sayuri-app-shell [class*="bottom-nav"],
body.sayuri-app-shell [class*="bottombar"],
body.sayuri-app-shell [class*="bottom-bar"] {
  display: none !important;
}

/* ── sayuriDialog Engine v1 — dialog classes ── */
.sayuri-dialog-overlay{
  position: fixed; left: 0; top: 0; right: 0; bottom: 0;
  z-index: 1000006; display: none;
  align-items: center; justify-content: center;
  padding: 16px; background: rgba(0,0,0,.45);
}
.sayuri-dialog-box{
  position: relative; width: min(340px,88vw);
  background: #fff; border-radius: 14px; overflow: hidden;
  box-shadow: 0 8px 40px rgba(0,0,0,.18);
  border: 1px solid #f0f0f0;
}
.sayuri-dialog-bar{
  width: 4px; background: var(--accent-text,#166534);
  position: absolute; left: 0; top: 0; bottom: 0;
}
.sayuri-dialog-inner{
  padding: 4px 16px 18px; margin-left: 4px;
}
.sayuri-dialog-line{
  width: 44px; height: 3.5px;
  background: var(--accent-text,#166534);
  border-radius: 99px; opacity: .85;
  margin: 0 auto 12px;
}
.sayuri-dialog-pill{
  display: inline-flex; align-items: center;
  height: 26px; font-size: 10px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent-text,#166534);
  background: var(--accent-bg,#fef3c7);
  border: 1px solid var(--accent-border,#e9cc6a);
  border-radius: 6px; padding: 0 9px;
}
.sayuri-dialog-icon{
  width: 26px; height: 26px; border-radius: 7px;
  flex-shrink: 0; margin-left: 8px;
  background: var(--accent-bg,#fef3c7);
  border: 1px solid var(--accent-border,#e9cc6a);
  display: flex; align-items: center; justify-content: center;
}
.sayuri-dialog-head{
  display: flex; align-items: center;
  justify-content: space-between; margin-bottom: 10px;
}
.sayuri-dialog-msg{
  font-size: 12.5px; color: #374151;
  line-height: 1.55; margin: 0 0 5px;
}
.sayuri-dialog-sub{
  font-size: 11px; color: #9ca3af;
  line-height: 1.4; font-style: italic; margin: 0 0 4px;
}
.sayuri-dialog-input{
  width: 100%; box-sizing: border-box;
  border: 1.5px solid var(--accent-border,#e9cc6a);
  border-radius: 9px; padding: 8px 11px;
  font-size: 12px; outline: none;
  background: rgba(254,243,199,0.55); color: #111;
  margin-top: 11px; font-family: inherit;
}
.sayuri-dialog-input:focus{
  border-color: var(--accent-text,#166534);
}
.sayuri-dialog-actions{
  display: flex; gap: 8px; margin-top: 16px;
}
.sayuri-dialog-btn-cancel{
  flex: 1; background: none;
  border: 1px solid #e5e7eb; color: #6b7280;
  font-size: 12px; font-weight: 600;
  padding: 7px 0; border-radius: 9px;
  cursor: pointer; font-family: inherit;
}
.sayuri-dialog-btn-ok{
  flex: 1; background: var(--accent-text,#166534);
  border: none; color: #fff;
  font-size: 12px; font-weight: 700;
  padding: 7px 0; border-radius: 9px;
  cursor: pointer; font-family: inherit;
}


/* P9: manager Favorit logical views inside canonical #sayuri_kp_sheet */
.sayuri-kp-manager-focus{display:flex;gap:8px;padding:2px 0 4px;}
.sayuri-kp-focus-btn{flex:1;border:1px solid var(--sayuri-border);border-radius:999px;background:var(--sayuri-white);padding:8px 12px;font-weight:700;cursor:pointer;}
.sayuri-kp-focus-btn.active{border-color:var(--sayuri-green);background:var(--sayuri-green-light,#f0fdf4);}
.sayuri-kp-favorit-card{cursor:default;}
.sayuri-kp-favorit-heart{color:#b7791f;border-color:#d6b56c;background:#fff8e6;}
.sayuri-kp-favorit-empty{padding:22px 12px;text-align:center;color:var(--sayuri-muted);font-size:13px;}
.sayuri-kp-favorit-actions-body,.sayuri-kp-favorit-target-wrap{padding:16px;display:flex;flex-direction:column;gap:14px;}
.sayuri-kp-favorit-action-head{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--sayuri-border);border-radius:14px;background:#fff8e6;}
.sayuri-kp-favorit-action-heart{font-size:24px;color:#b7791f;}
.sayuri-kp-favorit-action-name{font-weight:800;color:var(--sayuri-text);}
.sayuri-kp-favorit-action-meta,.sayuri-kp-favorit-target-meta{font-size:12px;color:var(--sayuri-muted);margin-top:2px;}
.sayuri-kp-favorit-actions-list{display:flex;flex-direction:column;gap:8px;}
.sayuri-kp-favorit-actions-list button,.sayuri-kp-favorit-target-item{width:100%;padding:12px 14px;border:1px solid var(--sayuri-border);border-radius:12px;background:var(--sayuri-white);text-align:left;font-weight:700;cursor:pointer;}
.sayuri-kp-favorit-actions-list button.danger{color:var(--sayuri-red,#dc2626);}
.sayuri-kp-favorit-target-body{display:flex;flex-direction:column;gap:8px;}
.sayuri-kp-favorit-target-item{display:flex;flex-direction:column;gap:2px;}
.sayuri-kp-favorit-target-item:disabled{opacity:.6;cursor:wait;}
.sayuri-kp-favorit-target-name{color:var(--sayuri-text);}
.sayuri-kp-favorit-target-empty{padding:18px 10px;text-align:center;color:var(--sayuri-muted);}
#sayuri_kp_favorit_target_msg{min-height:18px;color:var(--sayuri-muted);}