/* ===================================================================
   Desi Downtown — CLEAN APP UI (v2 CLEAN) | conflict-safe | .ddp-scope
   (Same design/values — cleaned + safe improvements + FAB icon CSS)
   =================================================================== */

/* ---------------------------------------------------------------
   GLOBAL VARS (FAB is often OUTSIDE .ddp-scope, so define here too)
   --------------------------------------------------------------- */
:root{
  --ddp-ease:cubic-bezier(.2,.85,.2,1);
  --ddp-fast:120ms;
  --ddp-med:180ms;

  /* ✅ YOUR CART FAB SVG (CSS background) */
  --ddp-fab-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><circle fill='%232b2b2b' cx='255.997' cy='255.998' r='255.997'/><path fill='%233b3b3b' d='M510.424,226.995C511.528,236.453,512,246.227,512,256c0,139.98-112.394,253.793-251.901,255.999 L115.547,367.449v-11.035h21.123l-14.975-17.813l-17.498-152.119h226.522l5.99-8.67l65.418-58.798l108.138,108.138L510.424,226.995z'/><path fill='%23ffb81f' d='M175.606,365.873c0,0.63,0.158,1.419,0.158,2.207c0,11.822-9.301,21.438-20.808,21.438 s-20.808-9.616-20.808-21.438c0-0.788,0-1.419,0.158-2.207h10.404c-0.158,0.63-0.158,1.419-0.158,2.207 c0,5.99,4.729,10.72,10.562,10.72c5.833,0,10.561-4.887,10.561-10.72c0-0.788,0-1.419-0.158-2.207h10.404H175.606z M327.251,365.873 c0,0.63,0.158,1.419,0.158,2.207c0,11.822-9.301,21.438-20.808,21.438s-20.808-9.616-20.808-21.438c0-0.788,0-1.419,0.158-2.207 h10.404c-0.158,0.63-0.158,1.419-0.158,2.207c0,5.99,4.729,10.72,10.561,10.72c5.833,0,10.561-4.887,10.561-10.72 c0-0.788,0-1.419-0.158-2.207h10.404H327.251z'/><path fill='%23F7F7F8' d='M115.547,356.414h215.014l-18.759-17.498v-0.315H121.695v-7.567l-17.498-144.552h0.63h9.143h18.917 h9.616h14.818h9.616h14.818h9.616h14.818h9.616h14.818h9.616h14.818h9.616h14.818h9.616h14.818h9.616h14.818h9.616h16.709 c1.261-12.137,3.468-13.084,9.773-18.443l56.434-47.606c5.359-2.523,9.458,7.724,2.523,11.822l-56.906,47.763l-20.339,156.219 l25.537,22.227c2.995,2.68,3.625,9.301-0.946,9.301H114.917v-11.35h0.63V356.414z M314.01,320l15.449-123.744H314.01V320z M304.394,328.828V196.256h-14.818v132.572H304.394z M279.96,328.828V196.256h-14.817v132.572H279.96z M255.527,328.828V196.256 h-14.818v132.572H255.527z M231.093,328.828V196.256h-14.818v132.572H231.093z M206.66,328.828V196.256h-14.818v132.572H206.66z M182.226,328.828V196.256h-14.818v132.572H182.226z M157.793,328.828V196.256h-14.818v132.572H157.793z M133.36,328.828V196.256 h-17.813l15.921,132.572h1.734H133.36z'/><path fill='%23ffb81f' d='M368.76,141.691l25.262-21.536c2.96-2.523,6.893-2.895,8.786-0.83l3.428,3.738 c1.893,2.065,1.03,5.784-1.93,8.307l-25.262,21.536c-2.96,2.523-6.893,2.895-8.786,0.829l-3.428-3.738 C364.937,147.933,365.801,144.213,368.76,141.691z'/></svg>");
}

/* ---------------- Base / Tokens ---------------- */
.ddp-scope, .ddp-scope *, .ddp-scope *::before, .ddp-scope *::after{ box-sizing:border-box; }
.ddp-scope{
  --ddp-text:#111;
  --ddp-bg:#fff;
  --ddp-soft:#f6f7f8;
  --ddp-border:#e9ecef;

  --ddp-r12:12px;
  --ddp-r16:16px;

  --ddp-head-h:56px;
  --ddp-foot-h:82px;
  --ddp-safe:env(safe-area-inset-bottom,0px);

  --ddp-ease:cubic-bezier(.2,.85,.2,1);
  --ddp-fast:120ms;
  --ddp-med:180ms;

  --ddp-ctl:40px;
  --ddp-ctl-sm:36px;
  --ddp-ctl-border:#e6e9ee;
  --ddp-ctl-bg:#fff;
  --ddp-ctl-hover:#f6f7f8;

  --ddp-danger:#e11d48;

  /* YOUR trash SVG as mask */
  --ddp-trash-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20shape-rendering%3D%27geometricPrecision%27%20text-rendering%3D%27geometricPrecision%27%20image-rendering%3D%27optimizeQuality%27%20fill-rule%3D%27evenodd%27%20clip-rule%3D%27evenodd%27%20viewBox%3D%270%200%20445%20511.78%27%3E%3Cpath%20fill%3D%27%23000%27%20fill-rule%3D%27nonzero%27%20d%3D%27M122.53%20496.61h199.94c14.62%200%2027.64-5.93%2037.21-15.49%209.88-9.89%2016.13-23.63%2016.75-38.73l12.62-305.34H55.95l12.62%20305.33c.62%2015.11%206.87%2028.85%2016.75%2038.74%209.57%209.56%2022.59%2015.49%2037.21%2015.49zm93.6-295.06c0-4.19%203.4-7.59%207.58-7.59%204.19%200%207.59%203.4%207.59%207.59v230.57c0%204.18-3.4%207.58-7.59%207.58-4.18%200-7.58-3.4-7.58-7.58V201.55zm85.67.03c-.01-4.17%203.36-7.57%207.52-7.59%204.17-.01%207.57%203.36%207.59%207.53l1.38%20230.56a7.558%207.558%200%200%201-7.52%207.59c-4.17.01-7.56-3.36-7.58-7.52l-1.39-230.57zm-175.09%200a7.558%207.558%200%200%201%207.52-7.59%207.565%207.565%200%200%201%207.58%207.53l1.39%20230.56c.01%204.17-3.36%207.57-7.52%207.59-4.17.01-7.57-3.36-7.59-7.52l-1.38-230.57zM36.88%2061.56h109.24V47.48c0-13.07%205.35-24.94%2013.95-33.54C168.66%205.34%20180.54%200%20193.6%200h57.8c13.06%200%2024.94%205.34%2033.53%2013.94%208.6%208.6%2013.95%2020.47%2013.95%2033.54v14.08h109.24c10.15%200%2019.37%204.15%2026.05%2010.83l.44.47C441.03%2079.51%20445%2088.53%20445%2098.44v31.02c0%204.19-3.4%207.59-7.58%207.59h-33.24l-12.64%20305.93c-.79%2019.06-8.68%2036.39-21.14%2048.86-12.32%2012.31-29.08%2019.94-47.93%2019.94H122.53c-18.85%200-35.61-7.63-47.93-19.94-12.46-12.47-20.35-29.81-21.14-48.86L40.8%20137.05H7.58c-4.18%200-7.58-3.4-7.58-7.59V98.44C0%2088.31%204.15%2079.1%2010.83%2072.42c6.68-6.71%2015.9-10.86%2026.05-10.86zm371.24%2015.16H36.88c-5.97%200-11.4%202.45-15.33%206.39a21.542%2021.542%200%200%200-6.39%2015.33v23.44H429.84V98.44c0-5.81-2.3-11.1-6.03-15.01l-.36-.32c-3.93-3.94-9.36-6.39-15.33-6.39zM251.4%2015.16h-57.8c-8.88%200-16.96%203.64-22.81%209.5-5.86%205.86-9.5%2013.94-9.5%2022.82v14.08h122.42V47.48c0-8.88-3.64-16.96-9.5-22.82-5.85-5.86-13.93-9.5-22.81-9.5z%27%2F%3E%3C%2Fsvg%3E");

  /* Fallback icon (no mask support) */
  --ddp-trash-fallback: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20fill%3D%27%23e11d48%27%20d%3D%27M9%203h6l1%202h4v2H4V5h4l1-2Zm-1%206h2v10H8V9Zm4%200h2v10h-2V9Zm4%200h2v10h-2V9Z%27%2F%3E%3C%2Fsvg%3E");

  color:var(--ddp-text);
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",Arial,sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  isolation:isolate;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}

.ddp-scope a{ color:inherit; text-decoration:none; }
.ddp-scope a:hover{ text-decoration:underline; }
.ddp-scope button,.ddp-scope input,.ddp-scope select{ font:inherit; color:inherit; }

/* Remove number spinners */
.ddp-scope input[type=number]::-webkit-outer-spin-button,
.ddp-scope input[type=number]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.ddp-scope input[type=number]{ -moz-appearance:textfield; }

/* Kill theme pseudo-icons */
.ddp-scope .ddp-btn::before,.ddp-scope .ddp-btn::after,
.ddp-scope .ddp-qty button::before,.ddp-scope .ddp-qty button::after,
.ddp-scope .ddp-close::before,.ddp-scope .ddp-close::after,
.ddp-scope .ddp-tab::before,.ddp-scope .ddp-tab::after{ content:none!important; }
.ddp-scope svg{ transform:none!important; }

@media (prefers-reduced-motion: reduce){
  .ddp-scope *{ transition:none!important; animation:none!important; }
}

/* ===================================================================
   Product Grid / Cards
   =================================================================== */
.ddp-scope .ddp-grid{ display:grid; gap:16px; margin:18px 0; }
.ddp-scope .ddp-cols-2{ grid-template-columns:repeat(2,1fr); }
.ddp-scope .ddp-cols-3{ grid-template-columns:repeat(3,1fr); }
.ddp-scope .ddp-cols-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:900px){ .ddp-scope .ddp-cols-4{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:640px){ .ddp-scope .ddp-cols-3,.ddp-scope .ddp-cols-4{ grid-template-columns:repeat(2,1fr); } }

.ddp-scope .ddp-card{
  border:1px solid var(--ddp-border);
  border-radius:var(--ddp-r16);
  overflow:hidden;
  background:var(--ddp-bg);
  display:flex; flex-direction:column;
  transition:transform var(--ddp-fast) var(--ddp-ease), box-shadow var(--ddp-fast) var(--ddp-ease);
  will-change:transform;
}
@media (hover:hover){
  .ddp-scope .ddp-card:not(.ddp-unavailable):hover{
    transform:translateY(-3px);
    box-shadow:0 12px 32px rgba(0,0,0,.1);
  }
}
.ddp-scope .ddp-thumb{ background:transparent!important; box-shadow:none!important; }
.ddp-scope .ddp-thumb img{
  width:100%; height:210px; object-fit:cover; display:block;
  background:transparent!important; box-shadow:none!important;
}
.ddp-scope .ddp-info{ padding:10px 12px; text-align:center; }
.ddp-scope .ddp-title{ font-size:16px; margin:0 0 4px; font-weight:700; }
.ddp-scope .ddp-price{ margin-bottom:8px; font-weight:600; opacity:.9; }

.ddp-scope .ddp-order{
  width:100%;
  padding:10px 12px;
  background:#111; color:#fff;
  border:0;
  border-radius:999px;
  font-weight:900;
  cursor:pointer;
  transition:transform var(--ddp-fast) var(--ddp-ease), opacity var(--ddp-fast) var(--ddp-ease);
}
.ddp-scope .ddp-order:active{ transform:scale(.98); }

/* ===================================================================
   UNIFIED FAB — single centered bottom pill (location + cart)
   =================================================================== */
#ddp-unified-fab{
  position:fixed !important;
  bottom:calc(var(--ddp-fab-offset, 20px) + env(safe-area-inset-bottom,0px)) !important;
  left:50% !important;
  transform:translateX(-50%) !important;

  display:flex !important;
  align-items:stretch !important;

  background:#111 !important;
  color:#fff !important;

  border-radius:999px !important;
  border:1px solid rgba(255,255,255,.08) !important;

  box-shadow:
    0 2px 4px rgba(0,0,0,.1),
    0 8px 28px rgba(0,0,0,.3),
    0 20px 56px rgba(0,0,0,.15) !important;

  z-index:2147483002 !important;
  overflow:hidden !important;

  max-width:min(440px, calc(100vw - 32px)) !important;

  animation:ddp-uf-in 380ms cubic-bezier(.34,1.56,.64,1) both !important;
}
@keyframes ddp-uf-in{
  from{ opacity:0; transform:translateX(-50%) translateY(22px) scale(.86); }
  to{   opacity:1; transform:translateX(-50%) translateY(0)    scale(1);   }
}

