:root {
      --bg: #F8F4EF;
      --surface: #FFFFFF;
      --blush: #EFE5D8;
      --warm: #DDD0BF;
      --accent: #8B4A3C;
      --accent2: #6B3A58;
      --gold: #9A7B4F;
      --text: #2A1F18;
      --muted: #8A7060;
      --border: rgba(42, 31, 24, 0.10);
      --border2: rgba(42, 31, 24, 0.18);
      --r: 16px;
      --rsm: 10px;
      --red-bg: #F9EDEA;
      --red: #8B4A3C;
      --green-bg: #EAF0E8;
      --green: #3A5C32;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      -webkit-tap-highlight-color: transparent
    }

    html, body {
      height: 100%
    }

    body {
      font-family: 'Mulish', sans-serif;
      background: var(--bg);
      margin: 0
    }

    /* ── SHELL ── */
    .shell {
      width: 100%;
      height: 100vh;
      background: var(--bg);
      overflow: hidden;
      position: relative
    }

    .screens {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%
    }

    .screen {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: var(--bg);
      display: flex;
      flex-direction: column;
      opacity: 0;
      pointer-events: none;
      transform: translateX(28px);
      transition: all 0.26s cubic-bezier(0.4, 0, 0.2, 1)
    }

    .screen.active {
      opacity: 1;
      pointer-events: all;
      transform: translateX(0)
    }

    .screen.slide-back {
      transform: translateX(-28px);
      opacity: 0;
      pointer-events: none
    }

    .screen-body {
      flex: 1;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      padding-bottom: 24px
    }

    .screen-body::-webkit-scrollbar {
      display: none
    }

    /* ── TG HEADER ── */
    .tg-hdr {
      height: 52px;
      background: var(--surface);
      border-bottom: 0.5px solid var(--border);
      display: flex;
      align-items: center;
      padding: 0 16px;
      gap: 10px;
      flex-shrink: 0
    }

    .tg-back {
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: var(--accent);
      font-size: 22px;
      font-weight: 300
    }

    .tg-av {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: var(--accent);
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 12px;
      font-weight: 600;
      flex-shrink: 0
    }

    .tg-ttl {
      flex: 1
    }

    .tg-ttl-name {
      font-size: 15px;
      font-weight: 600;
      color: var(--text)
    }

    .tg-ttl-sub {
      font-size: 11px;
      color: var(--muted)
    }

    /* ── BOTTOM NAV ── */
    .bot-nav {
      height: 58px;
      background: var(--surface);
      border-top: 0.5px solid var(--border);
      display: flex;
      align-items: center;
      flex-shrink: 0
    }

    .nav-it {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 3px;
      cursor: pointer;
      padding: 6px 0
    }

    .nav-ic {
      font-size: 18px;
      line-height: 1
    }

    .nav-lb {
      font-size: 9px;
      color: var(--muted);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.06em
    }

    .nav-it.active .nav-lb {
      color: var(--accent)
    }

    /* ── TYPOGRAPHY ── */
    .serif {
      font-family: 'Playfair Display', serif
    }

    .section-label {
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--muted);
      padding: 18px 20px 8px
    }

    /* ── BUTTONS ── */
    .btn {
      width: calc(100% - 32px);
      margin: 0 16px;
      padding: 14px;
      border-radius: var(--r);
      border: none;
      font-family: 'Mulish', sans-serif;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      transition: all 0.15s
    }

    .btn.primary {
      background: var(--accent);
      color: white;
      box-shadow: 0 4px 16px rgba(139, 74, 60, 0.3)
    }

    .btn.primary:active {
      background: #7A3A2C;
      transform: scale(0.98)
    }

    .btn.outline {
      background: transparent;
      color: var(--accent);
      border: 1.5px solid var(--accent)
    }

    .btn.outline:active {
      background: var(--red-bg)
    }

    .btn-area {
      padding: 12px 16px 20px;
      background: linear-gradient(to top, var(--bg) 80%, transparent)
    }

    /* ── CHIPS ── */
    .chip {
      padding: 8px 14px;
      border-radius: 100px;
      font-size: 13px;
      border: 1px solid var(--border2);
      background: var(--surface);
      color: var(--text);
      cursor: pointer;
      transition: all 0.15s;
      font-family: 'Mulish', sans-serif;
      display: inline-flex;
      align-items: center;
      gap: 5px
    }

    .chip.sel {
      background: var(--accent);
      border-color: var(--accent);
      color: white
    }

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

    /* ── CARDS ── */
    .card {
      background: var(--surface);
      border-radius: var(--r);
      border: 0.5px solid var(--border);
      overflow: hidden;
      margin: 0 16px 10px
    }

    .card-row {
      padding: 13px 16px;
      border-bottom: 0.5px solid var(--border);
      display: flex;
      align-items: center;
      gap: 12px;
      cursor: pointer;
      transition: background 0.15s
    }

    .card-row:last-child {
      border-bottom: none
    }

    .card-row:active {
      background: var(--bg)
    }

    /* ── INPUT ── */
    .inp {
      width: 100%;
      padding: 12px 14px;
      border-radius: var(--rsm);
      border: 1px solid var(--border2);
      background: var(--surface);
      font-family: 'Mulish', sans-serif;
      font-size: 14px;
      color: var(--text);
      outline: none;
      transition: border-color 0.2s
    }

    .inp:focus {
      border-color: var(--accent)
    }

    .txta {
      width: 100%;
      padding: 12px 14px;
      border-radius: var(--rsm);
      border: 1px solid var(--border2);
      background: var(--surface);
      font-family: 'Mulish', sans-serif;
      font-size: 14px;
      color: var(--text);
      outline: none;
      resize: none;
      transition: border-color 0.2s
    }

    .txta:focus {
      border-color: var(--accent)
    }

    .form-row {
      margin-bottom: 16px
    }

    .form-lbl {
      font-size: 11px;
      font-weight: 600;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-bottom: 7px;
      display: block
    }

    /* ── SEG CONTROL ── */
    .seg {
      display: flex;
      background: var(--blush);
      border-radius: var(--rsm);
      padding: 3px;
      gap: 3px
    }

    .seg-btn {
      flex: 1;
      padding: 9px 6px;
      border-radius: 8px;
      border: none;
      background: transparent;
      font-family: 'Mulish', sans-serif;
      font-size: 13px;
      color: var(--muted);
      cursor: pointer;
      transition: all 0.2s;
      text-align: center;
      font-weight: 500
    }

    .seg-btn.active {
      background: var(--surface);
      color: var(--text);
      font-weight: 600;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1)
    }

    /* ── TOGGLE ── */
    .toggle {
      width: 44px;
      height: 26px;
      border-radius: 13px;
      background: #CCC;
      position: relative;
      transition: background 0.2s;
      flex-shrink: 0
    }

    .toggle.on {
      background: var(--accent)
    }

    .toggle::after {
      content: '';
      position: absolute;
      top: 3px;
      left: 3px;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: white;
      transition: transform 0.2s;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2)
    }

    .toggle.on::after {
      transform: translateX(18px)
    }

    .toggle-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 13px 16px;
      border-bottom: 0.5px solid var(--border);
      cursor: pointer
    }

    .toggle-row:last-child {
      border-bottom: none
    }

    .tr-lbl {
      font-size: 14px;
      color: var(--text)
    }

    .tr-sub {
      font-size: 11px;
      color: var(--muted);
      margin-top: 2px
    }

    /* ── QTY ── */
    .qty-row {
      display: flex;
      align-items: center;
      gap: 14px
    }

    .qty-btn {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      border: 1px solid var(--border2);
      background: var(--surface);
      color: var(--accent);
      font-size: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background 0.15s
    }

    .qty-btn:active {
      background: var(--blush)
    }

    .qty-val {
      font-size: 18px;
      font-weight: 600;
      color: var(--text);
      min-width: 32px;
      text-align: center
    }

    .qty-unit {
      font-size: 13px;
      color: var(--muted)
    }

    /* ── FILLING GRID ── */
    .fill-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px
    }

    .fill-card {
      padding: 12px;
      border-radius: var(--rsm);
      border: 1.5px solid var(--border);
      background: var(--surface);
      cursor: pointer;
      transition: all 0.15s
    }

    .fill-card.sel {
      border-color: var(--accent);
      background: var(--red-bg)
    }

    .fill-name {
      font-size: 13px;
      font-weight: 600;
      color: var(--text);
      margin-bottom: 2px
    }

    /* ── DELIVERY OPTS ── */
    .del-opts {
      display: flex;
      flex-direction: column;
      gap: 8px
    }

    .del-opt {
      padding: 14px 16px;
      border-radius: var(--r);
      border: 1.5px solid var(--border);
      background: var(--surface);
      cursor: pointer;
      transition: all 0.15s;
      display: flex;
      align-items: center;
      gap: 12px
    }

    .del-opt.sel {
      border-color: var(--accent);
      background: var(--red-bg)
    }

    .del-ic {
      font-size: 22px;
      width: 38px;
      height: 38px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--blush);
      border-radius: 10px;
      flex-shrink: 0
    }

    .del-name {
      font-size: 14px;
      font-weight: 600;
      color: var(--text)
    }

    .del-sub {
      font-size: 12px;
      color: var(--muted);
      margin-top: 2px
    }

    /* ── UPLOAD ── */
    .upload {
      border: 1.5px dashed var(--warm);
      border-radius: var(--r);
      padding: 22px;
      text-align: center;
      cursor: pointer;
      background: #FBF8F4;
      transition: all 0.2s
    }

    .upload:active {
      background: var(--blush)
    }

    .upload-ic {
      font-size: 26px;
      margin-bottom: 8px
    }

    .upload-lb {
      font-size: 12px;
      color: var(--muted);
      line-height: 1.5
    }

    .upload-lb b {
      color: var(--accent);
      font-weight: 600
    }

    /* ── STEPS BAR ── */
    .steps-bar {
      background: var(--surface);
      padding: 14px 20px;
      border-bottom: 0.5px solid var(--border);
      flex-shrink: 0
    }

    .steps-dots {
      display: flex;
      gap: 6px
    }

    .sdot {
      height: 4px;
      border-radius: 2px;
      background: var(--blush);
      flex: 1;
      transition: background 0.3s
    }

    .sdot.done,
    .sdot.act {
      background: var(--accent)
    }

    /* ── INLINE TIP ── */
    .tip {
      padding: 10px 14px;
      background: #FBF8F4;
      border-left: 3px solid var(--warm);
      border-radius: 0 var(--rsm) var(--rsm) 0;
      font-size: 12px;
      color: var(--muted);
      margin-top: 8px;
      line-height: 1.5
    }

    /* ── STEP BLOCK ── */
    .step-block {
      padding: 20px 20px 0
    }

    .step-h {
      font-family: 'Playfair Display', serif;
      font-size: 22px;
      color: var(--text);
      margin-bottom: 4px
    }

    .step-s {
      font-size: 13px;
      color: var(--muted);
      margin-bottom: 20px
    }

    /* ── CALENDAR ── */
    .cal-grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 4px
    }

    .cal-dn {
      text-align: center;
      font-size: 10px;
      color: var(--muted);
      font-weight: 600;
      padding: 4px 0
    }

    .cal-d {
      aspect-ratio: 1;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      cursor: pointer;
      transition: all 0.15s;
      color: var(--text);
      position: relative
    }

    .cal-d:active {
      transform: scale(0.9)
    }

    .cal-d.today {
      font-weight: 700;
      color: var(--accent)
    }

    .cal-d.blocked {
      color: #CCC;
      pointer-events: none;
      text-decoration: line-through
    }

    .cal-d.past {
      color: #CCC;
      pointer-events: none
    }

    .cal-d.sel {
      background: var(--accent);
      color: white
    }

    .cal-d.busy::after {
      content: '';
      position: absolute;
      bottom: 3px;
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: var(--warm)
    }

    .cal-nav {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px
    }

    .cal-nav-btn {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: none;
      background: var(--blush);
      color: var(--text);
      font-size: 16px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center
    }

    /* ── TIME SLOTS ── */
    .time-slots {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin-top: 12px
    }

    .tslot {
      padding: 11px;
      border-radius: var(--rsm);
      border: 1.5px solid var(--border);
      background: var(--surface);
      text-align: center;
      cursor: pointer;
      transition: all 0.15s
    }

    .tslot.sel {
      border-color: var(--accent);
      background: var(--red-bg)
    }

    .tslot-t {
      font-size: 14px;
      font-weight: 600;
      color: var(--text)
    }

    .tslot-l {
      font-size: 11px;
      color: var(--muted);
      margin-top: 2px
    }

    /* ── EVENT CHIPS ── */
    .ev-chip {
      padding: 8px 14px;
      border-radius: 100px;
      font-size: 13px;
      border: 1px solid var(--border2);
      background: var(--surface);
      color: var(--text);
      cursor: pointer;
      transition: all 0.15s;
      font-family: 'Mulish', sans-serif;
      display: inline-flex;
      align-items: center;
      gap: 6px
    }

    .ev-chip.sel {
      background: var(--accent);
      border-color: var(--accent);
      color: white
    }

    /* ── SUMMARY ── */
    .sum-hero {
      background: var(--surface);
      padding: 18px 16px;
      border-bottom: 0.5px solid var(--border);
      display: flex;
      gap: 14px;
      align-items: center
    }

    .sum-img {
      width: 72px;
      height: 72px;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 34px;
      flex-shrink: 0;
      background: linear-gradient(135deg, #F2E4D8, #DDD0BF)
    }

    .sum-pname {
      font-family: 'Playfair Display', serif;
      font-size: 19px;
      color: var(--text);
      margin-bottom: 4px
    }

    .sum-params {
      font-size: 12px;
      color: var(--muted);
      line-height: 1.6
    }

    .sum-row {
      background: var(--surface);
      border-radius: var(--rsm);
      overflow: hidden;
      border: 0.5px solid var(--border);
      margin: 0 0 8px
    }

    .sum-row-hdr {
      padding: 11px 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
      border-bottom: 0.5px solid var(--border)
    }

    .sum-row-key {
      font-size: 11px;
      font-weight: 600;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.08em
    }

    .sum-row-edit {
      font-size: 12px;
      color: var(--accent);
      font-weight: 600
    }

    .sum-row-val {
      padding: 12px 16px;
      font-size: 13px;
      color: var(--text);
      line-height: 1.7
    }

    .price-blk {
      margin: 0 16px;
      padding: 16px;
      background: var(--accent);
      border-radius: var(--r);
      color: white;
      display: flex;
      justify-content: space-between;
      align-items: center
    }

    .price-lbl {
      font-size: 12px;
      opacity: 0.8;
      margin-bottom: 4px
    }

    .price-tot {
      font-family: 'Playfair Display', serif;
      font-size: 30px;
      font-weight: 600
    }

    .price-note {
      font-size: 11px;
      opacity: 0.7;
      margin-top: 4px
    }

    .promo-note {
      margin: 8px 16px 0;
      padding: 10px 14px;
      background: #FBF8F4;
      border-radius: var(--rsm);
      border: 0.5px solid var(--warm);
      font-size: 12px;
      color: var(--muted);
      display: flex;
      gap: 8px;
      align-items: center
    }

    /* ── SUCCESS ── */
    .success-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 40px 32px;
      text-align: center;
      min-height: 500px
    }

    .succ-anim {
      width: 96px;
      height: 96px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--blush), var(--accent));
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 40px;
      margin-bottom: 28px;
      animation: pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1)
    }

    @keyframes pop {
      from {
        transform: scale(0);
        opacity: 0
      }

      to {
        transform: scale(1);
        opacity: 1
      }
    }

    .succ-title {
      font-family: 'Playfair Display', serif;
      font-size: 26px;
      color: var(--text);
      margin-bottom: 12px;
      line-height: 1.2
    }

    .succ-text {
      font-size: 14px;
      color: var(--muted);
      line-height: 1.7;
      margin-bottom: 28px
    }

    /* ── ORDERS LIST ── */
    .ord-card {
      background: var(--surface);
      border-radius: var(--r);
      border: 0.5px solid var(--border);
      overflow: hidden;
      cursor: pointer;
      transition: transform 0.15s;
      margin: 0 16px 10px
    }

    .ord-card:active {
      transform: scale(0.98)
    }

    .ord-top {
      padding: 14px 16px;
      display: flex;
      gap: 12px;
      align-items: center
    }

    .ord-mini {
      width: 48px;
      height: 48px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      flex-shrink: 0;
      background: linear-gradient(135deg, #F2E4D8, #DDD0BF)
    }

    .ord-iname {
      font-size: 14px;
      font-weight: 600;
      color: var(--text);
      margin-bottom: 3px
    }

    .ord-idate {
      font-size: 12px;
      color: var(--muted)
    }

    .ord-sbar {
      padding: 8px 16px;
      background: var(--bg);
      display: flex;
      justify-content: space-between;
      align-items: center
    }

    .sbadge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 4px 10px;
      border-radius: 100px;
      font-size: 11px;
      font-weight: 600
    }

    .sbadge.new {
      background: #FEF3E2;
      color: #8B5E2A
    }

    .sbadge.prog {
      background: #E8EFF9;
      color: #2A4A8B
    }

    .sbadge.ready {
      background: var(--green-bg);
      color: var(--green)
    }

    .sbadge.done {
      background: var(--blush);
      color: var(--muted)
    }

    .sdot2 {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: currentColor
    }

    /* ── ORDER DETAIL ── */
    .tl-wrap {
      padding: 16px 20px
    }

    .tl-step {
      display: flex;
      gap: 12px;
      margin-bottom: 16px;
      position: relative
    }

    .tl-step:not(:last-child)::before {
      content: '';
      position: absolute;
      left: 11px;
      top: 24px;
      width: 1px;
      height: calc(100% + 4px);
      background: var(--blush)
    }

    .tl-dot {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      font-size: 11px;
      font-weight: 600
    }

    .tl-dot.done {
      background: var(--accent);
      color: white
    }

    .tl-dot.act {
      background: var(--blush);
      color: var(--accent);
      border: 2px solid var(--accent)
    }

    .tl-dot.pend {
      background: var(--blush);
      color: var(--muted)
    }

    .tl-ttl {
      font-size: 13px;
      font-weight: 600;
      color: var(--text);
      margin-bottom: 2px
    }

    .tl-sub {
      font-size: 11px;
      color: var(--muted)
    }

    /* ── HOME SCREEN ── */
    .home-hero {
      background: var(--surface);
      padding: 0;
      overflow: hidden
    }

    .home-hero-img {
      width: 100%;
      height: 160px;
      background: linear-gradient(135deg, #2A1F18 0%, #5A3530 50%, #8B4A3C 100%);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 20px 0 24px;
      position: relative
    }

    .hero-text {
      flex: 1
    }

    .hero-label {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.6);
      margin-bottom: 6px
    }

    .hero-title {
      font-family: 'Playfair Display', serif;
      font-size: 26px;
      color: white;
      line-height: 1.2
    }

    .hero-photo {
      width: 112px;
      height: 112px;
      border-radius: 50%;
      overflow: hidden;
      border: 3px solid rgba(255, 255, 255, 0.22);
      flex-shrink: 0;
      margin-left: 16px
    }

    .hero-photo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center top
    }

    .profile-block {
      padding: 16px 20px 14px
    }

    .profile-name {
      font-family: 'Playfair Display', serif;
      font-size: 22px;
      color: var(--text);
      margin-bottom: 4px
    }

    .profile-tagline {
      font-size: 13px;
      color: var(--muted);
      line-height: 1.5;
      margin-bottom: 12px
    }

    .profile-tags {
      display: flex;
      gap: 6px;
      flex-wrap: wrap
    }

    .profile-tag {
      padding: 5px 12px;
      border-radius: 100px;
      font-size: 11px;
      font-weight: 600;
      background: var(--blush);
      color: var(--gold);
      border: 0.5px solid var(--warm)
    }

    /* ── HOME SECTIONS ── */
    .home-sections {
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 4px 16px 0
    }

    .home-section-card {
      border-radius: var(--r);
      overflow: hidden;
      cursor: pointer;
      transition: transform 0.15s;
      position: relative
    }

    .home-section-card:active {
      transform: scale(0.98)
    }

    .hsc-bg {
      width: 100%;
      height: 110px;
      display: flex;
      align-items: flex-end;
      padding: 14px 16px
    }

    .hsc-dessert {
      background: linear-gradient(135deg, #5A3530 0%, #8B4A3C 100%)
    }

    .hsc-confect {
      background: linear-gradient(135deg, #3A2A50 0%, #6B3A58 100%)
    }

    .hsc-master {
      background: linear-gradient(135deg, #2A3A20 0%, #4A7A3A 100%)
    }

    .hsc-emoji {
      position: absolute;
      right: 16px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 40px;
      opacity: 0.8
    }

    .hsc-title {
      font-family: 'Playfair Display', serif;
      font-size: 18px;
      color: white;
      margin-bottom: 3px
    }

    .hsc-sub {
      font-size: 12px;
      color: rgba(255, 255, 255, 0.7)
    }

    .hsc-arr {
      color: rgba(255, 255, 255, 0.8);
      font-size: 20px;
      margin-left: auto;
      align-self: center
    }

    /* ── PROMO BANNER ── */
    .promo-banner {
      margin: 10px 16px 0;
      border-radius: var(--r);
      overflow: hidden;
      cursor: pointer;
      background: linear-gradient(120deg, #2A1F18 0%, #6B3A58 60%, #8B4A3C 100%);
      transition: transform 0.15s;
      position: relative
    }

    .promo-banner:active {
      transform: scale(0.98)
    }

    .promo-inner {
      padding: 16px 16px 12px 18px;
      display: flex;
      align-items: center;
      gap: 12px
    }

    .promo-emoji {
      font-size: 42px;
      flex-shrink: 0;
      filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.25))
    }

    .promo-tag {
      display: inline-block;
      background: rgba(255, 255, 255, 0.18);
      color: rgba(255, 255, 255, 0.9);
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      padding: 3px 8px;
      border-radius: 100px;
      margin-bottom: 5px
    }

    .promo-title {
      font-family: 'Playfair Display', serif;
      font-size: 16px;
      color: white;
      line-height: 1.2;
      margin-bottom: 3px
    }

    .promo-sub {
      font-size: 11px;
      color: rgba(255, 255, 255, 0.75);
      line-height: 1.4
    }

    .promo-btn {
      margin: 0 16px 14px;
      background: white;
      color: var(--accent);
      border: none;
      border-radius: var(--rsm);
      padding: 9px 16px;
      font-family: 'Mulish', sans-serif;
      font-size: 13px;
      font-weight: 600;
      width: calc(100% - 32px);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: background 0.15s
    }

    .promo-btn:active {
      background: var(--blush)
    }

    .promo-close {
      position: absolute;
      top: 10px;
      right: 10px;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.15);
      color: white;
      font-size: 13px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer
    }

    /* ── CAT GRID ── */
    .cat-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      padding: 0 16px
    }

    .cat-card {
      background: var(--surface);
      border-radius: var(--r);
      overflow: hidden;
      cursor: pointer;
      border: 0.5px solid var(--border);
      transition: transform 0.15s
    }

    .cat-card:active {
      transform: scale(0.97)
    }

    .cat-img {
      width: 100%;
      aspect-ratio: 1;
      overflow: hidden
    }

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

    .cat-lbl {
      padding: 10px 12px
    }

    .cat-name {
      font-size: 13px;
      font-weight: 600;
      color: var(--text);
      margin-bottom: 2px
    }

    .cat-price {
      font-size: 11px;
      color: var(--muted)
    }

    .cat-wide {
      grid-column: span 2;
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 14px;
      background: var(--surface);
      border-radius: var(--r);
      border: 0.5px solid var(--border);
      cursor: pointer;
      transition: transform 0.15s
    }

    .cat-wide:active {
      transform: scale(0.98)
    }

    .cat-wide-ic {
      width: 60px;
      height: 60px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
      flex-shrink: 0
    }

    .cat-wide-arr {
      color: var(--accent);
      font-size: 18px
    }

    .cat-special {
      border: 1.5px dashed var(--warm);
      background: #FBF8F4
    }

    .cat-special .cat-name {
      color: var(--accent)
    }

    /* ── PRODUCT SLIDER ── */
    .prod-slider {
      width: 100%;
      padding-top: 75%;
      position: relative;
      overflow: hidden;
      background: var(--blush)
    }

    .prod-slides {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      width: max-content;
      display: flex;
      transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1)
    }

    .prod-slide {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 80px;
      flex-shrink: 0
    }

    .prod-slide img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block
    }

    .slide-arr {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.85);
      border: none;
      font-size: 26px;
      font-weight: 300;
      color: var(--text);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 3;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
      line-height: 1
    }

    .slide-arr-l {
      left: 12px
    }

    .slide-arr-r {
      right: 12px
    }

    .prod-badge {
      position: absolute;
      bottom: 12px;
      right: 12px;
      background: var(--accent);
      color: white;
      font-size: 12px;
      font-weight: 600;
      padding: 4px 10px;
      border-radius: 20px;
      z-index: 2
    }

    .prod-info {
      padding: 18px 16px;
      background: var(--surface);
      margin-bottom: 8px
    }

    .prod-name {
      font-family: 'Playfair Display', serif;
      font-size: 24px;
      color: var(--text);
      margin-bottom: 6px
    }

    .prod-price {
      font-size: 14px;
      color: var(--accent);
      font-weight: 600;
      margin-bottom: 10px
    }

    .prod-desc {
      font-size: 13px;
      color: var(--muted);
      line-height: 1.6
    }

    /* ── SPACER / DIVIDER ── */
    .spacer {
      height: 16px
    }

    .divider {
      height: 8px;
      background: var(--blush)
    }

    .inline-tip {
      padding: 10px 14px;
      background: #FBF8F4;
      border-left: 3px solid var(--warm);
      border-radius: 0 var(--rsm) var(--rsm) 0;
      font-size: 12px;
      color: var(--muted);
      margin-top: 8px;
      line-height: 1.5
    }