/* Araz White House production CSS bundle. */

/* === app-common.css === */
/* Auto-split from app.css. Edit source sections carefully. */
@keyframes bowlAdded {
  0% { box-shadow: 0 0 0 rgba(39,90,83,0); }
  45% { box-shadow: 0 0 0 7px rgba(39,90,83,.18); }
  100% { box-shadow: 0 18px 45px rgba(15,23,42,.08); }
}

@keyframes campaignIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }

@keyframes cartStepLineTop {
  0% { left: -100%; }
  50%, 100% { left: 100%; }
}

@keyframes cartStepLineBottom {
  0% { right: -100%; }
  50%, 100% { right: 100%; }
}

* { box-sizing: border-box; }

body { margin: 0; font-family: var(--font); font-size: var(--body-size); color: var(--text); background: var(--surface); line-height: 1.6; }

a { color: inherit; text-decoration: none; }

img { max-width: 100%; display: block; }

h1 { font-size: clamp(32px, 5vw, 51px); line-height: 1.25; color: var(--dark); }

button { cursor: pointer; }

input { width: 100%; min-height: 44px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 4px; background: white; color: var(--text); }

@keyframes selectedCategoryPop {
  0% { opacity: 0; transform: translateY(12px) scale(.86); }
  58% { opacity: 1; transform: translateY(-2px) scale(1.05); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes selectedCategoryFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

@keyframes selectedCategoryShine {
  0%, 55% { transform: translateX(-80%) rotate(8deg); opacity: 0; }
  68% { opacity: .9; }
  100% { transform: translateX(80%) rotate(8deg); opacity: 0; }
}

@keyframes selectedCategoryTextFlow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes selectedCategoryLine {
  0%, 100% { transform: scaleX(.45); opacity: .45; }
  50% { transform: scaleX(1); opacity: 1; }
}

@keyframes categoryButtonPulse {
  0% { box-shadow: inset 0 0 0 0 rgba(230, 201, 122, .45); }
  100% { box-shadow: inset 0 0 0 14px rgba(230, 201, 122, 0); }
}

@keyframes categoryTopBubbles {
  0% {
    background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%, 40% 90%, 55% 90%, 70% 90%;
  }
  50% {
    background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%, 50% 50%, 65% 20%, 90% 30%;
  }
  100% {
    background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%, 50% 40%, 65% 10%, 90% 20%;
    background-size: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
  }
}

@keyframes categoryBottomBubbles {
  0% {
    background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%, 70% -10%, 70% 0%;
  }
  50% {
    background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%, 105% 0%;
  }
  100% {
    background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%, 110% 10%;
    background-size: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
  }
}

@keyframes cafeAdMarquee {
  from { transform: translateX(100vw); }
  to { transform: translateX(-100%); }
}

@keyframes whatsappLineTop {
  0% { left: -100%; }
  50%, 100% { left: 100%; }
}

@keyframes whatsappLineRight {
  0% { top: -100%; }
  50%, 100% { top: 100%; }
}

@keyframes whatsappLineBottom {
  0% { right: -100%; }
  50%, 100% { right: 100%; }
}

@keyframes whatsappLineLeft {
  0% { bottom: -100%; }
  50%, 100% { bottom: 100%; }
}

@keyframes qrCardSelectedPulse {
  0% {
    transform: scale(1);
    box-shadow: 0 4px 16px rgba(39, 90, 83, .08);
  }
  42% {
    transform: scale(1.035);
    box-shadow: 0 0 0 5px rgba(39, 90, 83, .12), 0 22px 40px rgba(39, 90, 83, .20);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 18px 34px rgba(39, 90, 83, .16);
  }
}

/* === app-web.css === */
/* Auto-split from app.css. Edit source sections carefully. */
:root {
  --brand: #978667;
  --brand-soft: #ebd7b2;
  --text: #333;
  --muted: #6c757d;
  --dark: #212529;
  --line: #dee2e6;
  --surface: #fff;
  --soft: #f8f9fa;
  --font: Montserrat, "Segoe UI", sans-serif;
  --body-size: 16px;
  --parallax-y: 0px;
}

.bowl-group-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 18px;
}

.bowl-option-create { background: #f8fafc; border-radius: 16px; padding: 14px; border: 1px solid #e5e7eb; }

.bowl-option-list { display: grid; gap: 10px; max-height: 520px; overflow: auto; padding-right: 4px; }

.bowl-option-media {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: #f6f2eb;
  overflow: hidden;
  align-self: center;
}

.bowl-option-media img { width: 100%; height: 100%; object-fit: contain; }

.bowl-option-media span { font-size: 24px; font-weight: 900; color: #275a53; }

.bowl-option-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.bowl-option-actions button {
  min-height: 38px;
  border-radius: 11px;
}

.bowl-price-list {
  display: grid;
  gap: 10px;
}

.bowl-custom-html {
  grid-column: 1 / -1;
}

.bowl-custom-html img {
  max-width: 100%;
  height: auto;
}

.parallax-page {
  position: relative;
  isolation: isolate;
  background: transparent !important;
}

.parallax-page::before {
  content: "";
  position: fixed;
  inset: -14vh 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(255,255,255,.86), rgba(255,255,255,.92)),
    url("/arazotel-assets/page-images/wp-content__uploads__2025__03__hd_03w.webp") center / cover no-repeat;
  opacity: .42;
  transform: translate3d(0, var(--parallax-y), 0);
  will-change: transform;
}

.parallax-page > * {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
.parallax-page::before {
    transform: none;
  }
}

/* Admin component-specific previews */
.typography-preview {
  display: grid;
  gap: 8px;
  padding: 24px;
  border: 1px solid #eee7dd;
  border-radius: 14px;
  background: #fffaf2;
  box-shadow: 0 10px 24px rgba(31, 35, 54, .06);
}

.typography-preview span {
  color: #978667;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  white-space: nowrap;
}

.typography-preview h3 {
  margin: 0;
  color: #20233a;
  font-size: 22px;
}

.typography-preview p {
  margin: 0;
  color: #6f7280;
  line-height: 1.7;
}

.typography-preview strong {
  color: #20233a;
  font-size: 28px;
  font-variant-numeric: tabular-nums;
}

.full { grid-column: 1 / -1; }

.campaign-copy { padding: 22px; display: grid; gap: 10px; align-content: center; }

.campaign-copy span { color: var(--brand); font-weight: 800; font-size: 12px; text-transform: uppercase; }

.campaign-copy h2 { margin: 0; color: #17202b; font-size: 22px; line-height: 1.18; }

.campaign-copy p { margin: 0; color: #5d6675; line-height: 1.5; }

.campaign-close { position: absolute; top: 10px; right: 10px; z-index: 2; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(255,255,255,.9); color: #17202b; font-size: 22px; line-height: 1; cursor: pointer; }

.campaign-code { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; min-height: 48px; border: 1px dashed var(--brand); border-radius: 14px; background: rgba(151,134,103,.08); color: #17202b; padding: 8px 12px; cursor: pointer; }

.campaign-code strong { font-size: 18px; }

.campaign-code small { color: var(--brand); font-weight: 800; }

.campaign-action { justify-self: start; min-height: 42px; display: inline-flex; align-items: center; padding: 0 18px; border-radius: 999px; background: var(--brand); color: var(--button-text); font-weight: 800; }

.campaign-never { display: inline-flex; align-items: center; gap: 8px; color: #5d6675; font-size: 13px; }

.campaign-banner { position: static; max-width: min(1120px, calc(100vw - 40px)); margin: 20px auto 0; grid-column: 1 / -1; }

.campaign-bar.visible { max-width: min(1120px, calc(100vw - 40px)); grid-template-columns: minmax(0,1fr); border-radius: 12px; }

.campaign-bar img { display: none; }

.campaign-bar .campaign-copy { grid-template-columns: minmax(0,1fr) auto auto; align-items: center; padding-right: 54px; }

.campaign-splash.visible, .campaign-popup.visible { animation: campaignIn .22s ease-out both; }

.campaign-stats { display: flex; flex-wrap: wrap; gap: 8px; }

.campaign-stats span { padding: 7px 10px; border-radius: 999px; background: #f3eee7; color: #4b514d; font-size: 12px; font-weight: 800; }

.campaign-editor-grid { display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 24px; align-items: start; }

.campaign-editor-form {
  border-color: rgba(245, 171, 30, .26) !important;
  background: linear-gradient(135deg, #fff 0%, #fffaf0 100%) !important;
}

.campaign-editor-form > .campaign-editor-grid > div > .record-title {
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(245, 171, 30, .10);
  border: 1px solid rgba(245, 171, 30, .20);
}

.campaign-editor-form > .campaign-editor-grid > div > .record-title strong {
  color: #9a5d00;
}

.campaign-preview-device { min-height: 560px; border-radius: 34px; padding: 18px; background: #1b1c22; box-shadow: 0 18px 42px rgba(0,0,0,.18); display: grid; place-items: end center; }

.campaign-preview-card { width: 100%; overflow: hidden; position: relative; border-radius: 18px; background: #fff; border: 1px solid rgba(151,134,103,.22); box-shadow: 0 18px 50px rgba(0,0,0,.20); display: grid; grid-template-columns: 118px minmax(0,1fr); }

.campaign-preview-card > button { position: absolute; top: 9px; right: 9px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(255,255,255,.9); color: #17202b; font-size: 20px; }

.campaign-preview-card img { width: 100%; height: 100%; min-height: 180px; object-fit: cover; }

.campaign-preview-card div { padding: 22px 18px; display: grid; gap: 9px; align-content: center; }

.campaign-preview-card small { color: #978667; font-weight: 900; text-transform: uppercase; }

.campaign-preview-card h3 { margin: 0; color: #17202b; font-size: 21px; line-height: 1.18; }

.campaign-preview-card p { margin: 0; color: #5d6675; line-height: 1.45; }

.campaign-preview-card strong { display: flex; align-items: center; justify-content: center; min-height: 42px; border: 1px dashed #978667; border-radius: 12px; background: rgba(151,134,103,.08); color: #17202b; }

.campaign-preview-card a { justify-self: start; min-height: 40px; display: inline-flex; align-items: center; padding: 0 16px; border-radius: 999px; background: #978667; color: #fff; font-weight: 900; }

.campaign-preview-banner { grid-template-columns: 150px minmax(0,1fr); align-self: start; margin-top: 80px; }

.campaign-preview-bar { grid-template-columns: 1fr; align-self: start; margin-top: 120px; }

.campaign-preview-bar img { display: none; }

.campaign-preview-bar div { grid-template-columns: 1fr auto; align-items: center; }

.campaign-preview-bar p, .campaign-preview-bar strong { grid-column: 1 / -1; }

.campaign-preview-splash { grid-template-columns: 1fr; max-width: 300px; align-self: center; }

.campaign-preview-splash img { height: 210px; }

.campaign-editor-title {
  align-items: flex-start !important;
  gap: 14px;
}

.campaign-editor-title > div:first-child {
  min-width: 0;
}

.campaign-editor-title p {
  margin: 6px 0 0;
}

.campaign-editor-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid #eef2f0;
}

.campaign-preview-modal[hidden] {
  display: none !important;
}

.campaign-preview-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  padding: 24px;
}

.campaign-preview-modal-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  background: rgba(15, 23, 42, .58);
  backdrop-filter: blur(8px);
}

.campaign-preview-modal-panel {
  position: relative;
  z-index: 1;
  width: min(620px, 100%);
  max-height: min(760px, calc(100vh - 48px));
  overflow: auto;
  border-radius: 26px;
  background: #111827;
  box-shadow: 0 32px 90px rgba(0, 0, 0, .36);
}

.campaign-preview-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  color: #fff;
}

.campaign-preview-modal-head span {
  display: block;
  color: rgba(255,255,255,.62);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.campaign-preview-modal-head strong {
  display: block;
  font-size: 18px;
  line-height: 1.2;
}

.campaign-preview-modal-head button {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  color: #fff;
  font-size: 24px;
}

.campaign-preview-modal-body {
  min-height: 440px;
  display: grid;
  place-items: center;
  padding: 28px;
  background:
    radial-gradient(circle at 50% 10%, rgba(230, 201, 122, .22), transparent 34%),
    linear-gradient(180deg, #1f2937 0%, #111827 100%);
}

.campaign-preview-modal-body .campaign-preview-card {
  width: min(480px, 100%);
}

body.admin-modal-open {
  overflow: hidden;
}

@media (max-width: 720px) {
  .campaign-editor-title {
    flex-direction: column;
  }

  .campaign-editor-title .record-actions,
  .campaign-editor-actions {
    width: 100%;
    justify-content: stretch;
  }

  .campaign-editor-title .btn,
  .campaign-editor-actions .btn {
    flex: 1;
  }
}

.campaign-marquee-admin {
  display: grid;
  gap: 18px;
  border-color: rgba(39, 90, 83, .14);
  background: linear-gradient(135deg, #ffffff 0%, #f4faf8 100%);
}

.campaign-marquee-admin .record-title {
  align-items: flex-start;
}

.campaign-marquee-admin .status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(39, 90, 83, .10);
  color: #275a53;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.campaign-marquee-preview {
  overflow: hidden;
  border-radius: 16px;
  background: var(--marquee-bg, #2d2d2d);
  color: var(--marquee-text, #fff);
  border: 1px solid rgba(255,255,255,.08);
}

/* Managed open buffet breakfast page */
.buffet-breakfast-page {
  background: #fffaf4;
  color: #17202b;
}

.buffet-breakfast-page.is-disabled {
  opacity: .72;
}

.buffet-breakfast-hero {
  min-height: 520px;
}

.buffet-breakfast-hero .breakfast-hero-copy span {
  margin-top: 14px;
  display: block;
  max-width: 760px;
  color: rgba(255,255,255,.84);
  font-size: clamp(18px, 2.2vw, 26px);
  font-weight: 700;
}

.buffet-breakfast-intro {
  max-width: 1180px;
  margin: -72px auto 0;
  position: relative;
  z-index: 2;
  padding: 0 28px 78px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 24px;
  align-items: stretch;
}

.buffet-breakfast-copy,
.buffet-price-card {
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(151,134,103,.22);
  border-radius: 18px;
  box-shadow: 0 22px 54px rgba(39,90,83,.10);
}

.buffet-breakfast-copy {
  padding: clamp(26px, 4vw, 46px);
}

.buffet-breakfast-copy h2 {
  margin: 8px 0 18px;
  font-size: clamp(32px, 4vw, 54px);
  line-height: 1.04;
}

.buffet-breakfast-copy p:not(.eyebrow) {
  margin: 0;
  color: #5f6673;
  font-size: 17px;
  line-height: 1.75;
}

.buffet-breakfast-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.buffet-price-card {
  padding: 30px;
  display: grid;
  align-content: center;
  gap: 10px;
  background: linear-gradient(145deg, #275a53, #16362f);
  color: #fff;
}

.buffet-price-card span {
  color: #e6c97a;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: 12px;
}

.buffet-price-card strong {
  font-size: clamp(42px, 5vw, 62px);
  line-height: 1;
}

.buffet-price-card small {
  color: rgba(255,255,255,.78);
  line-height: 1.55;
}

.buffet-feature-section {
  max-width: 1180px;
  margin: 0 auto;
  padding: 28px 28px 88px;
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 42px;
  align-items: center;
}

.buffet-feature-section > img {
  width: 100%;
  min-height: 420px;
  height: 100%;
  object-fit: cover;
  border-radius: 22px;
  box-shadow: 0 24px 60px rgba(31,35,54,.12);
}

.buffet-feature-section h2 {
  margin: 8px 0 22px;
  font-size: clamp(30px, 3.6vw, 48px);
  line-height: 1.06;
}

.buffet-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.buffet-feature-grid article {
  padding: 20px;
  background: #fff;
  border: 1px solid #eadfcd;
  border-radius: 16px;
}

.buffet-feature-grid strong {
  display: block;
  color: #275a53;
  margin-bottom: 8px;
}

.buffet-feature-grid span {
  color: #687080;
  line-height: 1.55;
}

.buffet-gallery-section {
  background: #fff;
  padding: 84px max(24px, calc((100vw - 1180px) / 2 + 24px)) 110px;
}

.buffet-gallery-head {
  display: grid;
  gap: 8px;
  margin-bottom: 24px;
}

.buffet-gallery-head h2 {
  margin: 0;
  font-size: clamp(28px, 3.2vw, 44px);
}

.buffet-gallery-head span {
  color: #77808f;
}

.buffet-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.buffet-gallery-grid figure {
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  background: #f5f1e9;
  min-height: 220px;
}

.buffet-gallery-grid img {
  width: 100%;
  height: 100%;
  min-height: 220px;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}

.buffet-gallery-grid figure:hover img {
  transform: scale(1.035);
}

.buffet-gallery-more {
  margin-top: 18px;
}

.buffet-gallery-more summary {
  cursor: pointer;
  width: fit-content;
  margin: 0 auto 20px;
  padding: 12px 20px;
  border-radius: 999px;
  background: #275a53;
  color: #fff;
  font-weight: 900;
}

@media (max-width: 900px) {
  .buffet-breakfast-intro,
  .buffet-feature-section {
    grid-template-columns: 1fr;
  }
  .buffet-breakfast-intro {
    margin-top: -44px;
  }
  .buffet-gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* General Theme final layout guard */
body.admin-body .theme-management-form .theme-management-grid {
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr) !important;
  gap: 22px !important;
  align-items: start !important;
}

body.admin-body .theme-management-form .theme-palette-panel {
  min-width: 0 !important;
  overflow: hidden !important;
}

body.admin-body .theme-management-form .theme-palette-panel,
body.admin-body .theme-management-form .theme-preview-panel {
  order: 0 !important;
}

body.admin-body .theme-management-form .theme-preset-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important;
  gap: 12px !important;
  align-items: stretch !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.admin-body .theme-management-form .theme-preset-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-rows: auto 1fr auto !important;
  gap: 7px 8px !important;
  min-width: 0 !important;
  min-height: 104px !important;
  width: 100% !important;
  padding: 12px !important;
  border-radius: 14px !important;
  text-align: left !important;
  line-height: 1.1 !important;
  overflow: hidden !important;
}

body.admin-body .theme-management-form .theme-preset-card strong {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  align-self: center !important;
  margin: 0 !important;
  max-width: 100% !important;
  color: inherit !important;
  font-size: 15px !important;
  line-height: 1.05 !important;
  font-weight: 950 !important;
  overflow-wrap: anywhere !important;
}

body.admin-body .theme-management-form .theme-preset-card em,
body.admin-body .theme-management-form .theme-preset-card .theme-preset-no {
  margin: 0 !important;
  font-size: 10px !important;
  line-height: 1.1 !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

body.admin-body .theme-management-form .theme-swatch-row {
  grid-column: 1 / -1 !important;
  display: flex !important;
  gap: 5px !important;
}

body.admin-body .theme-management-form .theme-swatch-row i {
  width: 15px !important;
  height: 15px !important;
  flex: 0 0 15px !important;
}

@media (max-width: 1120px) {
  body.admin-body .theme-management-form .theme-management-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 640px) {
  body.admin-body .theme-management-form .theme-overview-strip,
  body.admin-body .theme-management-form .theme-preset-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Kayan Yazı Yönetimi usability layout */
.campaign-marquee-admin {
  gap: 22px;
  padding: 22px !important;
}

.campaign-marquee-workbench,
.campaign-marquee-editor-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
  gap: 18px;
  align-items: stretch;
}

.campaign-marquee-preview-card,
.campaign-marquee-color-form,
.campaign-marquee-form,
.campaign-marquee-list {
  min-width: 0;
  border: 1px solid #e7ece9;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 16px 38px rgba(15, 23, 42, .06);
}

.campaign-marquee-preview-card,
.campaign-marquee-list {
  display: grid;
  gap: 14px;
  padding: 16px;
}

.campaign-marquee-preview-card .mini-section-head,
.campaign-marquee-color-form .mini-section-head,
.campaign-marquee-form .mini-section-head,
.campaign-marquee-list .mini-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
}

.campaign-marquee-preview-card .mini-section-head span,
.campaign-marquee-color-form .mini-section-head span,
.campaign-marquee-form .mini-section-head span,
.campaign-marquee-list .mini-section-head span {
  display: block;
  color: #7a8796;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.campaign-marquee-preview-card .mini-section-head strong,
.campaign-marquee-color-form .mini-section-head strong,
.campaign-marquee-form .mini-section-head strong,
.campaign-marquee-list .mini-section-head strong {
  display: block;
  color: #172033;
  font-size: 18px;
  line-height: 1.15;
}

.campaign-marquee-preview-card .mini-section-head em {
  padding: 7px 10px;
  border-radius: 999px;
  background: #eef7f4;
  color: #275a53;
  font-size: 12px;
  font-style: normal;
  font-weight: 950;
  white-space: nowrap;
}

.campaign-marquee-preview {
  min-height: 64px;
  border-radius: 18px;
}

.campaign-marquee-hints {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.campaign-marquee-hints span {
  padding: 7px 10px;
  border-radius: 999px;
  background: #f5f7f8;
  color: #667085;
  font-size: 12px;
  font-weight: 800;
}

.campaign-marquee-color-form {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  padding: 16px !important;
  margin: 0 !important;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
}

.campaign-marquee-color-form .mini-section-head,
.campaign-marquee-color-form button,
.campaign-marquee-form .mini-section-head {
  grid-column: 1 / -1;
}

.campaign-marquee-color-form input[type="color"] {
  height: 48px;
}

.campaign-marquee-form {
  padding: 16px;
  background: linear-gradient(135deg, #ffffff 0%, #fbfdfc 100%);
}

.campaign-marquee-form input,
.campaign-marquee-form select {
  min-height: 44px;
  border: 1px solid #dfe7e4;
  border-radius: 14px;
  background: #fff;
}

.campaign-marquee-list {
  align-content: start;
  background: #fbfcfd;
}

.campaign-marquee-list .empty-state {
  margin: 0;
  padding: 18px;
  border: 1px dashed #d0d5dd;
  border-radius: 16px;
  background: #fff;
}

.campaign-marquee-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid #e7ece9;
  border-radius: 16px;
  background: #fff;
}

.campaign-marquee-item strong {
  display: block;
  color: #172033;
  font-size: 14px;
  line-height: 1.2;
}

.campaign-marquee-item p {
  margin: 4px 0 0;
  color: #667085;
  font-size: 12px;
}

.campaign-marquee-item small {
  display: block;
  margin-top: 6px;
  color: #98a2b3;
  font-size: 11px;
  font-weight: 800;
}

.campaign-marquee-item > span {
  padding: 7px 10px;
  border-radius: 999px;
  background: #f2f4f7;
  color: #667085;
  font-size: 11px;
  font-weight: 950;
}

.campaign-marquee-item.is-active > span {
  background: #e9f7f1;
  color: #087443;
}

.campaign-marquee-item form {
  margin: 0;
}

.campaign-marquee-item .btn {
  min-height: 34px;
  padding: 0 12px;
}

@media (max-width: 1120px) {
  .campaign-marquee-workbench,
  .campaign-marquee-editor-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .campaign-marquee-color-form {
    grid-template-columns: 1fr !important;
  }

  .campaign-marquee-item {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
}

@media (max-width: 560px) {
  .buffet-breakfast-hero {
    min-height: 420px;
  }
  .buffet-breakfast-intro,
  .buffet-feature-section {
    padding-left: 16px;
    padding-right: 16px;
  }
  .buffet-feature-grid,
  .buffet-gallery-grid {
    grid-template-columns: 1fr;
  }
  .buffet-feature-section > img {
    min-height: 300px;
  }
}

/* 20 premium mobile navbar themes (QR menu live output) */
@media (max-width: 767px) {
  body.qr-body .mobile-menu-tabbar[class*="template-nav-"] {
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    bottom: calc(10px + env(safe-area-inset-bottom)) !important;
    width: auto !important;
    height: var(--mobile-menu-height, 66px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    padding: 7px !important;
    border: 1px solid rgba(17, 24, 39, .07) !important;
    border-radius: 24px !important;
    background: var(--mobile-menu-bg, #fff) !important;
    box-shadow: 0 18px 38px rgba(17, 24, 39, .16) !important;
    z-index: 1000 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    font-family: var(--font, Inter, "Segoe UI", Arial, sans-serif) !important;
  }

  body.qr-body .mobile-menu-tabbar[class*="template-nav-"] .nav-item {
    position: relative !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    min-height: 48px !important;
    border: 0 !important;
    border-radius: 18px !important;
    background: transparent !important;
    color: #778194 !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    text-decoration: none !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    overflow: visible !important;
    transition: color .24s ease, background .24s ease, transform .24s ease, box-shadow .24s ease, flex .24s ease !important;
  }

  body.qr-body .mobile-menu-tabbar[class*="template-nav-"] .nav-item .material-icons,
  body.qr-body .mobile-menu-tabbar[class*="template-nav-"] .nav-item > span:not(.sr-only) {
    font-size: 21px !important;
    line-height: 1 !important;
  }

  body.qr-body .mobile-menu-tabbar[class*="template-nav-"] .nav-item em {
    display: block !important;
    max-width: 100% !important;
    font-size: 10px !important;
    font-style: normal !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    color: currentColor !important;
  }

  body.qr-body .mobile-menu-tabbar[class*="template-nav-"].hide-labels .nav-item em {
    display: none !important;
  }

  body.qr-body .mobile-menu-tabbar[class*="template-nav-"] .nav-item.active {
    color: var(--mobile-menu-active, #275a53) !important;
  }

  body.qr-body .mobile-menu-tabbar[class*="template-nav-"] .cart strong {
    position: absolute !important;
    top: 4px !important;
    right: 16% !important;
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 5px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 999px !important;
    background: #e11d48 !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    box-shadow: 0 8px 16px rgba(225, 29, 72, .24) !important;
    text-shadow: none !important;
  }

  body.qr-body .mobile-menu-tabbar.template-nav-01 .nav-item.active {
    flex: 1.55 1 0 !important;
    color: #fff !important;
    background: var(--mobile-menu-active, #275a53) !important;
    box-shadow: 0 12px 24px rgba(39, 90, 83, .26) !important;
  }

  body.qr-body .mobile-menu-tabbar.template-nav-02 {
    border-radius: 30px !important;
  }
  body.qr-body .mobile-menu-tabbar.template-nav-02 .nav-item.active {
    transform: translateY(-13px) !important;
    color: var(--mobile-menu-active, #275a53) !important;
  }
  body.qr-body .mobile-menu-tabbar.template-nav-02 .nav-item.active::before {
    content: "" !important;
    position: absolute !important;
    inset: auto 50% -4px auto !important;
    width: 56px !important;
    height: 56px !important;
    border-radius: 999px !important;
    background: #fff !important;
    transform: translateX(50%) !important;
    z-index: -1 !important;
    box-shadow: 0 12px 24px rgba(17, 24, 39, .08) !important;
  }

  body.qr-body .mobile-menu-tabbar.template-nav-03 .nav-item:nth-child(1) { --pill-bg: #e8f4f1; --pill-color: #275a53; }
  body.qr-body .mobile-menu-tabbar.template-nav-03 .nav-item:nth-child(2) { --pill-bg: #fff5d8; --pill-color: #8a6410; }
  body.qr-body .mobile-menu-tabbar.template-nav-03 .nav-item:nth-child(3) { --pill-bg: #e0f7ef; --pill-color: #0f766e; }
  body.qr-body .mobile-menu-tabbar.template-nav-03 .nav-item:nth-child(4) { --pill-bg: #ffe7ea; --pill-color: #be123c; }
  body.qr-body .mobile-menu-tabbar.template-nav-03 .nav-item:nth-child(5) { --pill-bg: #e0f2fe; --pill-color: #0369a1; }
  body.qr-body .mobile-menu-tabbar.template-nav-03 .nav-item.active {
    flex: 1.55 1 0 !important;
    color: var(--pill-color) !important;
    background: var(--pill-bg) !important;
  }

  body.qr-body .mobile-menu-tabbar.template-nav-04,
  body.qr-body .mobile-menu-tabbar.template-nav-15 {
    background: rgba(255, 255, 255, .68) !important;
    border-color: rgba(255, 255, 255, .8) !important;
    backdrop-filter: blur(18px) saturate(130%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(130%) !important;
  }
  body.qr-body .mobile-menu-tabbar.template-nav-04 .nav-item.active,
  body.qr-body .mobile-menu-tabbar.template-nav-15 .nav-item.active {
    background: rgba(39, 90, 83, .12) !important;
    color: #275a53 !important;
  }

  body.qr-body .mobile-menu-tabbar.template-nav-05 {
    background: #24170f !important;
    border-color: rgba(230, 201, 122, .24) !important;
  }
  body.qr-body .mobile-menu-tabbar.template-nav-05 .nav-item { color: rgba(255, 255, 255, .68) !important; }
  body.qr-body .mobile-menu-tabbar.template-nav-05 .nav-item.active {
    background: #e6c97a !important;
    color: #24170f !important;
  }

  body.qr-body .mobile-menu-tabbar.template-nav-06 {
    border-radius: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    border-width: 1px 0 0 !important;
    box-shadow: 0 -8px 24px rgba(17, 24, 39, .08) !important;
  }
  body.qr-body .mobile-menu-tabbar.template-nav-06 .nav-item.active::after,
  body.qr-body .mobile-menu-tabbar.template-nav-18 .nav-item.active::after {
    content: "" !important;
    position: absolute !important;
    left: 28% !important;
    right: 28% !important;
    bottom: 2px !important;
    height: 3px !important;
    border-radius: 999px !important;
    background: var(--mobile-menu-active, #275a53) !important;
  }

  body.qr-body .mobile-menu-tabbar.template-nav-07,
  body.qr-body .mobile-menu-tabbar.template-nav-13 {
    background: #0c1020 !important;
    border-color: rgba(255, 255, 255, .08) !important;
  }
  body.qr-body .mobile-menu-tabbar.template-nav-07 .nav-item,
  body.qr-body .mobile-menu-tabbar.template-nav-13 .nav-item { color: rgba(255, 255, 255, .62) !important; }
  body.qr-body .mobile-menu-tabbar.template-nav-07 .nav-item.active {
    background: rgba(230, 201, 122, .14) !important;
    color: #e6c97a !important;
  }
  body.qr-body .mobile-menu-tabbar.template-nav-13 .nav-item.active {
    color: #fff !important;
    box-shadow: inset 0 0 0 1px rgba(230, 201, 122, .65), 0 0 20px rgba(230, 201, 122, .22) !important;
  }

  body.qr-body .mobile-menu-tabbar.template-nav-08 {
    left: 16px !important;
    right: 16px !important;
    padding: 7px 10px !important;
  }
  body.qr-body .mobile-menu-tabbar.template-nav-08 .nav-item:nth-child(3).active,
  body.qr-body .mobile-menu-tabbar.template-nav-08 .cart.active {
    transform: translateY(-20px) scale(1.04) !important;
    background: var(--mobile-menu-active, #275a53) !important;
    color: #fff !important;
    box-shadow: 0 14px 28px rgba(39, 90, 83, .3) !important;
  }

  body.qr-body .mobile-menu-tabbar.template-nav-09 {
    background: linear-gradient(135deg, #fffaf0, #eef8f5) !important;
  }
  body.qr-body .mobile-menu-tabbar.template-nav-09 .nav-item.active,
  body.qr-body .mobile-menu-tabbar.template-nav-14 .nav-item.active {
    background: #fff !important;
    color: #275a53 !important;
    box-shadow: 0 8px 18px rgba(39, 90, 83, .12) !important;
  }

  body.qr-body .mobile-menu-tabbar.template-nav-10 {
    max-width: 360px !important;
    margin-inline: auto !important;
    height: 58px !important;
    border-radius: 19px !important;
  }
  body.qr-body .mobile-menu-tabbar.template-nav-10 .nav-item em { display: none !important; }
  body.qr-body .mobile-menu-tabbar.template-nav-10 .nav-item.active {
    background: #edf7f4 !important;
    color: #275a53 !important;
  }

  body.qr-body .mobile-menu-tabbar.template-nav-11 {
    padding: 0 !important;
    gap: 0 !important;
    border-radius: 22px !important;
    overflow: hidden !important;
  }
  body.qr-body .mobile-menu-tabbar.template-nav-11 .nav-item {
    border-radius: 0 !important;
    min-height: 100% !important;
    border-right: 1px solid rgba(17, 24, 39, .06) !important;
  }
  body.qr-body .mobile-menu-tabbar.template-nav-11 .nav-item.active {
    background: #275a53 !important;
    color: #fff !important;
  }

  body.qr-body .mobile-menu-tabbar.template-nav-12 .nav-item.active {
    transform: translateY(-7px) !important;
    background: #275a53 !important;
    color: #fff !important;
    border-radius: 999px !important;
  }

  body.qr-body .mobile-menu-tabbar.template-nav-14 {
    background: #fff8e7 !important;
    border-color: rgba(138, 101, 21, .12) !important;
  }

  body.qr-body .mobile-menu-tabbar.template-nav-16 .nav-item.active::before {
    content: "" !important;
    position: absolute !important;
    top: 6px !important;
    width: 7px !important;
    height: 7px !important;
    border-radius: 999px !important;
    background: #e6c97a !important;
  }

  body.qr-body .mobile-menu-tabbar.template-nav-17 {
    border-radius: 14px !important;
    border-style: dashed !important;
  }
  body.qr-body .mobile-menu-tabbar.template-nav-17 .nav-item.active {
    background: #f8f1df !important;
    color: #275a53 !important;
  }

  body.qr-body .mobile-menu-tabbar.template-nav-18 {
    border-radius: 999px !important;
  }

  body.qr-body .mobile-menu-tabbar.template-nav-19 {
    font-family: Georgia, "Times New Roman", serif !important;
  }
  body.qr-body .mobile-menu-tabbar.template-nav-19 .nav-item.active {
    color: #2f3a2f !important;
    background: #f4ead0 !important;
  }

  body.qr-body .mobile-menu-tabbar.template-nav-20 {
    background: linear-gradient(135deg, #10211f, #275a53) !important;
    border-color: rgba(230, 201, 122, .28) !important;
  }
  body.qr-body .mobile-menu-tabbar.template-nav-20 .nav-item { color: rgba(255, 255, 255, .72) !important; }
  body.qr-body .mobile-menu-tabbar.template-nav-20 .nav-item.active {
    background: #e6c97a !important;
    color: #10211f !important;
  }
}

/* QR product add-to-cart button templates */
.cart-button-template-brand-pill { --cb-bg:#275A53; --cb-color:#fff; --cb-border:#275A53; --cb-shadow:0 12px 24px rgba(39,90,83,.18); --cb-radius:999px; --cb-accent:#E6C97A; }
.cart-button-template-gold-glow { --cb-bg:#E6C97A; --cb-color:#172033; --cb-border:#E6C97A; --cb-shadow:0 14px 30px rgba(230,201,122,.34); --cb-radius:999px; --cb-accent:#275A53; }
.cart-button-template-dark-luxe { --cb-bg:#111827; --cb-color:#fff; --cb-border:#111827; --cb-shadow:0 16px 34px rgba(17,24,39,.28); --cb-radius:14px; --cb-accent:#E6C97A; }
.cart-button-template-glass-green { --cb-bg:rgba(255,255,255,.78); --cb-color:#275A53; --cb-border:rgba(39,90,83,.28); --cb-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 10px 22px rgba(39,90,83,.12); --cb-radius:18px; --cb-accent:#E6C97A; }
.cart-button-template-underline-flow { --cb-bg:transparent; --cb-color:#275A53; --cb-border:transparent; --cb-shadow:none; --cb-radius:0; --cb-accent:#E6C97A; }
.cart-button-template-fill-dark { --cb-bg:#f4f5f2; --cb-color:#1f2937; --cb-border:#e3e7df; --cb-shadow:4px 8px 19px -3px rgba(0,0,0,.22); --cb-radius:15px; --cb-accent:#111827; }
.cart-button-template-arrow-bloom { --cb-bg:transparent; --cb-color:#234567; --cb-border:transparent; --cb-shadow:none; --cb-radius:999px; --cb-accent:#b1dae7; }
.cart-button-template-learn-more { --cb-bg:transparent; --cb-color:#282936; --cb-border:transparent; --cb-shadow:none; --cb-radius:999px; --cb-accent:#282936; }
.cart-button-template-skew-swipe { --cb-bg:#e7e7e7; --cb-color:#fff; --cb-border:#e7e7e7; --cb-shadow:none; --cb-radius:10px; --cb-accent:#111; }
.cart-button-template-slide-duo { --cb-bg:#730fd1; --cb-color:#fff; --cb-border:#730fd1; --cb-shadow:none; --cb-radius:12px; --cb-accent:#d10f39; }
.cart-button-template-slide-duo-forest { --cb-bg:#275A53; --cb-color:#fff; --cb-border:#275A53; --cb-shadow:none; --cb-radius:12px; --cb-accent:#10B981; }
.cart-button-template-slide-duo-gold { --cb-bg:#172033; --cb-color:#fff; --cb-border:#172033; --cb-shadow:none; --cb-radius:12px; --cb-accent:#fff; }
.cart-button-template-slide-duo-ocean { --cb-bg:#0E7490; --cb-color:#fff; --cb-border:#0E7490; --cb-shadow:none; --cb-radius:12px; --cb-accent:#38BDF8; }
.cart-button-template-slide-duo-berry { --cb-bg:#831843; --cb-color:#fff; --cb-border:#831843; --cb-shadow:none; --cb-radius:12px; --cb-accent:#F472B6; }
.cart-button-template-slide-duo-coffee { --cb-bg:#3C2415; --cb-color:#fff; --cb-border:#3C2415; --cb-shadow:none; --cb-radius:12px; --cb-accent:#C08457; }
.cart-button-template-shine-sweep { --cb-bg:#275A53; --cb-color:#fff; --cb-border:#275A53; --cb-shadow:0 14px 30px rgba(39,90,83,.18); --cb-radius:999px; --cb-accent:#fff; }
.cart-button-template-pulse-ring { --cb-bg:#275A53; --cb-color:#fff; --cb-border:#275A53; --cb-shadow:0 0 0 0 rgba(39,90,83,.35); --cb-radius:999px; --cb-accent:#E6C97A; }
.cart-button-template-gradient-pop { --cb-bg:linear-gradient(135deg,#21c7a8,#275A53); --cb-color:#fff; --cb-border:transparent; --cb-shadow:0 14px 30px rgba(33,199,168,.25); --cb-radius:999px; --cb-accent:#E6C97A; }
.cart-button-template-pos-button { --cb-bg:#10B981; --cb-color:#fff; --cb-border:#10B981; --cb-shadow:0 8px 0 #087a56; --cb-radius:10px; --cb-accent:#fff; }
.cart-button-template-neon-line { --cb-bg:#0b1513; --cb-color:#80ffe8; --cb-border:#80ffe8; --cb-shadow:0 0 18px rgba(128,255,232,.26); --cb-radius:999px; --cb-accent:#80ffe8; }
.cart-button-template-soft-shadow { --cb-bg:#fff; --cb-color:#275A53; --cb-border:#edf0f4; --cb-shadow:0 18px 38px rgba(31,41,55,.18); --cb-radius:18px; --cb-accent:#E6C97A; }
.cart-button-template-split-pill { --cb-bg:#172033; --cb-color:#fff; --cb-border:#172033; --cb-shadow:0 12px 28px rgba(23,32,51,.22); --cb-radius:999px; --cb-accent:#E6C97A; }
.cart-button-template-ticket-gold { --cb-bg:#E6C97A; --cb-color:#172033; --cb-border:#172033; --cb-shadow:0 10px 22px rgba(230,201,122,.22); --cb-radius:6px; --cb-accent:#275A53; }
.cart-button-template-check-pop { --cb-bg:#16A34A; --cb-color:#fff; --cb-border:#16A34A; --cb-shadow:0 14px 30px rgba(22,163,74,.25); --cb-radius:999px; --cb-accent:#fff; }
.cart-button-template-signature-araz { --cb-bg:#06392F; --cb-color:#fff; --cb-border:#06392F; --cb-shadow:0 14px 32px rgba(6,57,47,.24); --cb-radius:16px; --cb-accent:#E6C97A; }
.cart-button-template-cart-toggle-forest { --cb-bg:#275A53; --cb-bg-flat:#275A53; --cb-color:#fff; --cb-border:#275A53; --cb-shadow:0 14px 28px rgba(39,90,83,.22); --cb-radius:999px; --cb-accent:#10B981; }
.cart-button-template-cart-toggle-gold { --cb-bg:#E6C97A; --cb-bg-flat:#E6C97A; --cb-color:#172033; --cb-border:#E6C97A; --cb-shadow:0 14px 28px rgba(230,201,122,.26); --cb-radius:999px; --cb-accent:#275A53; }
.cart-button-template-cart-toggle-glass { --cb-bg:rgba(255,255,255,.72); --cb-bg-flat:#ffffff; --cb-color:#275A53; --cb-border:rgba(39,90,83,.22); --cb-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 16px 30px rgba(39,90,83,.12); --cb-radius:18px; --cb-accent:#275A53; }
.cart-button-template-cart-toggle-dark { --cb-bg:#111827; --cb-bg-flat:#111827; --cb-color:#fff; --cb-border:#111827; --cb-shadow:0 16px 34px rgba(17,24,39,.28); --cb-radius:14px; --cb-accent:#E6C97A; }
.cart-button-template-cart-toggle-ticket { --cb-bg:#fff7e7; --cb-bg-flat:#fff7e7; --cb-color:#3b2416; --cb-border:#d8c49a; --cb-shadow:0 12px 24px rgba(59,36,22,.12); --cb-radius:8px; --cb-accent:#E6C97A; }
.cart-button-template-cart-toggle-neon { --cb-bg:#071512; --cb-bg-flat:#071512; --cb-color:#8fffe8; --cb-border:#8fffe8; --cb-shadow:0 0 22px rgba(143,255,232,.22); --cb-radius:999px; --cb-accent:#8fffe8; }
.cart-button-template-cart-toggle-soft { --cb-bg:#fff; --cb-bg-flat:#ffffff; --cb-color:#275A53; --cb-border:#edf0f4; --cb-shadow:0 18px 38px rgba(31,41,55,.14); --cb-radius:20px; --cb-accent:#E6C97A; }
.cart-button-template-cart-toggle-split { --cb-bg:#172033; --cb-bg-flat:#172033; --cb-color:#fff; --cb-border:#172033; --cb-shadow:0 12px 28px rgba(23,32,51,.2); --cb-radius:999px; --cb-accent:#E6C97A; }
.cart-button-template-cart-toggle-wave { --cb-bg:linear-gradient(135deg,#275A53,#10B981,#E6C97A); --cb-bg-flat:#275A53; --cb-color:#fff; --cb-border:transparent; --cb-shadow:0 16px 32px rgba(16,185,129,.24); --cb-radius:999px; --cb-accent:#fff; }
.cart-button-template-cart-toggle-minimal { --cb-bg:transparent; --cb-bg-flat:#275A53; --cb-color:#275A53; --cb-border:transparent; --cb-shadow:none; --cb-radius:0; --cb-accent:#E6C97A; }

.qr-body[class*="cart-button-template-"] .qr-addtocart-btn,
[class*="cart-button-template-"] .cart-button-demo-btn {
  appearance: none !important;
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  min-height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 0 12px !important;
  border: 1px solid var(--cb-border) !important;
  border-radius: var(--cb-radius) !important;
  background: var(--cb-bg) !important;
  color: var(--cb-color) !important;
  box-shadow: var(--cb-shadow) !important;
  font-size: var(--qr-cart-button-font-size, 11px) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: .01em !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease, background .2s ease, color .2s ease !important;
}
.qr-body[class*="cart-button-template-"] .qr-addtocart-btn:hover,
[class*="cart-button-template-"] .cart-button-demo-btn:hover { transform: translateY(-1px) !important; filter: brightness(1.04) !important; }
.qr-body[class*="cart-button-template-"] .qr-addtocart-btn .qr-add-pre,
.qr-body[class*="cart-button-template-"] .qr-addtocart-btn .qr-add-done,
[class*="cart-button-template-"] .cart-button-demo-btn > * { position: relative !important; z-index: 3 !important; }
.qr-body[class*="cart-button-template-"] .qr-addtocart-btn .qr-add-pre,
.qr-body[class*="cart-button-template-"] .qr-addtocart-btn .qr-add-done {
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
}
.qr-body[class*="cart-button-template-"] .qr-addtocart-btn .qr-add-done,
.qr-body[class*="cart-button-template-"] .qr-addtocart-btn.is-added .qr-add-pre {
  display: none !important;
}
.qr-body[class*="cart-button-template-"] .qr-addtocart-btn .qr-add-pre,
.qr-body[class*="cart-button-template-"] .qr-addtocart-btn.is-added .qr-add-done {
  display: inline-flex !important;
}
.qr-body[class*="cart-button-template-"] .qr-addtocart-btn .qr-add-icon,
[class*="cart-button-template-"] .cart-button-demo-btn .qr-add-icon {
  width: 15px !important; height: 15px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 999px !important; border: 1px solid currentColor !important; font-size: 11px !important; line-height: 1 !important;
}
.cart-button-template-underline-flow .qr-addtocart-btn,
.cart-button-template-underline-flow .cart-button-demo-btn { padding-inline: 2px !important; min-height: 34px !important; }
.cart-button-template-underline-flow .qr-addtocart-btn::before,
.cart-button-template-underline-flow .qr-addtocart-btn::after,
.cart-button-template-underline-flow .cart-button-demo-btn::before,
.cart-button-template-underline-flow .cart-button-demo-btn::after { content:"" !important; position:absolute !important; left:0 !important; right:auto !important; height:2px !important; width:0 !important; background:var(--cb-accent) !important; transition:width .35s ease !important; z-index:2 !important; }
.cart-button-template-underline-flow .qr-addtocart-btn::before,
.cart-button-template-underline-flow .cart-button-demo-btn::before { top:2px !important; }
.cart-button-template-underline-flow .qr-addtocart-btn::after,
.cart-button-template-underline-flow .cart-button-demo-btn::after { bottom:2px !important; }
.cart-button-template-underline-flow .qr-addtocart-btn:hover::before,
.cart-button-template-underline-flow .qr-addtocart-btn:hover::after,
.cart-button-template-underline-flow .cart-button-demo-btn:hover::before,
.cart-button-template-underline-flow .cart-button-demo-btn:hover::after { width:100% !important; }
.cart-button-template-fill-dark .qr-addtocart-btn::before,
.cart-button-template-fill-dark .cart-button-demo-btn::before,
.cart-button-template-skew-swipe .qr-addtocart-btn::before,
.cart-button-template-skew-swipe .cart-button-demo-btn::before { content:"" !important; position:absolute !important; inset:0 !important; background:var(--cb-accent) !important; transform:translateX(-105%) !important; transition:transform .28s ease !important; z-index:1 !important; }
.cart-button-template-skew-swipe .qr-addtocart-btn::before,
.cart-button-template-skew-swipe .cart-button-demo-btn::before { width:120% !important; left:-10% !important; transform:translateX(-105%) skew(30deg) !important; }
.cart-button-template-fill-dark .qr-addtocart-btn:hover,
.cart-button-template-fill-dark .cart-button-demo-btn:hover,
.cart-button-template-skew-swipe .qr-addtocart-btn:hover,
.cart-button-template-skew-swipe .cart-button-demo-btn:hover { color:#fff !important; }
.cart-button-template-fill-dark .qr-addtocart-btn:hover::before,
.cart-button-template-fill-dark .cart-button-demo-btn:hover::before { transform:translateX(0) !important; }
.cart-button-template-skew-swipe .qr-addtocart-btn:hover::before,
.cart-button-template-skew-swipe .cart-button-demo-btn:hover::before { transform:translateX(0) skew(30deg) !important; }
.cart-button-template-arrow-bloom .qr-addtocart-btn::before,
.cart-button-template-arrow-bloom .cart-button-demo-btn::before { content:"" !important; position:absolute !important; top:50% !important; left:0 !important; width:34px !important; height:34px !important; border-radius:50px !important; background:var(--cb-accent) !important; transform:translateY(-50%) !important; transition:width .3s ease !important; z-index:1 !important; }
.cart-button-template-arrow-bloom .qr-addtocart-btn:hover::before,
.cart-button-template-arrow-bloom .cart-button-demo-btn:hover::before { width:100% !important; }
.cart-button-template-learn-more .qr-addtocart-btn::before,
.cart-button-template-learn-more .cart-button-demo-btn::before { content:"" !important; position:absolute !important; left:0 !important; top:50% !important; width:34px !important; height:34px !important; border-radius:999px !important; background:var(--cb-accent) !important; transform:translateY(-50%) !important; transition:width .42s cubic-bezier(.65,0,.076,1) !important; z-index:1 !important; }
.cart-button-template-learn-more .qr-addtocart-btn:hover,
.cart-button-template-learn-more .cart-button-demo-btn:hover { color:#fff !important; }
.cart-button-template-learn-more .qr-addtocart-btn:hover::before,
.cart-button-template-learn-more .cart-button-demo-btn:hover::before { width:100% !important; }
.cart-button-template-slide-duo .qr-addtocart-btn::before,
.cart-button-template-slide-duo .cart-button-demo-btn::before,
.cart-button-template-slide-duo-forest .qr-addtocart-btn::before,
.cart-button-template-slide-duo-forest .cart-button-demo-btn::before,
.cart-button-template-slide-duo-gold .qr-addtocart-btn::before,
.cart-button-template-slide-duo-gold .cart-button-demo-btn::before,
.cart-button-template-slide-duo-ocean .qr-addtocart-btn::before,
.cart-button-template-slide-duo-ocean .cart-button-demo-btn::before,
.cart-button-template-slide-duo-berry .qr-addtocart-btn::before,
.cart-button-template-slide-duo-berry .cart-button-demo-btn::before,
.cart-button-template-slide-duo-coffee .qr-addtocart-btn::before,
.cart-button-template-slide-duo-coffee .cart-button-demo-btn::before { content:"" !important; position:absolute !important; inset:100% 0 auto 0 !important; height:100% !important; background:var(--cb-accent) !important; transition:transform .35s ease !important; z-index:1 !important; }
.cart-button-template-slide-duo .qr-addtocart-btn:hover::before,
.cart-button-template-slide-duo .cart-button-demo-btn:hover::before,
.cart-button-template-slide-duo-forest .qr-addtocart-btn:hover::before,
.cart-button-template-slide-duo-forest .cart-button-demo-btn:hover::before,
.cart-button-template-slide-duo-gold .qr-addtocart-btn:hover::before,
.cart-button-template-slide-duo-gold .cart-button-demo-btn:hover::before,
.cart-button-template-slide-duo-ocean .qr-addtocart-btn:hover::before,
.cart-button-template-slide-duo-ocean .cart-button-demo-btn:hover::before,
.cart-button-template-slide-duo-berry .qr-addtocart-btn:hover::before,
.cart-button-template-slide-duo-berry .cart-button-demo-btn:hover::before,
.cart-button-template-slide-duo-coffee .qr-addtocart-btn:hover::before,
.cart-button-template-slide-duo-coffee .cart-button-demo-btn:hover::before { transform:translateY(-100%) !important; }
.cart-button-template-slide-duo-gold .qr-addtocart-btn:hover,
.cart-button-template-slide-duo-gold .cart-button-demo-btn:hover {
  color: #111827 !important;
}
.cart-button-template-shine-sweep .qr-addtocart-btn::before,
.cart-button-template-shine-sweep .cart-button-demo-btn::before { content:"" !important; position:absolute !important; inset:-30% auto -30% -55% !important; width:42% !important; background:linear-gradient(90deg,transparent,rgba(255,255,255,.58),transparent) !important; transform:skewX(-22deg) !important; animation:cartButtonShine 2.5s ease-in-out infinite !important; z-index:1 !important; }
.cart-button-template-pulse-ring .qr-addtocart-btn,
.cart-button-template-pulse-ring .cart-button-demo-btn { animation:cartButtonPulse 1.9s ease-in-out infinite !important; }
.cart-button-template-gradient-pop .qr-addtocart-btn,
.cart-button-template-gradient-pop .cart-button-demo-btn { background-size:180% 180% !important; animation:cartButtonGradient 3.6s ease infinite !important; }
.cart-button-template-pos-button .qr-addtocart-btn:active,
.cart-button-template-pos-button .cart-button-demo-btn:active { transform:translateY(5px) !important; box-shadow:0 3px 0 #087a56 !important; }
.cart-button-template-neon-line .qr-addtocart-btn,
.cart-button-template-neon-line .cart-button-demo-btn { text-shadow:0 0 8px rgba(128,255,232,.6) !important; }
.cart-button-template-split-pill .qr-add-icon { background:var(--cb-accent) !important; color:#172033 !important; border-color:var(--cb-accent) !important; }
.cart-button-template-ticket-gold .qr-addtocart-btn::before,
.cart-button-template-ticket-gold .cart-button-demo-btn::before { content:"" !important; position:absolute !important; inset:0 10px !important; border-left:1px dashed rgba(23,32,51,.35) !important; border-right:1px dashed rgba(23,32,51,.35) !important; opacity:.55 !important; z-index:1 !important; }
.cart-button-template-check-pop .qr-addtocart-btn.is-added,
.cart-button-template-check-pop .cart-button-demo-btn.is-preview-clicked { animation:cartButtonCheck .38s ease !important; }
.cart-button-template-signature-araz .qr-addtocart-btn::after,
.cart-button-template-signature-araz .cart-button-demo-btn::after { content:"" !important; position:absolute !important; left:10px !important; right:10px !important; bottom:6px !important; height:2px !important; border-radius:999px !important; background:var(--cb-accent) !important; transform:scaleX(.25) !important; transform-origin:left !important; transition:transform .25s ease !important; z-index:2 !important; }
.cart-button-template-signature-araz .qr-addtocart-btn:hover::after,
.cart-button-template-signature-araz .cart-button-demo-btn:hover::after { transform:scaleX(1) !important; }
.qr-cart-icon {
  display: none;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  line-height: 1;
}
.qr-cart-icon svg {
  display: block;
  width: 18px;
  height: 18px;
  fill: currentColor;
}
.qr-body[class*="cart-button-template-cart-toggle-"] .qr-addtocart-btn .qr-cart-icon,
[class*="cart-button-template-cart-toggle-"] .cart-button-demo-btn .qr-cart-icon {
  display: inline-flex !important;
}
.qr-body[class*="cart-button-template-cart-toggle-"] .qr-addtocart-btn .qr-add-icon,
[class*="cart-button-template-cart-toggle-"] .cart-button-demo-btn .qr-add-icon {
  display: none !important;
}
.qr-body[class*="cart-button-template-cart-toggle-"] .qr-addtocart-btn .qr-add-icon,
[class*="cart-button-template-cart-toggle-"] .cart-button-demo-btn .qr-add-icon {
  font-size: 0 !important;
  background: color-mix(in srgb, var(--cb-accent) 20%, transparent) !important;
  border-color: color-mix(in srgb, currentColor 52%, transparent) !important;
}
.qr-body[class*="cart-button-template-cart-toggle-"] .qr-addtocart-btn .qr-add-icon::before,
[class*="cart-button-template-cart-toggle-"] .cart-button-demo-btn .qr-add-icon::before {
  content: "" !important;
  width: 15px !important;
  height: 15px !important;
  display: block !important;
  background: currentColor !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 8V7a5 5 0 0 1 10 0v1h2.2a1.6 1.6 0 0 1 1.58 1.38l1.05 8A3.2 3.2 0 0 1 18.65 21H5.35a3.2 3.2 0 0 1-3.18-3.62l1.05-8A1.6 1.6 0 0 1 4.8 8H7Zm2 0h6V7a3 3 0 0 0-6 0v1Zm-1.5 4.2a.9.9 0 1 0 0 1.8.9.9 0 0 0 0-1.8Zm9 0a.9.9 0 1 0 0 1.8.9.9 0 0 0 0-1.8Z'/%3E%3C/svg%3E") center/contain no-repeat !important;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 8V7a5 5 0 0 1 10 0v1h2.2a1.6 1.6 0 0 1 1.58 1.38l1.05 8A3.2 3.2 0 0 1 18.65 21H5.35a3.2 3.2 0 0 1-3.18-3.62l1.05-8A1.6 1.6 0 0 1 4.8 8H7Zm2 0h6V7a3 3 0 0 0-6 0v1Zm-1.5 4.2a.9.9 0 1 0 0 1.8.9.9 0 0 0 0-1.8Zm9 0a.9.9 0 1 0 0 1.8.9.9 0 0 0 0-1.8Z'/%3E%3C/svg%3E") center/contain no-repeat !important;
}
[class*="cart-button-template-cart-toggle-"] .cart-button-demo-btn.is-preview-clicked .qr-add-icon::before {
  -webkit-mask: none !important;
  mask: none !important;
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  content: "✓" !important;
  font-size: 13px !important;
}
.qr-body[class*="cart-button-template-cart-toggle-"] .qr-addtocart-btn.is-added,
[class*="cart-button-template-cart-toggle-"] .cart-button-demo-btn.is-preview-clicked {
  background: #10B981 !important;
  border-color: #10B981 !important;
  color: #fff !important;
  animation: cartToggleAdded .42s ease !important;
}
.cart-button-template-cart-toggle-glass .qr-addtocart-btn,
.cart-button-template-cart-toggle-glass .cart-button-demo-btn { backdrop-filter: blur(14px) saturate(140%) !important; -webkit-backdrop-filter: blur(14px) saturate(140%) !important; }
.cart-button-template-cart-toggle-ticket .qr-addtocart-btn::before,
.cart-button-template-cart-toggle-ticket .cart-button-demo-btn::before { content:"" !important; position:absolute !important; inset:0 12px !important; border-left:1px dashed rgba(59,36,22,.34) !important; border-right:1px dashed rgba(59,36,22,.34) !important; z-index:1 !important; }
.cart-button-template-cart-toggle-neon .qr-addtocart-btn,
.cart-button-template-cart-toggle-neon .cart-button-demo-btn { animation:cartToggleNeon 1.8s ease-in-out infinite !important; }
.cart-button-template-cart-toggle-wave .qr-addtocart-btn,
.cart-button-template-cart-toggle-wave .cart-button-demo-btn { background-size:220% 220% !important; animation:cartButtonGradient 3s ease infinite !important; }
.cart-button-template-cart-toggle-minimal .qr-addtocart-btn,
.cart-button-template-cart-toggle-minimal .cart-button-demo-btn { padding-inline:0 !important; }
.cart-button-template-cart-toggle-minimal .qr-addtocart-btn::after,
.cart-button-template-cart-toggle-minimal .cart-button-demo-btn::after { content:"" !important; position:absolute !important; left:0 !important; right:0 !important; bottom:1px !important; height:2px !important; background:var(--cb-accent) !important; transform:scaleX(.25) !important; transform-origin:left !important; transition:transform .25s ease !important; }
.cart-button-template-cart-toggle-minimal .qr-addtocart-btn:hover::after,
.cart-button-template-cart-toggle-minimal .cart-button-demo-btn:hover::after { transform:scaleX(1) !important; }
.qr-body.cart-button-template-cart-toggle-minimal .qr-addtocart-btn.is-added,
.cart-button-template-cart-toggle-minimal .cart-button-demo-btn.is-preview-clicked {
  background: #275A53 !important;
  border-color: #275A53 !important;
  color: #fff !important;
}
.qr-body[class*="cart-button-template-cart-toggle-"] .qr-addtocart-btn:not(.is-added) .qr-add-label,
[class*="cart-button-template-cart-toggle-"] .cart-button-demo-btn:not(.is-preview-clicked) .qr-add-label {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}
.qr-body[class*="cart-button-template-cart-toggle-"] .qr-addtocart-btn:not(.is-added),
[class*="cart-button-template-cart-toggle-"] .cart-button-demo-btn:not(.is-preview-clicked) {
  width: 36px !important;
  min-width: 36px !important;
  padding-inline: 0 !important;
  background: var(--cb-color) !important;
  border-color: var(--cb-color) !important;
  color: var(--cb-bg-flat, var(--cb-bg)) !important;
}
.qr-body[class*="cart-button-template-cart-toggle-"] .qr-addtocart-btn.is-added,
[class*="cart-button-template-cart-toggle-"] .cart-button-demo-btn.is-preview-clicked {
  min-width: 82px !important;
  padding-inline: 12px !important;
}
.qr-body[class*="cart-button-template-cart-toggle-"] .qr-addtocart-btn.is-added .qr-add-check,
[class*="cart-button-template-cart-toggle-"] .cart-button-demo-btn.is-preview-clicked .qr-add-check {
  display: none !important;
}
.cart-button-template-signature-araz .qr-addtocart-btn,
.cart-button-template-slide-duo-forest .qr-addtocart-btn,
.cart-button-template-slide-duo-gold .qr-addtocart-btn,
.cart-button-template-slide-duo-ocean .qr-addtocart-btn,
.cart-button-template-slide-duo-berry .qr-addtocart-btn,
.cart-button-template-slide-duo-coffee .qr-addtocart-btn {
  min-height: 34px !important;
  padding: 7px 12px !important;
  font-size: var(--qr-cart-button-font-size, 11px) !important;
  gap: 6px !important;
}
.cart-button-template-signature-araz .qr-addtocart-btn .qr-add-icon,
.cart-button-template-slide-duo-forest .qr-addtocart-btn .qr-add-icon,
.cart-button-template-slide-duo-gold .qr-addtocart-btn .qr-add-icon,
.cart-button-template-slide-duo-ocean .qr-addtocart-btn .qr-add-icon,
.cart-button-template-slide-duo-berry .qr-addtocart-btn .qr-add-icon,
.cart-button-template-slide-duo-coffee .qr-addtocart-btn .qr-add-icon {
  width: 15px !important;
  height: 15px !important;
  font-size: 11px !important;
}
@keyframes cartButtonPulse { 0%,100%{box-shadow:0 0 0 0 rgba(39,90,83,.32)} 50%{box-shadow:0 0 0 9px rgba(39,90,83,0)} }
@keyframes cartButtonShine { 0%{left:-55%} 45%,100%{left:125%} }
@keyframes cartButtonGradient { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
@keyframes cartButtonCheck { 0%{transform:scale(.96)} 60%{transform:scale(1.04)} 100%{transform:scale(1)} }
@keyframes cartToggleAdded { 0%{transform:scale(.94)} 60%{transform:scale(1.04)} 100%{transform:scale(1)} }
@keyframes cartToggleNeon { 0%,100%{box-shadow:0 0 16px rgba(143,255,232,.18)} 50%{box-shadow:0 0 28px rgba(143,255,232,.42)} }
@media (max-width: 767px) {
  .qr-body[class*="cart-button-template-"] .qr-addtocart-btn { min-height:32px !important; padding-inline:10px !important; font-size:var(--qr-cart-button-mobile-font-size, 10px) !important; }
}

body.qr-body.cart-button-align-left .qr-addtocart-btn {
  justify-self: start !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}
body.qr-body.cart-button-align-center .qr-addtocart-btn {
  justify-self: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
body.qr-body.cart-button-align-right .qr-addtocart-btn {
  justify-self: end !important;
  margin-left: auto !important;
  margin-right: 0 !important;
}

body.qr-body .qr-addtocart-btn {
  max-width: 132px !important;
  min-height: 34px !important;
  padding: 7px 12px !important;
  font-size: var(--qr-cart-button-font-size, 11px) !important;
  line-height: 1 !important;
  gap: 6px !important;
}
body.qr-body .qr-addtocart-btn .qr-add-pre,
body.qr-body .qr-addtocart-btn .qr-add-done {
  gap: 5px !important;
}
body.qr-body .qr-addtocart-btn .qr-add-icon,
body.qr-body .qr-addtocart-btn .qr-add-check,
body.qr-body .qr-addtocart-btn .qr-cart-icon,
body.qr-body .qr-addtocart-btn .qr-cart-icon svg {
  width: 15px !important;
  height: 15px !important;
  min-width: 15px !important;
  font-size: 11px !important;
}

body.qr-body[class*="cart-button-template-"] .qr-item-action {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

body.qr-body[class*="cart-button-template-"].cart-button-align-left .qr-item-action {
  grid-template-columns: auto minmax(0, 1fr);
}

body.qr-body[class*="cart-button-template-"].cart-button-align-center .qr-item-action {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}

body.qr-body[class*="cart-button-template-"].cart-button-align-left .qr-price-stack {
  grid-column: 2;
  justify-self: end;
  text-align: right;
}

body.qr-body[class*="cart-button-template-"].cart-button-align-left .qr-addtocart-btn {
  grid-column: 1;
  justify-self: start !important;
  margin: 0 !important;
}

body.qr-body[class*="cart-button-template-"].cart-button-align-right .qr-price-stack {
  grid-column: 1;
  justify-self: start;
  text-align: left;
}

body.qr-body[class*="cart-button-template-"].cart-button-align-right .qr-addtocart-btn {
  grid-column: 2;
  justify-self: end !important;
  margin: 0 !important;
}

body.qr-body[class*="cart-button-template-"].cart-button-align-center .qr-price-stack {
  grid-column: 1;
  justify-self: start;
  text-align: left;
}

body.qr-body[class*="cart-button-template-"].cart-button-align-center .qr-addtocart-btn {
  grid-column: 2;
  justify-self: center !important;
  margin: 0 !important;
}

body.qr-body[class*="cart-button-template-"] .qr-tea-options {
  grid-column: 1 / -1;
}

.qr-back-to-top {
  position: fixed;
  left: max(18px, env(safe-area-inset-left));
  bottom: calc(22px + env(safe-area-inset-bottom));
  z-index: 1300;
  width: 45px;
  height: 45px;
  display: grid;
  place-items: center;
  border: 1px solid #e7eae8;
  border-radius: 8px;
  background-color: #fff;
  color: #111827;
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
  box-shadow: 0 14px 30px rgba(31, 41, 55, .14);
  transform: translateY(12px);
  transition: opacity .2s ease, transform .2s ease, box-shadow .2s ease;
}
.qr-back-to-top.is-visible {
  opacity: .75;
  pointer-events: auto;
  transform: translateY(0);
  animation: qrBackTopBounce 1s infinite;
}
.qr-back-to-top:hover,
.qr-back-to-top:focus-visible {
  opacity: 1;
  outline: none;
  box-shadow: 0 16px 34px rgba(39, 90, 83, .20);
}
@keyframes qrBackTopBounce {
  0%,
  100% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

/* 20 selectable QR mobile navbar themes */
@media (max-width: 767px) {
  body.qr-body .mobile-menu-tabbar[class*="template-nav-"] {
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    bottom: calc(10px + env(safe-area-inset-bottom)) !important;
    width: auto !important;
    min-height: var(--mobile-menu-height, 65px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    padding: 7px !important;
    border: 1px solid rgba(17, 24, 39, .08) !important;
    border-radius: 24px !important;
    background: var(--mobile-menu-bg, #fff) !important;
    color: #727b8c !important;
    box-shadow: 0 18px 38px rgba(17, 24, 39, .18) !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  body.qr-body .mobile-menu-tabbar[class*="template-nav-"] .nav-item {
    position: relative !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    min-height: 48px !important;
    border: 0 !important;
    border-radius: 18px !important;
    background: transparent !important;
    color: inherit !important;
    box-shadow: none !important;
    transition: transform .22s ease, flex .22s ease, background .22s ease, color .22s ease, border-radius .22s ease !important;
  }

  body.qr-body .mobile-menu-tabbar[class*="template-nav-"] .nav-item.active {
    color: #fff !important;
    background: var(--mobile-menu-active, #275a53) !important;
    font-weight: 950 !important;
  }

  body.qr-body .mobile-menu-tabbar[class*="template-nav-"] .cart strong {
    position: absolute !important;
    top: 3px !important;
    right: 14% !important;
    min-width: 18px !important;
    height: 18px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 999px !important;
    background: #e11d48 !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    text-shadow: none !important;
  }

  body.qr-body .mobile-menu-tabbar.template-nav-01 { border-radius: 999px !important; }
  body.qr-body .mobile-menu-tabbar.template-nav-01 .nav-item.active .material-icons { opacity: 0 !important; transform: translateY(-26px) rotateX(82deg) scale(.44) !important; }
  body.qr-body .mobile-menu-tabbar.template-nav-01 .nav-item.active em { position: absolute !important; color: #fff !important; }

  body.qr-body .mobile-menu-tabbar.template-nav-02 { left: 0 !important; right: 0 !important; bottom: 0 !important; border-radius: 28px 28px 0 0 !important; box-shadow: 0 -14px 30px rgba(17,24,39,.14) !important; }
  body.qr-body .mobile-menu-tabbar.template-nav-02 .nav-item.active { background: transparent !important; color: var(--mobile-menu-active, #275a53) !important; transform: translateY(-8px) scale(1.06) !important; }
  body.qr-body .mobile-menu-tabbar.template-nav-02 .nav-item.active::before { content: ""; position: absolute; top: -21px; left: 50%; width: 58px; height: 58px; border-radius: 999px; background: var(--mobile-menu-bg, #fff); transform: translateX(-50%); z-index: -1; box-shadow: 0 10px 20px rgba(17,24,39,.08); }

  body.qr-body .mobile-menu-tabbar.template-nav-03 .nav-item.active { flex: 1.62 1 0 !important; background: #e9f5f2 !important; color: #275a53 !important; }
  body.qr-body .mobile-menu-tabbar.template-nav-03 .nav-item:nth-child(2).active { background: #fff4d8 !important; color: #8a6515 !important; }
  body.qr-body .mobile-menu-tabbar.template-nav-03 .nav-item:nth-child(3).active { background: #dff8f1 !important; color: #0f766e !important; }
  body.qr-body .mobile-menu-tabbar.template-nav-03 .nav-item:nth-child(4).active { background: #ffe4e6 !important; color: #be123c !important; }

  body.qr-body .mobile-menu-tabbar.template-nav-04 { background: rgba(255,255,255,.76) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; border-color: rgba(255,255,255,.7) !important; }
  body.qr-body .mobile-menu-tabbar.template-nav-05 { background: linear-gradient(135deg, #fff8e1, #fff) !important; border-color: rgba(230,201,122,.55) !important; }
  body.qr-body .mobile-menu-tabbar.template-nav-05 .nav-item.active { background: #e6c97a !important; color: #17202b !important; }
  body.qr-body .mobile-menu-tabbar.template-nav-06 { border-radius: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; box-shadow: 0 -4px 14px rgba(17,24,39,.08) !important; }
  body.qr-body .mobile-menu-tabbar.template-nav-06 .nav-item.active { background: transparent !important; color: var(--mobile-menu-active, #275a53) !important; }
  body.qr-body .mobile-menu-tabbar.template-nav-06 .nav-item.active::after { content: ""; position: absolute; left: 26%; right: 26%; bottom: 4px; height: 3px; border-radius: 999px; background: currentColor; }
  body.qr-body .mobile-menu-tabbar.template-nav-07 { background: #111827 !important; border-color: rgba(255,255,255,.08) !important; color: #aeb7c6 !important; }
  body.qr-body .mobile-menu-tabbar.template-nav-07 .nav-item.active { background: #e6c97a !important; color: #111827 !important; }
  body.qr-body .mobile-menu-tabbar.template-nav-08 .nav-item:nth-child(3) { flex: 0 0 60px !important; width: 60px !important; height: 60px !important; border-radius: 999px !important; background: var(--mobile-menu-active, #275a53) !important; color: #fff !important; transform: translateY(-17px) !important; box-shadow: 0 16px 30px rgba(39,90,83,.32) !important; }
  body.qr-body .mobile-menu-tabbar.template-nav-09 { background: linear-gradient(135deg, #f8fbff, #fff7ed) !important; }
  body.qr-body .mobile-menu-tabbar.template-nav-09 .nav-item.active { background: #fce7f3 !important; color: #9d174d !important; }
  body.qr-body .mobile-menu-tabbar.template-nav-10 { height: 56px !important; padding: 5px 8px !important; border-radius: 18px !important; }
  body.qr-body .mobile-menu-tabbar.template-nav-10 .nav-item em { display: none !important; }
  body.qr-body .mobile-menu-tabbar.template-nav-10 .nav-item.active { background: transparent !important; color: var(--mobile-menu-active, #275a53) !important; transform: translateY(-3px) !important; }
  body.qr-body .mobile-menu-tabbar.template-nav-11 { border-radius: 16px !important; gap: 0 !important; padding: 5px !important; }
  body.qr-body .mobile-menu-tabbar.template-nav-11 .nav-item { border-radius: 0 !important; border-right: 1px solid rgba(17,24,39,.08) !important; }
  body.qr-body .mobile-menu-tabbar.template-nav-11 .nav-item:last-child { border-right: 0 !important; }
  body.qr-body .mobile-menu-tabbar.template-nav-12 .nav-item { border-radius: 999px !important; }
  body.qr-body .mobile-menu-tabbar.template-nav-12 .nav-item.active { transform: translateY(-10px) !important; box-shadow: 0 12px 22px rgba(39,90,83,.24) !important; }
  body.qr-body .mobile-menu-tabbar.template-nav-13 { background: #071512 !important; border-color: rgba(230,201,122,.28) !important; box-shadow: 0 0 0 1px rgba(230,201,122,.16), 0 18px 38px rgba(7,21,18,.38) !important; }
  body.qr-body .mobile-menu-tabbar.template-nav-13 .nav-item.active { background: transparent !important; color: #e6c97a !important; text-shadow: 0 0 16px rgba(230,201,122,.65) !important; }
  body.qr-body .mobile-menu-tabbar.template-nav-14 { background: #fff8ed !important; border-color: #ead9bd !important; }
  body.qr-body .mobile-menu-tabbar.template-nav-14 .nav-item.active { background: #3b2416 !important; color: #fff8ed !important; }
  body.qr-body .mobile-menu-tabbar.template-nav-15 { background: rgba(255,255,255,.64) !important; border-color: rgba(255,255,255,.72) !important; backdrop-filter: blur(20px) saturate(1.35) !important; -webkit-backdrop-filter: blur(20px) saturate(1.35) !important; }
  body.qr-body .mobile-menu-tabbar.template-nav-16 .nav-item.active { background: transparent !important; color: var(--mobile-menu-active, #275a53) !important; }
  body.qr-body .mobile-menu-tabbar.template-nav-16 .nav-item.active::before { content: ""; position: absolute; top: 5px; width: 7px; height: 7px; border-radius: 50%; background: #e6c97a; }
  body.qr-body .mobile-menu-tabbar.template-nav-17 { border-radius: 12px !important; background: #fffdf7 !important; border-style: dashed !important; }
  body.qr-body .mobile-menu-tabbar.template-nav-17 .nav-item.active { background: #275a53 !important; color: #fff !important; border-radius: 10px !important; }
  body.qr-body .mobile-menu-tabbar.template-nav-18 { border-radius: 999px 999px 22px 22px !important; }
  body.qr-body .mobile-menu-tabbar.template-nav-18 .nav-item.active { flex: 1.45 1 0 !important; }
  body.qr-body .mobile-menu-tabbar.template-nav-19 { font-family: Georgia, "Times New Roman", serif !important; background: #fffaf0 !important; }
  body.qr-body .mobile-menu-tabbar.template-nav-19 .nav-item.active { background: transparent !important; color: #3b2416 !important; }
  body.qr-body .mobile-menu-tabbar.template-nav-19 .nav-item.active em { text-decoration: underline; text-underline-offset: 5px; }
  body.qr-body .mobile-menu-tabbar.template-nav-20 { left: 18px !important; right: 18px !important; bottom: calc(14px + env(safe-area-inset-bottom)) !important; border-radius: 30px !important; background: linear-gradient(135deg, #ffffff, #eef8f6) !important; box-shadow: 0 22px 46px rgba(39,90,83,.2) !important; }
  body.qr-body .mobile-menu-tabbar.template-nav-20 .nav-item.active { background: linear-gradient(135deg, #275a53, #173d38) !important; color: #fff !important; }
}
@media (max-width: 767px) {
  .qr-back-to-top {
    left: max(14px, env(safe-area-inset-left));
    bottom: calc(82px + env(safe-area-inset-bottom));
  }
}

/* Final QR click cleanup: keep category interactions in place without the green wash transition. */
.qr-body .qr-category-toggle::before,
.qr-body .qr-nav-category-toggle::before {
    content: none !important;
}

.qr-body .qr-category-toggle.animate::after,
.qr-body .qr-nav-category-toggle.animate::after {
    animation: none !important;
}

.qr-body .qr-category-toggle.is-open,
.qr-body .qr-nav-category-toggle.is-open {
    border-color: rgba(39, 90, 83, .32) !important;
    background: rgba(39, 90, 83, .08) !important;
    color: #275a53 !important;
}

/* Distinct mobile navbar themes: structure, motion and shape must change, not only color. */
@media (max-width: 767px) {
  body.qr-body .mobile-menu-tabbar[class*="template-nav-"] {
    --nav-green: #275a53;
    --nav-gold: #e6c97a;
    --nav-dark: #101827;
    left: 12px !important;
    right: 12px !important;
    bottom: calc(12px + env(safe-area-inset-bottom)) !important;
    height: 66px !important;
    padding: 7px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    overflow: visible !important;
  }

  body.qr-body .mobile-menu-tabbar[class*="template-nav-"] .nav-item {
    isolation: isolate !important;
  }

  body.qr-body .mobile-menu-tabbar.template-nav-01 {
    border-radius: 999px !important;
    background: #ffffff !important;
  }
  body.qr-body .mobile-menu-tabbar.template-nav-01 .nav-item.active {
    flex: 1.75 1 0 !important;
    border-radius: 999px !important;
    background: var(--nav-green) !important;
    color: #fff !important;
  }

  body.qr-body .mobile-menu-tabbar.template-nav-02 {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    border-radius: 30px 30px 0 0 !important;
    padding: 9px 18px !important;
    height: 74px !important;
  }
  body.qr-body .mobile-menu-tabbar.template-nav-02 .nav-item.active {
    width: 56px !important;
    flex: 0 0 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    transform: translateY(-22px) !important;
    background: #fff !important;
    color: var(--nav-green) !important;
    box-shadow: 0 16px 30px rgba(17, 24, 39, .16) !important;
  }
  body.qr-body .mobile-menu-tabbar.template-nav-02 .nav-item.active em { display: none !important; }

  body.qr-body .mobile-menu-tabbar.template-nav-03 {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    gap: 8px !important;
  }
  body.qr-body .mobile-menu-tabbar.template-nav-03 .nav-item {
    background: #fff !important;
    box-shadow: 0 10px 24px rgba(17, 24, 39, .1) !important;
  }
  body.qr-body .mobile-menu-tabbar.template-nav-03 .nav-item.active {
    flex: 1.55 1 0 !important;
    background: #fff3c6 !important;
    color: #7a5712 !important;
  }

  body.qr-body .mobile-menu-tabbar.template-nav-04 {
    border-radius: 26px !important;
    background: rgba(255, 255, 255, .62) !important;
    border: 1px solid rgba(255, 255, 255, .9) !important;
    backdrop-filter: blur(20px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
  }
  body.qr-body .mobile-menu-tabbar.template-nav-04 .nav-item.active {
    background: rgba(39, 90, 83, .16) !important;
    color: var(--nav-green) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8) !important;
  }

  body.qr-body .mobile-menu-tabbar.template-nav-05 {
    height: 60px !important;
    border-radius: 18px !important;
    background: #2d1b10 !important;
    border: 1px solid rgba(230, 201, 122, .28) !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
  body.qr-body .mobile-menu-tabbar.template-nav-05 .nav-item {
    min-height: 60px !important;
    border-radius: 0 !important;
    color: rgba(255,255,255,.65) !important;
  }
  body.qr-body .mobile-menu-tabbar.template-nav-05 .nav-item.active {
    background: var(--nav-gold) !important;
    color: #2d1b10 !important;
  }

  body.qr-body .mobile-menu-tabbar.template-nav-06 {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    border-radius: 0 !important;
    height: 58px !important;
    padding: 3px 8px !important;
    box-shadow: 0 -6px 20px rgba(17,24,39,.08) !important;
  }
  body.qr-body .mobile-menu-tabbar.template-nav-06 .nav-item {
    min-height: 52px !important;
    border-radius: 0 !important;
  }
  body.qr-body .mobile-menu-tabbar.template-nav-06 .nav-item.active {
    background: transparent !important;
    color: var(--nav-green) !important;
  }
  body.qr-body .mobile-menu-tabbar.template-nav-06 .nav-item.active::after {
    content: "" !important;
    position: absolute !important;
    left: 18% !important;
    right: 18% !important;
    bottom: 0 !important;
    height: 4px !important;
    border-radius: 999px 999px 0 0 !important;
    background: var(--nav-green) !important;
  }

  body.qr-body .mobile-menu-tabbar.template-nav-07 {
    background: #080b18 !important;
    border-radius: 24px !important;
    border: 1px solid rgba(255,255,255,.08) !important;
  }
  body.qr-body .mobile-menu-tabbar.template-nav-07 .nav-item {
    align-items: flex-start !important;
    padding-left: 12px !important;
    color: rgba(255,255,255,.58) !important;
  }
  body.qr-body .mobile-menu-tabbar.template-nav-07 .nav-item.active {
    color: #fff !important;
    background: linear-gradient(90deg, rgba(230,201,122,.22), transparent) !important;
  }
  body.qr-body .mobile-menu-tabbar.template-nav-07 .nav-item.active::before {
    content: "" !important;
    position: absolute !important;
    left: 3px !important;
    top: 13px !important;
    bottom: 13px !important;
    width: 4px !important;
    border-radius: 999px !important;
    background: var(--nav-gold) !important;
  }

  body.qr-body .mobile-menu-tabbar.template-nav-08 {
    height: 64px !important;
    border-radius: 22px !important;
    padding-inline: 12px !important;
  }
  body.qr-body .mobile-menu-tabbar.template-nav-08 .nav-item:nth-child(3),
  body.qr-body .mobile-menu-tabbar.template-nav-08 .cart {
    flex: 0 0 62px !important;
    height: 62px !important;
    margin-top: -28px !important;
    border-radius: 999px !important;
    background: var(--nav-green) !important;
    color: #fff !important;
    box-shadow: 0 18px 34px rgba(39,90,83,.34) !important;
  }
  body.qr-body .mobile-menu-tabbar.template-nav-08 .cart em { display: none !important; }

  body.qr-body .mobile-menu-tabbar.template-nav-09 {
    border-radius: 24px !important;
    background: linear-gradient(135deg, #fff7ed, #eefaf6) !important;
    gap: 5px !important;
  }
  body.qr-body .mobile-menu-tabbar.template-nav-09 .nav-item {
    border-radius: 16px !important;
    background: rgba(255,255,255,.42) !important;
  }
  body.qr-body .mobile-menu-tabbar.template-nav-09 .nav-item.active {
    background: #fff !important;
    color: var(--nav-green) !important;
    transform: scale(1.04) !important;
  }

  body.qr-body .mobile-menu-tabbar.template-nav-10 {
    left: 50% !important;
    right: auto !important;
    width: min(92vw, 330px) !important;
    height: 56px !important;
    transform: translateX(-50%) !important;
    border-radius: 18px !important;
  }
  body.qr-body .mobile-menu-tabbar.template-nav-10 .nav-item em { display: none !important; }
  body.qr-body .mobile-menu-tabbar.template-nav-10 .nav-item.active {
    color: var(--nav-green) !important;
    background: #edf7f4 !important;
  }

  body.qr-body .mobile-menu-tabbar.template-nav-11 {
    gap: 0 !important;
    padding: 0 !important;
    border-radius: 22px !important;
    overflow: hidden !important;
  }
  body.qr-body .mobile-menu-tabbar.template-nav-11 .nav-item {
    border-radius: 0 !important;
    min-height: 100% !important;
    border-right: 1px solid rgba(17,24,39,.08) !important;
  }
  body.qr-body .mobile-menu-tabbar.template-nav-11 .nav-item.active {
    background: var(--nav-green) !important;
    color: #fff !important;
  }

  body.qr-body .mobile-menu-tabbar.template-nav-12 {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  body.qr-body .mobile-menu-tabbar.template-nav-12 .nav-item {
    background: #fff !important;
    border-radius: 999px !important;
    box-shadow: 0 12px 24px rgba(17,24,39,.12) !important;
  }
  body.qr-body .mobile-menu-tabbar.template-nav-12 .nav-item.active {
    transform: translateY(-9px) !important;
    color: #fff !important;
    background: var(--nav-green) !important;
  }

  body.qr-body .mobile-menu-tabbar.template-nav-13 {
    background: #06120f !important;
    border: 1px solid rgba(230,201,122,.4) !important;
    box-shadow: 0 0 0 1px rgba(230,201,122,.16), 0 0 32px rgba(230,201,122,.15) !important;
  }
  body.qr-body .mobile-menu-tabbar.template-nav-13 .nav-item {
    color: rgba(255,255,255,.62) !important;
  }
  body.qr-body .mobile-menu-tabbar.template-nav-13 .nav-item.active {
    color: var(--nav-gold) !important;
    background: transparent !important;
    text-shadow: 0 0 16px rgba(230,201,122,.74) !important;
  }

  body.qr-body .mobile-menu-tabbar.template-nav-14 {
    height: 68px !important;
    border-radius: 16px !important;
    background: #fff8e7 !important;
    border: 1px dashed rgba(138,101,21,.32) !important;
  }
  body.qr-body .mobile-menu-tabbar.template-nav-14 .nav-item.active {
    background: #3a2314 !important;
    color: #fff8e7 !important;
    border-radius: 12px !important;
  }

  body.qr-body .mobile-menu-tabbar.template-nav-15 {
    left: 22px !important;
    right: 22px !important;
    bottom: calc(20px + env(safe-area-inset-bottom)) !important;
    background: rgba(255,255,255,.55) !important;
    border: 1px solid rgba(255,255,255,.82) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    box-shadow: 0 22px 52px rgba(17,24,39,.2) !important;
  }
  body.qr-body .mobile-menu-tabbar.template-nav-15 .nav-item.active {
    background: rgba(255,255,255,.72) !important;
    color: var(--nav-green) !important;
  }

  body.qr-body .mobile-menu-tabbar.template-nav-16 .nav-item.active {
    background: transparent !important;
    color: var(--nav-green) !important;
  }
  body.qr-body .mobile-menu-tabbar.template-nav-16 .nav-item.active::before {
    content: "" !important;
    position: absolute !important;
    top: 5px !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 999px !important;
    background: var(--nav-gold) !important;
  }

  body.qr-body .mobile-menu-tabbar.template-nav-17 {
    border-radius: 12px !important;
    background: #fffdf7 !important;
    border: 1px solid rgba(39,90,83,.18) !important;
  }
  body.qr-body .mobile-menu-tabbar.template-nav-17::before,
  body.qr-body .mobile-menu-tabbar.template-nav-17::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 999px !important;
    background: #f8f9fa !important;
    transform: translateY(-50%) !important;
  }
  body.qr-body .mobile-menu-tabbar.template-nav-17::before { left: -9px !important; }
  body.qr-body .mobile-menu-tabbar.template-nav-17::after { right: -9px !important; }
  body.qr-body .mobile-menu-tabbar.template-nav-17 .nav-item.active {
    color: #fff !important;
    background: var(--nav-green) !important;
  }

  body.qr-body .mobile-menu-tabbar.template-nav-18 {
    height: 62px !important;
    border-radius: 999px 999px 18px 18px !important;
    padding-inline: 16px !important;
  }
  body.qr-body .mobile-menu-tabbar.template-nav-18 .nav-item.active {
    flex: 1.45 1 0 !important;
    color: var(--nav-green) !important;
  }
  body.qr-body .mobile-menu-tabbar.template-nav-18 .nav-item.active::after {
    content: "" !important;
    position: absolute !important;
    left: 20% !important;
    right: 20% !important;
    bottom: 4px !important;
    height: 3px !important;
    background: var(--nav-green) !important;
    border-radius: 999px !important;
  }

  body.qr-body .mobile-menu-tabbar.template-nav-19 {
    height: 70px !important;
    border-radius: 0 !important;
    background: #fffaf0 !important;
    font-family: Georgia, "Times New Roman", serif !important;
    border-top: 1px solid rgba(59,36,22,.22) !important;
    box-shadow: none !important;
  }
  body.qr-body .mobile-menu-tabbar.template-nav-19 .nav-item.active {
    background: transparent !important;
    color: #3b2416 !important;
  }
  body.qr-body .mobile-menu-tabbar.template-nav-19 .nav-item.active em {
    text-decoration: underline !important;
    text-underline-offset: 5px !important;
  }

  body.qr-body .mobile-menu-tabbar.template-nav-20 {
    height: 72px !important;
    border-radius: 30px !important;
    background: linear-gradient(135deg, #10211f, #275a53) !important;
    border: 1px solid rgba(230,201,122,.28) !important;
  }
  body.qr-body .mobile-menu-tabbar.template-nav-20 .nav-item {
    color: rgba(255,255,255,.68) !important;
  }
  body.qr-body .mobile-menu-tabbar.template-nav-20 .nav-item.active {
    color: #10211f !important;
    background: linear-gradient(135deg, #e6c97a, #fff2b8) !important;
    box-shadow: 0 12px 24px rgba(230,201,122,.22) !important;
  }
}

/* QR menu page-level notice for bowl/product success feedback. */
.qr-page-notice {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(17, 24, 39, .18);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
}

.qr-page-notice.show {
    opacity: 1;
    pointer-events: auto;
}

.qr-page-notice-card {
    position: relative;
    width: min(360px, 100%);
    padding: 26px 24px 24px;
    display: grid;
    justify-items: center;
    gap: 9px;
    border: 1px solid rgba(39, 90, 83, .18);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(17, 24, 39, .18);
    text-align: center;
    transform: translateY(10px) scale(.98);
    transition: transform .18s ease;
}

.qr-page-notice.show .qr-page-notice-card {
    transform: translateY(0) scale(1);
}

.qr-page-notice-card button {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: #f3f4f6;
    color: #111827;
    font-size: 20px;
    cursor: pointer;
}

.qr-page-notice-icon {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #275a53;
    color: #fff;
    font-size: 28px;
    font-weight: 950;
}

.qr-page-notice-card strong {
    color: #111827;
    font-size: 20px;
    font-weight: 950;
}

.qr-page-notice-card p {
    margin: 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.45;
}

.qr-tea-choice-modal {
    position: fixed;
    inset: 0;
    z-index: 12100;
    display: grid;
    place-items: center;
    padding: 22px;
    background: rgba(15, 23, 42, .42);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
}

.qr-tea-choice-modal.show {
    opacity: 1;
    pointer-events: auto;
}

.qr-tea-choice-card {
    position: relative;
    width: min(430px, 100%);
    display: grid;
    gap: 14px;
    padding: 26px;
    border: 1px solid rgba(39, 90, 83, .16);
    border-radius: 28px;
    background:
        radial-gradient(circle at 15% 0%, rgba(230, 201, 122, .26), transparent 34%),
        linear-gradient(145deg, #ffffff, #f8fbf8);
    box-shadow: 0 28px 90px rgba(15, 23, 42, .24);
    transform: translateY(12px) scale(.98);
    transition: transform .18s ease;
}

.qr-tea-choice-modal.show .qr-tea-choice-card {
    transform: translateY(0) scale(1);
}

.qr-tea-choice-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: #eef3f0;
    color: #17202b;
    font-size: 22px;
    cursor: pointer;
}

.qr-tea-choice-kicker {
    width: fit-content;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(39, 90, 83, .11);
    color: #275a53;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.qr-tea-choice-card h2 {
    margin: 0;
    color: #111827;
    font-size: 28px;
    line-height: 1.1;
    font-weight: 950;
}

.qr-tea-choice-card p,
.qr-tea-choice-card small {
    margin: 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.45;
}

.qr-tea-choice-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.qr-tea-choice-options button {
    min-height: 98px;
    display: grid;
    align-content: center;
    gap: 9px;
    border: 1px solid rgba(39, 90, 83, .18);
    border-radius: 22px;
    padding: 16px;
    background: #fff;
    color: #17202b;
    box-shadow: 0 14px 32px rgba(39, 90, 83, .08);
    cursor: pointer;
    text-align: left;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.qr-tea-choice-options button:hover,
.qr-tea-choice-options button:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(39, 90, 83, .42);
    background: #f9fcfa;
    box-shadow: 0 18px 42px rgba(39, 90, 83, .14);
}

.qr-tea-choice-options span {
    color: #475467;
    font-size: 13px;
    font-weight: 950;
}

.qr-tea-choice-options strong {
    color: #275a53;
    font-size: 24px;
    font-weight: 950;
    line-height: 1;
}

@media (max-width: 520px) {
    .qr-tea-choice-card {
        padding: 22px;
        border-radius: 24px;
    }

    .qr-tea-choice-options {
        grid-template-columns: 1fr;
    }
}

/* Stronger desktop sidebar active category state. */
@media (min-width: 1024px) {
    .qr-body .qr-filter-sidebar a.active {
        min-height: 42px;
        padding: 8px 12px;
        border-radius: 14px;
        background: linear-gradient(135deg, #275a53, #1f2336) !important;
        color: #fff !important;
        box-shadow: 0 12px 28px rgba(39, 90, 83, .2);
    }

    .qr-body .qr-filter-sidebar a.active span {
        background: #e6c97a !important;
        border-color: #e6c97a !important;
        box-shadow: 0 0 0 4px rgba(230, 201, 122, .22);
    }

    .qr-body .qr-filter-sidebar a.active strong,
    .qr-body .qr-filter-sidebar a.active em {
        color: #fff !important;
        font-weight: 900;
    }
}

.campaign-marquee-preview > div {
  min-height: 54px;
  min-width: max-content;
  display: inline-flex;
  align-items: center;
  gap: 36px;
  white-space: nowrap;
  animation: cafeAdMarquee var(--marquee-duration, 32s) linear infinite;
}

.campaign-marquee-preview span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--marquee-text, #fff);
  font-size: 15px;
  font-weight: 900;
}

.campaign-marquee-preview span::after {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--marquee-dot, #f5ab1e);
  margin-left: 28px;
}

.campaign-marquee-form {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
}

.campaign-marquee-form label {
  display: grid;
  gap: 7px;
  color: #1f2937;
  font-size: 12px;
  font-weight: 900;
}

.campaign-marquee-form > label:nth-of-type(1),
.campaign-marquee-form > label:nth-of-type(2) {
  grid-column: span 2;
}

.campaign-marquee-form > label:nth-of-type(3),
.campaign-marquee-form > label:nth-of-type(4) {
  grid-column: span 1;
}

.campaign-marquee-dates {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
}

.campaign-marquee-dates label {
  grid-column: auto !important;
  min-width: 0;
}

.campaign-marquee-form input {
  min-height: 42px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 0 12px;
  background: #fff;
  color: #1f2937;
  font: inherit;
}

.campaign-marquee-form .switch {
  align-self: center;
}

.campaign-marquee-form .btn {
  min-height: 42px;
}

@media (max-width: 1100px) {
.campaign-marquee-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

.campaign-marquee-form > label:nth-of-type(1),
  .campaign-marquee-form > label:nth-of-type(2) {
    grid-column: span 2;
  }
}

@media (max-width: 700px) {
.campaign-marquee-admin .record-title {
    gap: 10px;
  }

.campaign-marquee-form {
    grid-template-columns: 1fr;
  }

.campaign-marquee-form label,
  .campaign-marquee-form > label:nth-of-type(1),
  .campaign-marquee-form > label:nth-of-type(2) {
    grid-column: 1;
  }

.campaign-marquee-dates {
    grid-column: 1;
    grid-template-columns: 1fr;
  }

.campaign-marquee-preview > div {
    min-height: 48px;
    animation-duration: var(--marquee-duration, 32s);
  }
}

.mobile-menu-editor { display: grid; gap: 18px; }

.preset-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.preset-row select { min-height: 44px; border: 1px solid #ded8cf; border-radius: 8px; padding: 0 12px; }

.mobile-menu-item-list { display: grid; gap: 14px; }

.mobile-menu-edit-card { border: 1px solid #eee7dd; border-radius: 10px; background: #fffdfb; padding: 16px; display: grid; gap: 14px; }

.mobile-menu-edit-card.dragging { opacity: .55; outline: 2px dashed #978667; }

.mobile-row-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }

.drag-handle { width: 42px; min-height: 42px; border: 1px solid #ded8cf !important; background: #fff !important; color: #4b514d !important; border-radius: 8px !important; padding: 0 !important; cursor: grab; }

.mobile-icon-live { display: flex; align-items: center; gap: 10px; color: #6c757d; }

.mobile-icon-live .material-icons { color: #978667; font-size: 30px; }

.phone-frame { width: 390px; max-width: 100%; aspect-ratio: 390 / 844; border-radius: 38px; padding: 12px; background: #1b1c22; box-shadow: 0 18px 42px rgba(0,0,0,.18); margin: 0 auto; }

.phone-screen { position: relative; height: 100%; overflow: hidden; border-radius: 30px; background: linear-gradient(180deg, #fbfaf7, #ece7df); }

.phone-content { position: absolute; inset: 0; display: grid; place-items: center; color: #978667; font-weight: 900; }

.preview-bottom-nav { position: absolute; left: 0; right: 0; bottom: 0; height: 65px; display: flex; align-items: center; justify-content: space-around; background: #fff; box-shadow: 0 -8px 24px rgba(31,35,54,.12); }

.preview-bottom-nav a { flex: 1; min-height: 48px; color: #777d96; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-decoration: none; font-size: 10px; font-weight: 800; }

.preview-bottom-nav a.active { color: var(--preview-active, #4a5378); }

.preview-bottom-nav .material-icons { font-size: 24px; }

.preview-bottom-nav.hide-labels span:last-child, .preview-bottom-nav.template-icons span:last-child { display: none; }

.preview-bottom-nav.template-round a:nth-child(3) { flex: 0 0 62px; width: 62px; height: 62px; border-radius: 50%; background: var(--preview-active, #4a5378); color: #fff; transform: translateY(-18px); box-shadow: 0 10px 24px rgba(74,83,120,.32); }

.preview-bottom-nav.template-modern a.active { background: color-mix(in srgb, var(--preview-active, #4a5378) 12%, transparent); border-radius: 14px; }

.mobile-delete-list { display: flex; flex-wrap: wrap; margin-top: 18px; }

@media (max-width: 640px) {
.campaign-copy { padding: 18px; }

.campaign-copy h2 { font-size: 18px; }

.campaign-copy p { font-size: 13px; }

.campaign-bar .campaign-copy { grid-template-columns: 1fr; padding-right: 48px; }
}

/* Current admin/frontend control refinements */
.site-credit { background: #111; color: #cbb98f; text-align: center; padding: 22px 16px; font-weight: 700; }

.site-credit a { color: #cbb98f; }

.menu-footer-bottom a { color: rgba(255,255,255,.92); }

.nav a span { margin-right: 7px; color: var(--brand); }

.navbar-template-pill .nav a:not(.btn) { background: #f4f0e8; border-radius: 999px; padding: 10px 14px; }

.navbar-template-underline .nav a:not(.btn) { padding-bottom: 8px; border-bottom: 2px solid transparent; }

.navbar-template-underline .nav a:not(.btn):hover { border-color: var(--brand); text-decoration: none; }

.menu-search::before { content: "⌕"; font-size: 24px; line-height: 1; color: #757b94; }

.menu-search input::placeholder { color: #6f748b; opacity: 1; }

.inline-image-preview {
  display: block;
  margin-top: 8px;
  min-height: 70px;
}

.inline-image-preview img {
  width: 110px;
  height: 70px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #e3e5ea;
}

[data-preview].preview-attention {
  outline: 3px solid #978667;
  outline-offset: 3px;
}

.category-image-preview { min-height: 64px; display: flex; align-items: center; }

.category-image-preview img { width: 86px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid #eee7dd; background: #f4f0e8; }

.bulk-price-preview { margin-top: 18px; border: 1px solid #eee7dd; border-radius: 10px; overflow: hidden; }

.bulk-price-head,
.bulk-price-row { display: grid; grid-template-columns: minmax(180px,1.2fr) minmax(120px,.8fr) 120px 140px; gap: 12px; align-items: center; padding: 12px 14px; }

.bulk-price-head { background: #f7f4f0; color: #978667; font-size: 12px; font-weight: 900; text-transform: uppercase; }

.bulk-price-row { border-top: 1px solid #eee7dd; }

.bulk-price-row strong { color: #212529; }

.bulk-price-row b { color: #198754; }

.record-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

.record-actions .danger, button.danger {
  background: #dc3545;
  color: #fff;
  border-color: #dc3545;
}

.category-create { border-color: rgba(151,134,103,.35); }

.remember-check { display: flex !important; align-items: center; gap: 8px; font-weight: 700; color: #4b514d; }

.remember-check input { width: auto; min-height: auto; }

/* Bowl builder */
.bowl-builder-card {
  margin: 0 0 28px;
  padding: 26px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 28px;
  align-items: center;
  border: 1px solid #e6eee9;
  border-radius: 16px;
  background: linear-gradient(135deg, #f8fffb 0%, #eef8f4 100%);
  box-shadow: 0 12px 34px rgba(44,90,78,.10);
}

.bowl-builder-copy span { color: #4c8b7c; font-weight: 900; text-transform: uppercase; font-size: 12px; }

.bowl-builder-copy h2 { margin: 8px 0 10px; font-size: 30px; color: #20233a; }

.bowl-builder-copy p { margin: 0 0 18px; color: #5f6577; max-width: 620px; }

.bowl-builder-card img { width: 100%; height: 190px; object-fit: contain; filter: drop-shadow(0 18px 24px rgba(44,90,78,.18)); }

.bowl-close-btn {
  position: absolute;
  right: 18px;
  top: 16px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  color: #fff;
  font-size: 22px;
  cursor: pointer;
}

.bowl-two-column-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.bowl-column { background: #fff; border-radius: 14px; padding: 16px; border: 1px solid #edf0ee; }

.bowl-column > strong { display: block; text-align: center; color: #4c8b7c; margin-bottom: 12px; }

.bowl-selection-counter { display: table; margin: 0 auto 16px; padding: 9px 18px; border-radius: 999px; background: #4c8b7c; color: #fff; font-weight: 900; }

@media (max-width: 720px) {
.bowl-builder-card { grid-template-columns: 1fr; padding: 18px; }

.bowl-builder-card img { height: 150px; order: -1; }

.bowl-two-column-layout { grid-template-columns: 1fr; }
}

.image-source-control { display: grid; grid-template-columns: 110px minmax(0,1fr); gap: 8px; align-items: center; }

.image-source-control select, .image-source-control input[data-url-input] { grid-column: 2; }

.image-source-control input[data-url-input] { display: block; }

.image-source-control input[data-url-input]:disabled { display: none; }

.image-source-control select:disabled { display: none; }

.url-toggle { grid-row: 1 / span 2; display: flex !important; align-items: center; gap: 7px !important; font-size: 12px; font-weight: 900; color: #4b514d; }

.url-toggle input { width: auto !important; min-height: auto !important; }

.theme-preset-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 10px; }

.theme-preset-grid button {
  min-height: 92px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 8px;
  background: var(--swatch-bg);
  color: var(--swatch-text);
  display: flex;
  align-items: end;
  padding: 12px;
  font-weight: 900;
  cursor: pointer;
  text-align: left;
}

.navbar-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  padding: 18px;
  border: 1px solid #eee7dd;
  border-radius: 8px;
  background: #fbfaf7;
}

.navbar-preview a { color: #333; font-weight: 900; }

.navbar-preview a span { margin-right: 6px; color: #978667; }

.navbar-preview-pill a:not(.btn) { background: #efe9de; border-radius: 999px; padding: 10px 14px; }

.navbar-preview-underline a:not(.btn) { padding-bottom: 8px; border-bottom: 2px solid #978667; }

@media (max-width: 1100px) {
.image-source-control { grid-column: 1 / -1; grid-template-columns: 1fr; }

.image-source-control select, .image-source-control input[data-url-input] { grid-column: 1; }

.url-toggle { grid-row: auto; }
}

/* Welcome gateway home */
.welcome-gateway {
  min-height: calc(100vh - 170px);
  padding: 34px 32px 78px;
  text-align: center;
  background: linear-gradient(180deg, rgba(0,0,0,.22) 0, rgba(255,255,255,.96) 145px, #fff 100%);
}

.welcome-logo { width: 150px; height: 78px; object-fit: contain; margin: 0 auto 24px; display: block; }

.welcome-gateway h1 { margin: 0 0 70px; font-size: clamp(44px, 5vw, 70px); line-height: 1; font-weight: 400; color: #242424; }

.welcome-card-grid { max-width: 1760px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(52px, 6vw, 104px); align-items: center; }

.welcome-only-home .welcome-gateway { min-height: auto; padding-bottom: 36px; }

.welcome-card {
  position: relative;
  min-height: 620px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: visible;
  color: #fff;
}

.welcome-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.86); }

.welcome-card::after { content: ""; position: absolute; inset: 16px; border: 1px solid rgba(255,255,255,.55); opacity: 0; pointer-events: none; }

.welcome-card-title {
  position: absolute;
  top: 58px;
  left: 0;
  right: 0;
  padding: 26px 16px;
  background: rgba(255,255,255,.58);
  color: #0d0d0d;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(36px, 3vw, 58px);
  line-height: 1;
}

.welcome-card strong {
  position: relative;
  z-index: 1;
  min-width: 260px;
  margin: 0 0 44px;
  padding: 22px 36px;
  background: #000;
  color: #fff;
  font-size: clamp(26px, 2vw, 36px);
  font-weight: 500;
}

.drag-order-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-bottom: 18px; }

.drag-order-card {
  min-height: 96px;
  display: grid;
  gap: 6px;
  align-content: center;
  border: 1px solid #eee7dd;
  border-radius: 8px;
  background: #fffdfb;
  padding: 14px;
  cursor: grab;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}

.drag-order-card > span { color: #978667; font-weight: 900; }

.drag-order-card strong { color: #20233a; }

.drag-order-card small { color: #6c757d; font-weight: 700; }

.drag-order-card.dragging { opacity: .5; cursor: grabbing; outline: 2px dashed #978667; }

.drag-card-tools { display: grid; grid-template-columns: repeat(4, 32px); gap: 5px; align-items: center; }

.drag-order-card .drag-card-tools { display: none !important; }

.drag-card-tools button {
  width: 32px;
  height: 32px;
  min-height: 32px;
  border: 1px solid #ded8cf;
  border-radius: 8px;
  background: #fff;
  color: #4b514d;
  font-weight: 900;
  cursor: pointer;
  padding: 0;
}

.drag-card-tools button:hover { background: #978667; color: #fff; border-color: #978667; }

@media (max-width: 1100px) {
.welcome-card-grid { gap: 24px; }

.welcome-card { min-height: 460px; }

.welcome-card-title { font-size: 34px; }
}

@media (max-width: 760px) {
.welcome-gateway { padding: 24px 16px 54px; }

.welcome-gateway h1 { margin-bottom: 34px; font-size: 42px; }

.welcome-card-grid { grid-template-columns: 1fr; gap: 28px; }

.welcome-card { min-height: 420px; }
}

h1, h2, h3, p { margin-top: 0; }

h2 { font-size: clamp(26px, 3vw, 38px); line-height: 1.3; color: var(--dark); }

input, button, textarea { font: inherit; }

.site-header { position: sticky; top: 0; z-index: 10; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 18px 32px; background: rgba(255,255,255,.94); border-bottom: 1px solid var(--line); backdrop-filter: blur(10px); }

.brand { display: inline-flex; align-items: center; color: var(--dark); }

.brand img { width: 150px; height: 54px; object-fit: contain; display: block; }

.nav { display: flex; align-items: center; gap: 18px; font-size: 15px; }

.nav a:hover { color: var(--brand); }

.site-mobile-menu-toggle,
.site-mobile-menu { display: none; }

.site-mobile-menu-toggle {
  width: 46px;
  height: 46px;
  border: 1px solid rgba(39, 90, 83, .16);
  border-radius: 999px;
  background: #fff;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  box-shadow: 0 10px 28px rgba(31, 41, 55, .08);
  cursor: pointer;
}

.site-mobile-menu-toggle span {
  width: 20px;
  height: 2px;
  border-radius: 99px;
  background: var(--brand);
  display: block;
}

.site-mobile-menu {
  position: fixed;
  inset: 0 !important;
  width: 100vw;
  min-width: 100vw;
  height: 100vh;
  min-height: 100vh;
  height: 100dvh;
  min-height: 100dvh;
  z-index: 2147483000;
  background: #fff !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: #1f2937;
  padding: clamp(18px, 4vw, 34px);
  overflow-y: auto;
  margin: 0 !important;
  max-width: none !important;
  transform: none !important;
  box-sizing: border-box;
}

.site-mobile-menu[hidden] { display: none !important; }

.site-mobile-menu:not([hidden]),
body.site-menu-open .site-mobile-menu { display: block !important; }

.site-mobile-menu-head {
  position: relative;
  display: grid;
  place-items: center;
  gap: 18px;
  max-width: 620px;
  width: min(620px, calc(100vw - 44px));
  margin-left: auto;
  margin-right: auto;
  margin-bottom: clamp(26px, 5vw, 52px);
  min-height: 76px;
}

.site-mobile-menu-head img {
  width: clamp(154px, 24vw, 218px);
  height: 72px;
  object-fit: contain;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .22);
}

.site-mobile-menu-head button {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28), 0 16px 34px rgba(0, 0, 0, .16);
}

.site-mobile-menu nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  max-width: 720px;
  width: min(720px, calc(100vw - 44px));
  margin: 0 auto;
}

.site-mobile-menu nav a {
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 20px;
  background: rgba(255, 255, 255, .94);
  color: #17202b;
  font-size: clamp(15px, 2.1vw, 18px);
  font-weight: 800;
  text-align: center;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .14);
  transition: transform .24s ease, box-shadow .24s ease, background .24s ease;
}

.site-mobile-menu nav a:hover,
.site-mobile-menu nav a:focus-visible {
  transform: translateY(-2px);
  background: #fff;
  box-shadow: 0 24px 50px rgba(0, 0, 0, .2);
}

.site-mobile-menu nav a span { color: var(--brand); }

.site-mobile-menu nav .site-mobile-reservation {
  grid-column: 1 / -1;
  background: #275A53;
  color: #fff;
  border-color: rgba(230, 201, 122, .5);
  box-shadow: 0 20px 46px rgba(0, 0, 0, .24), inset 0 0 0 1px rgba(255,255,255,.18);
}

body.site-menu-open { overflow: hidden; touch-action: none; }

body.site-menu-open .site-header { z-index: 2147482999; }

.btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 25px; border-radius: 25px; border: 0; font-weight: 600; }

.btn.primary { background: var(--brand); color: white; }

.btn.ghost { color: var(--brand); padding-left: 0; padding-right: 0; }

.btn.mini { min-height: 38px; padding: 9px 18px; background: var(--brand); color: white; }

.hero, .page-hero, .room-detail { max-width: 1200px; margin: 0 auto; padding: 72px 32px; display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }

.hero img, .page-hero img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 8px; }

.editorial h1 span { color: var(--brand); }

.eyebrow { color: var(--brand); text-transform: uppercase; font-size: 13px; font-weight: 700; letter-spacing: 0; }

.muted { color: var(--muted); }

.actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; }

.split-brands { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.split-brands a { padding: 48px 32px; display: grid; gap: 8px; }

.split-brands a:first-child { border-right: 1px solid var(--line); }

.split-brands span { color: var(--brand); font-weight: 600; }

.split-brands strong { font-size: clamp(22px, 3vw, 34px); color: var(--dark); }

.home-editorial-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 92px 32px;
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 72px;
  align-items: center;
}

.home-editorial-section.reverse { grid-template-columns: 1.1fr .9fr; }

.home-editorial-section img,
.home-gallery-section img,
.home-room-grid img {
  width: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.home-editorial-section img { height: 440px; }

.home-editorial-section p:not(.eyebrow) { color: #626775; }

.home-gallery-section,
.home-rooms-section,
.home-sustainability-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 90px 32px;
}

.home-gallery-section > div {
  display: grid;
  grid-template-columns: 1.2fr .8fr .8fr 1.2fr;
  gap: 18px;
  margin-top: 28px;
}

.home-gallery-section img { height: 330px; }

.home-room-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 28px;
}

.home-room-grid a {
  display: grid;
  gap: 10px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.home-room-grid img { height: 340px; }

.home-room-grid span { color: var(--brand); font-size: 12px; font-weight: 800; text-transform: uppercase; }

.home-room-grid strong { font-size: 28px; color: var(--dark); }

.home-location-section {
  background: #f7f5f1;
  padding: 90px max(32px, calc((100vw - 1200px) / 2 + 32px));
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 70px;
  align-items: center;
}

.home-location-section p:not(.eyebrow) { color: #626775; }

.location-card {
  min-height: 220px;
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 34px;
  border: 1px solid #ded8cf;
  border-radius: 8px;
  background: #fff;
}

.location-card strong { font-size: 24px; color: var(--dark); }

.location-card span { color: var(--brand); font-weight: 800; }

.home-sustainability-section > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: 28px;
}

.home-sustainability-section article {
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.home-sustainability-section strong { display: block; margin-bottom: 8px; color: var(--dark); }

.home-sustainability-section span { color: #626775; }

.section { max-width: 1200px; margin: 0 auto; padding: 64px 32px; }

.muted-section { background: var(--soft); max-width: none; padding-left: max(32px, calc((100vw - 1200px) / 2 + 32px)); padding-right: max(32px, calc((100vw - 1200px) / 2 + 32px)); }

.feature-grid, .room-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; }

.soft-card, .room-card { background: white; border: 1px solid var(--line); border-radius: 8px; padding: 24px; box-shadow: 0 2px 8px rgba(0,0,0,.08); }

.tag-list { display: flex; flex-wrap: wrap; gap: 10px; }

.tag-list span { border: 1px solid var(--line); border-radius: 25px; padding: 8px 14px; background: white; }

.room-card dl { display: grid; gap: 8px; margin: 24px 0; }

.room-card dl div { display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); padding-bottom: 8px; }

.room-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }

.room-gallery img { aspect-ratio: 1; object-fit: cover; border-radius: 8px; }

.room-panel { border: 1px solid var(--line); border-radius: 8px; padding: 32px; }

.stats { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0; }

.stats span { background: var(--soft); border-radius: 25px; padding: 8px 14px; }

.footer { display: flex; justify-content: space-between; gap: 32px; padding: 40px 32px; border-top: 1px solid var(--line); background: var(--soft); }

.about-page { background: #fff; }

.about-split {
  max-width: 1480px;
  margin: 0 auto;
  padding: 92px 32px 100px;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(420px, .95fr);
  gap: clamp(56px, 7vw, 110px);
  align-items: center;
}

.about-collage {
  position: relative;
  min-height: 690px;
  padding-right: min(150px, 18%);
}

.about-collage img {
  object-fit: cover;
  border-radius: 8px;
}

.about-collage-main {
  width: 100%;
  height: 690px;
  object-position: center;
}

.about-collage-card {
  position: absolute;
  right: 0;
  top: 185px;
  width: min(430px, 52%);
  height: 470px;
  border: 6px solid #fff;
  box-shadow: 0 18px 42px rgba(31,35,54,.18);
  object-position: center;
}

.about-copy {
  max-width: 620px;
  justify-self: end;
  position: relative;
  z-index: 2;
}

.about-copy .eyebrow {
  margin-bottom: 12px;
  color: #8f846f;
  letter-spacing: 5px;
}

.about-copy h1 {
  margin-bottom: 28px;
  font-size: clamp(42px, 4vw, 58px);
  line-height: 1.08;
  font-weight: 800;
}

.about-copy p {
  margin-bottom: 28px;
  color: #404047;
  font-size: clamp(17px, 1.35vw, 22px);
  line-height: 1.68;
}

.about-copy span {
  display: inline-block;
  margin-top: 10px;
  color: #555;
  font-size: clamp(25px, 2.6vw, 38px);
  font-style: italic;
  font-weight: 400;
}

.gallery-page {
  min-height: 100vh;
  background: #f8f6f2;
}

.gallery-hero {
  position: relative;
  height: 410px;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.gallery-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-hero > div:first-of-type {
  position: absolute;
  inset: 0;
  background: rgba(18, 16, 13, .48);
}

.gallery-hero-copy {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  text-align: center;
}

.gallery-hero-copy p {
  margin-bottom: 8px;
  color: rgba(255,255,255,.76);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.gallery-hero h1 {
  color: #fff;
  font-size: clamp(42px, 5vw, 62px);
  line-height: 1;
  text-transform: uppercase;
}

.gallery-shell {
  max-width: 1120px;
  margin: 0 auto;
  padding: 112px 32px 180px;
}

.gallery-tabs {
  display: flex;
  justify-content: center;
  gap: 0;
  border-bottom: 1px solid #ddd8cf;
  margin-bottom: 46px;
  overflow-x: auto;
}

.gallery-tabs button {
  min-height: 54px;
  padding: 0 20px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: #3c3f48;
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  white-space: nowrap;
}

.gallery-tabs button.active {
  border-bottom-color: #3c3f48;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.gallery-item {
  display: none;
  padding: 0;
  border: 0;
  border-radius: 8px;
  overflow: hidden;
  background: transparent;
}

.gallery-item.visible {
  display: block;
}

.gallery-item img {
  width: 100%;
  height: 190px;
  object-fit: cover;
  border-radius: 8px;
  transition: transform .22s ease;
}

.gallery-item:hover img {
  transform: scale(1.03);
}

.lightbox-open {
  overflow: hidden;
}

.gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 34px 80px;
  background: rgba(18,18,18,.86);
}

.gallery-lightbox.open {
  display: flex;
}

.gallery-lightbox img {
  max-width: min(1500px, 86vw);
  max-height: 86vh;
  object-fit: contain;
  box-shadow: 0 22px 60px rgba(0,0,0,.28);
}

.gallery-lightbox-count {
  position: fixed;
  top: 14px;
  left: 16px;
  color: #fff;
  font-size: 22px;
  line-height: 1;
  z-index: 101;
}

.gallery-lightbox-close {
  position: fixed;
  top: 0;
  right: 0;
  width: 58px;
  height: 58px;
  border: 0;
  background: rgba(0,0,0,.28);
  color: #fff;
  font-size: 34px;
  line-height: 1;
  z-index: 101;
}

.gallery-lightbox-arrow {
  position: fixed;
  top: 50%;
  z-index: 101;
  width: 56px;
  height: 56px;
  transform: translateY(-50%);
  border: 0;
  background: rgba(0,0,0,.28);
  color: #fff;
  font-size: 44px;
  line-height: 1;
}

.gallery-lightbox-arrow.prev { left: 10px; }

.gallery-lightbox-arrow.next { right: 10px; }

.breakfast-page {
  background: #fff;
}

.breakfast-hero {
  position: relative;
  height: 430px;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.breakfast-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.breakfast-hero > div:first-of-type {
  position: absolute;
  inset: 0;
  background: rgba(18, 16, 13, .52);
}

.breakfast-hero-copy {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  text-align: center;
}

.breakfast-hero-copy p {
  margin-bottom: 8px;
  color: rgba(255,255,255,.76);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.breakfast-hero h1 {
  color: #fff;
  font-size: clamp(38px, 5vw, 58px);
  line-height: 1.08;
  text-transform: uppercase;
}

.breakfast-intro {
  max-width: 1200px;
  margin: 0 auto;
  padding: 92px 32px;
  display: grid;
  grid-template-columns: .88fr 1.12fr;
  gap: 72px;
  align-items: center;
}

.breakfast-intro p:not(.eyebrow) {
  color: #626775;
}

.breakfast-collage {
  position: relative;
  min-height: 520px;
}

.breakfast-collage img {
  object-fit: cover;
  border-radius: 8px;
}

.breakfast-collage .large {
  width: 78%;
  height: 480px;
}

.breakfast-collage .small {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 46%;
  height: 260px;
  border: 6px solid #fff;
  box-shadow: 0 18px 42px rgba(31,35,54,.14);
}

.breakfast-grid-section {
  background: #f8f6f2;
  padding: 86px max(32px, calc((100vw - 1200px) / 2 + 32px));
}

.breakfast-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: 28px;
}

.breakfast-feature-grid article {
  padding: 28px;
  border: 1px solid #e0dbd2;
  border-radius: 8px;
  background: #fff;
}

.breakfast-feature-grid strong {
  display: block;
  margin-bottom: 10px;
  color: var(--dark);
  font-size: 18px;
}

.breakfast-feature-grid span {
  color: #626775;
}

.breakfast-gallery-strip {
  max-width: 1200px;
  margin: 0 auto;
  padding: 90px 32px 120px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.breakfast-gallery-strip img {
  width: 100%;
  height: 310px;
  object-fit: cover;
  border-radius: 8px;
}

.location-guide-page {
  background: #fff;
}

.location-guide-shell {
  max-width: 1500px;
  margin: 0 auto;
  padding: 70px 32px 140px;
}

.location-guide-shell h1 {
  margin-bottom: 72px;
  text-align: center;
  font-size: clamp(42px, 5vw, 66px);
  font-weight: 400;
  line-height: 1.15;
}

.location-route-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 78px;
  align-items: start;
}

.location-route-card {
  position: relative;
  display: block;
  min-height: 610px;
  overflow: visible;
}

.location-route-card img {
  width: 100%;
  height: 610px;
  object-fit: cover;
}

.location-route-card span {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 62%;
  min-height: 92px;
  transform: translate(-50%, 0);
  display: grid;
  place-items: center;
  background: #000;
  color: #fff;
  font-size: clamp(25px, 2.1vw, 34px);
  font-weight: 400;
  text-align: center;
}

.location-route-card:hover span {
  background: var(--brand);
}

.location-detail-page {
  background: #fff;
}

.location-detail-hero {
  position: relative;
  height: 430px;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.location-detail-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.location-detail-hero div {
  position: absolute;
  inset: 0;
  background: rgba(18, 16, 13, .48);
}

.location-detail-hero h1 {
  position: relative;
  z-index: 1;
  color: #fff;
  text-transform: uppercase;
}

.location-detail-copy {
  max-width: 900px;
  margin: 0 auto;
  padding: 82px 32px 120px;
  text-align: center;
}

.location-detail-copy p:not(.eyebrow) {
  color: #626775;
  font-size: 18px;
}

.location-place-list {
  max-width: 980px;
  margin: -40px auto 130px;
  padding: 0 32px;
  display: grid;
  gap: 18px;
}

.location-place-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 26px 30px;
  border: 1px solid #e0dbd2;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(31,35,54,.07);
}

.location-place-card p {
  margin-bottom: 4px;
  color: var(--brand);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.location-place-card h3 {
  margin-bottom: 8px;
  color: var(--dark);
  font-size: 24px;
}

.location-place-card span {
  color: #626775;
}

.route-story-list {
  max-width: 1120px;
  margin: -20px auto 130px;
  padding: 0 32px;
  display: grid;
  gap: 110px;
}

.route-story {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(340px, 1.05fr);
  gap: 76px;
  align-items: center;
}

.route-story.reverse {
  grid-template-columns: minmax(340px, 1.05fr) minmax(0, .95fr);
}

.route-story.reverse .route-story-copy {
  order: 2;
}

.route-story.reverse img {
  order: 1;
}

.route-story-copy h2 {
  margin-bottom: 18px;
  font-size: clamp(30px, 3.2vw, 44px);
  font-weight: 400;
}

.route-story-copy p {
  color: #363a43;
  line-height: 1.72;
}

.route-story-copy span {
  display: block;
  margin: 24px 0 20px;
  color: #8a8170;
  font-size: 13px;
}

.route-story-copy span::before {
  content: "+ ";
}

.route-story-copy a {
  min-width: 122px;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #bdb7ac;
  color: #333;
  font-size: 13px;
  font-weight: 600;
}

.route-story-copy a:hover {
  border-color: var(--brand);
  color: var(--brand);
}

.route-story img {
  width: 100%;
  height: 520px;
  object-fit: cover;
}

.menu-app-header {
  height: 86px;
  display: grid;
  grid-template-columns: 230px max-content auto;
  align-items: center;
  gap: 22px;
  padding: 0 72px;
  background: #fff;
  box-shadow: 0 6px 24px rgba(31,35,54,.08);
}

.menu-logo {
  display: grid;
  width: 160px;
  color: #24263b;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0;
}

.menu-logo span { color: var(--brand); font-weight: 800; font-size: 18px; }

.menu-logo strong { font-size: 30px; font-weight: 800; }

.menu-main-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 28px;
  font-weight: 800;
  color: #191b2f;
}

.menu-main-nav a:hover { color: var(--brand); }

.menu-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
}

.menu-search {
  width: 260px;
  height: 48px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  border-radius: 999px;
  background: #f0f1f6;
  color: #747891;
}

.menu-search input {
  min-height: 0;
  height: auto;
  border: 0;
  padding: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
}

.menu-search input:focus { outline: 0; border-color: transparent; box-shadow: none; }

.menu-lang, .menu-cart, .menu-login {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  padding: 0 18px;
  font-weight: 800;
  background: #fff;
  color: #20233a;
  box-shadow: 0 4px 14px rgba(31,35,54,.08);
}

.menu-cart, .menu-login { background: #232743; color: #fff; }

.category-plate {
  width: 74px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, #fff 0 22%, var(--brand-soft) 23% 60%, transparent 61%);
  filter: drop-shadow(0 12px 16px rgba(31,35,54,.18));
  color: var(--brand);
  font-size: 28px;
  font-weight: 900;
}

.category-plate-img {
  width: 78px;
  height: 58px;
  object-fit: contain;
  filter: drop-shadow(0 12px 14px rgba(31,35,54,.22));
}

.menu-section-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 24px;
  margin-bottom: 28px;
}

.menu-section-head h1 {
  font-size: clamp(30px, 3vw, 42px);
  margin: 0;
  color: #050611;
}

.mobile-menu-tabbar { display: none; }

.menu-footer {
  background: #3b4865;
  color: #fff;
}

.menu-footer-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 72px 24px;
  display: grid;
  grid-template-columns: 1.2fr .8fr 1fr;
  gap: 70px;
}

.footer-logo { color: #fff; margin-bottom: 28px; }

.menu-footer p, .menu-footer a { color: rgba(255,255,255,.9); }

.menu-footer h3 { margin-top: 0; font-size: 20px; }

.menu-footer form {
  max-width: 330px;
  height: 50px;
  display: grid;
  grid-template-columns: 1fr auto;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
}

.menu-footer input { border: 0; min-height: 50px; }

.menu-footer button {
  border: 0;
  background: #25304b;
  color: #fff;
  padding: 0 18px;
  font-weight: 800;
}

.menu-footer-bottom {
  border-top: 1px solid rgba(0,0,0,.22);
  text-align: center;
  padding: 32px 16px;
  font-weight: 700;
  color: rgba(255,255,255,.9);
}

.hotel-home { background: #fff; }

.hotel-hero {
  position: relative;
  min-height: 620px;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.hotel-hero > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.9);
}

.hotel-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(4,7,14,.58), rgba(4,7,14,.34) 45%, rgba(4,7,14,.62));
}

.hotel-hero-content {
  position: relative;
  z-index: 1;
  width: min(980px, calc(100% - 32px));
  text-align: center;
  color: #fff;
  padding-top: 60px;
}

.hotel-hero-content > p {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.8px;
  color: var(--brand-soft);
}

.hotel-hero-content h1 {
  max-width: 680px;
  margin: 0 auto 34px;
  color: #fff;
  text-transform: uppercase;
  font-size: clamp(34px, 5vw, 58px);
  line-height: 1.08;
}

.booking-strip {
  display: grid;
  grid-template-columns: 1.1fr 1.1fr .7fr .7fr auto;
  align-items: stretch;
  min-height: 54px;
  background: #fff;
  color: #20233a;
  border: 2px solid rgba(255,255,255,.55);
  box-shadow: 0 14px 40px rgba(0,0,0,.28);
}

.booking-strip label {
  min-width: 0;
  display: grid;
  gap: 2px;
  padding: 8px 14px;
  border-right: 1px solid #e6e8ee;
  color: #71768a;
  text-align: left;
  font-size: 11px;
}

.booking-strip input {
  min-height: 22px;
  border: 0;
  padding: 0;
  color: #1f2336;
  font-size: 13px;
  outline: 0;
}

.booking-strip a {
  display: grid;
  place-items: center;
  padding: 0 28px;
  background: #1f2336;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}

.reseliva-booking-widget {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: min(1120px, calc(100vw - 48px));
  min-height: 76px;
  padding: 10px 14px;
  overflow: visible;
}

.reseliva-booking-widget #reseliva-widget {
  width: 100%;
  max-width: 100%;
  display: block;
}

.reseliva-booking-widget .powered_by {
  display: none !important;
  background: transparent !important;
  color: inherit !important;
  padding: 0 !important;
}

.reseliva-booking-widget iframe,
.reseliva-booking-widget table,
.reseliva-booking-widget form {
  max-width: 100% !important;
}

.reseliva-booking-widget #reseliva-widget,
.reseliva-booking-widget #reseliva-widget > * {
  margin-left: auto !important;
  margin-right: auto !important;
}

.reseliva-booking-widget button,
.reseliva-booking-widget input[type="button"],
.reseliva-booking-widget input[type="submit"],
.reseliva-booking-widget a[class*="btn"],
.reseliva-booking-widget [class*="button"] {
  background-color: #275A53 !important;
  border-color: #275A53 !important;
  color: #fff !important;
}

.hotel-redirect-modal {
  position: fixed;
  inset: 0;
  z-index: 15000;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(17, 24, 39, .48);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}

.hotel-redirect-modal[hidden] {
  display: none !important;
}

.hotel-redirect-modal.show {
  opacity: 1;
  pointer-events: auto;
}

.hotel-redirect-card {
  position: relative;
  width: min(430px, 100%);
  padding: 30px 26px 24px;
  border: 1px solid rgba(151, 134, 103, .22);
  border-radius: 26px;
  background: #fffdf8;
  box-shadow: 0 28px 80px rgba(17, 24, 39, .24);
  text-align: center;
  transform: translateY(12px) scale(.98);
  transition: transform .18s ease;
}

.hotel-redirect-modal.show .hotel-redirect-card {
  transform: translateY(0) scale(1);
}

.hotel-redirect-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: #f4efe6;
  color: #2f3437;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.hotel-redirect-kicker {
  display: block;
  margin-bottom: 9px;
  color: #978667;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.hotel-redirect-card h2 {
  margin: 0;
  color: #1f2336;
  font-size: clamp(24px, 4vw, 31px);
  line-height: 1.1;
}

.hotel-redirect-card p {
  margin: 12px auto 0;
  max-width: 330px;
  color: #687084;
  font-size: 14px;
  line-height: 1.55;
}

.hotel-redirect-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 22px;
}

.hotel-redirect-actions button,
.hotel-redirect-actions a {
  min-height: 44px;
  border-radius: 999px;
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
}

.hotel-redirect-actions button {
  border: 1px solid rgba(151, 134, 103, .3);
  background: transparent;
  color: #687084;
}

.hotel-redirect-actions a {
  border: 1px solid #275A53;
  background: #275A53;
  color: #fff;
}

.hotel-intro {
  max-width: 1120px;
  margin: 0 auto;
  padding: 96px 32px;
  display: grid;
  grid-template-columns: .92fr 1fr;
  gap: 72px;
  align-items: center;
}

.intro-copy h2 { max-width: 460px; }

.intro-copy p { color: #626879; }

.intro-copy span {
  display: inline-block;
  margin-top: 18px;
  color: var(--brand);
  font-weight: 700;
  font-style: italic;
}

.intro-collage {
  position: relative;
  min-height: 430px;
}

.intro-collage img {
  position: absolute;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 16px 36px rgba(31,35,54,.18);
}

.intro-collage .large {
  right: 0;
  top: 0;
  width: 68%;
  height: 390px;
}

.intro-collage .small {
  left: 0;
  bottom: 0;
  width: 55%;
  height: 250px;
}

.charge-band {
  min-height: 300px;
  display: grid;
  place-items: center;
  text-align: center;
  color: #fff;
  background:
    linear-gradient(rgba(16,25,42,.58), rgba(16,25,42,.58)),
    url('/arazotel-assets/page-images/wp-content__uploads__2025__03__a1.webp') center/cover;
}

.charge-band p, .amenity-band p { color: var(--brand-soft); font-size: 12px; font-weight: 800; letter-spacing: 1.7px; }

.charge-band h2 { color: #fff; max-width: 620px; }

.hotel-rooms-section {
  max-width: 1120px;
  margin: 0 auto;
  padding: 88px 32px;
}

.hotel-room-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 20px;
}

.hotel-room-cards article {
  position: relative;
  min-height: 300px;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(31,35,54,.18);
}

.hotel-room-cards img {
  width: 100%;
  height: 100%;
  min-height: 300px;
  object-fit: cover;
}

.hotel-room-cards article::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.72));
}

.hotel-room-cards article div {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  z-index: 1;
  color: #fff;
}

.hotel-room-cards small { color: rgba(255,255,255,.75); font-weight: 700; }

.hotel-room-cards h3 { margin: 4px 0 0; font-size: 22px; }

.outline-link {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 24px;
  padding: 8px 18px;
  border: 1px solid #20233a;
  border-radius: 999px;
  color: #20233a;
  font-weight: 700;
  font-size: 13px;
}

.amenity-band {
  position: relative;
  min-height: 330px;
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
  color: #fff;
}

.amenity-band > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(.48) saturate(.95);
}

.amenity-band > div { position: relative; z-index: 1; width: min(900px, calc(100% - 32px)); }

.amenity-band h2 { color: #fff; font-size: clamp(34px, 5vw, 54px); }

.amenity-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 42px;
  border-top: 1px solid rgba(255,255,255,.22);
}

.amenity-row span {
  padding: 20px 12px;
  border-right: 1px solid rgba(255,255,255,.22);
  font-weight: 700;
}

.hotel-services {
  max-width: 1120px;
  margin: 0 auto;
  padding: 92px 32px;
  display: grid;
  gap: 72px;
}

.hotel-services article {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.hotel-services img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 8px;
}

.rooms-showcase { background: #f7f4f0; min-height: 100vh; }

.rooms-hero {
  position: relative;
  height: 420px;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.rooms-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rooms-hero div {
  position: absolute;
  inset: 0;
  background: rgba(12,16,24,.48);
}

.rooms-hero h1 {
  position: relative;
  z-index: 1;
  color: #fff;
  text-transform: uppercase;
  font-size: clamp(34px, 5vw, 58px);
  text-align: center;
}

.room-editorial-list {
  max-width: 1120px;
  margin: 0 auto;
  padding: 110px 32px 160px;
  display: grid;
  gap: 118px;
}

.room-editorial {
  position: relative;
  min-height: 470px;
  display: grid;
  align-items: center;
}

.room-editorial > img {
  width: 74%;
  height: 470px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 18px 40px rgba(31,35,54,.12);
}

.room-editorial.reverse > img {
  justify-self: end;
}

.room-floating-card {
  position: absolute;
  right: 0;
  width: 440px;
  padding: 38px 42px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(31,35,54,.12);
}

.room-editorial.reverse .room-floating-card {
  left: 0;
  right: auto;
}

.room-floating-card > p {
  margin-bottom: 4px;
  color: var(--brand);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.room-floating-card h2 {
  margin-bottom: 20px;
  font-size: 28px;
}

.room-floating-card ul {
  columns: 2;
  column-gap: 26px;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
  color: #51596b;
  font-size: 13px;
  line-height: 1.9;
}

.room-floating-card li::before {
  content: "✓ ";
  color: var(--brand);
  font-weight: 800;
}

.room-card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  font-size: 12px;
  font-weight: 800;
}

.reserve-dot {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.reserve-dot span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 22px;
  line-height: 1;
}

.rooms-showcase { background: #f8f6f2; }

.rooms-hero { height: 390px; }

.rooms-hero div.rooms-hero-copy {
  position: relative;
  inset: auto;
  z-index: 1;
  display: grid;
  justify-items: center;
  text-align: center;
  background: transparent;
}

.rooms-hero-copy p {
  margin-bottom: 8px;
  color: rgba(255,255,255,.76);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.rooms-hero h1 {
  font-size: clamp(34px, 5vw, 52px);
  line-height: 1.08;
}

.room-editorial-list {
  max-width: 1180px;
  padding-top: 112px;
  padding-bottom: 170px;
  gap: 96px;
}

.room-editorial { min-height: 455px; }

.room-editorial > img {
  width: 72%;
  height: 455px;
  box-shadow: none;
}

.room-floating-card {
  width: 430px;
  padding: 36px 38px 32px;
  box-shadow: 0 16px 36px rgba(31,35,54,.11);
}

.room-floating-card h2 {
  margin-bottom: 18px;
  font-size: 27px;
}

.room-floating-card li::before {
  content: "+ ";
}

.room-detail-page { background: #fff; }

.room-detail-hero {
  position: relative;
  height: 570px;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #fff;
  text-align: center;
}

.room-detail-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.room-detail-hero > div:first-of-type { position: absolute; inset: 0; background: rgba(0,0,0,.52); }

.room-detail-hero-copy { position: relative; z-index: 1; padding: 96px 24px 24px; }

.room-detail-hero-copy p { margin: 0 0 10px; color: #d7c7a8; font-size: 12px; font-weight: 800; text-transform: uppercase; }

.room-detail-hero-copy h1 { margin: 0; color: #fff; font-size: clamp(38px, 5vw, 58px); line-height: 1.05; text-transform: uppercase; }

.room-detail-hero-copy span { display: block; margin-top: 12px; font-size: 18px; font-weight: 500; }

.room-story { max-width: 1200px; margin: 0 auto; padding: 105px 32px 70px; }

.room-story h2 { max-width: 760px; font-size: clamp(30px, 3vw, 42px); }

.room-story p:last-child { max-width: 1040px; color: #626775; }

.room-detail-gallery {
  width: 100%;
  margin: 0 auto;
  padding: 20px 0 100px;
  display: grid;
  justify-items: center;
  text-align: center;
  overflow: hidden;
}

.gallery-stage {
  position: relative;
  width: 100vw;
  height: 430px;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.gallery-stage img {
  position: absolute;
  top: 50%;
  object-fit: cover;
  border-radius: 8px;
  transform: translateY(-50%);
}

.gallery-stage .main {
  z-index: 2;
  width: min(640px, 58vw);
  height: 360px;
  box-shadow: 0 12px 28px rgba(0,0,0,.08);
}

.gallery-stage .side {
  z-index: 1;
  width: min(420px, 34vw);
  height: 300px;
  opacity: .52;
  filter: saturate(.85);
}

.gallery-stage .left { right: calc(50% + min(360px, 32vw)); }

.gallery-stage .right { left: calc(50% + min(360px, 32vw)); }

.gallery-arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.82);
  color: #555;
  font-size: 28px;
  line-height: 1;
  transform: translateY(-50%);
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
}

.gallery-arrow.prev { left: 20px; }

.gallery-arrow.next { right: 20px; }

.fullscreen-gallery {
  justify-self: center;
  min-height: 42px;
  margin-top: 22px;
  padding: 0 22px;
  border: 1px solid #333;
  border-radius: 999px;
  background: #fff;
  font-size: 13px;
  font-weight: 700;
}

.room-detail-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 22px;
}

.room-detail-actions .fullscreen-gallery {
  margin-top: 0;
}

.room-policies {
  background: #f7f5f1;
  padding: 105px max(32px, calc((100vw - 1200px) / 2 + 32px));
  display: grid;
  grid-template-columns: .9fr 1.2fr;
  gap: 90px;
}

.room-policies .script { color: #8b7b60; font-size: 20px; font-style: italic; }

.room-policies h2 { text-transform: uppercase; font-size: 34px; }

.room-policies dl { display: grid; gap: 8px; color: #555b66; }

.room-policies dl div { display: grid; grid-template-columns: 120px 1fr; gap: 18px; }

.room-policies dt { font-weight: 700; }

.room-policies dd { margin: 0; }

.room-policies ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 70px; margin: 0; padding: 0; list-style: none; }

.room-policies li { padding: 18px 0; border-bottom: 1px solid #e3ded5; color: #51596b; }

.room-policies li::before { content: "✓ "; color: var(--brand); font-weight: 800; margin-right: 12px; }

.related-rooms { max-width: 1200px; margin: 0 auto; padding: 110px 32px 150px; }

.related-rooms h2 { margin-top: 0; font-size: 36px; }

.related-room-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }

.related-room-grid a { position: relative; min-height: 330px; overflow: hidden; border-radius: 8px; color: #fff; box-shadow: 0 14px 28px rgba(0,0,0,.13); }

.related-room-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }

.related-room-grid a:hover img { transform: scale(1.04); }

.related-room-grid a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.72)); }

.related-room-grid div { position: absolute; left: 24px; right: 24px; bottom: 24px; z-index: 1; }

.related-room-grid small { display: block; color: rgba(255,255,255,.75); font-weight: 800; text-transform: uppercase; }

.related-room-grid strong { display: block; font-size: 28px; color: #fff; }

.restaurant-showcase { background: #f7f4f0; min-height: 100vh; }

.restaurant-hero {
  position: relative;
  height: 420px;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.restaurant-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.restaurant-hero div {
  position: absolute;
  inset: 0;
  background: rgba(12,16,24,.48);
}

.restaurant-hero h1 {
  position: relative;
  z-index: 1;
  color: #fff;
  text-transform: uppercase;
  font-size: clamp(38px, 6vw, 64px);
  text-align: center;
}

.restaurant-editorial-list {
  max-width: 1120px;
  margin: 0 auto;
  padding: 110px 32px 150px;
  display: grid;
  gap: 118px;
}

.restaurant-editorial {
  position: relative;
  min-height: 470px;
  display: grid;
  align-items: center;
}

.restaurant-editorial > img {
  width: 74%;
  height: 470px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 18px 40px rgba(31,35,54,.12);
}

.restaurant-editorial.reverse > img { justify-self: end; }

.restaurant-floating-card {
  position: absolute;
  right: 0;
  width: 440px;
  padding: 38px 42px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(31,35,54,.12);
}

.restaurant-editorial.reverse .restaurant-floating-card {
  left: 0;
  right: auto;
}

.restaurant-floating-card > p {
  margin-bottom: 4px;
  color: var(--brand);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.restaurant-floating-card h2 {
  margin-bottom: 20px;
  font-size: 28px;
}

.restaurant-floating-card ul {
  columns: 2;
  column-gap: 26px;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
  color: #51596b;
  font-size: 13px;
  line-height: 1.9;
}

.restaurant-floating-card li::before {
  content: "✓ ";
  color: var(--brand);
  font-weight: 800;
}

.remember-check {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  margin: 0;
  color: #6f625b;
}

.remember-check input { width: auto; min-height: auto; }

.requirements { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0; }

.requirements span { padding: 8px 12px; border-radius: 25px; font-size: 13px; font-weight: 700; }

.requirements .ok { background: #e9f7ef; color: #198754; }

.requirements .bad { background: #fff3cd; color: #8a6d00; }

.install-divider {
    display: grid;
    gap: 4px;
    padding: 14px 16px;
    border: 1px solid rgba(39, 90, 83, .16);
    border-radius: 12px;
    background: rgba(39, 90, 83, .06);
    color: var(--ink);
}

.install-divider span {
    color: var(--muted);
    font-size: 13px;
}

.install-card label small {
    display: block;
    margin-top: 6px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
}

.install-warning {
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    color: #9a3412;
    font-size: 13px;
    font-weight: 700;
}

label { display: grid; gap: 8px; color: var(--dark); font-weight: 600; font-size: 15px; }

input:focus { outline: 2px solid rgba(151,134,103,.25); border-color: var(--brand); }

.full { grid-column: 1 / -1; }

.alert { padding: 12px 16px; border-radius: 8px; margin: 16px 0; }

.alert.error { background: rgba(220,53,69,.08); color: #dc3545; }

.small-note { font-size: 13px; color: var(--muted); margin-bottom: 0; }

.row-form { display: grid; grid-template-columns: 140px 1fr 1.4fr 90px 110px 92px 80px; gap: 10px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 8px; }

.row-form.room-edit { grid-template-columns: repeat(5, minmax(0,1fr)); }

.row-form button { min-height: 44px; border: 0; border-radius: 25px; background: var(--brand); color: white; font-weight: 700; }

.check { display: flex; align-items: center; gap: 6px; font-size: 13px; }

.check input { width: auto; min-height: auto; }

@media (max-width: 900px) {
.site-header, .footer { flex-direction: column; align-items: flex-start; }

.site-header { flex-direction: row; align-items: center; }

.site-header .nav { display: none; }

.site-mobile-menu-toggle { display: inline-flex; }

.site-mobile-menu { padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }

.site-mobile-menu nav { grid-template-columns: 1fr; width: 100%; max-width: 520px; margin-left: auto; margin-right: auto; box-sizing: border-box; }

.site-mobile-menu nav a { min-height: 64px; border-radius: 18px; }

.hero, .page-hero, .room-detail, .split-brands { grid-template-columns: 1fr; }

.split-brands a:first-child { border-right: 0; border-bottom: 1px solid var(--line); }

.home-editorial-section,
  .home-editorial-section.reverse,
  .home-location-section { grid-template-columns: 1fr; gap: 32px; padding: 72px 24px; }

.home-gallery-section,
  .home-rooms-section,
  .home-sustainability-section { padding: 72px 24px; }

.home-gallery-section > div,
  .home-sustainability-section > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.about-split {
    grid-template-columns: 1fr;
    gap: 46px;
    padding: 72px 24px;
  }

.about-collage {
    min-height: 540px;
    width: min(760px, 100%);
    padding-right: min(120px, 18%);
  }

.about-collage-main { height: 540px; }

.about-collage-card {
    right: 0;
    top: 170px;
    width: min(420px, 54%);
    height: 340px;
  }

.about-copy {
    max-width: 760px;
    justify-self: start;
  }

.gallery-hero { height: 340px; }

.gallery-shell { padding: 72px 24px 130px; }

.gallery-tabs { justify-content: flex-start; }

.gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.gallery-item img { height: 210px; }

.gallery-lightbox { padding: 28px 58px; }

.gallery-lightbox img { max-width: 88vw; max-height: 82vh; }

.breakfast-hero { height: 340px; }

.breakfast-intro {
    grid-template-columns: 1fr;
    gap: 42px;
    padding: 72px 24px;
  }

.breakfast-collage { min-height: 430px; }

.breakfast-collage .large { height: 400px; }

.breakfast-collage .small { height: 230px; }

.breakfast-grid-section { padding: 72px 24px; }

.breakfast-feature-grid { grid-template-columns: 1fr; }

.breakfast-gallery-strip { grid-template-columns: 1fr; padding: 72px 24px 96px; }

.breakfast-gallery-strip img { height: 280px; }

.location-guide-shell { padding: 58px 24px 96px; }

.location-guide-shell h1 { margin-bottom: 42px; }

.location-route-grid { grid-template-columns: 1fr; gap: 34px; }

.location-route-card { min-height: 420px; }

.location-route-card img { height: 420px; }

.location-route-card span { width: 260px; min-height: 74px; }

.location-detail-hero { height: 340px; }

.location-detail-copy { padding: 64px 24px 90px; }

.location-place-list { margin-top: -34px; padding: 0 24px 96px; }

.location-place-card { grid-template-columns: 1fr; }

.route-story-list { padding: 0 24px 96px; gap: 72px; }

.route-story,
  .route-story.reverse { grid-template-columns: 1fr; gap: 28px; }

.route-story.reverse .route-story-copy,
  .route-story.reverse img { order: initial; }

.route-story img { height: 380px; }

.feature-grid, .room-grid { grid-template-columns: 1fr; }

.form-grid { grid-template-columns: 1fr; }

.row-form, .row-form.room-edit { grid-template-columns: 1fr; }

.hotel-hero { min-height: 560px; }

.booking-strip { grid-template-columns: 1fr 1fr; }

.reseliva-booking-widget { display: flex !important; width: min(760px, calc(100vw - 32px)); min-height: 74px; }

.booking-strip a { grid-column: 1 / -1; min-height: 48px; }

.hotel-intro, .hotel-services article { grid-template-columns: 1fr; gap: 36px; }

.intro-collage { min-height: 360px; }

.hotel-room-cards { grid-template-columns: 1fr; }

.amenity-row { grid-template-columns: repeat(2, 1fr); }

.rooms-hero { height: 340px; }

.room-editorial-list { padding: 72px 24px 110px; gap: 72px; }

.room-editorial { min-height: auto; display: grid; gap: 0; }

.room-editorial > img,
  .room-editorial.reverse > img {
    width: 100%;
    height: 360px;
    justify-self: stretch;
  }

.room-floating-card,
  .room-editorial.reverse .room-floating-card {
    position: relative;
    left: auto;
    right: auto;
    width: calc(100% - 42px);
    justify-self: center;
    margin-top: -54px;
  }

.restaurant-hero { height: 340px; }

.restaurant-editorial-list { padding: 72px 24px 110px; gap: 72px; }

.restaurant-editorial { min-height: auto; display: grid; gap: 0; }

.restaurant-editorial > img,
  .restaurant-editorial.reverse > img {
    width: 100%;
    height: 360px;
    justify-self: stretch;
  }

.restaurant-floating-card,
  .restaurant-editorial.reverse .restaurant-floating-card {
    position: relative;
    left: auto;
    right: auto;
    width: calc(100% - 42px);
    justify-self: center;
    margin-top: -54px;
  }

.room-detail-hero { height: 430px; }

.room-story { padding: 70px 24px 44px; }

.room-detail-gallery {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 18px 24px 70px;
  }

.room-detail-gallery img,
  .room-detail-gallery img:not(.main) { height: 280px; opacity: 1; }

.room-policies { grid-template-columns: 1fr; gap: 42px; padding: 70px 24px; }

.related-room-grid { grid-template-columns: 1fr; }

.menu-app-header {
    height: auto;
    grid-template-columns: 1fr;
    padding: 18px 20px;
    gap: 16px;
  }

.menu-main-nav { justify-content: flex-start; gap: 20px; overflow-x: auto; }

.menu-actions { justify-content: flex-start; flex-wrap: wrap; }

.menu-search { width: min(100%, 360px); }

.menu-footer-inner { grid-template-columns: 1fr 1fr; gap: 34px; }

.menu-footer-inner > :last-child { grid-column: 1 / -1; }
}

@media (max-width: 576px) {
.site-header, .hero, .page-hero, .section, .room-detail, .footer { padding-left: 16px; padding-right: 16px; }

.site-header { align-items: center; text-align: left; }

.site-mobile-menu { padding-left: 18px; padding-right: 18px; }

.site-mobile-menu nav { width: 100%; }

.brand { justify-items: center; text-align: center; }

.brand img { width: 132px; height: 48px; }

.nav { justify-content: center; }

.hero, .page-hero { padding-top: 36px; padding-bottom: 36px; }

.home-editorial-section,
  .home-editorial-section.reverse,
  .home-gallery-section,
  .home-rooms-section,
  .home-location-section,
  .home-sustainability-section { padding: 48px 16px; }

.home-gallery-section > div,
  .home-room-grid,
  .home-sustainability-section > div { grid-template-columns: 1fr; }

.about-split {
    padding: 42px 16px 58px;
    gap: 34px;
  }

.about-collage {
    min-height: 420px;
    padding-right: 0;
  }

.about-collage-main {
    width: 82%;
    height: 390px;
  }

.about-collage-card {
    right: 0;
    top: 175px;
    width: 58%;
    height: 230px;
    border-width: 4px;
  }

.about-copy .eyebrow {
    letter-spacing: 3px;
  }

.about-copy h1 {
    margin-bottom: 22px;
  }

.about-copy p {
    font-size: 16px;
    line-height: 1.72;
  }

.gallery-hero { height: 280px; }

.gallery-shell { padding: 48px 16px 90px; }

.gallery-tabs { margin-bottom: 28px; }

.gallery-tabs button { padding: 0 14px; font-size: 12px; }

.gallery-grid { grid-template-columns: 1fr; gap: 14px; }

.gallery-item img { height: 235px; }

.gallery-lightbox { padding: 62px 14px 54px; }

.gallery-lightbox img { max-width: 100%; max-height: 76vh; }

.gallery-lightbox-count { font-size: 18px; }

.gallery-lightbox-close { width: 50px; height: 50px; font-size: 30px; }

.gallery-lightbox-arrow {
    width: 46px;
    height: 46px;
    top: auto;
    bottom: 14px;
    transform: none;
    font-size: 34px;
  }

.gallery-lightbox-arrow.prev { left: calc(50% - 56px); }

.gallery-lightbox-arrow.next { right: calc(50% - 56px); }

.breakfast-hero { height: 280px; }

.breakfast-intro { padding: 48px 16px; }

.breakfast-collage { min-height: 330px; }

.breakfast-collage .large { width: 82%; height: 300px; }

.breakfast-collage .small { width: 54%; height: 180px; border-width: 4px; }

.breakfast-grid-section { padding: 48px 16px; }

.breakfast-gallery-strip { padding: 48px 16px 72px; gap: 14px; }

.breakfast-gallery-strip img { height: 230px; }

.location-guide-shell { padding: 44px 16px 72px; }

.location-guide-shell h1 { margin-bottom: 28px; }

.location-route-grid { gap: 24px; }

.location-route-card { min-height: 350px; }

.location-route-card img { height: 350px; }

.location-route-card span { width: 220px; min-height: 64px; font-size: 24px; }

.location-detail-hero { height: 280px; }

.location-detail-copy { padding: 48px 16px 72px; }

.location-place-list { margin-top: -28px; padding: 0 16px 72px; }

.location-place-card { padding: 22px; }

.location-place-card .btn { width: 100%; }

.route-story-list { padding: 0 16px 72px; gap: 52px; }

.route-story img { height: 300px; }

.route-story-copy a { width: 100%; }

.home-editorial-section img,
  .home-gallery-section img,
  .home-room-grid img { height: 260px; }

.hotel-hero { min-height: 620px; }

.hotel-hero-content { padding-top: 20px; }

.hotel-hero-content h1 { font-size: 34px; }

.booking-strip { grid-template-columns: 1fr; }

.reseliva-booking-widget { display: flex !important; width: auto; max-width: calc(100vw - 44px); padding: 10px 12px; overflow-x: auto; justify-content: center; margin-left: 22px; margin-right: 22px; box-sizing: border-box; }

.reseliva-booking-widget #reseliva-widget,
  .reseliva-booking-widget #reseliva-widget table,
  .reseliva-booking-widget #reseliva-widget form {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

.booking-strip label { border-right: 0; border-bottom: 1px solid #e6e8ee; }

.hotel-intro, .hotel-rooms-section, .hotel-services { padding: 54px 16px; }

.intro-collage { min-height: 300px; }

.intro-collage .large { width: 78%; height: 260px; }

.intro-collage .small { width: 58%; height: 170px; }

.charge-band, .amenity-band { min-height: 260px; }

.amenity-row { grid-template-columns: 1fr; margin-top: 24px; }

.amenity-row span { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.22); }

.hotel-services article { gap: 24px; }

.rooms-hero { height: 280px; }

.room-editorial-list { padding: 48px 16px 80px; gap: 54px; }

.room-editorial > img,
  .room-editorial.reverse > img { height: 260px; }

.room-floating-card,
  .room-editorial.reverse .room-floating-card {
    width: calc(100% - 20px);
    padding: 24px;
    margin-top: -34px;
  }

.room-floating-card ul { columns: 1; }

.room-card-actions { align-items: flex-start; }

.room-detail-hero { height: 360px; }

.room-detail-hero-copy h1 { font-size: 34px; }

.room-story { padding: 54px 16px 34px; }

.room-detail-gallery { padding: 12px 16px 54px; }

.room-detail-gallery img,
  .room-detail-gallery img:not(.main) { height: 230px; }

.room-policies { padding: 54px 16px; }

.room-policies ul { grid-template-columns: 1fr; }

.room-policies dl div { grid-template-columns: 1fr; gap: 2px; }

.related-rooms { padding: 64px 16px 96px; }

.related-room-grid a { min-height: 260px; }

.restaurant-hero { height: 280px; }

.restaurant-editorial-list { padding: 48px 16px 80px; gap: 54px; }

.restaurant-editorial > img,
  .restaurant-editorial.reverse > img { height: 260px; }

.restaurant-floating-card,
  .restaurant-editorial.reverse .restaurant-floating-card {
    width: calc(100% - 20px);
    padding: 24px;
    margin-top: -34px;
  }

.restaurant-floating-card ul { columns: 1; }

.menu-app-header {
    padding: 12px 8px 0;
    display: block;
    box-shadow: none;
    background: #fff;
  }

.menu-logo {
    width: 150px;
    margin: 0 auto 22px;
    text-align: center;
  }

.menu-logo span { font-size: 17px; }

.menu-logo strong { font-size: 31px; letter-spacing: 1px; }

.menu-main-nav { display: none; }

.menu-actions { display: block; }

.menu-actions > :not(.menu-search) { display: none; }

.menu-search {
    width: 100%;
    height: 40px;
    border-radius: 999px;
    background: #f0f1f8;
    margin: 0 0 32px;
    box-shadow: 0 10px 22px rgba(31,35,54,.07);
  }

.category-plate { width: 66px; height: 48px; font-size: 26px; }

.category-plate-img { width: 78px; height: 58px; }

.menu-section-head {
    display: grid;
    justify-content: center;
    text-align: center;
    margin-bottom: 34px;
  }

.menu-section-head h1 { font-size: 31px; }

.menu-footer { margin-bottom: 70px; }

.menu-footer-inner { grid-template-columns: 1fr; gap: 30px; padding: 46px 16px 34px; }

.menu-footer form { max-width: 100%; }

.menu-footer-bottom { padding: 26px 16px; }

.mobile-menu-tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    height: var(--mobile-menu-height, 65px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 12px calc(7px + env(safe-area-inset-bottom));
    background: var(--mobile-menu-bg, #fff);
    box-shadow: 0 -8px 24px rgba(31,35,54,.12);
  }

.mobile-menu-tabbar .nav-item {
    flex: 1;
    min-width: 48px;
    min-height: 48px;
    border: 0;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: #777d96;
    font-size: 12px;
    line-height: 1.1;
    font-weight: 600;
    text-decoration: none;
  }

.mobile-menu-tabbar .material-icons,
  .mobile-menu-tabbar .nav-item i { font-size: 23px; line-height: 1; color: currentColor; }

.mobile-menu-tabbar .nav-item em { font-style: normal; font-size: 11px; }

.mobile-menu-tabbar .nav-item.active { color: var(--mobile-menu-active, #4a5378); font-weight: 900; }

.mobile-menu-tabbar.hide-labels .nav-item em,
  .mobile-menu-tabbar.template-icons .nav-item em { display: none; }

.mobile-menu-tabbar .cart {
    position: relative;
    width: auto;
    height: auto;
    min-height: 48px;
    flex: 1;
    border-radius: 0;
    background: transparent;
    color: #777d96;
    transform: none;
    box-shadow: none;
  }

.mobile-menu-tabbar.template-classic .cart { transform: none; width: auto; height: auto; min-height: 48px; flex: 1; border-radius: 0; background: transparent; color: #777d96; box-shadow: none; }

.mobile-menu-tabbar.template-modern .nav-item.active { background: color-mix(in srgb, var(--mobile-menu-active, #4a5378) 12%, transparent); border-radius: 14px; }

.mobile-menu-tabbar.template-modern .nav-item.active::after { content: ""; width: 22px; height: 3px; border-radius: 10px; background: var(--mobile-menu-active, #4a5378); }

.mobile-menu-tabbar.template-round {
    padding-inline: 14px;
}

.mobile-menu-tabbar.template-round .nav-item {
    border-radius: 18px;
}

.mobile-menu-tabbar.template-round .nav-item.active {
    color: #fff;
    background: var(--mobile-menu-active, #4a5378);
    box-shadow: 0 10px 24px rgba(74,83,120,.24);
}

.mobile-menu-tabbar.template-round .nav-item:nth-child(3) {
    flex: 0 0 62px;
    width: 62px;
    height: 62px;
    min-height: 62px;
    border-radius: 50%;
    background: var(--mobile-menu-active, #4a5378);
    color: #fff;
    transform: translateY(-18px);
    box-shadow: 0 12px 28px rgba(74,83,120,.32);
}

.mobile-menu-tabbar.template-glass {
    left: 12px;
    right: 12px;
    bottom: 10px;
    width: auto;
    border: 1px solid rgba(255,255,255,.72);
    border-radius: 24px;
    background: rgba(255,255,255,.82);
    box-shadow: 0 -10px 32px rgba(31,35,54,.16);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

.mobile-menu-tabbar.template-glass .nav-item.active {
    color: #fff;
    background: linear-gradient(135deg, var(--mobile-menu-active, #275a53), #143d38);
    border-radius: 17px;
  }

.mobile-menu-tabbar .cart span { color: inherit; font-size: 26px; }

.mobile-menu-tabbar .cart strong {
    position: absolute;
    left: calc(50% + 9px);
    top: 7px;
    right: auto;
    min-width: 21px;
    height: 21px;
    padding: 0;
    display: grid;
    place-items: center;
    border-radius: 0;
    background: transparent;
    color: #d68a00;
    border: 0;
    font-size: 13px;
    font-weight: 950;
    line-height: 1;
    box-shadow: none;
    text-shadow: 0 1px 0 #fff, 0 0 1px rgba(33, 37, 41, .45), 0 0 8px rgba(245, 171, 30, .35);
  }
}

.footer-legal a { color: inherit; font-size: 13px; font-weight: 700; opacity: .82; }

.cookie-consent { position: fixed; left: 5%; bottom: 88px; z-index: 3000; width: min(420px, calc(100vw - 32px)); min-height: 72px; background: #fff; color: #1D2D35; border: 1px solid rgba(39,90,83,.12); border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.16); padding: 10px 20px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }

.cookie-consent[hidden] { display: none; }

.cookie-consent .txt { flex: 1 1 auto; min-width: 0; }

.cookie-consent p { margin: 0; color: #1D2D35; font-size: 13px; font-weight: 600; line-height: 1.35; }

.cookie-consent a { color: #275A53; font-weight: 900; text-decoration: underline; text-underline-offset: 3px; }

.cookie-consent .accept { flex: 0 0 auto; min-height: 38px; border: 0; border-radius: 32px; padding: 3px 23px; background: #40CC79; color: #fff !important; font-size: 17px; font-weight: 900; cursor: pointer; transition: background .2s ease, transform .2s ease; }

.cookie-consent .accept:hover { background: #30b867; transform: translateY(-1px); }

.legal-page, .contact-page { max-width: 1040px; margin: 0 auto; padding: 96px 24px; }

.legal-page article, .contact-card { background: #fff; border: 1px solid #e5dfd6; border-radius: 10px; padding: 32px; box-shadow: 0 2px 8px rgba(0,0,0,.05); }

.contact-map-page {
  max-width: 1180px;
}

.contact-map-section {
  display: grid;
  gap: 24px;
}

.contact-info-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.contact-info-grid article {
  min-height: 112px;
  border-radius: 18px;
  border: 1px solid rgba(39,90,83,.12);
  background: linear-gradient(135deg, #fffaf0 0%, #f6fbf8 100%);
  box-shadow: 0 12px 30px rgba(15,23,42,.05);
  padding: 18px;
  display: grid;
  align-content: center;
  gap: 8px;
}

.contact-info-grid span {
  color: #978667;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.contact-info-grid strong,
.contact-info-grid a {
  color: #17202b;
  font-size: 16px;
  line-height: 1.45;
  text-decoration: none;
}

.contact-map-embed {
  overflow: hidden;
  min-height: 420px;
  border-radius: 24px;
  border: 1px solid rgba(39,90,83,.14);
  background: #edf3f1;
  box-shadow: 0 22px 60px rgba(39,90,83,.12);
}

.contact-map-embed iframe {
  display: block;
  width: 100%;
  height: 460px;
  border: 0;
}

.contact-form-card {
  padding: 24px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid #e5dfd6;
  box-shadow: 0 12px 30px rgba(15,23,42,.05);
}

@media (max-width: 900px) {
  .contact-info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .contact-info-grid {
    grid-template-columns: 1fr;
  }

  .contact-map-embed,
  .contact-map-embed iframe {
    min-height: 340px;
    height: 340px;
  }
}

.contact-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 24px; align-items: start; }

.contact-form { display: grid; gap: 14px; }

.contact-form label { display: grid; gap: 7px; font-weight: 800; color: #495057; }

.contact-form input, .contact-form textarea { width: 100%; border: 1px solid #ded8cf; border-radius: 6px; padding: 12px; font: inherit; }

.contact-form textarea { min-height: 140px; }

.contact-form button { min-height: 44px; border: 0; border-radius: 25px; background: #978667; color: #fff; font-weight: 800; padding: 0 24px; justify-self: start; }

@media (max-width: 980px) {
.bulk-price-head { display: none; }

.bulk-price-row { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
.cookie-consent { left: 16px; right: 16px; bottom: 82px; width: auto; align-items: center; }

.cookie-consent .accept { padding-inline: 18px; font-size: 15px; }
}

/* Admin product statistics */
.product-stats-page { display: grid; gap: 22px; }

.product-stat-filter {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, minmax(150px, 1fr)) auto auto;
  gap: 12px;
  align-items: end;
  padding: 16px;
  border: 1px solid #ece8dc;
  border-radius: 16px;
  background: #fffdf8;
}

.product-stat-filter label { display: grid; gap: 6px; font-weight: 800; color: #20233a; }

.product-stat-tabs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.product-stat-tabs label {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 8px 14px;
  border: 1px solid #e2ded0;
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
}

.product-stat-tabs input { position: absolute; opacity: 0; pointer-events: none; }

.product-stat-tabs label.active { background: #275A53; border-color: #275A53; color: #fff; }

.product-stat-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.product-stat-cards article,
.product-stat-charts article,
.product-stat-table {
  border: 1px solid #ece8dc;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(32,35,58,.06);
}

.product-stat-cards article { padding: 18px; }

.product-stat-cards span { display: block; color: #6f6f6f; font-weight: 800; font-size: 13px; }

.product-stat-cards strong { display: block; margin-top: 8px; color: #20233a; font-size: 28px; }

.product-stat-charts {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 14px;
}

.product-stat-charts article { padding: 18px; min-width: 0; }

.product-stat-charts h3,
.product-stat-table h3 { margin: 0 0 14px; color: #20233a; }

.product-stat-tables {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.product-stat-table { padding: 16px; overflow: auto; }

.product-stat-table table { width: 100%; border-collapse: collapse; min-width: 560px; }

.product-stat-table th,
.product-stat-table td { padding: 10px 8px; border-bottom: 1px solid #f0eee7; text-align: left; font-size: 13px; }

.product-stat-table th { color: #978667; font-weight: 900; }

.product-stat-table td { color: #20233a; }

@media (max-width: 1100px) {
.product-stat-filter,
  .product-stat-cards,
  .product-stat-charts,
  .product-stat-tables { grid-template-columns: 1fr; }
}

/* Admin sortable menu rows */
.menu-sortable-list {
  display: grid;
  gap: 8px;
  margin: 14px 0 6px;
  padding: 12px;
  border: 1px dashed rgba(39,90,83,.24);
  border-radius: 16px;
  background: rgba(39,90,83,.035);
}

.menu-sort-row {
  display: grid;
  grid-template-columns: 42px 42px minmax(0, 1fr) auto auto auto;
  gap: 10px;
  align-items: center;
  min-height: 58px;
  padding: 8px 12px;
  border: 1px solid #ece8dc;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(32,35,58,.05);
}

.drag-handle {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 10px;
  background: #f4f1e8;
  color: #978667;
  cursor: grab;
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
  user-select: none;
}

.drag-handle:active { cursor: grabbing; }

.menu-sort-thumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: rgba(39,90,83,.12);
  color: #275A53;
  font-weight: 900;
}

.menu-sort-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #20233a; }

.menu-sort-row em { font-style: normal; font-weight: 900; color: #275A53; white-space: nowrap; }

.menu-sort-row small { color: #85858f; white-space: nowrap; }

.status-ok,
.status-off {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
}

.status-ok { background: rgba(39,90,83,.12); color: #275A53; }

.status-off { background: rgba(220,53,69,.10); color: #b02a37; }

.sort-hint { margin: 0 0 12px; }

.drag-order-card .drag-handle { position: absolute; top: 10px; left: 10px; }

.drag-order-card { position: relative; padding-top: 54px; }

.sortable-ghost {
  opacity: .45;
  background: #f7f5ef !important;
}

.sortable-drag {
  opacity: .92;
  box-shadow: 0 16px 36px rgba(32,35,58,.22) !important;
}

@media (max-width: 760px) {
.menu-sort-row { grid-template-columns: 38px 38px 1fr; }

.menu-sort-row em,
  .menu-sort-row .status-ok,
  .menu-sort-row .status-off,
  .menu-sort-row small { grid-column: 3; justify-self: start; }
}

.media-manager-page .media-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(260px, 1.1fr) minmax(190px, .7fr);
  gap: 12px;
  align-items: end;
  margin-bottom: 16px;
}

.media-search-form,
.media-upload-form,
.media-folder-form {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.media-search-form input,
.media-search-form select,
.media-upload-form input,
.media-folder-form input,
.media-editor-tools input,
.media-editor-tools select {
  min-height: 42px;
  border: 1px solid #e2e2e2;
  border-radius: 12px;
  padding: 9px 12px;
  background: #fff;
}

.media-search-form input { min-width: 210px; }

.media-upload-form input[type="file"] { max-width: 220px; }

.media-view-toggle {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin: 4px 0 14px;
}

.media-folder-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 0 14px;
  margin-bottom: 10px;
}

.media-folder-strip a {
  flex: 0 0 auto;
  border: 1px solid #e6e0d2;
  border-radius: 999px;
  padding: 8px 12px;
  color: #3b3b45;
  background: #fff;
  text-decoration: none;
  font-weight: 800;
  font-size: 12px;
}

.media-folder-strip a.active,
.media-folder-strip a:hover {
  background: rgba(39,90,83,.1);
  color: #275A53;
  border-color: rgba(39,90,83,.28);
}

.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px;
}

.media-grid.list-view {
  grid-template-columns: 1fr;
}

.media-card {
  border: 1px solid #ebe7dc;
  border-radius: 16px;
  background: #fff;
  padding: 12px;
  box-shadow: 0 8px 22px rgba(32,35,58,.05);
  display: grid;
  gap: 10px;
}

.media-grid.list-view .media-card {
  grid-template-columns: 42px 92px 1fr auto;
  align-items: center;
}

.media-card-check {
  width: 20px;
  height: 20px;
  accent-color: #275A53;
}

.media-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  border: 1px solid #f0eee7;
  background:
    linear-gradient(45deg, #f6f6f6 25%, transparent 25%),
    linear-gradient(-45deg, #f6f6f6 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #f6f6f6 75%),
    linear-gradient(-45deg, transparent 75%, #f6f6f6 75%);
  background-size: 18px 18px;
  background-position: 0 0, 0 9px, 9px -9px, -9px 0;
  object-fit: contain;
  cursor: pointer;
}

.media-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.media-grid.list-view .media-thumb {
  width: 92px;
  height: 72px;
  aspect-ratio: auto;
}

.media-meta strong,
.media-meta span,
.media-meta small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.media-meta strong {
  color: #20233a;
  font-size: 13px;
  white-space: nowrap;
}

.media-meta span,
.media-meta small {
  color: #777783;
  font-size: 12px;
  line-height: 1.45;
}

.media-empty {
  grid-column: 1 / -1;
  border: 1px dashed #d8d1c0;
  border-radius: 16px;
  padding: 28px;
  text-align: center;
  color: #777783;
}

.media-bulk-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.media-editor-modal[hidden] { display: none; }

.media-editor-modal {
  position: fixed;
  inset: 0;
  z-index: 99998;
  background: rgba(17,17,17,.58);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.media-editor-panel {
  width: min(1120px, 96vw);
  max-height: 92vh;
  overflow: auto;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(0,0,0,.28);
}

.media-editor-head,
.media-editor-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid #eee9dd;
}

.media-editor-foot {
  border-top: 1px solid #eee9dd;
  border-bottom: 0;
  justify-content: flex-end;
}

.media-editor-head h3 {
  margin: 0;
  color: #20233a;
}

.media-editor-panel > h2 {
  margin: 0;
  padding: 18px 22px 0;
  color: #20233a;
}

.media-editor-close {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 999px;
  background: #f4f1e8;
  color: #20233a;
  font-size: 22px;
  cursor: pointer;
}

.media-editor-body {
  display: grid;
  grid-template-columns: 1.4fr .85fr;
  gap: 18px;
  padding: 18px;
}

.media-editor-preview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.media-preview-box {
  border: 1px solid #eee9dd;
  border-radius: 16px;
  padding: 12px;
  background: #fbfaf6;
}

.media-editor-preview figure {
  margin: 0;
  border: 1px solid #eee9dd;
  border-radius: 16px;
  padding: 12px;
  background: #fbfaf6;
}

.media-editor-preview figcaption {
  margin-bottom: 10px;
  font-weight: 900;
  color: #20233a;
}

.media-preview-box strong {
  display: block;
  margin-bottom: 10px;
  color: #20233a;
}

.media-preview-box img {
  width: 100%;
  height: min(420px, 48vh);
  object-fit: contain;
  border-radius: 12px;
  background:
    linear-gradient(45deg, #eee 25%, transparent 25%),
    linear-gradient(-45deg, #eee 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #eee 75%),
    linear-gradient(-45deg, transparent 75%, #eee 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
}

.media-editor-tools {
  display: grid;
  gap: 14px;
  align-content: start;
}

.media-tool-group {
  border: 1px solid #eee9dd;
  border-radius: 16px;
  padding: 14px;
  background: #fff;
}

.media-tool-group h4 {
  margin: 0 0 10px;
  color: #20233a;
}

.media-tool-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.media-tool-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
}

.media-usage-list {
  margin: 0;
  padding-left: 18px;
  color: #666673;
  font-size: 13px;
  line-height: 1.7;
}

@media (max-width: 980px) {
.media-manager-page .media-toolbar,
  .media-editor-body,
  .media-editor-preview {
    grid-template-columns: 1fr;
  }

.media-grid.list-view .media-card {
    grid-template-columns: 32px 74px 1fr;
  }

.media-grid.list-view .media-card .btn {
    grid-column: 3;
    justify-self: start;
  }
}

.status-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.status-chip.ok {
  color: #275a53;
  background: rgba(39, 90, 83, .12);
}

.status-chip.off {
  color: #7f1d1d;
  background: rgba(239, 68, 68, .12);
}

@page {
  size: A4;
  margin: .45cm;
}

.mail-test-box {
  margin-top: 18px;
}

.feedback-follow-panel {
  background: #fff;
  border: 1px solid #e8edf3;
  border-radius: 22px;
  box-shadow: 0 14px 36px rgba(15, 23, 42, .06);
  margin-top: 22px;
  padding: 22px;
}

.feedback-preview-panel {
  background: linear-gradient(160deg, #eef6ff 0%, #fff8ea 100%);
  border: 1px solid #dfe8f2;
  border-radius: 24px;
  box-shadow: 0 18px 42px rgba(15, 23, 42, .08);
  padding: 18px;
}

.feedback-preview-phone {
  background: #111827;
  border-radius: 32px;
  margin: 0 auto;
  max-width: 330px;
  min-height: 520px;
  padding: 18px 12px;
  position: relative;
}

.feedback-preview-phone::before {
  background: #020617;
  border-radius: 999px;
  content: "";
  height: 5px;
  left: 50%;
  position: absolute;
  top: 10px;
  transform: translateX(-50%);
  width: 72px;
}

.feedback-preview-popup {
  background: #fff;
  border-radius: 24px;
  bottom: 18px;
  box-shadow: 0 -12px 30px rgba(0, 0, 0, .2);
  left: 12px;
  padding: 18px;
  position: absolute;
  right: 12px;
}

.feedback-preview-popup > button {
  align-items: center;
  background: #f1f5f9;
  border: 0;
  border-radius: 999px;
  color: #475569;
  display: inline-flex;
  font-size: 18px;
  height: 30px;
  justify-content: center;
  position: absolute;
  right: 14px;
  top: 14px;
  width: 30px;
}

.feedback-preview-status {
  background: #e7f5ef;
  border-radius: 999px;
  color: #275a53;
  display: inline-flex;
  font-size: 11px;
  font-weight: 900;
  margin-bottom: 12px;
  padding: 6px 10px;
}

.feedback-preview-status.is-passive {
  background: #fee2e2;
  color: #991b1b;
}

.feedback-preview-popup h3 {
  color: #172033;
  font-size: 20px;
  line-height: 1.25;
  margin: 0 36px 8px 0;
}

.feedback-preview-popup p {
  color: #64748b;
  font-size: 13px;
  line-height: 1.55;
  margin: 0 0 14px;
}

.feedback-preview-stars {
  color: #f5ab1e;
  font-size: 20px;
  letter-spacing: 2px;
  margin-bottom: 12px;
}

.feedback-preview-popup textarea {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  color: #94a3b8;
  min-height: 78px;
  padding: 12px;
  resize: none;
  width: 100%;
}

.feedback-preview-fields {
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr;
  margin: 12px 0;
}

.feedback-preview-fields span {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  color: #94a3b8;
  font-size: 12px;
  padding: 9px 12px;
}

.feedback-preview-footer {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.feedback-preview-footer small {
  color: #64748b;
  font-size: 12px;
}

.feedback-preview-footer strong {
  background: #275a53;
  border-radius: 999px;
  color: #fff;
  font-size: 13px;
  padding: 10px 18px;
}

.feedback-follow-head {
  align-items: flex-start;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin-bottom: 18px;
}

.feedback-follow-head h3 {
  color: #172033;
  font-size: 22px;
  margin: 4px 0 6px;
}

.feedback-follow-head > strong {
  background: #eef9f1;
  border: 1px solid #cdebd5;
  border-radius: 999px;
  color: #275a53;
  font-size: 13px;
  padding: 8px 12px;
  white-space: nowrap;
}

.feedback-empty {
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 16px;
  color: #64748b;
  padding: 18px;
  text-align: center;
}

.feedback-list {
  display: grid;
  gap: 16px;
}

.feedback-card {
  background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
  border: 1px solid #e5edf7;
  border-radius: 18px;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  padding: 18px;
}

.feedback-meta,
.feedback-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.feedback-meta span {
  background: #eef2ff;
  border-radius: 999px;
  color: #334155;
  font-size: 12px;
  font-weight: 800;
  padding: 6px 10px;
}

.feedback-message {
  color: #172033;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
  margin: 14px 0;
}

.feedback-contact {
  color: #64748b;
  font-size: 13px;
}

/* === app-qr.css === */
/* Auto-split from app.css. Edit source sections carefully. */
.bowl-builder-panel {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  margin-bottom: 26px;
}

/* QR menu animation admin */
body.admin-body .qr-animation-form { display: grid; gap: 22px; }
body.admin-body .qr-animation-grid { display: grid; grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); gap: 22px; align-items: start; }
body.admin-body .qr-animation-controls { display: grid; gap: 14px; }
body.admin-body .qr-animation-controls .admin-record { display: grid; gap: 12px; }
body.admin-body .qr-animation-controls label:not(.switch) { display: grid; gap: 7px; color: #5f6978; font-size: 13px; font-weight: 800; }
body.admin-body .qr-animation-controls select,
body.admin-body .qr-animation-controls input[type="range"] { width: 100%; }
body.admin-body .qr-animation-controls select { min-height: 44px; border: 1px solid #e6e9ef; border-radius: 14px; padding: 0 14px; color: #111827; background: #fff; font-weight: 800; }
body.admin-body .qr-animation-status-card { background: linear-gradient(135deg, rgba(39, 90, 83, .12), rgba(230, 201, 122, .16)); border-color: rgba(39, 90, 83, .18); }
body.admin-body .qr-animation-preview-panel { overflow: hidden; border: 1px solid #e8edf2; border-radius: 24px; background: linear-gradient(135deg, #ffffff, #f6faf8); box-shadow: 0 20px 55px rgba(31, 41, 55, .08); }
body.admin-body .qr-animation-preview-head { display: flex; justify-content: space-between; gap: 14px; align-items: center; padding: 18px 20px; border-bottom: 1px solid #edf1f5; }
body.admin-body .qr-animation-preview-head span { display: block; color: #7a8492; font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
body.admin-body .qr-animation-preview-head strong { color: #111827; font-size: 20px; }
body.admin-body .qr-animation-device-frame { min-height: 430px; display: grid; place-items: center; padding: 30px; background: radial-gradient(circle at 15% 10%, rgba(230, 201, 122, .22), transparent 30%), radial-gradient(circle at 90% 20%, rgba(39, 90, 83, .16), transparent 34%), #f7f8fb; }
body.admin-body .qr-animation-demo-card { position: relative; width: min(330px, 100%); overflow: hidden; border-radius: 26px; background: #fff; border: 1px solid #edf0f4; box-shadow: 0 24px 58px rgba(17, 24, 39, .16); }
body.admin-body .qr-animation-demo-card img { width: 100%; height: 210px; object-fit: contain; background: linear-gradient(180deg, #fff, #f3faf7); padding: 18px; }
body.admin-body .qr-animation-demo-card > div { display: grid; gap: 8px; padding: 18px; }
body.admin-body .qr-animation-demo-card h3 { margin: 0; color: #111827; font-size: 22px; }
body.admin-body .qr-animation-demo-card p { margin: 0; color: #6b7280; line-height: 1.45; }
body.admin-body .qr-animation-demo-card footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
body.admin-body .qr-animation-demo-card footer strong { color: #275A53; font-size: 25px; font-weight: 950; }
body.admin-body .qr-animation-demo-card footer button { border: 0; border-radius: 999px; padding: 12px 16px; background: #275A53; color: #fff; font-weight: 900; }
body.admin-body .qr-demo-badge { position: absolute; z-index: 2; top: 14px; left: 14px; border-radius: 999px; background: rgba(39, 90, 83, .94); color: #fff; padding: 6px 12px; font-size: 12px; font-weight: 900; }
body.admin-body .qr-animation-preset-section { display: grid; gap: 12px; }
body.admin-body .qr-animation-preset-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
body.admin-body .qr-animation-preset-grid.recommended { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.admin-body .qr-animation-preset { position: relative; min-height: 172px; display: grid; gap: 8px; align-content: start; text-align: left; overflow: hidden; border: 1px solid #e5e9ef; border-radius: 20px; background: #fff; padding: 18px; color: #111827; cursor: pointer; box-shadow: 0 12px 28px rgba(17, 24, 39, .06); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
body.admin-body .qr-animation-preset:hover,
body.admin-body .qr-animation-preset.active { transform: translateY(-2px); border-color: rgba(39, 90, 83, .46); box-shadow: 0 18px 42px rgba(39, 90, 83, .16); }
body.admin-body .qr-animation-preset.active::after { content: "Secili"; position: absolute; top: 12px; right: 12px; border-radius: 999px; background: #275A53; color: #fff; padding: 5px 9px; font-size: 11px; font-weight: 900; }
body.admin-body .qr-animation-preset strong { position: relative; z-index: 1; font-size: 18px; font-weight: 950; }
body.admin-body .qr-animation-preset small { position: relative; z-index: 1; width: fit-content; border-radius: 999px; background: #f1f5f9; color: #475569; padding: 5px 9px; font-weight: 900; }
body.admin-body .qr-animation-preset em { position: relative; z-index: 1; color: #6b7280; font-size: 13px; font-style: normal; line-height: 1.45; }
body.admin-body .qr-animation-preset .preset-orbit { position: absolute; right: -28px; bottom: -28px; width: 104px; height: 104px; border-radius: 50%; background: radial-gradient(circle, rgba(230, 201, 122, .45), rgba(39, 90, 83, .12) 62%, transparent 64%); }
body.admin-body .qr-animation-preset-grid.recommended .qr-animation-preset { min-height: 205px; background: linear-gradient(135deg, #fff, #f6fbf8); border-color: rgba(39, 90, 83, .22); }
body.admin-body .qr-animation-preset.none { background: #fafafa; }
body.admin-body .preset-tags { display: flex; flex-wrap: wrap; gap: 6px; }
body.admin-body .preset-tags b { border-radius: 999px; background: rgba(230, 201, 122, .24); color: #7a5a14; padding: 5px 8px; font-size: 11px; }
body.admin-body .qr-animation-advanced { border: 1px solid #e8edf2; border-radius: 20px; background: #fff; padding: 16px; }
body.admin-body .qr-animation-advanced summary { cursor: pointer; color: #111827; font-weight: 950; }
body.admin-body .qr-animation-preset-grid.compact { margin-top: 14px; }
body.admin-body .qr-animation-preset-grid.compact .qr-animation-preset { min-height: 142px; }
body.admin-body .qr-animation-demo-card.demo-soft { animation: qrDemoSoft .72s ease both; }
body.admin-body .qr-animation-demo-card.demo-fade-up { animation: qrDemoFadeUp .72s cubic-bezier(.2, .8, .2, 1) both; }
body.admin-body .qr-animation-demo-card.demo-fade-down { animation: qrDemoFadeDown .72s cubic-bezier(.2, .8, .2, 1) both; }
body.admin-body .qr-animation-demo-card.demo-slide-left { animation: qrDemoSlideLeft .72s cubic-bezier(.2, .8, .2, 1) both; }
body.admin-body .qr-animation-demo-card.demo-slide-right { animation: qrDemoSlideRight .72s cubic-bezier(.2, .8, .2, 1) both; }
body.admin-body .qr-animation-demo-card.demo-zoom { animation: qrDemoZoom .72s cubic-bezier(.2, .8, .2, 1) both; }
body.admin-body .qr-animation-demo-card.demo-blur { animation: qrDemoBlur .78s ease both; }
body.admin-body .qr-animation-demo-card.demo-flip { animation: qrDemoFlip .78s cubic-bezier(.2, .8, .2, 1) both; }
body.admin-body .qr-animation-demo-card.demo-stagger > div > * { opacity: 0; animation: qrDemoFadeUp .55s ease both; }
body.admin-body .qr-animation-demo-card.demo-stagger > div > *:nth-child(1) { animation-delay: .08s; }
body.admin-body .qr-animation-demo-card.demo-stagger > div > *:nth-child(2) { animation-delay: .16s; }
body.admin-body .qr-animation-demo-card.demo-stagger > div > *:nth-child(3) { animation-delay: .24s; }
body.admin-body .qr-animation-demo-card.demo-text h3,
body.admin-body .qr-animation-demo-card.demo-text p { animation: qrDemoText .8s ease both; }
body.admin-body .qr-animation-demo-card.demo-text p { animation-delay: .12s; }
@keyframes qrDemoSoft { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes qrDemoFadeUp { from { opacity: 0; transform: translateY(42px); } to { opacity: 1; transform: translateY(0); } }
@keyframes qrDemoFadeDown { from { opacity: 0; transform: translateY(-34px); } to { opacity: 1; transform: translateY(0); } }
@keyframes qrDemoSlideLeft { from { opacity: 0; transform: translateX(54px); } to { opacity: 1; transform: translateX(0); } }
@keyframes qrDemoSlideRight { from { opacity: 0; transform: translateX(-54px); } to { opacity: 1; transform: translateX(0); } }
@keyframes qrDemoZoom { from { opacity: 0; transform: scale(.78); } to { opacity: 1; transform: scale(1); } }
@keyframes qrDemoBlur { from { opacity: 0; filter: blur(12px); transform: translateY(18px); } to { opacity: 1; filter: blur(0); transform: translateY(0); } }
@keyframes qrDemoFlip { from { opacity: 0; transform: perspective(700px) rotateX(64deg) translateY(18px); } to { opacity: 1; transform: perspective(700px) rotateX(0) translateY(0); } }
@keyframes qrDemoText { from { opacity: 0; letter-spacing: .08em; transform: translateY(12px); } to { opacity: 1; letter-spacing: 0; transform: translateY(0); } }
@media (max-width: 1100px) {
  body.admin-body .qr-animation-grid { grid-template-columns: 1fr; }
  body.admin-body .qr-animation-preset-grid,
  body.admin-body .qr-animation-preset-grid.recommended { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  body.admin-body .qr-animation-preview-head { align-items: stretch; flex-direction: column; }
  body.admin-body .qr-animation-preset-grid,
  body.admin-body .qr-animation-preset-grid.recommended { grid-template-columns: 1fr; }
  body.admin-body .qr-animation-device-frame { min-height: 360px; padding: 18px; }
}

/* Animated admin confirmation modal */
body.admin-confirm-open {
  overflow: hidden !important;
}

body.admin-body .admin-confirm-modal {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: grid;
  place-items: center;
  padding: 22px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .22s ease, visibility .22s ease;
}

body.admin-body .admin-confirm-modal.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

body.admin-body .admin-confirm-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .46);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

body.admin-body .admin-confirm-dialog {
  position: relative;
  width: min(430px, 100%);
  display: grid;
  gap: 12px;
  padding: 28px;
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.74);
  background: linear-gradient(145deg, #ffffff 0%, #f8fbfa 100%);
  box-shadow: 0 28px 80px rgba(15, 23, 42, .24);
  transform: translateY(18px) scale(.94);
  opacity: 0;
  transition: transform .26s cubic-bezier(.2, .9, .2, 1.12), opacity .2s ease;
}

body.admin-body .admin-confirm-modal.show .admin-confirm-dialog {
  transform: translateY(0) scale(1);
  opacity: 1;
}

body.admin-body .admin-confirm-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 14px;
  background: #f3f6f5;
  color: #111827;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

body.admin-body .admin-confirm-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: linear-gradient(135deg, #fff3e0, #ffe4e8);
  color: #b42318;
  font-size: 28px;
  font-weight: 950;
  box-shadow: 0 12px 28px rgba(180, 35, 24, .14);
}

body.admin-body .admin-confirm-kicker {
  color: #275A53;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
}

body.admin-body .admin-confirm-dialog h2 {
  margin: 0;
  color: #111827;
  font-size: 24px;
  line-height: 1.15;
  font-weight: 950;
}

body.admin-body .admin-confirm-dialog p {
  margin: 0;
  color: #667085;
  font-size: 14px;
  line-height: 1.55;
  font-weight: 750;
}

body.admin-body .admin-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 8px;
}

body.admin-body .admin-confirm-actions .btn {
  min-height: 44px;
  border-radius: 14px;
  padding-inline: 18px;
}

.bowl-builder-hero {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 20px;
  align-items: center;
  background: linear-gradient(135deg, #3b2617, #1f140d);
  color: #fff;
  padding: 24px;
  border-radius: 22px 22px 0 0;
}

.bowl-builder-hero.has-custom-bowl {
  display: block;
  background: transparent;
  padding: 0;
}

.bowl-builder-hero.has-custom-bowl .bowl-custom-html,
.bowl-builder-hero.has-custom-bowl .bowl-custom-html > * {
  width: 100%;
}

.bowl-builder-hero.has-custom-bowl img {
  background: transparent;
  border-radius: 0;
}

.bowl-builder-hero span {
  color: #e6c97a;
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: .12em;
}

.bowl-builder-hero h2 {
  margin: 6px 0;
  color: #fff;
  font-size: clamp(26px, 4vw, 42px);
}

.bowl-builder-hero p { color: rgba(255,255,255,.8); margin: 0; }

.bowl-builder-hero img {
  width: 100%;
  max-height: 180px;
  object-fit: contain;
  border-radius: 18px;
  background: rgba(255,255,255,.1);
}

.bowl-builder-groups {
  padding: 18px;
  display: grid;
  gap: 18px;
  background: #fffdf8;
  border: 1px solid rgba(39,90,83,.16);
  border-top: 0;
}

.bowl-choice-group {
  --bowl-slide-ease: cubic-bezier(0.86, 0, 0.07, 1);
  --bowl-slide-duration: 420ms;
  border: 1px solid #eadfcd;
  border-radius: 18px;
  background: #fff;
  padding: 0;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 0fr;
  opacity: .96;
  position: relative;
  transition:
    grid-template-rows var(--bowl-slide-ease) var(--bowl-slide-duration),
    border-color 220ms ease,
    box-shadow 220ms ease,
    opacity 180ms ease,
    transform 180ms ease;
}

.bowl-choice-group:nth-child(1) { --bowl-accent: #275a53; --bowl-soft: #e8f4f1; --bowl-ring: rgba(39,90,83,.18); }

.bowl-choice-group:nth-child(2) { --bowl-accent: #c17b2f; --bowl-soft: #fff4e5; --bowl-ring: rgba(193,123,47,.2); }

.bowl-choice-group:nth-child(3) { --bowl-accent: #4e6813; --bowl-soft: #eef7df; --bowl-ring: rgba(78,104,19,.18); }

.bowl-choice-group:nth-child(4) { --bowl-accent: #74070e; --bowl-soft: #fff0f1; --bowl-ring: rgba(116,7,14,.16); }

.bowl-choice-group::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 28px 22px, color-mix(in srgb, var(--bowl-accent) 22%, transparent) 0 8%, transparent 34%),
    linear-gradient(135deg, var(--bowl-soft), #fff 58%);
  clip-path: circle(0% at 30px 24px);
  opacity: .9;
  pointer-events: none;
  transition: clip-path 620ms var(--bowl-slide-ease), opacity 220ms ease;
  z-index: 0;
}

.bowl-choice-group:hover {
  border-color: color-mix(in srgb, var(--bowl-accent) 40%, #eadfcd);
  transform: translateY(-1px);
}

.bowl-choice-group.open {
  grid-template-rows: auto 1fr;
  opacity: 1;
}

.bowl-choice-group.open::before {
  clip-path: circle(160% at 30px 24px);
}

.bowl-group-toggle {
  width: 100%;
  border: 0;
  background: transparent;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 100px minmax(150px, 220px) 34px;
  align-items: center;
  gap: 12px;
  padding: 16px;
  color: #1f2937;
  text-align: left;
  cursor: pointer;
  position: relative;
  z-index: 1;
}

.bowl-group-toggle span {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 19px;
  font-weight: 900;
}

.bowl-group-toggle b {
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: var(--bowl-accent);
  color: #fff;
}

.bowl-group-toggle small {
  font-size: 13px;
  color: #6b7280;
  font-weight: 800;
  white-space: nowrap;
  text-align: center;
  justify-self: center;
}

.bowl-group-toggle em {
  color: var(--bowl-accent);
  font-style: normal;
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
  justify-self: stretch;
}

.bowl-group-toggle::after {
  content: "";
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  background: #fff;
  color: var(--bowl-accent);
  font-weight: 900;
  flex: 0 0 auto;
  justify-self: end;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--bowl-accent) 26%, transparent);
  background-image:
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor);
  background-size: 13px 2px, 2px 13px;
  background-position: center;
  background-repeat: no-repeat;
  transform: rotate(0deg);
  transition: transform var(--bowl-slide-ease) var(--bowl-slide-duration), background-color 220ms ease, color 220ms ease;
}

.bowl-choice-group.open .bowl-group-toggle::after {
  background: var(--bowl-accent);
  color: #fff;
  background-image:
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor);
  transform: rotate(135deg);
}

.bowl-choice-group.open {
  border-color: var(--bowl-accent);
  box-shadow: 0 0 0 4px var(--bowl-ring);
}

.bowl-choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
  min-height: 0;
  overflow: hidden;
  padding: 0 16px;
  opacity: 0;
  transform: translateY(-8px);
  transition:
    opacity 240ms ease 80ms,
    transform 320ms var(--bowl-slide-ease),
    padding 260ms ease;
  position: relative;
  z-index: 1;
}

.bowl-choice-group.open .bowl-choice-grid {
  padding: 4px 16px 16px;
  opacity: 1;
  transform: translateY(0);
}

.bowl-choice-card {
  position: relative;
  min-height: 118px;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 12px;
  display: grid;
  gap: 5px;
  align-content: start;
  background: #fff;
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.bowl-choice-card:hover { transform: translateY(-1px); border-color: #d8bd92; }

.bowl-choice-card:has(input:checked) {
  border-color: #275a53;
  box-shadow: 0 0 0 3px rgba(39,90,83,.12);
  background: #f4fbf8;
}

.bowl-choice-card input { width: 20px; height: 20px; accent-color: #275a53; }

.bowl-choice-card img { width: 64px; height: 48px; object-fit: contain; justify-self: center; }

.bowl-choice-card strong { color: #111827; text-align: center; line-height: 1.15; }

.bowl-choice-card span,
.bowl-choice-card em { color: #6b7280; text-align: center; font-size: 12px; font-style: normal; }

.bowl-choice-card em { color: #275a53; font-weight: 900; }

.bowl-builder-footer {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: #fffdf8;
  border: 1px solid rgba(39,90,83,.16);
  border-top: 0;
  border-radius: 0 0 22px 22px;
  backdrop-filter: blur(12px);
}

.bowl-builder-footer span { display: block; color: #6b7280; font-weight: 800; }

.bowl-builder-footer strong { color: #275a53; font-size: 26px; }

.bowl-main-btn {
  border: 0;
  border-radius: 999px;
  background: #275a53;
  color: #fff;
  min-height: 48px;
  padding: 0 28px;
  font-weight: 900;
  box-shadow: 0 10px 26px rgba(39,90,83,.22);
}

.bowl-builder-message {
  margin: 0 18px 18px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #fff7ed;
  color: #9a3412;
  font-weight: 800;
}

.bowl-builder-message.ok { background: #ecfdf5; color: #047857; }

.bowl-builder-panel.is-just-added { animation: bowlAdded .85s ease; }

@media (max-width: 900px) {
.bowl-builder-hero img { max-height: 150px; }

.bowl-group-toggle {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 84px 30px;
  }

.bowl-group-toggle small {
    justify-self: end;
    text-align: right;
  }

.bowl-group-toggle em {
    grid-column: 1 / -1;
    max-width: 100%;
    text-align: left;
    justify-self: stretch;
    padding-left: 46px;
  }
}

@media (max-width: 640px) {
.bowl-builder-panel {
    border-radius: 18px;
    margin-inline: 0;
  }

.bowl-builder-groups {
    padding: 12px;
    gap: 12px;
  }

.bowl-choice-group {
    border-radius: 16px;
  }

.bowl-choice-group.open {
    box-shadow: 0 0 0 3px var(--bowl-ring);
  }

.bowl-choice-group::before {
    clip-path: circle(0% at 24px 22px);
  }

.bowl-choice-group.open::before {
    clip-path: circle(140% at 24px 22px);
  }

.bowl-group-toggle {
    grid-template-columns: minmax(0, 1fr) minmax(78px, 104px) 30px;
    grid-template-areas:
      "title summary icon"
      "meta summary icon";
    gap: 6px 10px;
    padding: 13px 12px;
    min-height: 78px;
  }

.bowl-group-toggle span {
    grid-area: title;
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    font-size: 15px;
    line-height: 1.14;
    font-weight: 950;
    white-space: nowrap;
    overflow-wrap: normal;
  }

.bowl-group-toggle b {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    font-size: 16px;
    box-shadow: 0 8px 18px color-mix(in srgb, var(--bowl-accent) 22%, transparent);
  }

.bowl-group-toggle span::after {
    content: none;
  }

.bowl-group-toggle small {
    grid-area: meta;
    justify-self: start;
    text-align: left;
    font-size: 11px;
    line-height: 1.1;
    color: color-mix(in srgb, var(--bowl-accent) 72%, #6b7280);
  }

.bowl-group-toggle em {
    grid-area: summary;
    margin-top: 0;
    padding: 0;
    border-radius: 999px;
    background: transparent;
    border: 0;
    color: var(--bowl-accent);
    font-size: 11px;
    line-height: 1.2;
    white-space: normal;
    text-align: right;
    justify-self: end;
    align-self: center;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

.bowl-group-toggle::after {
    grid-area: icon;
    width: 30px;
    height: 30px;
    align-self: center;
  }

.bowl-choice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding-inline: 10px;
  }

.bowl-choice-group.open .bowl-choice-grid {
    padding: 2px 10px 12px;
  }
}

.parallax-page .parallax-reveal {
  opacity: 0;
  transform: translate3d(0, var(--reveal-y, 76px), 0) scale(.965);
  transition:
    opacity 1.08s ease,
    transform 1.08s cubic-bezier(.16, .74, .18, 1),
    border-color .3s ease,
    background-color .3s ease,
    box-shadow .3s ease;
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

.parallax-page .parallax-reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, calc(var(--parallax-item-y, 0px)), 0) scale(1);
}

.parallax-page .parallax-reveal.is-visible:hover {
  --parallax-item-y: -4px;
}

@media (prefers-reduced-motion: reduce) {
.parallax-page .parallax-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.qr-item-action.price-right strong { order: 2; margin-left: auto; }

.qr-item-action.price-right button { order: 1; margin-left: 0; }

.campaign-stack { position: fixed; inset: auto 22px 22px auto; z-index: 80; display: grid; gap: 12px; pointer-events: none; }

.campaign-widget { display: none; pointer-events: auto; position: relative; max-width: 420px; overflow: hidden; border-radius: 18px; background: #fff; border: 1px solid rgba(151,134,103,.22); box-shadow: 0 18px 50px rgba(0,0,0,.18); }

.campaign-widget.visible { display: grid; grid-template-columns: 132px minmax(0,1fr); }

.campaign-widget img { width: 100%; height: 100%; min-height: 170px; object-fit: cover; }

.campaign-stack:has(.campaign-banner.visible), .campaign-stack:has(.campaign-bar.visible) { position: static; margin: 0 auto; padding: 0 18px; max-width: 1180px; pointer-events: auto; }

@media (max-width: 640px) {
.campaign-stack { inset: auto 12px 86px 12px; }

.campaign-widget.visible { max-width: none; grid-template-columns: 98px minmax(0,1fr); border-radius: 14px; }

.campaign-widget img { min-height: 150px; }
}

.qr-item[hidden] { display: none !important; }

.qr-shell.hide-product-images .qr-item { grid-template-columns: 1fr; }

.qr-shell.hide-product-images .qr-item-copy { min-height: 170px; }

.qr-shell.compact-list .qr-list { grid-template-columns: 1fr; max-width: 920px; margin: 0 auto; }

.qr-shell.compact-list .qr-item { grid-template-columns: 180px 1fr; min-height: 170px; }

.qr-shell.compact-list .qr-thumb-img { height: 170px; }

.qr-shell.image-focus .qr-thumb-img { height: 250px; object-fit: contain; background: #fff; }

.qr-shell.image-focus .qr-item-copy { min-height: 150px; }

.menu-cart[data-cart-total] { min-width: 104px; }

.cart-drawer {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: none;
  background: rgba(15, 23, 42, .52);
  backdrop-filter: blur(7px);
}

.cart-drawer.active { display: flex; justify-content: flex-end; }

.cart-drawer-panel {
  position: relative;
  width: min(460px, 94vw);
  height: 100dvh;
  max-height: 100dvh;
  background: #fbfcfd;
  padding: 22px;
  box-shadow: -22px 0 54px rgba(15, 23, 42, .22);
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
}

.cart-drawer-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 4px;
}

.cart-drawer-header span {
  color: #275A53;
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.cart-close {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 14px;
  background: #fff;
  color: #17202b;
  box-shadow: 0 10px 22px rgba(15, 23, 42, .08);
  cursor: pointer;
  font-size: 24px;
}

.cart-drawer h2 { margin: 2px 0 0; color: #17202b; font-size: 28px; line-height: 1.1; }

.cart-mini-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.cart-mini-stats span,
.cart-mini-stat-button {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(39, 90, 83, .14);
  border-radius: 14px;
  background: #fff;
  color: #667085;
  font-size: 13px;
  font-weight: 900;
  font-family: inherit;
}

.cart-mini-stat-button {
  cursor: pointer;
  gap: 6px;
  transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}

.cart-mini-stat-button:hover,
.cart-mini-stat-button:focus-visible {
  border-color: rgba(39, 90, 83, .32);
  background: rgba(39, 90, 83, .06);
  color: #275A53;
}

.cart-mini-stats b,
.cart-mini-stats span:last-child,
.cart-mini-stat-button b {
  color: #275A53;
}

.cart-mini-stat-button b {
  font-size: 17px;
  line-height: 1;
}

.cart-stepper {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 0;
  padding: 4px 6px 2px;
  isolation: isolate;
}

.cart-stepper::before {
  content: "";
  position: absolute;
  left: 12.5%;
  right: 12.5%;
  top: 18px;
  height: 4px;
  border-radius: 999px;
  background: #eef2f7;
  z-index: 0;
}

.cart-stepper::after {
  content: "";
  position: absolute;
  left: 12.5%;
  top: 18px;
  width: var(--cart-step-progress-width, 0%);
  max-width: 75%;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #12c7b7, #f5ab1e);
  transition: width .25s ease;
  z-index: 0;
}

.cart-stepper span {
  position: relative;
  z-index: 2;
  flex: 1;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: transparent;
  color: #667085;
  font-weight: 950;
}

.cart-stepper b {
  position: relative;
  z-index: 3;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 3px solid #e5e7eb;
  border-radius: 50%;
  background: #fff;
  color: #98a2b3;
  font-size: 12px;
  box-shadow: none;
  transition: all .25s ease;
}

.cart-stepper em {
  font-style: normal;
  font-size: 10px;
  color: #98a2b3;
}

.cart-stepper span.active b {
  border-color: #12c7b7;
  background: #12c7b7;
  color: #fff;
}

.cart-stepper span.active em {
  color: #275A53;
}

.cart-stepper span:last-child.active b {
  border-color: #f5ab1e;
  background: #f5ab1e;
  color: #17202b;
}

/* keep old active text rule harmless for nested labels */
.cart-stepper span.active {
  background: #275A53;
  color: inherit;
  background: transparent;
}

.cart-step-panel {
  display: none;
  min-height: 0;
}

.cart-step-panel.active {
  display: grid;
  gap: 12px;
}

.cart-step-panel[data-cart-step-panel="items"].active {
  flex: 1 1 auto;
  min-height: 0;
}

.cart-step-panel[data-cart-step-panel="send"].active {
  display: contents;
}

.cart-note-step {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, .2);
  border-radius: 18px;
  background: #fff;
}

.cart-note-step label {
  display: grid;
  gap: 8px;
  color: #17202b;
  font-size: 13px;
  font-weight: 900;
}

.cart-note-step textarea {
  width: 100%;
  min-height: 124px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 12px 13px;
  background: #f8fafc;
  font: inherit;
  line-height: 1.45;
  box-sizing: border-box;
  resize: vertical;
}

.cart-note-step small {
  color: #667085;
  font-size: 12px;
  font-weight: 800;
}

.cart-step-actions {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: .65fr 1fr;
  gap: 10px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid rgba(148, 163, 184, .18);
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}

.cart-drawer-panel.cart-send-step {
  grid-template-rows: auto auto auto 1fr auto;
}

.cart-drawer-panel.cart-send-step .cart-step-panel[data-cart-step-panel="send"].active {
  display: grid;
  gap: 10px;
  order: 6;
}

.cart-drawer-panel.cart-send-step .cart-step-actions {
  grid-template-columns: .65fr;
  order: 5;
}

.cart-drawer-panel.cart-send-step .cart-step-next {
  display: none;
}

.cart-step-actions button {
  min-height: 46px;
  border: 0;
  border-radius: 14px;
  font-weight: 950;
  cursor: pointer;
  box-shadow: none !important;
}

.cart-step-back {
  background: #eef2f7;
  color: #17202b;
}

.cart-step-next {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 0 !important;
  background: #171b2f;
  color: #f5ab1e;
  letter-spacing: .04em;
  text-transform: uppercase;
  box-shadow: none !important;
  transition: color .35s ease, background .35s ease, transform .2s ease;
}

.cart-step-next::before,
.cart-step-next::after {
  content: none;
}

.cart-step-next::before {
  top: 0;
  left: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #f5ab1e);
  animation: cartStepLineTop 1.2s linear infinite;
}

.cart-step-next::after {
  right: -100%;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(270deg, transparent, #f5ab1e);
  animation: cartStepLineBottom 1.2s linear infinite;
  animation-delay: .6s;
}

.cart-step-next:hover,
.cart-step-next:focus-visible {
  background: #f5ab1e;
  color: #17202b;
  box-shadow: none !important;
}

.cart-step-next:active {
  transform: scale(.98);
}

.cart-warning-popup {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 92px;
  z-index: 25;
  display: grid;
  grid-template-columns: 42px 1fr 32px;
  gap: 4px 12px;
  align-items: center;
  padding: 14px 14px;
  border: 1px solid rgba(245, 158, 11, .26);
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(255, 251, 235, .98), rgba(255, 255, 255, .96));
  color: #78350f;
  box-shadow: 0 18px 46px rgba(17, 24, 39, .16);
  backdrop-filter: blur(12px);
  opacity: 0;
  pointer-events: none;
  transform: translateY(14px) scale(.98);
  transition: opacity .2s ease, transform .2s ease;
}

.cart-warning-popup.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.cart-warning-icon {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: #f59e0b;
  color: #fff;
  font-size: 20px;
  font-weight: 950;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .08);
}

.cart-warning-popup strong {
  grid-column: 2;
  grid-row: 1;
  font-size: 14px;
  font-weight: 950;
  letter-spacing: .01em;
}

.cart-warning-message {
  grid-column: 2;
  grid-row: 2;
  color: #92400e;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.45;
}

.cart-warning-popup button {
  grid-column: 3;
  grid-row: 1;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 999px;
  background: rgba(120, 53, 15, .08);
  color: #78350f;
  cursor: pointer;
  font-size: 18px;
  font-weight: 900;
}

.cart-warning-popup.table-warning {
  border-color: rgba(39, 90, 83, .22);
  background:
    linear-gradient(135deg, rgba(236, 253, 245, .98), rgba(255, 255, 255, .96));
  color: #17443f;
}

.cart-warning-popup.table-warning .cart-warning-icon {
  background: #275a53;
}

.cart-warning-popup.table-warning .cart-warning-message {
  color: #275a53;
}

.cart-warning-popup.table-warning button {
  background: rgba(39, 90, 83, .1);
  color: #17443f;
}

.cart-warning-popup.success {
  border-color: rgba(39, 174, 96, .22);
  background:
    linear-gradient(135deg, rgba(239, 250, 243, .98), rgba(255, 255, 255, .96));
  color: #14532d;
}

.cart-warning-popup.success .cart-warning-icon {
  background: #10b981;
}

.cart-warning-popup.success .cart-warning-message {
  color: #166534;
}

.cart-warning-popup.success button {
  background: rgba(39, 174, 96, .12);
  color: #14532d;
}

.cart-order-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  max-height: 260px;
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, .2);
  border-radius: 18px;
  background: #fff;
  opacity: 1;
  overflow: hidden;
  transform: translateY(0);
  transition: max-height .24s ease, opacity .18s ease, padding .24s ease, border-width .24s ease, margin .24s ease, transform .24s ease;
}

.cart-order-meta label:nth-child(3) {
  grid-column: 1 / -1;
}

.cart-order-meta.has-qr-table {
  grid-template-columns: 1fr;
}

.cart-qr-table-summary {
  display: grid;
  gap: 4px;
  padding: 13px 14px;
  border: 1px solid rgba(39, 90, 83, .18);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(39, 90, 83, .1), rgba(230, 201, 122, .12));
}

.cart-qr-table-summary span {
  color: #275A53;
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.cart-qr-table-summary strong {
  color: #17202b;
  font-size: 15px;
  font-weight: 950;
}

.cart-qr-table-summary small {
  color: #667085;
  font-size: 12px;
  font-weight: 800;
}

.cart-mini-stats {
  max-height: 60px;
  opacity: 1;
  overflow: hidden;
  transform: translateY(0);
  transition: max-height .24s ease, opacity .18s ease, margin .24s ease, transform .24s ease;
}

.cart-order-meta label { display: grid; gap: 6px; color: #17202b; font-size: 12px; font-weight: 900; }

.cart-order-meta input,
.cart-order-meta select { width: 100%; min-height: 42px; border: 1px solid #e5e7eb; border-radius: 12px; padding: 8px 10px; font: inherit; background: #f8fafc; box-sizing: border-box; }

.cart-order-meta input:focus,
.cart-order-meta select:focus { outline: 3px solid rgba(39, 90, 83, .12); border-color: #275A53; background: #fff; }

.cart-lines {
  display: grid;
  gap: 8px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 6px;
  scrollbar-width: thin;
}

.cart-lines::-webkit-scrollbar { width: 6px; }

.cart-lines::-webkit-scrollbar-thumb { background: rgba(39, 90, 83, .35); border-radius: 999px; }

.cart-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 16px;
  background: #fff;
}

.cart-line strong { display: block; color: #17202b; font-size: 14px; line-height: 1.3; }

.cart-line span { color: #275A53; font-size: 18px; font-weight: 950; }

.cart-line b { white-space: nowrap; color: #717789; font-size: 12px; font-weight: 900; }

.cart-line-main { display: grid; gap: 7px; min-width: 0; }

.cart-line-side { display: grid; justify-items: end; gap: 8px; }

.cart-qty-controls { display: inline-flex; align-items: center; gap: 6px; flex-wrap: nowrap; }

.cart-qty-controls button { width: 30px; height: 30px; border: 1px solid #dfe3ec; border-radius: 10px; background: #f8fafc; color: #17202b; font-weight: 900; cursor: pointer; }

.cart-qty-controls em { min-width: 22px; text-align: center; font-style: normal; font-weight: 900; color: #20233a; }

.cart-remove {
  position: relative;
  isolation: isolate;
  width: auto;
  min-width: 112px;
  max-width: 132px;
  min-height: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(220, 53, 69, .62);
  border-radius: 14px;
  padding: 0 18px;
  background: #241015;
  color: #ff4f7a;
  font-weight: 950;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: none;
  overflow: hidden;
  transition: background .35s ease, color .35s ease, transform .2s ease;
}

.cart-line-side .cart-remove {
  justify-self: end;
  align-self: center;
}

.cart-remove::before {
  content: none;
}

.cart-remove > span {
  position: relative;
  z-index: 2;
}

.cart-remove > i {
  position: absolute;
  display: block;
  pointer-events: none;
  z-index: 1;
}

.cart-remove > i:nth-child(1) {
  top: 0;
  left: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #ff4f7a);
  animation: whatsappLineTop 1.2s linear infinite;
}

.cart-remove > i:nth-child(2),
.cart-remove > i:nth-child(4) {
  display: none;
}

.cart-remove > i:nth-child(2) {
  top: -100%;
  right: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent, #ff4f7a);
  animation: whatsappLineRight 1.2s linear infinite;
  animation-delay: .3s;
}

.cart-remove > i:nth-child(3) {
  right: -100%;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(270deg, transparent, #ff4f7a);
  animation: whatsappLineBottom 1.2s linear infinite;
  animation-delay: .6s;
}

.cart-remove > i:nth-child(4) {
  bottom: -100%;
  left: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(360deg, transparent, #ff4f7a);
  animation: whatsappLineLeft 1.2s linear infinite;
  animation-delay: .9s;
}

.cart-remove-whatsapp-style::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 79, 122, .08);
  opacity: 0;
  transition: opacity .2s ease;
  z-index: 0;
}

.cart-remove-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  line-height: 1;
  flex: 0 0 17px;
}

.cart-remove-icon svg {
  width: 16px;
  height: 16px;
  display: block;
  color: currentColor;
}

.cart-remove-text {
  color: #fff;
  font-size: 13px;
  line-height: 1;
  text-shadow: 0 0 8px rgba(255, 255, 255, .28);
}

.cart-remove:hover,
.cart-remove:focus-visible {
  background: #ff4f7a;
  color: #fff;
  transform: translateY(-1px);
  outline: 0;
}

.cart-remove:hover::after,
.cart-remove:focus-visible::after {
  opacity: 1;
}

.cart-remove:active {
  transform: translateY(0) scale(.98);
}

.cart-empty { color: #717789; padding: 16px; background: #f7f8fb; border-radius: 12px; }

.cart-summary {
  flex: 0 0 auto;
  margin-top: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border: 1px solid rgba(39, 90, 83, .14);
  border-radius: 18px;
  background: #fff;
  font-weight: 900;
}

.cart-summary strong {
  color: #275A53;
  font-size: 22px;
}

.cart-whatsapp {
  flex: 0 0 auto;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #25d366;
  color: #fff;
  font-weight: 900;
}

@media (max-width: 640px) {
.qr-shell.compact-list .qr-item { grid-template-columns: 1fr; }

.qr-shell.compact-list .qr-thumb-img, .qr-shell.image-focus .qr-thumb-img { height: 170px; }
}

.bowl-main-btn {
  min-height: 48px;
  border: 0;
  border-radius: 999px;
  padding: 0 24px;
  background: linear-gradient(135deg, #4c8b7c 0%, #2c5a4e 100%);
  color: #fff;
  font-weight: 900;
  box-shadow: 0 10px 22px rgba(76,139,124,.24);
  cursor: pointer;
}

.bowl-popup-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  padding: 18px;
  background: rgba(22,24,30,.72);
  backdrop-filter: blur(6px);
  align-items: center;
  justify-content: center;
}

.bowl-popup-overlay.active { display: flex; }

.bowl-popup-container {
  width: min(820px, 100%);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 26px 60px rgba(0,0,0,.30);
}

.bowl-popup-header {
  position: relative;
  padding: 22px 56px 20px;
  text-align: center;
  background: linear-gradient(135deg, #4c8b7c 0%, #2c5a4e 100%);
  color: #fff;
}

.bowl-popup-header h2 { margin: 0 0 6px; color: #fff; font-size: 24px; }

.bowl-popup-header p { margin: 0; opacity: .9; }

.bowl-progress-container { padding: 16px 18px; border-bottom: 1px solid #edf0ee; background: #f8f9fa; }

.bowl-progress-steps { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }

.bowl-progress-line { position: absolute; left: 8%; right: 8%; top: 17px; height: 3px; background: #dce4df; z-index: 0; }

.bowl-progress-line-fill { height: 100%; width: 0; background: #4c8b7c; transition: width .25s ease; }

.bowl-step {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 5px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
}

.bowl-step-number {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 2px solid #dce4df;
  border-radius: 50%;
  background: #fff;
  color: #6c757d;
  font-weight: 900;
}

.bowl-step.active .bowl-step-number, .bowl-step.completed .bowl-step-number { background: #4c8b7c; border-color: #4c8b7c; color: #fff; }

.bowl-step-label { color: #687179; font-size: 11px; font-weight: 800; text-align: center; }

.bowl-popup-content { flex: 1; overflow-y: auto; padding: 24px; background: #f8f9fa; }

.bowl-step-content { display: none; }

.bowl-step-content.active { display: block; }

.bowl-step-content h3 { margin: 0 0 6px; text-align: center; font-size: 24px; color: #20233a; }

.bowl-step-content > p { margin: 0 0 18px; text-align: center; color: #6c757d; }

.bowl-options-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)); gap: 12px; }

.bowl-option-card, .bowl-cooking-grid button, .bowl-area-options button, .bowl-table-grid button {
  min-height: 56px;
  border: 2px solid #e5ebe7;
  border-radius: 14px;
  background: #fff;
  color: #20233a;
  padding: 12px;
  cursor: pointer;
  font: inherit;
  text-align: center;
  transition: .18s ease;
}

.bowl-option-card { display: grid; gap: 4px; }

.bowl-option-card strong { font-size: 14px; }

.bowl-option-card span { color: #4c8b7c; font-weight: 900; }

.bowl-option-card small { color: #6c757d; font-size: 11px; }

.bowl-option-card:hover, .bowl-cooking-grid button:hover, .bowl-area-options button:hover, .bowl-table-grid button:hover { border-color: #4c8b7c; transform: translateY(-2px); }

.bowl-option-card.selected, .bowl-cooking-grid button.selected, .bowl-area-options button.selected, .bowl-table-grid button.selected {
  border-color: #4c8b7c;
  background: rgba(76,139,124,.10);
  box-shadow: 0 8px 18px rgba(76,139,124,.12);
}

.bowl-cooking-grid, .bowl-area-options { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

.bowl-table-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; max-width: 560px; margin: 18px auto 0; }

.bowl-summary-box { display: grid; gap: 10px; background: #fff; border-radius: 14px; padding: 16px; border: 1px solid #edf0ee; }

.bowl-summary-box div { display: grid; grid-template-columns: 130px 1fr; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid #edf0ee; }

.bowl-summary-box div:last-child { border-bottom: 0; padding-bottom: 0; }

.bowl-summary-box span { color: #6c757d; font-weight: 800; }

.bowl-summary-box strong { color: #20233a; }

.bowl-total-price { margin-top: 14px; padding: 16px; border-radius: 14px; background: linear-gradient(135deg, #4c8b7c 0%, #2c5a4e 100%); color: #fff; display: flex; justify-content: space-between; align-items: center; font-weight: 900; }

.bowl-popup-footer { padding: 16px 24px; border-top: 1px solid #edf0ee; background: #fff; display: flex; justify-content: space-between; gap: 12px; }

.bowl-nav-btn { min-height: 42px; border: 0; border-radius: 999px; padding: 0 22px; font-weight: 900; cursor: pointer; }

.bowl-nav-btn.prev { background: #e9ecef; color: #495057; }

.bowl-nav-btn.next { background: #4c8b7c; color: #fff; }

.bowl-nav-btn:disabled { opacity: .45; cursor: not-allowed; }

@media (max-width: 720px) {
.bowl-popup-overlay { padding: 6px; align-items: end; }

.bowl-popup-container { width: 100%; max-height: 96vh; border-radius: 18px 18px 0 0; }

.bowl-progress-steps { gap: 2px; }

.bowl-step-number { width: 30px; height: 30px; font-size: 12px; }

.bowl-step-label { font-size: 9px; }

.bowl-popup-content { padding: 16px; }

.bowl-options-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.bowl-summary-box div { grid-template-columns: 1fr; gap: 3px; }
}

.welcome-card.cafe-card::after { opacity: 1; }

.welcome-card.cafe-card strong { background: transparent; margin-bottom: 58px; font-size: clamp(24px, 2vw, 34px); }

.qr-body { background: #f5f2ec; }

.qr-shell { max-width: 760px; margin: 0 auto; min-height: 100vh; padding: 18px 14px 96px; }

.qr-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 4px 18px; }

.qr-header h1 { margin-bottom: 0; }

.qr-home { color: var(--brand); font-weight: 700; }

.qr-tabs { position: sticky; top: 0; z-index: 5; display: flex; gap: 10px; overflow-x: auto; padding: 12px 0; background: #f5f2ec; }

.qr-tabs a { white-space: nowrap; min-height: 44px; display: inline-flex; align-items: center; padding: 10px 15px; border: 1px solid var(--line); border-radius: 25px; background: white; font-weight: 600; }

.qr-tabs a.active { background: var(--brand); color: white; border-color: var(--brand); }

.qr-category { padding: 28px 0; }

.qr-category > p { color: var(--brand); margin-bottom: 2px; font-weight: 600; }

.qr-list { display: grid; gap: 12px; }

.qr-item { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: start; padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: white; }

.qr-body .qr-item[data-tea-card="1"] { cursor: pointer; }

.qr-body .qr-item[data-tea-card="1"]:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand, #275a53) 70%, #ffffff); outline-offset: 4px; }

.qr-item h3 { margin-bottom: 4px; font-size: 17px; }

.qr-item p { margin-bottom: 0; color: var(--muted); font-size: 14px; }

.qr-item strong { color: var(--brand); white-space: nowrap; }

.qr-whatsapp { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); width: min(720px, calc(100vw - 28px)); min-height: 50px; display: flex; justify-content: center; align-items: center; border-radius: 25px; background: #198754; color: white; font-weight: 700; }

.qr-breakfast-entry {
  max-width: 1180px;
  margin: 42px auto 0;
  padding: 0 24px 28px;
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(420px, 1.08fr);
  gap: 58px;
  align-items: center;
}

.qr-breakfast-copy {
  padding: 36px 0;
}

.qr-breakfast-copy > p {
  margin-bottom: 10px;
  color: var(--brand);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.qr-breakfast-copy h1 {
  margin-bottom: 18px;
  font-size: clamp(42px, 5vw, 68px);
  line-height: 1.02;
}

.qr-breakfast-copy > span {
  display: block;
  max-width: 560px;
  color: #555d6f;
  font-size: 18px;
  line-height: 1.7;
}

.qr-breakfast-copy div {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 28px 0;
}

.qr-breakfast-copy strong {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  padding: 0 15px;
  border: 1px solid #e0dbd2;
  border-radius: 999px;
  background: #fff;
  color: #2d3043;
  font-size: 13px;
}

.qr-breakfast-copy a {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-weight: 900;
}

.qr-breakfast-visual {
  position: relative;
  min-height: 430px;
}

.qr-breakfast-visual img {
  object-fit: cover;
  border-radius: 8px;
}

.qr-breakfast-visual img:first-child {
  width: 78%;
  height: 390px;
}

.qr-breakfast-visual img:last-child {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 48%;
  height: 250px;
  border: 6px solid #fff;
  box-shadow: 0 18px 42px rgba(31,35,54,.16);
}

.eatford-style { max-width: 1180px; padding: 38px 24px 72px; }

.eatford-style.breakfast-mode { padding-top: 18px; }

.qr-breakfast-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-bottom: 38px;
}

.qr-breakfast-links a {
  display: grid;
  gap: 10px;
  padding: 0 0 22px;
  border: 1px solid #edf0f5;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 4px 16px rgba(31,35,54,.05);
}

.qr-breakfast-links img {
  width: 100%;
  height: 190px;
  object-fit: cover;
}

.qr-breakfast-links strong,
.qr-breakfast-links span {
  margin-left: 18px;
  margin-right: 18px;
}

.qr-breakfast-links strong {
  color: #20233a;
  font-size: 20px;
  font-weight: 900;
}

.qr-breakfast-links span {
  color: #747891;
  font-size: 14px;
  line-height: 1.45;
}

.category-showcase {
  display: grid;
  grid-template-columns: repeat(8, minmax(116px, 1fr));
  gap: 28px;
  margin-bottom: 62px;
}

.category-showcase a {
  min-height: 136px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 14px;
  padding: 16px 12px;
  border-radius: 24px;
  border: 1px solid transparent;
  color: #24263b;
  font-weight: 800;
}

.category-showcase a.active {
  background: #dceaff;
  border-color: #1e2b49;
  box-shadow: inset 0 -2px 0 #1e2b49;
}

.qr-venue {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 4px 18px;
}

.qr-logo-mark {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: var(--brand);
  color: #fff;
  font-weight: 800;
  font-size: 24px;
  box-shadow: 0 8px 24px rgba(151,134,103,.24);
}

.qr-venue h1 { font-size: 24px; line-height: 1.15; margin-bottom: 2px; }

.qr-venue p { margin: 0; color: var(--muted); font-size: 13px; font-weight: 500; }

.qr-search-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 12px;
  padding: 14px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(151,134,103,.18);
  box-shadow: 0 8px 28px rgba(0,0,0,.06);
}

.qr-search-card span { display: block; color: var(--muted); font-size: 12px; font-weight: 600; }

.qr-search-card strong { color: var(--dark); font-size: 15px; }

.qr-search-card a {
  min-height: 40px;
  padding: 9px 15px;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

.eatford-tabs {
  margin-left: -14px;
  margin-right: -14px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(151,134,103,.14);
}

.eatford-tabs a {
  border: 0;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 4px 18px rgba(0,0,0,.05);
  color: #495057;
  min-height: 42px;
  padding: 10px 14px;
}

.eatford-tabs a.active {
  background: var(--brand);
  box-shadow: 0 8px 20px rgba(151,134,103,.22);
}

.eatford-category { padding-top: 0; }

.qr-category-title {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 14px;
}

.qr-category-title p { margin: 0 0 2px; color: var(--brand); font-size: 12px; font-weight: 700; text-transform: uppercase; }

.qr-category-title h2 { margin: 0; font-size: 24px; }

.qr-category-title span { color: var(--muted); font-size: 12px; font-weight: 700; white-space: nowrap; }

.eatford-style .qr-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
}

.eatford-style .qr-item {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  min-height: 390px;
  padding: 0;
  border: 1px solid #edf0f5;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 3px 12px rgba(31,35,54,.04);
  overflow: hidden;
}

.qr-thumb {
  width: 100%;
  height: 210px;
  border-radius: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #f0f1f4, #fff);
  color: var(--brand);
  font-size: 42px;
  font-weight: 800;
}

.qr-thumb-img {
  width: 100%;
  height: 210px;
  object-fit: cover;
  background: #f0f1f4;
}

.eatford-style .qr-item h3 { font-size: 18px; line-height: 1.3; margin: 0 0 10px; color: #20233a; font-weight: 900; }

.eatford-style .qr-item p {
  min-height: 44px;
  max-height: 44px;
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
  color: #747891;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.qr-item-copy { min-width: 0; padding: 18px 18px 16px; display: grid; grid-template-rows: auto 44px auto; min-height: 180px; }

.qr-item-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
}

.eatford-style .qr-item strong {
  min-width: 0;
  color: #20233a;
  font-size: 24px;
  line-height: 1;
  font-weight: 900;
  white-space: nowrap;
}

.qr-item-action button {
  flex: 0 0 auto;
  min-width: 76px;
  min-height: 34px;
  border: 0;
  border-radius: 999px;
  background: #ee0b79;
  box-shadow: 0 8px 18px rgba(238,11,121,.24);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
}

.qr-item-action button::before { content: "+"; margin-right: 6px; }

.eatford-bottom {
  justify-content: space-between;
  padding: 0 18px;
  background: var(--brand);
  box-shadow: 0 10px 30px rgba(151,134,103,.32);
}

.eatford-bottom strong { color: #fff; }

.qr-body .mobile-menu-tabbar {
  display: none;
}

@media (max-width: 767px) {
  .qr-body .mobile-menu-tabbar {
    display: flex !important;
  }
}

@media (max-width: 900px) {
.qr-breakfast-entry {
    grid-template-columns: 1fr;
    gap: 28px;
    margin-top: 28px;
    padding: 0 20px 22px;
  }

.qr-breakfast-copy { padding: 10px 0 0; }

.qr-breakfast-visual { min-height: 360px; }

.qr-breakfast-visual img:first-child { height: 330px; }

.qr-breakfast-visual img:last-child { height: 210px; }

.qr-breakfast-links { grid-template-columns: 1fr; }

.qr-breakfast-links img { height: 220px; }

.eatford-style { padding: 28px 20px 104px; }

.category-showcase { grid-template-columns: repeat(4, minmax(120px, 1fr)); gap: 18px; overflow-x: auto; }

.eatford-style .qr-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }

.eatford-style .qr-item { grid-template-columns: 1fr; min-height: 360px; padding: 0; }

.qr-thumb, .qr-thumb-img { width: 100%; height: 185px; }

.qr-item-copy { padding: 16px; min-height: 172px; }

.eatford-style .qr-item strong { font-size: 22px; }
}

@media (max-width: 576px) {
.qr-breakfast-entry {
    margin-top: 18px;
    padding: 0 14px 16px;
  }

.qr-breakfast-copy h1 { font-size: 38px; }

.qr-breakfast-copy > span { font-size: 16px; }

.qr-breakfast-copy div { margin: 20px 0; }

.qr-breakfast-copy a { width: 100%; }

.qr-breakfast-visual { min-height: 290px; }

.qr-breakfast-visual img:first-child { width: 84%; height: 260px; }

.qr-breakfast-visual img:last-child { width: 55%; height: 160px; border-width: 4px; }

.qr-breakfast-links { grid-template-columns: 1fr; gap: 14px; }

.qr-breakfast-links img { height: 180px; }

.qr-body { background: #fff; }

.eatford-style { padding: 0 8px 56px; }

.category-showcase {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin: 0 -8px 48px;
    padding: 0;
    overflow: hidden;
  }

.category-showcase a {
    min-width: 0;
    min-height: 134px;
    border-radius: 18px;
    gap: 8px;
    font-size: 14px;
    padding: 12px 6px;
  }

.category-showcase a.active {
    background: #dceaff;
    box-shadow: inset 0 -2px 0 #1e2b49, 0 10px 20px rgba(31,35,54,.08);
  }

.eatford-style .qr-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

.eatford-style .qr-item {
    grid-template-columns: 1fr;
    min-height: 0;
    border-radius: 8px;
    padding: 0;
    box-shadow: 0 4px 14px rgba(31,35,54,.06);
  }

.qr-thumb, .qr-thumb-img { width: 100%; height: 150px; font-size: 34px; }

.qr-item-copy { padding: 12px 10px 10px; min-height: 142px; grid-template-rows: auto 38px auto; }

.eatford-style .qr-item h3 { font-size: 16px; margin-bottom: 5px; }

.eatford-style .qr-item p {
  min-height: 44px;
  max-height: 44px;
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
  color: #747891;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.eatford-style .qr-item strong { font-size: 18px; }

.qr-item-action { margin-top: 12px; gap: 6px; align-items: center; }

.qr-item-action button { min-width: 58px; min-height: 28px; padding: 0 8px; font-size: 11px; box-shadow: 0 5px 12px rgba(238,11,121,.20); }

.qr-item-action button::before { content: "+"; margin-right: 6px; }

.eatford-bottom { display: none; }

.qr-body .menu-footer { margin-bottom: 0; }
}

/* QR menu Vegist-style redesign */
.qr-body {
  background: #fff;
  color: #222;
  font-family: var(--font);
}

.qr-desktop-header {
  background: #fff;
  color: #212529;
  border-bottom: 1px solid #e2e2e2;
  font-family: var(--font);
}

.qr-header-topline {
  height: 46px;
  padding: 0 max(40px, calc((100vw - 1720px) / 2 + 40px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #2f2f2f;
  color: #fff;
}

.qr-header-topline span,
.qr-header-topline a {
  color: #fff;
  font-size: 18px;
  line-height: 1;
  font-weight: 500;
  text-decoration: none;
}

.qr-header-topline nav {
  height: 100%;
  display: flex;
  align-items: stretch;
}

.qr-header-topline nav a {
  min-width: 132px;
  padding: 0 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid rgba(255,255,255,.14);
}

.qr-header-topline nav a:last-child {
  border-right: 1px solid rgba(255,255,255,.14);
}

.qr-header-brandline {
  min-height: 118px;
  padding: 0 max(40px, calc((100vw - 1720px) / 2 + 40px));
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  border-bottom: 1px solid #e8e8e8;
}

.qr-header-phone {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #333;
  font-size: 21px;
  font-weight: 400;
  text-decoration: none;
}

.qr-header-phone span {
  color: #d9a64d;
  font-size: 26px;
}

.qr-header-wordmark {
  display: inline-grid;
  justify-items: center;
  color: #212529;
  text-decoration: none;
}

.qr-header-wordmark span {
  width: 28px;
  height: 28px;
  border-radius: 8px 8px 12px 12px;
  background: linear-gradient(135deg, #f5ab1e, #d88a23);
  clip-path: polygon(20% 10%, 80% 10%, 92% 35%, 74% 92%, 26% 92%, 8% 35%);
}

.qr-header-wordmark strong {
  margin-top: 2px;
  color: #212529;
  font-size: 39px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.5px;
}

.qr-header-icons {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 28px;
}

.qr-header-icons a,
.qr-header-icons button {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  position: relative;
  display: inline-grid;
  place-items: center;
  color: #111;
  text-decoration: none;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.qr-header-icons em {
  position: absolute;
  right: -12px;
  top: -8px;
  min-width: 23px;
  height: 23px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #f5ab1e;
  color: #fff;
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
}

.qr-header-menuline {
  min-height: 76px;
  padding: 0 max(40px, calc((100vw - 1720px) / 2 + 40px));
  display: grid;
  grid-template-columns: minmax(0, 1fr) 514px;
  align-items: center;
  gap: 36px;
  background: #fff;
}

.qr-header-menuline nav {
  display: flex;
  align-items: center;
  gap: 28px;
  min-width: 0;
}

.qr-header-menuline nav a {
  position: relative;
  color: #212529;
  text-decoration: none;
  font-size: 18px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: .2px;
  white-space: nowrap;
}

.qr-header-menuline nav small {
  position: absolute;
  right: -25px;
  top: -18px;
  padding: 4px 7px;
  border-radius: 4px;
  background: #dc3545;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}

.qr-header-search {
  height: 55px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 58px;
  align-items: center;
  border: 1px solid #e2e2e2;
  background: #fff;
}

.qr-header-search input {
  width: 100%;
  height: 100%;
  padding: 0 18px;
  border: 0;
  outline: 0;
  color: #333;
  font: 400 18px/1.4 Poppins, sans-serif;
}

.qr-header-search input::placeholder {
  color: #868686;
}

.qr-header-search span {
  display: grid;
  place-items: center;
  color: #212529;
  font-size: 30px;
  font-weight: 700;
}

.qr-vegist-topbar {
  min-height: 34px;
  padding: 0 64px;
  background: #2d2d2d;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  font-size: 13px;
  font-weight: 600;
}

.qr-vegist-topbar nav {
  display: flex;
  align-items: center;
  gap: 34px;
}

.qr-vegist-topbar a {
  color: #fff;
  text-decoration: none;
}

.qr-body .menu-app-header {
  height: 92px;
  padding: 0 64px;
  grid-template-columns: 220px 1fr 420px;
  background: #fff;
  border-bottom: 1px solid #ececec;
  box-shadow: none;
}

.qr-body .menu-logo {
  color: #111;
  justify-self: center;
  font-size: 23px;
  gap: 2px;
}

.qr-body .menu-logo span,
.qr-body .menu-logo strong {
  color: #111;
  font-size: 24px;
  line-height: 1;
}

.qr-body .menu-logo::before {
  content: "";
  width: 26px;
  height: 26px;
  border-radius: 8px 8px 12px 12px;
  background: linear-gradient(135deg, #f2bd45, #d88a23);
  display: inline-block;
  margin-right: 6px;
  clip-path: polygon(20% 10%, 80% 10%, 92% 35%, 74% 92%, 26% 92%, 8% 35%);
}

.qr-body .menu-logo.footer-site-logo {
  width: 124px;
  min-height: 74px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 24px;
}

.qr-body .menu-logo.footer-site-logo::before {
  display: none;
  content: none;
}

.qr-body .menu-logo.footer-site-logo img {
  width: 112px;
  max-width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

.qr-body .menu-main-nav {
  justify-self: start;
  gap: 28px;
}

.qr-body .menu-main-nav a {
  color: #222;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
}

.qr-body .menu-actions {
  justify-content: end;
  gap: 14px;
}

.qr-body .menu-search {
  order: 5;
  width: 260px;
  min-height: 42px;
  background: #fff;
  border: 1px solid #e7e7e7;
  border-radius: 0;
  box-shadow: none;
}

.qr-body .menu-search input {
  background: transparent;
  border: 0;
  outline: 0 !important;
  box-shadow: none !important;
}

.qr-body .menu-lang,
.qr-body .menu-login,
.qr-body .menu-cart {
  width: 42px;
  min-width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 0;
  overflow: hidden;
  color: transparent;
  background: #fff;
  border: 0;
  box-shadow: none;
  position: relative;
}

.qr-body .menu-lang::before { content: "☰"; }

.qr-body .menu-login::before { content: "â™™"; }

.qr-body .menu-cart::before { content: "🛍"; }

.qr-body .menu-lang::before,
.qr-body .menu-login::before,
.qr-body .menu-cart::before {
  color: #242424;
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 22px;
}

.qr-breadcrumb {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: #fafafa;
  color: #9a9a9a;
  border-bottom: 1px solid #f0f0f0;
  font-size: 13px;
}

.qr-breadcrumb a {
  color: #8a8a8a;
  text-decoration: none;
}

.qr-breadcrumb strong {
  color: #777;
  font-weight: 600;
}

.qr-body .qr-shell.eatford-style {
  max-width: 1210px;
  padding: 76px 28px 0;
}

.qr-collection-title {
  margin-bottom: 22px;
}

.qr-collection-title h1 {
  margin: 0;
  color: #222;
  font-size: 20px;
  font-weight: 800;
}

.qr-collection-title span {
  font-weight: 800;
}

.qr-collection-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 34px;
  align-items: start;
}

.qr-collection-products {
  min-width: 0;
}

.qr-filter-sidebar {
  display: grid;
  gap: 0;
  padding-top: 2px;
}

.qr-filter-sidebar h2 {
  margin: 0 0 18px;
  color: #333;
  font-size: 15px;
  font-weight: 900;
}

.qr-filter-sidebar a {
  min-height: 32px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  color: #6f6f6f;
  text-decoration: none;
  font-size: 13px;
  border-bottom: 1px solid #f1f1f1;
}

.qr-filter-sidebar a span {
  width: 12px;
  height: 12px;
  border: 1px solid #e6e6e6;
  background: #fff;
}

.qr-filter-sidebar a.active span {
  background: #efa928;
  border-color: #efa928;
}

.qr-filter-sidebar a strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.qr-filter-sidebar a em {
  font-style: normal;
  color: #444;
}

.qr-sidebar-promo {
  min-height: 260px;
  margin-top: 28px;
  padding: 28px 18px;
  display: grid;
  place-items: end center;
  align-content: end;
  color: #fff;
  text-align: center;
  background: #31251d;
  position: relative;
  overflow: hidden;
}

.qr-sidebar-promo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .48;
}

.qr-sidebar-promo strong,
.qr-sidebar-promo small {
  position: relative;
  z-index: 1;
}

.qr-sidebar-promo strong {
  font-size: 20px;
  font-weight: 900;
}

.qr-sidebar-promo small {
  font-size: 12px;
  font-weight: 700;
}

.qr-collection-banner {
  min-height: 205px;
  margin-bottom: 42px;
  padding: 36px 56px;
  display: grid;
  grid-template-columns: minmax(220px, .7fr) minmax(260px, 1fr) 76px;
  align-items: center;
  gap: 24px;
  background: #f7f5ef;
  position: relative;
  overflow: hidden;
}

.qr-collection-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 8% 24%, rgba(226, 175, 65, .12), transparent 22%),
    linear-gradient(90deg, rgba(255,255,255,.78), rgba(255,255,255,.15));
  pointer-events: none;
}

.qr-collection-banner > * {
  position: relative;
  z-index: 1;
}

.qr-collection-banner span {
  display: block;
  margin-bottom: 8px;
  color: #b98a22;
  font-size: 13px;
  font-weight: 700;
}

.qr-collection-banner h2 {
  margin: 0 0 14px;
  color: #222;
  font-size: 30px;
  line-height: 1.08;
  font-weight: 900;
}

.qr-collection-banner a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 18px;
  background: #efa928;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  text-transform: uppercase;
}

.qr-collection-banner img {
  width: 100%;
  height: 160px;
  object-fit: contain;
  display: block;
}

.qr-collection-banner b {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: #f0aa2a;
  color: #fff;
  display: grid;
  place-items: center;
  text-align: center;
  font-size: 15px;
  line-height: 1.05;
  transform: rotate(-14deg);
}

.qr-body .category-showcase {
  display: none;
  grid-template-columns: repeat(9, minmax(90px, 1fr));
  gap: 8px;
  margin: 0 0 34px;
  border-bottom: 1px solid #ececec;
  padding-bottom: 22px;
}

.qr-body .category-showcase a {
  min-height: 96px;
  padding: 14px 8px;
  border: 1px solid #f0f0f0;
  border-radius: 0;
  background: #fafafa;
  box-shadow: none;
  gap: 8px;
}

.qr-body .category-showcase a.active {
  background: #fff;
  border-color: #efa928;
  box-shadow: inset 0 -3px 0 #efa928;
}

.qr-body .category-plate-img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  filter: drop-shadow(0 10px 14px rgba(0,0,0,.12));
}

.qr-body .category-showcase strong {
  color: #252525;
  font-size: 12px;
  line-height: 1.25;
  text-align: center;
}

.qr-vegist-toolbar {
  min-height: 58px;
  margin: 0 0 54px;
  padding: 0 0 20px;
  display: grid;
  grid-template-columns: 140px 1fr 280px;
  align-items: center;
  gap: 20px;
  border-bottom: 1px solid #ececec;
}

.qr-products-anchor {
  display: block;
  height: 1px;
  margin-top: -1px;
}

.qr-vegist-toolbar button {
  justify-self: center;
  min-height: 36px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #222;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.qr-vegist-toolbar button::before {
  content: none;
}

.qr-vegist-toolbar button .material-icons {
  color: #275A53;
  font-size: 18px;
  line-height: 1;
}

.qr-vegist-toolbar span {
  color: #777;
  font-size: 13px;
}

.qr-vegist-toolbar label {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 12px;
  color: #222;
  font-size: 13px;
  font-weight: 800;
}

.qr-vegist-toolbar select {
  min-height: 38px;
  border: 0;
  background: transparent;
  color: #333;
  font: inherit;
  font-weight: 500;
}

.qr-body .menu-section-head {
  display: none;
}

.qr-body .eatford-style .qr-list {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 58px 34px;
}

.qr-body .eatford-style .qr-item {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: #fff;
  min-height: 0;
  padding: 0;
  overflow: visible;
}

.qr-body .qr-thumb-img {
  height: 230px;
  width: 100%;
  object-fit: contain;
  background: #fff;
  padding: 8px;
  transition: transform .24s ease;
}

.qr-body .bowl-builder-card {
  grid-column: 1 / -1;
  border: 0;
  border-radius: 0;
  background: #f4fbf7;
  box-shadow: none;
}

.qr-body .qr-item:hover .qr-thumb-img {
  transform: translateY(-3px);
}

.qr-body .qr-item-copy {
  min-height: 0;
  padding: 12px 0 0;
  display: grid;
  grid-template-rows: auto auto minmax(36px, auto) auto auto;
}

.qr-body .eatford-style .qr-item h3 {
  margin: 0 0 8px;
  color: #2d2d2d;
  font-size: 15px;
  line-height: 1.35;
  font-weight: 800;
}

.qr-rating {
  margin-bottom: 8px;
  color: #f6b800;
  font-size: 12px;
  letter-spacing: 1px;
  white-space: nowrap;
}

.qr-rating span {
  color: #9b9b9b;
  letter-spacing: 0;
}

.qr-body .eatford-style .qr-item p {
  min-height: 36px;
  max-height: 36px;
  color: #777;
  font-size: 12px;
  line-height: 18px;
  -webkit-line-clamp: 2;
}

.qr-card-icons {
  display: flex;
  gap: 8px;
  margin: 13px 0 12px;
}

.qr-card-icons span {
  width: 38px;
  height: 34px;
  display: grid;
  place-items: center;
  background: #fff;
  color: #222;
  box-shadow: 0 4px 14px rgba(0,0,0,.08);
  font-size: 15px;
}

.qr-body .qr-item-action {
  margin-top: 0;
  align-items: end;
  gap: 8px;
}

.qr-body .eatford-style .qr-item strong {
  color: #222;
  font-size: 16px;
  font-weight: 900;
}

.qr-body .qr-item-action button {
  min-width: 58px;
  min-height: 32px;
  border-radius: 0;
  background: #efa928;
  color: #fff;
  box-shadow: none;
  font-size: 12px;
  font-weight: 900;
}

.qr-body .qr-item-action button::before {
  content: "🛍";
  margin-right: 5px;
  font-size: 11px;
}

.qr-body .menu-footer {
  margin-top: 110px;
  background: #fff;
  color: #333;
  border-top: 1px solid #eee;
}

.qr-body .menu-footer-inner {
  max-width: 1210px;
  grid-template-columns: 1.2fr 1fr 1fr;
  padding: 62px 28px;
}

.qr-body .menu-footer p,
.qr-body .menu-footer a,
.qr-body .menu-footer h3 {
  color: #555;
}

.qr-body .menu-footer-bottom {
  background: #fff;
  border-top: 1px solid #eee;
  color: #777;
}

.qr-body .menu-footer-bottom a {
  color: #777;
}

.qr-category-toggle {
  display: none;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 26px 0 22px;
  border: 2px solid rgba(39, 90, 83, .16);
  border-radius: 999px;
  background: #fff;
  color: #275a53;
  font: inherit;
  font-size: 14px;
  font-weight: 950;
  letter-spacing: 0;
  box-shadow: 0 10px 24px rgba(39, 90, 83, .08);
  cursor: pointer;
  position: relative;
  z-index: 1;
  overflow: hidden;
  appearance: none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, color .18s ease;
}

.qr-collection-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
}

.qr-selected-category-name {
  display: none;
  justify-items: center;
  gap: 2px;
  padding: 8px 22px 10px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 12% 20%, rgba(230,201,122,.42), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(244,251,248,.86));
  border: 1px solid rgba(39,90,83,.16);
  box-shadow: 0 14px 32px rgba(39,90,83,.12), inset 0 1px 0 rgba(255,255,255,.9);
  overflow: hidden;
  position: relative;
  animation: selectedCategoryPop .7s cubic-bezier(.18,.9,.22,1.25) both, selectedCategoryFloat 3.6s ease-in-out .8s infinite;
}

@media (max-width: 767px) {
  .qr-selected-category-name {
    display: inline-grid;
  }
}

.qr-selected-category-name::before {
  content: "";
  position: absolute;
  inset: -40% -18%;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.78) 46%, transparent 62%);
  transform: translateX(-80%) rotate(8deg);
  animation: selectedCategoryShine 2.4s ease-in-out .5s infinite;
  pointer-events: none;
}

.qr-selected-category-name span {
  color: #9a7b34;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.qr-selected-category-name strong {
  position: relative;
  color: #275a53;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(20px, 3vw, 34px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: .01em;
  background: linear-gradient(90deg, #275a53, #0f766e, #a87924, #275a53);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 10px 24px rgba(39,90,83,.1);
  animation: selectedCategoryTextFlow 3.2s ease-in-out infinite;
  z-index: 1;
}

.qr-selected-category-name strong::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -5px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #e6c97a, transparent);
  animation: selectedCategoryLine 1.2s ease-in-out infinite;
}

@keyframes qrTitleSoftReveal { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes qrTitleFadeUp { from { opacity: 0; transform: translateY(22px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes qrTitleSlideLeft { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: translateX(0); } }
@keyframes qrTitleSlideRight { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: translateX(0); } }
@keyframes qrTitleScalePop { 0% { opacity: 0; transform: scale(.78); } 62% { opacity: 1; transform: scale(1.07); } 100% { transform: scale(1); } }
@keyframes qrTitleUnderlineSweep { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }
@keyframes qrTitleShinePass { 0% { transform: translateX(-120%) rotate(8deg); opacity: 0; } 45% { opacity: .85; } 100% { transform: translateX(120%) rotate(8deg); opacity: 0; } }
@keyframes qrTitleLetterBreathe { 0%,100% { letter-spacing: .01em; } 50% { letter-spacing: .08em; } }
@keyframes qrTitleBlurFocus { from { opacity: 0; filter: blur(10px); transform: translateY(6px); } to { opacity: 1; filter: blur(0); transform: translateY(0); } }
@keyframes qrTitleFlipSoft { from { opacity: 0; transform: perspective(420px) rotateX(62deg); } to { opacity: 1; transform: perspective(420px) rotateX(0); } }
@keyframes qrTitleWaveRise { 0% { opacity: 0; transform: translateY(18px) skewY(4deg); } 65% { opacity: 1; transform: translateY(-3px) skewY(-1deg); } 100% { transform: translateY(0) skewY(0); } }
@keyframes qrTitlePulseGlow { 0%,100% { box-shadow: 0 12px 26px rgba(39,90,83,.10); } 50% { box-shadow: 0 18px 40px rgba(39,90,83,.25), 0 0 0 6px rgba(230,201,122,.16); } }
@keyframes qrTitleRibbonSlide { from { clip-path: inset(0 100% 0 0 round 999px); } to { clip-path: inset(0 0 0 0 round 999px); } }
@keyframes qrTitleStampIn { 0% { opacity: 0; transform: scale(1.28) rotate(-3deg); } 55% { opacity: 1; transform: scale(.96) rotate(1deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes qrTitleSplitMask { from { clip-path: polygon(50% 0,50% 0,50% 100%,50% 100%); opacity: .2; } to { clip-path: polygon(0 0,100% 0,100% 100%,0 100%); opacity: 1; } }
@keyframes qrTitleBounceSoft { 0% { opacity: 0; transform: translateY(-12px); } 45% { opacity: 1; transform: translateY(5px); } 70% { transform: translateY(-2px); } 100% { transform: translateY(0); } }
@keyframes qrTitleRotateIn { from { opacity: 0; transform: rotate(-4deg) translateY(10px); } to { opacity: 1; transform: rotate(0) translateY(0); } }
@keyframes qrTitleGradientFlow { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes qrTitleTypeLine { from { max-width: 0; } to { max-width: 22ch; } }
@keyframes qrTitleFocusZoom { from { opacity: 0; transform: scale(1.14); filter: blur(5px); } to { opacity: 1; transform: scale(1); filter: blur(0); } }

.qr-selected-category-name[class*="qr-title-anim-"] {
  will-change: transform, opacity, filter;
}
.qr-selected-category-name.qr-title-anim-soft-reveal { animation: qrTitleSoftReveal .65s ease both; }
.qr-selected-category-name.qr-title-anim-fade-up { animation: qrTitleFadeUp .7s cubic-bezier(.2,.85,.2,1) both; }
.qr-selected-category-name.qr-title-anim-slide-left { animation: qrTitleSlideLeft .62s ease both; }
.qr-selected-category-name.qr-title-anim-slide-right { animation: qrTitleSlideRight .62s ease both; }
.qr-selected-category-name.qr-title-anim-scale-pop { animation: qrTitleScalePop .72s cubic-bezier(.18,.9,.22,1.25) both; }
.qr-selected-category-name.qr-title-anim-underline-sweep strong::after { transform-origin: left; animation: qrTitleUnderlineSweep .75s ease both; }
.qr-selected-category-name.qr-title-anim-shine-pass::before { animation: qrTitleShinePass 1.8s ease-in-out infinite; }
.qr-selected-category-name.qr-title-anim-letter-breathe strong { animation: selectedCategoryTextFlow 3.2s ease-in-out infinite, qrTitleLetterBreathe 2.4s ease-in-out infinite; }
.qr-selected-category-name.qr-title-anim-blur-focus { animation: qrTitleBlurFocus .78s ease both; }
.qr-selected-category-name.qr-title-anim-flip-soft { animation: qrTitleFlipSoft .72s ease both; transform-origin: 50% 100%; }
.qr-selected-category-name.qr-title-anim-wave-rise { animation: qrTitleWaveRise .8s ease both; }
.qr-selected-category-name.qr-title-anim-pulse-glow { animation: qrTitleSoftReveal .55s ease both, qrTitlePulseGlow 2.2s ease-in-out .65s infinite; }
.qr-selected-category-name.qr-title-anim-ribbon-slide { animation: qrTitleRibbonSlide .72s cubic-bezier(.2,.9,.2,1) both; }
.qr-selected-category-name.qr-title-anim-stamp-in { animation: qrTitleStampIn .72s cubic-bezier(.2,.9,.2,1) both; }
.qr-selected-category-name.qr-title-anim-split-mask { animation: qrTitleSplitMask .8s ease both; }
.qr-selected-category-name.qr-title-anim-bounce-soft { animation: qrTitleBounceSoft .75s ease both; }
.qr-selected-category-name.qr-title-anim-rotate-in { animation: qrTitleRotateIn .72s ease both; }
.qr-selected-category-name.qr-title-anim-gradient-flow strong { animation: qrTitleGradientFlow 2.2s ease-in-out infinite; }
.qr-selected-category-name.qr-title-anim-type-line strong { display: inline-block; overflow: hidden; white-space: nowrap; animation: qrTitleTypeLine 1s steps(18,end) both; }
.qr-selected-category-name.qr-title-anim-focus-zoom { animation: qrTitleFocusZoom .72s ease both; }

@media (prefers-reduced-motion: reduce) {
  .qr-selected-category-name,
  .qr-selected-category-name::before,
  .qr-selected-category-name strong,
  .qr-selected-category-name strong::after {
    animation: none !important;
  }
}

.qr-category-toggle:focus {
  outline: 0;
  box-shadow: 0 0 0 4px rgba(39, 90, 83, .12);
}

.qr-category-toggle:hover {
  border-color: rgba(39, 90, 83, .36);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(39, 90, 83, .18);
}

.qr-category-toggle:active {
  transform: scale(.96);
}

.qr-category-toggle::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(135deg, #275a53 0%, #1f4943 100%);
  transform: translateX(-104%);
  transition: transform .28s cubic-bezier(.7, 0, .2, 1);
  z-index: 0;
}

.qr-category-toggle::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: inherit;
  border: 1px solid rgba(230, 201, 122, .45);
  opacity: 0;
  transform: scale(.82);
  pointer-events: none;
  z-index: 0;
  transition: opacity .2s ease, transform .2s ease;
}

.qr-category-toggle:hover::before,
.qr-category-toggle.is-open::before {
  transform: translateX(0);
}

.qr-category-toggle:hover::after,
.qr-category-toggle.is-open::after {
  opacity: 1;
  transform: scale(1);
}

.qr-category-toggle.animate::after {
  animation: categoryButtonPulse .38s ease-out forwards;
}

@media (max-width: 767px) {
.qr-category-toggle {
    display: inline-flex;
  }
}

/* Final QR product title fitting */
.qr-body .eatford-style .qr-item h3 {
  width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
  text-wrap: balance;
  letter-spacing: 0;
}

.qr-body .eatford-style .qr-item h3 {
  font-size: clamp(15px, 1vw, 17px) !important;
  line-height: 1.22 !important;
  min-height: 42px !important;
}

@media (max-width: 767px) {
.qr-body .eatford-style .qr-item h3 {
    font-size: clamp(11px, 3.15vw, 13px) !important;
    line-height: 1.22 !important;
    min-height: 34px !important;
    -webkit-line-clamp: 2;
  }
}

.qr-category-toggle strong,
.qr-nav-category-toggle strong {
  position: relative;
  z-index: 1;
  font: inherit;
  white-space: nowrap;
}

.qr-category-toggle-icon {
  width: 22px;
  height: 2px;
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  border-radius: 999px;
  background: currentColor;
  z-index: 1;
  transition: background-color .16s ease, transform .22s ease;
}

.qr-category-toggle-icon::before,
.qr-category-toggle-icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transition: transform .22s ease, width .18s ease;
}

.qr-category-toggle-icon::before {
  transform: translateY(-7px);
}

.qr-category-toggle-icon::after {
  width: 15px;
  transform: translateY(7px);
}

.qr-category-toggle:hover .qr-category-toggle-icon::after,
.qr-nav-category-toggle:hover .qr-category-toggle-icon::after {
  width: 22px;
}

.qr-category-toggle.is-open {
  color: #fff;
  border-color: rgba(230, 201, 122, .5);
  box-shadow: 0 12px 28px rgba(39, 90, 83, .18);
}

.qr-category-toggle.is-open .qr-category-toggle-icon,
.qr-nav-category-toggle.is-open .qr-category-toggle-icon {
  background: transparent;
}

.qr-category-toggle.is-open .qr-category-toggle-icon::before,
.qr-nav-category-toggle.is-open .qr-category-toggle-icon::before {
  transform: translateY(0) rotate(45deg);
}

.qr-category-toggle.is-open .qr-category-toggle-icon::after,
.qr-nav-category-toggle.is-open .qr-category-toggle-icon::after {
  width: 22px;
  transform: translateY(0) rotate(-45deg);
}

.qr-nav-category-toggle {
  display: none;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 18px;
  border: 2px solid rgba(39, 90, 83, .16);
  border-radius: 999px;
  background: #fff;
  color: #275a53;
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  box-shadow: 0 10px 24px rgba(39, 90, 83, .08);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  transform: translateY(-50%) scale(.94);
  transition: opacity .22s ease, transform .22s ease, border-color .16s ease, color .16s ease;
}

.qr-nav-category-toggle:hover {
  color: #fff;
  border-color: rgba(39, 90, 83, .36);
}

.qr-nav-category-toggle::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(135deg, #275a53 0%, #1f4943 100%);
  transform: translateX(-104%);
  transition: transform .28s cubic-bezier(.7, 0, .2, 1);
  z-index: 0;
}

.qr-nav-category-toggle:hover::before,
.qr-nav-category-toggle.is-open::before {
  transform: translateX(0);
}

.qr-nav-category-toggle.is-open {
  color: #fff;
  border-color: rgba(230, 201, 122, .5);
}

.qr-category-panel {
  display: none;
}

.qr-category-panel.is-open {
  display: block;
}

.qr-category-panel.is-open .category-showcase {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 980px) {
.qr-header-topline {
    display: none;
  }

.qr-header-brandline {
    min-height: auto;
    padding: 18px 20px;
    grid-template-columns: 1fr auto;
    gap: 18px;
  }

.qr-header-phone {
    display: none;
  }

.qr-header-wordmark {
    justify-self: start;
  }

.qr-header-wordmark strong {
    font-size: 27px;
  }

.qr-header-icons {
    gap: 16px;
  }

.qr-header-menuline {
    min-height: auto;
    padding: 0 20px 18px;
    display: block;
  }

.qr-header-menuline nav {
    display: none;
  }

.qr-header-search {
    height: 44px;
    grid-template-columns: minmax(0, 1fr) 48px;
    border-radius: 50px;
  }

.qr-header-search input {
    font-size: 14px;
  }

.qr-vegist-topbar {
    display: none;
  }

.qr-body .menu-app-header {
    height: auto;
    display: grid;
    grid-template-columns: 1fr auto;
    padding: 20px 18px 14px;
  }

.qr-body .menu-logo {
    justify-self: start;
    width: auto;
    margin: 0;
  }

.qr-body .menu-main-nav {
    display: none;
  }

.qr-body .menu-actions {
    display: flex;
    grid-column: 1 / -1;
    width: 100%;
    margin-top: 16px;
    flex-wrap: nowrap;
    align-items: center;
  }

.qr-body .menu-search {
    order: 0;
    width: auto;
    min-width: 0;
    flex: 1 1 auto;
    border-radius: 4px;
    background: #f5f5f7;
  }

.qr-body .menu-lang,
  .qr-body .menu-login {
    display: none;
  }

.qr-breadcrumb {
    display: none;
  }

.qr-body .qr-shell.eatford-style {
    padding: 30px 14px 0;
  }

.qr-collection-layout {
    display: block;
  }

.qr-filter-sidebar {
    display: none;
  }

.qr-collection-banner {
    grid-template-columns: 1fr 1fr 54px;
    min-height: 122px;
    padding: 20px;
    margin-bottom: 26px;
  }

.qr-collection-banner h2 {
    font-size: 18px;
  }

.qr-collection-banner img {
    height: 104px;
  }

.qr-collection-banner b {
    width: 52px;
    height: 52px;
    font-size: 12px;
  }

.qr-body .category-showcase {
    display: none;
  }

.qr-vegist-toolbar {
    grid-template-columns: auto 1fr;
    margin-bottom: 34px;
  }

.qr-vegist-toolbar label {
    grid-column: 1 / -1;
    justify-content: start;
  }

.qr-body .eatford-style .qr-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 38px 18px;
  }
}

@media (max-width: 576px) {
.qr-header-brandline {
    padding: 14px 16px;
  }

.qr-header-icons a,
  .qr-header-icons button {
    width: 24px;
    height: 24px;
    font-size: 23px;
  }

.qr-header-icons em {
    min-width: 19px;
    height: 19px;
    right: -9px;
    top: -7px;
    font-size: 11px;
  }

.qr-header-menuline {
    padding: 0 16px 14px;
  }

.qr-body .menu-app-header {
    padding: 14px 10px;
  }

.qr-body .menu-logo span,
  .qr-body .menu-logo strong {
    font-size: 23px;
  }

.qr-body .menu-logo {
    justify-self: center;
  }

.qr-body .menu-cart {
    display: none;
  }

.qr-collection-title {
    margin: 8px 0 18px;
  }

.qr-collection-banner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 116px 46px;
    min-height: 112px;
    padding: 16px;
    margin-bottom: 26px;
  }

.qr-collection-banner span {
    font-size: 10px;
  }

.qr-collection-banner h2 {
    font-size: 16px;
    line-height: 1.2;
  }

.qr-collection-banner a {
    min-height: 28px;
    padding: 0 12px;
    font-size: 10px;
  }

.qr-collection-banner img {
    height: 82px;
  }

.qr-collection-banner b {
    width: 44px;
    height: 44px;
    font-size: 10px;
  }

.qr-body .category-showcase {
    display: none;
  }

.qr-body .category-plate-img {
    width: 36px;
    height: 36px;
  }

.qr-vegist-toolbar {
    min-height: 48px;
    margin-bottom: 30px;
    padding-bottom: 14px;
  }

.qr-body .eatford-style .qr-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 42px 14px;
  }

.qr-body .qr-thumb-img {
    height: 150px;
    padding: 4px;
  }

.qr-body .qr-item-copy {
    padding-top: 10px;
  }

.qr-body .eatford-style .qr-item h3 {
    font-size: 13px;
    min-height: 35px;
  }

.qr-rating {
    font-size: 10px;
    letter-spacing: 0;
  }

.qr-body .eatford-style .qr-item p {
    min-height: 36px;
    max-height: 36px;
    font-size: 10px;
    line-height: 18px;
  }

.qr-card-icons {
    justify-content: center;
  }

.qr-card-icons span {
    width: 34px;
    height: 32px;
  }

.qr-body .eatford-style .qr-item strong {
    font-size: 14px;
  }

.qr-body .qr-item-action button {
    min-width: 48px;
    min-height: 28px;
    font-size: 10px;
    padding: 0 7px;
  }

.qr-body .menu-footer {
    margin-bottom: 70px;
  }
}

/* QR product cards - Eatford style / vcard01 fallback */
.qr-body .eatford-style .qr-list {
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 34px;
}

.qr-body .eatford-style .qr-item {
  border: 1px solid #edf0f5;
  border-radius: 20px;
  box-shadow: 0 2px 10px rgba(31,35,54,.035);
  background: #fff;
  min-height: 430px;
  height: 430px;
  padding: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 235px 195px;
  transition: box-shadow .2s ease, transform .2s ease;
}

.qr-body .eatford-style .qr-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(31,35,54,.08);
}

.qr-body .eatford-style .qr-item.is-selected {
  border-color: rgba(39, 90, 83, .34);
  background: linear-gradient(180deg, #fff 0%, #f2faf7 100%);
  box-shadow: 0 14px 30px rgba(39, 90, 83, .14);
}

.qr-body .qr-thumb-img {
  height: 235px;
  width: 100%;
  object-fit: contain;
  background: #fff;
  padding: 14px 18px 6px;
}

.qr-body .qr-item-copy {
  min-height: 195px;
  padding: 18px 20px;
  display: grid;
  grid-template-rows: 52px 52px 1fr auto;
  align-content: start;
}

.qr-body .eatford-style .qr-item h3 {
  min-height: 48px;
  margin: 0;
  color: #20233a;
  font-size: 18px;
  line-height: 1.35;
  font-weight: 900;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.qr-body .eatford-style .qr-item p {
  min-height: 46px;
  max-height: 46px;
  margin: 0;
  color: #777b8d;
  font-size: 14px;
  line-height: 23px;
  -webkit-line-clamp: 2;
}

.qr-card-icons,
.qr-rating {
  display: none;
}

.qr-body .qr-item-action {
  margin-top: 0;
  align-items: center;
  gap: 12px;
  align-self: end;
}

.qr-body .eatford-style .qr-item strong {
  color: #20233a;
  font-size: 24px;
  line-height: 1;
  font-weight: 900;
}

.qr-body .qr-item-action button {
  min-width: 78px;
  min-height: 38px;
  border-radius: 999px;
  background: #fff;
  color: #171a27;
  box-shadow: 0 7px 18px rgba(31,35,54,.10);
  font-size: 14px;
  font-weight: 900;
  transition: transform .18s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease;
}

.qr-body .qr-item-action button::before {
  content: "🛍";
  margin-right: 7px;
  color: #ef0b79;
  font-size: 13px;
}

.qr-body .qr-item-action button.is-added {
  transform: scale(1.08);
  background: #ef0b79;
  color: #fff;
  box-shadow: 0 10px 24px rgba(239,11,121,.28);
}

.qr-body .qr-item-action button.is-added::before {
  color: #fff;
}

@media (max-width: 1023px) {
.qr-body .eatford-style .qr-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }
}

@media (max-width: 767px) {
.qr-body .eatford-style .qr-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

.qr-body .eatford-style .qr-item {
    min-height: 330px;
    height: 330px;
    grid-template-rows: 150px 180px;
    border-radius: 12px;
  }

.qr-body .qr-thumb-img {
    height: 150px;
    padding: 8px 10px 4px;
  }

.qr-body .qr-item-copy {
    min-height: 180px;
    padding: 12px;
    grid-template-rows: 42px 40px 1fr auto;
  }

.qr-body .eatford-style .qr-item h3 {
    min-height: 36px;
    margin-bottom: 0;
    font-size: 13px;
  }

.qr-body .eatford-style .qr-item p {
    min-height: 36px;
    max-height: 36px;
    font-size: 10px;
    line-height: 18px;
  }

.qr-body .eatford-style .qr-item strong {
    font-size: 18px;
  }

.qr-body .qr-item-action {
    margin-top: 12px;
  }

.qr-body .qr-item-action button {
    min-width: 58px;
    min-height: 28px;
    padding: 0 8px;
    font-size: 11px;
  }
}

/* QR product cards - CodePen mfg888 inspired / current vcard02 */
.qr-body .eatford-style .qr-list {
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 30px;
  align-items: stretch;
}

.qr-body .eatford-style .qr-item {
  border: 0;
  border-radius: 18px;
  box-shadow: 0 8px 22px rgba(31, 35, 54, .10);
  background: #fff;
  min-height: 430px;
  height: 430px;
  padding: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 260px 170px;
  transform-origin: center;
  transition: transform .5s ease, box-shadow .5s ease, border-color .3s ease, background-color .3s ease;
}

.qr-body .eatford-style .qr-item:hover {
  transform: scale(1.045);
  box-shadow: 0 18px 34px rgba(31, 35, 54, .18);
}

.qr-body .eatford-style .qr-item.is-selected {
  background: #f2faf7;
  box-shadow: 0 20px 36px rgba(39, 90, 83, .16);
}

.qr-body .qr-thumb-img {
  height: 260px;
  width: 100%;
  object-fit: contain;
  background: #fff;
  padding: 18px 18px 8px;
  transition: transform .5s ease;
}

.qr-body .eatford-style .qr-item:hover .qr-thumb-img {
  transform: scale(1.035);
}

.qr-body .qr-item-copy {
  min-height: 170px;
  padding: 14px 18px 18px;
  display: grid;
  grid-template-rows: 32px 46px 1fr auto;
  align-content: start;
}

.qr-body .eatford-style .qr-item h3 {
  min-height: 30px;
  margin: 0;
  color: #111827;
  font-size: var(--qr-product-title-size, 17px);
  line-height: 1.25;
  font-weight: 900;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.qr-body .eatford-style .qr-item p {
  min-height: 42px;
  max-height: 42px;
  margin: 0;
  color: #6f7280;
  font-size: var(--qr-product-desc-size, 13px);
  line-height: 21px;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.qr-body .qr-item-action {
  margin-top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  align-self: end;
  transform: translateY(-10px);
}

.qr-body .eatford-style .qr-item strong {
  color: #20233a;
  font-size: var(--qr-product-price-size, 24px);
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: 0;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 0 rgba(255,255,255,.8);
}

.qr-body .qr-price-stack {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.qr-body .qr-price-stack em {
  display: block;
  color: #6f7b8c;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.25;
}

.qr-body .qr-tea-options {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.qr-body .qr-item-action .qr-tea-option[data-add-variant] {
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 46px !important;
  padding: 8px 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  border: 1px solid rgba(39, 90, 83, .18) !important;
  border-radius: 14px !important;
  background: #f7fbf9 !important;
  color: #17202b !important;
  box-shadow: 0 8px 18px rgba(39, 90, 83, .07) !important;
  font-size: 0 !important;
  transform: none !important;
}

.qr-body .qr-item-action .qr-tea-option[data-add-variant]::before {
  display: none !important;
  content: none !important;
}

.qr-body .qr-tea-option span {
  color: #667085;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.15;
  text-align: left;
}

.qr-body .qr-tea-option strong {
  color: var(--theme-primary, #275A53) !important;
  font-size: 14px !important;
  line-height: 1 !important;
  white-space: nowrap;
}

.qr-body .qr-item-action .qr-tea-option[data-add-variant]:hover,
.qr-body .qr-item-action .qr-tea-option[data-add-variant]:focus-visible,
.qr-body .qr-item-action .qr-tea-option[data-add-variant].is-added {
  background: var(--theme-primary, #275A53) !important;
  border-color: var(--theme-primary, #275A53) !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 12px 24px rgba(39, 90, 83, .18) !important;
}

.qr-body .qr-tea-option:hover span,
.qr-body .qr-tea-option:focus-visible span,
.qr-body .qr-tea-option.is-added span {
  color: rgba(255, 255, 255, .82);
}

.qr-body .qr-tea-option:hover strong,
.qr-body .qr-tea-option:focus-visible strong,
.qr-body .qr-tea-option.is-added strong {
  color: #fff !important;
}

.qr-body .qr-item-action button {
  min-width: 42px;
  width: 42px;
  min-height: 42px;
  height: 42px;
  padding: 0;
  border-radius: 12px;
  background: #fff;
  color: #111827;
  box-shadow: 0 8px 18px rgba(31, 35, 54, .12);
  font-size: 0;
  font-weight: 900;
  transition: transform .2s ease, background-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.qr-body .qr-item-action button::before {
  content: "+";
  width: 22px;
  height: 22px;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid currentColor;
  border-radius: 7px;
  color: inherit;
  font-size: 17px;
  line-height: 1;
  font-weight: 900;
}

.qr-body .qr-item-action button:hover,
.qr-body .qr-item-action button.is-added {
  transform: scale(1.1);
  background: #f5ab1e;
  color: #fff;
  box-shadow: 0 12px 26px rgba(245, 171, 30, .34);
}

@media (max-width: 1023px) {
.qr-body .eatford-style .qr-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }
}

@media (max-width: 767px) {
.qr-body .eatford-style .qr-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

.qr-body .eatford-style .qr-item {
    min-height: 336px;
    height: 336px;
    grid-template-rows: 178px 158px;
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(31, 35, 54, .09);
  }

.qr-body .eatford-style .qr-item:hover {
    transform: none;
  }

.qr-body .qr-thumb-img {
    height: 178px;
    padding: 10px 10px 4px;
  }

.qr-body .qr-item-copy {
    min-height: 158px;
    padding: 10px 12px 18px;
    grid-template-rows: 30px 34px 1fr auto;
  }

.qr-body .eatford-style .qr-item h3 {
    min-height: 27px;
    font-size: var(--qr-mobile-title-size, 13px);
    line-height: 1.3;
  }

.qr-body .eatford-style .qr-item p {
    min-height: 34px;
    max-height: 34px;
    font-size: var(--qr-mobile-desc-size, 10px);
    line-height: 17px;
  }

.qr-body .eatford-style .qr-item strong {
    font-size: var(--qr-mobile-price-size, 18px);
    line-height: 1.1;
  }

.qr-body .qr-item-action {
    gap: 8px;
    align-items: center;
    margin-top: 0;
    transform: translateY(-12px);
  }

.qr-body .qr-tea-options {
    grid-template-columns: 1fr;
    gap: 6px;
  }

.qr-body .qr-item-action .qr-tea-option[data-add-variant] {
    min-height: 34px !important;
    padding: 6px 8px !important;
    border-radius: 11px !important;
  }

.qr-body .qr-tea-option span {
    font-size: 10px;
  }

.qr-body .qr-tea-option strong {
    font-size: 12px !important;
  }

.qr-body .qr-item-action button {
    min-width: 34px;
    width: 34px;
    min-height: 34px;
    height: 34px;
    border-radius: 10px;
  }

.qr-body .qr-item-action button::before {
    width: 18px;
    height: 18px;
    border-radius: 6px;
    font-size: 14px;
  }
}

/* QR product cards - JorgeAguilar inspired / inactive vcard03
.qr-body .eatford-style .qr-list {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 34px;
  padding-top: 18px;
}

.qr-body .eatford-style .qr-item {
  position: relative;
  isolation: isolate;
  border: 0;
  border-radius: 18px;
  background: #fff;
  min-height: 442px;
  height: 442px;
  padding: 0;
  overflow: visible;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 252px 190px;
  box-shadow: 0 16px 34px rgba(31, 35, 54, .13);
  transition: transform .32s ease, box-shadow .32s ease;
}

.qr-body .eatford-style .qr-item::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 172px;
  border-radius: 18px 18px 0 0;
  background: linear-gradient(135deg, #f5ab1e 0%, #ffe2a3 100%);
  z-index: -1;
}

.qr-body .eatford-style .qr-item:nth-child(3n + 2)::before {
  background: linear-gradient(135deg, #275a53 0%, #82b4a6 100%);
}

.qr-body .eatford-style .qr-item:nth-child(3n)::before {
  background: linear-gradient(135deg, #978667 0%, #d7c49a 100%);
}

.qr-body .eatford-style .qr-item:hover {
  transform: translateY(-10px);
  box-shadow: 0 24px 42px rgba(31, 35, 54, .18);
}

.qr-body .eatford-style .qr-item.is-selected {
  box-shadow: 0 24px 44px rgba(245, 171, 30, .24);
}

.qr-body .eatford-style .qr-item.is-selected::before {
  filter: saturate(1.18);
}

.qr-body .qr-thumb-img {
  position: relative;
  z-index: 1;
  height: 252px;
  width: 100%;
  object-fit: contain;
  object-position: center bottom;
  background: transparent;
  padding: 18px 20px 0;
  filter: drop-shadow(0 14px 14px rgba(31, 35, 54, .14));
  transition: transform .32s ease;
}

.qr-body .eatford-style .qr-item:hover .qr-thumb-img {
  transform: translateY(-12px) scale(1.05);
}

.qr-body .qr-item-copy {
  min-height: 190px;
  padding: 20px 20px 22px;
  display: grid;
  grid-template-rows: 44px 46px 1fr auto;
  align-content: start;
}

.qr-body .eatford-style .qr-item h3 {
  min-height: 38px;
  margin: 0;
  color: #161922;
  font-size: 17px;
  line-height: 1.28;
  font-weight: 900;
  text-align: center;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.qr-body .eatford-style .qr-item p {
  min-height: 40px;
  max-height: 40px;
  margin: 0;
  color: #747886;
  font-size: 13px;
  line-height: 20px;
  text-align: center;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.qr-body .qr-item-action {
  margin-top: 0;
  display: grid;
  grid-template-columns: 1fr 42px;
  align-items: center;
  gap: 14px;
  align-self: end;
  transform: none;
}

.qr-body .eatford-style .qr-item strong {
  justify-self: start;
  color: #161922;
  font-size: 25px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.qr-body .qr-item-action button {
  justify-self: end;
  min-width: 42px;
  width: 42px;
  min-height: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #161922;
  color: #fff;
  box-shadow: 0 10px 20px rgba(22, 25, 34, .18);
  font-size: 0;
  transition: transform .24s ease, background-color .24s ease, box-shadow .24s ease;
}

.qr-body .qr-item-action button::before {
  content: "";
  width: 21px;
  height: 21px;
  margin: 0;
  display: block;
  border: 0;
  border-radius: 0;
  background-color: currentColor;
  clip-path: path("M2 3h3l3 11h9l2-7H7M9 19a1.8 1.8 0 1 0 0 .1M17 19a1.8 1.8 0 1 0 0 .1");
}

.qr-body .qr-item-action button:hover,
.qr-body .qr-item-action button.is-added {
  transform: rotate(8deg) scale(1.12);
  background: #25d366;
  color: #fff;
  box-shadow: 0 14px 26px rgba(37, 211, 102, .28);
}

@media (max-width: 1023px) {
.qr-body .eatford-style .qr-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }
}

@media (max-width: 767px) {
.qr-body .eatford-style .qr-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 14px;
    padding-top: 10px;
  }

.qr-body .eatford-style .qr-item {
    min-height: 338px;
    height: 338px;
    grid-template-rows: 182px 156px;
    border-radius: 16px;
    box-shadow: 0 10px 24px rgba(31, 35, 54, .12);
  }

.qr-body .eatford-style .qr-item::before {
    height: 122px;
    border-radius: 16px 16px 0 0;
  }

.qr-body .eatford-style .qr-item:hover {
    transform: none;
  }

.qr-body .qr-thumb-img {
    height: 182px;
    padding: 10px 10px 0;
    filter: drop-shadow(0 9px 10px rgba(31, 35, 54, .12));
  }

.qr-body .eatford-style .qr-item:hover .qr-thumb-img {
    transform: none;
  }

.qr-body .qr-item-copy {
    min-height: 156px;
    padding: 12px 12px 16px;
    grid-template-rows: 34px 34px 1fr auto;
  }

.qr-body .eatford-style .qr-item h3 {
    min-height: 31px;
    font-size: 13px;
    line-height: 1.25;
  }

.qr-body .eatford-style .qr-item p {
    min-height: 32px;
    max-height: 32px;
    font-size: 10px;
    line-height: 16px;
  }

.qr-body .qr-item-action {
    grid-template-columns: 1fr 34px;
    gap: 8px;
  }

.qr-body .eatford-style .qr-item strong {
    font-size: 17px;
  }

.qr-body .qr-item-action button {
    min-width: 34px;
    width: 34px;
    min-height: 34px;
    height: 34px;
  }

.qr-body .qr-item-action button::before {
    width: 17px;
    height: 17px;
  }
}

*/

/* Araz Cafe home - Vegist inspired */
.cafe-home {
  --veg-green: #198754;
  --veg-gold: #f5ab1e;
  --veg-gold-hover: #e09b1a;
  --veg-text: #212529;
  --veg-muted: #6f6f6f;
  font-family: Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--veg-text);
  background: #fff;
  font-size: 14px;
  line-height: 1.86;
}

.cafe-home a {
  text-decoration: none;
}

.cafe-home a:focus-visible,
.cafe-home button:focus-visible,
.cafe-home input:focus-visible,
.cafe-home select:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(245, 171, 30, .1);
}

.cafe-home-page {
  font-family: Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.cafe-desktop-header {
  background: #fff;
  color: #212529;
  border-bottom: 1px solid #e2e2e2;
  font-family: Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.cafe-topline {
  height: 46px;
  padding: 0 max(40px, calc((100vw - 1720px) / 2 + 40px));
  display: flex;
  align-items: center;
  background: var(--marquee-bg, #2f2f2f);
  color: var(--marquee-text, #fff);
  overflow: hidden;
}

.cafe-ad-marquee {
  width: 100%;
  height: 100%;
  overflow: hidden;
  white-space: nowrap;
  display: flex;
  align-items: center;
  background: var(--marquee-bg, #2f2f2f);
  color: var(--marquee-text, #fff);
}

.cafe-ad-marquee > div {
  width: max-content;
  min-width: max-content;
  display: flex;
  align-items: center;
  gap: 72px;
  animation: cafeAdMarquee var(--marquee-duration, 32s) linear infinite;
  will-change: transform;
}

.cafe-ad-marquee span {
  position: relative;
  color: var(--marquee-text, #fff);
  font-size: 18px;
  line-height: 1;
  font-weight: 500;
}

.cafe-ad-marquee span::after {
  content: "";
  position: absolute;
  right: -40px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--marquee-dot, #f5ab1e);
  transform: translateY(-50%);
}

@media (min-width: 1024px) {
.cafe-ad-marquee .marquee-device-tablet,
  .cafe-ad-marquee .marquee-device-mobile { display: none; }
}

@media (min-width: 768px) and (max-width: 1023px) {
.cafe-ad-marquee .marquee-device-desktop,
  .cafe-ad-marquee .marquee-device-mobile { display: none; }
}

@media (max-width: 767px) {
.cafe-ad-marquee .marquee-device-desktop,
  .cafe-ad-marquee .marquee-device-tablet { display: none; }
}

.cafe-shopbar {
  position: relative;
  min-height: 74px;
  padding: 0 max(28px, calc((100vw - 1720px) / 2 + 40px));
  display: grid;
  grid-template-columns: minmax(260px, .8fr) minmax(520px, 1fr);
  align-items: center;
  gap: 28px;
  background: #fff;
  border-bottom: 1px solid #e2e2e2;
}

.cafe-shop-nav {
  display: flex;
  align-items: center;
  gap: 34px;
  min-width: 0;
}

.cafe-shop-nav a {
  color: #111827;
  text-decoration: none;
  font-size: 18px;
  line-height: 1;
  font-weight: 700;
  white-space: nowrap;
}

.cafe-shopbar .cafe-wordmark {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  transform: translate(-50%, -50%);
}

.cafe-shopbar .cafe-wordmark img {
  width: 112px;
  max-height: 64px;
}

.cafe-shop-actions {
  grid-column: 2;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.cafe-shop-actions .cafe-header-search {
  width: clamp(230px, 18vw, 350px);
  height: 45px;
  grid-template-columns: 48px minmax(0, 1fr);
  border-radius: 25px;
  background: #f1f2f7;
  border-color: transparent;
}

.cafe-shop-actions .cafe-header-search span {
  order: 0;
  color: #5c6277;
  font-size: 26px;
}

.cafe-shop-actions .cafe-header-search input {
  order: 1;
  padding: 0 18px 0 0;
  background: transparent;
  font-size: 16px;
}

.cafe-lang-pill {
  background: #fff;
  color: #1f2433;
  border: 1px solid #eceef4;
}

.cafe-cart-pill {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 2px solid #222945;
  background: #fff;
  color: #222945;
  transition: color .35s ease, border-color .35s ease, transform .18s ease, box-shadow .18s ease;
}

.cafe-cart-pill::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: #222945;
  z-index: -1;
  transition: width .35s ease;
}

.cafe-cart-pill:hover,
.cafe-cart-pill:focus-visible {
  color: #fff;
  border-color: #222945;
  box-shadow: 0 10px 24px rgba(34, 41, 69, .18);
}

.cafe-cart-pill:hover::after,
.cafe-cart-pill:focus-visible::after {
  width: 100%;
}

.cafe-cart-pill:active {
  transform: scale(.97);
}

.cafe-cart-pill strong,
.cafe-cart-pill em {
  position: relative;
  z-index: 2;
}

.cafe-cart-pill .compact-cart-icon {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-right: 6px;
  color: currentColor;
  flex: 0 0 auto;
}

.cafe-cart-pill .compact-cart-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.cafe-cart-pill em {
  display: none !important;
}

.cart-drawer .cart-whatsapp {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border: 1px solid rgba(37, 211, 102, .62);
  border-radius: 10px;
  background: #071b12;
  color: #25d366;
  font-weight: 900;
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
  box-shadow: 0 12px 24px rgba(37, 211, 102, .12);
  transition: color .35s ease, background .35s ease, box-shadow .35s ease, transform .2s ease;
}

.cart-drawer .cart-whatsapp:hover,
.cart-drawer .cart-whatsapp:focus-visible {
  background: #25d366;
  color: #fff;
  box-shadow: 0 0 22px rgba(37, 211, 102, .48), 0 14px 26px rgba(37, 211, 102, .22);
  outline: 0;
}

.cart-drawer .cart-whatsapp:active {
  transform: scale(.98);
}

.cart-drawer .cart-whatsapp span {
  position: absolute;
  display: block;
  pointer-events: none;
}

.cart-drawer .cart-whatsapp span:nth-child(1) {
  top: 0;
  left: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #25d366);
  animation: whatsappLineTop 1.2s linear infinite;
}

.cart-drawer .cart-whatsapp span:nth-child(2) {
  top: -100%;
  right: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent, #25d366);
  animation: whatsappLineRight 1.2s linear infinite;
  animation-delay: .3s;
}

.cart-drawer .cart-whatsapp span:nth-child(3) {
  right: -100%;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(270deg, transparent, #25d366);
  animation: whatsappLineBottom 1.2s linear infinite;
  animation-delay: .6s;
}

.cart-drawer .cart-whatsapp span:nth-child(4) {
  bottom: -100%;
  left: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(360deg, transparent, #25d366);
  animation: whatsappLineLeft 1.2s linear infinite;
  animation-delay: .9s;
}

@media (prefers-reduced-motion: reduce) {
.cart-drawer .cart-whatsapp span,
  .cart-remove > i {
    animation: none;
  }
}

@media (max-width: 767px) {
.cart-drawer.active {
    align-items: flex-end;
    justify-content: center;
  }

.cart-drawer-panel {
    width: calc(100vw - 20px);
    height: min(90dvh, 760px);
    max-height: 90dvh;
    padding: 16px 14px calc(16px + env(safe-area-inset-bottom));
    border-radius: 24px 24px 0 0;
    gap: 12px;
  }

.cart-close {
    width: 38px;
    height: 38px;
  }

.cart-drawer h2 {
    margin-top: 0;
    padding-right: 0;
    font-size: 24px;
  }

.cart-order-meta {
    gap: 8px;
    padding: 12px;
    grid-template-columns: 1fr;
  }

.cart-lines {
    max-height: none;
    padding-right: 4px;
  }

.cart-line {
    gap: 10px;
    padding: 11px;
  }

.cart-summary {
    padding-top: 12px;
  }

.cart-drawer .cart-whatsapp {
    min-height: 52px;
    font-size: 13px;
  }
}

.cafe-desktop-header > .cafe-brandline,
.cafe-desktop-header > .cafe-menuline {
  display: none;
}

.cafe-brandline {
  min-height: 118px;
  padding: 0 max(40px, calc((100vw - 1720px) / 2 + 40px));
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  border-bottom: 1px solid #e8e8e8;
}

.cafe-phone {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #333;
  font-size: 21px;
  font-weight: 400;
  text-decoration: none;
}

.cafe-phone span {
  color: #d9a64d;
  font-size: 26px;
}

.cafe-wordmark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #212529;
  text-decoration: none;
}

.cafe-wordmark img {
  width: 136px;
  max-height: 78px;
  display: block;
  object-fit: contain;
}

.cafe-header-icons {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 28px;
}

.cafe-header-icons a,
.cafe-header-icons button {
  width: 28px;
  height: 28px;
  position: relative;
  display: inline-grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: #111;
  text-decoration: none;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.cafe-header-icons em {
  position: absolute;
  right: -12px;
  top: -8px;
  min-width: 23px;
  height: 23px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #f5ab1e;
  color: #fff;
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
}

.cafe-menuline {
  min-height: 76px;
  padding: 0 max(40px, calc((100vw - 1720px) / 2 + 40px));
  display: grid;
  grid-template-columns: minmax(0, 1fr) 514px;
  align-items: center;
  gap: 36px;
  background: #fff;
}

.cafe-menuline nav {
  display: flex;
  align-items: center;
  gap: 28px;
  min-width: 0;
}

.cafe-menuline nav a {
  position: relative;
  color: #212529;
  text-decoration: none;
  font-size: 18px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: .2px;
  white-space: nowrap;
}

.cafe-menuline nav small {
  position: absolute;
  right: -25px;
  top: -18px;
  padding: 4px 7px;
  border-radius: 4px;
  background: #dc3545;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}

.cafe-header-search {
  height: 55px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 58px;
  align-items: center;
  border: 1px solid #e2e2e2;
  background: #fff;
}

.cafe-header-search input {
  width: 100%;
  height: 100%;
  padding: 0 18px;
  border: 0;
  outline: 0;
  color: #333;
  font: 400 18px/1.4 Poppins, sans-serif;
}

.cafe-header-search input::placeholder {
  color: #868686;
}

.cafe-header-search span {
  display: grid;
  place-items: center;
  color: #212529;
  font-size: 30px;
  font-weight: 700;
}

.cafe-hero {
  min-height: 460px;
  padding: 70px max(32px, calc((100vw - 1200px) / 2 + 32px));
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, .92fr);
  align-items: center;
  gap: 48px;
  background: #fef9ee;
  overflow: hidden;
}

.cafe-hero-copy span,
.cafe-section-head span,
.cafe-promo-grid span {
  display: block;
  margin-bottom: 10px;
  color: var(--veg-gold);
  font-size: 12px;
  font-weight: 600;
}

.cafe-hero-copy h1 {
  max-width: 640px;
  margin: 0;
  color: #212529;
  font-size: clamp(32px, 4vw, 40px);
  line-height: 1.2;
  font-weight: 700;
}

.cafe-hero-copy p {
  max-width: 560px;
  margin: 22px 0 0;
  color: #333;
  font-size: 14px;
  line-height: 1.86;
  font-weight: 500;
}

.cafe-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}

.cafe-btn {
  min-height: 45px;
  padding: 10px 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 600;
  transition: all .3s ease;
}

.cafe-btn.primary {
  background: var(--veg-gold);
  border: 2px solid var(--veg-gold);
  color: #fff;
}

.cafe-btn.primary:hover {
  background: var(--veg-gold-hover);
  border-color: var(--veg-gold-hover);
}

.cafe-btn.primary:active {
  background: #cc8615;
  transform: scale(.98);
}

.cafe-btn.secondary {
  background: #fff;
  border: 2px solid #dee2e6;
  color: #333;
}

.cafe-btn.secondary:hover {
  border-color: #333;
  background: #f8f9fa;
}

.cafe-hero-visual {
  position: relative;
  min-height: 420px;
}

.cafe-hero-visual img:first-child {
  width: min(500px, 100%);
  height: 360px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

.cafe-hero-visual img:last-child {
  position: absolute;
  right: 4%;
  bottom: 10px;
  width: 178px;
  height: 178px;
  object-fit: cover;
  border: 10px solid #fff;
  border-radius: 50%;
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
}

.cafe-category-strip {
  max-width: 1200px;
  margin: -34px auto 0;
  padding: 0 40px;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
  position: relative;
  z-index: 2;
}

.cafe-category-strip a {
  min-height: 132px;
  padding: 18px 12px;
  display: grid;
  place-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
  color: #333;
  text-align: center;
  transition: all .3s ease;
}

.cafe-category-strip a:hover {
  transform: scale(1.02);
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

.cafe-category-strip img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 50%;
}

.cafe-category-strip strong {
  font-size: 13px;
  line-height: 1.3;
  font-weight: 600;
}

.cafe-promo-grid,
.cafe-products,
.cafe-service-row,
.cafe-testimonials,
.cafe-newsletter {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 40px;
  padding-right: 40px;
}

.cafe-promo-grid {
  padding-top: 70px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

.cafe-promo-grid article {
  min-height: 210px;
  padding: 26px;
  position: relative;
  overflow: hidden;
  background: #fff6e5;
  border-radius: 8px;
  border: 1px solid #e2e2e2;
}

.cafe-promo-grid article:nth-child(2) { background: #edf8e3; }

.cafe-promo-grid article:nth-child(3) { background: #f8f9fa; }

.cafe-promo-grid h2 {
  max-width: 210px;
  margin: 0;
  font-size: 20px;
  line-height: 1.2;
  font-weight: 600;
}

.cafe-promo-grid a {
  display: inline-flex;
  margin-top: 16px;
  color: var(--veg-gold);
  font-size: 12px;
  font-weight: 700;
}

.cafe-promo-grid img {
  position: absolute;
  right: 18px;
  bottom: 12px;
  width: 150px;
  height: 130px;
  object-fit: contain;
}

.cafe-products {
  padding-top: 72px;
}

.cafe-section-head {
  text-align: center;
  margin-bottom: 32px;
}

.cafe-section-head h2 {
  margin: 0;
  font-size: 28px;
  line-height: 1.25;
  font-weight: 600;
}

.cafe-product-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 46px 28px;
}

.cafe-product-card {
  position: relative;
  min-height: 340px;
  padding: 16px;
  display: grid;
  grid-template-rows: 210px auto;
  background: #fff;
  border: 1px solid #e2e2e2;
  border-radius: 8px;
  transition: all .3s ease;
}

.cafe-product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

.cafe-product-card em {
  position: absolute;
  right: 18px;
  top: 12px;
  z-index: 2;
  padding: 5px 10px;
  background: #dc3545;
  color: #fff;
  border-radius: 20px;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}

.cafe-product-card img {
  width: 100%;
  height: 210px;
  object-fit: contain;
}

.cafe-product-card h3 {
  margin: 10px 0 6px;
  color: #333;
  font-size: 15px;
  line-height: 1.35;
  font-weight: 600;
}

.cafe-product-card strong {
  color: #212529;
  font-size: 14px;
  font-weight: 600;
}

.cafe-product-card p {
  margin: 8px 0 0;
  color: #f5ab1e;
  font-size: 12px;
  line-height: 16px;
}

.cafe-product-card p span {
  color: #868686;
}

.cafe-delivery-band {
  max-width: 1200px;
  min-height: 86px;
  margin: 72px auto 0;
  padding: 0 40px;
  display: grid;
  place-items: center;
  color: #fff;
  text-align: center;
  background: linear-gradient(rgba(0,0,0,.34), rgba(0,0,0,.34)), url("/arazotel-assets/page-images/wp-content__uploads__2025__04__001-1024x683.webp") center/cover;
}

.cafe-delivery-band strong {
  font-size: 18px;
  font-weight: 700;
}

.cafe-service-row {
  padding-top: 36px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid #eee;
}

.cafe-service-row article {
  min-height: 92px;
  padding: 18px 20px;
  border: 1px solid #eee;
  border-bottom: 0;
}

.cafe-service-row strong {
  display: block;
  margin-bottom: 4px;
  font-size: 14px;
  font-weight: 600;
}

.cafe-service-row span {
  color: #868686;
  font-size: 12px;
  line-height: 18px;
}

.cafe-testimonials {
  max-width: none;
  margin-top: 72px;
  padding-top: 70px;
  padding-bottom: 70px;
  background: #fef9ee;
}

.cafe-testimonials > div:last-child {
  max-width: 980px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 42px;
}

.cafe-testimonials article {
  text-align: center;
}

.cafe-testimonials b {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  display: grid;
  place-items: center;
  background: var(--veg-gold);
  color: #fff;
  border-radius: 50%;
  font-size: 34px;
  line-height: 1;
}

.cafe-testimonials p {
  color: #6f6f6f;
  font-size: 14px;
  line-height: 26px;
}

.cafe-newsletter {
  margin-top: 0;
  padding-top: 60px;
  padding-bottom: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.cafe-newsletter h2 {
  margin: 0 0 6px;
  font-size: 24px;
  font-weight: 600;
}

.cafe-newsletter p {
  margin: 0;
  color: #6f6f6f;
  font-size: 14px;
}

@media (max-width: 1023px) {
.cafe-topline {
    display: none;
  }

.cafe-shopbar {
    position: relative;
    min-height: auto;
    padding: 16px 20px;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px;
  }

.cafe-shopbar .cafe-wordmark {
    position: static;
    transform: none;
    justify-self: start;
    transition: opacity .22s ease, transform .22s ease;
  }

.cafe-shopbar .cafe-wordmark img {
    width: 94px;
    max-height: 54px;
  }

.cafe-shop-actions {
    justify-self: stretch;
    justify-content: flex-end;
  }

.cafe-shop-actions .cafe-header-search {
    width: min(100%, 420px);
    height: 44px;
  }

body:has(.mobile-menu-tabbar) .cafe-shop-actions .cafe-cart-pill {
    display: none;
  }

body:has(.mobile-menu-tabbar) .cafe-shop-actions {
    justify-content: stretch;
  }

body:has(.mobile-menu-tabbar) .cafe-shop-actions .cafe-header-search {
    width: 100%;
    max-width: none;
  }

.cafe-brandline {
    min-height: auto;
    padding: 18px 20px;
    grid-template-columns: 1fr auto;
    gap: 18px;
  }

.cafe-phone {
    display: none;
  }

.cafe-wordmark {
    justify-self: start;
  }

.cafe-wordmark img {
    width: 104px;
    max-height: 62px;
  }

.cafe-header-icons {
    gap: 16px;
  }

.cafe-menuline {
    min-height: auto;
    padding: 0 20px 18px;
    display: block;
  }

.cafe-menuline nav {
    display: none;
  }

.cafe-header-search {
    height: 44px;
    grid-template-columns: minmax(0, 1fr) 48px;
    border-radius: 50px;
  }

.cafe-header-search input {
    font-size: 14px;
  }

.cafe-hero {
    grid-template-columns: 1fr;
  }

.cafe-category-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

.cafe-promo-grid,
  .cafe-product-grid,
  .cafe-service-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
.cafe-desktop-header {
    position: sticky;
    top: 0;
    z-index: 1200;
    background: #fff;
  }

.cafe-shopbar {
    position: sticky;
    top: 0;
    z-index: 1201;
    grid-template-columns: 94px minmax(0, 1fr);
    box-shadow: 0 8px 20px rgba(31, 35, 54, .06);
    transition: padding .22s ease, gap .22s ease, min-height .22s ease;
  }

.cafe-shopbar .qr-nav-category-toggle {
    position: absolute;
    left: 20px;
    top: 50%;
    width: 112px;
    padding: 0 13px;
    z-index: 4;
  }

body.qr-mobile-category-mode .cafe-shopbar .cafe-wordmark {
    opacity: 0;
    pointer-events: none;
    transform: scale(.9);
  }

body.qr-mobile-category-mode .cafe-shopbar .qr-nav-category-toggle {
    display: inline-flex;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(-50%) scale(1);
  }

body.qr-mobile-category-mode .cafe-shopbar {
    min-height: 62px;
    padding: 10px 14px;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 10px;
  }

body.qr-mobile-category-mode .cafe-shop-actions {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    width: 100%;
  }

body.qr-mobile-category-mode .cafe-shop-actions .cafe-header-search {
    width: 100%;
    min-width: 0;
    height: 42px;
    grid-template-columns: 38px minmax(0, 1fr);
  }

body.qr-mobile-category-mode .cafe-shop-actions .cafe-header-search span {
    font-size: 21px;
  }

body.qr-mobile-category-mode .cafe-shop-actions .cafe-cart-pill {
    display: none;
  }

body.qr-mobile-category-mode .cafe-shop-actions .cafe-cart-pill strong {
    display: none;
  }

body.qr-mobile-category-mode .cafe-shop-actions .cafe-cart-pill::after {
    display: none;
  }

body.qr-mobile-category-mode .cafe-shop-actions .cafe-cart-pill .compact-cart-icon {
    width: 23px;
    height: 23px;
    margin-right: 0;
  }

body.qr-mobile-category-mode .cafe-shop-actions .cafe-cart-pill em {
    display: inline-grid !important;
    position: absolute;
    z-index: 3;
    top: -7px;
    right: -6px;
    min-width: 20px;
    height: 20px;
    place-items: center;
    border-radius: 999px;
    background: var(--theme-primary, #275A53);
    color: #fff;
    font-size: 10px;
    line-height: 1;
    font-style: normal;
    font-weight: 900;
    box-shadow: 0 5px 12px rgba(39, 90, 83, .24);
  }
}

@media (max-width: 567px) {
.cafe-brandline {
    padding: 14px 16px;
  }

.cafe-header-icons a {
    width: 24px;
    height: 24px;
    font-size: 23px;
  }

.cafe-header-icons em {
    min-width: 19px;
    height: 19px;
    right: -9px;
    top: -7px;
    font-size: 11px;
  }

.cafe-menuline {
    padding: 0 16px 14px;
  }

.cafe-shopbar .qr-nav-category-toggle {
    left: 16px;
  }

.cafe-hero {
    min-height: 0;
    padding: 40px 16px;
    gap: 30px;
  }

.cafe-hero-copy h1 {
    font-size: 32px;
  }

.cafe-hero-actions,
  .cafe-newsletter {
    align-items: stretch;
    flex-direction: column;
  }

.cafe-btn {
    width: 100%;
  }

.cafe-hero-visual {
    min-height: 280px;
  }

.cafe-hero-visual img:first-child {
    height: 260px;
  }

.cafe-hero-visual img:last-child {
    width: 120px;
    height: 120px;
  }

.cafe-category-strip,
  .cafe-promo-grid,
  .cafe-products,
  .cafe-service-row,
  .cafe-newsletter {
    padding-left: 20px;
    padding-right: 20px;
  }

.cafe-category-strip {
    margin-top: 24px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

.cafe-promo-grid,
  .cafe-product-grid,
  .cafe-service-row,
  .cafe-testimonials > div:last-child {
    grid-template-columns: 1fr;
  }

.cafe-product-card {
    min-height: 0;
  }
}

.parallax-page .parallax-reveal {
  transition:
    opacity 1.08s ease,
    transform 1.08s cubic-bezier(.16, .74, .18, 1),
    border-color .3s ease,
    background-color .3s ease,
    box-shadow .3s ease !important;
}

@media (max-width: 767px) {
.qr-category-panel {
    display: block;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateY(-10px);
    pointer-events: none;
    transition: max-height .42s ease, opacity .28s ease, transform .28s ease;
    margin: 0 -2px;
  }

.qr-category-panel.is-open {
    max-height: 980px;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    padding: 14px 12px 0;
    border: 1px solid rgba(39, 90, 83, .12);
    border-radius: 26px;
    background:
      radial-gradient(circle at 10% 0%, rgba(230, 201, 122, .24), transparent 34%),
      linear-gradient(180deg, #fffdf8 0%, #f7fbfa 100%);
    box-shadow: 0 18px 42px rgba(31, 35, 54, .09);
  }

.qr-mobile-category-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin: 0 2px 12px;
    padding: 0 2px;
  }

.qr-mobile-category-head span {
    color: #275A53;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .12em;
    text-transform: uppercase;
  }

.qr-mobile-category-head strong {
    color: #20233a;
    font-size: 18px;
    font-weight: 950;
    letter-spacing: -.02em;
  }

.qr-category-panel.is-open .qr-vegist-toolbar {
    margin: 18px auto 30px;
    padding: 14px;
    width: min(100%, 340px);
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 10px;
    border: 1px solid #edf0f5;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 26px rgba(31, 35, 54, .07);
    text-align: center;
  }

.qr-category-panel.is-open .qr-vegist-toolbar button {
    min-height: 38px;
    padding: 0 18px;
    border-radius: 999px;
    background: #f8f9fa;
    color: #20233a;
    font-size: 13px;
    box-shadow: inset 0 0 0 1px #edf0f5;
  }

.qr-category-panel.is-open .qr-vegist-toolbar button::before {
    content: none;
  }

.qr-category-panel.is-open .qr-vegist-toolbar button .material-icons {
    color: #275A53;
  }

.qr-category-panel.is-open .qr-vegist-toolbar span {
    color: #777b8d;
    font-size: 12px;
    font-weight: 800;
  }

.qr-category-panel.is-open .qr-vegist-toolbar label {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 7px;
    color: #20233a;
    font-size: 13px;
    font-weight: 900;
  }

.qr-category-panel.is-open .qr-vegist-toolbar select {
    width: 100%;
    min-height: 42px;
    padding: 0 14px;
    border: 1px solid #edf0f5;
    border-radius: 999px;
    background: #fff7e8;
    color: #20233a;
    text-align: center;
    font-size: 12px;
    font-weight: 800;
  }

.qr-body .category-showcase {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 4px 0 18px;
    padding: 0;
    overflow: visible;
    border-bottom: 0;
    scroll-snap-type: none;
    touch-action: auto;
    cursor: default;
    user-select: auto;
    scrollbar-width: auto;
  }

.qr-body .category-showcase::-webkit-scrollbar {
    display: initial;
  }

.qr-body .category-showcase a {
    position: relative;
    min-height: 116px;
    padding: 14px 8px 12px;
    border: 1px solid rgba(39, 90, 83, .1);
    border-radius: 20px;
    background:
      linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.9)),
      #fff;
    box-shadow: 0 10px 24px rgba(31, 35, 54, .07);
    touch-action: manipulation;
    user-select: none;
    -webkit-user-drag: none;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
  }

.qr-body .category-showcase a:active {
    transform: scale(.97);
  }

.qr-body .category-showcase img {
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
  }

.qr-body .category-showcase a.active {
    color: #fff;
    background:
      linear-gradient(135deg, rgba(39, 90, 83, .94), rgba(31, 35, 54, .92));
    border-color: rgba(230, 201, 122, .62);
    box-shadow: 0 14px 28px rgba(39, 90, 83, .2);
  }

.qr-body .category-plate-img {
    width: 62px;
    height: 48px;
    margin: 0 auto 9px;
    object-fit: contain;
    border-radius: 14px;
    background: rgba(255, 255, 255, .78);
    filter: drop-shadow(0 9px 10px rgba(31, 35, 54, .12));
  }

.qr-body .category-showcase strong {
    font-size: 12px;
    line-height: 1.2;
    min-height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    font-weight: 950;
  }

.qr-body .category-showcase a em {
    position: absolute;
    top: 8px;
    right: 8px;
    min-width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: #275A53;
    background: #f6edcf;
    font-size: 11px;
    font-style: normal;
    font-weight: 950;
    box-shadow: 0 5px 12px rgba(31, 35, 54, .08);
  }

.qr-body .category-showcase a.active em {
    color: #20233a;
    background: #e6c97a;
  }
}

/* Final QR add-to-cart interaction */
.qr-body .eatford-style .qr-item {
  --selected-card-bg: #f2faf7;
  --selected-card-border: rgba(39, 90, 83, .34);
  --selected-card-shadow: rgba(39, 90, 83, .16);
}

.qr-body .eatford-style .qr-item.is-selected {
  border-color: var(--selected-card-border) !important;
  background: linear-gradient(180deg, #fff 0%, var(--selected-card-bg) 100%) !important;
  box-shadow: 0 18px 34px var(--selected-card-shadow) !important;
}

.qr-body .qr-price-stack del {
  color: #98a2b3;
  font-size: 13px;
  font-weight: 800;
  text-decoration-thickness: 2px;
}

.qr-body .eatford-style .qr-item.is-just-added {
  animation: qrCardSelectedPulse .78s ease both;
}

.qr-body:not([class*="cart-button-template-"]) .qr-item-action button[data-add-item] {
  min-width: 118px !important;
  min-height: 40px !important;
  padding: 0 15px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  border: 1px solid rgba(39, 90, 83, .18) !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: var(--theme-primary, #275A53) !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  box-shadow: 0 10px 24px rgba(39, 90, 83, .10) !important;
  transform-origin: center !important;
  transition: transform .22s ease, background-color .22s ease, color .22s ease, box-shadow .22s ease, border-color .22s ease !important;
}

.qr-body:not([class*="cart-button-template-"]) .qr-item-action button[data-add-item]::before {
  content: "+" !important;
  width: 22px !important;
  height: 22px !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 2px solid currentColor !important;
  border-radius: 50% !important;
  color: inherit !important;
  font-size: 17px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
}

.qr-body:not([class*="cart-button-template-"]) .qr-item-action button[data-add-item]:hover,
.qr-body:not([class*="cart-button-template-"]) .qr-item-action button[data-add-item]:focus-visible {
  border-color: rgba(39, 90, 83, .36) !important;
  background: rgba(39, 90, 83, .08) !important;
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow: 0 14px 28px rgba(39, 90, 83, .16) !important;
}

.qr-body:not([class*="cart-button-template-"]) .qr-item-action button[data-add-item].is-added {
  background: var(--theme-primary, #275A53) !important;
  color: #fff !important;
  border-color: var(--theme-primary, #275A53) !important;
  transform: scale(1.08) !important;
  box-shadow: 0 16px 32px rgba(39, 90, 83, .28) !important;
}

.qr-body:not([class*="cart-button-template-"]) .qr-item-action button[data-add-item].is-added::before {
  content: "✓" !important;
  border-color: #fff !important;
}

.qr-body:not([class*="cart-button-template-"]) .qr-item-action .qr-addtocart-btn[data-add-item] {
  position: relative !important;
  overflow: hidden !important;
  min-width: 92px !important;
  min-height: 32px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--theme-primary, #275A53) !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(39, 90, 83, .16) !important;
  isolation: isolate !important;
}

.qr-body:not([class*="cart-button-template-"]) .qr-item-action .qr-addtocart-btn[data-add-item]::before {
  display: none !important;
  content: none !important;
}

.qr-body:not([class*="cart-button-template-"]) .qr-add-pre,
.qr-body:not([class*="cart-button-template-"]) .qr-add-done {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 100%;
  font-size: var(--qr-cart-button-font-size, 11px);
  font-weight: 900;
  line-height: 1;
  transition: transform .34s ease, opacity .24s ease;
}

.qr-body:not([class*="cart-button-template-"]) .qr-add-pre {
  background: var(--theme-primary, #275A53);
  color: #fff;
  transform: translateX(0);
}

.qr-body:not([class*="cart-button-template-"]) .qr-add-done {
  background: #E6C97A;
  color: #163f39;
  transform: translateX(-112%) skew(-34deg);
}

.qr-body:not([class*="cart-button-template-"]) .qr-add-done > * {
  transform: skew(34deg);
}

.qr-body:not([class*="cart-button-template-"]) .qr-add-icon,
.qr-body:not([class*="cart-button-template-"]) .qr-add-check {
  width: 15px;
  height: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
}

.qr-body:not([class*="cart-button-template-"]) .qr-item-action .qr-addtocart-btn[data-add-item]:hover,
.qr-body:not([class*="cart-button-template-"]) .qr-item-action .qr-addtocart-btn[data-add-item]:focus-visible {
  transform: translateY(-1px) scale(1.035) !important;
  box-shadow: 0 12px 24px rgba(39, 90, 83, .22) !important;
}

.qr-body:not([class*="cart-button-template-"]) .qr-item-action .qr-addtocart-btn[data-add-item].is-added {
  transform: scale(1.035) !important;
  box-shadow: 0 12px 24px rgba(39, 90, 83, .20) !important;
}

.qr-body:not([class*="cart-button-template-"]) .qr-item-action .qr-addtocart-btn[data-add-item].is-added .qr-add-pre {
  transform: translateX(112%);
}

.qr-body:not([class*="cart-button-template-"]) .qr-item-action .qr-addtocart-btn[data-add-item].is-added .qr-add-done {
  transform: translateX(0) skew(0deg);
}

.qr-body:not([class*="cart-button-template-"]) .qr-item-action .qr-addtocart-btn[data-add-item].is-added .qr-add-done > * {
  transform: skew(0deg);
}

@media (max-width: 767px) {
.qr-body:not([class*="cart-button-template-"]) .qr-item-action button[data-add-item] {
    min-width: 42px !important;
    width: 42px !important;
    min-height: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    font-size: 0 !important;
    gap: 0 !important;
  }

.qr-body:not([class*="cart-button-template-"]) .qr-item-action button[data-add-item]::before {
    width: 22px !important;
    height: 22px !important;
    font-size: 17px !important;
  }

.qr-body:not([class*="cart-button-template-"]) .qr-item-action .qr-addtocart-btn[data-add-item] {
    min-width: 44px !important;
    width: 44px !important;
    min-height: 38px !important;
    height: 38px !important;
    border-radius: 13px !important;
  }

.qr-body:not([class*="cart-button-template-"]) .qr-add-pre,
  .qr-body:not([class*="cart-button-template-"]) .qr-add-done {
    font-size: 0;
    gap: 0;
  }

.qr-body:not([class*="cart-button-template-"]) .qr-add-icon,
  .qr-body:not([class*="cart-button-template-"]) .qr-add-check {
    width: 22px;
    height: 22px;
    font-size: 16px;
  }
}

.qr-table-admin input[readonly] {
  width: 100%;
  min-width: 220px;
  font-size: 12px;
  background: #f8fafc;
}

.qr-preview-card {
  display: grid;
  gap: 6px;
  min-width: 170px;
  padding: 14px;
  border: 1px dashed rgba(39, 90, 83, .35);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(39, 90, 83, .08), rgba(230, 201, 122, .16));
  color: #1f2937;
}

.qr-preview-card b {
  color: #275a53;
}

.qr-preview-card em {
  overflow-wrap: anywhere;
  color: #6b7280;
  font-size: 11px;
  font-style: normal;
}

.qr-table-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 20px 0;
}

.qr-table-stats article {
  display: grid;
  gap: 6px;
  min-height: 112px;
  padding: 18px;
  border: 1px solid #edf2f7;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(31, 53, 88, .045);
}

.qr-table-stats article:nth-child(1) {
  background: linear-gradient(135deg, #f1fbf8 0%, #fff 100%);
}

.qr-table-stats article:nth-child(2) {
  background: linear-gradient(135deg, #fff8e8 0%, #fff 100%);
}

.qr-table-stats article:nth-child(3) {
  background: linear-gradient(135deg, #eef6ff 0%, #fff 100%);
}

.qr-table-stats article:nth-child(4) {
  background: linear-gradient(135deg, #f6f2ff 0%, #fff 100%);
}

.qr-table-stats span {
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.qr-table-stats strong {
  color: #17243b;
  font-size: 34px;
  line-height: 1;
}

.qr-table-stats small {
  color: #94a3b8;
  font-size: 12px;
  font-weight: 700;
}

.qr-table-workbench {
  display: grid;
  grid-template-columns: minmax(260px, .9fr) minmax(260px, .9fr) minmax(0, 1.25fr);
  gap: 16px;
  align-items: stretch;
  margin: 18px 0 22px;
}

.qr-table-card {
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 18px;
  border: 1px solid #edf2f7;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(31, 53, 88, .045);
}

.qr-table-guide {
  background: linear-gradient(145deg, #fff 0%, #f3fbf8 100%);
}

.qr-table-guide p {
  margin: 0;
  color: #64748b;
  font-size: 13px;
  line-height: 1.65;
}

.qr-table-form label {
  display: grid;
  gap: 7px;
  color: #475569;
  font-size: 12px;
  font-weight: 900;
}

.qr-table-form input,
.qr-table-form select,
.qr-table-form textarea {
  width: 100%;
  min-height: 42px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #f8fafc;
  color: #17243b;
  padding: 10px 12px;
  font: inherit;
}

.qr-table-form textarea {
  min-height: 82px;
  resize: vertical;
}

.qr-table-form input:focus,
.qr-table-form select:focus,
.qr-table-form textarea:focus {
  outline: 0;
  border-color: #275a53;
  box-shadow: 0 0 0 4px rgba(39, 90, 83, .1);
  background: #fff;
}

.qr-table-form .form-two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.qr-table-form .check-line {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #f8fafc;
}

.qr-table-form .check-line input {
  width: 18px;
  min-height: 18px;
  padding: 0;
}

.qr-table-single {
  grid-column: auto;
}

.qr-preview-large {
  min-height: 168px;
  align-content: center;
  border-style: solid;
  background:
    linear-gradient(135deg, rgba(39, 90, 83, .1), rgba(230, 201, 122, .2)),
    #fff;
}

.qr-preview-large b {
  font-size: 22px;
}

.qr-preview-large span {
  color: #17243b;
  font-weight: 900;
}

.qr-standard-card {
  justify-items: center;
  text-align: center;
  border: 1px solid #e5e7eb;
  background: #fff;
}

.qr-standard-image {
  display: block;
  width: min(100%, 188px);
  aspect-ratio: 1;
  object-fit: contain;
  padding: 10px;
  border: 1px solid #111827;
  border-radius: 6px;
  background: #fff;
  image-rendering: pixelated;
}

.qr-preview-large .qr-standard-image {
  width: min(100%, 220px);
}

.qr-table-actual-preview {
  min-width: 190px;
}

.qr-table-actual-preview .qr-standard-image {
  width: 132px;
}

.qr-table-list-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  margin: 24px 0 12px;
}

.qr-table-list-head h3 {
  margin: 0;
  color: #17243b;
}

.qr-table-list-head p {
  margin: 4px 0 0;
  color: #94a3b8;
  font-size: 13px;
}

.qr-table-list-head span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(39, 90, 83, .1);
  color: #275a53;
  font-size: 12px;
  font-weight: 900;
}

.qr-table-wrap {
  border-radius: 22px;
}

.qr-table-admin td:nth-child(4) {
  min-width: 280px;
}

.qr-table-admin td:nth-child(4) small {
  display: block;
  margin-top: 7px;
  color: #94a3b8;
  font-size: 11px;
  line-height: 1.35;
}

.qr-table-admin .qr-table-area-row td {
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(39, 90, 83, .1), rgba(230, 201, 122, .18));
  color: #275a53;
  font-size: 13px;
  font-weight: 950;
  text-transform: uppercase;
}

.qr-print-panel {
  margin-top: 28px;
  padding: 18px;
  border: 1px solid #edf2f7;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(31, 53, 88, .045);
}

.qr-print-sheet {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 14px;
  padding: 16px;
  border: 1px dashed #cbd5e1;
  border-radius: 18px;
  background: #f8fafc;
}

.qr-print-area-title {
  grid-column: 1 / -1;
  margin: 8px 0 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(39, 90, 83, .1);
  color: #275a53;
  font-size: 13px;
  font-weight: 950;
  text-transform: uppercase;
}

.qr-print-card {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 4px;
  aspect-ratio: 1;
  padding: 8px;
  border: 1px solid #111827;
  border-radius: 6px;
  background: #fff;
  color: #111827;
  text-align: center;
  break-inside: avoid;
  page-break-inside: avoid;
}

.qr-print-card img {
  width: min(100%, 96px);
  aspect-ratio: 1;
  object-fit: contain;
  image-rendering: pixelated;
}

.qr-print-card strong {
  font-size: 10px;
  line-height: 1;
}

.qr-print-card span {
  font-size: 9px;
  font-weight: 800;
  line-height: 1.15;
}

@media (max-width: 1180px) {
.qr-table-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

.qr-table-workbench {
    grid-template-columns: 1fr 1fr;
  }

.qr-table-guide,
  .qr-table-single {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
.qr-table-stats,
  .qr-table-workbench,
  .qr-table-form .form-two {
    grid-template-columns: 1fr;
  }

.qr-table-list-head {
    align-items: start;
    flex-direction: column;
  }

.qr-table-admin td:nth-child(4) {
    min-width: 0;
  }
}

.cart-service-note {
  margin: 12px 0 0;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(39, 90, 83, .1);
  color: #275a53;
  font-size: 13px;
  font-weight: 700;
}

.waiter-call-action {
  border: 0;
  cursor: pointer;
  width: 100%;
}

.waiter-call-action:disabled {
  cursor: wait;
  opacity: .72;
}

@media (max-width: 767px) {
.qr-table-admin input[readonly] {
    min-width: 0;
  }

.qr-preview-card {
    min-width: 0;
  }
}

/* Final mobile QR category premium panel */
body.qr-body .qr-category-panel {
  display: block !important;
  max-height: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  transform: translateY(-8px) !important;
  transition: max-height .42s ease, opacity .24s ease, transform .24s ease !important;
}

body.qr-body .qr-category-panel.is-open {
  max-height: 1200px !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
  margin: 8px 0 18px !important;
  padding: 16px 12px 14px !important;
  border: 1px solid rgba(39, 90, 83, .14) !important;
  border-radius: 28px !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(230, 201, 122, .3), transparent 32%),
    radial-gradient(circle at 92% 12%, rgba(39, 90, 83, .12), transparent 34%),
    linear-gradient(180deg, #fffdf7 0%, #f6fbfa 100%) !important;
  box-shadow: 0 18px 42px rgba(31, 35, 54, .1) !important;
}

body.qr-body .qr-mobile-category-head {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin: 0 2px 14px !important;
}

body.qr-body .qr-mobile-category-head span {
  display: block !important;
  color: #275A53 !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}

body.qr-body .qr-mobile-category-head strong {
  display: block !important;
  color: #20233a !important;
  font-size: 18px !important;
  font-weight: 950 !important;
  letter-spacing: -.02em !important;
}

body.qr-body .qr-category-panel.is-open .category-showcase {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  scroll-snap-type: none !important;
  touch-action: manipulation !important;
}

body.qr-body .qr-category-panel.is-open .category-showcase a {
  position: relative !important;
  min-width: 0 !important;
  min-height: 118px !important;
  padding: 14px 8px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(39, 90, 83, .12) !important;
  border-radius: 20px !important;
  background: rgba(255, 255, 255, .95) !important;
  box-shadow: 0 10px 24px rgba(31, 35, 54, .08) !important;
  text-align: center !important;
  text-decoration: none !important;
}

body.qr-body .qr-category-panel.is-open .category-showcase a.active {
  color: #fff !important;
  border-color: rgba(230, 201, 122, .65) !important;
  background: linear-gradient(135deg, #275A53, #20233a) !important;
  box-shadow: 0 14px 30px rgba(39, 90, 83, .22) !important;
}

body.qr-body .qr-category-panel.is-open .category-showcase .category-plate-img {
  width: 62px !important;
  height: 48px !important;
  margin: 0 auto 9px !important;
  object-fit: contain !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, .75) !important;
  filter: drop-shadow(0 9px 10px rgba(31, 35, 54, .13)) !important;
}

body.qr-body .qr-category-panel.is-open .category-showcase strong {
  min-height: 30px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: inherit !important;
  font-size: 12px !important;
  line-height: 1.18 !important;
  font-weight: 950 !important;
}

body.qr-body .qr-category-panel.is-open .category-showcase a em {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  min-width: 22px !important;
  height: 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  color: #275A53 !important;
  background: #f6edcf !important;
  font-size: 11px !important;
  font-style: normal !important;
  font-weight: 950 !important;
}

body.qr-body .qr-category-panel.is-open .category-showcase a.active em {
  color: #20233a !important;
  background: #e6c97a !important;
}

@media (max-width: 900px) {
body.qr-body .qr-mobile-category-head {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin: 0 2px 14px !important;
  }

body.qr-body .qr-mobile-category-head span {
    display: block !important;
    color: #275A53 !important;
    font-size: 11px !important;
    font-weight: 950 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
  }

body.qr-body .qr-mobile-category-head strong {
    display: block !important;
    color: #20233a !important;
    font-size: 18px !important;
    font-weight: 950 !important;
    letter-spacing: -.02em !important;
  }

body.qr-body .qr-category-panel.is-open .category-showcase {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    scroll-snap-type: none !important;
    touch-action: manipulation !important;
  }

body.qr-body .qr-category-panel.is-open .category-showcase a {
    position: relative !important;
    min-width: 0 !important;
    min-height: 118px !important;
    padding: 14px 8px 12px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgba(39, 90, 83, .12) !important;
    border-radius: 20px !important;
    background: rgba(255, 255, 255, .95) !important;
    box-shadow: 0 10px 24px rgba(31, 35, 54, .08) !important;
    text-align: center !important;
    text-decoration: none !important;
  }

body.qr-body .qr-category-panel.is-open .category-showcase a.active {
    color: #fff !important;
    border-color: rgba(230, 201, 122, .65) !important;
    background: linear-gradient(135deg, #275A53, #20233a) !important;
    box-shadow: 0 14px 30px rgba(39, 90, 83, .22) !important;
  }

body.qr-body .qr-category-panel.is-open .category-showcase .category-plate-img {
    width: 62px !important;
    height: 48px !important;
    margin: 0 auto 9px !important;
    object-fit: contain !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, .75) !important;
    filter: drop-shadow(0 9px 10px rgba(31, 35, 54, .13)) !important;
  }

body.qr-body .qr-category-panel.is-open .category-showcase strong {
    min-height: 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: inherit !important;
    font-size: 12px !important;
    line-height: 1.18 !important;
    font-weight: 950 !important;
  }

body.qr-body .qr-category-panel.is-open .category-showcase a em {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    min-width: 22px !important;
    height: 22px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    color: #275A53 !important;
    background: #f6edcf !important;
    font-size: 11px !important;
    font-style: normal !important;
    font-weight: 950 !important;
  }
}

/* === app-admin.css === */
/* Auto-split from app.css. Edit source sections carefully. */
.bowl-admin-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr);
  gap: 18px;
  align-items: stretch;
}

.bowl-admin-preview {
  border-radius: 22px;
  background: linear-gradient(135deg, #275a53, #153832);
  color: #fff;
  padding: 22px;
  display: grid;
  gap: 10px;
  box-shadow: 0 16px 40px rgba(39, 90, 83, .18);
}

.bowl-admin-preview span { color: #e6c97a; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: 12px; }

.bowl-admin-preview strong { font-size: 28px; }

.bowl-admin-preview img { width: 100%; max-height: 180px; object-fit: contain; border-radius: 18px; background: rgba(255,255,255,.12); }

.bowl-admin-preview b { font-size: 22px; color: #e6c97a; }

.bowl-admin-tabs {
  display: grid;
  gap: 18px;
  margin-top: 18px;
}

.bowl-main-tabs {
  display: grid;
  gap: 20px;
  margin-top: 18px;
}

.bowl-main-tab-buttons {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 22px;
  padding: 12px;
  box-shadow: 0 12px 30px rgba(15,23,42,.05);
}

.bowl-main-tab-buttons button {
  border: 0;
  min-height: 54px;
  border-radius: 16px;
  background: #f8fafc;
  color: #475569;
  font-weight: 900;
}

.bowl-main-tab-buttons button.active {
  background: #275a53;
  color: #fff;
  box-shadow: 0 14px 30px rgba(39,90,83,.18);
}

.bowl-admin-tabs.nested { margin-top: 0; }

.bowl-tab-buttons {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  background: transparent;
}

.bowl-tab-buttons button {
  border: 1px solid #e7ddcd;
  border-radius: 18px;
  background: #fff;
  color: #334155;
  min-height: 74px;
  padding: 14px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  box-shadow: 0 10px 24px rgba(15,23,42,.05);
}

.bowl-tab-buttons button span {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  background: #f3eadb;
  color: #8a6b3e;
}

.bowl-tab-buttons button.active {
  background: #275a53;
  color: #fff;
  border-color: #275a53;
  box-shadow: 0 16px 34px rgba(39,90,83,.18);
}

.bowl-tab-buttons button.active span {
  background: #e6c97a;
  color: #1f2937;
}

.bowl-group-card { display: none; gap: 16px; }

.bowl-group-card.active { display: grid; }

.bowl-group-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  border-radius: 18px;
  background: linear-gradient(135deg, #fffaf0, #f6fbf8);
  border: 1px solid #e8ddc9;
}

.bowl-group-toolbar span {
  color: #8a6b3e;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.bowl-group-toolbar h3 { margin: 4px 0 0; font-size: 24px; }

.bowl-group-toolbar b {
  background: #275a53;
  color: #fff;
  border-radius: 999px;
  padding: 8px 14px;
}

.bowl-option-row {
  display: grid;
  grid-template-columns: 64px minmax(140px, 1fr) minmax(150px, 1.1fr) 88px 72px minmax(120px, 1fr) auto 130px;
  gap: 10px;
  align-items: end;
  padding: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  background: #fff;
}

.bowl-option-row.content-only {
  grid-template-columns: 64px minmax(150px, 1fr) minmax(180px, 1.2fr) 76px minmax(140px, 1fr) auto 130px;
}

.bowl-option-row input,
.bowl-option-row select { min-width: 0; height: 38px; border: 1px solid #e5e7eb; border-radius: 10px; padding: 0 10px; }

.bowl-option-row label {
  display: grid;
  gap: 5px;
  font-size: 11px;
  font-weight: 900;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.bowl-price-row {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) 160px 130px;
  gap: 12px;
  align-items: end;
  padding: 14px;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  background: #fff;
}

.bowl-price-row strong {
  min-height: 42px;
  display: flex;
  align-items: center;
  color: #1f2937;
}

.bowl-price-row label {
  display: grid;
  gap: 5px;
  color: #64748b;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.bowl-price-row input {
  height: 40px;
  border: 1px solid #d1d5db;
  border-radius: 12px;
  padding: 0 12px;
}

.bowl-price-row button {
  min-height: 40px;
  border-radius: 12px;
}

.bowl-code-editor {
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 12px 14px;
  background: #f8fafc;
}

.bowl-code-editor summary {
  cursor: pointer;
  font-weight: 900;
  color: #275a53;
}

.bowl-code-editor textarea {
  width: 100%;
  min-height: 150px;
  border: 1px solid #d1d5db;
  border-radius: 14px;
  padding: 12px;
  font-family: Consolas, "Courier New", monospace;
  font-size: 13px;
  background: #111827;
  color: #f8fafc;
}

.bowl-card-preset-section {
  margin-top: 18px;
}

.bowl-card-preset-grid .product-card-preset iframe {
  height: 230px;
}

.bowl-card-preset-grid .product-card-preset header {
  color: #1f2937;
}

.bowl-card-preset {
  cursor: pointer;
}

.bowl-code-live-preview iframe {
  width: 100%;
  min-height: 360px;
  border: 0;
  border-radius: 18px;
  background: #f8fafc;
}

.bowl-code-live-preview p {
  color: rgba(255,255,255,.78);
  margin: 0;
}

@media (max-width: 900px) {
.bowl-admin-layout,
  .bowl-builder-hero { grid-template-columns: 1fr; }

.bowl-tab-buttons { grid-template-columns: 1fr 1fr; }

.bowl-main-tab-buttons { grid-template-columns: 1fr; }

.bowl-option-row { grid-template-columns: 1fr; }

.bowl-option-row.content-only,
  .bowl-price-row { grid-template-columns: 1fr; }
}

/* Restore simple public mobile menu */
body:not(.admin-body) .site-mobile-menu {
  background: #fff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 22px !important;
  color: #1f2937 !important;
}

body:not(.admin-body) .site-mobile-menu-head {
  max-width: 520px !important;
  width: 100% !important;
  min-height: 58px !important;
  margin: 0 auto 30px !important;
}

body:not(.admin-body) .site-mobile-menu-head img {
  width: 150px !important;
  height: 56px !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  object-fit: contain !important;
}

body:not(.admin-body) .site-mobile-menu-head button {
  width: 48px !important;
  height: 48px !important;
  background: #f3f6f5 !important;
  color: var(--brand) !important;
  box-shadow: none !important;
}

body:not(.admin-body) .site-mobile-menu nav {
  grid-template-columns: 1fr !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 520px !important;
  margin: 0 auto !important;
}

body:not(.admin-body) .site-mobile-menu nav a {
  min-height: 58px !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 18px !important;
  background: #fff !important;
  color: #1f2937 !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  box-shadow: 0 12px 28px rgba(31, 41, 55, .06) !important;
  transform: none !important;
}

body:not(.admin-body) .site-mobile-menu nav .site-mobile-reservation {
  background: var(--brand) !important;
  color: #fff !important;
  border-color: var(--brand) !important;
}

/* Final admin login responsive override */
@media (max-width: 767px) {
  .admin-auth {
    padding: 14px !important;
    align-items: stretch !important;
  }
  .login-showcase {
    min-height: calc(100vh - 28px) !important;
    padding: 0 !important;
  }
  .login-device {
    width: min(390px, 100%) !important;
    min-height: calc(100vh - 28px) !important;
    border-width: 10px !important;
    border-bottom-width: 16px !important;
    border-radius: 34px !important;
  }
  .login-notch {
    width: 104px !important;
    height: 24px !important;
    border-radius: 0 0 16px 16px !important;
  }
  .login-panel {
    min-height: calc(100vh - 54px) !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    padding: 54px 24px 28px !important;
  }
  .login-form-side {
    width: 100% !important;
    min-width: 0 !important;
  }
  .premium-login-form,
  .premium-login-form label,
  .login-input-shell,
  .login-input-shell input {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .login-logo {
    width: 118px !important;
    margin: 0 auto 18px !important;
    display: block !important;
  }
  .login-form-side h1,
  .login-form-side p {
    text-align: center !important;
  }
  .login-art-side {
    order: -1 !important;
    min-height: 180px !important;
  }
  .login-art-circle {
    width: 180px !important;
  }
  .login-person {
    transform: translateX(-50%) scale(.5) !important;
    transform-origin: bottom center !important;
  }
}

/* Final public mobile menu spacing override */
@media (max-width: 767px) {
  .admin-auth {
    padding: 14px;
    align-items: stretch;
  }
  .login-showcase {
    min-height: calc(100vh - 28px);
    padding: 0;
  }
  .login-device {
    width: min(390px, 100%);
    min-height: calc(100vh - 28px);
    border-width: 10px;
    border-bottom-width: 16px;
    border-radius: 34px;
  }
  .login-notch {
    width: 104px;
    height: 24px;
    border-radius: 0 0 16px 16px;
  }
  .login-panel {
    min-height: calc(100vh - 54px);
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 54px 24px 28px;
  }
  .login-form-side {
    width: 100%;
  }
  .login-logo {
    width: 118px;
    margin: 0 auto 18px;
    display: block;
  }
  .login-form-side h1,
  .login-form-side p {
    text-align: center;
  }
  .login-art-side {
    order: -1;
    min-height: 180px;
  }
  .login-art-circle {
    width: 180px;
  }
  .login-person {
    transform: translateX(-50%) scale(.5);
    transform-origin: bottom center;
  }
  body:not(.admin-body) .reseliva-booking-widget {
    width: auto !important;
    max-width: calc(100vw - 44px) !important;
    margin-left: 22px !important;
    margin-right: 22px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
  }

  body:not(.admin-body) .site-mobile-menu {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    background: #fff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  body:not(.admin-body) .site-mobile-menu-head,
  body:not(.admin-body) .site-mobile-menu nav {
    width: 100% !important;
    max-width: 430px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  body:not(.admin-body) .site-mobile-menu nav a {
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* Restore simple public mobile menu - final override */
body:not(.admin-body) .site-mobile-menu {
  background: #fff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 22px !important;
  color: #1f2937 !important;
}

body:not(.admin-body) .site-mobile-menu-head {
  max-width: 520px !important;
  width: 100% !important;
  min-height: 58px !important;
  margin: 0 auto 30px !important;
}

body:not(.admin-body) .site-mobile-menu-head img {
  width: 150px !important;
  height: 56px !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  object-fit: contain !important;
}

body:not(.admin-body) .site-mobile-menu-head button {
  width: 48px !important;
  height: 48px !important;
  background: #f3f6f5 !important;
  color: var(--brand) !important;
  box-shadow: none !important;
}

body:not(.admin-body) .site-mobile-menu nav {
  grid-template-columns: 1fr !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 520px !important;
  margin: 0 auto !important;
}

body:not(.admin-body) .site-mobile-menu nav a {
  min-height: 58px !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 18px !important;
  background: #fff !important;
  color: #1f2937 !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  box-shadow: 0 12px 28px rgba(31, 41, 55, .06) !important;
  transform: none !important;
}

body:not(.admin-body) .site-mobile-menu nav .site-mobile-reservation {
  background: var(--brand) !important;
  color: #fff !important;
  border-color: var(--brand) !important;
}

.campaign-editor-form .role-check-grid {
  grid-template-columns: 1fr !important;
  max-width: 340px;
}

.campaign-editor-form .role-check-grid label {
  justify-content: flex-start;
}

.campaign-admin-preview { position: sticky; top: 92px; display: grid; gap: 12px; }

.campaign-admin-preview > span { color: #978667; font-weight: 900; text-transform: uppercase; font-size: 12px; }

.mobile-menu-admin-grid { display: grid; grid-template-columns: minmax(0, 1fr) 430px; gap: 26px; align-items: start; }

.phone-preview { position: sticky; top: 92px; }

.backup-table { display: grid; gap: 10px; margin-top: 18px; }

.backup-table-head, .backup-row { display: grid; grid-template-columns: 64px minmax(180px, 1fr) 160px 120px 90px 110px minmax(240px, auto); gap: 12px; align-items: center; }

.backup-table-head { color: #6c757d; font-size: 12px; font-weight: 900; text-transform: uppercase; padding: 0 14px; }

.backup-row { border: 1px solid #eee7dd; border-radius: 10px; padding: 14px; background: #fffdfb; }

.backup-row > span { color: #5c6170; font-weight: 700; }

.backup-detail { border: 1px solid #eee7dd; border-radius: 10px; padding: 18px; background: #fff; }

.backup-detail details { margin-top: 16px; }

.backup-detail summary { cursor: pointer; color: #978667; font-weight: 900; }

.backup-detail textarea { width: 100%; min-height: 260px; margin-top: 12px; border: 1px solid #ded8cf; border-radius: 8px; padding: 14px; font: 13px/1.5 Consolas, monospace; }

@media (max-width: 980px) {
.backup-table-head { display: none; }

.backup-row { grid-template-columns: 1fr; }
}

.admin-head-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }

.backup-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }

.admin-alert {
  margin-bottom: 18px;
  padding: 14px 16px;
  border-radius: 10px;
  font-weight: 800;
}

.admin-alert.success { background: #e8f6ef; color: #11623a; border: 1px solid #bfe7d0; }

.admin-alert.error { background: #fdecee; color: #9f1f2f; border: 1px solid #f6c2c8; }

@media (max-width: 900px) {
.backup-grid { grid-template-columns: 1fr; }
}

.admin-live-note {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}

.admin-live-note.show {
  opacity: 1;
  pointer-events: auto;
}

.admin-live-note-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .28);
  backdrop-filter: blur(4px);
}

.admin-live-note-card {
  position: relative;
  width: min(420px, 100%);
  padding: 28px 26px 24px;
  border: 1px solid rgba(39, 90, 83, .16);
  border-radius: 24px;
  background: #fff;
  color: #172033;
  box-shadow: 0 28px 70px rgba(15, 23, 42, .22);
  text-align: center;
  transform: translateY(12px) scale(.96);
  transition: transform .22s ease;
}

.admin-live-note.show .admin-live-note-card {
  transform: translateY(0) scale(1);
}

.admin-live-note-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 999px;
  background: #f4f7f6;
  color: #275A53;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.admin-live-note-icon {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 12px;
  border-radius: 16px;
  background: #275A53;
  color: #fff;
  font-weight: 950;
}

.admin-live-note-card small {
  display: block;
  margin-bottom: 7px;
  color: #275A53;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.admin-live-note-card strong {
  display: block;
  font-size: 24px;
  font-weight: 950;
}

.admin-live-note-card p {
  margin: 10px 0 0;
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
}

/* Admin usability upgrades */
.admin-pill { align-self: center; border: 1px solid #d9cdb9; border-radius: 999px; color: #978667; padding: 9px 14px; font-weight: 900; }

.media-mapper-grid { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: start; }

.admin-tabs { display: grid; gap: 18px; }

.admin-tab-buttons { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; }

.admin-tab-buttons button { flex: 0 0 auto; min-height: 40px; border: 1px solid #ded8cf; border-radius: 999px; background: #fff; color: #4b514d; padding: 0 16px; font-weight: 900; cursor: pointer; }

.admin-tab-buttons button.active { background: #978667; border-color: #978667; color: #fff; }

.admin-tab-panel { display: none; }

.admin-tab-panel.active { display: block; }

.compact-tabs .admin-tab-buttons button { min-height: 34px; font-size: 12px; }

.media-map-list, .admin-tab-panel { display: none; }

.admin-tab-panel.active, .media-map-list { display: grid; gap: 10px; }

.media-map-row {
  display: grid;
  grid-template-columns: 96px minmax(150px, .55fr) minmax(320px, 1fr) minmax(90px, .3fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid #eee7dd;
  border-radius: 8px;
  background: #fffdfb;
  padding: 10px;
}

.media-map-row img { width: 96px; height: 74px; object-fit: cover; border-radius: 6px; background: #f4f0e8; }

.media-map-row strong { font-size: 13px; line-height: 1.25; }

.media-map-row select, .media-map-row input { min-height: 40px; border: 1px solid #ded8cf; border-radius: 6px; padding: 8px; min-width: 0; width: 100%; }

.media-map-row button { min-height: 40px; border: 0; border-radius: 999px; background: #978667; color: #fff; padding: 0 14px; font-weight: 900; }

.role-check-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 10px; }

.role-check-grid label {
  display: flex !important;
  align-items: center;
  gap: 8px !important;
  min-height: 44px;
  border: 1px solid #eee7dd;
  border-radius: 8px;
  padding: 10px 12px;
  background: #fffdfb;
}

.role-check-grid input { width: auto !important; min-height: auto !important; }

@media (max-width: 1100px) {
.media-mapper-grid { grid-template-columns: 1fr; }

.media-map-row { grid-template-columns: 64px minmax(0,1fr); }

.media-map-row select, .media-map-row input, .media-map-row button { grid-column: 1 / -1; }

.media-map-row img { width: 64px; height: 54px; }

.theme-preset-grid, .role-check-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 600px) {
.theme-preset-grid, .role-check-grid { grid-template-columns: 1fr; }
}

.install-body, .admin-auth { background: var(--soft); min-height: 100vh; display: grid; place-items: center; padding: 20px; }

.admin-auth {
  background:
    radial-gradient(circle at 70% 32%, rgba(255, 220, 193, .55), transparent 26%),
    linear-gradient(135deg, #fff7f1 0%, #fffaf6 45%, #f9eee8 100%);
  font-family: var(--font, Poppins, system-ui, sans-serif);
}

.login-showcase {
  width: min(1180px, 100%);
  min-height: calc(100vh - 40px);
  display: grid;
  place-items: center;
  padding: 34px 0;
}

.login-device {
  position: relative;
  width: min(980px, 100%);
  border: 12px solid #090909;
  border-bottom-width: 22px;
  border-radius: 20px;
  background: #fff7f1;
  box-shadow: 0 28px 70px rgba(35, 31, 28, .18), 0 10px 0 rgba(0,0,0,.08);
  overflow: hidden;
}

.login-notch {
  position: absolute;
  top: -1px;
  left: 50%;
  z-index: 3;
  width: 92px;
  height: 18px;
  transform: translateX(-50%);
  border-radius: 0 0 12px 12px;
  background: #090909;
}

.login-panel {
  min-height: 520px;
  display: grid;
  grid-template-columns: minmax(320px, .9fr) minmax(320px, 1.1fr);
  align-items: center;
  gap: 28px;
  padding: clamp(34px, 6vw, 78px);
}

.login-form-side {
  width: min(330px, 100%);
  justify-self: center;
  min-width: 0;
}

.login-logo {
  width: 154px;
  height: 66px;
  object-fit: contain;
  margin: 0 auto 22px;
  display: block;
}

.login-form-side h1 {
  margin: 0 0 8px;
  color: #343434;
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.1;
  font-weight: 900;
}

.login-form-side p {
  margin: 0 0 24px;
  color: #8b7d74;
  font-size: 13px;
}

.premium-login-form {
  display: grid;
  gap: 14px;
  width: 100%;
  min-width: 0;
}

.premium-login-form label {
  min-width: 0;
}

.premium-login-form label > span {
  display: block;
  margin: 0 0 6px 28px;
  color: #6f625b;
  font-size: 12px;
  font-weight: 700;
}

.login-input-shell {
  min-height: 48px;
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  align-items: center;
  border: 1px solid rgba(45, 38, 32, .32);
  border-radius: 999px;
  background: rgba(255, 255, 255, .56);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.38);
  overflow: hidden;
  isolation: isolate;
}

.login-input-shell em {
  width: 24px;
  height: 24px;
  margin-left: 12px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #7f746d;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  background: #fff;
}

.login-input-shell input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  min-height: 44px;
  border: 0;
  border-radius: inherit;
  background: transparent;
  padding: 0 18px;
  color: #343434;
  outline: 0;
}

.login-input-shell input:-webkit-autofill,
.login-input-shell input:-webkit-autofill:hover,
.login-input-shell input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px rgba(255,255,255,.56) inset !important;
  -webkit-text-fill-color: #343434 !important;
  border-radius: 999px !important;
}

.login-input-shell:focus-within {
  border-color: #275A53;
  box-shadow: 0 0 0 4px rgba(39, 90, 83, .12);
}

.login-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 2px;
  font-size: 12px;
}

.login-row a { color: #6f625b; font-weight: 800; }

.premium-login-button {
  min-height: 50px;
  margin-top: 18px;
  border: 0;
  border-radius: 999px;
  background: #f9dcc8;
  color: #6d4d3c;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(249, 220, 200, .7);
  transition: transform .2s ease, background .2s ease;
}

.premium-login-button:hover {
  transform: translateY(-1px);
  background: #f4cbb0;
}

.login-helper {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  color: #b0a49d;
  font-size: 12px;
}

.login-helper span {
  height: 1px;
  background: #ead9cf;
}

.login-art-side {
  min-height: 430px;
  display: grid;
  place-items: center;
}

.login-art-circle {
  position: relative;
  width: min(360px, 78vw);
  aspect-ratio: 1;
  border-radius: 50% 50% 0 0;
  background: linear-gradient(180deg, #ffe0cb, #ffd7bf);
  overflow: hidden;
}

.login-person {
  position: absolute;
  left: 50%;
  bottom: 34px;
  width: 220px;
  height: 250px;
  transform: translateX(-50%);
}

.login-person .head {
  position: absolute;
  left: 78px;
  top: 28px;
  width: 66px;
  height: 74px;
  border-radius: 42% 42% 48% 48%;
  background: #d9a084;
  box-shadow: inset -8px -10px 0 rgba(122,73,55,.12);
}

.login-person .hair {
  position: absolute;
  left: 68px;
  top: 18px;
  width: 82px;
  height: 42px;
  border-radius: 50% 50% 38% 38%;
  background: #2f2828;
}

.login-person .body {
  position: absolute;
  left: 46px;
  top: 104px;
  width: 128px;
  height: 126px;
  border-radius: 42px 42px 18px 18px;
  background: #f7f7f2;
}

.login-person .laptop {
  position: absolute;
  left: 0;
  top: 148px;
  width: 186px;
  height: 72px;
  border-radius: 8px 8px 4px 4px;
  background: linear-gradient(135deg, #e9e1d7, #cfc8bf);
  transform: skewX(12deg);
  box-shadow: 0 18px 26px rgba(54,42,35,.16);
}

.install-shell, .login-card { width: min(760px, 100%); }

.install-card, .login-card { background: white; border: 1px solid var(--line); border-radius: 8px; padding: 32px; box-shadow: 0 8px 24px rgba(0,0,0,.12); }

.form-grid, .admin-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }

.admin-list { display: grid; gap: 12px; }

@media (max-width: 576px) {
.room-panel, .install-card, .login-card, .admin-section { padding: 18px; }
}

/* Public legal, contact and media-map utilities */
.footer-legal { display: flex; flex-wrap: wrap; gap: 10px 14px; margin-top: 14px; }

.media-map-table { display: grid; gap: 12px; }

.media-map-table > .media-map-row { display: grid; grid-template-columns: 74px minmax(140px,1fr) 150px 80px minmax(120px,1fr); gap: 12px; align-items: center; border: 1px solid #eee7dd; border-radius: 8px; padding: 10px; }

.media-map-table > .media-map-row img { width: 74px; height: 54px; object-fit: cover; border-radius: 6px; background: #f3eee7; }

.media-map-table > .media-map-row input, .media-map-table > .media-map-row select { min-height: 40px; border: 1px solid #ded8cf; border-radius: 6px; padding: 8px; }

.media-map-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 18px 0 22px;
}

.media-map-toolbar [data-media-map-status] {
  margin-left: auto;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  border-radius: 999px;
  background: #f4f0e8;
  color: #275a53;
  font-weight: 900;
}

.media-map-toolbar [data-media-map-status].error {
  color: #a81f1f;
  background: #fff2f2;
}

.media-map-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
}

.media-map-card {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 14px;
  border: 1px solid #e8e1d7;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(33, 37, 41, .06);
}

.media-map-card.is-matched {
  border-color: rgba(39, 90, 83, .32);
  background: #f4fbf8;
}

.media-map-card.is-pending {
  border-color: rgba(245, 171, 30, .55);
  background: #fffaf0;
  box-shadow: 0 10px 24px rgba(245, 171, 30, .14);
}

.media-map-thumb {
  width: 200px;
  height: 200px;
  max-width: 100%;
  margin: 0 auto;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #f8f9fa;
  overflow: hidden;
}

.media-map-thumb img {
  width: 200px;
  height: 200px;
  object-fit: cover;
  display: block;
}

.media-map-card strong {
  min-height: 34px;
  color: #212529;
  font-size: 13px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.media-map-card small {
  min-height: 32px;
  color: #6f6f6f;
  font-size: 11px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.media-map-card select {
  width: 100%;
  min-height: 42px;
  border: 1px solid #ded8cf;
  border-radius: 8px;
  padding: 8px 10px;
  background: #fff;
  color: #333;
  font-weight: 800;
}

.media-map-card em {
  justify-self: start;
  padding: 5px 10px;
  border-radius: 999px;
  background: #f4f0e8;
  color: #6f6f6f;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.media-map-card.is-matched em {
  background: rgba(39, 90, 83, .12);
  color: #275a53;
}

.media-map-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}

.media-map-pagination a {
  min-width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  border: 1px solid #e8e1d7;
  border-radius: 999px;
  color: #333;
  text-decoration: none;
  font-weight: 900;
}

.media-map-pagination a.active {
  background: #275a53;
  border-color: #275a53;
  color: #fff;
}

.gallery-admin-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; margin-top: 18px; }

.gallery-admin-grid figure { margin: 0; border: 1px solid #eee7dd; border-radius: 8px; overflow: hidden; background: #fff; }

.gallery-admin-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }

.gallery-admin-grid figcaption { padding: 10px; font-weight: 800; font-size: 13px; }

.admin-record.unread { border-color: rgba(47,128,237,.32); box-shadow: 0 0 0 3px rgba(47,128,237,.08); }

.media-map-list > .media-map-row {
  grid-template-columns: 96px minmax(120px, .35fr) minmax(420px, 1fr) minmax(160px, .25fr) 130px 110px;
  gap: 14px;
  align-items: center;
  overflow: visible;
}

.media-map-list > .media-map-row .image-source-control {
  grid-template-columns: 116px minmax(180px, 1fr);
  min-width: 0;
}

.media-map-list > .media-map-row .image-source-control input[type="file"] {
  grid-column: 2;
  padding: 7px;
  overflow: hidden;
}

.media-map-list > .media-map-row > input[name="alt"],
.media-map-list > .media-map-row > input[name="sort_order"] {
  min-width: 0;
}

.media-map-list > .media-map-row button {
  justify-self: start;
  min-width: 96px;
}

@media (max-width: 980px) {
.contact-grid, .media-map-table > .media-map-row { grid-template-columns: 1fr; }

.media-map-list > .media-map-row { grid-template-columns: 72px minmax(0,1fr); }

.media-map-list > .media-map-row .image-source-control,
  .media-map-list > .media-map-row > input,
  .media-map-list > .media-map-row button { grid-column: 1 / -1; }

.gallery-admin-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 640px) {
.gallery-admin-grid { grid-template-columns: 1fr; }
}

.cafe-lang-pill,
.cafe-cart-pill,
.cafe-login-pill {
  min-height: 45px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 999px;
  padding: 0 18px;
  text-decoration: none;
  white-space: nowrap;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
}

.cafe-cart-pill,
.cafe-login-pill {
  background: #222945;
  color: #fff;
}

@media (max-width: 1023px) {
.cafe-shop-nav,
  .cafe-lang-pill,
  .cafe-login-pill {
    display: none;
  }
}

.qr-body .qr-discount-badge {
  position: absolute;
  z-index: 4;
  top: 14px;
  right: 14px;
  min-height: 28px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #dc3545;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(220, 53, 69, .22);
}

body.admin-body [data-tab-button],
body.admin-body .drag-handle,
body.admin-body .theme-preset,
body.admin-body .campaign-preview-card > button,
body.admin-body .media-map-pagination a,
body.admin-body .order-card button {
  box-shadow: none;
}

/* Page editing admin system */
body.admin-body .admin-readable-title {
  display: grid;
  gap: 4px;
  margin-bottom: 18px;
  padding: 16px 18px;
  border: 1px solid rgba(39,90,83,.18);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(39,90,83,.10), rgba(230,201,122,.14));
}

body.admin-body .admin-readable-title span {
  color: #978667;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

body.admin-body .admin-readable-title strong {
  color: #20233a;
  font-size: 20px;
}

body.admin-body .admin-readable-title small {
  color: #65656f;
  font-weight: 700;
}

body.admin-body .page-admin-system .admin-panel-box {
  border: 1px solid #e8dfd2;
  border-radius: 16px;
  padding: 16px;
  margin: 18px 0;
  background: #fffaf2;
}

body.admin-body .page-admin-system summary {
  cursor: pointer;
  font-weight: 900;
  color: #275a53;
  margin-bottom: 14px;
}

body.admin-body .page-admin-tools {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 220px;
  gap: 12px;
  margin: 18px 0;
}

body.admin-body .page-admin-tools input,
body.admin-body .page-admin-tools select {
  min-height: 44px;
  border: 1px solid #e2e2e2;
  border-radius: 12px;
  padding: 10px 12px;
}

body.admin-body .admin-table-wrap {
  overflow-x: auto;
}

body.admin-body table.admin-table {
  width: 100%;
  border-collapse: collapse;
}

body.admin-body table.admin-table th,
body.admin-body table.admin-table td {
  padding: 12px;
  border-bottom: 1px solid #efe8dc;
  text-align: left;
  vertical-align: middle;
}

body.admin-body table.admin-table th {
  color: #76684e;
  font-size: 12px;
  text-transform: uppercase;
}

body.admin-body .status-toggle {
  border: 0;
  border-radius: 999px;
  background: #9ca3af;
  color: #fff;
  padding: 8px 14px;
  font-weight: 900;
  cursor: pointer;
}

body.admin-body .status-toggle.active {
  background: #275a53;
}

body.admin-body .order-actions form {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}

body.admin-body .order-actions button {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  border: 1px solid #ddd2c0;
  background: #fff;
  cursor: pointer;
}

body.admin-body .page-edit-row > td {
  background: #fffaf2;
}

body.admin-body .edit-page-form {
  padding: 14px;
  border: 1px solid #eadfcd;
  border-radius: 16px;
}

body.admin-body .current-page-image {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #76684e;
  font-weight: 800;
}

body.admin-body .current-page-image img {
  width: 96px;
  height: 72px;
  object-fit: cover;
  border-radius: 12px;
}

body.admin-body .seo-accordion {
  border: 1px solid #eee2d1;
  border-radius: 14px;
  padding: 12px;
  background: #fff;
}

body.admin-body .image-choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 12px;
  max-height: 360px;
  overflow: auto;
}

body.admin-body .image-choice-grid button {
  border: 1px solid #e6ddce;
  background: #fff;
  border-radius: 14px;
  padding: 8px;
  text-align: left;
  cursor: pointer;
}

body.admin-body .image-choice-grid img {
  width: 100%;
  height: 90px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
  margin-bottom: 6px;
}

body.admin-body .image-choice-grid span {
  display: block;
  font-size: 11px;
  color: #6f6f6f;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.admin-body .page-block-manager {
  margin-top: 28px;
}

body.admin-body .page-block-list {
  display: grid;
  gap: 14px;
  margin-top: 16px;
}

body.admin-body .page-block-card {
  border: 1px solid #e9dece;
  border-radius: 16px;
  background: #fff;
  padding: 16px;
}

body.admin-body .page-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

body.admin-body .page-block-new {
  border: 1px dashed #d8c8b1;
  border-radius: 14px;
  padding: 14px;
  background: #fff;
}

@media (max-width: 760px) {
body.admin-body .page-admin-tools { grid-template-columns: 1fr; }
}

.admin-toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 99999;
  transform: translateY(16px);
  opacity: 0;
  padding: 12px 16px;
  border-radius: 999px;
  background: #275A53;
  color: #fff;
  font-weight: 900;
  box-shadow: 0 16px 36px rgba(32,35,58,.22);
  transition: opacity .22s ease, transform .22s ease;
}

.admin-toast.error { background: #dc3545; }

.admin-toast.show { opacity: 1; transform: translateY(0); }

/* Cleaner admin media/page/order layout pass */
body.admin-body .media-manager-page {
  max-width: 1280px;
}

body.admin-body .media-manager-page .section-head {
  align-items: center;
  margin-bottom: 18px;
}

body.admin-body .media-manager-page .section-head h2 {
  margin-bottom: 0;
}

body.admin-body .media-manager-page .media-toolbar {
  grid-template-columns: 1fr;
  padding: 16px;
  border: 1px solid #ece7dc;
  border-radius: 18px;
  background: #fffaf2;
}

body.admin-body .media-manager-page .media-search-form,
body.admin-body .media-manager-page .media-upload-form,
body.admin-body .media-manager-page .media-folder-form {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(160px, .8fr) auto;
  gap: 10px;
}

body.admin-body .media-manager-page .media-upload-form {
  grid-template-columns: minmax(160px, .8fr) minmax(220px, 1fr) auto;
}

body.admin-body .media-manager-page .media-folder-form {
  grid-template-columns: minmax(220px, 1fr) auto;
  max-width: 520px;
}

body.admin-body .media-card {
  min-width: 0;
}

body.admin-body .media-card label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #6b6251;
  font-size: 12px;
  font-weight: 800;
}

body.admin-body .media-editor-panel {
  position: relative;
  padding: 0;
}

body.admin-body .media-editor-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
}

body.admin-body .media-editor-panel > h2 {
  padding: 22px 72px 14px 22px;
  border-bottom: 1px solid #eee9dd;
}

body.admin-body .media-editor-panel > .media-editor-preview,
body.admin-body .media-editor-panel > .media-editor-tools,
body.admin-body .media-editor-panel > .media-editor-usage,
body.admin-body .media-editor-panel > .record-actions {
  margin-left: 18px;
  margin-right: 18px;
}

body.admin-body .media-editor-panel > .media-editor-preview {
  margin-top: 18px;
}

body.admin-body .media-editor-panel > .media-editor-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid #eee9dd;
  border-radius: 16px;
  background: #fffaf2;
}

body.admin-body .media-editor-tools label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #524a3d;
  font-weight: 800;
}

body.admin-body .media-editor-usage {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid #eee9dd;
  border-radius: 16px;
  background: #fff;
}

body.admin-body .media-editor-panel > .record-actions {
  justify-content: flex-end;
  padding: 16px 0 18px;
}

body.admin-body .page-edit-row textarea[name="body"],
body.admin-body .page-block-card textarea[name="body"],
body.admin-body .page-block-new textarea[name="body"] {
  min-height: 180px;
  resize: vertical;
}

body.admin-body .page-admin-table .record-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

body.admin-body .page-admin-table .record-actions form {
  margin: 0;
}

body.admin-body .drag-order-grid {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

body.admin-body .drag-order-card {
  border-radius: 16px;
  border-color: #e9e2d6;
}

body.admin-body .drag-order-card .drag-handle {
  background: rgba(39,90,83,.12);
  color: #275A53;
}

@media (max-width: 760px) {
body.admin-body .media-manager-page .media-search-form,
  body.admin-body .media-manager-page .media-upload-form,
  body.admin-body .media-manager-page .media-folder-form {
    grid-template-columns: 1fr;
  }

body.admin-body .media-editor-panel > .media-editor-preview {
    grid-template-columns: 1fr;
  }
}

/* Final public mobile menu spacing override */
@media (max-width: 767px) {
  body:not(.admin-body) .site-mobile-menu {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    background: #fff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  body:not(.admin-body) .site-mobile-menu-head,
  body:not(.admin-body) .site-mobile-menu nav {
    width: 100% !important;
    max-width: 430px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  body:not(.admin-body) .site-mobile-menu nav a {
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

body.admin-body #menu-tables .section-head {
  align-items: center;
}

@media print {
body.admin-body {
    display: block !important;
    background: #fff !important;
  }

body.admin-body .admin-sidebar,
  body.admin-body .admin-topbar,
  body.admin-body .section-head,
  body.admin-body #menu-tables > .muted,
  body.admin-body .qr-table-stats,
  body.admin-body .qr-table-workbench,
  body.admin-body .qr-table-list-head,
  body.admin-body .qr-table-wrap,
  body.admin-body .qr-print-panel > .qr-table-list-head,
  body.admin-body .admin-mobile-nav {
    display: none !important;
  }

body:not(.admin-body) .mobile-menu-tabbar,
  body:not(.admin-body) .site-mobile-menu,
  body:not(.admin-body) .site-mobile-menu-toggle {
    display: none !important;
  }

body.admin-body .admin-main,
  body.admin-body .admin-section,
  body.admin-body #menu-tables,
  body.admin-body .qr-print-panel {
    display: block !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: #fff !important;
  }

body.admin-body .admin-section:not(#menu-tables) {
    display: none !important;
  }

body.admin-body .qr-print-sheet {
    display: grid !important;
    grid-template-columns: repeat(2, 7cm);
    gap: .22cm .32cm;
    justify-content: start;
    align-content: start;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: #fff;
    position: relative;
    width: 14.32cm;
    min-height: 27.6cm;
    margin: 0 auto;
  }

body.admin-body .qr-print-area-title {
    display: none !important;
  }

body.admin-body .qr-print-card {
    width: 7cm;
    height: 6.98cm;
    gap: .05cm;
    padding: .08cm .18cm .08cm;
    border: .035cm solid #111;
    border-radius: 0;
    box-shadow: none;
    position: relative;
    align-content: start;
  }

body.admin-body .qr-print-card img {
    width: 6cm;
    height: 6cm;
  }

body.admin-body .qr-print-card em {
    display: none !important;
  }

body.admin-body .qr-print-card strong {
    display: block !important;
    font-size: 9pt;
    line-height: 1.05;
    margin-top: .01cm;
    font-weight: 950;
  }

body.admin-body .qr-print-card span {
    display: block !important;
    font-size: 8pt;
    line-height: 1.05;
    font-weight: 900;
  }

body.admin-body .qr-print-card::before,
  body.admin-body .qr-print-card::after {
    content: "✂";
    position: absolute;
    color: #111;
    font-size: 8pt;
    line-height: 1;
  }

body.admin-body .qr-print-card::before {
    top: -.18cm;
    left: -.16cm;
  }

body.admin-body .qr-print-card::after {
    right: -.16cm;
    bottom: -.18cm;
    transform: rotate(180deg);
  }

body.admin-body .qr-print-card:nth-of-type(2n + 1) {
    border-right-style: dashed;
  }

body.admin-body .qr-print-card:nth-of-type(2n) {
    border-left-style: dashed;
  }
}

/* Role permission editor */
body.admin-body .role-permission-form {
  gap: 18px !important;
}

body.admin-body .role-permission-accordion {
  display: grid !important;
  gap: 14px !important;
}

body.admin-body .role-permission-card,
body.admin-body .role-permission-subcard {
  border: 1px solid #e5e7eb !important;
  border-radius: 16px !important;
  background: #ffffff !important;
  overflow: hidden !important;
}

body.admin-body .role-permission-card > summary,
body.admin-body .role-permission-subcard > summary {
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  padding: 16px 18px !important;
  font-weight: 900 !important;
  color: #101828 !important;
  list-style: none !important;
}

body.admin-body .role-permission-card > summary::-webkit-details-marker,
body.admin-body .role-permission-subcard > summary::-webkit-details-marker {
  display: none !important;
}

body.admin-body .role-permission-card > summary {
  background: linear-gradient(135deg, #f8fafc, #eef6f4) !important;
}

body.admin-body .role-permission-card > summary::after,
body.admin-body .role-permission-subcard > summary::after {
  content: "⌄" !important;
  color: #275A53 !important;
  font-weight: 900 !important;
  transition: transform .18s ease !important;
}

body.admin-body .role-permission-card[open] > summary::after,
body.admin-body .role-permission-subcard[open] > summary::after {
  transform: rotate(180deg) !important;
}

body.admin-body .role-permission-card summary small {
  color: #667085 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

body.admin-body .role-permission-columns {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
  padding: 16px !important;
}

body.admin-body .role-permission-panel {
  display: grid !important;
  gap: 12px !important;
  align-content: start !important;
}

body.admin-body .role-permission-panel > strong {
  color: #275A53 !important;
  font-size: 13px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

body.admin-body .role-permission-subcard > summary {
  min-height: 44px !important;
  padding: 12px 14px !important;
  background: #fbfcfe !important;
  font-size: 14px !important;
}

body.admin-body .role-permission-subcard .role-check-grid {
  padding: 0 14px 14px !important;
}

body.admin-body .role-check-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

body.admin-body .role-check-grid label {
  min-height: 42px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 12px !important;
  border: 1px solid #edf2f7 !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  color: #344054 !important;
  font-weight: 800 !important;
}

@media (max-width: 980px) {
body.admin-body .role-permission-columns,
  body.admin-body .role-check-grid {
    grid-template-columns: 1fr !important;
  }
}

body.admin-body .mail-test-box .btn.ghost {
  align-items: center;
  background: linear-gradient(135deg, #275a53 0%, #1f4a44 100%);
  border: 0;
  border-radius: 14px;
  box-shadow: 0 14px 30px rgba(39, 90, 83, .22);
  color: #fff;
  display: inline-flex;
  font-weight: 800;
  justify-content: center;
  min-height: 46px;
  padding: 12px 22px;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

body.admin-body .mail-test-box .btn.ghost:hover {
  box-shadow: 0 18px 36px rgba(39, 90, 83, .3);
  color: #fff;
  filter: brightness(1.04);
  transform: translateY(-1px);
}

.feedback-settings-grid {
  align-items: stretch;
  display: grid;
  gap: 22px;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 390px);
}

.feedback-settings-grid .feedback-settings-form {
  margin: 0;
}

.feedback-admin-form {
  background: #fff;
  border: 1px solid #edf2f7;
  border-radius: 16px;
  display: grid;
  gap: 10px;
  padding: 14px;
}

.feedback-admin-form label {
  color: #475569;
  font-size: 12px;
  font-weight: 800;
}

.feedback-admin-form select,
.feedback-admin-form textarea {
  margin-top: 6px;
  width: 100%;
}

@media (max-width: 900px) {
.feedback-settings-grid,
  .feedback-card {
    grid-template-columns: 1fr;
  }
}

/* Medic-inspired admin dashboard skin */
body.admin-body {
  --admin-sidebar-wide: 260px;
  --admin-sidebar-mini: 76px;
  --admin-bg: #f7faff;
  --admin-panel: #ffffff;
  --admin-line: #edf2f7;
  --admin-text: #17243b;
  --admin-muted: #93a1b5;
  --admin-blue: #2f80ed;
  --admin-teal: #35c5ba;
  --admin-green: #2ecb89;
  --admin-orange: #ffb547;
  --admin-red: #ff5c7a;
  --admin-shadow: 0 12px 28px rgba(31, 53, 88, .045);
  background: var(--admin-bg) !important;
  color: var(--admin-text) !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  grid-template-columns: var(--admin-sidebar-wide) minmax(0, 1fr) !important;
}

body.admin-body .admin-sidebar {
  width: var(--admin-sidebar-wide) !important;
  min-width: var(--admin-sidebar-wide) !important;
  max-width: var(--admin-sidebar-wide) !important;
  background: #fff !important;
  border-right: 1px solid var(--admin-line) !important;
  box-shadow: none !important;
  padding: 24px 18px !important;
}

body.admin-body .admin-sidebar-brand {
  padding: 0 2px 28px !important;
  border-bottom: 1px solid #f2f5f9;
  margin-bottom: 14px;
}

body.admin-body .admin-sidebar-brand strong {
  color: #0b2e6f !important;
  font-size: 22px !important;
  letter-spacing: -.02em;
}

body.admin-body .admin-sidebar-brand strong::after {
  content: ".";
  color: var(--admin-teal);
}

body.admin-body .admin-role {
  color: #9aa8b8 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

body.admin-body .admin-nav {
  gap: 3px !important;
}

body.admin-body .admin-nav-group {
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

body.admin-body .admin-sidebar .admin-nav-group-toggle {
  min-height: 42px !important;
  padding: 0 10px !important;
  color: #a0aec0 !important;
  background: transparent !important;
  border-radius: 12px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .04em;
}

body.admin-body .admin-nav-group-title {
  color: inherit !important;
}

body.admin-body .admin-nav-icon {
  width: 19px !important;
  height: 19px !important;
  color: currentColor;
  stroke-width: 1.65 !important;
}

body.admin-body .admin-nav-items {
  padding: 0 0 8px 0 !important;
  gap: 2px !important;
}

body.admin-body .admin-sidebar .admin-nav-items a,
body.admin-body .admin-sidebar .admin-preview-link {
  min-height: 44px !important;
  padding: 0 12px !important;
  border-radius: 12px !important;
  color: #8a98aa !important;
  background: transparent !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

body.admin-body .admin-sidebar .admin-nav-items a .admin-nav-icon,
body.admin-body .admin-sidebar .admin-preview-link .admin-nav-icon {
  width: 32px !important;
  height: 32px !important;
  flex-basis: 32px !important;
  padding: 7px;
  border-radius: 10px;
  background: rgba(47, 128, 237, .10);
  color: #2f80ed;
  stroke-width: 1.9 !important;
}

body.admin-body .admin-sidebar .admin-nav-group:nth-child(2n) .admin-nav-items a .admin-nav-icon {
  background: rgba(46, 203, 137, .12);
  color: #2ecb89;
}

body.admin-body .admin-sidebar .admin-nav-group:nth-child(3n) .admin-nav-items a .admin-nav-icon {
  background: rgba(255, 181, 71, .16);
  color: #ffb547;
}

body.admin-body .admin-sidebar .admin-nav-group:nth-child(4n) .admin-nav-items a .admin-nav-icon {
  background: rgba(255, 92, 122, .12);
  color: #ff5c7a;
}

body.admin-body .admin-sidebar .admin-nav-group:nth-child(5n) .admin-nav-items a .admin-nav-icon {
  background: rgba(53, 197, 186, .14);
  color: #35c5ba;
}

body.admin-body .admin-sidebar .admin-nav-group:nth-child(6n) .admin-nav-items a .admin-nav-icon {
  background: rgba(111, 66, 193, .11);
  color: #6f42c1;
}

body.admin-body .admin-sidebar .admin-nav-items a:hover,
body.admin-body .admin-sidebar .admin-preview-link:hover {
  color: var(--admin-blue) !important;
  background: #f4f9ff !important;
}

body.admin-body .admin-sidebar .admin-nav-items a.active {
  color: #26384f !important;
  background: #f5fbfb !important;
  box-shadow: inset 3px 0 0 var(--admin-teal) !important;
}

body.admin-body .admin-sidebar .admin-nav-items a.active .admin-nav-icon {
  color: #fff !important;
  background: linear-gradient(135deg, var(--admin-teal), var(--admin-blue)) !important;
  box-shadow: 0 10px 18px rgba(47, 128, 237, .18);
}

body.admin-body .admin-nav-badge {
  background: var(--admin-red) !important;
}

body.admin-body .admin-preview-link {
  margin-top: 18px;
  border: 1px dashed #dbe7f2;
}

body.admin-body .admin-sidebar .admin-sidebar-collapse,
body.admin-body .admin-mobile-menu-toggle,
body.admin-body .admin-icon-btn,
body.admin-body .admin-icon-link {
  min-width: 38px !important;
  width: 38px !important;
  min-height: 38px !important;
  height: 38px !important;
  border-radius: 12px !important;
  background: #fff !important;
  border: 1px solid #edf2f7 !important;
  color: #9aa8b8 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

body.admin-body .admin-icon-link {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
}

body.admin-body .admin-icon-link.has-badge {
  background: #eef9f1 !important;
  border-color: #cdebd5 !important;
  color: #275a53 !important;
}

body.admin-body .admin-notification-badge {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 0 0 3px #fff;
}

body.admin-body .admin-topbar {
  min-height: 72px !important;
  background: rgba(255,255,255,.96) !important;
  border-bottom: 1px solid var(--admin-line) !important;
  box-shadow: none !important;
  padding: 0 30px !important;
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
}

body.admin-body .admin-topbar-search {
  flex: 1 1 auto;
  max-width: 520px;
  height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0 16px;
  border: 0;
  border-radius: 12px;
  background: #fff;
  color: #b0bdca;
}

body.admin-body .admin-topbar-search input {
  width: 100%;
  min-height: 0 !important;
  height: 100%;
  border: 0 !important;
  outline: 0;
  padding: 0 !important;
  background: transparent !important;
  color: var(--admin-text);
  font-weight: 500;
}

body.admin-body .admin-topbar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

body.admin-body .admin-profile-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 12px;
  border-left: 1px solid var(--admin-line);
}

body.admin-body .admin-profile-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--admin-teal), var(--admin-blue));
  color: #fff;
  font-weight: 800;
}

body.admin-body .admin-profile-chip strong,
body.admin-body .admin-profile-chip small {
  display: block;
  line-height: 1.2;
}

body.admin-body .admin-profile-chip strong {
  font-size: 13px;
  color: #24344d;
}

body.admin-body .admin-profile-chip small {
  font-size: 11px;
  color: #97a5b7;
}

body.admin-body .admin-logout-btn {
  min-height: 38px !important;
  padding: 0 14px !important;
  border-radius: 12px !important;
  background: #f7faff !important;
  color: #718096 !important;
  border: 1px solid #edf2f7 !important;
  box-shadow: none !important;
}

body.admin-body .admin-main {
  padding: 102px 34px 36px !important;
  gap: 24px !important;
}

body.admin-body .admin-hero {
  background: transparent !important;
  color: var(--admin-text) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
}

body.admin-body .admin-hero h1 {
  color: var(--admin-text) !important;
  font-size: 32px !important;
  letter-spacing: -.035em;
}

body.admin-body .admin-hero p,
body.admin-body .muted {
  color: #91a0b4 !important;
}

body.admin-body .admin-hero .super-admin-hero-message {
  color: var(--admin-text) !important;
  font-size: clamp(28px, 4vw, 56px) !important;
  font-weight: 900 !important;
  line-height: 1.08 !important;
  text-align: center !important;
  letter-spacing: -0.02em !important;
  width: 100% !important;
  margin: 18px auto 0 !important;
}

body.admin-body .qr-lock:has(.super-admin-hero-message) {
  min-width: min(100%, 560px) !important;
  text-align: center !important;
}

body.admin-body .eyebrow {
  color: var(--admin-teal) !important;
  letter-spacing: .08em;
}

body.admin-body .qr-lock {
  background: #fff !important;
  color: #7e8ca0 !important;
  border: 1px solid var(--admin-line) !important;
  border-radius: 16px !important;
  box-shadow: var(--admin-shadow) !important;
  padding: 18px 20px !important;
}

body.admin-body .qr-lock strong {
  color: var(--admin-blue) !important;
}

body.admin-body .admin-metrics {
  gap: 24px !important;
}

body.admin-body .admin-metrics article,
body.admin-body .speed-card,
body.admin-body .admin-section,
body.admin-body .admin-record,
body.admin-body .dashboard-card,
body.admin-body .product-stat-charts article,
body.admin-body .product-stat-table,
body.admin-body .chart-box,
body.admin-body .table-box {
  background: var(--admin-panel) !important;
  border: 1px solid #f0f4f8 !important;
  border-radius: 4px !important;
  box-shadow: var(--admin-shadow) !important;
}

body.admin-body .admin-metrics article {
  position: relative;
  min-height: 132px;
  padding: 24px 24px 18px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: end !important;
  gap: 16px !important;
}

body.admin-body .admin-metrics article::before {
  content: "";
  width: 34px;
  height: 34px;
  border-radius: 12px;
  position: absolute;
  top: 24px;
  left: 24px;
  background: rgba(47,128,237,.1);
}

body.admin-body .admin-metrics article:nth-child(2)::before { background: rgba(46,203,137,.12); }

body.admin-body .admin-metrics article:nth-child(3)::before { background: rgba(255,181,71,.16); }

body.admin-body .admin-metrics article:nth-child(4)::before { background: rgba(53,197,186,.14); }

body.admin-body .admin-metrics span,
body.admin-body .speed-card span {
  margin-left: 48px;
  color: #8391a5 !important;
  font-size: 13px;
  font-weight: 600 !important;
}

body.admin-body .admin-metrics span {
  align-self: start !important;
  line-height: 1.35 !important;
  padding-top: 3px !important;
}

body.admin-body .admin-metrics strong,
body.admin-body .speed-card strong {
  display: block;
  margin-top: 10px;
  color: #1d2b40 !important;
  font-size: 34px !important;
  letter-spacing: -.035em;
}

body.admin-body .admin-metrics strong {
  grid-column: 2 !important;
  grid-row: 1 / span 2 !important;
  align-self: center !important;
  justify-self: end !important;
  margin-top: 0 !important;
  text-align: right !important;
  white-space: nowrap !important;
}

body.admin-body .admin-columns {
  gap: 24px !important;
}

body.admin-body .admin-section {
  padding: 26px !important;
}

body.admin-body .admin-section h2,
body.admin-body .section-head h2 {
  color: #1d2b40 !important;
  font-size: 24px !important;
  letter-spacing: -.025em;
}

body.admin-body input,
body.admin-body select,
body.admin-body textarea {
  border: 1px solid #e8eef5 !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: #26384f !important;
  box-shadow: none !important;
}

body.admin-body input:focus,
body.admin-body select:focus,
body.admin-body textarea:focus {
  border-color: rgba(47,128,237,.45) !important;
  box-shadow: 0 0 0 4px rgba(47,128,237,.08) !important;
}

body.admin-body .btn.primary,
body.admin-body .admin-section > form > button,
body.admin-body .admin-record > button,
body.admin-body .inline-admin-form button,
body.admin-body .record-actions button:not(.danger) {
  border-radius: 10px !important;
  background: var(--admin-blue) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 10px 20px rgba(47,128,237,.16) !important;
}

body.admin-body .btn.ghost {
  border-color: #dbe7f2 !important;
  color: #718096 !important;
  background: #fff !important;
  border-radius: 10px !important;
}

body.admin-body table.admin-table,
body.admin-body .admin-table {
  background: #fff !important;
  border-radius: 4px !important;
}

body.admin-body table.admin-table th {
  color: #a4b1c2 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  background: #fbfdff;
}

body.admin-body table.admin-table td {
  color: #5f6f84 !important;
  border-bottom-color: #f0f4f8 !important;
}

body.admin-body .admin-mobile-bottom-nav {
  background: rgba(255,255,255,.98) !important;
  border-top: 1px solid #edf2f7 !important;
  box-shadow: 0 -12px 26px rgba(31,53,88,.08) !important;
}

body.admin-body .admin-mobile-bottom-nav a.active {
  color: var(--admin-blue) !important;
}

@media (min-width: 1024px) and (max-width: 1279px) {
body.admin-body .admin-topbar-search,
  body.admin-body .admin-profile-chip span {
    display: none;
  }
}

@media (max-width: 1023px) {
body.admin-body .admin-topbar {
    left: 0 !important;
    padding: 0 18px !important;
  }

body.admin-body .admin-main {
    padding-top: 24px !important;
  }

body.admin-body .admin-topbar-search {
    max-width: none;
  }
}

@media (max-width: 767px) {
body.admin-body .admin-topbar {
    min-height: 64px !important;
    gap: 10px !important;
  }

body.admin-body .admin-topbar-search {
    height: 40px;
    padding-inline: 10px;
  }

body.admin-body .admin-topbar-actions,
  body.admin-body .admin-profile-chip {
    display: none;
  }

body.admin-body .admin-main {
    padding: 16px 14px 92px !important;
  }

body.admin-body .admin-metrics article {
    min-height: 112px;
  }
}

/* Inner admin pages modernization */
body.admin-body.admin-searching .admin-search-hidden {
  display: none !important;
}

body.admin-body .admin-search-hit {
  outline: 1px solid rgba(47, 128, 237, .18);
  outline-offset: 2px;
}

body.admin-body .admin-panel-box,
body.admin-body details.admin-panel-box,
body.admin-body .page-toolbar,
body.admin-body .product-stat-filter,
body.admin-body .media-toolbar,
body.admin-body .bulk-price-card,
body.admin-body .mobile-menu-editor,
body.admin-body .phone-preview,
body.admin-body .campaign-admin-preview,
body.admin-body .theme-preset-grid,
body.admin-body .role-check-grid,
body.admin-body .backup-grid > *,
body.admin-body .page-block-card,
body.admin-body .media-map-row,
body.admin-body .bulk-price-row,
body.admin-body .sortable-product-card,
body.admin-body .drag-order-card,
body.admin-body .gallery-admin-grid figure {
  background: #fff !important;
  border: 1px solid #f0f4f8 !important;
  border-radius: 4px !important;
  box-shadow: 0 10px 24px rgba(31, 53, 88, .04) !important;
}

body.admin-body details.admin-panel-box,
body.admin-body .admin-panel-box {
  padding: 20px !important;
  margin: 18px 0 !important;
}

body.admin-body details.admin-panel-box > summary,
body.admin-body .accordion-header,
body.admin-body .card-header,
body.admin-body .record-title {
  color: #1d2b40 !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: -.01em;
}

body.admin-body .record-title {
  padding-bottom: 10px;
  border-bottom: 1px solid #f2f6fa;
}

body.admin-body .record-title span,
body.admin-body .admin-readable-title small,
body.admin-body small {
  color: #91a0b4 !important;
  font-weight: 600 !important;
}

body.admin-body .admin-grid,
body.admin-body .form-grid,
body.admin-body .inline-admin-form,
body.admin-body .media-search-form,
body.admin-body .media-upload-form,
body.admin-body .media-folder-form,
body.admin-body .product-stat-filter,
body.admin-body .page-admin-tools {
  gap: 16px !important;
}

body.admin-body .admin-grid label,
body.admin-body .inline-admin-form label,
body.admin-body .form-grid label,
body.admin-body label {
  color: #5f6f84 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

body.admin-body .admin-grid input,
body.admin-body .admin-grid textarea,
body.admin-body .admin-grid select,
body.admin-body .inline-admin-form input,
body.admin-body .inline-admin-form select,
body.admin-body .inline-admin-form textarea,
body.admin-body .page-toolbar input,
body.admin-body .page-toolbar select,
body.admin-body .page-admin-tools input,
body.admin-body .page-admin-tools select,
body.admin-body .media-toolbar input,
body.admin-body .media-toolbar select,
body.admin-body .media-toolbar textarea,
body.admin-body .product-stat-filter input,
body.admin-body .product-stat-filter select {
  min-height: 44px !important;
  border: 1px solid #e8eef5 !important;
  border-radius: 10px !important;
  background: #fbfdff !important;
  color: #26384f !important;
  padding: 10px 13px !important;
}

body.admin-body textarea {
  line-height: 1.65 !important;
}

body.admin-body .admin-list {
  gap: 18px !important;
}

body.admin-body .admin-record {
  padding: 20px !important;
  border-radius: 4px !important;
  background: #fff !important;
}

body.admin-body .admin-record:hover,
body.admin-body .page-block-card:hover,
body.admin-body .media-map-row:hover,
body.admin-body .sortable-product-card:hover,
body.admin-body .drag-order-card:hover {
  box-shadow: 0 16px 32px rgba(31, 53, 88, .07) !important;
}

body.admin-body .admin-tab-buttons,
body.admin-body .product-stat-tabs,
body.admin-body .category-tabs,
body.admin-body .view-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 8px !important;
  padding: 6px;
  border: 1px solid #edf2f7;
  border-radius: 14px;
  background: #fbfdff;
}

body.admin-body .admin-tab-buttons button,
body.admin-body .product-stat-tabs label,
body.admin-body .category-tabs button,
body.admin-body .view-switch button {
  min-height: 38px !important;
  border-radius: 10px !important;
  border: 0 !important;
  background: transparent !important;
  color: #7c8ca2 !important;
  box-shadow: none !important;
}

body.admin-body .admin-tab-buttons button.active,
body.admin-body .product-stat-tabs label.active,
body.admin-body .category-tabs button.active,
body.admin-body .view-switch button.active {
  background: #fff !important;
  color: #2f80ed !important;
  box-shadow: 0 8px 18px rgba(31, 53, 88, .08) !important;
}

body.admin-body .product-stat-cards article {
  border-radius: 4px !important;
  border: 1px solid #f0f4f8 !important;
  background: #fff !important;
}

body.admin-body .product-stat-cards article strong,
body.admin-body .stat-card .stat-value {
  color: #1d2b40 !important;
}

body.admin-body .media-grid .media-card,
body.admin-body [data-media-card] {
  border-radius: 4px !important;
  border-color: #f0f4f8 !important;
  background: #fff !important;
  box-shadow: 0 10px 24px rgba(31, 53, 88, .04) !important;
}

body.admin-body .status-toggle {
  border-radius: 999px !important;
  background: #f1f5f9 !important;
  color: #64748b !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.admin-body .status-toggle.active {
  background: rgba(46, 203, 137, .12) !important;
  color: #179b6b !important;
}

body.admin-body .btn.mini,
body.admin-body .record-actions .btn,
body.admin-body .record-actions button,
body.admin-body .order-actions button {
  min-height: 34px !important;
  border-radius: 9px !important;
  padding: 7px 11px !important;
}

body.admin-body .btn.danger,
body.admin-body button.danger,
body.admin-body .btn.primary.danger {
  background: #fff5f6 !important;
  color: #ff5c7a !important;
  border: 1px solid #ffd7df !important;
  box-shadow: none !important;
}

body.admin-body .admin-table-wrap {
  border: 1px solid #f0f4f8;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(31, 53, 88, .04);
}

body.admin-body .admin-table-wrap table.admin-table {
  box-shadow: none !important;
  border: 0 !important;
}

body.admin-body .image-choice-grid button,
body.admin-body .gallery-admin-grid figure,
body.admin-body .current-page-image,
body.admin-body .image-preview {
  border-color: #f0f4f8 !important;
  border-radius: 4px !important;
  background: #fbfdff !important;
}

body.admin-body .admin-alert {
  border: 0 !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 24px rgba(31, 53, 88, .05) !important;
}

@media (max-width: 767px) {
body.admin-body details.admin-panel-box,
  body.admin-body .admin-panel-box,
  body.admin-body .admin-record {
    padding: 16px !important;
  }

body.admin-body .admin-tab-buttons,
  body.admin-body .product-stat-tabs,
  body.admin-body .category-tabs,
  body.admin-body .view-switch {
    overflow-x: auto;
    flex-wrap: nowrap;
  }
}

/* Standardized media manager */
body.admin-body .media-manager-page {
  max-width: none !important;
}

body.admin-body .media-manager-page .section-head .record-actions {
  display: none !important;
}

body.admin-body .media-toolbar-standard {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 14px !important;
  margin: 18px 0 !important;
  padding: 16px !important;
  border: 1px solid #f0f4f8 !important;
  border-radius: 4px !important;
  background: #fff !important;
  box-shadow: 0 10px 24px rgba(31, 53, 88, .04) !important;
}

body.admin-body .media-toolbar-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
}

body.admin-body .media-toolbar-row.secondary {
  grid-template-columns: minmax(0, 1fr) minmax(260px, .42fr);
  padding-top: 14px;
  border-top: 1px solid #f2f6fa;
}

body.admin-body .media-manager-page .media-search-form {
  display: grid !important;
  grid-template-columns: minmax(240px, 1fr) minmax(200px, .45fr) auto !important;
  gap: 10px !important;
}

body.admin-body .media-toolbar-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

body.admin-body .media-manager-page .media-upload-form {
  display: grid !important;
  grid-template-columns: minmax(180px, .42fr) minmax(220px, 1fr) auto !important;
  gap: 10px !important;
}

body.admin-body .media-manager-page .media-folder-form {
  display: grid !important;
  grid-template-columns: minmax(180px, 1fr) auto !important;
  gap: 10px !important;
  max-width: none !important;
}

body.admin-body .media-folder-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 8px 0 18px;
  scrollbar-width: thin;
}

body.admin-body .media-folder-strip a {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid #edf2f7;
  border-radius: 999px;
  background: #fff;
  color: #7c8ca2;
  font-size: 13px;
  font-weight: 700;
}

body.admin-body .media-folder-strip a.active {
  color: #2f80ed;
  background: #f4f9ff;
  border-color: rgba(47, 128, 237, .18);
}

body.admin-body .media-grid-standard {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)) !important;
  gap: 18px !important;
}

body.admin-body .media-grid-standard .media-card {
  position: relative;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
  overflow: hidden;
  padding: 0 !important;
  border: 1px solid #f0f4f8 !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: 0 10px 24px rgba(31, 53, 88, .045) !important;
  transition: transform .18s ease, box-shadow .18s ease;
}

body.admin-body .media-grid-standard .media-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(31, 53, 88, .075) !important;
}

body.admin-body .media-grid-standard .media-thumb {
  width: 100% !important;
  aspect-ratio: 1 / .78 !important;
  height: auto !important;
  display: block !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  background: #f8fbff !important;
  overflow: hidden;
}

body.admin-body .media-grid-standard .media-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

body.admin-body .media-grid-standard .media-meta {
  min-width: 0;
  display: grid;
  gap: 6px;
  padding: 14px 14px 12px;
}

body.admin-body .media-grid-standard .media-meta strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #1d2b40;
  font-size: 14px;
}

body.admin-body .media-grid-standard .media-meta span,
body.admin-body .media-grid-standard .media-meta small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #91a0b4 !important;
  font-size: 12px;
  font-weight: 600 !important;
}

body.admin-body .media-card-check-wrap {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  width: 28px;
  height: 28px;
  display: grid !important;
  place-items: center;
  border-radius: 9px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 8px 18px rgba(31, 53, 88, .12);
}

body.admin-body .media-card-check-wrap input {
  width: 17px !important;
  height: 17px !important;
  min-height: 0 !important;
  margin: 0;
  accent-color: #2f80ed;
}

body.admin-body .media-edit-btn {
  justify-self: stretch !important;
  margin: 0 14px 14px !important;
  min-height: 36px !important;
}

body.admin-body .media-grid-standard.list-view {
  grid-template-columns: 1fr !important;
}

body.admin-body .media-grid-standard.list-view .media-card {
  grid-template-columns: 44px 108px minmax(0, 1fr) 110px !important;
  align-items: center !important;
  padding: 10px !important;
  gap: 14px !important;
}

body.admin-body .media-grid-standard.list-view .media-card-check-wrap {
  position: static;
  box-shadow: none;
  background: #f8fbff;
}

body.admin-body .media-grid-standard.list-view .media-thumb {
  width: 108px !important;
  height: 74px !important;
  aspect-ratio: auto !important;
  border-radius: 6px !important;
}

body.admin-body .media-grid-standard.list-view .media-meta {
  padding: 0 !important;
}

body.admin-body .media-grid-standard.list-view .media-edit-btn {
  margin: 0 !important;
}

body.admin-body .media-bulk-actions {
  position: sticky;
  bottom: 12px;
  z-index: 8;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
  padding: 12px;
  border: 1px solid #edf2f7;
  border-radius: 12px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 14px 34px rgba(31, 53, 88, .08);
  backdrop-filter: blur(10px);
}

@media (max-width: 980px) {
body.admin-body .media-toolbar-row,
  body.admin-body .media-toolbar-row.secondary,
  body.admin-body .media-manager-page .media-search-form,
  body.admin-body .media-manager-page .media-upload-form,
  body.admin-body .media-manager-page .media-folder-form {
    grid-template-columns: 1fr !important;
  }

body.admin-body .media-toolbar-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 640px) {
body.admin-body .media-grid-standard {
    grid-template-columns: 1fr !important;
  }

body.admin-body .media-grid-standard.list-view .media-card {
    grid-template-columns: 34px 82px minmax(0, 1fr) !important;
  }

body.admin-body .media-grid-standard.list-view .media-edit-btn {
    grid-column: 2 / -1;
  }
}

/* Unified admin content system */
body.admin-body .btn::before,
body.admin-body .btn::after,
body.admin-body button::before,
body.admin-body button::after {
  display: none !important;
  content: none !important;
}

body.admin-body .btn,
body.admin-body button,
body.admin-body input[type="submit"],
body.admin-body input[type="button"] {
  min-height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 9px 16px !important;
  border-radius: 10px !important;
  border: 1px solid transparent !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 750 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  cursor: pointer;
  transform: none !important;
  transition: background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}

body.admin-body .btn.primary,
body.admin-body button.btn.primary,
body.admin-body .admin-section > form > button:not(.ghost):not(.danger),
body.admin-body .admin-record > button:not(.ghost):not(.danger),
body.admin-body .inline-admin-form button:not(.ghost):not(.danger),
body.admin-body .record-actions button:not(.ghost):not(.danger):not(.mini),
body.admin-body [data-media-map-save] {
  background: #2f80ed !important;
  border-color: #2f80ed !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(47, 128, 237, .14) !important;
}

body.admin-body .btn.primary:hover,
body.admin-body button.btn.primary:hover,
body.admin-body .admin-section > form > button:not(.ghost):not(.danger):hover,
body.admin-body .admin-record > button:not(.ghost):not(.danger):hover,
body.admin-body .inline-admin-form button:not(.ghost):not(.danger):hover,
body.admin-body .record-actions button:not(.ghost):not(.danger):not(.mini):hover {
  background: #1f6fd6 !important;
  border-color: #1f6fd6 !important;
  box-shadow: 0 10px 22px rgba(47, 128, 237, .2) !important;
}

body.admin-body .btn.ghost,
body.admin-body button.btn.ghost,
body.admin-body .record-actions .btn.ghost,
body.admin-body .admin-section button.ghost,
body.admin-body .admin-record button.ghost {
  background: #fff !important;
  border-color: #dbe7f2 !important;
  color: #64748b !important;
  box-shadow: none !important;
}

body.admin-body .btn.ghost:hover,
body.admin-body button.btn.ghost:hover,
body.admin-body .admin-section button.ghost:hover,
body.admin-body .admin-record button.ghost:hover {
  background: #f4f9ff !important;
  border-color: rgba(47, 128, 237, .28) !important;
  color: #2f80ed !important;
}

body.admin-body .btn.mini,
body.admin-body button.mini,
body.admin-body .record-actions .btn.mini,
body.admin-body .record-actions button.mini {
  min-height: 32px !important;
  padding: 7px 11px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  box-shadow: none !important;
}

body.admin-body .btn.danger,
body.admin-body button.danger,
body.admin-body .record-actions .danger,
body.admin-body .btn.ghost.danger,
body.admin-body button.ghost.danger {
  background: #fff5f6 !important;
  border-color: #ffd7df !important;
  color: #e23b5a !important;
  box-shadow: none !important;
}

body.admin-body .btn.danger:hover,
body.admin-body button.danger:hover,
body.admin-body .record-actions .danger:hover {
  background: #ffe9ed !important;
  border-color: #ffb8c7 !important;
  color: #c92142 !important;
}

body.admin-body .admin-content-card,
body.admin-body .admin-section,
body.admin-body .admin-record,
body.admin-body .admin-panel-box,
body.admin-body details.admin-panel-box,
body.admin-body .page-toolbar,
body.admin-body .media-toolbar,
body.admin-body .bulk-price-card,
body.admin-body .theme-preset-grid,
body.admin-body .role-check-grid,
body.admin-body .admin-table-wrap,
body.admin-body .product-stat-table,
body.admin-body .product-stat-charts article,
body.admin-body .media-editor-panel {
  border: 1px solid #edf2f7 !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: 0 10px 24px rgba(31, 53, 88, .04) !important;
}

body.admin-body .admin-section {
  padding: 26px !important;
}

body.admin-body .admin-record,
body.admin-body .admin-panel-box,
body.admin-body details.admin-panel-box {
  padding: 20px !important;
}

body.admin-body .section-head,
body.admin-body .record-title,
body.admin-body .card-header,
body.admin-body .admin-readable-title,
body.admin-body .page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px !important;
  padding-bottom: 0 !important;
  border-bottom: 0 !important;
}

body.admin-body .section-head h1,
body.admin-body .section-head h2,
body.admin-body .page-header h1,
body.admin-body .admin-section h2,
body.admin-body .admin-readable-title strong {
  margin: 0 !important;
  color: #1d2b40 !important;
  font-size: clamp(22px, 2.2vw, 28px) !important;
  font-weight: 800 !important;
  letter-spacing: -.03em !important;
}

body.admin-body .record-title strong,
body.admin-body details.admin-panel-box > summary,
body.admin-body .product-stat-table h3,
body.admin-body .product-stat-charts h3 {
  color: #1d2b40 !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: -.01em !important;
}

body.admin-body .admin-grid,
body.admin-body .form-grid,
body.admin-body .inline-admin-form {
  align-items: start;
}

body.admin-body .admin-grid label,
body.admin-body .form-grid label,
body.admin-body .inline-admin-form label,
body.admin-body .admin-record label {
  display: grid !important;
  gap: 7px !important;
  color: #5f6f84 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

body.admin-body .admin-grid input,
body.admin-body .admin-grid select,
body.admin-body .admin-grid textarea,
body.admin-body .form-grid input,
body.admin-body .form-grid select,
body.admin-body .form-grid textarea,
body.admin-body .inline-admin-form input,
body.admin-body .inline-admin-form select,
body.admin-body .inline-admin-form textarea,
body.admin-body .admin-record input,
body.admin-body .admin-record select,
body.admin-body .admin-record textarea {
  width: 100% !important;
  min-height: 44px !important;
  border: 1px solid #e8eef5 !important;
  border-radius: 10px !important;
  background: #fbfdff !important;
  color: #26384f !important;
  padding: 10px 13px !important;
  font: inherit !important;
}

body.admin-body .admin-grid input[type="checkbox"],
body.admin-body .admin-record input[type="checkbox"],
body.admin-body input[type="checkbox"] {
  width: 18px !important;
  min-height: 18px !important;
  height: 18px !important;
  padding: 0 !important;
  accent-color: #2f80ed;
}

body.admin-body .admin-grid input[type="color"],
body.admin-body input[type="color"] {
  padding: 4px !important;
}

body.admin-body .admin-grid textarea,
body.admin-body .admin-record textarea {
  min-height: 110px !important;
  resize: vertical;
}

body.admin-body .record-actions,
body.admin-body .form-actions,
body.admin-body .admin-actions,
body.admin-body .media-bulk-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px !important;
}

body.admin-body table.admin-table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

body.admin-body table.admin-table th,
body.admin-body table.admin-table td {
  padding: 14px 16px !important;
  border-bottom: 1px solid #f0f4f8 !important;
  vertical-align: middle !important;
}

body.admin-body table.admin-table tr:last-child td {
  border-bottom: 0 !important;
}

body.admin-body table.admin-table th {
  background: #fbfdff !important;
  color: #91a0b4 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  text-transform: none !important;
}

body.admin-body table.admin-table td {
  color: #5f6f84 !important;
  font-size: 13px !important;
}

body.admin-body .status-toggle,
body.admin-body .status-chip {
  min-height: 30px !important;
  padding: 5px 11px !important;
  border-radius: 999px !important;
  border: 0 !important;
  background: #f1f5f9 !important;
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  box-shadow: none !important;
}

body.admin-body .status-toggle.active,
body.admin-body .status-chip.ok {
  background: rgba(46, 203, 137, .12) !important;
  color: #179b6b !important;
}

body.admin-body .status-chip.off {
  background: #fff5f6 !important;
  color: #e23b5a !important;
}

body.admin-body .admin-toast {
  border-radius: 12px !important;
  background: #1d2b40 !important;
  box-shadow: 0 18px 36px rgba(31, 53, 88, .18) !important;
}

body.admin-body .admin-toast.error {
  background: #e23b5a !important;
}

body.admin-body .admin-toast.info {
  background: #2f80ed !important;
}

@media (max-width: 767px) {
body.admin-body .section-head,
  body.admin-body .record-title,
  body.admin-body .card-header,
  body.admin-body .admin-readable-title,
  body.admin-body .page-header {
    align-items: stretch !important;
    flex-direction: column !important;
  }

body.admin-body .admin-section,
  body.admin-body .admin-record,
  body.admin-body .admin-panel-box,
  body.admin-body details.admin-panel-box {
    padding: 16px !important;
  }

body.admin-body .btn,
  body.admin-body button {
    width: auto;
  }
}

/* Canonical admin layout and navigation structure */
body.admin-body {
  display: grid !important;
  grid-template-columns: var(--admin-sidebar-wide, 260px) minmax(0, 1fr) !important;
  min-height: 100vh !important;
  overflow-x: hidden !important;
}

body.admin-body * {
  box-sizing: border-box;
}

body.admin-body .admin-sidebar {
  position: sticky !important;
  top: 0 !important;
  height: 100vh !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
}

body.admin-body .admin-main {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: clip !important;
}

body.admin-body .admin-topbar {
  position: fixed !important;
  left: var(--admin-sidebar-wide, 260px) !important;
  right: 0 !important;
  top: 0 !important;
  width: auto !important;
  z-index: 90 !important;
}

body.admin-body .admin-nav,
body.admin-body .admin-nav-group,
body.admin-body .admin-nav-items {
  min-width: 0 !important;
}

body.admin-body .admin-nav {
  display: grid !important;
}

body.admin-body .admin-nav-group {
  display: grid !important;
}

body.admin-body .admin-nav-items {
  display: none !important;
}

body.admin-body .admin-nav-group.open .admin-nav-items {
  display: grid !important;
}

body.admin-body .admin-nav-chevron {
  transition: transform .18s ease !important;
}

body.admin-body .admin-nav-group.open .admin-nav-chevron {
  transform: rotate(180deg) !important;
}

body.admin-body .admin-sidebar .admin-nav-group-toggle,
body.admin-body .admin-sidebar .admin-nav-items a,
body.admin-body .admin-sidebar .admin-preview-link {
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
  text-decoration: none !important;
}

body.admin-body .admin-nav-label {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.admin-body .admin-mobile-bottom-nav {
  display: none !important;
}

body.admin-body .admin-mobile-menu-toggle {
  display: none !important;
}

body.admin-body.admin-sidebar-collapsed {
  grid-template-columns: var(--admin-sidebar-mini, 76px) minmax(0, 1fr) !important;
}

body.admin-body.admin-sidebar-collapsed .admin-sidebar {
  width: var(--admin-sidebar-mini, 76px) !important;
  min-width: var(--admin-sidebar-mini, 76px) !important;
  max-width: var(--admin-sidebar-mini, 76px) !important;
}

body.admin-body.admin-sidebar-collapsed .admin-topbar {
  left: var(--admin-sidebar-mini, 76px) !important;
}

body.admin-body.admin-sidebar-collapsed .admin-sidebar-brand > div,
body.admin-body.admin-sidebar-collapsed .admin-nav-group-title,
body.admin-body.admin-sidebar-collapsed .admin-nav-label,
body.admin-body.admin-sidebar-collapsed .admin-nav-badge,
body.admin-body.admin-sidebar-collapsed .admin-nav-chevron {
  display: none !important;
}

body.admin-body.admin-sidebar-collapsed .admin-sidebar .admin-nav-group-toggle,
body.admin-body.admin-sidebar-collapsed .admin-sidebar .admin-nav-items a,
body.admin-body.admin-sidebar-collapsed .admin-sidebar .admin-preview-link {
  justify-content: center !important;
  padding-inline: 0 !important;
}

@media (min-width: 1024px) and (max-width: 1279px) {
body.admin-body {
    grid-template-columns: var(--admin-sidebar-mini, 76px) minmax(0, 1fr) !important;
  }

body.admin-body .admin-sidebar {
    width: var(--admin-sidebar-mini, 76px) !important;
    min-width: var(--admin-sidebar-mini, 76px) !important;
    max-width: var(--admin-sidebar-mini, 76px) !important;
    padding-inline: 10px !important;
  }

body.admin-body .admin-topbar {
    left: var(--admin-sidebar-mini, 76px) !important;
  }

body.admin-body .admin-sidebar-brand > div,
  body.admin-body .admin-nav-group-title,
  body.admin-body .admin-nav-label,
  body.admin-body .admin-nav-badge,
  body.admin-body .admin-nav-chevron {
    display: none !important;
  }

body.admin-body .admin-sidebar .admin-nav-group-toggle,
  body.admin-body .admin-sidebar .admin-nav-items a,
  body.admin-body .admin-sidebar .admin-preview-link {
    justify-content: center !important;
    padding-inline: 0 !important;
  }
}

@media (max-width: 1023px) {
body.admin-body {
    display: block !important;
  }

body.admin-body .admin-sidebar {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    z-index: 150 !important;
    width: min(86vw, 320px) !important;
    min-width: 0 !important;
    max-width: min(86vw, 320px) !important;
    transform: translateX(-105%) !important;
    transition: transform .24s ease !important;
    box-shadow: 18px 0 40px rgba(31, 53, 88, .18) !important;
  }

body.admin-body.admin-mobile-sidebar-open .admin-sidebar {
    transform: translateX(0) !important;
  }

body.admin-body.admin-mobile-sidebar-open::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 140;
    background: rgba(17, 24, 39, .36);
  }

body.admin-body .admin-topbar {
    position: sticky !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
  }

body.admin-body .admin-mobile-menu-toggle {
    display: grid !important;
  }
}

@media (max-width: 767px) {
body.admin-body {
    padding-bottom: 72px !important;
  }

body.admin-body .admin-mobile-bottom-nav {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 130 !important;
    height: 64px !important;
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
  }

body.admin-body .admin-mobile-bottom-nav a {
    min-width: 0 !important;
    min-height: 64px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    text-decoration: none !important;
  }
}

/* Digital Swoop A inspired clean admin sidebar */
body.admin-body {
  --admin-sidebar-wide: 282px;
  --admin-sidebar-mini: 76px;
}

body.admin-body .admin-sidebar {
  background: #ffffff !important;
  border-right: 1px solid #f1f3f7 !important;
  box-shadow: 14px 0 34px rgba(17, 24, 39, .045) !important;
  padding: 30px 24px 24px !important;
}

body.admin-body .admin-sidebar-brand {
  min-height: 64px !important;
  margin: 0 0 24px !important;
  padding: 0 4px !important;
  border: 0 !important;
  gap: 13px !important;
}

body.admin-body .admin-sidebar-brand img {
  width: 46px !important;
  height: 46px !important;
  object-fit: contain !important;
}

body.admin-body .admin-sidebar-brand strong {
  color: #090b2f !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  letter-spacing: -.02em !important;
}

body.admin-body .admin-sidebar-brand strong::after {
  content: none !important;
}

body.admin-body .admin-sidebar-brand span {
  color: #9aa3b2 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .05em !important;
}

body.admin-body .admin-sidebar .admin-nav {
  gap: 4px !important;
}

body.admin-body .admin-sidebar .admin-nav-group {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.admin-body .admin-sidebar .admin-nav-group-toggle {
  min-height: 34px !important;
  margin: 12px 0 7px !important;
  padding: 0 12px !important;
  border: 1px solid rgba(39, 90, 83, .08) !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, rgba(39, 90, 83, .10), rgba(230, 201, 122, .18)) !important;
  color: #275A53 !important;
  box-shadow: none !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}

body.admin-body .admin-sidebar .admin-nav-group:nth-child(2n) .admin-nav-group-toggle {
  background: linear-gradient(135deg, rgba(32, 146, 233, .10), rgba(13, 202, 240, .16)) !important;
  color: #0b63a6 !important;
}

body.admin-body .admin-sidebar .admin-nav-group:nth-child(3n) .admin-nav-group-toggle {
  background: linear-gradient(135deg, rgba(245, 171, 30, .16), rgba(255, 247, 231, .95)) !important;
  color: #9a5c05 !important;
}

body.admin-body .admin-sidebar .admin-nav-group:nth-child(4n) .admin-nav-group-toggle {
  background: linear-gradient(135deg, rgba(16, 185, 129, .12), rgba(183, 203, 170, .22)) !important;
  color: #166348 !important;
}

body.admin-body .admin-sidebar .admin-nav-group.active-group .admin-nav-group-toggle {
  background: linear-gradient(135deg, #275A53, #3d766d) !important;
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(39, 90, 83, .18) !important;
}

body.admin-body .admin-sidebar .admin-nav-group-toggle .admin-nav-icon {
  display: none !important;
}

body.admin-body .admin-sidebar .admin-nav-chevron {
  width: 14px !important;
  height: 14px !important;
  color: currentColor !important;
  margin-left: auto !important;
}

body.admin-body .admin-sidebar .admin-nav-items {
  gap: 10px !important;
  padding: 0 0 2px !important;
}

body.admin-body .admin-sidebar .admin-nav-items a,
body.admin-body .admin-sidebar .admin-preview-link {
  min-height: 52px !important;
  padding: 0 18px !important;
  gap: 15px !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: transparent !important;
  color: #171927 !important;
  box-shadow: none !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  letter-spacing: -.01em !important;
  transition: background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease !important;
}

body.admin-body .admin-sidebar .admin-nav-items a .admin-nav-icon,
body.admin-body .admin-sidebar .admin-preview-link .admin-nav-icon {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  flex: 0 0 22px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: currentColor !important;
  box-shadow: none !important;
}

body.admin-body .admin-sidebar .admin-nav-items a:hover,
body.admin-body .admin-sidebar .admin-preview-link:hover {
  background: #f5f7fb !important;
  color: #0f143d !important;
  transform: translateX(2px) !important;
}

body.admin-body .admin-sidebar .admin-nav-items a.active,
body.admin-body .admin-sidebar .admin-preview-link.active {
  background: #0f0b4c !important;
  color: #ffffff !important;
  box-shadow: 0 14px 28px rgba(15, 11, 76, .18) !important;
  transform: none !important;
}

body.admin-body .admin-sidebar .admin-nav-items a.active .admin-nav-icon,
body.admin-body .admin-sidebar .admin-preview-link.active .admin-nav-icon {
  color: #ffffff !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.admin-body .daily-visitor-cards {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin-top: 16px !important;
}

body.admin-body .dashboard-visitor-row {
  display: block !important;
}

body.admin-body .dashboard-visitor-row .admin-section {
  max-width: 760px !important;
}

body.admin-body .daily-visitor-card {
  min-height: 118px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  padding: 18px !important;
  border: 1px solid #edf2f7 !important;
  border-radius: 18px !important;
  background: linear-gradient(145deg, #ffffff 0%, #f7fbff 100%) !important;
  box-shadow: 0 14px 30px rgba(17, 24, 39, .055) !important;
}

body.admin-body .daily-visitor-card span {
  color: #667085 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  min-width: 0 !important;
}

body.admin-body .daily-visitor-card strong {
  color: #101828 !important;
  font-size: clamp(30px, 4vw, 46px) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: -.04em !important;
  margin-left: auto !important;
  text-align: right !important;
  white-space: nowrap !important;
}

body.admin-body .daily-visitor-card:first-of-type {
  border-color: rgba(47, 128, 237, .18) !important;
}

body.admin-body .daily-visitor-card:first-of-type strong {
  color: #2f80ed !important;
}

body.admin-body .daily-visitor-card:last-of-type {
  border-color: rgba(39, 90, 83, .18) !important;
}

body.admin-body .daily-visitor-card:last-of-type strong {
  color: #275a53 !important;
}

body.admin-body .admin-sidebar .admin-nav-badge {
  margin-left: auto !important;
  min-width: 22px !important;
  height: 22px !important;
  display: inline-grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  background: #ef4444 !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 900 !important;
}

body.admin-body .admin-sidebar .admin-sidebar-collapse {
  border-radius: 10px !important;
  background: #f5f7fb !important;
  color: #171927 !important;
}

body.admin-body .admin-sidebar .admin-preview-link {
  margin-top: 18px !important;
  border-top: 1px solid #f1f3f7 !important;
}

body.admin-body.admin-sidebar-collapsed .admin-sidebar {
  padding: 22px 12px !important;
}

body.admin-body.admin-sidebar-collapsed .admin-sidebar-brand {
  justify-content: center !important;
  padding: 0 !important;
}

body.admin-body.admin-sidebar-collapsed .admin-sidebar .admin-nav-group-toggle {
  display: none !important;
}

body.admin-body.admin-sidebar-collapsed .admin-sidebar .admin-nav-items {
  gap: 12px !important;
}

body.admin-body.admin-sidebar-collapsed .admin-sidebar .admin-nav-items a,
body.admin-body.admin-sidebar-collapsed .admin-sidebar .admin-preview-link {
  width: 52px !important;
  min-height: 52px !important;
  margin-inline: auto !important;
  border-radius: 14px !important;
}

@media (min-width: 1024px) and (max-width: 1279px) {
body.admin-body .admin-sidebar {
    padding: 22px 12px !important;
  }

body.admin-body .admin-sidebar-brand {
    justify-content: center !important;
    padding: 0 !important;
  }

body.admin-body .admin-sidebar .admin-nav-group-toggle {
    display: none !important;
  }

body.admin-body .admin-sidebar .admin-nav-items {
    gap: 12px !important;
  }

body.admin-body .admin-sidebar .admin-nav-items a,
  body.admin-body .admin-sidebar .admin-preview-link {
    width: 52px !important;
    min-height: 52px !important;
    margin-inline: auto !important;
    border-radius: 14px !important;
  }
}

@media (max-width: 560px) {
body.admin-body .daily-visitor-cards {
    grid-template-columns: 1fr !important;
  }
}

/* Mobile bottom menu admin page normalization */
body.admin-body .mobile-menu-admin {
  overflow: visible !important;
}

body.admin-body .mobile-menu-admin > form {
  margin-top: 18px !important;
}

body.admin-body .mobile-menu-admin-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px) !important;
  gap: 24px !important;
  align-items: start !important;
}

body.admin-body .mobile-menu-editor,
body.admin-body .phone-preview {
  border-radius: 18px !important;
  background: #ffffff !important;
  border: 1px solid #edf2f7 !important;
  box-shadow: 0 14px 30px rgba(17, 24, 39, .055) !important;
}

body.admin-body .mobile-menu-editor {
  padding: 20px !important;
  min-width: 0 !important;
}

body.admin-body .phone-preview {
  position: sticky !important;
  top: 94px !important;
  padding: 18px !important;
}

body.admin-body .mobile-menu-admin .admin-grid.compact {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

body.admin-body .mobile-menu-admin .admin-grid.compact label {
  min-width: 0 !important;
}

body.admin-body .mobile-menu-admin input,
body.admin-body .mobile-menu-admin select {
  min-width: 0 !important;
}

body.admin-body .preset-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 12px !important;
  align-items: stretch !important;
  padding: 14px !important;
  border: 1px solid #edf2f7 !important;
  border-radius: 16px !important;
  background: #f8fbff !important;
}

body.admin-body .preset-row select {
  width: 100% !important;
  min-height: 44px !important;
  border-color: #e5eaf1 !important;
  border-radius: 12px !important;
}

body.admin-body .preset-row button {
  min-height: 44px !important;
  white-space: nowrap !important;
}

body.admin-body .mobile-menu-item-list {
  display: grid !important;
  gap: 14px !important;
}

body.admin-body .mobile-menu-edit-card {
  border: 1px solid #edf2f7 !important;
  border-radius: 18px !important;
  background: #ffffff !important;
  padding: 16px !important;
  box-shadow: 0 10px 24px rgba(31, 53, 88, .04) !important;
  min-width: 0 !important;
}

body.admin-body .mobile-menu-edit-card.dragging {
  opacity: .7 !important;
  outline: 2px dashed #2f80ed !important;
  outline-offset: 3px !important;
}

body.admin-body .mobile-row-head {
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid #f2f6fa !important;
}

body.admin-body .mobile-row-head strong {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: #17243b !important;
  font-size: 15px !important;
}

body.admin-body .mobile-menu-admin .drag-handle {
  width: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  border: 1px solid #e5eaf1 !important;
  border-radius: 13px !important;
  background: #f8fbff !important;
  color: #667085 !important;
  font-size: 18px !important;
}

body.admin-body .mobile-icon-live {
  min-height: 48px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 12px !important;
  border-radius: 14px !important;
  background: #f8fbff !important;
  color: #667085 !important;
}

body.admin-body .mobile-icon-live .material-icons {
  color: #275a53 !important;
  font-size: 28px !important;
}

body.admin-body .phone-frame {
  width: min(100%, 322px) !important;
  aspect-ratio: 390 / 844 !important;
  padding: 10px !important;
  border-radius: 34px !important;
  background: #111827 !important;
  box-shadow: 0 18px 42px rgba(17, 24, 39, .18) !important;
}

body.admin-body .phone-screen {
  border-radius: 27px !important;
  background: linear-gradient(180deg, #f8fbff 0%, #edf4fb 100%) !important;
}

body.admin-body .phone-content {
  color: #275a53 !important;
  font-size: 16px !important;
  text-align: center !important;
}

body.admin-body .preview-bottom-nav {
  height: var(--preview-height, 65px) !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 0 !important;
  background: #ffffff !important;
  border-top: 1px solid #edf2f7 !important;
  box-shadow: 0 -10px 28px rgba(17, 24, 39, .08) !important;
}

body.admin-body .preview-bottom-nav a {
  min-width: 0 !important;
  min-height: 48px !important;
  padding: 4px 2px !important;
  color: #7b8797 !important;
  font-size: 10px !important;
  line-height: 1.1 !important;
  overflow: hidden !important;
}

body.admin-body .preview-bottom-nav a span:last-child {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.admin-body .preview-bottom-nav a.active {
  color: var(--preview-active, #275a53) !important;
}

body.admin-body .preview-bottom-nav .material-icons {
  font-size: 23px !important;
  line-height: 1 !important;
}

body.admin-body .preview-bottom-nav.template-round a:nth-child(3) {
  width: 56px !important;
  height: 56px !important;
  min-height: 56px !important;
  align-self: center !important;
  justify-self: center !important;
  border-radius: 999px !important;
  background: var(--preview-active, #275a53) !important;
  color: #ffffff !important;
  transform: translateY(-15px) !important;
}

body.admin-body .mobile-delete-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-top: 18px !important;
}

/* Native file inputs normalized for admin theme */
body.admin-body input[type="file"] {
  width: 100% !important;
  min-height: 46px !important;
  padding: 7px !important;
  border: 1px solid #e5eaf1 !important;
  border-radius: 12px !important;
  background: #f8fbff !important;
  color: #667085 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}

body.admin-body input[type="file"]::file-selector-button {
  min-height: 32px !important;
  margin-right: 12px !important;
  padding: 0 14px !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: #0f0b4c !important;
  color: #ffffff !important;
  font: inherit !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  transition: background .18s ease, transform .18s ease !important;
}

body.admin-body input[type="file"]:hover {
  border-color: rgba(47, 128, 237, .32) !important;
  background: #ffffff !important;
}

body.admin-body input[type="file"]:hover::file-selector-button {
  background: #275a53 !important;
}

body.admin-body input[type="file"]:focus-visible {
  outline: 3px solid rgba(47, 128, 237, .16) !important;
  outline-offset: 2px !important;
}

/* Admin semantic action colors */
body.admin-body {
  --admin-action-save: #16a34a;
  --admin-action-save-hover: #15803d;
  --admin-action-danger: #ef4444;
  --admin-action-danger-hover: #dc2626;
  --admin-action-file: #2563eb;
  --admin-action-file-hover: #1d4ed8;
  --admin-action-neutral: #64748b;
}

body.admin-body .btn.primary,
body.admin-body button.btn.primary,
body.admin-body .admin-section > form > button:not(.ghost):not(.danger),
body.admin-body .admin-record > button:not(.ghost):not(.danger),
body.admin-body .inline-admin-form button:not(.ghost):not(.danger),
body.admin-body .record-actions button:not(.ghost):not(.danger):not(.mini),
body.admin-body [data-media-map-save] {
  background: var(--admin-action-save) !important;
  border-color: var(--admin-action-save) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 20px rgba(22, 163, 74, .18) !important;
}

body.admin-body .btn.primary:hover,
body.admin-body button.btn.primary:hover,
body.admin-body .admin-section > form > button:not(.ghost):not(.danger):hover,
body.admin-body .admin-record > button:not(.ghost):not(.danger):hover,
body.admin-body .inline-admin-form button:not(.ghost):not(.danger):hover,
body.admin-body .record-actions button:not(.ghost):not(.danger):not(.mini):hover,
body.admin-body [data-media-map-save]:hover {
  background: var(--admin-action-save-hover) !important;
  border-color: var(--admin-action-save-hover) !important;
  box-shadow: 0 12px 24px rgba(22, 163, 74, .24) !important;
}

body.admin-body .btn.danger,
body.admin-body button.danger,
body.admin-body .record-actions .danger,
body.admin-body .btn.ghost.danger,
body.admin-body button.ghost.danger,
body.admin-body .admin-logout-btn {
  background: var(--admin-action-danger) !important;
  border-color: var(--admin-action-danger) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 20px rgba(239, 68, 68, .18) !important;
}

body.admin-body .btn.danger:hover,
body.admin-body button.danger:hover,
body.admin-body .record-actions .danger:hover,
body.admin-body .btn.ghost.danger:hover,
body.admin-body button.ghost.danger:hover,
body.admin-body .admin-logout-btn:hover {
  background: var(--admin-action-danger-hover) !important;
  border-color: var(--admin-action-danger-hover) !important;
  color: #ffffff !important;
  box-shadow: 0 12px 24px rgba(239, 68, 68, .24) !important;
}

body.admin-body input[type="file"]::file-selector-button {
  background: var(--admin-action-file) !important;
  color: #ffffff !important;
}

body.admin-body input[type="file"]:hover::file-selector-button {
  background: var(--admin-action-file-hover) !important;
}

body.admin-body .btn.ghost,
body.admin-body button.btn.ghost,
body.admin-body .record-actions .btn.ghost,
body.admin-body .admin-section button.ghost,
body.admin-body .admin-record button.ghost {
  background: #ffffff !important;
  border-color: #dbe7f2 !important;
  color: var(--admin-action-neutral) !important;
  box-shadow: none !important;
}

body.admin-body .btn.ghost:hover,
body.admin-body button.btn.ghost:hover,
body.admin-body .admin-section button.ghost:hover,
body.admin-body .admin-record button.ghost:hover {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #334155 !important;
}

body.admin-body .service-mode-note {
  margin: -2px 0 0 !important;
  padding: 12px 14px !important;
  border: 1px solid #dbeafe !important;
  border-radius: 12px !important;
  background: #eff6ff !important;
  color: #475569 !important;
}

/* Dashboard metric cards repair */
body.admin-body .admin-metrics {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 18px !important;
  margin: 22px 0 !important;
}

body.admin-body .admin-metrics article {
  min-height: 126px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 18px !important;
  padding: 20px !important;
  border: 1px solid transparent !important;
  border-radius: 18px !important;
  box-shadow: 0 14px 30px rgba(17, 24, 39, .055) !important;
  overflow: hidden !important;
}

body.admin-body .admin-metrics article::before {
  display: none !important;
}

body.admin-body .admin-metrics article:nth-child(1) {
  background: linear-gradient(145deg, #eff6ff 0%, #dbeafe 100%) !important;
  border-color: rgba(47, 128, 237, .16) !important;
}

body.admin-body .admin-metrics article:nth-child(2)::before {
  display: none !important;
}

body.admin-body .admin-metrics article:nth-child(2) {
  background: linear-gradient(145deg, #ecfdf5 0%, #d1fae5 100%) !important;
  border-color: rgba(46, 203, 137, .18) !important;
}

body.admin-body .admin-metrics article:nth-child(3) {
  background: linear-gradient(145deg, #fff7ed 0%, #ffedd5 100%) !important;
  border-color: rgba(255, 181, 71, .2) !important;
}

body.admin-body .admin-metrics article:nth-child(4) {
  background: linear-gradient(145deg, #ecfeff 0%, #ccfbf1 100%) !important;
  border-color: rgba(53, 197, 186, .18) !important;
}

body.admin-body .admin-metrics article span {
  order: 2 !important;
  margin: 0 !important;
  color: #667085 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
}

body.admin-body .admin-metrics article strong {
  order: 3 !important;
  display: block !important;
  margin: 0 !important;
  color: #101828 !important;
  font-size: clamp(30px, 4vw, 42px) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: -.04em !important;
}

@media (max-width: 1180px) {
body.admin-body .mobile-menu-admin-grid {
    grid-template-columns: 1fr !important;
  }

body.admin-body .phone-preview {
    position: relative !important;
    top: auto !important;
  }
}

@media (max-width: 680px) {
body.admin-body .mobile-menu-editor,
  body.admin-body .phone-preview {
    padding: 14px !important;
    border-radius: 14px !important;
  }

body.admin-body .mobile-menu-admin .admin-grid.compact,
  body.admin-body .preset-row {
    grid-template-columns: 1fr !important;
  }

body.admin-body .preset-row button {
    width: 100% !important;
  }

body.admin-body .mobile-row-head {
    grid-template-columns: 44px minmax(0, 1fr) !important;
  }

body.admin-body .mobile-row-head .switch {
    grid-column: 1 / -1 !important;
    justify-self: start !important;
  }
}

@media (max-width: 1180px) {
body.admin-body .admin-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 560px) {
body.admin-body .admin-metrics {
    grid-template-columns: 1fr !important;
  }
}

/* QR menu product management mobile usability */
body.admin-body #menu .admin-tab-buttons {
  align-items: stretch !important;
}

body.admin-body #menu .admin-tab-buttons button {
  white-space: normal !important;
  text-align: center !important;
  line-height: 1.2 !important;
}

body.admin-body #menu .admin-tab-panel.active {
  display: grid !important;
  gap: 14px !important;
}

body.admin-body #menu .menu-admin-list {
  display: grid !important;
  gap: 16px !important;
}

body.admin-body #menu .menu-record {
  min-width: 0 !important;
}

body.admin-body #menu .menu-record .record-title {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

body.admin-body #menu .menu-record .record-title strong {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body.admin-body #menu .menu-sort-row {
  min-width: 0 !important;
}

@media (max-width: 767px) {
body.admin-body #menu.admin-section {
    padding-inline: 14px !important;
  }

body.admin-body #menu .section-head {
    gap: 12px !important;
  }

body.admin-body #menu .admin-tab-buttons {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    overflow-x: visible !important;
    flex-wrap: initial !important;
    gap: 8px !important;
    padding: 8px !important;
  }

body.admin-body #menu .admin-tab-buttons button {
    width: 100% !important;
    min-height: 46px !important;
    padding: 8px 10px !important;
    border-radius: 12px !important;
    font-size: 12px !important;
  }

body.admin-body #menu .admin-tab-buttons button.active {
    background: #0f0b4c !important;
    color: #ffffff !important;
    box-shadow: 0 10px 22px rgba(15, 11, 76, .16) !important;
  }

body.admin-body #menu .menu-record {
    padding: 14px !important;
    border-radius: 16px !important;
  }

body.admin-body #menu .menu-record .record-title {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: start !important;
    padding-bottom: 12px !important;
  }

body.admin-body #menu .menu-record .record-title .switch {
    justify-self: start !important;
  }

body.admin-body #menu .admin-grid.compact {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

body.admin-body #menu .admin-grid.compact label,
  body.admin-body #menu .admin-grid.compact .wide {
    grid-column: auto !important;
    min-width: 0 !important;
  }

body.admin-body #menu .record-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

body.admin-body #menu .record-actions button {
    width: 100% !important;
    min-height: 44px !important;
  }

body.admin-body #menu .menu-sortable-list {
    padding: 10px !important;
    border-radius: 16px !important;
    overflow: visible !important;
  }

body.admin-body #menu .menu-sort-row {
    grid-template-columns: 42px minmax(0, 1fr) auto !important;
    gap: 9px !important;
    padding: 10px !important;
    border-radius: 14px !important;
  }

body.admin-body #menu .menu-sort-row .menu-sort-thumb,
  body.admin-body #menu .menu-sort-row em,
  body.admin-body #menu .menu-sort-row small {
    display: none !important;
  }

body.admin-body #menu .menu-sort-row strong {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 420px) {
body.admin-body #menu .admin-tab-buttons {
    grid-template-columns: 1fr !important;
  }
}

/* Admin sidebar isolation: prevent dashboard cards from bleeding under the menu */
body.admin-body .admin-sidebar {
  position: fixed !important;
  inset: 0 auto 0 0 !important;
  z-index: 160 !important;
  width: var(--admin-sidebar-wide, 282px) !important;
  min-width: var(--admin-sidebar-wide, 282px) !important;
  max-width: var(--admin-sidebar-wide, 282px) !important;
  height: 100vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  background: #ffffff !important;
  isolation: isolate !important;
}

body.admin-body .admin-sidebar::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  background: #ffffff !important;
  pointer-events: none !important;
}

body.admin-body .admin-topbar {
  left: var(--admin-sidebar-wide, 282px) !important;
  z-index: 120 !important;
}

body.admin-body .admin-main {
  grid-column: 2 !important;
  margin-left: 0 !important;
  position: relative !important;
  z-index: 1 !important;
  min-width: 0 !important;
}

body.admin-body.admin-sidebar-collapsed .admin-sidebar {
  width: var(--admin-sidebar-mini, 76px) !important;
  min-width: var(--admin-sidebar-mini, 76px) !important;
  max-width: var(--admin-sidebar-mini, 76px) !important;
}

body.admin-body.admin-sidebar-collapsed .admin-topbar {
  left: var(--admin-sidebar-mini, 76px) !important;
}

@media (min-width: 1024px) and (max-width: 1279px) {
body.admin-body .admin-sidebar {
    width: var(--admin-sidebar-mini, 76px) !important;
    min-width: var(--admin-sidebar-mini, 76px) !important;
    max-width: var(--admin-sidebar-mini, 76px) !important;
  }

body.admin-body .admin-topbar {
    left: var(--admin-sidebar-mini, 76px) !important;
  }
}

/* Admin login template final lock */
body.admin-auth {
  min-height: 100vh !important;
  margin: 0 !important;
  display: grid !important;
  place-items: center !important;
  padding: 20px !important;
  overflow-x: hidden !important;
  background: #ffffff !important;
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Arial, sans-serif !important;
}

body.admin-auth .login-showcase {
  width: min(1180px, 100%) !important;
  min-height: calc(100vh - 40px) !important;
  display: grid !important;
  place-items: center !important;
  padding: 34px 0 !important;
}

body.admin-auth .login-device {
  position: relative !important;
  width: min(980px, 100%) !important;
  border: 1px solid #e8edf3 !important;
  border-radius: 28px !important;
  background: #ffffff !important;
  box-shadow: 0 24px 70px rgba(16, 24, 40, .10) !important;
  overflow: visible !important;
}

body.admin-auth .login-panel {
  min-height: 520px !important;
  display: grid !important;
  grid-template-columns: minmax(320px, .9fr) minmax(320px, 1.1fr) !important;
  align-items: center !important;
  gap: 28px !important;
  padding: clamp(34px, 6vw, 78px) !important;
  background: #ffffff !important;
  border-radius: 28px !important;
}

body.admin-auth .login-logo {
  width: 168px !important;
  height: 74px !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto 22px !important;
}

body.admin-auth .login-form-side {
  width: min(340px, 100%) !important;
  justify-self: center !important;
  min-width: 0 !important;
}

body.admin-auth .login-form-side h1,
body.admin-auth .login-form-side p {
  text-align: center !important;
}

body.admin-auth .login-input-shell {
  min-height: 48px !important;
  width: 100% !important;
  border: 1px solid rgba(45, 38, 32, .32) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .62) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

body.admin-auth .login-input-shell input {
  width: 100% !important;
  min-height: 46px !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  padding: 0 18px !important;
  box-sizing: border-box !important;
}

body.admin-auth .premium-login-button {
  min-height: 50px !important;
  width: 100% !important;
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  border: 1px solid rgba(230, 201, 122, .74) !important;
  border-radius: 14px !important;
  background: #101828 !important;
  color: #E6C97A !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  box-shadow: 0 12px 24px rgba(16, 24, 40, .16) !important;
  transition: color .35s ease, background .35s ease, box-shadow .35s ease, transform .2s ease !important;
}

body.admin-auth .premium-login-button:hover,
body.admin-auth .premium-login-button:focus-visible {
  background: #E6C97A !important;
  color: #101828 !important;
  box-shadow: 0 0 22px rgba(230, 201, 122, .48), 0 14px 26px rgba(16, 24, 40, .18) !important;
  outline: 0 !important;
}

body.admin-auth .premium-login-button:active {
  transform: scale(.98) !important;
}

body.admin-auth .premium-login-button span {
  position: absolute !important;
  display: block !important;
  pointer-events: none !important;
}

body.admin-auth .premium-login-button span:nth-child(1) {
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent, #E6C97A) !important;
  animation: whatsappLineTop 1.2s linear infinite !important;
}

body.admin-auth .premium-login-button span:nth-child(2) {
  top: -100% !important;
  right: 0 !important;
  width: 2px !important;
  height: 100% !important;
  background: linear-gradient(180deg, transparent, #E6C97A) !important;
  animation: whatsappLineRight 1.2s linear infinite !important;
  animation-delay: .3s !important;
}

body.admin-auth .premium-login-button span:nth-child(3) {
  right: -100% !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 2px !important;
  background: linear-gradient(270deg, transparent, #E6C97A) !important;
  animation: whatsappLineBottom 1.2s linear infinite !important;
  animation-delay: .6s !important;
}

body.admin-auth .premium-login-button span:nth-child(4) {
  bottom: -100% !important;
  left: 0 !important;
  width: 2px !important;
  height: 100% !important;
  background: linear-gradient(360deg, transparent, #E6C97A) !important;
  animation: whatsappLineLeft 1.2s linear infinite !important;
  animation-delay: .9s !important;
}

body.admin-auth .login-art-image {
  width: min(920px, 230%) !important;
  max-height: 460px !important;
  display: block !important;
  object-fit: contain !important;
  background: #ffffff !important;
  filter: none !important;
  transform: none !important;
}

body.admin-auth .login-art-image.is-error {
  width: min(1040px, 250%) !important;
  max-height: 480px !important;
  background: #ffffff !important;
  filter: none !important;
}

@media (max-width: 767px) {
body.admin-auth .login-device {
    width: min(430px, calc(100vw - 24px)) !important;
    min-height: auto !important;
    border-width: 1px !important;
    border-radius: 26px !important;
    box-shadow: 0 18px 45px rgba(16, 24, 40, .10) !important;
  }

body.admin-auth .login-panel {
    min-height: auto !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding: 28px 22px !important;
  }

body.admin-auth .login-art-side {
    order: 2 !important;
    min-height: 170px !important;
  }

body.admin-auth .login-art-image {
    width: min(980px, 420%) !important;
    max-height: 240px !important;
    transform: none !important;
  }

body.admin-auth .login-art-image.is-error {
    width: min(1100px, 460%) !important;
    max-height: 250px !important;
  }
}

body.admin-body .product-card-designer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
  gap: 22px;
  align-items: start;
}

body.admin-body .product-card-code-panel {
  display: grid;
  gap: 16px;
}

body.admin-body .product-card-code-panel label {
  display: grid;
  gap: 8px;
}

body.admin-body .product-card-code-panel span {
  color: #275A53;
  font-size: 12px;
  font-weight: 900;
}

body.admin-body .product-card-code-panel textarea {
  width: 100%;
  min-height: 180px;
  resize: vertical;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  background: #0f172a;
  color: #e5edf7;
  padding: 16px;
  font-family: Consolas, "Courier New", monospace;
  font-size: 13px;
  line-height: 1.5;
  box-sizing: border-box;
}

body.admin-body .product-card-preview-panel {
  position: sticky;
  top: 92px;
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(15, 23, 42, .08);
}

body.admin-body .product-card-preview-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

body.admin-body .product-card-preview-panel iframe {
  width: 100%;
  min-height: 520px;
  border: 1px solid #edf2f7;
  border-radius: 16px;
  background: #f8fafc;
}

body.admin-body .product-card-publish-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

body.admin-body .product-card-preset-section {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid #e5e7eb;
}

body.admin-body .section-head.slim {
  margin-bottom: 14px;
}

body.admin-body .product-card-preset-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(240px, 1fr));
  gap: 18px;
}

body.admin-body .product-card-preset {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  background: #fff;
  cursor: pointer;
  text-align: left;
  box-shadow: 0 12px 26px rgba(15, 23, 42, .06);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

body.admin-body .product-card-preset:hover {
  transform: translateY(-3px);
  border-color: #275A53;
  box-shadow: 0 18px 38px rgba(39, 90, 83, .14);
}

body.admin-body .product-card-preset header {
  order: -2;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  border-radius: 12px;
  background: #f3f7f6;
  color: #17202b;
  font-size: 14px;
  font-weight: 900;
  text-align: center;
}

body.admin-body .product-card-preset iframe {
  width: 100%;
  height: 420px;
  border: 1px solid #eef2f7;
  border-radius: 12px;
  background: #f8fafc;
  pointer-events: none;
}

body.admin-body .product-card-viewport-switch {
  order: -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

body.admin-body .product-card-viewport-switch button {
  min-height: 32px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  color: #667085;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

body.admin-body .product-card-viewport-switch button.active {
  border-color: #275A53;
  background: #275A53;
  color: #fff;
}

body.admin-body .product-card-preset-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

body.admin-body .product-card-preset-actions .btn {
  min-height: 38px;
  padding-inline: 8px;
  font-size: 12px;
}

body.admin-body .product-card-preset.is-saved {
  border-color: #10b981;
  box-shadow: 0 18px 38px rgba(16, 185, 129, .18);
}

body.admin-body .user-management-form {
  margin-bottom: 18px;
}

body.admin-body .user-management-list {
  display: grid;
  gap: 12px;
}

body.admin-body .user-row {
  display: grid;
  grid-template-columns: repeat(6, minmax(120px, 1fr)) auto;
  gap: 12px;
  align-items: end;
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 16px;
  background: #fff;
}

body.admin-body .user-row label {
  display: grid;
  gap: 6px;
  color: #667085;
  font-size: 12px;
  font-weight: 800;
}

body.admin-body .user-row input,
body.admin-body .user-row select {
  min-height: 42px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 8px 10px;
  box-sizing: border-box;
}

body.admin-body .user-row-actions {
  display: flex;
  gap: 8px;
}

body.admin-body .btn.success {
  background: #10b981;
  border-color: #10b981;
  color: #fff;
}

body.admin-body .btn.danger {
  background: #ef4444;
  border-color: #ef4444;
  color: #fff;
}

body.admin-body .discounted-products-admin .section-head {
  align-items: flex-start;
  gap: 16px;
}

body.admin-body .discount-insight-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  gap: 16px;
}

body.admin-body .discount-preview-shell {
  display: grid;
  grid-template-columns: minmax(220px, .7fr) minmax(320px, 1fr);
  gap: 18px;
  align-items: stretch;
  margin-bottom: 18px;
  padding: 18px;
  border: 1px solid rgba(39, 90, 83, .16);
  border-radius: 22px;
  background:
    radial-gradient(circle at 12% 16%, rgba(230, 201, 122, .18), transparent 34%),
    linear-gradient(135deg, #f7fbfa, #fff);
}

body.admin-body .discount-period-panel {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 12px;
  margin: -4px 0 18px;
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, .2);
  border-radius: 18px;
  background: #fff;
}

body.admin-body .discount-period-panel label {
  display: grid;
  gap: 6px;
  color: #667085;
  font-size: 12px;
  font-weight: 900;
}

body.admin-body .discount-period-panel input,
body.admin-body .discount-period-panel select {
  min-height: 42px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 9px 11px;
  background: #fff;
  color: #17202b;
  font: inherit;
  font-weight: 800;
  box-sizing: border-box;
}

body.admin-body .discount-preview-shell > div:first-child {
  display: grid;
  align-content: center;
  gap: 8px;
}

body.admin-body .discount-preview-shell span {
  color: #275A53;
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

body.admin-body .discount-preview-shell h3 {
  margin: 0;
  color: #17202b;
  font-size: 28px;
  line-height: 1.15;
}

body.admin-body .discount-preview-shell p {
  margin: 0;
  color: #667085;
  font-weight: 800;
}

body.admin-body .discount-admin-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: start;
}

body.admin-body .discount-admin-panel {
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, .2);
  border-radius: 20px;
  background: #fff;
}

body.admin-body .discount-admin-panel:first-child {
  border-color: rgba(239, 68, 68, .22);
  background:
    radial-gradient(circle at 0 0, rgba(239, 68, 68, .16), transparent 30%),
    linear-gradient(135deg, #fff7ed 0%, #fff 58%);
}

body.admin-body .discount-admin-panel:first-child .mini-section-head {
  background: linear-gradient(135deg, #ef4444, #f97316);
}

body.admin-body .discount-admin-panel:first-child .mini-section-head strong,
body.admin-body .discount-admin-panel:first-child .mini-section-head span {
  color: #fff;
}

body.admin-body .mini-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  background: #f8fafc;
}

body.admin-body .mini-section-head strong {
  color: #17202b;
  font-size: 15px;
  font-weight: 950;
}

body.admin-body .mini-section-head span {
  color: #667085;
  font-size: 12px;
  font-weight: 800;
  text-align: right;
}

body.admin-body .discount-insight-grid.compact {
  grid-template-columns: 1fr;
}

body.admin-body .discount-category-row {
  margin-top: 12px;
  padding: 9px 12px;
  border-radius: 12px;
  background: #f3f7f6;
  color: #275A53;
  font-size: 13px;
  font-weight: 950;
}

body.admin-body .discount-category-row:first-child {
  margin-top: 0;
}

body.admin-body .discount-insight-grid.compact .discount-product-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border-radius: 0;
  border-width: 0 0 1px;
  background: #fff;
  box-shadow: none;
}

body.admin-body .discount-insight-grid.compact .discount-product-head {
  flex: 0 0 260px;
  min-width: 0;
  align-items: center;
}

body.admin-body .discount-insight-grid.compact .discount-product-head > div {
  min-width: 0;
}

body.admin-body .discount-insight-grid.compact .discount-product-head strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.admin-body .discount-insight-grid.compact .discount-product-head .switch {
  min-height: 30px;
  padding: 4px 8px;
}

body.admin-body .discount-insight-grid.compact .discount-metrics {
  flex: 0 0 112px;
  grid-template-columns: 1fr;
}

body.admin-body .discount-insight-grid.compact .discount-metrics span:nth-child(n+2) {
  display: none;
}

body.admin-body .discount-insight-grid.compact .discount-metrics span {
  min-height: 34px;
  padding: 6px 8px;
}

body.admin-body .discount-insight-grid.compact .discount-live-card {
  flex: 0 0 175px;
  min-height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.admin-body .discount-insight-grid.compact .discount-live-card::before {
  display: none;
}

body.admin-body .discount-insight-grid.compact .discount-live-card em {
  position: static;
  display: inline-flex;
  width: fit-content;
  margin-bottom: 4px;
  padding: 3px 8px;
  font-size: 11px;
}

body.admin-body .discount-insight-grid.compact .discount-live-card h3,
body.admin-body .discount-insight-grid.compact .discount-live-card p {
  display: none;
}

body.admin-body .discount-insight-grid.compact .discount-live-card > div {
  margin: 0;
}

body.admin-body .discount-insight-grid.compact .discount-live-card strong {
  font-size: 18px;
}

body.admin-body .discount-insight-grid.compact .discount-live-card del {
  font-size: 13px;
}

body.admin-body .discount-insight-grid.compact .discount-edit-row {
  flex: 1 1 320px;
  grid-template-columns: repeat(3, minmax(105px, 1fr));
  min-width: 260px;
}

body.admin-body .discount-insight-grid.compact .discount-edit-row label {
  font-size: 11px;
}

body.admin-body .discount-insight-grid.compact .discount-edit-row input {
  min-height: 36px;
  border-radius: 10px;
  padding: 7px 9px;
}

body.admin-body .discount-insight-grid.compact .record-actions .btn {
  min-height: 38px;
  padding: 8px 12px;
  white-space: nowrap;
}

body.admin-body .discount-insight-grid.compact .record-actions {
  flex: 0 0 auto;
}

body.admin-body .discount-product-card {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(148, 163, 184, .24);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(39, 90, 83, .06), rgba(230, 201, 122, .08)),
    #fff;
  box-shadow: 0 14px 32px rgba(15, 23, 42, .06);
}

body.admin-body .discount-product-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

body.admin-body .discount-product-head > div {
  display: grid;
  gap: 3px;
}

body.admin-body .discount-product-head small {
  color: #667085;
  font-size: 12px;
  font-weight: 800;
}

body.admin-body .discount-product-head strong {
  color: #17202b;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.3;
}

body.admin-body .discount-product-card .switch {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #f3f7f6;
  color: #275A53;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

body.admin-body .discount-product-card .switch input {
  accent-color: #275A53;
}

body.admin-body .discount-metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

body.admin-body .discount-metrics span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 12px;
  background: rgba(255, 255, 255, .82);
  color: #667085;
  font-size: 12px;
  font-weight: 800;
}

body.admin-body .discount-metrics b {
  color: #17202b;
  font-size: 16px;
}

body.admin-body .discount-live-card {
  position: relative;
  display: grid;
  gap: 8px;
  min-height: 156px;
  padding: 18px;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  background: #fff;
  overflow: hidden;
}

body.admin-body .discount-live-card::before {
  content: "";
  position: absolute;
  inset: auto -30px -55px auto;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: rgba(39, 90, 83, .08);
}

body.admin-body .discount-live-card em {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
  padding: 5px 10px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

body.admin-body .discount-live-card h3 {
  position: relative;
  max-width: calc(100% - 62px);
  margin: 0;
  color: #17202b;
  font-size: 17px;
  font-weight: 900;
  line-height: 1.25;
}

body.admin-body .discount-live-card p {
  position: relative;
  display: -webkit-box;
  margin: 0;
  color: #667085;
  font-size: 13px;
  line-height: 1.45;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body.admin-body .discount-live-card > div {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: auto;
}

body.admin-body .discount-live-card del {
  color: #98a2b3;
  font-size: 15px;
  font-weight: 800;
  text-decoration-color: #ef4444;
  text-decoration-thickness: 2px;
}

body.admin-body .discount-live-card strong {
  color: #275A53;
  font-size: 24px;
  font-weight: 950;
}

body.admin-body .discount-live-card small {
  position: relative;
  color: #667085;
  font-size: 12px;
  font-weight: 800;
}

body.admin-body .discount-edit-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

body.admin-body .discount-edit-row label {
  display: grid;
  gap: 6px;
  color: #667085;
  font-size: 12px;
  font-weight: 900;
}

body.admin-body .discount-edit-row input {
  width: 100%;
  min-height: 42px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 9px 11px;
  background: #fff;
  color: #17202b;
  font: inherit;
  font-weight: 800;
  box-sizing: border-box;
}

body.admin-body .discount-edit-row input[readonly] {
  background: #f8fafc;
  color: #667085;
}

body.admin-body .discount-product-card .record-actions {
  justify-content: flex-end;
}

@media (max-width: 1023px) {
body.admin-body .product-card-designer-grid {
    grid-template-columns: 1fr;
  }

body.admin-body .product-card-preview-panel {
    position: static;
  }

body.admin-body .user-row {
    grid-template-columns: 1fr;
  }

body.admin-body .user-row-actions {
    justify-content: stretch;
  }

body.admin-body .user-row-actions .btn {
    flex: 1;
  }

body.admin-body .product-card-preset-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

body.admin-body .discount-insight-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

body.admin-body .discount-admin-columns,
  body.admin-body .discount-preview-shell,
  body.admin-body .discount-insight-grid.compact,
  body.admin-body .discount-period-panel {
    grid-template-columns: 1fr;
  }

body.admin-body .discount-insight-grid.compact .discount-product-card {
    display: grid;
    grid-template-columns: 1fr;
  }

body.admin-body .discount-insight-grid.compact .discount-edit-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
body.admin-body .product-card-preset-grid {
    grid-template-columns: 1fr;
  }

body.admin-body .discount-insight-grid,
  body.admin-body .discount-edit-row {
    grid-template-columns: 1fr;
  }

body.admin-body .discount-product-head {
    flex-direction: column;
  }

body.admin-body .discount-product-card .record-actions,
  body.admin-body .discount-product-card .btn {
    width: 100%;
  }
}

/* Final print guard: never print mobile navigation surfaces */
@media print {
  .mobile-menu-tabbar,
  .site-mobile-menu,
  .site-mobile-menu-toggle,
  .admin-mobile-bottom-nav,
  .admin-mobile-nav,
  [class*="mobile-bottom"],
  [class*="bottom-nav"],
  [class*="tabbar"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
  }
}

/* Final login white background lock */
html:has(body.admin-auth),
body.admin-auth,
body.admin-auth .login-showcase,
body.admin-auth .login-device,
body.admin-auth .login-panel,
body.admin-auth .login-art-side {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
}

body.admin-auth .login-art-side {
  box-shadow: none !important;
  border: 0 !important;
  overflow: visible !important;
}

/* Login layout alignment repair */
body.admin-auth {
  overflow-x: hidden !important;
}

body.admin-auth .login-showcase {
  width: min(1120px, calc(100vw - 40px)) !important;
  min-height: calc(100vh - 40px) !important;
  margin: 0 auto !important;
  padding: 20px 0 !important;
}

body.admin-auth .login-device {
  width: 100% !important;
  max-width: 1040px !important;
  margin: 0 auto !important;
  overflow: hidden !important;
}

body.admin-auth .login-panel {
  grid-template-columns: minmax(300px, 390px) minmax(360px, 1fr) !important;
  gap: clamp(20px, 4vw, 56px) !important;
  min-height: 560px !important;
  padding: clamp(30px, 5vw, 64px) !important;
}

body.admin-auth .login-form-side {
  width: min(360px, 100%) !important;
}

body.admin-auth .login-art-side {
  min-width: 0 !important;
  width: 100% !important;
  min-height: 380px !important;
  overflow: hidden !important;
  display: grid !important;
  place-items: center !important;
}

body.admin-auth .login-art-image,
body.admin-auth .login-art-image.is-error {
  width: min(100%, 560px) !important;
  max-width: 100% !important;
  max-height: 430px !important;
  transform: none !important;
  object-fit: contain !important;
}

@media (max-width: 900px) {
body.admin-auth .login-showcase {
    width: min(560px, calc(100vw - 28px)) !important;
  }

body.admin-auth .login-panel {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
    padding: 28px 22px !important;
  }

body.admin-auth .login-art-side {
    order: -1 !important;
    min-height: 220px !important;
  }

body.admin-auth .login-art-image,
  body.admin-auth .login-art-image.is-error {
    width: min(100%, 430px) !important;
    max-height: 260px !important;
  }
}

@media (max-width: 480px) {
body.admin-auth {
    padding: 12px !important;
  }

body.admin-auth .login-showcase {
    width: 100% !important;
    min-height: calc(100vh - 24px) !important;
    padding: 0 !important;
  }

body.admin-auth .login-device {
    border-radius: 22px !important;
  }

body.admin-auth .login-panel {
    padding: 22px 18px !important;
    gap: 14px !important;
  }
}

.install-submit-btn { display:flex !important; align-items:center !important; justify-content:center !important; width:100% !important; min-height:54px !important; border:0 !important; border-radius:14px !important; background:#275A53 !important; color:#fff !important; font-size:17px !important; font-weight:900 !important; cursor:pointer !important; box-shadow:0 14px 30px rgba(39,90,83,.22) !important; }

/* Premium Bowl cart and admin order summary */
.cart-line.cart-line-bowl {
  position: relative;
  overflow: visible;
  border-color: rgba(39, 90, 83, .18);
  background:
    linear-gradient(135deg, rgba(39, 90, 83, .055), rgba(230, 201, 122, .11)),
    #fff;
}

.cart-line.cart-line-bowl::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: linear-gradient(180deg, #275A53, #E6C97A);
}

/* QR menu: keep category click functional without full green sweep/page-jump effect */
.qr-body .qr-category-toggle::before,
.qr-body .qr-nav-category-toggle::before {
  content: none !important;
}

.qr-body .qr-category-toggle.animate::after,
.qr-body .qr-nav-category-toggle.animate::after {
  animation: none !important;
}

.qr-body .qr-category-toggle.is-open,
.qr-body .qr-nav-category-toggle.is-open {
  background: rgba(39, 90, 83, .08) !important;
  color: #275A53 !important;
  border-color: rgba(39, 90, 83, .22) !important;
}

.cart-bowl-badge {
  width: max-content;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(39, 90, 83, .1);
  color: #275A53;
  font-size: 11px;
  font-style: normal;
  font-weight: 950;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.cart-bowl-details {
  display: grid;
  gap: 7px;
  margin: 4px 0 2px;
  padding: 10px;
  border: 1px solid rgba(39, 90, 83, .11);
  border-radius: 14px;
  background: rgba(255, 255, 255, .72);
}

.cart-bowl-detail {
  display: grid;
  grid-template-columns: minmax(92px, .42fr) 1fr;
  gap: 10px;
  align-items: start;
}

.cart-bowl-detail span {
  color: #687179;
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.cart-bowl-detail strong {
  color: #17202b;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.35;
}

.admin-order-cart {
  display: grid;
  gap: 10px;
  min-width: 260px;
}

.admin-order-cart article {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  background: #fff;
}

.admin-order-cart article.is-bowl {
  border-color: rgba(39, 90, 83, .18);
  background: linear-gradient(135deg, rgba(39, 90, 83, .06), rgba(230, 201, 122, .13));
}

.admin-order-cart article > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
}

.admin-order-cart strong {
  color: #111827;
  font-size: 13px;
  font-weight: 950;
}

.admin-order-cart span {
  color: #275A53;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 900;
}

.admin-order-cart em {
  width: max-content;
  padding: 3px 9px;
  border-radius: 999px;
  background: #275A53;
  color: #fff;
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.admin-order-cart dl {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 9px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .72);
}

.admin-order-cart dl div {
  display: grid;
  grid-template-columns: 105px 1fr;
  gap: 8px;
}

.admin-order-cart dt,
.admin-order-cart dd {
  margin: 0;
}

.admin-order-cart dt {
  color: #6b7280;
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.admin-order-cart dd {
  color: #17202b;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

@media (max-width: 640px) {
  .cart-bowl-detail,
  .admin-order-cart dl div {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .admin-order-cart article > div:first-child {
    display: grid;
  }

  .admin-order-cart span {
    white-space: normal;
  }
}

/* Compact mobile Bowl summary: keeps controls and delete button visible. */
.cart-line.cart-line-bowl {
  grid-template-columns: minmax(0, 1fr) 118px;
  gap: 14px;
  padding: 16px 14px 16px 18px;
  align-items: center;
  min-height: 142px;
}

.cart-line.cart-line-bowl .cart-line-main {
  gap: 8px;
}

.cart-line.cart-line-bowl .cart-line-main > strong {
  font-size: 15px;
  letter-spacing: -.01em;
}

.cart-line.cart-line-bowl .cart-line-main > span {
  font-size: 20px;
  margin-top: 8px;
}

.cart-line.cart-line-bowl .cart-bowl-summary-line {
  margin: 0;
  color: #263238;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.35;
  word-break: break-word;
}

.cart-line.cart-line-bowl .cart-bowl-badge {
  min-height: 22px;
  padding: 3px 9px;
  font-size: 10px;
}

.cart-line.cart-line-bowl .cart-bowl-details {
  gap: 5px;
  margin-top: 2px;
  padding: 8px;
  border-radius: 12px;
  max-width: 100%;
}

.cart-line.cart-line-bowl .cart-bowl-quick {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 2px;
}

.cart-line.cart-line-bowl .cart-bowl-quick div {
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid rgba(39, 90, 83, .09);
  border-radius: 11px;
  background: rgba(255, 255, 255, .72);
}

.cart-line.cart-line-bowl .cart-bowl-quick span {
  display: block;
  color: #687179;
  font-size: 9px;
  font-weight: 950;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.cart-line.cart-line-bowl .cart-bowl-quick strong {
  display: block;
  overflow: hidden;
  color: #111827;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.22;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.cart-line.cart-line-bowl .cart-bowl-toggle {
  width: max-content;
  min-height: 28px;
  padding: 0 11px;
  border: 1px solid rgba(39, 90, 83, .16);
  border-radius: 999px;
  background: rgba(39, 90, 83, .08);
  color: #275A53;
  font-size: 11px;
  font-weight: 950;
  cursor: pointer;
}

.cart-line.cart-line-bowl .cart-bowl-toggle:hover,
.cart-line.cart-line-bowl .cart-bowl-toggle:focus-visible {
  outline: 0;
  background: #275A53;
  color: #fff;
}

.cart-line.cart-line-bowl .cart-bowl-details[hidden] {
  display: none !important;
}

.cart-line.cart-line-bowl .cart-bowl-detail {
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 8px;
}

.cart-line.cart-line-bowl .cart-bowl-detail span {
  font-size: 10px;
  line-height: 1.25;
}

.cart-line.cart-line-bowl .cart-bowl-detail strong {
  display: -webkit-box;
  color: #111827;
  font-size: 12px;
  line-height: 1.25;
  max-height: 45px;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.cart-line.cart-line-bowl .cart-line-side {
  width: 118px;
  gap: 10px;
  justify-content: center;
  justify-items: stretch;
}

.cart-line.cart-line-bowl .cart-line-side b {
  max-width: 88px;
  white-space: normal;
  text-align: right;
  line-height: 1.2;
}

.cart-line.cart-line-bowl .cart-qty-controls {
  gap: 4px;
}

.cart-line.cart-line-bowl .cart-qty-controls button {
  width: 28px;
  height: 28px;
}

.cart-line.cart-line-bowl .cart-qty-controls em {
  min-width: 18px;
}

.cart-line.cart-line-bowl .cart-remove {
  min-width: 112px;
  max-width: 118px;
  width: 118px;
  min-height: 42px;
  height: 42px;
  padding: 0 10px;
  border-radius: 14px;
  gap: 6px;
}

.cart-line.cart-line-bowl .cart-remove-icon {
  width: 14px;
  height: 14px;
  flex-basis: 14px;
}

.cart-line.cart-line-bowl .cart-remove-icon svg {
  width: 14px;
  height: 14px;
}

.cart-line.cart-line-bowl .cart-remove-text {
  font-size: 12px;
}

@media (max-width: 420px) {
  .cart-line.cart-line-bowl {
    grid-template-columns: minmax(0, 1fr) 92px;
    gap: 8px;
    min-height: 132px;
    padding: 14px 10px 14px 14px;
  }

  .cart-line.cart-line-bowl .cart-bowl-detail {
    grid-template-columns: 66px minmax(0, 1fr);
    gap: 6px;
  }

  .cart-line.cart-line-bowl .cart-bowl-quick {
    grid-template-columns: 1fr;
  }

  .cart-line.cart-line-bowl .cart-line-side,
  .cart-line.cart-line-bowl .cart-line-side b,
  .cart-line.cart-line-bowl .cart-remove {
    width: 92px;
    max-width: 92px;
    min-width: 92px;
  }

  .cart-line.cart-line-bowl .cart-remove {
    height: 38px;
    min-height: 38px;
  }
}

/* Media operation center: product/image matching without legacy select clutter. */
body.admin-body .media-ops-page {
  display: grid;
  gap: 20px;
}

body.admin-body .media-ops-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

body.admin-body .media-ops-stats article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 86px;
  padding: 18px;
  border: 1px solid rgba(39, 90, 83, .10);
  border-radius: 20px;
  background: linear-gradient(135deg, #ffffff, #f6fbf9);
  box-shadow: 0 16px 34px rgba(15, 23, 42, .05);
}

body.admin-body .media-ops-stats span {
  color: #667085;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .03em;
  text-transform: uppercase;
}

body.admin-body .media-ops-stats strong {
  color: #173f39;
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 950;
}

body.admin-body .media-ops-toolbar {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) 220px auto;
  gap: 12px;
  align-items: end;
  padding: 14px;
  border: 1px solid rgba(15, 23, 42, .07);
  border-radius: 20px;
  background: #fff;
}

body.admin-body .media-ops-toolbar label,
body.admin-body .media-ops-preview label {
  display: grid;
  gap: 7px;
  color: #52606d;
  font-size: 12px;
  font-weight: 900;
}

body.admin-body .media-ops-toolbar input,
body.admin-body .media-ops-toolbar select,
body.admin-body .media-ops-preview input {
  min-height: 44px;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #f8fafc;
  padding: 0 14px;
  color: #111827;
  font-weight: 800;
}

body.admin-body .media-ops-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

body.admin-body .media-ops-filter-pills a {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  padding: 0 13px;
  border: 1px solid rgba(39, 90, 83, .14);
  border-radius: 999px;
  color: #275A53;
  font-size: 12px;
  font-weight: 950;
  text-decoration: none;
}

body.admin-body .media-ops-filter-pills a.active {
  background: #275A53;
  color: #fff;
}

body.admin-body .media-ops-layout {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

body.admin-body .media-ops-panel {
  min-width: 0;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(15, 23, 42, .05);
  overflow: hidden;
}

body.admin-body .media-ops-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px;
  border-bottom: 1px solid #eef2f7;
  background: linear-gradient(135deg, #fff, #f7fbfa);
}

body.admin-body .media-ops-panel-head strong {
  color: #111827;
  font-size: 15px;
  font-weight: 950;
}

body.admin-body .media-ops-panel-head span {
  color: #667085;
  font-size: 11px;
  font-weight: 900;
}

body.admin-body .media-ops-product-list {
  display: grid;
  gap: 8px;
  max-height: 680px;
  overflow: auto;
  padding: 12px;
}

body.admin-body .media-ops-product {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 10px;
  border: 1px solid #edf0f3;
  border-radius: 16px;
  background: #fff;
  color: #111827;
  text-align: left;
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

body.admin-body .media-ops-product:hover,
body.admin-body .media-ops-product.active {
  transform: translateY(-1px);
  border-color: rgba(39, 90, 83, .36);
  box-shadow: 0 12px 28px rgba(39, 90, 83, .10);
}

body.admin-body .media-product-thumb {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: #f4f7f6;
  overflow: hidden;
}

body.admin-body .media-product-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.admin-body .media-product-thumb em {
  padding: 4px;
  color: #b42318;
  font-size: 9px;
  font-style: normal;
  font-weight: 950;
  text-align: center;
}

body.admin-body .media-product-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

body.admin-body .media-product-copy strong {
  overflow: hidden;
  color: #111827;
  font-size: 13px;
  font-weight: 950;
  white-space: nowrap;
  text-overflow: ellipsis;
}

body.admin-body .media-product-copy small {
  overflow: hidden;
  color: #667085;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  text-overflow: ellipsis;
}

body.admin-body .media-product-status {
  padding: 5px 8px;
  border-radius: 999px;
  background: #ecfdf3;
  color: #027a48;
  font-size: 10px;
  font-weight: 950;
}

body.admin-body .media-ops-product.is-missing .media-product-status {
  background: #fff1f3;
  color: #c01048;
}

body.admin-body .media-ops-product.is-missing {
  border-color: rgba(192, 16, 72, .26);
  background: linear-gradient(135deg, #fff, #fff7f8);
  box-shadow: inset 4px 0 0 rgba(192, 16, 72, .42);
}

body.admin-body .media-ops-product.is-linked {
  opacity: .76;
}

body.admin-body .media-ops-product.is-linked:hover,
body.admin-body .media-ops-product.is-linked.active {
  opacity: 1;
}

body.admin-body .media-ops-image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(154px, 1fr));
  gap: 12px;
  max-height: 680px;
  overflow: auto;
  padding: 14px;
}

body.admin-body .media-ops-image {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
  min-width: 0;
  padding: 9px;
  border: 1px solid #edf0f3;
  border-radius: 16px;
  background: #fff;
  color: #111827;
  text-align: left;
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, opacity .16s ease;
}

body.admin-body .media-ops-image:hover,
body.admin-body .media-ops-image.active {
  transform: translateY(-2px);
  border-color: rgba(39, 90, 83, .38);
  box-shadow: 0 14px 30px rgba(39, 90, 83, .10);
}

body.admin-body .media-ops-image.is-used {
  background: #f8fafc;
  opacity: .58;
}

body.admin-body .media-ops-image.is-used.active,
body.admin-body .media-ops-image.is-used:hover {
  opacity: .82;
}

body.admin-body .media-image-thumb {
  position: relative;
  display: block;
  aspect-ratio: 1 / .88;
  border-radius: 13px;
  background: #f1f5f9;
  overflow: hidden;
}

body.admin-body .media-image-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.admin-body .media-ops-image.is-used .media-image-thumb::after {
  content: "Kullanılıyor";
  position: absolute;
  inset: auto 8px 8px 8px;
  border-radius: 999px;
  background: rgba(17, 24, 39, .72);
  color: #fff;
  padding: 5px 7px;
  font-size: 9px;
  font-weight: 950;
  text-align: center;
}

body.admin-body .media-ops-image strong,
body.admin-body .media-ops-image small,
body.admin-body .media-ops-image em {
  overflow: hidden;
  text-overflow: ellipsis;
}

body.admin-body .media-ops-image strong {
  display: -webkit-box;
  color: #111827;
  font-size: 10px;
  font-weight: 950;
  line-height: 1.25;
  min-height: 26px;
  text-align: center;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

body.admin-body .media-ops-image small {
  color: #667085;
  font-size: 9px;
  font-weight: 800;
  white-space: nowrap;
  text-align: center;
}

body.admin-body .media-ops-image em {
  min-height: 18px;
  color: #275A53;
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
  white-space: nowrap;
  text-align: center;
}

body.admin-body .media-ops-preview {
  position: static;
  display: grid;
  grid-template-columns: minmax(180px, .8fr) minmax(260px, 1.25fr) minmax(180px, .85fr);
  gap: 14px;
  align-items: end;
  margin-bottom: 16px;
  padding-bottom: 16px;
}

body.admin-body .media-ops-preview .media-ops-panel-head {
  grid-column: 1 / -1;
}

body.admin-body .media-preview-product,
body.admin-body .media-preview-compare,
body.admin-body .media-ops-preview label,
body.admin-body .media-ops-preview > p {
  margin-inline: 16px;
}

body.admin-body .media-preview-product {
  display: grid;
  gap: 4px;
  padding: 14px;
  border-radius: 16px;
  background: #f8fafc;
}

body.admin-body .media-preview-product span,
body.admin-body .media-preview-product small {
  color: #667085;
  font-size: 11px;
  font-weight: 900;
}

body.admin-body .media-preview-product strong {
  color: #111827;
  font-size: 18px;
  font-weight: 950;
}

body.admin-body .media-preview-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

body.admin-body .media-preview-compare figure {
  display: grid;
  gap: 7px;
  margin: 0;
}

body.admin-body .media-preview-compare figcaption {
  color: #667085;
  font-size: 11px;
  font-weight: 950;
}

body.admin-body .media-preview-empty,
body.admin-body .media-preview-img {
  display: grid;
  place-items: center;
  min-height: 112px;
  border: 1px dashed #d0d5dd;
  border-radius: 16px;
  background: #f8fafc;
  color: #98a2b3;
  font-size: 12px;
  font-weight: 900;
  overflow: hidden;
}

body.admin-body .media-preview-img {
  position: relative;
  border-style: solid;
  background: #fff;
}

body.admin-body .media-preview-img img {
  width: 100%;
  height: 112px;
  object-fit: cover;
}

body.admin-body .media-preview-img span {
  position: absolute;
  inset: auto 6px 6px 6px;
  padding: 4px 6px;
  border-radius: 999px;
  background: rgba(17, 24, 39, .72);
  color: #fff;
  font-size: 9px;
  font-weight: 950;
  text-align: center;
}

body.admin-body .media-ops-preview .btn.full {
  margin-inline: 16px;
  width: calc(100% - 32px);
}

@media (max-width: 1180px) {
  body.admin-body .media-ops-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  body.admin-body .media-ops-preview {
    position: static;
  }
}

@media (max-width: 820px) {
  body.admin-body .media-ops-stats,
  body.admin-body .media-ops-toolbar {
    grid-template-columns: 1fr;
  }

  body.admin-body .media-ops-filter-pills {
    justify-content: flex-start;
  }

  body.admin-body .media-ops-image-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Admin mobile bottom navigation mirrors QR menu tabbar */
body.admin-body .admin-mobile-bottom-nav {
  display: none !important;
}

@media (max-width: 767px) {
  body.admin-body {
    padding-bottom: calc(78px + env(safe-area-inset-bottom)) !important;
  }

  body.admin-body .admin-mobile-bottom-nav {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 1300 !important;
    height: calc(66px + env(safe-area-inset-bottom)) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 4px !important;
    padding: 7px 12px calc(7px + env(safe-area-inset-bottom)) !important;
    background: rgba(255, 255, 255, .98) !important;
    border-top: 1px solid rgba(226, 232, 240, .95) !important;
    box-shadow: 0 -8px 24px rgba(31, 35, 54, .12) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
  }

  body.admin-body .admin-mobile-bottom-nav a {
    position: relative !important;
    flex: 1 1 0 !important;
    min-width: 48px !important;
    min-height: 48px !important;
    height: 48px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    border-radius: 16px !important;
    border: 0 !important;
    background: transparent !important;
    color: #777d96 !important;
    font-size: 11px !important;
    line-height: 1.1 !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transition: color .18s ease, background .18s ease, transform .18s ease !important;
  }

  body.admin-body .admin-mobile-bottom-nav form {
    flex: 1 1 0 !important;
    min-width: 48px !important;
    margin: 0 !important;
  }

  body.admin-body .admin-mobile-bottom-nav button {
    position: relative !important;
    width: 100% !important;
    min-width: 48px !important;
    min-height: 48px !important;
    height: 48px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    border-radius: 16px !important;
    border: 0 !important;
    background: transparent !important;
    color: #777d96 !important;
    font: inherit !important;
    font-size: 11px !important;
    line-height: 1.1 !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    box-shadow: none !important;
    cursor: pointer !important;
    transition: color .18s ease, background .18s ease, transform .18s ease !important;
  }

  body.admin-body .admin-mobile-bottom-nav [data-admin-mobile-logout-form] button {
    color: #d92d20 !important;
  }

  body.admin-body .admin-mobile-bottom-nav [data-admin-mobile-logout-form] .admin-nav-icon {
    color: #d92d20 !important;
    stroke: #d92d20 !important;
  }

  body.admin-body .admin-mobile-bottom-nav button:hover,
  body.admin-body .admin-mobile-bottom-nav button:focus-visible {
    color: #b42318 !important;
    background: rgba(180, 35, 24, .08) !important;
    outline: none !important;
  }

  body.admin-body .admin-mobile-bottom-nav a:hover,
  body.admin-body .admin-mobile-bottom-nav a:focus-visible {
    color: #275A53 !important;
    background: rgba(39, 90, 83, .07) !important;
    outline: none !important;
  }

  body.admin-body .admin-mobile-bottom-nav a.active {
    color: #275A53 !important;
    background: rgba(39, 90, 83, .11) !important;
    font-weight: 950 !important;
    transform: translateY(-1px) !important;
  }

  body.admin-body .admin-mobile-bottom-nav a.active::after {
    content: "" !important;
    width: 22px !important;
    height: 3px !important;
    border-radius: 10px !important;
    background: #275A53 !important;
    box-shadow: 0 0 10px rgba(39, 90, 83, .24) !important;
  }

  body.admin-body .admin-mobile-bottom-nav .admin-nav-icon {
    width: 23px !important;
    height: 23px !important;
    color: currentColor !important;
    stroke-width: 2 !important;
  }

  body.admin-body .admin-mobile-bottom-nav span {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 11px !important;
    font-style: normal !important;
    color: currentColor !important;
  }

  body.admin-body .admin-mobile-bottom-nav b {
    position: absolute !important;
    left: calc(50% + 8px) !important;
    top: 5px !important;
    min-width: 19px !important;
    height: 19px !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 4px !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #d68a00 !important;
    border: 0 !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    box-shadow: none !important;
    text-shadow: 0 1px 0 #fff, 0 0 1px rgba(33, 37, 41, .45), 0 0 8px rgba(245, 171, 30, .35) !important;
  }
}
/* Premium QR mobile bottom navbar templates */
.mobile-menu-tabbar.template-floating,
.mobile-menu-tabbar.template-center,
.mobile-menu-tabbar.template-glass,
.mobile-menu-tabbar.template-compact,
.mobile-menu-tabbar.template-pills {
  --mobile-menu-safe-bottom: env(safe-area-inset-bottom);
}

.mobile-menu-tabbar.template-floating {
  left: 12px;
  right: 12px;
  bottom: calc(10px + var(--mobile-menu-safe-bottom));
  width: auto;
  height: calc(var(--mobile-menu-height, 65px) - 2px);
  padding: 7px;
  border: 1px solid rgba(17, 24, 39, .06);
  border-radius: 999px;
  background: var(--mobile-menu-bg, #fff);
  box-shadow: 0 18px 38px rgba(17, 24, 39, .2);
}

.mobile-menu-tabbar.template-floating .nav-item {
  border-radius: 999px;
  transition: transform .18s ease, background .18s ease, color .18s ease;
}

.mobile-menu-tabbar.template-floating .nav-item.active {
  color: #fff;
  background: var(--mobile-menu-active, #275a53);
}

.mobile-menu-tabbar.template-floating .nav-item:active {
  transform: scale(.96);
}

.mobile-menu-tabbar.template-center {
  left: 14px;
  right: 14px;
  bottom: calc(12px + var(--mobile-menu-safe-bottom));
  width: auto;
  height: calc(var(--mobile-menu-height, 65px) - 2px);
  padding: 7px;
  border-radius: 24px;
  border: 1px solid rgba(17, 24, 39, .06);
  background: var(--mobile-menu-bg, #fff);
  box-shadow: 0 18px 38px rgba(17, 24, 39, .18);
}

.mobile-menu-tabbar.template-center .nav-item:nth-child(3) {
  flex: 0 0 60px;
  width: 60px;
  height: 60px;
  min-height: 60px;
  border-radius: 999px;
  background: var(--mobile-menu-active, #275a53);
  color: #fff;
  transform: translateY(-17px);
  box-shadow: 0 16px 30px color-mix(in srgb, var(--mobile-menu-active, #275a53) 34%, transparent);
}

.mobile-menu-tabbar.template-center .nav-item.active:not(:nth-child(3)) {
  color: var(--mobile-menu-active, #275a53);
}

.mobile-menu-tabbar.template-glass {
  left: 12px;
  right: 12px;
  bottom: calc(10px + var(--mobile-menu-safe-bottom));
  width: auto;
  height: calc(var(--mobile-menu-height, 65px) - 2px);
  padding: 7px;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 24px;
  background: rgba(255, 255, 255, .78);
  box-shadow: 0 18px 38px rgba(17, 24, 39, .18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.mobile-menu-tabbar.template-glass .nav-item.active {
  color: #fff;
  background: linear-gradient(135deg, var(--mobile-menu-active, #275a53), #143d38);
  border-radius: 18px;
}

.mobile-menu-tabbar.template-compact {
  height: 56px;
  padding: 5px 8px calc(5px + var(--mobile-menu-safe-bottom));
  border-top: 1px solid rgba(17, 24, 39, .08);
  background: var(--mobile-menu-bg, #fff);
  box-shadow: 0 -4px 14px rgba(17, 24, 39, .08);
}

.mobile-menu-tabbar.template-compact .nav-item em {
  display: none;
}

.mobile-menu-tabbar.template-compact .nav-item.active {
  color: var(--mobile-menu-active, #275a53);
}

.mobile-menu-tabbar.template-pills {
  left: 10px;
  right: 10px;
  bottom: calc(10px + var(--mobile-menu-safe-bottom));
  width: auto;
  height: calc(var(--mobile-menu-height, 65px) + 2px);
  gap: 6px;
  padding: 7px;
  border-radius: 24px;
  background: #f6f8fb;
  box-shadow: 0 18px 38px rgba(17, 24, 39, .18);
}

.mobile-menu-tabbar.template-pills .nav-item {
  border-radius: 18px;
}

.mobile-menu-tabbar.template-pills .nav-item.active {
  color: #fff;
  background: var(--mobile-menu-active, #275a53);
}

.mobile-menu-tabbar .cart strong[data-cart-badge],
.mobile-menu-tabbar .cart strong {
  background: #e11d48;
  color: #fff;
  box-shadow: 0 4px 12px rgba(225, 29, 72, .24);
}

.mobile-menu-tabbar .cart b[data-cart-mobile-total] {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--mobile-menu-active, #275a53);
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}

/* Selected QR mobile navbar templates */
.mobile-menu-tabbar.template-fluid-pill,
.mobile-menu-tabbar.template-goo-bubble,
.mobile-menu-tabbar.template-color-pill {
  --mobile-menu-safe-bottom: env(safe-area-inset-bottom);
}

.mobile-menu-tabbar.template-fluid-pill {
  left: 12px;
  right: 12px;
  bottom: calc(10px + var(--mobile-menu-safe-bottom));
  width: auto;
  height: calc(var(--mobile-menu-height, 65px) - 2px);
  padding: 7px;
  border: 1px solid rgba(17, 24, 39, .06);
  border-radius: 999px;
  background: var(--mobile-menu-bg, #fff);
  box-shadow: 0 18px 38px rgba(17, 24, 39, .2);
}

.mobile-menu-tabbar.template-fluid-pill .nav-item {
  border-radius: 999px;
  transition: transform .22s ease, background .22s ease, color .22s ease;
}

.mobile-menu-tabbar.template-fluid-pill .nav-item.active {
  color: #fff;
  background: var(--mobile-menu-active, #275a53);
}

.mobile-menu-tabbar.template-fluid-pill .nav-item.active .material-icons,
.mobile-menu-tabbar.template-fluid-pill .nav-item.active i {
  transform: translateY(-28px) rotateX(82deg) scale(.42);
  opacity: 0;
  transition: transform .28s ease, opacity .28s ease;
}

.mobile-menu-tabbar.template-fluid-pill .nav-item.active em {
  position: absolute;
  color: #fff;
  font-weight: 950;
  opacity: 1;
}

.mobile-menu-tabbar.template-goo-bubble {
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--mobile-menu-height, 65px) + 8px);
  padding: 9px 10px calc(9px + var(--mobile-menu-safe-bottom));
  border-radius: 28px 28px 0 0;
  background: var(--mobile-menu-bg, #fff);
  box-shadow: 0 -14px 30px rgba(17, 24, 39, .14);
  overflow: visible;
}

.mobile-menu-tabbar.template-goo-bubble .nav-item {
  position: relative;
  z-index: 1;
  transition: transform .25s ease, color .25s ease;
}

.mobile-menu-tabbar.template-goo-bubble .nav-item.active {
  color: var(--mobile-menu-active, #275a53);
  transform: translateY(-8px) scale(1.06);
}

.mobile-menu-tabbar.template-goo-bubble .nav-item.active::before {
  content: "";
  position: absolute;
  top: -21px;
  left: 50%;
  width: 58px;
  height: 58px;
  border-radius: 999px;
  background: var(--mobile-menu-bg, #fff);
  transform: translateX(-50%);
  z-index: -1;
  box-shadow: 0 10px 20px rgba(17, 24, 39, .08);
}

.mobile-menu-tabbar.template-color-pill {
  left: 10px;
  right: 10px;
  bottom: calc(10px + var(--mobile-menu-safe-bottom));
  width: auto;
  height: calc(var(--mobile-menu-height, 65px) + 2px);
  gap: 7px;
  padding: 8px;
  border-radius: 28px;
  background: var(--mobile-menu-bg, #fff);
  box-shadow: 0 18px 38px rgba(17, 24, 39, .18);
}

.mobile-menu-tabbar.template-color-pill .nav-item {
  border-radius: 999px;
  transition: flex .25s ease, background .25s ease, color .25s ease;
}

.mobile-menu-tabbar.template-color-pill .nav-item:nth-child(1) { --mobile-pill-bg: #e9f5f2; --mobile-pill-color: #275a53; }
.mobile-menu-tabbar.template-color-pill .nav-item:nth-child(2) { --mobile-pill-bg: #fff4d8; --mobile-pill-color: #8a6515; }
.mobile-menu-tabbar.template-color-pill .nav-item:nth-child(3) { --mobile-pill-bg: #dff8f1; --mobile-pill-color: #0f766e; }
.mobile-menu-tabbar.template-color-pill .nav-item:nth-child(4) { --mobile-pill-bg: #ffe4e6; --mobile-pill-color: #be123c; }
.mobile-menu-tabbar.template-color-pill .nav-item:nth-child(5) { --mobile-pill-bg: #e0f2fe; --mobile-pill-color: #0369a1; }

.mobile-menu-tabbar.template-color-pill .nav-item.active {
  flex: 1.6 1 0;
  color: var(--mobile-pill-color, var(--mobile-menu-active, #275a53));
  background: var(--mobile-pill-bg, #e9f5f2);
}

/* Final navbar theme guard: only the selected 3 templates should drive QR mobile nav */
@media (max-width: 767px) {
  body.qr-body .mobile-menu-tabbar.template-fluid-pill,
  body.qr-body .mobile-menu-tabbar.template-goo-bubble,
  body.qr-body .mobile-menu-tabbar.template-color-pill {
    position: fixed !important;
    z-index: 1000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
    font-family: var(--font, Inter, "Segoe UI", Arial, sans-serif) !important;
  }

  body.qr-body .mobile-menu-tabbar.template-fluid-pill .nav-item,
  body.qr-body .mobile-menu-tabbar.template-goo-bubble .nav-item,
  body.qr-body .mobile-menu-tabbar.template-color-pill .nav-item {
    min-width: 0 !important;
    min-height: 48px !important;
    border: 0 !important;
    background: transparent;
    box-shadow: none;
    color: #727b8c;
    text-decoration: none !important;
  }

  body.qr-body .mobile-menu-tabbar.template-fluid-pill .nav-item.active {
    color: #fff !important;
    background: var(--mobile-menu-active, #275a53) !important;
  }

  body.qr-body .mobile-menu-tabbar.template-goo-bubble .nav-item.active {
    color: var(--mobile-menu-active, #275a53) !important;
    background: transparent !important;
  }

  body.qr-body .mobile-menu-tabbar.template-color-pill .nav-item.active {
    background: var(--mobile-pill-bg, #e9f5f2) !important;
    color: var(--mobile-pill-color, var(--mobile-menu-active, #275a53)) !important;
  }

  body.qr-body .mobile-menu-tabbar.template-fluid-pill .cart strong,
  body.qr-body .mobile-menu-tabbar.template-goo-bubble .cart strong,
  body.qr-body .mobile-menu-tabbar.template-color-pill .cart strong {
    position: absolute !important;
    top: 3px !important;
    right: 16% !important;
    min-width: 18px !important;
    height: 18px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 999px !important;
    background: #e11d48 !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    text-shadow: none !important;
  }
}

/* General Theme final override: keep palette cards readable even if older admin CSS loads later */
body.admin-body .theme-management-form .theme-management-grid {
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr) !important;
  gap: 22px !important;
  align-items: start !important;
}

body.admin-body .theme-management-form .theme-palette-panel,
body.admin-body .theme-management-form .theme-preview-panel {
  min-width: 0 !important;
  order: 0 !important;
}

body.admin-body .theme-management-form .theme-palette-panel {
  overflow: hidden !important;
}

body.admin-body .theme-management-form .theme-preset-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important;
  gap: 12px !important;
  align-items: stretch !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.admin-body .theme-management-form .theme-preset-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-rows: auto 1fr auto !important;
  gap: 7px 8px !important;
  min-width: 0 !important;
  min-height: 104px !important;
  width: 100% !important;
  padding: 12px !important;
  border-radius: 14px !important;
  text-align: left !important;
  line-height: 1.1 !important;
  overflow: hidden !important;
}

body.admin-body .theme-management-form .theme-preset-card strong {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  align-self: center !important;
  margin: 0 !important;
  max-width: 100% !important;
  color: inherit !important;
  font-size: 15px !important;
  line-height: 1.05 !important;
  font-weight: 950 !important;
  overflow-wrap: anywhere !important;
}

body.admin-body .theme-management-form .theme-preset-card em,
body.admin-body .theme-management-form .theme-preset-card .theme-preset-no {
  margin: 0 !important;
  font-size: 10px !important;
  line-height: 1.1 !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

body.admin-body .theme-management-form .theme-swatch-row {
  grid-column: 1 / -1 !important;
  display: flex !important;
  gap: 5px !important;
}

body.admin-body .theme-management-form .theme-swatch-row i {
  width: 15px !important;
  height: 15px !important;
  flex: 0 0 15px !important;
}

@media (max-width: 1120px) {
  body.admin-body .theme-management-form .theme-management-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 640px) {
  body.admin-body .theme-management-form .theme-overview-strip,
  body.admin-body .theme-management-form .theme-preset-grid {
    grid-template-columns: 1fr !important;
  }
}