/* Location / Mode button (left) */
#ddp-unified-fab .ddp-uf-loc{
  display:flex !important;
  align-items:center !important;
  gap:7px !important;
  padding:13px 16px !important;
  border:0 !important; outline:0 !important;
  background:transparent !important;
  color:inherit !important;
  cursor:pointer !important;
  flex:1 1 auto !important;
  min-width:0 !important;
  -webkit-tap-highlight-color:transparent !important;
  touch-action:manipulation !important;
  transition:background 100ms ease !important;
  -webkit-appearance:none !important; appearance:none !important;
}
#ddp-unified-fab .ddp-uf-loc:hover{ background:rgba(255,255,255,.07) !important; }
#ddp-unified-fab .ddp-uf-loc:active{ background:rgba(255,255,255,.14) !important; }
#ddp-unified-fab .ddp-uf-loc:focus-visible{
  outline:2px solid rgba(255,255,255,.45) !important;
  outline-offset:-2px !important;
}

/* Pin icon */
#ddp-unified-fab .ddp-uf-pin{
  width:14px !important; height:14px !important;
  flex-shrink:0 !important;
  display:block !important;
  opacity:.55 !important;
}

/* Mode text (updated by prefs JS) */
#ddp-unified-fab .ddp-uf-mode-text{
  font-size:12.5px !important;
  font-weight:700 !important;
  line-height:1.2 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  max-width:200px !important;
  min-width:0 !important;
  font-family:inherit !important;
}

/* Divider */
#ddp-unified-fab .ddp-uf-sep{
  width:1px !important;
  background:rgba(255,255,255,.14) !important;
  flex-shrink:0 !important;
  margin:9px 0 !important;
  align-self:stretch !important;
}

/* Cart button (right) */
#ddp-unified-fab #ddp-fab,
#ddp-unified-fab .ddp-uf-cart{
  display:flex !important;
  align-items:center !important;
  gap:7px !important;
  padding:13px 18px !important;
  border:0 !important; outline:0 !important;
  background:transparent !important;
  color:inherit !important;
  cursor:pointer !important;
  flex-shrink:0 !important;
  -webkit-tap-highlight-color:transparent !important;
  touch-action:manipulation !important;
  transition:background 100ms ease !important;
  -webkit-appearance:none !important; appearance:none !important;

  /* reset any legacy FAB styles */
  position:static !important;
  width:auto !important; height:auto !important;
  box-shadow:none !important;
  border-radius:0 !important;
}
#ddp-unified-fab #ddp-fab:hover,
#ddp-unified-fab .ddp-uf-cart:hover{ background:rgba(255,255,255,.07) !important; }
#ddp-unified-fab #ddp-fab:active,
#ddp-unified-fab .ddp-uf-cart:active{ background:rgba(255,255,255,.14) !important; }
#ddp-unified-fab #ddp-fab:focus-visible{
  outline:2px solid rgba(255,255,255,.45) !important;
  outline-offset:-2px !important;
}

/* Kill any inherited ::before on #ddp-fab inside the pill */
#ddp-unified-fab #ddp-fab::before{ content:none !important; display:none !important; }

/* Cart SVG icon */
#ddp-unified-fab .ddp-uf-cart-icon,
#ddp-unified-fab #ddp-fab svg{
  width:17px !important; height:17px !important;
  flex-shrink:0 !important;
  display:block !important;
}

/* Count badge */
#ddp-unified-fab #ddp-count,
#ddp-unified-fab .ddp-uf-count{
  /* Override global badge positioning */
  position:static !important;
  top:auto !important; right:auto !important;
  transform:none !important;

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

  min-width:19px !important;
  height:19px !important;
  padding:0 5px !important;

  font-size:10.5px !important;
  font-weight:800 !important;
  line-height:1 !important;
  font-variant-numeric:tabular-nums !important;

  background:#e11d48 !important;
  color:#fff !important;
  border:0 !important;
  border-radius:999px !important;
  box-shadow:0 2px 8px rgba(225,29,72,.5) !important;
}
#ddp-unified-fab #ddp-count:empty,
#ddp-unified-fab .ddp-uf-count:empty{ display:none !important; }

/* Requirement note: explicit delivery minimum indicator */
#ddp-uf-dot{
  width:7px !important; height:7px !important;
  border-radius:50% !important;
  flex-shrink:0 !important;
  display:none !important;
  align-self:center !important;
}
#ddp-unified-fab .ddp-uf-min-note{
  display:none !important;
  align-items:center !important;
  justify-content:center !important;
  flex:0 0 auto !important;
  max-width:104px !important;
  min-width:0 !important;
  padding:3px 7px !important;
  border:1px solid rgba(245,158,11,.42) !important;
  border-radius:999px !important;
  background:rgba(245,158,11,.16) !important;
  color:#fde68a !important;
  font-size:10.5px !important;
  font-weight:900 !important;
  line-height:1 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  font-family:inherit !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08) !important;
}
#ddp-unified-fab.ddp-min-pending .ddp-uf-min-note:not([hidden]){
  display:inline-flex !important;
}

/* Delivery minimum progress bar (thin line at pill bottom) */
#ddp-uf-prog{
  position:absolute !important;
  bottom:0 !important;
  left:14px !important; right:14px !important;
  height:3px !important;
  background:rgba(255,255,255,.1) !important;
  border-radius:999px !important;
  overflow:hidden !important;
}
#ddp-uf-prog[hidden]{ display:none !important; }
#ddp-uf-bar{
  position:absolute !important;
  inset:0 auto 0 0 !important;
  width:0% !important;
  border-radius:999px !important;
  background:linear-gradient(90deg,#10b981,#34d399) !important;
  transition:width .35s ease, background .35s ease !important;
}
#ddp-uf-prog.is-pending #ddp-uf-bar{
  background:linear-gradient(90deg,#f59e0b,#fbbf24) !important;
}
#ddp-uf-prog.is-loading #ddp-uf-bar{
  background-image:linear-gradient(45deg,rgba(255,255,255,.35) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.35) 50%,rgba(255,255,255,.35) 75%,transparent 75%,transparent) !important;
  background-size:16px 16px !important;
  animation:ddp-bar-stripes .8s linear infinite !important;
}
@keyframes ddp-bar-stripes{
  from{ background-position:0 0; }
  to{   background-position:16px 0; }
}

/* Ping on add-to-cart: scale the whole pill */
@keyframes ddp-uf-ping{
  0%,100%{ transform:translateX(-50%) scale(1); }
  40%{     transform:translateX(-50%) scale(1.055); }
  70%{     transform:translateX(-50%) scale(.97); }
}
#ddp-unified-fab.ddp-ping{
  animation:ddp-uf-ping .44s cubic-bezier(.2,.85,.2,1) !important;
}

.ddp-fab-footer-dock{
  width:100% !important;
  flex:0 0 100% !important;
  grid-column:1 / -1 !important;
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  padding:22px 16px 18px !important;
  margin:0 !important;
  box-sizing:border-box !important;
  position:relative !important;
  z-index:4 !important;
}
#ddp-unified-fab.ddp-in-footer{
  position:relative !important;
  left:auto !important;
  bottom:auto !important;
  transform:none !important;
  margin:0 auto !important;
  animation:none !important;
  z-index:4 !important;
}

/* Very small phones */
@media (max-width:360px){
  #ddp-unified-fab .ddp-uf-mode-text{ max-width:100px !important; }
  #ddp-unified-fab .ddp-uf-min-note{ max-width:82px !important; padding-left:6px !important; padding-right:6px !important; }
  #ddp-unified-fab .ddp-uf-loc{ padding:13px 11px !important; gap:5px !important; }
  #ddp-unified-fab #ddp-fab{ padding:13px 13px !important; }
}

/* ===================================================================
   Overlay + Modal (desktop center, mobile bottom sheet)
   =================================================================== */
.ddp-scope .ddp-overlay,
#ddp-overlay{
  position:fixed; inset:0;
  background:rgba(0,0,0,.52);
  z-index:2147483646 !important;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity 140ms ease, visibility 0s linear 140ms;
}
.ddp-scope .ddp-overlay.ddp-open,
#ddp-overlay.ddp-open{
  opacity:1; visibility:visible; pointer-events:auto;
  transition:opacity 140ms ease;
}

/* FINAL merged values */
.ddp-scope .ddp-modal,
#ddp-modal{
  position:fixed; left:50%; top:50%;
  width:min(1080px,94vw);
  min-height:420px;

  display:flex !important;
  flex-direction:column !important;

  height:auto !important;
  max-height:92vh !important;

  background:var(--ddp-bg);
  border:1px solid var(--ddp-border);
  border-radius:18px;

  overflow:auto !important;
  overflow-x:hidden !important;

  box-shadow:0 14px 40px rgba(0,0,0,.25);
  z-index:2147483647 !important;

  opacity:0; visibility:hidden; pointer-events:none;
  transform:translate3d(-50%,-47%,0) scale(.97);
  transition:opacity 140ms var(--ddp-ease), transform 140ms var(--ddp-ease), visibility 0s linear 140ms;
  will-change:transform,opacity;
}
.ddp-scope .ddp-modal.ddp-open,
#ddp-modal.ddp-open{
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translate3d(-50%,-50%,0) scale(1);
  transition:opacity 140ms var(--ddp-ease), transform 140ms var(--ddp-ease);
}

/* Mobile bottom-sheet */
@media (max-width:820px){
  .ddp-scope .ddp-modal,
  #ddp-modal{
    left:0; top:auto; bottom:0;
    width:100vw;
    min-height:unset;
    border-radius:20px 20px 0 0;
    transform:translate3d(0,100%,0);
    transition:opacity 160ms ease, transform 220ms cubic-bezier(.32,.72,0,1), visibility 0s linear 220ms;
  }
  .ddp-scope .ddp-modal.ddp-open,
  #ddp-modal.ddp-open{
    transform:translate3d(0,0,0);
    transition:opacity 160ms ease, transform 220ms cubic-bezier(.32,.72,0,1);
  }
}
@supports (height:100dvh){
  .ddp-scope .ddp-modal,
  #ddp-modal{ max-height:92dvh !important; }
}

.ddp-noscroll{ overflow:hidden!important; }

/* ===================================================================
   Header
   =================================================================== */
.ddp-scope .ddp-m-head{
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px;
  min-height:var(--ddp-head-h);

  background:var(--ddp-bg);
  border-bottom:1px solid var(--ddp-border);

  position:sticky !important;
  top:0 !important;
  z-index:60 !important;
}
.ddp-scope .ddp-m-head *{ position:relative; z-index:1; }

.ddp-scope .ddp-tabs{ display:flex; gap:8px; align-items:center; margin:auto; }
.ddp-scope .ddp-tab{
  display:flex; align-items:center; gap:8px;
  padding:8px 12px;
  border-radius:999px;
  font-weight:900;
  cursor:pointer;
  background:transparent;
  border:1px solid var(--ddp-border);
  transition:background-color var(--ddp-fast) var(--ddp-ease), transform var(--ddp-fast) var(--ddp-ease);
}
@media (hover:hover){ .ddp-scope .ddp-tab:hover{ background:var(--ddp-soft); } }
.ddp-scope .ddp-tab.active{ background:#111; border-color:#111; color:#fff; }

#ddp-cap{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  background:#111; color:#fff;
  border-radius:999px;
  padding:8px 14px;
  font-weight:900;
  line-height:1;
  pointer-events:none;
  font-size:16px;
}
@media (max-width:640px){ #ddp-cap{ font-size:15px; } }

.ddp-scope .ddp-close,
.ddp-scope .ddp-close:hover,
.ddp-scope .ddp-close:focus,
.ddp-scope .ddp-close:active{
  width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  border-radius:999px;
  cursor:pointer;

  background:transparent!important;
  border:1px solid var(--ddp-border)!important;
  box-shadow:none!important;
  filter:none!important;
  opacity:1!important;

  color:transparent!important; font-size:0!important; line-height:0!important;
  text-decoration:none!important;

  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 6L6 18M6 6l12 12' stroke='%23111' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important; background-position:center!important; background-size:16px 16px!important;

  transition:transform var(--ddp-fast) var(--ddp-ease), background-color var(--ddp-fast) var(--ddp-ease)!important;
}
.ddp-scope .ddp-close:active{ transform:scale(.96); }

/* ===================================================================
   Scroll Areas
   =================================================================== */
.ddp-scope .ddp-m-body{
  flex:1 1 auto;
  min-height:0;

  overflow:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;

  display:grid;
  grid-template-columns:.95fr 1.05fr;
  gap:14px;

  padding:12px;
  padding-bottom:16px !important;

  scroll-padding-bottom:calc(var(--ddp-foot-h) + var(--ddp-safe) + 14px);
}
@media (min-width:821px){
  .ddp-scope .ddp-modal,
  #ddp-modal{
    overflow:hidden !important;
  }
  .ddp-scope .ddp-m-body{
    overflow:hidden;
    grid-template-columns:minmax(0,.96fr) minmax(360px,1.04fr);
  }
  .ddp-scope .ddp-left,
  .ddp-scope .ddp-right{
    min-width:0;
    min-height:0;
    overflow:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    scrollbar-width:thin;
  }
  .ddp-scope .ddp-left{ padding-right:2px; }
  .ddp-scope .ddp-right{ padding-left:2px; padding-right:4px; }
}
@media (max-width:820px){
  .ddp-scope .ddp-m-body{ grid-template-columns:1fr; gap:12px; padding:12px; padding-bottom:16px !important; }
}

@supports(selector(:has(*))){
  .ddp-scope .ddp-m-body:has(.ddp-opt:empty),
  .ddp-scope .ddp-m-body:has(#ddp-check-list:empty){ grid-template-columns:1fr !important; }
  .ddp-scope .ddp-m-body:has(.ddp-opt:empty) .ddp-opt,
  .ddp-scope .ddp-m-body:has(#ddp-check-list:empty) .ddp-opt{ display:none !important; }
}

/* ===================================================================
   Gallery
   =================================================================== */
.ddp-scope .ddp-gal{ display:grid; gap:8px; }
.ddp-scope .ddp-hero{
  width:100%;
  height:clamp(240px, 32vh, 300px);
  border-radius:var(--ddp-r16);
  overflow:hidden;
  background:transparent !important;
  border:1px solid var(--ddp-border);
  box-shadow:none !important;
}
.ddp-scope .ddp-hero img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  background:transparent!important;
  box-shadow:none!important;
}
.ddp-scope .ddp-thumbs{ display:grid; grid-template-columns:repeat(6,1fr); gap:8px; }
.ddp-scope .ddp-thumbs img{
  width:100%;
  height:56px;
  object-fit:cover;
  border-radius:10px;
  cursor:pointer;
  background:transparent!important;
  box-shadow:none!important;
  border:1px solid var(--ddp-border);
  transition:transform var(--ddp-fast) var(--ddp-ease);
}
.ddp-scope .ddp-thumbs img:active{ transform:scale(.98); }
@media (max-width:640px){
  .ddp-scope .ddp-hero{ height:260px; }
  .ddp-scope .ddp-thumbs{ grid-template-columns:repeat(5,1fr); }
}

.ddp-scope .ddp-title-head{ font-size:19px; font-weight:900; margin:0 0 6px; line-height:1.18; }
@media (max-width:640px){ .ddp-scope .ddp-title-head{ font-size:18px; } }

#ddp-desc{
  display:block !important;
  margin-top:8px;
  color:#222;
  font-size:14px;
  line-height:1.55;
  word-break:break-word;
  max-width:100%;
}

/* ===================================================================
   Options / Groups
   =================================================================== */
.ddp-scope .ddp-opt{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.ddp-scope .ddp-opt h4{ margin:0 0 8px; font-size:13.5px; font-weight:900; line-height:1.2; }
.ddp-scope .grp{
  border:1px solid var(--ddp-border);
  border-radius:14px;
  padding:11px;
  margin-bottom:0;
  background:var(--ddp-bg);
  box-shadow:none;
}
.ddp-scope .ddp-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px;
  padding:7px 8px;
  min-height:44px;
  border-radius:10px;
  transition:background-color var(--ddp-fast) var(--ddp-ease);
}
@media (hover:hover){ .ddp-scope .ddp-row:hover{ background:var(--ddp-soft); } }
.ddp-scope .ddp-sub{ opacity:.7; font-size:11px; line-height:1.2; }
.ddp-scope #ddp-radio-list .ddp-group{
  border:0;
  border-radius:0;
  padding:0;
  margin:0;
}
.ddp-scope #ddp-radio-list .ddp-group h4{ margin:0 0 8px !important; }
.ddp-scope #ddp-radio-list .ddp-row label,
.ddp-scope #ddp-check-list .ddp-row label{
  min-width:0;
  flex:1 1 auto;
}
.ddp-scope #ddp-radio-list .ddp-row label span:not(.ddp-sub),
.ddp-scope #ddp-check-list .ddp-row label span:not(.ddp-sub){
  font-size:14.5px;
  line-height:1.2;
}
.ddp-scope #ddp-check-list{
  display:flex;
  flex-direction:column;
  gap:4px;
}

/* ===================================================================
   Qty + Buttons
   =================================================================== */
.ddp-scope .ddp-qty{
  display:inline-flex; align-items:center; gap:0;
  border:1.5px solid var(--ddp-ctl-border);
  border-radius:999px;
  background:#fff;
  overflow:hidden;
  height:var(--ddp-ctl);
}
.ddp-scope .ddp-qty button{
  width:var(--ddp-ctl); height:var(--ddp-ctl);
  display:flex; align-items:center; justify-content:center;
  font-size:22px; font-weight:700;
  color:#111 !important;
  background:var(--ddp-ctl-bg) !important;
  border:0 !important;
  cursor:pointer;
  box-shadow:none !important;
  filter:none !important;
  padding:0 !important;
  line-height:0 !important;
  transition:background-color var(--ddp-fast) var(--ddp-ease), transform var(--ddp-fast) var(--ddp-ease);
  -webkit-appearance:none; appearance:none;
}
@media (hover:hover){ .ddp-scope .ddp-qty button:hover{ background:var(--ddp-ctl-hover)!important; } }
.ddp-scope .ddp-qty button:active{ transform:scale(.96); }

.ddp-scope .ddp-qty input{
  width:54px; min-width:54px; height:var(--ddp-ctl);
  padding:0; margin:0;
  text-align:center;
  border:0;
  box-shadow:none;
  background:#fff;
  color:#111;
  font-weight:700;
  font-size:16px;
}

.ddp-scope .ddp-btn,
.ddp-scope .ddp-line-ctrls .ddp-cr{
  width:var(--ddp-ctl);
  height:var(--ddp-ctl);
  border-radius:999px;
  border:1.5px solid var(--ddp-ctl-border) !important;
  background:var(--ddp-ctl-bg) !important;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:22px; font-weight:900;
  color:#111 !important;
  box-shadow:none !important;
  filter:none !important;
  text-decoration:none !important;
  padding:0 !important;
  line-height:0 !important;
  transition:background-color var(--ddp-fast) var(--ddp-ease), transform var(--ddp-fast) var(--ddp-ease);
  -webkit-appearance:none; appearance:none;
}
@media (hover:hover){
  .ddp-scope .ddp-btn:hover,
  .ddp-scope .ddp-line-ctrls .ddp-cr:hover{ background:var(--ddp-ctl-hover)!important; }
}
.ddp-scope .ddp-btn:active,
.ddp-scope .ddp-line-ctrls .ddp-cr:active{ transform:scale(.96); }

@media (max-width:480px){
  .ddp-scope{ --ddp-ctl:36px; }
  .ddp-scope .ddp-qty input{ width:50px; min-width:50px; }
  .ddp-scope .ddp-btn,
  .ddp-scope .ddp-line-ctrls .ddp-cr{ font-size:20px; }
}

.ddp-scope #ddp-check-list .ddp-row > div:last-child{
  display:flex; align-items:center; justify-content:flex-end;
  gap:10px; min-width:108px;
}
.ddp-scope #ddp-check-list .ddp-qty{
  height:34px;
}
.ddp-scope #ddp-check-list .ddp-qty button{
  width:34px;
  height:34px;
  font-size:19px;
}
.ddp-scope #ddp-check-list .ddp-qty input{
  width:42px;
  min-width:42px;
  height:34px;
  font-size:14px;
}

/* ===================================================================
   FOOTERS
   =================================================================== */
.ddp-scope .ddp-foot{
  flex:0 0 auto;
  margin-top:auto !important;
  width:100% !important;

  position:sticky !important;
  bottom:0 !important;
  z-index:60 !important;

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

  border-top:1px solid var(--ddp-border);
  background:var(--ddp-bg) !important;
  padding:12px 14px;
  padding-bottom:calc(12px + var(--ddp-safe));

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

.ddp-scope .ddp-total{ font-weight:900; font-size:18px; }
.ddp-scope .ddp-add{
  background:#111; color:#fff;
  border:0;
  border-radius:999px;
  padding:12px 18px;
  font-weight:900;
  cursor:pointer;
  min-width:140px;
  display:inline-flex; align-items:center; justify-content:center;
  transition:transform var(--ddp-fast) var(--ddp-ease), opacity var(--ddp-fast) var(--ddp-ease);
}
.ddp-scope .ddp-add:active{ transform:scale(.98); }
.ddp-scope .ddp-add, .ddp-scope .ddp-add:hover, .ddp-scope .ddp-add:focus{
  text-decoration:none!important; outline:none!important; box-shadow:none!important;
}
.ddp-scope .ddp-hidden{ display:none!important; }

.ddp-scope .ddp-modal:not(.ddp-cart-only) #ddp-foot-cart{ display:none!important; }
.ddp-scope .ddp-modal:not(.ddp-cart-only) #ddp-foot-product{ display:flex!important; }

@media (max-width:640px){
  .ddp-scope .ddp-modal:not(.ddp-cart-only) #ddp-foot-product{
    flex-direction:column;
    align-items:stretch;
    text-align:center;
    gap:10px;
  }
  .ddp-scope .ddp-modal:not(.ddp-cart-only) #ddp-foot-product .ddp-foot-cta{
    display:flex;
    justify-content:center;
    gap:10px;
    flex-wrap:wrap;
  }
  .ddp-scope .ddp-modal:not(.ddp-cart-only) #ddp-foot-product .ddp-add{
    flex:1 1 160px;
    min-width:160px;
  }
}

/* ===================================================================
   CART PANEL
   =================================================================== */
.ddp-scope #ddp-cart-panel{ display:none; }

.ddp-scope .ddp-modal.ddp-cart-only #ddp-cart-panel{
  display:flex;
  flex:1 1 auto;
  flex-direction:column;
  gap:12px;

  padding:14px;
  padding-bottom:16px !important;

  overflow:auto;
  -webkit-overflow-scrolling:touch;
  min-height:0;
  overscroll-behavior:contain;

  scroll-padding-bottom:calc(var(--ddp-foot-h) + var(--ddp-safe) + 14px);
}

.ddp-scope #ddp-cart-panel .ddp-line{
  display:grid;
  grid-template-columns:56px 1fr auto;
  gap:12px;
  align-items:center;

  border:1px solid var(--ddp-border);
  border-radius:var(--ddp-r16);
  padding:12px;
  background:var(--ddp-bg);

  box-shadow:0 1px 0 rgba(0,0,0,.04);
  width:min(920px,100%);
  margin-inline:auto;
}
.ddp-scope #ddp-cart-panel .ddp-thumb{
  width:56px; height:56px;
  border-radius:12px;
  overflow:hidden;
  border:1px solid var(--ddp-border);
  background:transparent!important;
  box-shadow:none!important;
}
.ddp-scope #ddp-cart-panel .ddp-thumb img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  background:transparent!important;
  box-shadow:none!important;
}
.ddp-scope .ddp-line-info{ display:flex; flex-direction:column; min-width:0; }
.ddp-scope .ddp-line-name{ font-weight:900; }
.ddp-scope .ddp-line-meta{ opacity:.75; font-size:12px; }

/* CART QTY pill */
.ddp-scope #ddp-cart-panel .ddp-line-ctrls{
  display:grid;
  grid-auto-flow:column;
  align-items:center;
  justify-content:end;
  gap:0;
  margin:0!important;
  align-self:center;
}
.ddp-scope #ddp-cart-panel .ddp-line-ctrls > :nth-child(n+4){
  margin-left:10px !important;
}
.ddp-scope #ddp-cart-panel .ddp-line-ctrls > :nth-child(1):is(button,a):not(.x):not(.ddp-remove){
  width:var(--ddp-ctl) !important;
  height:var(--ddp-ctl) !important;
  border:1.5px solid var(--ddp-ctl-border) !important;
  border-right:0 !important;
  border-radius:999px 0 0 999px !important;
  background:#fff !important;
  box-shadow:none !important;
  filter:none !important;
  padding:0 !important;
  line-height:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:22px !important;
  font-weight:700 !important;
  color:#111 !important;
}
.ddp-scope #ddp-cart-panel .ddp-line-ctrls > :nth-child(2){
  min-width:54px !important;
  width:54px !important;
  height:var(--ddp-ctl) !important;
  border-top:1.5px solid var(--ddp-ctl-border) !important;
  border-bottom:1.5px solid var(--ddp-ctl-border) !important;
  border-left:0 !important;
  border-right:0 !important;
  border-radius:0 !important;
  background:#fff !important;
  box-shadow:none !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-weight:700 !important;
  font-size:16px !important;
  color:#111 !important;
}
.ddp-scope #ddp-cart-panel .ddp-line-ctrls > :nth-child(2):is(input){
  padding:0 !important;
  margin:0 !important;
  text-align:center !important;
  border:0 !important;
  background:transparent !important;
}
.ddp-scope #ddp-cart-panel .ddp-line-ctrls > :nth-child(3):is(button,a):not(.x):not(.ddp-remove){
  width:var(--ddp-ctl) !important;
  height:var(--ddp-ctl) !important;
  border:1.5px solid var(--ddp-ctl-border) !important;
  border-left:0 !important;
  border-radius:0 999px 999px 0 !important;
  background:#fff !important;
  box-shadow:none !important;
  filter:none !important;
  padding:0 !important;
  line-height:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:22px !important;
  font-weight:700 !important;
  color:#111 !important;
}
@media (hover:hover){
  .ddp-scope #ddp-cart-panel .ddp-line-ctrls > :nth-child(1):is(button,a):not(.x):not(.ddp-remove):hover,
  .ddp-scope #ddp-cart-panel .ddp-line-ctrls > :nth-child(3):is(button,a):not(.x):not(.ddp-remove):hover{
    background:var(--ddp-ctl-hover) !important;
  }
}
.ddp-scope .ddp-line-total{
  min-width:72px;
  text-align:right;
  font-weight:900;
  white-space:nowrap;
  align-self:center;
}

.ddp-scope .ddp-addons{
  list-style:none;
  margin:8px 0 0 0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  min-width:0;
}
.ddp-scope .ddp-addons .ddp-addon-li{
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid var(--ddp-border);
  background:var(--ddp-soft);
  border-radius:999px;
  padding:6px 10px;
  line-height:1.2;
  max-width:100%;
  white-space:nowrap;
}
.ddp-scope .ddp-addons .ddp-addon-lbl{ max-width:20ch; overflow:hidden; text-overflow:ellipsis; }
.ddp-scope .ddp-addons .ddp-addon-amt{ opacity:.9; font-weight:700; }

@media (max-width:480px){
  .ddp-scope #ddp-cart-panel .ddp-line{ grid-template-columns:56px 1fr; }
  .ddp-scope .ddp-line-ctrls{ grid-column:2 / -1; justify-content:end; }
  .ddp-scope .ddp-line-total{ order:99; margin-left:auto; max-width:44vw; overflow:hidden; text-overflow:ellipsis; }
  .ddp-scope .ddp-addons .ddp-addon-li{ white-space:normal; }
}

/* ===================================================================
   CART FOOTER
   =================================================================== */
.ddp-scope #ddp-foot-cart{ display:none; }

.ddp-scope .ddp-modal.ddp-cart-only #ddp-foot-cart{
  display:grid !important;

  margin-top:auto !important;
  width:100% !important;

  position:sticky !important;
  bottom:0 !important;
  z-index:60 !important;

  grid-template-columns: 1fr auto auto;
  grid-template-areas: "note subtotal cta";
  align-items:center;
  gap:14px;

  padding:12px 14px;
  background:var(--ddp-bg);
  border-top:1px solid var(--ddp-border);
  padding-bottom:calc(12px + var(--ddp-safe));

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

#ddp-min-note{
  grid-area:note;
  display:flex; align-items:center; gap:8px;
  font-size:13px; font-weight:900;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid var(--ddp-border);
  background:var(--ddp-soft);
  color:#111;
}
#ddp-min-note::before{
  content:"i";
  width:18px; height:18px;
  border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:900; font-size:12px;
  color:#111;
  background:#fbd4d4;
  border:1px solid var(--ddp-border);
}
#ddp-min-note.ok{ background:#eef9f0; border-color:#cfead6; }
#ddp-min-note.ok::before{ content:"✓"; background:#fff; }

.ddp-scope #ddp-foot-cart .ddp-total{
  grid-area:subtotal;
  justify-self:end;
  margin:0!important;
  font-weight:900;
  font-size:18px;
}
.ddp-scope #ddp-foot-cart .ddp-foot-cta{
  grid-area:cta;
  justify-self:end;
  display:flex; align-items:center; gap:10px;
}
.ddp-scope #ddp-foot-cart .ddp-add.ddp-min-disabled{
  opacity:.55;
  cursor:not-allowed;
  pointer-events:none;
}

@media (max-width:640px){
  .ddp-scope{ --ddp-foot-h:120px; }
  .ddp-scope .ddp-modal.ddp-cart-only #ddp-foot-cart{
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "note note"
      "subtotal cta";
    gap:10px;
  }
  #ddp-min-note{ justify-self:center; }
  .ddp-scope #ddp-foot-cart .ddp-total{ justify-self:start; }
  .ddp-scope #ddp-foot-cart .ddp-foot-cta{ justify-self:end; }
}

/* ===================================================================
   TRASH REMOVE ICON
   =================================================================== */
.ddp-scope .ddp-btn.x,
.ddp-scope .ddp-line-ctrls .ddp-cr.x,
.ddp-scope .ddp-line-ctrls .ddp-cr.ddp-remove,
.ddp-scope button[aria-label*="remove" i],
.ddp-scope button[aria-label*="delete" i],
.ddp-scope button[title*="remove" i],
.ddp-scope button[title*="delete" i]{
  width:var(--ddp-ctl) !important;
  height:var(--ddp-ctl) !important;
  border-radius:999px !important;

  background:#fff !important;
  border:1.5px solid var(--ddp-ctl-border) !important;
  box-shadow:none !important;
  filter:none !important;

  padding:0 !important;
  margin:0 !important;
  line-height:0 !important;
  font-size:0 !important;
  text-indent:0 !important;
  overflow:hidden !important;
  color:var(--ddp-danger) !important;

  position:relative !important;
  background-image:none !important;

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

.ddp-scope .ddp-btn.x svg,
.ddp-scope .ddp-line-ctrls .ddp-cr.x svg,
.ddp-scope .ddp-line-ctrls .ddp-cr.ddp-remove svg{ display:none !important; }

.ddp-scope .ddp-btn.x::after,
.ddp-scope .ddp-line-ctrls .ddp-cr.x::after,
.ddp-scope .ddp-line-ctrls .ddp-cr.ddp-remove::after,
.ddp-scope button[aria-label*="remove" i]::after,
.ddp-scope button[aria-label*="delete" i]::after,
.ddp-scope button[title*="remove" i]::after,
.ddp-scope button[title*="delete" i]::after{
  content:"" !important;
  width:18px !important;
  height:18px !important;
  display:block !important;

  background:currentColor !important;

  -webkit-mask-image: var(--ddp-trash-mask) !important;
  -webkit-mask-repeat:no-repeat !important;
  -webkit-mask-position:center !important;
  -webkit-mask-size:contain !important;

  mask-image: var(--ddp-trash-mask) !important;
  mask-repeat:no-repeat !important;
  mask-position:center !important;
  mask-size:contain !important;
}

@supports not ((-webkit-mask-image: url("")) or (mask-image: url(""))){
  .ddp-scope .ddp-btn.x::after,
  .ddp-scope .ddp-line-ctrls .ddp-cr.x::after,
  .ddp-scope .ddp-line-ctrls .ddp-cr.ddp-remove::after,
  .ddp-scope button[aria-label*="remove" i]::after,
  .ddp-scope button[aria-label*="delete" i]::after,
  .ddp-scope button[title*="remove" i]::after,
  .ddp-scope button[title*="delete" i]::after{
    background:transparent !important;
    background-image:var(--ddp-trash-fallback) !important;
    background-repeat:no-repeat !important;
    background-position:center !important;
    background-size:18px 18px !important;
  }
}

@media (hover:hover){
  .ddp-scope .ddp-btn.x:hover,
  .ddp-scope .ddp-line-ctrls .ddp-cr.x:hover,
  .ddp-scope .ddp-line-ctrls .ddp-cr.ddp-remove:hover,
  .ddp-scope button[aria-label*="remove" i]:hover,
  .ddp-scope button[aria-label*="delete" i]:hover,
  .ddp-scope button[title*="remove" i]:hover,
  .ddp-scope button[title*="delete" i]:hover{
    background:#fff5f7 !important;
    border-color:#f5c2cc !important;
  }
}

/* ===================================================================
   Skeletons
   =================================================================== */
@keyframes ddp-shimmer{ 0%{background-position:-200px 0} 100%{background-position:calc(200px + 100%) 0} }
.ddp-scope .ddp-skel{ position:relative; overflow:hidden; background:#f0f0f0; border-radius:12px; }
.ddp-scope .ddp-skel::after{
  content:""; position:absolute; inset:0;
  background-image:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.6),rgba(255,255,255,0));
  background-size:240px 100%;
  animation:ddp-shimmer .75s linear infinite;
}
.ddp-scope .ddp-skel-line{ height:13px; margin:7px 0; border-radius:10px; }
.ddp-scope .ddp-skel-hero{ height:320px; border-radius:16px; }

/* ===================================================================
   Cart-only mode rules + Desktop shrink-to-content
   =================================================================== */
.ddp-scope .ddp-modal.ddp-cart-only{
  min-height:260px;
  height:auto;
}
.ddp-scope .ddp-modal.ddp-cart-only .ddp-m-body{ display:none !important; }
.ddp-scope .ddp-modal.ddp-cart-only #ddp-foot-product{ display:none !important; }
.ddp-scope .ddp-modal.ddp-cart-only #ddp-tab-product{ display:none; }
.ddp-scope .ddp-modal.ddp-cart-only .ddp-tabs{ margin-left:auto; margin-right:auto; }

@media (min-width:821px){
  .ddp-scope .ddp-modal.ddp-cart-only,
  #ddp-modal.ddp-cart-only{
    height:auto !important;
    min-height:0 !important;
    max-height:92vh !important;
  }
  @supports (height:100dvh){
    .ddp-scope .ddp-modal.ddp-cart-only,
    #ddp-modal.ddp-cart-only{ max-height:92dvh !important; }
  }
  .ddp-scope .ddp-modal.ddp-cart-only #ddp-cart-panel{ flex:0 0 auto !important; }
}

/* ===================================================================
   Z-index guards + header click-through block
   =================================================================== */
#ddp-overlay{     z-index:2147483646 !important; }
#ddp-modal{       z-index:2147483647 !important; }
#ddp-unified-fab{ z-index:2147483002 !important; }

.ddp-portal-scope{
  position: relative !important;
  z-index: 2147483600 !important;
  isolation: isolate !important;
  transform: none !important;
  filter: none !important;
  perspective: none !important;
}

html.ddp-noscroll #wpadminbar,
html.ddp-noscroll header,
html.ddp-noscroll .site-header,
html.ddp-noscroll #masthead,
html.ddp-noscroll nav,
html.ddp-noscroll .navbar,
html.ddp-noscroll .main-header,
html.ddp-noscroll .elementor-sticky,
html.ddp-noscroll .elementor-sticky--active{
  z-index: 2147480000 !important;
  pointer-events:none !important;
}

html.ddp-noscroll #ddp-unified-fab{ display:none !important; }

/* ============================================================
   DDP — Sections / Banners / Tabs / Slider (FINAL DEPLOYMENT)
   (iPhone sticky fix + tab hover/icon fix + safe defaults)
   ============================================================ */

.ddp-scope{
  --ddp-scroll-offset: 110px;
  --ddp-yellow: #FFC800;

  /* smooth + safe */
  --ddp-ease: cubic-bezier(.2,.85,.2,1);
  --ddp-fast: 120ms;

  /* iPhone notch safe top (mostly 0 in browser, useful in standalone) */
  --ddp-safe-top: env(safe-area-inset-top, 0px);
}

/* Safe box-sizing ONLY inside plugin scope */
.ddp-scope,
.ddp-scope *,
.ddp-scope *::before,
.ddp-scope *::after{
  box-sizing:border-box;
}

/* Do NOT hide whole menu (keeps LCP fast) */
.ddp-scope.ddp-preload{ opacity:1; pointer-events:auto; }

/* Hide ONLY slider during init */
.ddp-scope.ddp-cat-slider-v5.ddp-preload{ opacity:0; pointer-events:none; }

/* ============================================================
   Sections
   ============================================================ */
.ddp-scope.ddp-cat-sections .ddp-cat-section{
  margin: 18px 0 34px;
  scroll-margin-top: var(--ddp-scroll-offset);
}

/* ============================================================
   Banner header
   ============================================================ */
.ddp-scope.ddp-cat-sections .ddp-cat-hero{
  border-radius: 18px;
  overflow: hidden;
  min-height: 140px;
  position: relative;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 26px 16px;

  background-color: #1a1a1a;
  background-image: var(--ddp-bg, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: scroll;
}

@media (min-width: 1024px){
  .ddp-scope.ddp-cat-sections .ddp-cat-hero{
    min-height: 180px;
    background-attachment: fixed;
  }
}

.ddp-scope.ddp-cat-sections .ddp-cat-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,.25));
}

.ddp-scope.ddp-cat-sections .ddp-cat-title{
  position:relative;
  z-index:1;
  margin:0;
  color:#fff;
  font-weight: 900;
  text-align:center;
  letter-spacing: .6px;
  text-transform: uppercase;
  font-size: clamp(22px, 4.3vw, 44px);
  text-shadow: 0 6px 20px rgba(0,0,0,.35);
}

.ddp-scope.ddp-cat-sections .ddp-cat-title.ddp-cat-title-plain{
  color:#111;
  text-shadow:none;
  text-transform:none;
  margin: 0 0 10px;
  text-align:left;
  font-size: 22px;
}

/* ============================================================
   Tabs layout
   ============================================================ */
.ddp-scope.ddp-tabs-layout .ddp-tabs-shell{
  display:grid;
  grid-template-columns: 240px 1fr;
  gap: 16px;
  align-items:start;
}

.ddp-scope.ddp-tabs-layout .ddp-tabs-side{
  position: sticky;
  top: var(--ddp-scroll-offset);
  align-self: start;
  border: 1px solid #eee;
  border-radius: 16px;
  background: #fff;
  padding: 10px;
  max-height: calc(100vh - var(--ddp-scroll-offset));
  overflow:auto;
}

/* TAB button — locked against theme hover (no white bg/icons) */
.ddp-scope.ddp-tabs-layout .ddp-tab-btn{
  width:100%;
  text-align:left;
  appearance:none;
  -webkit-appearance:none;
  border: 1px solid #eee;
  background:#fff;
  color:#111;
  border-radius: 14px;
  padding: 12px 12px;
  font-weight: 800;
  cursor:pointer;
  margin: 0 0 10px;
  text-decoration:none !important;
  box-shadow:none !important;
  outline:0 !important;
  filter:none !important;

  transition:
    background-color var(--ddp-fast) var(--ddp-ease),
    color var(--ddp-fast) var(--ddp-ease),
    border-color var(--ddp-fast) var(--ddp-ease),
    transform var(--ddp-fast) var(--ddp-ease);
}

/* icon lock */
.ddp-scope.ddp-tabs-layout .ddp-tab-btn svg{
  fill:#111 !important;
  stroke:#111 !important;
  filter:none !important;
}

@media (hover:hover){
  .ddp-scope.ddp-tabs-layout .ddp-tab-btn:hover{
    background:#f2f2f2 !important;  /* never white glitch */
    color:#111 !important;
    border-color:#e5e5e5 !important;
    -webkit-text-fill-color:#111 !important;
  }
  .ddp-scope.ddp-tabs-layout .ddp-tab-btn:hover svg{
    fill:#111 !important;
    stroke:#111 !important;
  }
}

.ddp-scope.ddp-tabs-layout .ddp-tab-btn:active{ transform:scale(.99); }

.ddp-scope.ddp-tabs-layout .ddp-tab-btn.active{
  background:#111 !important;
  color:#fff !important;
  border-color:#111 !important;
  -webkit-text-fill-color:#fff !important;
}
.ddp-scope.ddp-tabs-layout .ddp-tab-btn.active svg{
  fill:#fff !important;
  stroke:#fff !important;
}

/* panels */
.ddp-scope.ddp-tabs-layout .ddp-tab-panel{ display:none; }
.ddp-scope.ddp-tabs-layout .ddp-tab-panel.active{ display:block; }

/* Mobile tabs row */
@media (max-width: 820px){
  .ddp-scope.ddp-tabs-layout .ddp-tabs-shell{ grid-template-columns: 1fr; }

  .ddp-scope.ddp-tabs-layout .ddp-tabs-side{
    position: sticky;
    top: 0;
    z-index: 5;
    display:flex;
    gap: 10px;
    overflow-x:auto;
    overflow-y:hidden;
    white-space: nowrap;
    padding: 10px;
  }

  .ddp-scope.ddp-tabs-layout .ddp-tab-btn{
    width:auto;
    margin: 0;
    white-space: nowrap;
  }
}

/* ============================================================
   Category Slider v5 — LIGHT / DARK (clean + screenshot arrows)
   ============================================================ */

.ddp-scope.ddp-cat-slider-wrap.ddp-cat-slider-v5{
  /* defaults = LIGHT */
  --ddp-slider-bg: #ffffff;
  --ddp-slider-text: #111827;
  --ddp-slider-border: rgba(17,24,39,.12);
  --ddp-slider-shadow: 0 10px 30px rgba(0,0,0,.10);

  --ddp-slider-hover: rgba(17,24,39,.06);

  /* arrow box */
  --ddp-slider-arrow-bg: #ffffff;
  --ddp-slider-arrow-color: #111827;

  position: relative;
  display:block;
  width:100%;
  max-width:100%;
  height:70px;

  background: var(--ddp-slider-bg);
  color: var(--ddp-slider-text);

  overflow:hidden;
  margin:0;
  padding:0;

  border: 1px solid var(--ddp-slider-border);
  border-left: 0;
  border-right: 0;
  border-top: 0;
  outline: 0 !important;
  box-shadow: var(--ddp-slider-shadow);

  z-index: 50;

  /* JS uses this; keep smooth but safe */
  --ddp-sticky-shift: 0px;
  transform: translateY(var(--ddp-sticky-shift)) translateZ(0);
  backface-visibility: hidden;
  will-change: transform;
}

/* theme: DARK */
.ddp-scope.ddp-cat-slider-wrap.ddp-cat-slider-v5.ddp-cat-slider-dark{
  --ddp-slider-bg: #111111;
  --ddp-slider-text: #ffffff;
  --ddp-slider-border: rgba(255,255,255,.16);
  --ddp-slider-shadow: 0 10px 30px rgba(0,0,0,.28);
  --ddp-slider-hover: rgba(255,255,255,.10);

  --ddp-slider-arrow-bg: #ffffff;
  --ddp-slider-arrow-color: #111111;
}

/* theme: LIGHT explicit */
.ddp-scope.ddp-cat-slider-wrap.ddp-cat-slider-v5.ddp-cat-slider-light{
  --ddp-slider-bg: #ffffff;
  --ddp-slider-text: #111827;
  --ddp-slider-border: rgba(17,24,39,.12);
  --ddp-slider-shadow: 0 10px 30px rgba(0,0,0,.10);
  --ddp-slider-hover: rgba(17,24,39,.06);

  --ddp-slider-arrow-bg: black;
  --ddp-slider-arrow-color: white;
}

/* FIXED state — ✅ iPhone “upar ghus jana” fix:
   If JS doesn't set --ddp-fixed-top correctly, we fallback to --ddp-scroll-offset
   + remove sticky shift while fixed (prevents hidden/half-cut look on Safari) */
.ddp-scope.ddp-cat-slider-wrap.ddp-cat-slider-v5.ddp-is-fixed{
  position: fixed;
  top: calc(var(--ddp-fixed-top, var(--ddp-scroll-offset)) + var(--ddp-safe-top));
  left: 0;
  right: 0;
  width: 100%;
  z-index: 999999;

  --ddp-sticky-shift: 0px;              /* key fix */
  transform: translateZ(0) !important;  /* key fix */
  transition: transform 160ms ease-out;
}

/* when JS wants no animation */
.ddp-scope.ddp-cat-slider-wrap.ddp-cat-slider-v5.ddp-sticky-noanim{
  transition: none !important;
}

/* placeholder created by JS */
.ddp-scope.ddp-cat-slider-placeholder.ddp-cat-slider-v5{ width:100%; }

@media (prefers-reduced-motion: reduce){
  .ddp-scope.ddp-cat-slider-wrap.ddp-cat-slider-v5.ddp-is-fixed{ transition:none; }
}

/* ARROWS */
.ddp-scope.ddp-cat-slider-wrap.ddp-cat-slider-v5 .ddp-cat-arrow-v5{
  position:absolute;
  top:0;
  bottom:0;
  width:30px;
  height:100%;
  transform:none;

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

  appearance:none;
  -webkit-appearance:none;

  background: var(--ddp-slider-arrow-bg);
  color: var(--ddp-slider-arrow-color);

  border:0;
  border-radius:0;
  box-shadow:none;

  cursor:pointer;
  user-select:none;
  text-decoration:none !important;
  outline:0;

  z-index:3;

  padding:0;
  line-height:0;
  font-size:0;
  -webkit-tap-highlight-color: transparent;

  /* theme hover lock */
  filter:none !important;
}
.ddp-scope.ddp-cat-slider-wrap.ddp-cat-slider-v5 .ddp-cat-left-v5{
  left:0;
  border-right:1px solid var(--ddp-slider-border);
}
.ddp-scope.ddp-cat-slider-wrap.ddp-cat-slider-v5 .ddp-cat-right-v5{
  right:0;
  border-left:1px solid var(--ddp-slider-border);
}

/* chevron */
.ddp-scope.ddp-cat-slider-wrap.ddp-cat-slider-v5 .ddp-cat-arrow-v5::before{
  content:"";
  width:12px;
  height:12px;
  border-right:3px solid currentColor;
  border-bottom:3px solid currentColor;
  transform: rotate(-45deg);
}
.ddp-scope.ddp-cat-slider-wrap.ddp-cat-slider-v5 .ddp-cat-left-v5::before{
  transform: rotate(135deg);
}

/* track */
.ddp-scope.ddp-cat-slider-wrap.ddp-cat-slider-v5 .ddp-cat-track-v5{
  height:70px;
  display:flex;
  align-items:center;
  white-space: nowrap;

  overflow-x:auto;
  overflow-y:hidden;

  scroll-behavior: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;

  padding: 0 58px;

  touch-action: pan-x;
  overscroll-behavior-x: contain;
}
.ddp-scope.ddp-cat-slider-wrap.ddp-cat-slider-v5 .ddp-cat-track-v5::-webkit-scrollbar{ display:none; }

/* chips */
.ddp-scope.ddp-cat-slider-wrap.ddp-cat-slider-v5 .ddp-cat-chip-v5{
  appearance:none;
  -webkit-appearance:none;

  border: 1px solid transparent;
  outline:0;
  box-shadow:none;

  background: transparent;
  color: var(--ddp-slider-text);

  font-weight: 650;
  font-size: 15px;
  line-height: 1;

  padding: 12px 18px;
  height:44px;

  cursor:pointer;
  border-radius: 999px;

  text-decoration:none !important;
  white-space: nowrap;
  flex: 0 0 auto;

  transition: background-color .16s ease, color .16s ease, border-color .16s ease, transform .16s ease;
}

.ddp-scope.ddp-cat-slider-wrap.ddp-cat-slider-v5 .ddp-cat-chip-v5:hover{
  background: var(--ddp-slider-hover);
  border-color: rgba(255,255,255,.10);
}

/* active chip */
.ddp-scope.ddp-cat-slider-wrap.ddp-cat-slider-v5 .ddp-cat-chip-v5.active{
  background: var(--ddp-yellow) !important;
  border-color: rgba(0,0,0,0);
  color: #000 !important;
}

/* mobile sizing */
@media (max-width: 640px){
  .ddp-scope.ddp-cat-slider-wrap.ddp-cat-slider-v5{ height:52px; }

  .ddp-scope.ddp-cat-slider-wrap.ddp-cat-slider-v5 .ddp-cat-track-v5{
    height:52px;
    padding: 0 52px;
  }

  .ddp-scope.ddp-cat-slider-wrap.ddp-cat-slider-v5 .ddp-cat-arrow-v5{
    width:52px;
  }

  .ddp-scope.ddp-cat-slider-wrap.ddp-cat-slider-v5 .ddp-cat-chip-v5{
    height:38px;
    padding: 10px 14px;
    font-size: 14px;
  }
}

/* iOS Safari: prevent focus-zoom on inputs (needs >=16px) */
@supports (-webkit-touch-callout: none) {
  /* DDP product modal */
  #ddp-modal input,
  #ddp-modal textarea,
  #ddp-modal select,
  #ddp-modal input[type="number"]{
    font-size: 16px !important;
    line-height: 1.25;
  }

  /* Your preference popup wrapper (ID/class replace this) */
  #ddp-pref-modal input,
  #ddp-pref-modal textarea,
  #ddp-pref-modal select,
  #ddp-pref-modal input[type="search"],
  #ddp-pref-modal input[type="number"]{
    font-size: 16px !important;
    line-height: 1.25;
  }
}

/* Availability */

.ddp-card {
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 10px 35px rgba(0,0,0,0.03);
}

.ddp-card.ddp-unavailable .ddp-thumb img {
    filter: grayscale(0.4) brightness(0.9);
    opacity: 0.55;
    transform: scale(1.01);
    transition: filter 0.25s ease, opacity 0.25s ease, transform 0.25s ease;
}

.ddp-title {
    margin-bottom: 4px;
}
.ddp-price {
    margin-top: 4px;
    margin-bottom: 0;
}

.ddo-availability-note {
    margin-top: 2px;
    margin-bottom: 2px;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 500;
}

.ddo-note-open {
    color: #129663;
}

.ddo-note-closed {
    color: #e7553c;
}

/* Button style: rounded full-width */
.ddp-card .ddp-order {
    width: 100%;
    margin-top: 10px;
    padding: 10px 14px;
    border-radius: 999px;
    border: 0;
    font-size: 14px;
    font-weight: 600;
}
.ddp-card:not(.ddp-unavailable) .ddp-order {
    background: #000;
    color: #fff;
    cursor: pointer;
}
.ddp-card.ddp-unavailable .ddp-order {
    background: #222;
    color: #fff;
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none;
}

/* ===================================================================
   Cart item: Special instruction note
   =================================================================== */
.ddp-scope .ddp-line-note{
  font-size:12px;
  color:#666;
  font-style:italic;
  margin-top:5px;
  padding:5px 8px;
  background:var(--ddp-soft);
  border-radius:8px;
  border-left:2px solid var(--ddp-border);
  line-height:1.4;
  word-break:break-word;
}

/* ===================================================================
   Add-to-cart shake (failure feedback)
   =================================================================== */
@keyframes ddp-shake{
  0%,100%{ transform:translateX(0); }
  20%    { transform:translateX(-5px); }
  40%    { transform:translateX(5px); }
  60%    { transform:translateX(-4px); }
  80%    { transform:translateX(4px); }
}
.ddp-scope .ddp-add.ddp-shake,
#ddp-add.ddp-shake{
  animation:ddp-shake .42s ease;
}

/* FAB ping → handled by #ddp-unified-fab.ddp-ping (defined in Unified FAB block above) */

/* ===================================================================
   Drawer handle bar (mobile bottom sheet visual hint)
   =================================================================== */
@media (max-width:820px){
  #ddp-modal::before{
    content:"";
    display:block;
    width:40px; height:4px;
    border-radius:999px;
    background:rgba(0,0,0,.15);
    margin:10px auto 0;
    flex-shrink:0;
  }
}

/* ===================================================================
   Order button active-state touch ripple (mobile feel)
   =================================================================== */
.ddp-scope .ddp-order{
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  user-select:none;
}
.ddp-scope .ddp-order:active{
  transform:scale(.97);
  opacity:.9;
}
.ddp-scope .ddp-add:active{
  transform:scale(.97) !important;
}

/* ===================================================================
   Product card image aspect ratio (consistent heights on mobile)
   =================================================================== */
@media (max-width:480px){
  .ddp-scope .ddp-thumb img{
    height:160px;
  }
}

/* ===================================================================
   Cart panel empty-state
   =================================================================== */
.ddp-scope #ddp-cart-panel .ddp-empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:48px 20px;
  opacity:.7;
  font-size:15px;
  font-weight:600;
  text-align:center;
}

/* ===================================================================
   Improved product note textarea (mobile)
   =================================================================== */
.ddp-scope .ddp-note textarea{
  -webkit-appearance:none;
  border-radius:12px !important;
  font-size:16px !important; /* prevents iOS zoom */
  padding:12px !important;
  border-color:var(--ddp-border) !important;
  box-shadow:none !important;
  resize:none;
  transition:border-color var(--ddp-fast) var(--ddp-ease);
}
.ddp-scope .ddp-note textarea:focus{
  border-color:#111 !important;
  outline:none !important;
}

/* End of Availability */

/* ===================================================================
   RESTAURANT REDESIGN — Horizontal Cards + Premium UX
   (All rules use high specificity to override old vertical styles)
   =================================================================== */

/* ---- Grid: single column by default for horizontal cards ---- */
.ddp-scope .ddp-grid{
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  margin: 14px 0 !important;
}
@media (min-width: 640px){
  .ddp-scope .ddp-cols-2{ grid-template-columns: repeat(2,1fr) !important; }
  .ddp-scope .ddp-cols-3,
  .ddp-scope .ddp-cols-4{ grid-template-columns: repeat(2,1fr) !important; }
}
@media (min-width: 1100px){
  .ddp-scope .ddp-cols-3{ grid-template-columns: repeat(3,1fr) !important; }
  .ddp-scope .ddp-cols-4{ grid-template-columns: repeat(3,1fr) !important; }
}

/* ---- Horizontal card shell ---- */
.ddp-scope .ddp-card{
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  padding: 16px !important;
  gap: 14px !important;
  min-height: 0 !important;
  border-radius: 16px !important;
  background: #fff !important;
  border: 1px solid #f0f0f0 !important;
  box-shadow: 0 1px 6px rgba(0,0,0,.06) !important;
  cursor: pointer !important;
  overflow: visible !important;
  transition: box-shadow 140ms ease, transform 140ms ease !important;
  will-change: transform;
}
@media (hover:hover){
  .ddp-scope .ddp-card:not(.ddp-unavailable):hover{
    box-shadow: 0 6px 22px rgba(0,0,0,.11) !important;
    transform: translateY(-1px) !important;
  }
}
.ddp-scope .ddp-card:active{ transform: scale(.99) !important; }

/* ---- Info column (left side) ---- */
.ddp-scope .ddp-card-info{
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
}

/* ---- Card title ---- */
.ddp-scope .ddp-card .ddp-title{
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  margin: 0 !important;
  text-align: left !important;
  color: #111 !important;
}

/* ---- Short description preview ---- */
.ddp-scope .ddp-short-desc{
  font-size: 13px !important;
  color: #888 !important;
  line-height: 1.45 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  margin: 0 !important;
}

/* ---- Price + Add row at bottom of info ---- */
.ddp-scope .ddp-card-footer{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin-top: auto !important;
  padding-top: 10px !important;
}

.ddp-scope .ddp-card .ddp-price{
  font-size: 15px !important;
  font-weight: 800 !important;
  margin: 0 !important;
  color: #111 !important;
}

/* ---- Add button on card ---- */
.ddp-scope .ddp-card .ddp-order{
  width: auto !important;
  min-width: 72px !important;
  padding: 9px 16px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  letter-spacing: .2px !important;
  line-height: 1 !important;
  border: 0 !important;
  transition: background 120ms ease, transform 100ms ease !important;
}
.ddp-scope .ddp-card:not(.ddp-unavailable) .ddp-order{
  background: #111 !important;
  color: #fff !important;
}
@media (hover:hover){
  .ddp-scope .ddp-card:not(.ddp-unavailable) .ddp-order:hover{
    background: #333 !important;
  }
}
.ddp-scope .ddp-card:not(.ddp-unavailable) .ddp-order:active{
  transform: scale(.95) !important;
}
.ddp-scope .ddp-add-icon{
  font-size: 17px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  margin-right: 1px !important;
}

/* ---- Image column (right side) ---- */
.ddp-scope .ddp-card-img{
  flex-shrink: 0 !important;
  width: 110px !important;
  height: 110px !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: #f6f7f8 !important;
  align-self: center !important;
}
.ddp-scope .ddp-card-img img,
.ddp-scope .ddp-card-img .ddp-thumb img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.ddp-scope .ddp-card-img .ddp-thumb{
  width: 100% !important;
  height: 100% !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Greyed image on unavailable */
.ddp-scope .ddp-card.ddp-unavailable .ddp-card-img img{
  filter: grayscale(.55) brightness(.88) !important;
  opacity: .65 !important;
}

/* Neutralise old vertical-card styles that conflict with new horizontal layout */
.ddp-scope .ddp-card .ddp-thumb{
  background: transparent !important;
  box-shadow: none !important;
  width: 100% !important;
  height: 100% !important;
}
.ddp-scope .ddp-card .ddp-thumb img{
  height: 100% !important;
  width: 100% !important;
  border-radius: 0 !important;
}
/* Old .ddp-info wrapper not used in new cards; hide if somehow present */
.ddp-scope .ddp-card .ddp-info{ display: none !important; }

/* Mobile: slightly smaller image */
@media (max-width: 480px){
  .ddp-scope .ddp-card{ padding: 14px !important; gap: 12px !important; }
  .ddp-scope .ddp-card-img{ width: 88px !important; height: 88px !important; }
}

/* CartBar superseded by #ddp-unified-fab — hidden permanently */
#ddp-cart-bar{ display:none !important; }

/* ===================================================================
   PREMIUM MODAL REDESIGN
   =================================================================== */

/* Sticky modal header — cleaner, pill-style mode indicator */
.ddp-scope .ddp-m-head{
  border-bottom: 1px solid #f0f0f0 !important;
  padding: 14px 16px !important;
  background: #fff !important;
}

/* Cart footer checkout button — make it full-width on mobile */
@media (max-width: 640px){
  .ddp-scope .ddp-modal.ddp-cart-only #ddp-foot-cart .ddp-foot-cta{
    flex: 1 !important;
  }
  .ddp-scope .ddp-modal.ddp-cart-only #ddp-foot-cart .ddp-foot-cta .ddp-add{
    width: 100% !important;
    justify-content: center !important;
    padding: 14px !important;
    font-size: 15px !important;
  }
  .ddp-scope .ddp-modal.ddp-cart-only #ddp-foot-cart{
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "note"
      "subtotal"
      "cta" !important;
  }
  .ddp-scope #ddp-foot-cart .ddp-total{
    justify-self: start !important;
    font-size: 20px !important;
  }
}

/* Product footer Add button — full-width on mobile */
@media (max-width: 640px){
  .ddp-scope #ddp-foot-product .ddp-add{
    flex: 1 !important;
    justify-content: center !important;
    padding: 14px !important;
    font-size: 15px !important;
  }
}

/* ===================================================================
   Premium cart modal: fixed scroll region + sleeker line items
   =================================================================== */
.ddp-scope .ddp-modal.ddp-cart-only,
#ddp-modal.ddp-cart-only{
  width:min(1040px,94vw) !important;
  height:auto !important;
  max-height:min(760px,88vh) !important;
  max-height:min(760px,88dvh) !important;
  min-height:0 !important;
  overflow:hidden !important;
  display:flex !important;
  flex-direction:column !important;
  background:#fff !important;
}
.ddp-scope .ddp-modal.ddp-cart-only .ddp-m-head{
  flex:0 0 auto !important;
}
.ddp-scope .ddp-modal.ddp-cart-only #ddp-cart-panel{
  flex:1 1 auto !important;
  min-height:0 !important;
  max-height:clamp(230px,54vh,500px) !important;
  max-height:clamp(230px,54dvh,500px) !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  padding:14px clamp(14px,2.4vw,26px) !important;
  gap:10px !important;
  background:linear-gradient(180deg,#fbfcfd 0%,#fff 22%) !important;
  scrollbar-width:thin !important;
  scrollbar-color:#cfd5de transparent !important;
}
.ddp-scope .ddp-modal.ddp-cart-only #ddp-cart-panel::-webkit-scrollbar{
  width:8px !important;
}
.ddp-scope .ddp-modal.ddp-cart-only #ddp-cart-panel::-webkit-scrollbar-thumb{
  background:#cfd5de !important;
  border-radius:999px !important;
  border:2px solid #fff !important;
}
.ddp-scope .ddp-modal.ddp-cart-only #ddp-foot-cart{
  flex:0 0 auto !important;
  margin-top:0 !important;
  box-shadow:0 -12px 28px rgba(15,23,42,.07) !important;
}

.ddp-scope #ddp-cart-panel .ddp-line{
  grid-template-columns:54px minmax(0,1fr) auto !important;
  gap:12px !important;
  width:min(920px,100%) !important;
  padding:10px 12px !important;
  border:1px solid #e7eaf0 !important;
  border-radius:14px !important;
  background:#fff !important;
  box-shadow:0 6px 18px rgba(15,23,42,.038) !important;
  align-items:center !important;
}
.ddp-scope #ddp-cart-panel .ddp-line:hover{
  border-color:#d9dee7 !important;
  box-shadow:0 9px 22px rgba(15,23,42,.055) !important;
}
.ddp-scope #ddp-cart-panel .ddp-thumb{
  width:50px !important;
  height:50px !important;
  border-radius:12px !important;
  border-color:#edf0f4 !important;
}
.ddp-scope #ddp-cart-panel .ddp-line-info{
  gap:4px !important;
}
.ddp-scope #ddp-cart-panel .ddp-line-name{
  font-size:15px !important;
  line-height:1.15 !important;
  letter-spacing:0 !important;
}
.ddp-scope #ddp-cart-panel .ddp-line-meta{
  color:#6b7280 !important;
  opacity:1 !important;
  font-size:11.5px !important;
}
.ddp-scope #ddp-cart-panel .ddp-addons{
  margin-top:4px !important;
  gap:5px !important;
}
.ddp-scope #ddp-cart-panel .ddp-addons .ddp-addon-li{
  padding:4px 8px !important;
  border-color:#e8ebf0 !important;
  background:#f7f8fa !important;
  color:#3f4650 !important;
  font-size:11.5px !important;
}

.ddp-scope #ddp-cart-panel .ddp-line-ctrls{
  align-self:center !important;
  display:grid !important;
  grid-auto-flow:column !important;
  align-items:center !important;
  gap:0 !important;
}
.ddp-scope #ddp-cart-panel .ddp-line-ctrls > :nth-child(1):is(button,a):not(.x):not(.ddp-remove),
.ddp-scope #ddp-cart-panel .ddp-line-ctrls > :nth-child(3):is(button,a):not(.x):not(.ddp-remove){
  width:34px !important;
  height:34px !important;
  font-size:18px !important;
  border-color:#e0e5ec !important;
}
.ddp-scope #ddp-cart-panel .ddp-line-ctrls > :nth-child(2){
  width:44px !important;
  min-width:44px !important;
  height:34px !important;
  border-color:#e0e5ec !important;
  font-size:14px !important;
}
.ddp-scope #ddp-cart-panel .ddp-line-total{
  min-width:84px !important;
  margin-left:14px !important;
  color:#111 !important;
  font-size:15px !important;
  font-weight:900 !important;
  align-self:center !important;
}
.ddp-scope #ddp-cart-panel .ddp-line-ctrls .ddp-cr{
  margin-left:10px !important;
  width:34px !important;
  height:34px !important;
  border-color:#e4e8ef !important;
  color:#ef4444 !important;
}

@media (max-width:640px){
  .ddp-scope .ddp-modal.ddp-cart-only,
  #ddp-modal.ddp-cart-only{
    width:100vw !important;
    height:auto !important;
    max-height:88dvh !important;
  }
  .ddp-scope .ddp-modal.ddp-cart-only #ddp-cart-panel{
    max-height:clamp(240px,58dvh,520px) !important;
  }
  .ddp-scope #ddp-cart-panel .ddp-line{
    grid-template-columns:50px 1fr !important;
    gap:10px !important;
    padding:10px !important;
  }
  .ddp-scope #ddp-cart-panel .ddp-line-ctrls{
    grid-column:1 / -1 !important;
    justify-self:end !important;
  }
  .ddp-scope #ddp-cart-panel .ddp-line-total{
    min-width:auto !important;
    margin-left:12px !important;
  }
}

/* ===================================================================
   CATEGORY SECTION headings — more restaurant feel
   =================================================================== */
.ddp-scope.ddp-cat-sections .ddp-cat-title.ddp-cat-title-plain{
  font-size: 20px !important;
  font-weight: 900 !important;
  color: #111 !important;
  letter-spacing: -.3px !important;
  border-bottom: 2px solid #f0f0f0 !important;
  padding-bottom: 10px !important;
  margin-bottom: 14px !important;
}

/* ===================================================================
   BACKGROUND — off-white page feel for menu area
   =================================================================== */
/* .ddp-scope.ddp-cat-sections,
.ddp-scope.ddp-tabs-layout{
  background: #fafafa !important;
  border-radius: 20px !important;
  padding: 16px !important;
} */
@media (max-width: 640px){
  .ddp-scope.ddp-cat-sections,
  .ddp-scope.ddp-tabs-layout{
    padding: 12px 10px !important;
    border-radius: 14px !important;
  }
}