@font-face {
    font-family: "Vazirmatn";
    src: url("../font/vazirmatn/Vazirmatn-VariableFont_wght.ttf") format("truetype");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

.customer-shell a,
.customer-shell a:hover,
.customer-shell a:focus,
.customer-shell a:active {
    text-decoration: none;
}

#blazor-error-ui a {
    text-decoration: none;
}

/* Professional customer search */
.search-page { max-width:1280px; margin:0 auto; padding:1.5rem 1rem 7rem; }
.search-hero { padding:2rem; border:1px solid #f0e7e3; border-radius:30px; background:linear-gradient(135deg,#fff8f5,#fff); }
.search-hero h1 { margin:.25rem 0 1.25rem; font-size:clamp(2rem,4vw,3rem); }
.search-main-form { display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; align-items:center; gap:.75rem; padding:.45rem .5rem .45rem 1rem; border:1px solid #e8e3e0; border-radius:18px; background:#fff; box-shadow:0 12px 35px #34231d0a; }
.search-main-form > i { color:#9b9491; }.search-main-form input{width:100%;min-width:0;border:0;outline:0;font:inherit;background:transparent}.search-main-form > button:last-child{padding:.8rem 1.2rem;border:0;border-radius:13px;color:#fff;font-weight:800;background:#ff5b3d}.search-clear{width:34px;height:34px;border:0;border-radius:10px;color:#8c8582;background:#f4f2f1}
.search-type-tabs { display:flex; gap:.5rem; margin-top:1rem; }.search-type-tabs button{display:flex;align-items:center;gap:.5rem;padding:.7rem 1rem;border:1px solid #ebe6e3;border-radius:14px;color:#655f5c;background:#fff}.search-type-tabs button.active{color:#fff;border-color:#171719;background:#171719}.search-type-tabs button span{min-width:24px;padding:.1rem .35rem;border-radius:99px;font-size:.7rem;background:#ffffff20}
.search-layout { display:grid; grid-template-columns:270px minmax(0,1fr); gap:1.5rem; margin-top:1.5rem; align-items:start; }
.search-filters { position:sticky; top:90px; display:flex; flex-direction:column; gap:1.15rem; padding:1.15rem; border:1px solid #ece8e6; border-radius:24px; background:#fff; }
.search-filter-heading { display:flex;align-items:center;justify-content:space-between;padding-bottom:.9rem;border-bottom:1px solid #f0ecea}.search-filter-heading strong{display:flex;gap:.5rem}.search-filter-heading button{border:0;color:#e64c30;font-size:.75rem;background:transparent}
.filter-field,.filter-block,.filter-price{display:flex;flex-direction:column;gap:.6rem}.filter-field > span,.filter-block > span,.filter-price > span{font-size:.8rem;font-weight:800;color:#514b48}.filter-field select,.search-results-toolbar select{width:100%;padding:.7rem;border:1px solid #e5e0dd;border-radius:12px;font:inherit;background:#fff}
.filter-chips,.rating-filters{display:flex;flex-wrap:wrap;gap:.4rem}.filter-chips button,.rating-filters button{padding:.48rem .65rem;border:1px solid #e8e3e0;border-radius:99px;color:#6f6865;font-size:.75rem;background:#fff}.filter-chips button.active,.rating-filters button.active{color:#fff;border-color:#171719;background:#171719}
.filter-switch{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.75rem;border-radius:14px;background:#faf8f7}.filter-switch > span{display:flex;align-items:center;gap:.5rem;font-size:.8rem}.filter-switch i{color:#ff5b3d}.filter-switch input{accent-color:#ff5b3d;width:18px;height:18px}
.filter-price > div{display:grid;grid-template-columns:1fr 1fr;gap:.4rem}.filter-price input{min-width:0;padding:.6rem;border:1px solid #e8e3e0;border-radius:11px;font:inherit}.filter-price button{padding:.55rem;border:0;border-radius:10px;color:#665f5c;background:#f1efee}
.search-results-toolbar { display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem}.search-results-toolbar > div{display:flex;align-items:center;gap:.75rem}.search-results-toolbar > div > span{color:#746e6b;font-size:.85rem}.search-results-toolbar label{display:flex;align-items:center;gap:.5rem;color:#7c7572;font-size:.8rem}.search-results-toolbar select{width:auto;padding:.55rem}.mobile-filter-button{display:none}
.search-product-grid,.search-restaurant-grid,.search-skeletons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.search-product-card{position:relative;display:grid;grid-template-columns:150px minmax(0,1fr);min-height:168px;overflow:hidden;border:1px solid #ece8e6;border-radius:24px;background:#fff;cursor:pointer;box-shadow:0 9px 25px #2c211d08}.search-product-image{position:relative;display:grid;place-items:center;color:#bbb;font-size:2rem;background:#f3f1f0}.search-product-image img{width:100%;height:100%;object-fit:cover}.search-product-image span{position:absolute;right:.6rem;top:.6rem;padding:.3rem .55rem;border-radius:99px;color:#fff;font-size:.68rem;background:#ff5b3d}.search-product-copy{display:flex;flex-direction:column;justify-content:center;padding:1rem 1rem 1rem 3rem;min-width:0}.search-product-copy > small{color:#a09a97;font-size:.75rem}.search-product-copy h2{margin:.35rem 0;font-size:1.05rem}.search-product-copy p{margin:0 0 .8rem;color:#77716f;font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-product-copy > div{display:flex;align-items:end;justify-content:space-between;gap:.6rem}.search-product-copy > div > span{color:#817a77;font-size:.72rem}.search-product-copy .fa-star{color:#ffad0d}.search-product-copy strong{font-size:.95rem}.search-product-copy strong small{font-size:.68rem}
.search-heart{position:absolute;top:.7rem;left:.7rem;z-index:2;width:38px;height:38px;border:1px solid #eee9e6;border-radius:13px;color:#7e7774;background:#fff}.search-heart.active{color:#ff5b3d;background:#fff0ec}
.search-product-card{height:168px;min-height:0;grid-template-rows:minmax(0,1fr)}
.search-product-image{min-width:0;min-height:0;overflow:hidden}
.search-product-image img{display:block;min-width:0;min-height:0;max-width:100%;max-height:100%}
.search-product-copy{overflow:hidden}
.search-restaurant-card{position:relative;display:grid;grid-template-columns:96px minmax(0,1fr);gap:1rem;align-items:center;padding:1rem;border:1px solid #ece8e6;border-radius:24px;background:#fff;cursor:pointer}.search-restaurant-logo{width:96px;height:96px;display:grid;place-items:center;overflow:hidden;border-radius:21px;color:#ff5b3d;font-size:2rem;background:#fff1ed}.search-restaurant-logo img{width:100%;height:100%;object-fit:cover}.search-restaurant-card h2{margin:.35rem 0;font-size:1.08rem}.search-restaurant-card p{margin:0 0 .55rem;color:#77716f;font-size:.8rem}.search-restaurant-card > div:nth-child(2) > span{padding:.25rem .5rem;border-radius:99px;font-size:.67rem}.search-restaurant-card .open{color:#087a55;background:#eaf8f2}.search-restaurant-card .closed{color:#827b78;background:#f1efee}.search-restaurant-card > div:nth-child(2) > div{display:flex;gap:.8rem;color:#6e6764;font-size:.75rem}.search-restaurant-card .fa-star{color:#ffad0d}
.search-empty{padding:3rem 1rem;text-align:center;border:1px dashed #ddd6d2;border-radius:28px}.search-empty > i{font-size:2.5rem;color:#d4cecb}.search-empty h2{margin:1rem 0 .4rem}.search-empty p{color:#817a77}.search-empty button{padding:.7rem 1rem;border:0;border-radius:13px;color:#fff;background:#171719}.search-skeletons .skeleton{height:168px;border-radius:24px}
.search-pagination{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:1.5rem}.search-pagination button{width:42px;height:42px;border:1px solid #e4dfdc;border-radius:13px;background:#fff}.search-pagination button:disabled{opacity:.35}.search-pagination span{color:#706966;font-size:.82rem}

@media (max-width: 900px) {
    .search-layout{grid-template-columns:1fr}.search-filters{display:none;position:static}.search-filters.open{display:flex}.mobile-filter-button{display:inline-flex;align-items:center;gap:.4rem;padding:.55rem .7rem;border:1px solid #e5e0dd;border-radius:12px;background:#fff}
}
@media (max-width: 650px) {
    .search-page{padding:.75rem .7rem 6.5rem}.search-hero{padding:1.15rem;border-radius:23px}.search-main-form{grid-template-columns:auto minmax(0,1fr) auto;padding:.35rem}.search-main-form > button:last-child{grid-column:1/-1;width:100%;padding:.65rem}.search-type-tabs button{flex:1;justify-content:center;padding:.65rem .4rem}.search-results-toolbar{align-items:stretch;flex-direction:column}.search-results-toolbar label{justify-content:space-between}.search-product-grid,.search-restaurant-grid,.search-skeletons{grid-template-columns:1fr}.search-product-card{grid-template-columns:115px minmax(0,1fr);min-height:140px;border-radius:20px}.search-product-copy{padding:.75rem .75rem .75rem 2.5rem}.search-product-copy > div{align-items:flex-start;flex-direction:column}.search-restaurant-card{grid-template-columns:76px minmax(0,1fr);padding:.75rem;border-radius:20px}.search-restaurant-logo{width:76px;height:76px;border-radius:17px}.search-heart{top:.5rem;left:.5rem;width:34px;height:34px}
    .search-product-card{height:140px;min-height:0}
}

/* Customer reorder flow */
.order-dashboard-card.past { display:flex; align-items:center; padding:.7rem; }
.past-order-link { min-width:0; flex:1; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:1rem; padding:.35rem; color:inherit; }
.reorder-button { display:inline-flex; align-items:center; justify-content:center; gap:.45rem; flex:0 0 auto; padding:.72rem .9rem; border:1px solid #ffd8ce; border-radius:13px; color:#e84627; font-weight:700; background:#fff4f0; }
.reorder-backdrop { position:fixed; inset:0; z-index:1200; display:grid; place-items:center; padding:1rem; background:#17171988; backdrop-filter:blur(5px); }
.reorder-dialog { position:relative; width:min(100%,480px); padding:2rem; border-radius:30px; background:#fff; box-shadow:0 30px 80px #0003; }
.reorder-close { position:absolute; top:1rem; left:1rem; width:38px; height:38px; border:0; border-radius:12px; color:#777; background:#f5f3f2; }
.reorder-icon { display:grid; place-items:center; width:62px; height:62px; margin-bottom:1rem; border-radius:20px; color:#fff; font-size:1.4rem; background:linear-gradient(135deg,#ff5b3d,#ff826b); }
.reorder-dialog h2 { margin:.3rem 0; }.reorder-dialog > p{margin:.4rem 0 1.25rem;color:#77716f}
.reorder-cart-warning,.reorder-warnings { display:flex; gap:.7rem; padding:.85rem; border-radius:16px; background:#fff5e8; color:#7c5617; }.reorder-cart-warning span{line-height:1.75}
.reorder-warnings { flex-direction:column; margin-top:.7rem; color:#6e5b42; background:#faf7f2; }.reorder-warnings span{font-size:.82rem;line-height:1.7}
.reorder-items-preview { display:flex; flex-wrap:wrap; gap:.45rem; margin:1rem 0; }.reorder-items-preview span{padding:.4rem .65rem;border-radius:99px;color:#5f5956;font-size:.78rem;background:#f3f1f0}
.reorder-confirm { width:100%; display:flex; align-items:center; justify-content:center; gap:.65rem; padding:.95rem; border:0; border-radius:16px; color:#fff; font-weight:800; background:#171719; }

@media (max-width: 760px) {
    .order-dashboard-card.past { align-items:stretch; flex-direction:column; }
    .past-order-link { grid-template-columns:auto 1fr auto; width:100%; }
    .reorder-button { width:100%; }
    .reorder-dialog { padding:1.4rem; border-radius:24px; }
}

/* Customer notification center and smart order timers */
.notification-header-action {
    position: relative;
}

.notification-badge {
    min-width: 18px;
    padding: 0 4px;
}

.nav-notification-icon {
    position: relative;
    display: inline-grid;
    place-items: center;
}

.nav-notification-icon > span {
    position: absolute;
    top: -8px;
    left: -10px;
    display: grid;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    place-items: center;
    color: #fff;
    font-size: .48rem;
    font-weight: 900;
    background: var(--brand);
    border: 2px solid #fff;
    border-radius: 999px;
}

.customer-deadline-countdown {
    display: inline-flex;
    gap: 11px;
    align-items: center;
    min-width: 190px;
    padding: 11px 14px;
    color: #8b431e;
    direction: rtl;
    background: #fff7ef;
    border: 1px solid #ffe0ca;
    border-radius: 15px;
}

.customer-deadline-countdown > i {
    display: grid;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    place-items: center;
    color: #e75d28;
    background: #fff;
    border-radius: 11px;
}

.customer-deadline-countdown > span {
    display: grid;
    gap: 1px;
}

.customer-deadline-countdown small {
    color: #93644d;
    font-size: .54rem;
    font-weight: 650;
}

.customer-deadline-countdown strong {
    direction: ltr;
    font-size: .92rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: .04em;
}

.customer-deadline-countdown.compact {
    min-width: 0;
    padding: 8px 10px;
    border-radius: 12px;
}

.customer-deadline-countdown.compact > i {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
    font-size: .7rem;
}

.customer-deadline-countdown.compact strong {
    font-size: .74rem;
}

.customer-deadline-countdown.expired {
    color: var(--muted-strong);
    background: #f5f5f7;
    border-color: #e7e7ea;
}

.customer-deadline-countdown.expired > i {
    color: #8e8e95;
}

.order-card-smart-row {
    display: flex;
    gap: 9px;
    align-items: center;
    justify-content: space-between;
    min-height: 46px;
    margin-bottom: 11px;
}

.order-next-step {
    display: inline-flex;
    gap: 7px;
    align-items: center;
    color: var(--muted-strong);
    font-size: .61rem;
    font-weight: 650;
}

.order-next-step > i {
    color: var(--brand);
}

.order-action-chip {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    flex: 0 0 auto;
    padding: 7px 10px;
    color: #fff;
    font-size: .55rem;
    font-weight: 800;
    background: var(--brand);
    border-radius: 999px;
}

.order-card-stage {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 4px;
    margin-bottom: 12px;
}

.order-card-stage > span {
    height: 3px;
    background: #ececef;
    border-radius: 999px;
}

.order-card-stage > span.active {
    background: linear-gradient(90deg, var(--brand), #ff9a65);
}

.tracking-deadline-strip {
    display: flex;
    gap: 22px;
    align-items: center;
    justify-content: space-between;
    margin: 14px 0;
    padding: 16px 18px;
    background: linear-gradient(115deg, #fffaf6, #fff);
    border: 1px solid #ffe1d2;
    border-radius: 20px;
}

.tracking-deadline-strip span {
    font-size: .76rem;
    font-weight: 850;
}

.tracking-deadline-strip p {
    margin: 3px 0 0;
    color: var(--muted);
    font-size: .6rem;
}

.change-request-card {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
}

.payment-action-card {
    grid-template-columns: auto minmax(0, 1fr) auto auto auto;
}

.notifications-page {
    width: min(calc(100% - 32px), 1040px);
    margin: 0 auto;
    padding: 48px 0 110px;
}

.notifications-hero {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 20px;
    align-items: center;
    overflow: hidden;
    padding: 27px;
    color: #fff;
    background:
        radial-gradient(circle at 10% 120%, rgba(255, 111, 69, .48), transparent 37%),
        linear-gradient(125deg, #29282d, #17171a);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 30px;
    box-shadow: 0 22px 55px rgba(26, 24, 29, .14);
}

.notifications-hero::after {
    position: absolute;
    top: -70px;
    left: 8%;
    width: 210px;
    height: 210px;
    content: "";
    background: rgba(255,255,255,.035);
    border-radius: 50%;
}

.notifications-hero-icon {
    position: relative;
    z-index: 1;
    display: grid;
    width: 64px;
    height: 64px;
    place-items: center;
    color: var(--brand);
    font-size: 1.35rem;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 12px 30px rgba(0,0,0,.16);
}

.notifications-hero-icon > span {
    position: absolute;
    top: -6px;
    left: -6px;
    display: grid;
    min-width: 23px;
    height: 23px;
    padding: 0 5px;
    place-items: center;
    color: #fff;
    font-size: .55rem;
    font-weight: 900;
    background: var(--brand);
    border: 3px solid #202024;
    border-radius: 999px;
}

.notifications-hero > div:nth-child(2) {
    position: relative;
    z-index: 1;
}

.notifications-hero .section-eyebrow {
    color: #ff9d80;
}

.notifications-hero h1 {
    margin: 4px 0 2px;
    font-size: clamp(1.8rem, 4vw, 2.75rem);
    font-weight: 900;
    letter-spacing: -.045em;
}

.notifications-hero p {
    max-width: 590px;
    margin: 0;
    color: #bcbcc4;
    font-size: .66rem;
}

.mark-all-notifications {
    position: relative;
    z-index: 1;
    min-height: 42px;
    padding: 0 15px;
    color: #fff;
    font-size: .62rem;
    font-weight: 750;
    background: rgba(255,255,255,.09);
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 13px;
    cursor: pointer;
}

.mark-all-notifications i {
    margin-left: 6px;
}

.mark-all-notifications:hover {
    background: rgba(255,255,255,.15);
}

.notifications-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 24px 0 12px;
}

.notification-filters {
    display: inline-flex;
    gap: 5px;
    padding: 4px;
    background: #f0f0f2;
    border-radius: 14px;
}

.notification-filters button {
    min-height: 35px;
    padding: 0 13px;
    color: var(--muted);
    font-size: .61rem;
    font-weight: 750;
    background: transparent;
    border: 0;
    border-radius: 11px;
    cursor: pointer;
}

.notification-filters button.active {
    color: var(--ink);
    background: #fff;
    box-shadow: 0 4px 13px rgba(20,20,25,.07);
}

.notification-filters button span {
    display: inline-grid;
    min-width: 18px;
    height: 18px;
    margin-right: 5px;
    place-items: center;
    color: #fff;
    font-size: .48rem;
    background: var(--brand);
    border-radius: 999px;
}

.notification-live-hint {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    color: var(--success);
    font-size: .57rem;
    font-weight: 700;
}

.notifications-list {
    display: grid;
    gap: 9px;
}

.notification-row {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    gap: 14px;
    align-items: center;
    width: 100%;
    padding: 15px 17px;
    color: var(--ink);
    text-align: right;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 20px;
    box-shadow: 0 7px 24px rgba(28,27,31,.035);
    cursor: pointer;
    transition: 170ms ease;
}

.notification-row:hover {
    border-color: #ffd3c7;
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

.notification-row.unread {
    background: linear-gradient(110deg, #fffaf8, #fff 44%);
    border-color: #ffded4;
}

.notification-row.urgent::before {
    position: absolute;
    top: 15px;
    right: -2px;
    bottom: 15px;
    width: 4px;
    content: "";
    background: var(--brand);
    border-radius: 99px 0 0 99px;
}

.notification-type-icon {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    color: var(--brand);
    background: var(--brand-soft);
    border-radius: 15px;
}

.notification-row.payment .notification-type-icon {
    color: #9b6b00;
    background: #fff7d9;
}

.notification-row.delivery .notification-type-icon {
    color: #087a57;
    background: #e9f8f2;
}

.notification-row.action-required .notification-type-icon {
    color: #fff;
    background: var(--brand);
    box-shadow: 0 8px 18px rgba(255,92,53,.22);
}

.notification-row-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.notification-row-meta {
    display: flex;
    gap: 8px;
    align-items: center;
    color: #96969e;
    font-size: .52rem;
}

.notification-row-meta small::before {
    margin-left: 7px;
    content: "•";
}

.notification-row-copy > strong {
    margin-top: 2px;
    font-size: .8rem;
}

.notification-row-copy > span:not(.notification-row-meta) {
    overflow: hidden;
    color: var(--muted-strong);
    font-size: .62rem;
    line-height: 1.75;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notification-order-number {
    width: max-content;
    margin-top: 3px;
    padding: 3px 7px;
    color: #85858c;
    font-size: .49rem;
    background: #f5f5f7;
    border-radius: 7px;
}

.notification-unread-dot {
    width: 8px;
    height: 8px;
    background: var(--brand);
    border-radius: 50%;
    box-shadow: 0 0 0 5px rgba(255,92,53,.1);
}

.notification-row-arrow {
    color: #aaaab1;
    font-size: .6rem;
}

.notifications-empty {
    display: grid;
    min-height: 330px;
    padding: 45px 20px;
    place-items: center;
    align-content: center;
    text-align: center;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 26px;
}

.notifications-empty > i {
    display: grid;
    width: 70px;
    height: 70px;
    place-items: center;
    color: var(--brand);
    font-size: 1.35rem;
    background: var(--brand-soft);
    border-radius: 23px;
}

.notifications-empty h2 {
    margin: 15px 0 3px;
    font-size: 1.1rem;
}

.notifications-empty p {
    margin: 0 0 13px;
    color: var(--muted);
    font-size: .63rem;
}

.notifications-empty a,
.notifications-empty button,
.load-more-notifications {
    min-height: 40px;
    padding: 0 15px;
    color: #fff;
    font-size: .61rem;
    font-weight: 750;
    text-decoration: none;
    background: var(--ink);
    border: 0;
    border-radius: 12px;
    cursor: pointer;
}

.load-more-notifications {
    display: block;
    margin: 18px auto 0;
}

.notification-list-skeleton {
    display: grid;
    gap: 10px;
    margin-top: 25px;
}

.notification-list-skeleton span {
    height: 88px;
    background: linear-gradient(100deg, #f0f0f2 20%, #fafafa 40%, #f0f0f2 60%);
    background-size: 200% 100%;
    border-radius: 20px;
    animation: skeletonMove 1.3s infinite linear;
}

@media (max-width: 760px) {
    .notifications-page {
        width: min(calc(100% - 20px), 1040px);
        padding: 22px 0 110px;
    }

    .notifications-hero {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 13px;
        padding: 18px 15px;
        border-radius: 23px;
    }

    .notifications-hero-icon {
        width: 51px;
        height: 51px;
        font-size: 1.05rem;
        border-radius: 16px;
    }

    .notifications-hero h1 {
        font-size: 1.45rem;
    }

    .notifications-hero p {
        display: none;
    }

    .mark-all-notifications {
        grid-column: 1 / -1;
        width: 100%;
    }

    .notifications-toolbar {
        margin-top: 16px;
    }

    .notification-live-hint {
        display: none;
    }

    .notification-row {
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 10px;
        padding: 13px 12px;
        border-radius: 17px;
    }

    .notification-type-icon {
        width: 41px;
        height: 41px;
        border-radius: 13px;
    }

    .notification-row-copy > strong {
        font-size: .72rem;
    }

    .notification-row-copy > span:not(.notification-row-meta) {
        display: -webkit-box;
        overflow: hidden;
        font-size: .59rem;
        white-space: normal;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .notification-unread-dot {
        position: absolute;
        top: 12px;
        left: 12px;
        width: 7px;
        height: 7px;
    }

    .notification-row-arrow {
        display: none;
    }

    .tracking-deadline-strip {
        display: grid;
        gap: 12px;
        padding: 14px;
        border-radius: 18px;
    }

    .tracking-deadline-strip .customer-deadline-countdown {
        width: 100%;
    }

    .change-request-card > .customer-deadline-countdown,
    .payment-action-card > .customer-deadline-countdown {
        grid-column: 1 / -1;
        width: 100%;
    }

    .order-card-smart-row {
        align-items: stretch;
    }

    .order-card-smart-row .customer-deadline-countdown {
        flex: 1 1 auto;
    }

    .order-action-chip {
        align-self: center;
    }
}

:root {
    --brand: #ff5c35;
    --brand-strong: #e6421f;
    --brand-soft: #fff0eb;
    --ink: #171719;
    --ink-soft: #303036;
    --muted: #76767f;
    --muted-strong: #5b5b64;
    --surface: #ffffff;
    --surface-subtle: #f7f7f8;
    --page: #fbfbfc;
    --line: #e9e9ed;
    --success: #16845b;
    --success-soft: #e8f7f1;
    --danger: #d83b3b;
    --dark: #171719;
    --radius-sm: 12px;
    --radius-md: 18px;
    --radius-lg: 26px;
    --radius-xl: 34px;
    --shadow-sm: 0 8px 24px rgba(24, 24, 27, 0.06);
    --shadow-md: 0 20px 54px rgba(24, 24, 27, 0.10);
    --content-width: 1180px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    max-width: 100%;
    overflow-x: clip;
}

body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
}

body,
button,
input,
textarea {
    font-family: "Vazirmatn", Tahoma, sans-serif;
}

button,
a,
input {
    -webkit-tap-highlight-color: transparent;
}

button {
    color: inherit;
}

button:focus-visible,
a:focus-visible,
input:focus-visible {
    outline: 3px solid rgba(255, 92, 53, 0.28);
    outline-offset: 3px;
}

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

.customer-shell {
    width: 100%;
    min-width: 0;
    min-height: 100dvh;
    overflow-x: clip;
    background:
        radial-gradient(circle at 8% 5%, rgba(255, 92, 53, 0.055), transparent 24rem),
        var(--page);
}

.app-header {
    position: sticky;
    top: 0;
    z-index: 50;
    padding: 0 24px;
    background: rgba(251, 251, 252, 0.88);
    border-bottom: 1px solid rgba(233, 233, 237, 0.82);
    backdrop-filter: blur(18px) saturate(150%);
}

.header-inner {
    display: flex;
    align-items: center;
    width: min(100%, var(--content-width));
    height: 78px;
    margin: 0 auto;
}

.brand {
    display: inline-flex;
    gap: 11px;
    align-items: center;
    flex: 0 0 auto;
    color: var(--ink);
    text-decoration: none;
}

.brand-mark {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    color: #fff;
    font-size: 1.1rem;
    background: var(--brand);
    border-radius: 14px;
    box-shadow: 0 10px 22px rgba(255, 92, 53, 0.24);
    transform: rotate(3deg);
}

.brand-mark i {
    transform: rotate(-3deg);
}

.brand-copy {
    display: grid;
    line-height: 1.35;
}

.brand-copy strong {
    font-size: 1rem;
    font-weight: 850;
}

.brand-copy small {
    color: var(--muted);
    font-size: 0.67rem;
    font-weight: 500;
}

.desktop-nav {
    display: flex;
    gap: 7px;
    align-items: center;
    margin-right: clamp(32px, 5vw, 72px);
}

.desktop-nav a {
    padding: 10px 13px;
    color: var(--muted-strong);
    font-size: 0.84rem;
    font-weight: 620;
    text-decoration: none;
    border-radius: 11px;
    transition: color 160ms ease, background 160ms ease;
}

.desktop-nav a:hover,
.desktop-nav a.active {
    color: var(--ink);
    background: var(--surface);
}

.header-actions {
    display: flex;
    gap: 9px;
    align-items: center;
    margin-right: auto;
}

.location-button,
.circle-action,
.profile-action {
    border: 1px solid var(--line);
    cursor: pointer;
}

.location-button {
    display: flex;
    gap: 10px;
    align-items: center;
    min-height: 48px;
    padding: 6px 10px 6px 12px;
    text-align: right;
    background: var(--surface);
    border-radius: 15px;
}

.action-icon {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    color: var(--brand);
    background: var(--brand-soft);
    border-radius: 11px;
}

.location-copy {
    display: grid;
    min-width: 86px;
    line-height: 1.35;
}

.location-copy small {
    color: var(--muted);
    font-size: 0.64rem;
}

.location-copy strong {
    color: var(--ink-soft);
    font-size: 0.73rem;
    font-weight: 760;
}

.location-chevron {
    color: #a7a7ad;
    font-size: 0.65rem;
}

.circle-action {
    position: relative;
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    background: var(--surface);
    border-radius: 15px;
}

.action-badge {
    position: absolute;
    top: -5px;
    left: -5px;
    display: grid;
    width: 20px;
    height: 20px;
    place-items: center;
    color: #fff;
    font-size: 0.63rem;
    font-weight: 800;
    background: var(--brand);
    border: 3px solid var(--page);
    border-radius: 50%;
}

.profile-action {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    min-height: 48px;
    padding: 0 17px;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 750;
    background: var(--dark);
    border-color: var(--dark);
    border-radius: 15px;
}

.app-content {
    width: min(100%, calc(var(--content-width) + 48px));
    max-width: 100%;
    min-width: 0;
    margin: 0 auto;
    padding: 28px 24px 72px;
}

.home-page {
    display: grid;
    gap: clamp(34px, 4vw, 48px);
}

.home-intro {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(340px, 0.76fr);
    min-height: 440px;
    overflow: hidden;
    color: var(--ink);
    background:
        radial-gradient(circle at 12% 13%, rgba(255, 255, 255, .96), transparent 21rem),
        radial-gradient(circle at 85% 75%, rgba(255, 142, 164, .19), transparent 18rem),
        radial-gradient(circle at 70% 8%, rgba(255, 194, 129, .18), transparent 15rem),
        linear-gradient(128deg, #fffaf7, #fff0e9 58%, #ffe7e2);
    border: 1px solid #f5ddd2;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
}

.home-intro::before {
    position: absolute;
    inset: auto 8% -140px auto;
    width: 360px;
    height: 360px;
    content: "";
    background: rgba(255, 116, 133, 0.08);
    border-radius: 50%;
    filter: blur(3px);
}

.home-intro::after {
    position: absolute;
    top: 22px;
    left: 30px;
    width: 116px;
    height: 116px;
    content: "";
    opacity: .34;
    background-image: radial-gradient(rgba(220, 105, 83, .32) 1.2px, transparent 1.2px);
    background-size: 12px 12px;
    mask-image: linear-gradient(135deg, #000, transparent 72%);
}

.intro-copy {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(38px, 6vw, 74px);
}

.intro-kicker {
    display: inline-flex;
    gap: 7px;
    align-items: center;
    align-self: flex-start;
    margin-bottom: 17px;
    padding: 8px 12px;
    color: var(--brand-strong);
    font-size: 0.73rem;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(255, 92, 53, 0.16);
    border-radius: 999px;
}

.intro-copy h1 {
    max-width: 650px;
    margin: 0;
    font-size: clamp(2.2rem, 4.5vw, 4.2rem);
    font-weight: 900;
    line-height: 1.28;
    letter-spacing: -0.045em;
}

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

.intro-copy > p {
    max-width: 560px;
    margin: 19px 0 26px;
    color: var(--muted-strong);
    font-size: clamp(0.86rem, 1.4vw, 0.98rem);
    line-height: 2;
}

.hero-search {
    display: flex;
    gap: 12px;
    align-items: center;
    width: min(100%, 610px);
    min-height: 62px;
    padding: 7px 8px 7px 18px;
    color: #82828a;
    background: #fff;
    border-radius: 18px;
    border: 1px solid rgba(224, 197, 183, 0.7);
    box-shadow: 0 18px 38px rgba(122, 72, 48, 0.10);
}

.hero-search > i {
    margin-right: 4px;
}

.hero-search input {
    width: 100%;
    color: var(--ink);
    font-size: 0.84rem;
    background: transparent;
    border: 0;
    outline: 0;
}

.hero-search input::placeholder {
    color: #a3a3aa;
}

.hero-search button {
    align-self: stretch;
    min-width: 100px;
    color: #fff;
    font-size: 0.79rem;
    font-weight: 780;
    background: var(--brand);
    border: 0;
    border-radius: 13px;
    cursor: pointer;
}

.trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 22px;
    color: #7c6e67;
    font-size: 0.69rem;
}

.trust-row span {
    display: inline-flex;
    gap: 6px;
    align-items: center;
}

.trust-row i {
    color: var(--brand);
}

.hero-visual {
    position: relative;
    display: grid;
    min-height: 440px;
    place-items: center;
}

.visual-orbit {
    position: absolute;
    border: 1px solid rgba(210, 111, 75, 0.16);
    border-radius: 50%;
}

.orbit-one {
    width: 390px;
    height: 390px;
}

.orbit-two {
    width: 290px;
    height: 290px;
}

.hero-food-card {
    position: relative;
    z-index: 2;
    display: grid;
    width: min(26vw, 315px);
    min-width: 250px;
    aspect-ratio: 1;
    padding: 18px;
    place-items: center;
    overflow: hidden;
    background: #fff;
    border: 10px solid rgba(255, 255, 255, 0.72);
    border-radius: 50%;
    box-shadow: 0 30px 72px rgba(120, 67, 43, 0.19), 0 0 0 1px rgba(255,255,255,.7);
    transform: rotate(-5deg);
}

.hero-food-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    filter: saturate(1.04) contrast(1.02);
}

.hero-food-placeholder {
    color: var(--brand);
    font-size: 6.5rem;
}

.floating-note {
    position: absolute;
    z-index: 3;
    display: flex;
    gap: 9px;
    align-items: center;
    min-width: 142px;
    padding: 10px 12px;
    color: var(--ink);
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 16px;
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(12px);
}

.floating-icon {
    display: grid;
    width: 35px;
    height: 35px;
    flex: 0 0 auto;
    place-items: center;
    color: var(--brand);
    background: var(--brand-soft);
    border-radius: 11px;
}

.floating-note > span:last-child {
    display: grid;
    line-height: 1.35;
}

.floating-note strong {
    font-size: 0.78rem;
}

.floating-note small {
    color: var(--muted);
    font-size: 0.6rem;
}

.note-rating {
    top: 19%;
    right: 2%;
}

.note-time {
    bottom: 17%;
    left: 7%;
}

.content-section {
    min-width: 0;
    scroll-margin-top: 100px;
}

.category-section,
.home-restaurant-shortcuts,
.featured-home-section {
    position: relative;
    overflow: hidden;
    padding: 24px;
    border: 1px solid transparent;
    border-radius: 28px;
}

.category-section {
    background: linear-gradient(135deg, #fbf9ff, #fff 76%);
    border-color: #eee9f4;
}

.home-restaurant-shortcuts {
    background: linear-gradient(135deg, #fffaf4, #fff 76%);
    border-color: #f2e8dc;
}

.featured-home-section {
    background: linear-gradient(135deg, #fff8f5, #fff 76%);
    border-color: #f3e4de;
}

.section-title-row {
    display: flex;
    gap: 20px;
    align-items: end;
    justify-content: space-between;
    margin-bottom: 22px;
}

.section-title-row h2 {
    margin: 3px 0 0;
    color: var(--ink);
    font-size: clamp(1.35rem, 2.4vw, 1.8rem);
    font-weight: 860;
    letter-spacing: -0.025em;
}

.section-eyebrow {
    color: var(--brand);
    font-size: 0.7rem;
    font-weight: 800;
}

.text-action {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    padding: 9px 0;
    color: var(--muted-strong);
    font-size: 0.73rem;
    font-weight: 700;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.text-action i {
    color: var(--brand);
    transition: transform 160ms ease;
}

.text-action:hover i {
    transform: translateX(-3px);
}

.category-rail,
.product-rail {
    display: grid;
    grid-auto-flow: column;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    scrollbar-width: none;
}

.category-rail.swiper,
.product-rail.swiper {
    display: block;
    overflow: hidden;
    padding: 3px 2px 38px;
}

.category-rail.swiper .swiper-wrapper,
.product-rail.swiper .swiper-wrapper {
    display: flex;
}

.category-rail.swiper .swiper-slide,
.product-rail.swiper .swiper-slide {
    height: auto;
}

.home-restaurant-shortcuts { min-width: 0; }
.quick-restaurant-section-head { align-items: end; margin-bottom: 18px; }
.quick-restaurant-section-head h2 { font-size: clamp(1.28rem,2.2vw,1.72rem); }
.quick-restaurant-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(285px, 1fr); gap: 12px; overflow-x: auto; padding: 2px 1px 8px; scroll-snap-type: inline mandatory; scrollbar-width: none; }
.quick-restaurant-rail::-webkit-scrollbar { display: none; }
.quick-restaurant-rail.swiper { display: block; overflow: hidden; padding: 4px 2px 10px; }
.quick-restaurant-rail.swiper .swiper-wrapper { display: flex; }
.quick-restaurant-rail.swiper .swiper-slide { height: auto; }
.quick-restaurant-card { position: relative; display: grid; grid-template-columns: 68px minmax(0,1fr); align-items: center; gap: 13px; height: 100%; min-height: 98px; padding: 13px; overflow: hidden; border: 1px solid #ece8e5; border-radius: 21px; background: #fff; box-shadow: 0 9px 25px rgba(58,42,33,.05); scroll-snap-align: start; transition: transform .18s ease,border-color .18s ease,box-shadow .18s ease; }
.quick-restaurant-card:hover { border-color: #f0cabc; box-shadow: 0 15px 34px rgba(58,42,33,.09); transform: translateY(-2px); }
.quick-restaurant-logo { display: grid; place-items: center; width: 68px; height: 68px; overflow: hidden; border: 1px solid #f0e8e3; border-radius: 18px; color: #ff5a3d; background: #fff1ec; font-size: 1.3rem; font-weight: 900; }
.quick-restaurant-logo img { width: 100%; height: 100%; object-fit: cover; }
.quick-restaurant-copy { display: grid; gap: 6px; min-width: 0; }
.quick-restaurant-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.quick-restaurant-copy h3 { overflow: hidden; margin: 0; color: #211d1a; font-size: .88rem; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }
.quick-restaurant-status { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 4px; color: #817975; font-size: .59rem; font-weight: 760; }
.quick-restaurant-status i { font-size: .4rem; }
.quick-restaurant-status.open { color: #16805e; }
.quick-restaurant-status.closed { color: #8b8581; }
.quick-restaurant-copy p { overflow: hidden; margin: 0; color: #817873; font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.quick-restaurant-meta { display: flex; align-items: center; gap: 6px; min-width: 0; }
.quick-restaurant-meta > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quick-restaurant-meta > span:first-child { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 4px; max-width: 44%; color: #68615d; }
.quick-restaurant-meta > span:last-child { min-width: 0; }
.quick-restaurant-meta .fa-store { color: #a69d98; font-size: .59rem; }
.quick-restaurant-meta-separator { flex: 0 0 auto; width: 3px; height: 3px; border-radius: 50%; background: #c9c0bb; }
.quick-restaurant-facts { display: flex; align-items: center; gap: 12px; overflow: hidden; color: #6f6762; font-size: .64rem; white-space: nowrap; }
.quick-restaurant-facts span { display: inline-flex; align-items: center; gap: 4px; }
.quick-restaurant-facts .fa-star { color: #ffab13; }
.quick-restaurant-facts .fa-motorcycle { color: #ff5a3d; }

.product-rail.swiper .product-card {
    display: flex;
    height: 376px;
    min-height: 0;
    max-height: 376px;
    flex-direction: column;
}

.product-rail.swiper .swiper-wrapper {
    align-items: stretch;
}

.product-rail.swiper .product-body {
    display: flex;
    flex: 1;
    flex-direction: column;
}

.product-rail.swiper .product-footer {
    margin-top: auto;
    padding-top: 18px;
}

.js-app-swiper .swiper-pagination {
    bottom: 5px;
}

.js-app-swiper .swiper-pagination-bullet {
    width: 7px;
    height: 7px;
    background: #c5b4ac;
    opacity: 0.55;
}

.js-app-swiper .swiper-pagination-bullet-active {
    width: 20px;
    background: var(--brand);
    border-radius: 999px;
    opacity: 1;
}

.slider-control {
    position: absolute;
    top: 50%;
    z-index: 8;
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    color: var(--ink);
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 10px 28px rgba(24, 24, 27, 0.12);
    cursor: pointer;
    transform: translateY(-70%);
    transition: opacity 160ms ease, transform 160ms ease;
}

.slider-control:hover {
    color: #fff;
    background: var(--brand);
    border-color: var(--brand);
    transform: translateY(-70%) scale(1.04);
}

.slider-prev {
    right: 9px;
}

.slider-next {
    left: 9px;
}

.slider-control.swiper-button-disabled {
    opacity: 0;
    pointer-events: none;
}

.category-rail::-webkit-scrollbar,
.product-rail::-webkit-scrollbar {
    display: none;
}

.category-rail {
    grid-auto-columns: minmax(102px, 1fr);
    grid-template-rows: 1fr;
    gap: 10px;
}

.category-pill {
    display: grid;
    gap: 8px;
    min-height: 112px;
    padding: 10px 8px 9px;
    place-items: center;
    color: var(--ink-soft);
    font-size: 0.7rem;
    font-weight: 730;
    background: #fcfbfb;
    border: 1px solid #efebe9;
    border-radius: 18px;
    cursor: pointer;
    scroll-snap-align: start;
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.category-pill:hover {
    border-color: #ffd2c5;
    box-shadow: var(--shadow-sm);
    transform: translateY(-4px);
}

.category-art {
    display: grid;
    width: 58px;
    height: 58px;
    overflow: hidden;
    place-items: center;
    color: var(--brand);
    font-size: 1.8rem;
    background: var(--brand-soft);
    border-radius: 17px;
}

.category-art img {
    width: 76%;
    height: 76%;
    object-fit: contain;
}

.mobile-category-grid {
    display: none;
}

.product-rail {
    grid-auto-columns: minmax(270px, 1fr);
    gap: 18px;
    padding: 3px 2px 18px;
}

.product-card {
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    scroll-snap-align: start;
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.product-card:hover {
    border-color: #dedee3;
    box-shadow: var(--shadow-md);
    transform: translateY(-5px);
}

.product-media {
    position: relative;
    height: 210px;
    min-height: 210px;
    overflow: hidden;
    background: #f1f1f3;
}

.product-media > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 320ms ease;
}

.product-card:hover .product-media > img {
    transform: scale(1.04);
}

.media-placeholder {
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
    color: #c7c7cc;
    font-size: 3.4rem;
}

.discount-badge {
    position: absolute;
    top: 13px;
    right: 13px;
    padding: 6px 9px;
    color: #fff;
    font-size: 0.66rem;
    font-weight: 800;
    background: var(--brand);
    border-radius: 9px;
    box-shadow: 0 8px 18px rgba(255, 92, 53, 0.25);
}

.favorite-button {
    position: absolute;
    top: 12px;
    left: 12px;
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    color: var(--ink-soft);
    background: rgba(255, 255, 255, 0.9);
    border: 0;
    border-radius: 12px;
    box-shadow: 0 8px 18px rgba(24, 24, 27, 0.08);
    cursor: pointer;
    backdrop-filter: blur(8px);
}

.product-body {
    display: flex;
    min-height: 166px;
    padding: 17px 18px 18px;
    flex-direction: column;
}

.product-meta,
.restaurant-meta {
    display: flex;
    gap: 13px;
    align-items: center;
    color: var(--muted);
    font-size: 0.65rem;
}

.product-meta i,
.restaurant-meta .fa-star {
    color: #ffaf22;
}

.product-body h3 {
    margin: 12px 0 4px;
    overflow: hidden;
    color: var(--ink);
    font-size: 1rem;
    font-weight: 820;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-body > p {
    margin: 0;
    overflow: hidden;
    color: var(--muted);
    font-size: 0.7rem;
    line-height: 1.7;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-footer {
    display: flex;
    gap: 12px;
    align-items: end;
    justify-content: space-between;
    min-height: 40px;
    margin-top: auto;
    padding-top: 14px;
}

.price-stack {
    display: grid;
    min-height: 38px;
    align-content: end;
    line-height: 1.3;
}

.price-stack del {
    color: #a5a5ac;
    font-size: 0.65rem;
}

.price-stack strong {
    color: var(--ink);
    font-size: 0.95rem;
    font-weight: 850;
}

.price-stack small {
    color: var(--muted);
    font-size: 0.62rem;
    font-weight: 600;
}

.add-button {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    color: #fff;
    background: var(--dark);
    border: 0;
    border-radius: 14px;
    cursor: pointer;
    transition: background 160ms ease, transform 160ms ease;
}

.add-button:hover {
    background: var(--brand);
    transform: rotate(4deg);
}

.home-promo-strip {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    min-width: 0;
    padding: 15px 18px;
    overflow: hidden;
    color: #2d2724;
    text-decoration: none;
    background:
        radial-gradient(circle at 8% 120%, rgba(255, 112, 80, .12), transparent 32%),
        linear-gradient(120deg, #fff8f1, #fffdfb 65%, #fff6f8);
    border: 1px solid #f1e2d9;
    border-radius: 21px;
    transition: transform .18s ease, box-shadow .18s ease;
}

.home-promo-strip:hover {
    color: #2d2724;
    box-shadow: 0 14px 34px rgba(73, 49, 37, .08);
    transform: translateY(-2px);
}

.home-promo-icon {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    color: #ff5b3d;
    background: #fff0e9;
    border-radius: 15px;
}

.home-promo-copy {
    display: grid;
    min-width: 0;
    gap: 1px;
}

.home-promo-copy small { color: #b5644d; font-size: .59rem; font-weight: 850; }
.home-promo-copy strong { font-size: .86rem; font-weight: 900; }
.home-promo-copy > span { color: #83756e; font-size: .65rem; }
.home-promo-action { display: inline-flex; align-items: center; gap: 7px; color: #6f5b52; font-size: .68rem; font-weight: 800; white-space: nowrap; }
.home-promo-action i { color: #ff5b3d; }

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

.restaurant-card {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr) 38px;
    gap: 14px;
    align-items: center;
    min-width: 0;
    padding: 15px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 22px;
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.restaurant-card:hover {
    border-color: #dedee3;
    box-shadow: var(--shadow-sm);
    transform: translateY(-3px);
}

.restaurant-logo {
    display: grid;
    width: 78px;
    height: 78px;
    overflow: hidden;
    place-items: center;
    color: var(--brand);
    font-size: 1.45rem;
    font-weight: 900;
    background: var(--brand-soft);
    border-radius: 20px;
}

.restaurant-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.restaurant-copy {
    min-width: 0;
}

.restaurant-name-row {
    display: flex;
    gap: 10px;
    align-items: center;
}

.restaurant-name-row h3 {
    margin: 0;
    overflow: hidden;
    color: var(--ink);
    font-size: 0.9rem;
    font-weight: 820;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.restaurant-status {
    flex: 0 0 auto;
    padding: 4px 7px;
    font-size: 0.58rem;
    font-weight: 800;
    border-radius: 999px;
}

.restaurant-status.is-open {
    color: var(--success);
    background: var(--success-soft);
}

.restaurant-status.is-closed {
    color: var(--danger);
    background: #fff0f0;
}

.restaurant-copy > p {
    margin: 5px 0 10px;
    overflow: hidden;
    color: var(--muted);
    font-size: 0.66rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.restaurant-link {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    color: var(--muted-strong);
    background: var(--surface-subtle);
    border: 0;
    border-radius: 12px;
    cursor: pointer;
}

.network-state {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    padding: 22px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 22px;
}

.state-icon {
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    color: var(--danger);
    background: #fff0f0;
    border-radius: 16px;
}

.network-state h2 {
    margin: 0 0 4px;
    font-size: 0.95rem;
}

.network-state p {
    margin: 0;
    color: var(--muted);
    font-size: 0.72rem;
}

.network-state button {
    display: inline-flex;
    gap: 7px;
    align-items: center;
    padding: 11px 15px;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 750;
    background: var(--dark);
    border: 0;
    border-radius: 12px;
    cursor: pointer;
}

.compact-empty {
    padding: 28px;
    color: var(--muted);
    font-size: 0.76rem;
    text-align: center;
    background: var(--surface);
    border: 1px dashed #d7d7dc;
    border-radius: 20px;
}

.skeleton {
    display: block;
    overflow: hidden;
    background: #ececef;
    border-radius: 14px;
}

.skeleton::after {
    display: block;
    width: 100%;
    height: 100%;
    content: "";
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
    transform: translateX(100%);
    animation: skeleton-wave 1.4s infinite;
}

.skeleton-title {
    width: 180px;
    height: 30px;
}

.skeleton-category {
    width: 126px;
    height: 136px;
}

.skeleton-product {
    width: 280px;
    height: 395px;
    border-radius: 24px;
}

.skeleton-rail {
    justify-content: start;
}

@keyframes skeleton-wave {
    to { transform: translateX(-100%); }
}

.empty-state {
    display: grid;
    min-height: 55dvh;
    padding: 32px;
    place-items: center;
    align-content: center;
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
}

.empty-state h1 {
    margin: 0;
    font-size: 1.5rem;
}

.empty-state p {
    margin: 8px 0 0;
    color: var(--muted);
}

.empty-icon {
    display: grid;
    width: 56px;
    height: 56px;
    margin-bottom: 16px;
    place-items: center;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 850;
    background: var(--brand);
    border-radius: 18px;
}

.primary-link {
    margin-top: 18px;
    padding: 11px 18px;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 750;
    text-decoration: none;
    background: var(--dark);
    border-radius: 13px;
}

.bottom-nav {
    display: none;
}

@media (max-width: 980px) {
    .desktop-nav {
        display: none;
    }

    .home-intro {
        grid-template-columns: minmax(0, 1fr) 310px;
    }

    .intro-copy {
        padding: 44px;
    }

    .hero-food-card {
        min-width: 225px;
    }

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

@media (max-width: 720px) {
    .app-header {
        padding: 0 16px;
    }

    .header-inner {
        height: 68px;
    }

    .brand-mark {
        width: 40px;
        height: 40px;
    }

    .brand-copy small,
    .profile-action span,
    .location-copy,
    .location-chevron,
    .circle-action {
        display: none;
    }

    .profile-action {
        width: 42px;
        min-height: 42px;
        padding: 0;
        justify-content: center;
        background: var(--surface);
        border-color: var(--line);
        color: var(--ink);
    }

    .location-button {
        width: 42px;
        min-height: 42px;
        padding: 0;
        justify-content: center;
        background: transparent;
        border: 0;
    }

    .action-icon {
        width: 40px;
        height: 40px;
    }

    .app-content {
        padding: 16px 16px 110px;
    }

    .home-page {
        gap: 27px;
    }

    .home-intro {
        display: block;
        min-height: 0;
        border-radius: 24px;
    }

    .intro-copy {
        padding: 22px 18px 18px;
    }

    .intro-copy h1 {
        max-width: calc(100% - 88px);
        font-size: clamp(1.65rem, 7.8vw, 2.25rem);
        line-height: 1.26;
    }

    .intro-copy > p {
        display: -webkit-box;
        max-width: 94%;
        margin: 11px 0 16px;
        overflow: hidden;
        font-size: 0.7rem;
        line-height: 1.8;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .hero-search {
        min-height: 50px;
        border-radius: 15px;
    }

    .hero-search button {
        min-width: 76px;
    }

    .trust-row {
        gap: 10px;
        margin-top: 13px;
        font-size: 0.58rem;
    }

    .trust-row span:last-child {
        display: none;
    }

    .hero-visual {
        position: absolute;
        top: 20px;
        left: 15px;
        z-index: 1;
        display: grid;
        width: 82px;
        min-height: 82px;
        place-items: center;
    }

    .visual-orbit,
    .floating-note {
        display: none;
    }

    .hero-food-card {
        width: 82px;
        min-width: 0;
        padding: 4px;
        border-width: 4px;
        box-shadow: 0 14px 30px rgba(111, 67, 45, .18);
        transform: rotate(-4deg);
    }

    .hero-food-placeholder {
        font-size: 2rem;
    }

    .section-title-row {
        margin-bottom: 17px;
    }

    .section-title-row h2 {
        font-size: 1.32rem;
    }

    .category-section,
    .home-restaurant-shortcuts,
    .featured-home-section {
        padding: 16px 13px;
        border-radius: 21px;
    }

    .product-rail.swiper,
    .quick-restaurant-rail.swiper {
        margin-left: -16px;
        padding-left: 16px;
    }

    .featured-home-section .product-rail.swiper,
    .home-restaurant-shortcuts .quick-restaurant-rail.swiper {
        margin-left: 0;
        padding-left: 2px;
    }

    .home-restaurant-shortcuts { margin: 0; }
    .quick-restaurant-section-head { align-items: end; margin-bottom: 15px; }
    .quick-restaurant-section-head h2 { font-size: 1.2rem; }
    .quick-restaurant-section-head .text-action { max-width: 110px; padding-bottom: 2px; text-align: left; }
    .quick-restaurant-card { grid-template-columns: 62px minmax(0,1fr); min-height: 92px; padding: 11px; border-radius: 19px; }
    .quick-restaurant-logo { width: 62px; height: 62px; border-radius: 16px; }
    .quick-restaurant-copy h3 { font-size: .79rem; }
    .quick-restaurant-facts { gap: 7px; }

    .slider-control {
        display: none;
    }

    .category-desktop-rail {
        display: none !important;
    }

    .category-section > .section-title-row .text-action {
        display: none;
    }

    .mobile-category-grid {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 18px 8px;
        width: 100%;
        align-items: start;
    }

    .mobile-category-item {
        display: grid;
        min-width: 0;
        gap: 7px;
        padding: 0;
        place-items: center;
        color: var(--ink-soft);
        font: inherit;
        font-size: clamp(.57rem, 2.75vw, .72rem);
        font-weight: 760;
        line-height: 1.5;
        text-align: center;
        background: transparent;
        border: 0;
        cursor: pointer;
    }

    .mobile-category-art {
        display: grid;
        width: 100%;
        aspect-ratio: 1;
        overflow: hidden;
        place-items: center;
        color: var(--brand);
        font-size: clamp(1.2rem, 6.5vw, 2rem);
        background: #f7f6f6;
        border-radius: clamp(15px, 4.8vw, 24px);
    }

    .mobile-category-art img {
        width: 78%;
        height: 78%;
        object-fit: contain;
    }

    .mobile-category-all .mobile-category-art {
        color: #3f3d3d;
    }

    .product-rail {
        grid-auto-columns: minmax(250px, 82vw);
        margin-left: -16px;
        padding-left: 16px;
    }

    .product-media {
        height: 176px;
        min-height: 176px;
    }

    .product-rail.swiper .product-card {
        height: 336px;
        min-height: 0;
        max-height: 336px;
    }

    .product-body {
        min-height: 160px;
        padding: 14px 15px 15px;
    }

    .home-promo-strip {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 10px;
        padding: 12px;
        border-radius: 18px;
    }

    .home-promo-icon {
        width: 40px;
        height: 40px;
        border-radius: 13px;
    }

    .home-promo-copy strong { font-size: .75rem; }
    .home-promo-copy > span { overflow: hidden; font-size: .59rem; text-overflow: ellipsis; white-space: nowrap; }
    .home-promo-action { grid-column: 2; justify-self: start; margin-top: 2px; font-size: .61rem; }

    .restaurant-card {
        grid-template-columns: 66px minmax(0, 1fr) 34px;
        gap: 11px;
        padding: 12px;
        border-radius: 19px;
    }

    .restaurant-logo {
        width: 66px;
        height: 66px;
        border-radius: 17px;
    }

    .network-state {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .network-state button {
        grid-column: 1 / -1;
        justify-content: center;
    }

    .bottom-nav {
        position: fixed;
        right: 50%;
        bottom: max(12px, env(safe-area-inset-bottom));
        z-index: 60;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        width: min(calc(100% - 24px), 520px);
        min-height: 68px;
        padding: 7px 8px;
        background: rgba(255, 255, 255, 0.94);
        border: 1px solid rgba(226, 226, 230, 0.9);
        border-radius: 23px;
        box-shadow: 0 18px 50px rgba(24, 24, 27, 0.18);
        transform: translateX(50%);
        backdrop-filter: blur(18px) saturate(160%);
    }

    .bottom-nav a,
    .bottom-nav button {
        display: grid;
        gap: 4px;
        min-width: 0;
        place-items: center;
        color: #898991;
        font-size: 0.58rem;
        font-weight: 650;
        text-decoration: none;
        background: transparent;
        border: 0;
        border-radius: 15px;
    }

    .bottom-nav > a > i {
        font-size: 1rem;
    }

    .bottom-nav a.active {
        color: var(--brand);
        background: var(--brand-soft);
    }

    .nav-cart-icon {
        position: relative;
        display: grid;
        width: 38px;
        height: 38px;
        margin-top: -22px;
        place-items: center;
        color: #fff;
        font-size: 0.95rem;
        background: var(--dark);
        border: 4px solid var(--surface);
        border-radius: 14px;
        box-shadow: 0 8px 18px rgba(24, 24, 27, 0.24);
    }

    .nav-cart-icon span {
        position: absolute;
        top: -7px;
        left: -7px;
        display: grid;
        width: 18px;
        height: 18px;
        place-items: center;
        color: #fff;
        font-size: 0.55rem;
        background: var(--brand);
        border: 2px solid #fff;
        border-radius: 50%;
    }
}

@media (max-width: 420px) {
    .brand-copy strong {
        font-size: 0.9rem;
    }

    .intro-copy {
        padding: 20px 16px 16px;
    }

    .intro-kicker {
        margin-bottom: 10px;
        padding: 6px 9px;
        font-size: 0.59rem;
    }

    .intro-copy h1 {
        max-width: calc(100% - 78px);
        font-size: clamp(1.52rem, 7.5vw, 1.9rem);
    }

    .hero-visual {
        top: 17px;
        left: 12px;
        width: 74px;
        min-height: 74px;
    }

    .hero-food-card {
        width: 74px;
    }

    .hero-search {
        gap: 8px;
        padding-left: 6px;
    }

    .hero-search button {
        min-width: 70px;
        font-size: 0.7rem;
    }

    .hero-search input {
        font-size: 0.74rem;
    }

    .text-action {
        font-size: 0.66rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* Shared interactive states */
.circle-action {
    color: var(--ink);
    text-decoration: none;
}

.is-clickable {
    cursor: pointer;
}

.category-rail.swiper,
.product-rail.swiper {
    display: block;
    overflow: hidden;
    padding: 3px 2px 38px;
}

.category-rail.swiper .swiper-wrapper,
.product-rail.swiper .swiper-wrapper {
    display: flex;
}

.detail-page,
.product-detail-page,
.cart-page {
    display: grid;
    gap: 34px;
}

.restaurant-detail-hero {
    position: relative;
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 30px;
    align-items: center;
    min-height: 280px;
    padding: 38px;
    overflow: hidden;
    background:
        radial-gradient(circle at 10% 30%, rgba(255, 255, 255, 0.9), transparent 16rem),
        linear-gradient(125deg, #fff8f3, #ffe5d8);
    border: 1px solid #f4ddd2;
    border-radius: 32px;
}

.restaurant-detail-hero::after {
    position: absolute;
    left: -90px;
    bottom: -150px;
    width: 320px;
    height: 320px;
    content: "";
    background: rgba(255, 92, 53, 0.08);
    border-radius: 50%;
}

.detail-brand-art {
    position: relative;
    z-index: 1;
    display: grid;
    width: 180px;
    height: 180px;
    overflow: hidden;
    place-items: center;
    color: var(--brand);
    font-size: 3rem;
    font-weight: 900;
    background: #fff;
    border: 10px solid rgba(255, 255, 255, 0.62);
    border-radius: 42px;
    box-shadow: 0 24px 58px rgba(121, 67, 43, 0.15);
    transform: rotate(2deg);
}

.detail-brand-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.detail-copy {
    position: relative;
    z-index: 1;
}

.detail-status-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.delivery-chip {
    padding: 5px 9px;
    color: #4f5a72;
    font-size: 0.62rem;
    font-weight: 750;
    background: rgba(255, 255, 255, 0.72);
    border-radius: 999px;
}

.detail-copy h1 {
    margin: 15px 0 8px;
    color: var(--ink);
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 900;
    letter-spacing: -0.04em;
}

.detail-copy > p {
    max-width: 650px;
    margin: 0;
    color: var(--muted-strong);
    font-size: 0.83rem;
    line-height: 1.9;
}

.detail-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    margin-top: 21px;
    color: #73665f;
    font-size: 0.67rem;
}

.detail-facts span {
    display: inline-flex;
    gap: 6px;
    align-items: center;
}

.detail-facts i {
    color: var(--brand);
}

.back-button {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 2;
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    color: var(--ink);
    text-decoration: none;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 14px;
}

.detail-hero-skeleton {
    min-height: 280px;
    border-radius: 32px;
}

.menu-section {
    scroll-margin-top: 100px;
}

.menu-title-row {
    align-items: center;
}

.menu-count {
    color: var(--muted);
    font-size: 0.72rem;
}

.menu-filters {
    display: flex;
    gap: 8px;
    margin: -4px 0 24px;
    padding-bottom: 5px;
    overflow-x: auto;
    scrollbar-width: none;
}

.menu-filters::-webkit-scrollbar {
    display: none;
}

.menu-filters button {
    flex: 0 0 auto;
    padding: 10px 16px;
    color: var(--muted-strong);
    font-size: 0.72rem;
    font-weight: 700;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 13px;
    cursor: pointer;
}

.menu-filters button.active {
    color: #fff;
    background: var(--dark);
    border-color: var(--dark);
}

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

.menu-product-card {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    min-width: 0;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 22px;
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.menu-product-card:hover {
    box-shadow: var(--shadow-sm);
    transform: translateY(-3px);
}

.menu-product-card.is-unavailable {
    filter: grayscale(0.8);
    opacity: 0.62;
}

.menu-product-media {
    position: relative;
    display: grid;
    min-height: 180px;
    overflow: hidden;
    place-items: center;
    color: #c0c0c6;
    font-size: 3rem;
    background: var(--surface-subtle);
}

.menu-product-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.menu-product-media b {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 5px 8px;
    color: #fff;
    font-size: 0.61rem;
    background: var(--brand);
    border-radius: 8px;
}

.menu-product-copy {
    display: flex;
    min-width: 0;
    padding: 18px;
    flex-direction: column;
}

.menu-product-copy > a {
    color: inherit;
    text-decoration: none;
}

.menu-product-copy h3 {
    margin: 12px 0 5px;
    overflow: hidden;
    font-size: 0.98rem;
    font-weight: 820;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.menu-product-copy > p {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: var(--muted);
    font-size: 0.68rem;
    line-height: 1.8;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.menu-product-copy .product-footer {
    align-items: center;
    margin-top: auto;
    padding-top: 15px;
}

.menu-product-copy .product-footer > strong {
    font-size: 0.9rem;
    font-weight: 850;
}

.menu-product-copy .product-footer small {
    color: var(--muted);
    font-size: 0.6rem;
}

.menu-card-skeleton {
    height: 215px;
    border-radius: 22px;
}

.breadcrumb {
    display: flex;
    gap: 9px;
    align-items: center;
    color: var(--muted);
    font-size: 0.68rem;
}

.breadcrumb a {
    color: var(--muted-strong);
    text-decoration: none;
}

.breadcrumb i {
    font-size: 0.48rem;
}

.product-detail-grid {
    display: grid;
    grid-template-columns: minmax(360px, 0.9fr) minmax(0, 1.1fr);
    gap: 40px;
    align-items: start;
}

.product-detail-media {
    position: sticky;
    top: 108px;
    display: grid;
    min-height: 530px;
    overflow: hidden;
    place-items: center;
    color: #c6c6cc;
    font-size: 6rem;
    background: var(--surface-subtle);
    border: 1px solid var(--line);
    border-radius: 30px;
}

.product-detail-media > img {
    width: 100%;
    height: 100%;
    min-height: 530px;
    object-fit: cover;
}

.product-detail-copy {
    padding: 14px 0;
}

.product-restaurant {
    color: var(--brand);
    font-size: 0.72rem;
    font-weight: 800;
}

.product-detail-copy h1 {
    margin: 9px 0 11px;
    color: var(--ink);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    letter-spacing: -0.035em;
}

.detail-product-meta {
    font-size: 0.72rem;
}

.product-description {
    margin: 24px 0 15px;
    color: var(--muted-strong);
    font-size: 0.82rem;
    line-height: 2;
}

.ingredient-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 24px;
}

.ingredient-list span {
    padding: 6px 10px;
    color: var(--muted-strong);
    font-size: 0.64rem;
    background: var(--surface-subtle);
    border-radius: 9px;
}

.option-group {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 20px 0;
    border: 0;
    border-top: 1px solid var(--line);
}

.option-group legend {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 10px;
}

.option-group legend span {
    font-size: 0.88rem;
    font-weight: 820;
}

.option-group legend small {
    color: var(--muted);
    font-size: 0.62rem;
}

.option-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 50px;
    padding: 10px 13px;
    color: var(--muted-strong);
    font-size: 0.72rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 13px;
    cursor: pointer;
}

.option-row span {
    display: inline-flex;
    gap: 9px;
    align-items: center;
}

.option-row i {
    display: grid;
    width: 20px;
    height: 20px;
    place-items: center;
    color: transparent;
    font-size: 0.58rem;
    background: var(--surface-subtle);
    border-radius: 7px;
}

.option-row.selected {
    color: var(--ink);
    background: var(--brand-soft);
    border-color: #ffcbbb;
}

.option-row.selected i {
    color: #fff;
    background: var(--brand);
}

.option-row strong {
    font-size: 0.68rem;
}

.product-purchase-bar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    margin-top: 10px;
}

.quantity-control {
    display: inline-grid;
    grid-template-columns: 38px 34px 38px;
    align-items: center;
    min-height: 52px;
    overflow: hidden;
    background: var(--surface-subtle);
    border: 1px solid var(--line);
    border-radius: 15px;
}

.quantity-control button {
    align-self: stretch;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.quantity-control strong {
    text-align: center;
}

.primary-purchase-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 58px;
    padding: 0 20px;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 780;
    background: var(--brand);
    border: 0;
    border-radius: 16px;
    box-shadow: 0 14px 28px rgba(255, 92, 53, 0.23);
    cursor: pointer;
}

.primary-purchase-button:disabled {
    background: #b9b9bf;
    box-shadow: none;
    cursor: not-allowed;
}

.cart-feedback {
    margin-top: 12px;
    padding: 11px 13px;
    font-size: 0.7rem;
    border-radius: 12px;
}

.cart-feedback.success {
    color: var(--success);
    background: var(--success-soft);
}

.cart-feedback.warning {
    color: #a25a08;
    background: #fff6e5;
}

.product-image-skeleton {
    min-height: 530px;
    border-radius: 30px;
}

.product-copy-skeleton {
    min-height: 500px;
    border-radius: 24px;
}

.state-link {
    padding: 10px 14px;
    color: #fff;
    font-size: 0.7rem;
    text-decoration: none;
    background: var(--dark);
    border-radius: 12px;
}

.page-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
}

.page-heading h1 {
    margin: 4px 0 0;
    font-size: 2rem;
    font-weight: 900;
}

.cart-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 350px;
    gap: 24px;
    align-items: start;
}

.cart-items,
.cart-summary {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 24px;
}

.cart-items {
    padding: 18px;
}

.cart-restaurant {
    display: flex;
    gap: 9px;
    align-items: center;
    padding: 4px 4px 17px;
    color: var(--muted-strong);
    font-size: 0.73rem;
    border-bottom: 1px solid var(--line);
}

.cart-restaurant i {
    color: var(--brand);
}

.cart-item {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr) auto;
    gap: 15px;
    align-items: center;
    padding: 17px 0;
    border-bottom: 1px solid var(--line);
}

.cart-item:last-child {
    border-bottom: 0;
}

.cart-item-media {
    display: grid;
    width: 92px;
    height: 82px;
    overflow: hidden;
    place-items: center;
    color: #c2c2c8;
    font-size: 2rem;
    background: var(--surface-subtle);
    border-radius: 17px;
}

.cart-item-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cart-item-copy h2 {
    margin: 0 0 5px;
    font-size: 0.88rem;
    font-weight: 820;
}

.cart-item-copy p {
    margin: 2px 0;
    color: var(--muted);
    font-size: 0.64rem;
}

.cart-item-copy strong {
    display: block;
    margin-top: 7px;
    font-size: 0.75rem;
}

.cart-item-actions {
    display: grid;
    gap: 10px;
    justify-items: end;
}

.cart-item-actions > button {
    color: var(--danger);
    background: transparent;
    border: 0;
    cursor: pointer;
}

.cart-item-actions .quantity-control {
    grid-template-columns: 32px 28px 32px;
    min-height: 40px;
}

.cart-summary {
    position: sticky;
    top: 104px;
    display: grid;
    gap: 16px;
    padding: 22px;
}

.cart-summary h2 {
    margin: 0 0 4px;
    font-size: 1rem;
    font-weight: 850;
}

.cart-summary > div {
    display: flex;
    justify-content: space-between;
    color: var(--muted-strong);
    font-size: 0.72rem;
}

.cart-summary hr {
    width: 100%;
    margin: 0;
    border: 0;
    border-top: 1px dashed #d5d5da;
}

.cart-summary .summary-total {
    color: var(--ink);
    font-size: 0.82rem;
}

.cart-summary > button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 54px;
    padding: 0 16px;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 780;
    background: var(--brand);
    border: 0;
    border-radius: 14px;
    cursor: pointer;
}

.cart-summary > button:disabled {
    color: #8f8f96;
    background: #ededf0;
    box-shadow: none;
    cursor: not-allowed;
}

.cart-summary .cart-availability-blocked {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    justify-content: initial;
    padding: 12px;
    color: #8a5700;
    background: #fff8e8;
    border: 1px solid #f0ddb2;
    border-radius: 13px;
}

.cart-availability-blocked > i {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    color: #b87300;
    background: #fff;
    border-radius: 10px;
}

.cart-availability-blocked > div {
    display: grid;
    gap: 3px;
}

.cart-availability-blocked strong {
    color: #704500;
    font-size: .68rem;
}

.cart-availability-blocked span {
    font-size: .59rem;
    line-height: 1.75;
}

.cart-summary .cart-availability-blocked.error {
    color: #a33b3b;
    background: #fff3f3;
    border-color: #f2cece;
}

.cart-availability-blocked.error > i,
.cart-availability-blocked.error strong {
    color: #a33b3b;
}

.cart-summary > small {
    color: var(--muted);
    font-size: 0.59rem;
    text-align: center;
}

.cart-summary > small i {
    color: var(--success);
}

.cart-empty {
    display: grid;
    min-height: 430px;
    padding: 32px;
    place-items: center;
    align-content: center;
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 26px;
}

.cart-empty > span {
    display: grid;
    width: 72px;
    height: 72px;
    place-items: center;
    color: var(--brand);
    font-size: 1.7rem;
    background: var(--brand-soft);
    border-radius: 23px;
}

.cart-empty h2 {
    margin: 18px 0 6px;
    font-size: 1.2rem;
}

.cart-empty p {
    max-width: 400px;
    margin: 0;
    color: var(--muted);
    font-size: 0.73rem;
}

.cart-empty a {
    margin-top: 18px;
    padding: 11px 17px;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 750;
    text-decoration: none;
    background: var(--dark);
    border-radius: 13px;
}

.cart-skeleton {
    min-height: 420px;
    border-radius: 26px;
}

@media (max-width: 920px) {
    .menu-grid {
        grid-template-columns: 1fr;
    }

    .product-detail-grid {
        grid-template-columns: 1fr;
    }

    .product-detail-media {
        position: relative;
        top: auto;
        min-height: min(70vw, 520px);
    }

    .product-detail-media > img {
        min-height: min(70vw, 520px);
    }

    .cart-layout {
        grid-template-columns: 1fr;
    }

    .cart-summary {
        position: relative;
        top: auto;
    }
}

@media (max-width: 720px) {
    .detail-page,
    .product-detail-page,
    .cart-page {
        gap: 24px;
    }

    .restaurant-detail-hero {
        grid-template-columns: 92px minmax(0, 1fr);
        gap: 17px;
        min-height: 220px;
        padding: 26px 18px;
        border-radius: 26px;
    }

    .detail-brand-art {
        width: 92px;
        height: 92px;
        font-size: 1.8rem;
        border-width: 6px;
        border-radius: 25px;
    }

    .detail-copy h1 {
        margin-top: 11px;
        font-size: 1.55rem;
    }

    .detail-copy > p {
        display: -webkit-box;
        overflow: hidden;
        font-size: 0.7rem;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .detail-facts {
        display: grid;
        gap: 5px;
        margin-top: 12px;
        font-size: 0.6rem;
    }

    .detail-facts span:nth-child(n+3),
    .back-button {
        display: none;
    }

    .menu-product-card {
        grid-template-columns: 124px minmax(0, 1fr);
    }

    .menu-product-media {
        min-height: 155px;
    }

    .menu-product-copy {
        padding: 13px;
    }

    .menu-product-copy h3 {
        margin-top: 8px;
        font-size: 0.86rem;
    }

    .menu-product-copy > p {
        -webkit-line-clamp: 1;
    }

    .menu-product-copy .product-footer {
        padding-top: 8px;
    }

    .breadcrumb {
        overflow: hidden;
        white-space: nowrap;
    }

    .product-detail-media {
        min-height: 90vw;
        border-radius: 24px;
    }

    .product-detail-media > img {
        min-height: 90vw;
    }

    .product-detail-copy {
        padding: 0;
    }

    .product-detail-copy h1 {
        font-size: 1.9rem;
    }

    .product-purchase-bar {
        position: sticky;
        bottom: 84px;
        z-index: 20;
        margin: 14px -6px 0;
        padding: 8px;
        background: rgba(255, 255, 255, 0.94);
        border: 1px solid var(--line);
        border-radius: 19px;
        box-shadow: 0 16px 42px rgba(24, 24, 27, 0.14);
        backdrop-filter: blur(16px);
    }

    .quantity-control {
        grid-template-columns: 34px 28px 34px;
    }

    .primary-purchase-button {
        padding: 0 14px;
        font-size: 0.68rem;
    }

    .page-heading h1 {
        font-size: 1.6rem;
    }

    .cart-items {
        padding: 13px;
    }

    .cart-item {
        grid-template-columns: 72px minmax(0, 1fr);
    }

    .cart-item-media {
        width: 72px;
        height: 72px;
    }

    .cart-item-actions {
        grid-column: 1 / -1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }

    .cart-summary {
        padding: 18px;
    }

    .slider-control {
        display: none;
    }
}

/* Restaurant profile and menu refresh */
.restaurant-profile-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 318px;
    gap: 30px;
    min-width: 0;
    padding: 38px;
    overflow: hidden;
    background:
        radial-gradient(circle at 8% 110%, rgba(255, 92, 53, 0.14), transparent 18rem),
        radial-gradient(circle at 75% -30%, rgba(255, 190, 157, 0.24), transparent 22rem),
        linear-gradient(135deg, #fffdfb 0%, #fff5ef 58%, #ffe8dc 100%);
    border: 1px solid #f2ded4;
    border-radius: 34px;
    box-shadow: 0 24px 70px rgba(93, 50, 30, 0.08);
}

.restaurant-profile-hero::before {
    position: absolute;
    right: -80px;
    bottom: -115px;
    width: 310px;
    height: 310px;
    content: "";
    border: 1px solid rgba(255, 92, 53, 0.11);
    border-radius: 50%;
    box-shadow:
        0 0 0 36px rgba(255, 92, 53, 0.025),
        0 0 0 76px rgba(255, 92, 53, 0.018);
}

.restaurant-back-link {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 3;
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    color: var(--ink);
    text-decoration: none;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.92);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(12px);
}

.restaurant-profile-main {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 26px;
    min-width: 0;
    align-items: center;
}

.restaurant-profile-logo {
    position: relative;
    display: grid;
    flex: 0 0 auto;
    width: 154px;
    height: 154px;
    overflow: visible;
    place-items: center;
    color: var(--brand);
    font-size: 3rem;
    font-weight: 900;
    background: #fff;
    border: 8px solid rgba(255, 255, 255, 0.7);
    border-radius: 39px;
    box-shadow: 0 22px 50px rgba(93, 50, 30, 0.14);
    transform: rotate(1.5deg);
}

.restaurant-profile-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 31px;
}

.restaurant-open-dot {
    position: absolute;
    right: 6px;
    bottom: 4px;
    width: 20px;
    height: 20px;
    background: var(--danger);
    border: 4px solid #fff;
    border-radius: 50%;
}

.restaurant-open-dot.is-open {
    background: var(--success);
}

.restaurant-profile-copy {
    min-width: 0;
}

.restaurant-profile-copy .detail-status-row {
    flex-wrap: wrap;
}

.restaurant-profile-copy .restaurant-status {
    display: inline-flex;
    gap: 6px;
    align-items: center;
}

.restaurant-profile-copy .restaurant-status i {
    font-size: 0.42rem;
}

.restaurant-profile-copy h1 {
    margin: 15px 0 8px;
    color: var(--ink);
    font-size: clamp(2rem, 4vw, 3.35rem);
    font-weight: 950;
    letter-spacing: -0.045em;
    line-height: 1.2;
}

.restaurant-profile-copy > p {
    max-width: 570px;
    margin: 0;
    color: var(--muted-strong);
    font-size: 0.8rem;
    line-height: 1.95;
}

.restaurant-address-line {
    display: flex;
    flex-wrap: wrap;
    gap: 9px 17px;
    margin-top: 20px;
    color: #77665e;
    font-size: 0.67rem;
}

.restaurant-address-line span {
    display: inline-flex;
    gap: 7px;
    align-items: center;
    min-width: 0;
}

.restaurant-address-line i {
    color: var(--brand);
}

.restaurant-service-panel {
    position: relative;
    z-index: 2;
    align-self: stretch;
    min-width: 0;
    padding: 18px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.94);
    border-radius: 25px;
    box-shadow: 0 18px 50px rgba(88, 51, 35, 0.09);
    backdrop-filter: blur(16px);
}

.restaurant-service-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--muted-strong);
    font-size: 0.68rem;
    font-weight: 780;
}

.restaurant-service-head a {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    color: var(--brand);
    text-decoration: none;
    background: var(--brand-soft);
    border-radius: 11px;
}

.restaurant-service-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    margin: 15px 0;
}

.restaurant-service-grid > div {
    display: grid;
    min-width: 0;
    padding: 11px 5px;
    place-items: center;
    text-align: center;
    background: rgba(247, 247, 248, 0.82);
    border-radius: 15px;
}

.service-icon {
    display: grid;
    width: 31px;
    height: 31px;
    margin-bottom: 7px;
    place-items: center;
    color: var(--brand);
    font-size: 0.71rem;
    background: var(--brand-soft);
    border-radius: 10px;
}

.service-icon.rating {
    color: #df9100;
    background: #fff7dc;
}

.restaurant-service-grid strong {
    max-width: 100%;
    overflow: hidden;
    color: var(--ink);
    font-size: 0.72rem;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.restaurant-service-grid small {
    margin-top: 2px;
    color: var(--muted);
    font-size: 0.5rem;
}

.browse-menu-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    color: #fff;
    font-size: 0.67rem;
    font-weight: 750;
    text-decoration: none;
    background: var(--ink);
    border-radius: 13px;
}

.browse-menu-link i {
    margin-right: 7px;
    color: #ff9e84;
}

.menu-heading-panel {
    display: flex;
    gap: 28px;
    align-items: end;
    justify-content: space-between;
    min-width: 0;
    margin-bottom: 18px;
    padding: 7px 4px;
}

.menu-heading-copy {
    min-width: 0;
}

.menu-heading-copy h2 {
    margin: 5px 0 4px;
    color: var(--ink);
    font-size: clamp(1.65rem, 3vw, 2.35rem);
    font-weight: 930;
    letter-spacing: -0.035em;
}

.menu-heading-copy p {
    margin: 0;
    color: var(--muted);
    font-size: 0.72rem;
}

.menu-search {
    display: flex;
    flex: 0 1 330px;
    gap: 10px;
    align-items: center;
    min-width: 220px;
    min-height: 50px;
    padding: 0 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
}

.menu-search > i {
    color: var(--brand);
}

.menu-search input {
    width: 100%;
    min-width: 0;
    color: var(--ink);
    font-size: 0.72rem;
    background: transparent;
    border: 0;
    outline: 0;
}

.menu-search input::placeholder {
    color: #aaaab2;
}

.menu-search button {
    display: grid;
    flex: 0 0 auto;
    width: 27px;
    height: 27px;
    place-items: center;
    color: var(--muted);
    background: var(--surface-subtle);
    border: 0;
    border-radius: 8px;
    cursor: pointer;
}

.menu-category-shell {
    position: sticky;
    top: 78px;
    z-index: 15;
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
    margin-bottom: 23px;
    padding: 10px 0;
    background: rgba(251, 251, 252, 0.92);
    backdrop-filter: blur(16px);
}

.menu-category-shell .menu-filters {
    min-width: 0;
    margin: 0;
    padding: 2px;
}

.menu-category-shell .menu-filters button {
    display: inline-flex;
    gap: 7px;
    align-items: center;
    min-height: 42px;
    padding: 8px 14px;
    background: #fff;
    border-radius: 14px;
}

.menu-category-shell .menu-filters button img {
    width: 23px;
    height: 23px;
    object-fit: contain;
}

.menu-category-shell .menu-filters button i {
    font-size: 0.68rem;
}

.menu-category-shell .menu-filters button.active {
    background: var(--ink);
    box-shadow: 0 10px 22px rgba(23, 23, 25, 0.16);
}

.menu-result-count {
    flex: 0 0 auto;
    padding: 7px 10px;
    color: var(--muted);
    font-size: 0.62rem;
    background: var(--surface-subtle);
    border-radius: 10px;
}

.menu-section .menu-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.menu-section .menu-product-card {
    display: flex;
    min-width: 0;
    overflow: hidden;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid #e8e8ec;
    border-radius: 24px;
    box-shadow: 0 10px 32px rgba(24, 24, 27, 0.045);
}

.menu-section .menu-product-card:hover {
    border-color: #ffd3c5;
    box-shadow: 0 22px 48px rgba(62, 41, 31, 0.11);
    transform: translateY(-5px);
}

.menu-section .menu-product-media {
    min-height: 0;
    aspect-ratio: 1.55 / 1;
}

.menu-section .menu-product-media img {
    transition: transform 350ms ease;
}

.menu-section .menu-product-card:hover .menu-product-media img {
    transform: scale(1.045);
}

.product-image-shade {
    position: absolute;
    inset: auto 0 0;
    height: 45%;
    pointer-events: none;
    background: linear-gradient(transparent, rgba(24, 18, 15, 0.22));
}

.menu-image-placeholder {
    display: grid;
    width: 70px;
    height: 70px;
    place-items: center;
    color: #c9c9cf;
    background: #eeeef1;
    border-radius: 23px;
}

.menu-discount-badge,
.unavailable-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    padding: 6px 9px;
    color: #fff;
    font-size: 0.58rem;
    font-weight: 780;
    background: var(--brand);
    border-radius: 9px;
    box-shadow: 0 8px 18px rgba(255, 92, 53, 0.25);
}

.unavailable-badge {
    right: auto;
    left: 12px;
    background: rgba(23, 23, 25, 0.78);
    box-shadow: none;
    backdrop-filter: blur(8px);
}

.menu-section .menu-product-copy {
    flex: 1;
    padding: 17px;
}

.menu-product-topline {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
}

.menu-product-topline .product-meta {
    gap: 8px;
    font-size: 0.61rem;
}

.menu-product-topline .product-meta .rating {
    color: #9b6a00;
}

.product-tag {
    max-width: 92px;
    overflow: hidden;
    padding: 4px 7px;
    color: var(--brand-strong);
    font-size: 0.54rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: var(--brand-soft);
    border-radius: 8px;
}

.menu-product-title {
    display: block;
}

.menu-section .menu-product-copy h3 {
    margin: 13px 0 6px;
    font-size: 1.02rem;
}

.menu-section .menu-product-copy > p {
    min-height: 2.9rem;
    font-size: 0.66rem;
}

.menu-section .menu-product-copy .product-footer {
    gap: 10px;
    min-width: 0;
    padding-top: 16px;
    border-top: 1px dashed var(--line);
}

.menu-price {
    display: grid;
    min-width: 0;
}

.menu-price del {
    color: #aaaab1;
    font-size: 0.57rem;
}

.menu-price strong {
    color: var(--ink);
    font-size: 0.9rem;
    font-weight: 880;
    white-space: nowrap;
}

.menu-price small {
    color: var(--muted);
    font-size: 0.56rem;
}

.menu-select-button {
    display: inline-flex;
    flex: 0 0 auto;
    gap: 8px;
    align-items: center;
    min-height: 39px;
    padding: 0 12px;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 760;
    text-decoration: none;
    background: var(--ink);
    border-radius: 12px;
}

.menu-select-button i {
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
    color: var(--ink);
    font-size: 0.58rem;
    background: #fff;
    border-radius: 7px;
}

.menu-empty-state {
    display: grid;
    min-height: 300px;
    padding: 36px;
    place-items: center;
    align-content: center;
    text-align: center;
    background: var(--surface);
    border: 1px dashed #dcdce2;
    border-radius: 25px;
}

.menu-empty-state > span {
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    color: var(--brand);
    background: var(--brand-soft);
    border-radius: 19px;
}

.menu-empty-state h3 {
    margin: 14px 0 4px;
    font-size: 1rem;
}

.menu-empty-state p {
    margin: 0;
    color: var(--muted);
    font-size: 0.7rem;
}

.menu-empty-state button {
    margin-top: 15px;
    padding: 9px 14px;
    color: #fff;
    font-size: 0.66rem;
    background: var(--ink);
    border: 0;
    border-radius: 11px;
    cursor: pointer;
}

/* Product detail refresh */
.product-detail-surface {
    min-width: 0;
    padding: 18px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 32px;
    box-shadow: 0 22px 65px rgba(24, 24, 27, 0.07);
}

.product-detail-surface .product-detail-grid {
    grid-template-columns: minmax(350px, 0.9fr) minmax(0, 1.1fr);
    gap: 38px;
}

.product-detail-surface .product-detail-media {
    top: 98px;
    min-width: 0;
    min-height: 620px;
    border: 0;
    border-radius: 25px;
}

.product-detail-surface .product-detail-media > img {
    min-height: 620px;
}

.product-image-placeholder {
    display: grid;
    width: 110px;
    height: 110px;
    place-items: center;
    background: #ededf0;
    border-radius: 34px;
}

.product-media-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(22, 17, 15, 0.18), transparent 28%, transparent 72%, rgba(22, 17, 15, 0.12));
}

.product-media-back {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    color: var(--ink);
    text-decoration: none;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(10px);
}

.product-media-badges {
    position: absolute;
    right: 16px;
    bottom: 16px;
    left: 16px;
    z-index: 2;
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
}

.product-media-badges .discount-badge,
.availability-badge {
    position: static;
    display: inline-flex;
    gap: 6px;
    align-items: center;
    padding: 7px 10px;
    color: #fff;
    font-size: 0.6rem;
    font-weight: 760;
    background: var(--brand);
    border-radius: 10px;
    box-shadow: none;
}

.availability-badge {
    background: rgba(23, 23, 25, 0.78);
    backdrop-filter: blur(10px);
}

.availability-badge.available i {
    color: #58dca7;
}

.availability-badge.unavailable i {
    color: #ff8e8e;
}

.availability-badge i {
    font-size: 0.4rem;
}

.product-detail-surface .product-detail-copy {
    min-width: 0;
    padding: 20px 18px 12px 0;
}

.product-detail-surface .product-restaurant {
    display: flex;
    gap: 9px;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    padding: 7px 9px;
    color: var(--ink);
    text-decoration: none;
    background: var(--surface-subtle);
    border: 1px solid var(--line);
    border-radius: 13px;
}

.mini-restaurant-logo {
    display: grid;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    overflow: hidden;
    place-items: center;
    color: var(--brand);
    background: #fff;
    border-radius: 10px;
}

.mini-restaurant-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-restaurant > span:nth-child(2) {
    display: grid;
    min-width: 0;
}

.product-restaurant small {
    color: var(--muted);
    font-size: 0.5rem;
}

.product-restaurant strong {
    overflow: hidden;
    font-size: 0.65rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-restaurant > i {
    margin-right: 8px;
    color: var(--muted);
    font-size: 0.55rem;
}

.product-tags {
    display: flex;
    gap: 6px;
    margin-top: 20px;
}

.product-tags span {
    padding: 5px 8px;
    color: var(--brand-strong);
    font-size: 0.56rem;
    font-weight: 700;
    background: var(--brand-soft);
    border-radius: 8px;
}

.product-detail-surface .product-detail-copy h1 {
    margin: 11px 0 16px;
    font-size: clamp(2.25rem, 4vw, 3.35rem);
}

.product-detail-highlights {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 24px;
}

.product-highlight {
    display: flex;
    gap: 9px;
    align-items: center;
    min-width: 0;
    padding: 10px;
    color: inherit;
    text-decoration: none;
    background: var(--surface-subtle);
    border: 1px solid transparent;
    border-radius: 14px;
}

.product-highlight.rating:hover {
    border-color: #f1d9a1;
}

.product-highlight > span {
    display: grid;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    place-items: center;
    color: var(--brand);
    font-size: 0.7rem;
    background: var(--brand-soft);
    border-radius: 10px;
}

.product-highlight.rating > span {
    color: #d78b00;
    background: #fff5d6;
}

.product-highlight > div {
    display: grid;
    min-width: 0;
}

.product-highlight strong {
    overflow: hidden;
    font-size: 0.67rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-highlight small {
    color: var(--muted);
    font-size: 0.49rem;
}

.product-story {
    padding: 16px;
    background: linear-gradient(135deg, #fff9f5, #fff);
    border: 1px solid #f3e5dd;
    border-radius: 17px;
}

.product-story h2 {
    margin: 0 0 5px;
    font-size: 0.75rem;
    font-weight: 850;
}

.product-story p {
    margin: 0;
    color: var(--muted-strong);
    font-size: 0.72rem;
    line-height: 1.95;
}

.ingredient-section {
    padding: 19px 0 3px;
}

.option-label {
    display: inline-flex;
    gap: 7px;
    align-items: center;
    margin-bottom: 10px;
    color: var(--muted-strong);
    font-size: 0.66rem;
    font-weight: 780;
}

.option-label i {
    color: var(--success);
}

.product-detail-surface .ingredient-list {
    margin-bottom: 0;
}

.product-detail-surface .ingredient-list span {
    padding: 7px 10px;
    background: #f4f4f6;
    border: 1px solid #ebebee;
    border-radius: 10px;
}

.product-detail-surface .option-group {
    padding: 22px 0 4px;
}

.product-detail-surface .option-group legend > span {
    display: grid;
}

.product-detail-surface .option-group legend b {
    font-size: 0.86rem;
    font-weight: 850;
}

.product-detail-surface .option-group legend span small {
    margin-top: 2px;
    color: var(--muted);
    font-size: 0.55rem;
}

.product-detail-surface .option-group legend em {
    padding: 5px 8px;
    color: var(--muted);
    font-size: 0.54rem;
    font-style: normal;
    background: var(--surface-subtle);
    border-radius: 8px;
}

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

.product-detail-surface .option-row {
    display: grid;
    grid-template-columns: 25px minmax(0, 1fr) auto;
    gap: 8px;
    min-width: 0;
    min-height: 56px;
    padding: 10px;
    text-align: right;
    border-radius: 14px;
}

.product-detail-surface .option-row .option-check {
    display: grid;
    width: 23px;
    height: 23px;
    place-items: center;
    background: var(--surface-subtle);
    border: 1px solid var(--line);
    border-radius: 8px;
}

.product-detail-surface .option-row .option-name {
    display: block;
    min-width: 0;
    overflow: hidden;
    font-weight: 720;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-detail-surface .option-row.selected .option-check {
    color: #fff;
    background: var(--brand);
    border-color: var(--brand);
}

.product-detail-surface .option-row strong {
    white-space: nowrap;
}

.product-detail-surface .option-row strong small {
    color: var(--muted);
    font-size: 0.5rem;
    font-weight: 500;
}

.product-price-summary {
    display: flex;
    gap: 15px;
    align-items: center;
    justify-content: space-between;
    margin-top: 22px;
    padding: 15px 16px;
    background: #f7f7f8;
    border-radius: 16px;
}

.product-price-summary > div {
    display: grid;
}

.product-price-summary span {
    font-size: 0.7rem;
    font-weight: 800;
}

.product-price-summary div small {
    color: var(--muted);
    font-size: 0.54rem;
}

.product-price-summary > strong {
    color: var(--ink);
    font-size: 1rem;
    font-weight: 900;
    white-space: nowrap;
}

.product-price-summary > strong small {
    color: var(--muted);
    font-size: 0.58rem;
}

.product-detail-surface .cart-feedback {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
}

.product-detail-surface .cart-feedback span {
    display: inline-flex;
    gap: 7px;
    align-items: center;
}

.product-detail-surface .cart-feedback a {
    flex: 0 0 auto;
    color: inherit;
    font-weight: 800;
}

.product-detail-surface .product-purchase-bar {
    margin-top: 12px;
}

.product-detail-surface .quantity-control {
    min-height: 60px;
}

.product-detail-surface .quantity-control button:disabled {
    color: #b8b8be;
    cursor: not-allowed;
}

.product-detail-surface .primary-purchase-button {
    min-width: 0;
    min-height: 60px;
}

.product-detail-surface .primary-purchase-button span {
    display: inline-flex;
    gap: 8px;
    align-items: center;
}

.product-detail-surface .primary-purchase-button strong {
    white-space: nowrap;
}

.purchase-assurance {
    display: flex;
    gap: 10px 17px;
    align-items: center;
    justify-content: center;
    margin-top: 14px;
    color: var(--muted);
    font-size: 0.54rem;
}

.purchase-assurance span {
    display: inline-flex;
    gap: 5px;
    align-items: center;
}

.purchase-assurance i {
    color: var(--success);
}

/* Reviews */
.reviews-section {
    min-width: 0;
    padding: 34px;
    scroll-margin-top: 100px;
    background:
        radial-gradient(circle at 100% 0, rgba(255, 92, 53, 0.08), transparent 23rem),
        var(--surface);
    border: 1px solid var(--line);
    border-radius: 30px;
}

.reviews-heading {
    display: flex;
    gap: 24px;
    align-items: end;
    justify-content: space-between;
    margin-bottom: 27px;
}

.reviews-heading h2 {
    margin: 4px 0;
    color: var(--ink);
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 900;
}

.reviews-heading p {
    margin: 0;
    color: var(--muted);
    font-size: 0.68rem;
}

.write-review-button {
    display: inline-flex;
    flex: 0 0 auto;
    gap: 8px;
    align-items: center;
    min-height: 44px;
    padding: 0 15px;
    color: #fff;
    font-size: 0.67rem;
    font-weight: 760;
    background: var(--ink);
    border: 0;
    border-radius: 13px;
    cursor: pointer;
}

.reviews-layout {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 22px;
    align-items: start;
    min-width: 0;
}

.rating-summary-card {
    position: sticky;
    top: 96px;
    min-width: 0;
    padding: 22px;
    background: linear-gradient(150deg, #fff9e8, #fff);
    border: 1px solid #f1e3bd;
    border-radius: 22px;
}

.rating-summary-label {
    color: var(--muted-strong);
    font-size: 0.65rem;
    font-weight: 760;
}

.rating-big {
    display: flex;
    gap: 7px;
    align-items: baseline;
    margin-top: 5px;
}

.rating-big strong {
    color: var(--ink);
    font-size: 2.8rem;
    font-weight: 950;
    line-height: 1.1;
}

.rating-big span {
    color: var(--muted);
    font-size: 0.58rem;
}

.rating-stars {
    display: flex;
    gap: 3px;
    color: #ded4b9;
    font-size: 0.73rem;
}

.rating-stars i.filled {
    color: #f5a800;
}

.rating-summary-card > p {
    margin: 7px 0 18px;
    color: var(--muted);
    font-size: 0.56rem;
}

.rating-bars {
    display: grid;
    gap: 8px;
}

.rating-bars > div {
    display: grid;
    grid-template-columns: 27px minmax(0, 1fr) 18px;
    gap: 7px;
    align-items: center;
}

.rating-bars span,
.rating-bars small {
    color: var(--muted);
    font-size: 0.52rem;
}

.rating-bars span i {
    color: #f5a800;
    font-size: 0.43rem;
}

.rating-bars b {
    height: 5px;
    overflow: hidden;
    background: #eee8d9;
    border-radius: 999px;
}

.rating-bars b i {
    display: block;
    height: 100%;
    background: #f5a800;
    border-radius: inherit;
}

.reviews-content {
    display: grid;
    gap: 13px;
    min-width: 0;
}

.review-compose {
    padding: 21px;
    background: #fffaf7;
    border: 1px solid #f2ddd3;
    border-radius: 21px;
}

.review-compose-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.review-compose-head h3 {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 850;
}

.review-compose-head p {
    margin: 3px 0 0;
    color: var(--muted);
    font-size: 0.59rem;
}

.review-compose-head > span {
    display: grid;
    width: 39px;
    height: 39px;
    place-items: center;
    color: var(--brand);
    background: var(--brand-soft);
    border-radius: 13px;
}

.rating-picker {
    display: flex;
    gap: 4px;
    align-items: center;
    margin: 18px 0;
}

.rating-picker button {
    padding: 3px;
    color: #d8d8dc;
    font-size: 1.35rem;
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: color 150ms ease, transform 150ms ease;
}

.rating-picker button:hover,
.rating-picker button.selected {
    color: #f4a300;
    transform: translateY(-2px);
}

.rating-picker strong {
    margin-right: 9px;
    color: var(--muted-strong);
    font-size: 0.64rem;
}

.review-textarea {
    display: grid;
    gap: 7px;
}

.review-textarea > span {
    font-size: 0.64rem;
    font-weight: 750;
}

.review-textarea textarea {
    width: 100%;
    min-height: 110px;
    resize: vertical;
    padding: 13px;
    color: var(--ink);
    font-size: 0.68rem;
    line-height: 1.8;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    outline: 0;
}

.review-textarea textarea:focus {
    border-color: #ffb7a3;
    box-shadow: 0 0 0 4px rgba(255, 92, 53, 0.08);
}

.review-textarea small {
    color: var(--muted);
    font-size: 0.52rem;
    text-align: left;
}

.review-submit-message {
    display: flex;
    gap: 7px;
    align-items: center;
    margin-top: 10px;
    padding: 10px;
    font-size: 0.61rem;
    border-radius: 11px;
}

.review-submit-message.success {
    color: var(--success);
    background: var(--success-soft);
}

.review-submit-message.error {
    color: var(--danger);
    background: #fff0f0;
}

.submit-review-button {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    min-height: 43px;
    margin-top: 12px;
    padding: 0 15px;
    color: #fff;
    font-size: 0.64rem;
    font-weight: 760;
    background: var(--brand);
    border: 0;
    border-radius: 12px;
    cursor: pointer;
}

.submit-review-button:disabled {
    color: #8c8c94;
    background: #e4e4e7;
    cursor: not-allowed;
}

.review-list,
.review-skeleton-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.review-card {
    display: flex;
    min-width: 0;
    min-height: 190px;
    padding: 17px;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.review-card:hover {
    border-color: #ffd0c2;
    box-shadow: var(--shadow-sm);
}

.review-card header {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 9px;
    align-items: center;
}

.review-avatar {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    color: #fff;
    font-size: 0.74rem;
    font-weight: 850;
    background: linear-gradient(145deg, var(--brand), #ff9678);
    border-radius: 13px;
}

.review-card header > div:nth-child(2) {
    display: grid;
    min-width: 0;
}

.review-card header strong {
    overflow: hidden;
    font-size: 0.67rem;
    font-weight: 820;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.review-card header small {
    color: var(--muted);
    font-size: 0.5rem;
}

.review-rating {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    padding: 5px 7px;
    color: #9d6b00;
    font-size: 0.59rem;
    background: #fff6d9;
    border-radius: 8px;
}

.review-card > p {
    margin: 16px 0;
    color: var(--muted-strong);
    font-size: 0.67rem;
    line-height: 1.95;
}

.review-card footer {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 12px;
    color: var(--muted);
    font-size: 0.49rem;
    border-top: 1px dashed var(--line);
}

.review-card footer span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.review-card footer i {
    color: var(--success);
}

.review-card-skeleton {
    min-height: 190px;
    border-radius: 18px;
}

.reviews-empty-state,
.reviews-inline-state {
    display: grid;
    min-height: 270px;
    padding: 28px;
    place-items: center;
    align-content: center;
    text-align: center;
    background: var(--surface-subtle);
    border: 1px dashed #dcdce1;
    border-radius: 20px;
}

.reviews-empty-state > span {
    display: grid;
    width: 55px;
    height: 55px;
    place-items: center;
    color: var(--brand);
    font-size: 1.15rem;
    background: var(--brand-soft);
    border-radius: 18px;
}

.reviews-empty-state h3 {
    margin: 13px 0 4px;
    font-size: 0.9rem;
}

.reviews-empty-state p {
    margin: 0;
    color: var(--muted);
    font-size: 0.62rem;
}

.reviews-empty-state button,
.reviews-inline-state button {
    margin-top: 13px;
    padding: 9px 13px;
    color: #fff;
    font-size: 0.62rem;
    background: var(--ink);
    border: 0;
    border-radius: 10px;
    cursor: pointer;
}

.reviews-inline-state {
    grid-template-columns: auto minmax(0, 1fr) auto;
    min-height: 100px;
    place-items: center start;
    text-align: right;
}

.reviews-inline-state > i {
    color: var(--danger);
    font-size: 1.2rem;
}

.reviews-inline-state > div {
    display: grid;
}

.reviews-inline-state strong {
    font-size: 0.7rem;
}

.reviews-inline-state span {
    color: var(--muted);
    font-size: 0.58rem;
}

.reviews-inline-state button {
    margin: 0;
}

.load-more-reviews {
    justify-self: center;
    padding: 9px 15px;
    color: var(--muted-strong);
    font-size: 0.62rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 11px;
    cursor: pointer;
}

.load-more-reviews i {
    margin-left: 5px;
    color: var(--brand);
}

.related-products {
    min-width: 0;
}

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

.related-product-card {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr) 30px;
    gap: 12px;
    align-items: center;
    min-width: 0;
    padding: 10px;
    color: inherit;
    text-decoration: none;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
}

.related-product-card > span {
    display: grid;
    width: 78px;
    height: 72px;
    overflow: hidden;
    place-items: center;
    color: #bdbdc4;
    background: var(--surface-subtle);
    border-radius: 13px;
}

.related-product-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.related-product-card > div {
    display: grid;
    min-width: 0;
}

.related-product-card strong {
    overflow: hidden;
    font-size: 0.72rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.related-product-card small {
    margin: 4px 0;
    color: var(--muted);
    font-size: 0.5rem;
}

.related-product-card small i {
    color: #f5a800;
}

.related-product-card b {
    font-size: 0.63rem;
}

.related-product-card > i {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    color: #fff;
    font-size: 0.58rem;
    background: var(--ink);
    border-radius: 10px;
}

@media (max-width: 1080px) {
    .menu-section .menu-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .product-detail-surface .product-detail-grid {
        grid-template-columns: minmax(320px, 0.82fr) minmax(0, 1.18fr);
        gap: 25px;
    }

    .review-list,
    .review-skeleton-list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 920px) {
    .restaurant-profile-hero {
        grid-template-columns: 1fr;
        padding: 30px;
    }

    .restaurant-service-panel {
        align-self: auto;
    }

    .restaurant-service-grid {
        margin-bottom: 10px;
    }

    .product-detail-surface .product-detail-grid {
        grid-template-columns: 1fr;
    }

    .product-detail-surface .product-detail-media {
        position: relative;
        top: auto;
        min-height: 0;
        aspect-ratio: 16 / 10;
    }

    .product-detail-surface .product-detail-media > img {
        min-height: 0;
    }

    .product-detail-surface .product-detail-copy {
        padding: 10px 12px 12px;
    }

    .reviews-layout {
        grid-template-columns: 220px minmax(0, 1fr);
    }

    .related-product-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .app-header,
    .app-content,
    .detail-page,
    .product-detail-page,
    .cart-page,
    .home-page,
    .restaurant-profile-hero,
    .menu-section,
    .product-detail-surface,
    .reviews-section,
    .related-products {
        min-width: 0;
        max-width: 100%;
    }

    .app-content {
        width: 100%;
        padding: 14px 12px 112px;
    }

    .detail-page,
    .product-detail-page {
        gap: 20px;
    }

    .restaurant-profile-hero {
        gap: 18px;
        padding: 25px 17px 17px;
        border-radius: 25px;
    }

    .restaurant-back-link {
        top: 13px;
        left: 13px;
        width: 36px;
        height: 36px;
        border-radius: 12px;
    }

    .restaurant-profile-main {
        gap: 14px;
        align-items: flex-start;
        padding-top: 17px;
    }

    .restaurant-profile-logo {
        width: 82px;
        height: 82px;
        font-size: 1.65rem;
        border-width: 5px;
        border-radius: 24px;
    }

    .restaurant-profile-logo img {
        border-radius: 19px;
    }

    .restaurant-open-dot {
        width: 16px;
        height: 16px;
        border-width: 3px;
    }

    .restaurant-profile-copy h1 {
        margin: 10px 0 5px;
        font-size: clamp(1.45rem, 7vw, 2rem);
    }

    .restaurant-profile-copy > p {
        display: -webkit-box;
        overflow: hidden;
        font-size: 0.64rem;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .restaurant-profile-copy .restaurant-status,
    .restaurant-profile-copy .delivery-chip {
        padding: 4px 7px;
        font-size: 0.51rem;
    }

    .restaurant-address-line {
        display: grid;
        gap: 4px;
        margin-top: 10px;
        font-size: 0.54rem;
    }

    .restaurant-address-line span:first-child {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
    }

    .restaurant-service-panel {
        padding: 12px;
        border-radius: 19px;
    }

    .restaurant-service-head {
        display: none;
    }

    .restaurant-service-grid {
        margin: 0;
    }

    .restaurant-service-grid > div {
        padding: 8px 4px;
    }

    .service-icon {
        width: 28px;
        height: 28px;
        margin-bottom: 5px;
    }

    .restaurant-service-grid strong {
        font-size: 0.62rem;
    }

    .browse-menu-link {
        display: none;
    }

    .menu-heading-panel {
        display: grid;
        gap: 15px;
        margin-bottom: 8px;
        padding: 0 2px;
    }

    .menu-heading-copy h2 {
        font-size: 1.45rem;
    }

    .menu-heading-copy p {
        font-size: 0.61rem;
    }

    .menu-search {
        width: 100%;
        min-width: 0;
        min-height: 47px;
    }

    .menu-category-shell {
        top: 67px;
        gap: 7px;
        margin-right: -12px;
        margin-left: -12px;
        margin-bottom: 15px;
        padding: 8px 12px;
    }

    .menu-category-shell .menu-filters {
        margin-left: 0;
        padding-left: 4px;
    }

    .menu-category-shell .menu-filters button {
        min-height: 39px;
        padding: 7px 11px;
        font-size: 0.63rem;
    }

    .menu-result-count {
        display: none;
    }

    .menu-section .menu-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .menu-section .menu-product-card {
        display: grid;
        grid-template-columns: 126px minmax(0, 1fr);
        min-height: 162px;
        border-radius: 19px;
    }

    .menu-section .menu-product-media {
        height: 100%;
        aspect-ratio: auto;
    }

    .menu-section .menu-product-copy {
        min-width: 0;
        padding: 12px;
    }

    .menu-product-topline .product-meta span:last-child,
    .product-tag {
        display: none;
    }

    .menu-section .menu-product-copy h3 {
        margin: 8px 0 4px;
        font-size: 0.84rem;
    }

    .menu-section .menu-product-copy > p {
        min-height: 0;
        font-size: 0.59rem;
        -webkit-line-clamp: 2;
    }

    .menu-section .menu-product-copy .product-footer {
        gap: 6px;
        padding-top: 8px;
    }

    .menu-price strong {
        font-size: 0.72rem;
    }

    .menu-select-button {
        width: 35px;
        height: 35px;
        min-height: 35px;
        padding: 0;
        justify-content: center;
    }

    .menu-select-button span {
        display: none;
    }

    .menu-select-button i {
        color: #fff;
        background: transparent;
    }

    .menu-discount-badge,
    .unavailable-badge {
        top: 8px;
        right: 8px;
        padding: 5px 7px;
        font-size: 0.5rem;
    }

    .unavailable-badge {
        right: 8px;
        left: auto;
        top: auto;
        bottom: 8px;
    }

    .breadcrumb {
        gap: 6px;
        min-width: 0;
        font-size: 0.57rem;
    }

    .breadcrumb a,
    .breadcrumb span {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .product-detail-surface {
        padding: 0;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .product-detail-surface .product-detail-grid {
        gap: 15px;
    }

    .product-detail-surface .product-detail-media {
        width: 100%;
        aspect-ratio: 4 / 3;
        border-radius: 23px;
    }

    .product-detail-surface .product-detail-copy {
        padding: 3px 0 0;
    }

    .product-detail-surface .product-detail-copy h1 {
        margin: 11px 0 14px;
        font-size: clamp(1.75rem, 9vw, 2.4rem);
    }

    .product-detail-surface .product-restaurant {
        width: 100%;
    }

    .product-tags {
        margin-top: 14px;
    }

    .product-detail-highlights {
        gap: 5px;
    }

    .product-highlight {
        display: grid;
        gap: 5px;
        padding: 8px 4px;
        place-items: center;
        text-align: center;
    }

    .product-highlight > span {
        width: 29px;
        height: 29px;
    }

    .product-highlight strong {
        max-width: 100%;
        font-size: 0.56rem;
    }

    .product-highlight small {
        font-size: 0.43rem;
    }

    .product-story {
        padding: 14px;
    }

    .product-story p {
        font-size: 0.66rem;
    }

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

    .product-detail-surface .option-row {
        min-height: 54px;
    }

    .product-price-summary {
        padding: 13px;
    }

    .product-price-summary > strong {
        font-size: 0.82rem;
    }

    .product-detail-surface .cart-feedback {
        align-items: flex-start;
        font-size: 0.6rem;
    }

    .product-detail-surface .product-purchase-bar {
        bottom: calc(82px + env(safe-area-inset-bottom));
        grid-template-columns: 94px minmax(0, 1fr);
        width: 100%;
        margin: 13px 0 0;
        padding: 7px;
    }

    .product-detail-surface .quantity-control {
        grid-template-columns: 31px 28px 31px;
        min-width: 0;
        min-height: 54px;
    }

    .product-detail-surface .primary-purchase-button {
        gap: 8px;
        min-height: 54px;
        padding: 0 11px;
    }

    .product-detail-surface .primary-purchase-button span {
        min-width: 0;
        font-size: 0.62rem;
    }

    .product-detail-surface .primary-purchase-button strong {
        font-size: 0.6rem;
    }

    .purchase-assurance {
        gap: 7px;
        justify-content: space-between;
        font-size: 0.45rem;
    }

    .reviews-section {
        padding: 19px 14px;
        border-radius: 23px;
    }

    .reviews-heading {
        display: grid;
        gap: 13px;
        margin-bottom: 18px;
    }

    .reviews-heading h2 {
        font-size: 1.3rem;
    }

    .write-review-button {
        width: 100%;
        justify-content: center;
    }

    .reviews-layout {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .rating-summary-card {
        position: relative;
        top: auto;
        padding: 17px;
    }

    .rating-big strong {
        font-size: 2.2rem;
    }

    .review-compose {
        padding: 15px;
    }

    .rating-picker {
        flex-wrap: wrap;
    }

    .rating-picker button {
        font-size: 1.18rem;
    }

    .review-list,
    .review-skeleton-list {
        grid-template-columns: 1fr;
    }

    .review-card {
        min-height: 0;
        padding: 14px;
    }

    .reviews-inline-state {
        grid-template-columns: 1fr;
        gap: 9px;
        place-items: center;
        text-align: center;
    }

    .related-products .section-title-row {
        gap: 12px;
        align-items: end;
    }

    .related-products .section-title-row h2 {
        font-size: 1.1rem;
    }
}

@media (max-width: 390px) {
    .app-header {
        padding: 0 10px;
    }

    .header-actions {
        gap: 3px;
    }

    .brand {
        gap: 7px;
    }

    .brand-mark {
        width: 37px;
        height: 37px;
    }

    .brand-copy strong {
        font-size: 0.78rem;
    }

    .restaurant-profile-main {
        gap: 10px;
    }

    .restaurant-profile-logo {
        width: 72px;
        height: 72px;
    }

    .restaurant-profile-copy h1 {
        font-size: 1.3rem;
    }

    .restaurant-profile-copy .delivery-chip {
        display: none;
    }

    .menu-section .menu-product-card {
        grid-template-columns: 112px minmax(0, 1fr);
    }

    .menu-section .menu-product-copy {
        padding: 10px;
    }

    .menu-price strong {
        font-size: 0.66rem;
    }

    .product-detail-surface .primary-purchase-button strong {
        display: none;
    }

    .purchase-assurance span:nth-child(2) {
        display: none;
    }

    .reviews-section {
        padding: 17px 11px;
    }

    .related-product-card {
        grid-template-columns: 68px minmax(0, 1fr) 28px;
    }

    .related-product-card > span {
        width: 68px;
        height: 65px;
    }
}

/* Customer ordering flow */
.as-button {
    border: 0;
    background: transparent;
    cursor: pointer;
}

.checkout-heading p,
.dashboard-hero p {
    margin: 7px 0 0;
    color: var(--muted);
    font-size: .84rem;
}

.checkout-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 24px;
    align-items: start;
}

.checkout-main {
    display: grid;
    gap: 16px;
    min-width: 0;
}

.checkout-card,
.customer-login-card,
.checkout-review {
    background: rgba(255, 255, 255, .94);
    border: 1px solid var(--line);
    border-radius: 24px;
    box-shadow: var(--shadow-sm);
}

.checkout-card {
    padding: 24px;
}

.checkout-card-title {
    display: flex;
    gap: 13px;
    align-items: center;
    margin-bottom: 20px;
}

.step-number {
    display: grid;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    place-items: center;
    color: var(--brand);
    font-size: .82rem;
    font-weight: 850;
    background: var(--brand-soft);
    border-radius: 13px;
}

.checkout-card-title h2 {
    margin: 0;
    color: var(--ink);
    font-size: 1rem;
    font-weight: 850;
}

.checkout-card-title p {
    margin: 3px 0 0;
    color: var(--muted);
    font-size: .69rem;
}

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

.delivery-option {
    position: relative;
    display: flex;
    gap: 13px;
    align-items: center;
    min-height: 88px;
    padding: 16px;
    text-align: right;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    cursor: pointer;
    transition: 160ms ease;
}

.delivery-option > i:first-child {
    display: grid;
    flex: 0 0 43px;
    width: 43px;
    height: 43px;
    place-items: center;
    color: var(--ink);
    background: var(--surface-subtle);
    border-radius: 14px;
}

.delivery-option span {
    display: grid;
    gap: 4px;
}

.delivery-option strong {
    font-size: .8rem;
}

.delivery-option small {
    color: var(--muted);
    font-size: .62rem;
}

.delivery-option .option-check {
    margin-right: auto;
    color: #d7d7dc;
}

.delivery-option.selected {
    background: #fff9f7;
    border-color: rgba(255, 92, 53, .42);
    box-shadow: 0 8px 25px rgba(255, 92, 53, .08);
}

.delivery-option.selected > i:first-child {
    color: #fff;
    background: var(--brand);
}

.delivery-option.selected .option-check {
    color: var(--brand);
}

.delivery-option:disabled {
    opacity: .5;
    cursor: not-allowed;
    filter: grayscale(.3);
}

.checkout-warning {
    display: flex;
    gap: 9px;
    align-items: center;
    margin-top: 14px;
    padding: 11px 13px;
    color: #885c00;
    font-size: .68rem;
    font-weight: 650;
    background: #fff8e7;
    border: 1px solid #f4e3b4;
    border-radius: 13px;
}

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

.checkout-fields label,
.login-inline-form label {
    display: grid;
    gap: 7px;
}

.checkout-fields label > span,
.login-inline-form label > span {
    color: var(--muted-strong);
    font-size: .67rem;
    font-weight: 700;
}

.checkout-fields label b {
    color: var(--brand);
}

.checkout-fields input,
.checkout-fields textarea,
.checkout-note-card textarea,
.login-inline-form input {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    color: var(--ink);
    font-size: .75rem;
    background: #fafafa;
    border: 1px solid #e7e7eb;
    border-radius: 13px;
    outline: 0;
    resize: vertical;
    transition: 150ms ease;
}

.checkout-fields textarea,
.checkout-note-card textarea {
    min-height: 74px;
}

.checkout-fields input:focus,
.checkout-fields textarea:focus,
.checkout-note-card textarea:focus,
.login-inline-form input:focus {
    background: #fff;
    border-color: rgba(255, 92, 53, .55);
    box-shadow: 0 0 0 4px rgba(255, 92, 53, .08);
}

.field-wide {
    grid-column: 1 / -1;
}

.checkout-review {
    position: sticky;
    top: 98px;
    padding: 20px;
}

.review-restaurant {
    display: flex;
    gap: 11px;
    align-items: center;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
}

.review-restaurant > i {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    color: var(--brand);
    background: var(--brand-soft);
    border-radius: 12px;
}

.review-restaurant span {
    display: grid;
}

.review-restaurant small {
    color: var(--muted);
    font-size: .57rem;
}

.review-restaurant strong {
    font-size: .78rem;
}

.review-items {
    display: grid;
    gap: 10px;
    padding: 17px 0;
}

.review-items > div,
.review-total {
    display: flex;
    gap: 12px;
    justify-content: space-between;
    color: var(--muted-strong);
    font-size: .66rem;
}

.review-items strong {
    white-space: nowrap;
}

.review-total {
    padding-top: 15px;
    color: var(--ink);
    border-top: 1px dashed #dedee3;
}

.review-total strong {
    font-size: .85rem;
}

.review-hint {
    display: block;
    margin: 11px 0 16px;
    color: var(--muted);
    font-size: .56rem;
    line-height: 1.8;
}

.review-grand-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: .35rem;
    padding: 1rem 1.05rem;
    border-radius: 18px;
    color: #fff;
    background: linear-gradient(135deg, #171719, #2d2928);
}

.review-grand-total strong {
    font-size: 1.08rem;
}

.delivery-fee-row strong {
    color: #15966b;
}

.free-delivery-hint {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .65rem .75rem;
    border-radius: 12px;
    color: #087a55;
    background: #edf9f4;
}

.favorite-button.is-favorite {
    color: #ff5b3d;
    background: #fff1ed;
}

.favorites-page { max-width: 1240px; margin: 0 auto; padding: 2rem 1.25rem 7rem; }
.favorites-hero { display:flex; align-items:center; justify-content:space-between; gap:2rem; padding:2.2rem 2.4rem; border:1px solid #f3ddd5; border-radius:32px; background:linear-gradient(135deg,#fff8f5,#fff 65%); }
.favorites-hero h1 { margin:.35rem 0; font-size:clamp(2rem,4vw,3.2rem); }
.favorites-hero p { margin:0; color:#77716f; }
.favorites-hero-icon { display:grid; place-items:center; width:100px; height:100px; border-radius:30px; color:#fff; font-size:2.5rem; background:linear-gradient(135deg,#ff5b3d,#ff826b); box-shadow:0 18px 45px #ff5b3d33; transform:rotate(-7deg); }
.favorites-section { margin-top:2.5rem; }
.favorites-section > .section-title-row > span { color:#8c8582; }
.favorite-product-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.favorite-product-card { position:relative; display:grid; grid-template-columns:150px 1fr; min-height:142px; overflow:hidden; border:1px solid #ece8e6; border-radius:24px; background:#fff; cursor:pointer; }
.favorite-product-media { position:relative; display:grid; place-items:center; color:#bbb; background:#f3f1f0; }
.favorite-product-media img { width:100%; height:100%; object-fit:cover; }
.favorite-product-media span { position:absolute; right:.55rem; bottom:.55rem; padding:.3rem .55rem; border-radius:99px; font-size:.7rem; background:#fff; }.favorite-product-media span.available{color:#087a55}.favorite-product-media span.unavailable{color:#a44}
.favorite-product-copy { display:flex; flex-direction:column; justify-content:center; padding:1rem 1rem 1rem 3.4rem; }
.favorite-product-copy > small { color:#8c8582; }.favorite-product-copy h3 { margin:.45rem 0 1rem; }.favorite-product-copy > div { display:flex; align-items:center; justify-content:space-between; gap:1rem; }.favorite-product-copy .fa-star{color:#ffad0d}
.favorite-product-card > button { position:absolute; top:.8rem; left:.8rem; width:40px; height:40px; border:0; border-radius:13px; color:#ff5b3d; background:#fff0ec; }
.favorites-empty,.favorites-login { max-width:680px; margin:3rem auto 0; padding:2.5rem; text-align:center; border:1px solid #eee9e6; border-radius:28px; background:#fff; }.favorites-empty > span,.favorites-login > i { display:grid; place-items:center; width:76px; height:76px; margin:0 auto 1rem; border-radius:24px; color:#ff5b3d; font-size:2rem; background:#fff1ed; }.favorites-empty p,.favorites-login > p{color:#77716f}.favorites-empty a{display:inline-flex;align-items:center;gap:.5rem;margin-top:.6rem;padding:.8rem 1rem;border-radius:14px;color:#fff;background:#171719}
.favorites-loading { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; margin-top:2rem; }.favorites-loading .skeleton{height:150px;border-radius:24px}

@media (max-width: 760px) {
    .favorites-page { padding:1rem .75rem 6.5rem; }
    .favorites-hero { padding:1.35rem; border-radius:24px; }.favorites-hero-icon{width:68px;height:68px;border-radius:21px;font-size:1.6rem}.favorites-hero p{font-size:.85rem}
    .favorite-product-grid,.favorites-loading { grid-template-columns:1fr; }
    .favorite-product-card { grid-template-columns:112px 1fr; min-height:124px; border-radius:20px; }.favorite-product-copy{padding:.75rem .8rem .75rem 2.7rem}.favorite-product-copy h3{margin:.35rem 0 .65rem}.favorite-product-copy > div{align-items:flex-end;flex-direction:column;gap:.25rem}.favorite-product-card > button{top:.55rem;left:.55rem;width:34px;height:34px}
}

.submit-order-button,
.login-inline-form > button:not(.login-back-button) {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 51px;
    color: #fff;
    font-size: .72rem;
    font-weight: 800;
    background: var(--brand);
    border: 0;
    border-radius: 15px;
    box-shadow: 0 12px 25px rgba(255, 92, 53, .2);
    cursor: pointer;
}

.submit-order-button:disabled,
.login-inline-form button:disabled {
    opacity: .6;
    cursor: wait;
}

.inline-error {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin-top: 12px;
    padding: 11px 13px;
    color: #a92e2e;
    font-size: .65rem;
    font-weight: 650;
    line-height: 1.7;
    background: #fff2f2;
    border: 1px solid #f4d1d1;
    border-radius: 12px;
}

.cart-conflict-actions {
    display: flex;
    gap: 7px;
    align-items: center;
    margin-right: auto;
}

.cart-conflict-actions button,
.cart-conflict-actions a {
    min-height: 31px;
    padding: 0 10px;
    color: #7d5500;
    font-size: .56rem;
    font-weight: 750;
    text-decoration: none;
    background: #fff;
    border: 1px solid #ead9a8;
    border-radius: 9px;
    cursor: pointer;
}

.cart-conflict-actions button {
    color: #fff;
    background: #9b6900;
    border-color: #9b6900;
}

.customer-login-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0 16px;
    padding: 25px;
}

.login-card-icon {
    display: grid;
    grid-row: span 2;
    width: 50px;
    height: 50px;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, var(--brand), #ff7959);
    border-radius: 17px;
    box-shadow: 0 12px 25px rgba(255, 92, 53, .2);
}

.login-card-copy > span,
.order-action-card .action-card-copy > span {
    color: var(--brand);
    font-size: .6rem;
    font-weight: 800;
}

.login-card-copy h2 {
    margin: 3px 0;
    font-size: 1.15rem;
}

.login-card-copy p {
    margin: 0;
    color: var(--muted);
    font-size: .68rem;
    line-height: 1.8;
}

.login-inline-form {
    display: grid;
    grid-column: 2;
    grid-template-columns: minmax(0, 1fr) 130px;
    gap: 10px;
    align-items: end;
    margin-top: 18px;
}

.login-inline-form .login-back-button {
    min-height: 36px;
    color: var(--muted);
    font-size: .6rem;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.customer-login-card > .inline-error {
    grid-column: 2;
}

.cart-restaurant > small {
    margin-right: auto;
    color: var(--success);
    font-size: .58rem;
}

.floating-cart-bar {
    position: fixed;
    z-index: 65;
    right: 50%;
    bottom: 22px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    width: min(560px, calc(100% - 32px));
    min-height: 66px;
    padding: 9px 10px;
    color: var(--ink);
    text-decoration: none;
    background:
        radial-gradient(circle at 100% 0, rgba(255, 105, 67, .11), transparent 34%),
        rgba(255, 255, 255, .96);
    border: 1px solid #eadbd5;
    border-radius: 22px;
    box-shadow: 0 18px 42px rgba(55, 38, 33, .17);
    backdrop-filter: blur(16px);
    transform: translateX(50%);
    transition: transform 160ms ease, box-shadow 160ms ease;
}

.floating-cart-bar:hover {
    box-shadow: 0 21px 48px rgba(55, 38, 33, .21);
    transform: translateX(50%) translateY(-2px);
}

.floating-cart-icon {
    position: relative;
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    color: #fff;
    background: linear-gradient(145deg, var(--brand), #ff8060);
    border-radius: 15px;
    box-shadow: 0 9px 20px rgba(255, 92, 53, .22);
}

.floating-cart-icon > b {
    position: absolute;
    top: -6px;
    left: -6px;
    display: grid;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    place-items: center;
    color: var(--ink);
    font-size: .51rem;
    font-weight: 900;
    background: #fff;
    border: 2px solid #ffd9ce;
    border-radius: 99px;
}

.floating-cart-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.floating-cart-copy small {
    overflow: hidden;
    color: var(--muted);
    font-size: .56rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.floating-cart-copy strong {
    color: var(--ink);
    font-size: .75rem;
}

.floating-cart-copy strong small {
    color: var(--muted-strong);
    font-size: .5rem;
    font-weight: 650;
}

.floating-cart-action {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    min-height: 42px;
    padding: 9px 13px;
    color: #fff;
    font-size: .59rem;
    font-weight: 850;
    background: var(--ink);
    border-radius: 13px;
}

/* Orders dashboard */
::view-transition-old(app-content) {
    animation: customer-route-old 170ms ease both;
}

::view-transition-new(app-content) {
    animation: customer-route-new 240ms cubic-bezier(.2, .7, .25, 1) both;
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(app-content),
    ::view-transition-new(app-content) {
        animation: none;
    }
}

@keyframes customer-route-old {
    to { opacity: 0; transform: scale(.992); }
}

@keyframes customer-route-new {
    from { opacity: 0; transform: translateY(8px); }
}

.cart-conflict-message {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    padding: 16px;
    color: #423632;
    background: #fff6f1;
    border: 1px solid #f3ded4;
    border-radius: 18px;
}

.cart-conflict-message p {
    margin: 0;
    font-size: .76rem;
    line-height: 1.95;
}

.cart-conflict-icon {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    color: #e4572e;
    background: #fff;
    border-radius: 13px;
    box-shadow: 0 6px 18px rgba(84, 52, 42, .08);
}

.cart-conflict-note {
    display: flex;
    gap: 7px;
    align-items: center;
    margin: 12px 2px 0;
    color: #81736e;
    font-size: .62rem;
}

.cart-sheet-primary {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 50px;
    color: #fff;
    font-size: .75rem;
    font-weight: 900;
    background: linear-gradient(135deg, var(--brand), #ff7755);
    border: 0;
    border-radius: 15px;
    box-shadow: 0 10px 24px rgba(228, 87, 46, .2);
}

.cart-sheet-secondary-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
}

.cart-sheet-secondary-actions a,
.cart-sheet-secondary-actions button {
    display: grid;
    min-height: 42px;
    margin: 0;
    padding: 0 12px;
    place-items: center;
    color: #645752;
    font-size: .64rem;
    font-weight: 800;
    text-decoration: none;
    background: #f7f2ef;
    border: 0;
    border-radius: 13px;
}

.orders-dashboard,
.order-tracking-page {
    width: min(calc(100% - 32px), var(--content-width));
    margin: 0 auto;
    padding: 48px 0 90px;
}

.dashboard-hero {
    display: flex;
    gap: 24px;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 34px;
}

.dashboard-hero h1 {
    margin: 6px 0 0;
    font-size: clamp(2rem, 4vw, 3.3rem);
    font-weight: 900;
    letter-spacing: -.05em;
}

.realtime-pill {
    display: inline-flex;
    gap: 7px;
    align-items: center;
    min-height: 34px;
    padding: 0 12px;
    color: var(--muted);
    font-size: .6rem;
    font-weight: 700;
    background: #f1f1f3;
    border: 1px solid #e5e5e8;
    border-radius: 999px;
}

.realtime-pill > span {
    width: 7px;
    height: 7px;
    background: #aaaab1;
    border-radius: 50%;
}

.realtime-pill.online {
    color: var(--success);
    background: var(--success-soft);
    border-color: #ccebdd;
}

.realtime-pill.online > span {
    background: #20a875;
    box-shadow: 0 0 0 5px rgba(32,168,117,.12);
    animation: livePulse 1.8s infinite;
}

.dashboard-live-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.notification-optin {
    min-height: 34px;
    padding: 0 12px;
    color: var(--muted-strong);
    font-size: .6rem;
    font-weight: 700;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    cursor: pointer;
}

.notification-optin.enabled {
    color: var(--success);
    background: var(--success-soft);
    border-color: #ccebdd;
}

.notification-optin:disabled {
    opacity: .65;
    cursor: not-allowed;
}

.notification-feedback {
    display: flex;
    gap: 9px;
    align-items: center;
    margin: -14px 0 22px;
    padding: 11px 14px;
    font-size: .63rem;
    font-weight: 650;
    line-height: 1.7;
    border: 1px solid;
    border-radius: 13px;
}

.notification-feedback.success {
    color: #117252;
    background: var(--success-soft);
    border-color: #ccebdd;
}

.notification-feedback.error {
    color: #9b3737;
    background: #fff3f3;
    border-color: #f2cece;
}

@keyframes livePulse {
    50% { box-shadow: 0 0 0 8px rgba(32,168,117,0); }
}

.orders-loading,
.tracking-loading {
    display: grid;
    gap: 15px;
    min-height: 340px;
    place-items: center;
    align-content: center;
    color: var(--muted);
}

.orders-card-skeletons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.orders-card-skeletons span {
    height: 245px;
    background: linear-gradient(100deg, #f0f0f2 20%, #fafafa 40%, #f0f0f2 60%);
    background-size: 200% 100%;
    border-radius: 25px;
    animation: skeletonMove 1.3s infinite linear;
}

@keyframes skeletonMove { to { background-position-x: -200%; } }

.orders-section + .orders-section {
    margin-top: 42px;
}

.orders-section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    margin-bottom: 15px;
}

.orders-section-heading span,
.detail-card-heading span,
.progress-heading span,
.delivery-detail-card > div:nth-child(2) > span {
    color: var(--brand);
    font-size: .58rem;
    font-weight: 800;
}

.orders-section-heading h2,
.detail-card-heading h2,
.progress-heading h2 {
    margin: 3px 0 0;
    font-size: 1.35rem;
    font-weight: 900;
}

.orders-section-heading > strong {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    color: var(--brand);
    font-size: .7rem;
    background: var(--brand-soft);
    border-radius: 11px;
}

.active-orders-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.order-dashboard-card {
    color: var(--ink);
    text-decoration: none;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 24px;
    box-shadow: var(--shadow-sm);
    transition: 180ms ease;
}

.order-dashboard-card:hover {
    border-color: rgba(255,92,53,.25);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.order-dashboard-card.active {
    padding: 20px;
}

.order-card-top {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: center;
}

.order-restaurant-mark {
    display: grid;
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    place-items: center;
    color: var(--brand);
    background: var(--brand-soft);
    border-radius: 15px;
}

.order-card-top span {
    color: var(--muted);
    font-size: .61rem;
}

.order-card-top h3 {
    margin: 3px 0 0;
    font-size: 1rem;
}

.card-arrow {
    color: #aaaab0;
    font-size: .65rem;
}

.order-live-message {
    display: flex;
    gap: 9px;
    align-items: center;
    margin: 17px 0 13px;
    padding: 11px 13px;
    color: #336957;
    font-size: .65rem;
    font-weight: 650;
    background: #f0faf6;
    border-radius: 12px;
}

.order-live-message > span {
    width: 7px;
    height: 7px;
    background: #22a775;
    border-radius: 50%;
}

.order-eta-glance {
    display: inline-flex;
    gap: 7px;
    align-items: center;
    width: fit-content;
    margin: -3px 0 13px;
    padding: 7px 10px;
    color: #b3472c;
    font-size: .59rem;
    background: var(--brand-soft);
    border-radius: 10px;
}

.order-eta-glance strong { font-weight: 900; }

.order-card-items {
    min-height: 24px;
    color: var(--muted);
    font-size: .62rem;
}

.order-card-bottom {
    display: flex;
    align-items: end;
    justify-content: space-between;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px dashed #dedee2;
}

.order-card-bottom > span {
    display: grid;
}

.order-card-bottom small {
    color: var(--muted);
    font-size: .52rem;
}

.order-card-bottom b {
    font-size: .67rem;
}

.order-card-bottom > strong {
    font-size: .82rem;
}

.past-orders-list {
    display: grid;
    gap: 9px;
}

.order-dashboard-card.past {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    gap: 13px;
    align-items: center;
    padding: 14px 16px;
}

.past-order-main {
    display: grid;
}

.past-order-main > span {
    color: var(--muted);
    font-size: .57rem;
}

.past-order-main > strong {
    font-size: .76rem;
}

.past-order-main small {
    color: #9a9aa1;
    font-size: .52rem;
}

.past-order-price {
    font-size: .72rem;
}

.past-order-price small {
    color: var(--muted);
    font-size: .5rem;
}

.orders-empty,
.orders-error {
    display: grid;
    justify-items: center;
    min-height: 380px;
    padding: 40px;
    text-align: center;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 28px;
}

.orders-empty > span,
.orders-error > i {
    display: grid;
    width: 72px;
    height: 72px;
    place-items: center;
    align-self: end;
    color: var(--brand);
    font-size: 1.5rem;
    background: var(--brand-soft);
    border-radius: 24px;
}

.orders-empty h2,
.orders-error h2 {
    margin: 16px 0 0;
}

.orders-empty p,
.orders-error p {
    margin: 5px 0 17px;
    color: var(--muted);
    font-size: .72rem;
}

.orders-empty a,
.orders-error a,
.orders-error button {
    align-self: start;
    padding: 11px 18px;
    color: #fff;
    font-size: .68rem;
    font-weight: 750;
    text-decoration: none;
    background: var(--brand);
    border: 0;
    border-radius: 12px;
}

/* Live order tracking */
.order-tracking-page {
    width: min(calc(100% - 32px), 1080px);
}

.tracking-hero {
    position: relative;
    overflow: hidden;
    padding: 24px 28px 27px;
    background:
        radial-gradient(circle at 10% 0, rgba(255, 92, 53, .13), transparent 17rem),
        linear-gradient(135deg, #fff, #fbfafb);
    border: 1px solid var(--line);
    border-radius: 30px;
    box-shadow: var(--shadow-sm);
}

.tracking-hero::after {
    position: absolute;
    bottom: -80px;
    left: -50px;
    width: 220px;
    height: 220px;
    content: "";
    background: rgba(255,92,53,.05);
    border-radius: 50%;
}

.tracking-hero-top {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tracking-hero-top > a {
    color: var(--muted-strong);
    font-size: .63rem;
    font-weight: 700;
    text-decoration: none;
}

.tracking-status-content {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 18px;
    align-items: center;
    margin: 31px 0;
}

.tracking-status-icon {
    display: grid;
    flex: 0 0 72px;
    width: 72px;
    height: 72px;
    place-items: center;
    color: #fff;
    font-size: 1.4rem;
    background: linear-gradient(135deg, var(--brand), #ff7959);
    border-radius: 24px;
    box-shadow: 0 16px 30px rgba(255,92,53,.22);
}

.tracking-status-content span {
    color: var(--muted);
    font-size: .65rem;
}

.tracking-status-content h1 {
    margin: 4px 0;
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 900;
    letter-spacing: -.05em;
}

.tracking-status-content p {
    max-width: 650px;
    margin: 0;
    color: var(--muted-strong);
    font-size: .73rem;
    line-height: 1.8;
}

.tracking-order-meta {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}

.tracking-order-meta > span {
    display: grid;
    gap: 2px;
}

.tracking-order-meta small {
    color: var(--muted);
    font-size: .53rem;
}

.tracking-order-meta strong {
    font-size: .68rem;
}

.preparation-promise-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    margin-top: 16px;
    padding: 16px 18px;
    background: linear-gradient(135deg, #fff7f2, #fff);
    border: 1px solid rgba(255, 92, 53, .2);
    border-radius: 20px;
    box-shadow: var(--shadow-sm);
}

.preparation-promise-icon {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, var(--brand), #ff8264);
    border-radius: 15px;
    box-shadow: 0 10px 24px rgba(255, 92, 53, .2);
}

.preparation-promise-card > div:nth-child(2) { display: grid; gap: 2px; }
.preparation-promise-card span { color: var(--brand); font-size: .56rem; font-weight: 800; }
.preparation-promise-card strong { font-size: .86rem; font-weight: 900; }
.preparation-promise-card p { margin: 0; color: var(--muted); font-size: .58rem; }

.preparation-promise-card .preparation-promise-live {
    display: inline-flex;
    gap: 5px;
    align-items: center;
    padding: 7px 10px;
    color: #13795b;
    background: var(--success-soft);
    border-radius: 999px;
}

.order-progress-card,
.order-detail-card,
.order-action-card {
    margin-top: 16px;
    padding: 23px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 24px;
    box-shadow: var(--shadow-sm);
}

.tracking-notification-callout {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    margin-bottom: 16px;
    padding: 15px 18px;
    color: #5f4300;
    background: linear-gradient(135deg, #fff8e6, #fffdf7);
    border: 1px solid #f0ddb0;
    border-radius: 18px;
}

.tracking-notification-callout.enabled {
    color: #146c50;
    background: var(--success-soft);
    border-color: #ccebdd;
}

.tracking-notification-icon {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    color: #9a6500;
    background: #fff;
    border-radius: 13px;
    box-shadow: 0 5px 15px rgba(85, 56, 0, .08);
}

.tracking-notification-callout.enabled .tracking-notification-icon {
    color: var(--success);
}

.tracking-notification-callout span {
    font-size: .52rem;
    font-weight: 800;
}

.tracking-notification-callout h2 {
    margin: 2px 0;
    font-size: .82rem;
}

.tracking-notification-callout p {
    margin: 0;
    color: var(--muted-strong);
    font-size: .56rem;
    line-height: 1.7;
}

.tracking-notification-callout button {
    min-height: 40px;
    padding: 0 14px;
    color: #fff;
    font-size: .59rem;
    font-weight: 800;
    background: #202024;
    border: 0;
    border-radius: 12px;
    cursor: pointer;
}

.tracking-notification-callout button:disabled {
    opacity: .6;
    cursor: not-allowed;
}

.progress-heading,
.detail-card-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    margin-bottom: 22px;
}

.progress-heading small {
    color: var(--muted);
    font-size: .55rem;
}

.order-progress-track {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
}

.order-progress-track::before {
    position: absolute;
    z-index: 0;
    top: 18px;
    right: 8%;
    left: 8%;
    height: 2px;
    content: "";
    background: #e6e6ea;
}

.progress-step {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 8px;
    justify-items: center;
    color: #aaaab1;
    text-align: center;
}

.progress-step > span {
    display: grid;
    width: 37px;
    height: 37px;
    place-items: center;
    font-size: .67rem;
    background: #f1f1f3;
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px #e6e6e9;
}

.progress-step strong {
    font-size: .56rem;
}

.progress-step.done,
.progress-step.current {
    color: var(--success);
}

.progress-step.done > span {
    color: #fff;
    background: var(--success);
    box-shadow: 0 0 0 1px var(--success);
}

.progress-step.current {
    color: var(--brand);
}

.progress-step.current > span {
    color: #fff;
    background: var(--brand);
    box-shadow: 0 0 0 5px var(--brand-soft);
}

.order-action-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 17px;
    align-items: center;
}

.action-card-icon {
    display: grid;
    width: 53px;
    height: 53px;
    place-items: center;
    color: #a26300;
    background: #fff4d7;
    border-radius: 17px;
}

.action-card-copy h2 {
    margin: 3px 0 4px;
    font-size: 1.05rem;
}

.action-card-copy p {
    margin: 0;
    color: var(--muted);
    font-size: .66rem;
}

.proposed-changes {
    display: grid;
    gap: 5px;
    margin-top: 10px;
}

.proposed-changes > div {
    display: flex;
    gap: 7px;
    align-items: center;
    color: var(--muted-strong);
    font-size: .62rem;
}

.action-card-buttons {
    display: flex;
    gap: 8px;
}

.action-card-buttons button,
.payment-button {
    min-height: 43px;
    padding: 0 15px;
    font-size: .65rem;
    font-weight: 750;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    cursor: pointer;
}

.action-card-buttons button.primary,
.payment-button.primary {
    color: #fff;
    background: var(--brand);
    border-color: var(--brand);
}

.change-request-card {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
}

.payment-action-card {
    grid-template-columns: auto minmax(0, 1fr) auto auto auto;
    background: linear-gradient(135deg, #fff, #fff8f5);
    border-color: #f3d8cf;
}

.payment-action-card .action-card-icon {
    color: var(--brand);
    background: var(--brand-soft);
}

.payment-price {
    display: grid;
    text-align: left;
}

.payment-price small {
    color: var(--muted);
    font-size: .52rem;
}

.payment-price strong {
    font-size: 1rem;
}

.payment-price strong span {
    font-size: .55rem;
}

.tracking-error {
    margin-top: 14px;
}

.tracking-content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr);
    gap: 16px;
}

.tracking-items-list {
    display: grid;
}

.tracking-items-list article {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto auto;
    gap: 12px;
    align-items: center;
    padding: 13px 0;
    border-top: 1px solid #f0f0f2;
}

.tracking-item-image {
    display: grid;
    width: 58px;
    height: 53px;
    overflow: hidden;
    place-items: center;
    color: #aaaab1;
    background: #f3f3f5;
    border-radius: 13px;
}

.tracking-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tracking-items-list h3 {
    margin: 0;
    font-size: .75rem;
}

.tracking-items-list p {
    margin: 3px 0 0;
    color: var(--muted);
    font-size: .55rem;
}

.tracking-items-list article > span {
    color: var(--muted);
    font-size: .58rem;
}

.tracking-items-list article > strong {
    font-size: .65rem;
}

.tracking-price-lines {
    display: grid;
    gap: 8px;
    margin-top: 8px;
    padding-top: 16px;
    border-top: 1px dashed #dddde2;
}

.tracking-price-lines > div {
    display: flex;
    justify-content: space-between;
    color: var(--muted-strong);
    font-size: .63rem;
}

.tracking-price-lines .discount {
    color: var(--success);
}

.tracking-price-lines .final {
    margin-top: 4px;
    padding-top: 12px;
    color: var(--ink);
    font-size: .76rem;
    border-top: 1px solid var(--line);
}

.order-timeline {
    position: relative;
    display: grid;
}

.order-timeline::before {
    position: absolute;
    top: 8px;
    right: 6px;
    bottom: 8px;
    width: 1px;
    content: "";
    background: #e5e5e8;
}

.order-timeline article {
    position: relative;
    display: grid;
    grid-template-columns: 15px 1fr;
    gap: 11px;
    padding-bottom: 20px;
}

.timeline-dot {
    position: relative;
    z-index: 1;
    width: 13px;
    height: 13px;
    margin-top: 4px;
    background: var(--brand);
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(255,92,53,.35);
}

.order-timeline article:first-child .timeline-dot {
    box-shadow: 0 0 0 5px var(--brand-soft);
}

.order-timeline time {
    color: var(--brand);
    font-size: .52rem;
    font-weight: 750;
}

.order-timeline h3 {
    margin: 2px 0;
    font-size: .7rem;
}

.order-timeline p {
    margin: 0;
    color: var(--muted);
    font-size: .58rem;
    line-height: 1.75;
}

.order-timeline small {
    color: #a0a0a7;
    font-size: .5rem;
}

.delivery-detail-card {
    display: flex;
    gap: 14px;
    align-items: center;
}

.delivery-detail-icon {
    display: grid;
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    place-items: center;
    color: var(--brand);
    background: var(--brand-soft);
    border-radius: 15px;
}

.delivery-detail-card h2 {
    margin: 3px 0;
    font-size: .77rem;
}

.delivery-detail-card p {
    margin: 0;
    color: var(--muted);
    font-size: .58rem;
}

.tracking-contact-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, .75fr);
    gap: 24px;
    align-items: center;
    margin-top: 16px;
    padding: 22px;
    background:
        radial-gradient(circle at 8% 15%, rgba(255, 92, 53, .1), transparent 34%),
        #19191d;
    border: 1px solid #2c2c31;
    border-radius: 23px;
    box-shadow: var(--shadow-sm);
}

.tracking-contact-copy > span {
    color: #ff896d;
    font-size: .59rem;
    font-weight: 800;
}

.tracking-contact-copy h2 {
    margin: 5px 0;
    color: #fff;
    font-size: 1rem;
}

.tracking-contact-copy p {
    max-width: 570px;
    margin: 0;
    color: #b9b9c1;
    font-size: .61rem;
    line-height: 1.8;
}

.tracking-contact-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.tracking-contact-actions a {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 9px;
    align-items: center;
    min-height: 61px;
    padding: 9px;
    color: #fff;
    text-decoration: none;
    background: #28282e;
    border: 1px solid #36363d;
    border-radius: 15px;
    transition: transform .18s ease, border-color .18s ease;
}

.tracking-contact-actions a:hover {
    border-color: #ff896d;
    transform: translateY(-2px);
}

.tracking-contact-actions a > i {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    color: #ff896d;
    background: rgba(255, 92, 53, .12);
    border-radius: 11px;
}

.tracking-contact-actions a.support > i {
    color: #63d6af;
    background: rgba(37, 177, 129, .12);
}

.tracking-contact-actions span {
    display: grid;
    min-width: 0;
}

.tracking-contact-actions small {
    color: #aaaab3;
    font-size: .49rem;
}

.tracking-contact-actions strong {
    overflow: hidden;
    font-size: .62rem;
    direction: ltr;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cancel-order-link {
    display: block;
    margin: 20px auto 0;
    color: var(--danger);
    font-size: .62rem;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.tracking-loader-ring {
    width: 45px;
    height: 45px;
    border: 4px solid #eeeef1;
    border-top-color: var(--brand);
    border-radius: 50%;
    animation: loaderRotate .8s linear infinite;
}

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

/* Customer profile and address book */
.account-page {
    width: min(calc(100% - 32px), var(--content-width));
    margin: 0 auto;
    padding: 30px 0 110px;
}

.account-loading {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.account-loading .skeleton {
    min-height: 360px;
    border-radius: 28px;
}

.account-login-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(420px, .75fr);
    gap: 32px;
    align-items: center;
    min-height: 570px;
    padding: clamp(26px, 5vw, 70px);
    overflow: hidden;
    background:
        radial-gradient(circle at 8% 90%, rgba(255, 102, 62, .18), transparent 27%),
        linear-gradient(135deg, #17171b, #28272d);
    border-radius: 34px;
    box-shadow: var(--shadow-lg);
}

.account-login-copy {
    color: #fff;
}

.account-login-copy .section-eyebrow {
    color: #ff8c6b;
}

.account-login-copy h1 {
    max-width: 600px;
    margin: 12px 0;
    font-size: clamp(2rem, 4.4vw, 4rem);
    line-height: 1.22;
}

.account-login-copy > p {
    max-width: 570px;
    margin: 0;
    color: #c5c4cb;
    font-size: .86rem;
    line-height: 2;
}

.account-benefits {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
}

.account-benefits span {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    padding: 10px 13px;
    color: #e8e7eb;
    font-size: .64rem;
    font-weight: 700;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 999px;
}

.account-benefits i {
    color: #ff7651;
}

.account-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px;
    align-items: center;
    min-height: 210px;
    padding: 30px;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 7% 110%, rgba(255, 103, 61, .3), transparent 34%),
        linear-gradient(120deg, #1c1c21, #2c2b31);
    border-radius: 30px;
    box-shadow: 0 24px 60px rgba(24, 24, 28, .14);
}

.account-hero::after {
    position: absolute;
    top: -85px;
    left: -45px;
    width: 270px;
    height: 270px;
    content: "";
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 50%;
}

.account-dashboard-hero {
    grid-template-columns: minmax(0, 1fr) minmax(340px, .72fr);
    align-items: stretch;
    color: var(--ink);
    background:
        radial-gradient(circle at 2% 110%, rgba(255, 92, 53, .14), transparent 30%),
        radial-gradient(circle at 90% 0, rgba(255, 194, 168, .2), transparent 28%),
        linear-gradient(135deg, #fff8f5, #fff 58%, #fff3ee);
    border: 1px solid #f2ded6;
    box-shadow: 0 24px 60px rgba(72, 43, 33, .09);
}

.account-dashboard-hero::after {
    border-color: rgba(255, 92, 53, .1);
}

.account-hero-copy {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 28px;
    justify-content: space-between;
    min-width: 0;
    padding: 5px 2px;
}

.account-dashboard-hero .account-welcome {
    color: #c95031;
}

.account-dashboard-hero .account-identity h1 {
    color: var(--ink);
}

.account-dashboard-hero .account-identity p {
    color: var(--muted-strong);
}

.account-hero-message {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 6px;
    max-width: 560px;
}

.account-hero-message span {
    display: inline-flex;
    gap: 7px;
    align-items: center;
    color: #b74a2e;
    font-size: .68rem;
    font-weight: 850;
}

.account-hero-message p {
    margin: 0;
    color: var(--muted);
    font-size: .72rem;
    line-height: 1.9;
}

.profile-reward-card {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 15px;
    align-content: center;
    min-width: 0;
    padding: 22px;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 0 100%, rgba(255, 103, 61, .28), transparent 38%),
        linear-gradient(135deg, #29282e, #1f1f23);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 24px;
    box-shadow: 0 18px 40px rgba(32, 30, 31, .15);
}

.profile-reward-card.unlocked {
    background:
        radial-gradient(circle at 0 100%, rgba(255, 255, 255, .22), transparent 40%),
        linear-gradient(135deg, #ef5635, #ff7d5d);
    border-color: rgba(255, 255, 255, .22);
    box-shadow: 0 20px 45px rgba(239, 86, 53, .24);
}

.profile-reward-card::after {
    position: absolute;
    top: -52px;
    left: -50px;
    width: 150px;
    height: 150px;
    content: "";
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 50%;
}

.profile-reward-top {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
}

.profile-reward-icon {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    color: #ff7651;
    font-size: 1.05rem;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 15px;
}

.profile-reward-card.unlocked .profile-reward-icon {
    color: #fff;
    background: rgba(255, 255, 255, .18);
}

.profile-reward-top > div:nth-child(2) {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.profile-reward-top small {
    color: #aaa9b2;
    font-size: .55rem;
    font-weight: 750;
}

.profile-reward-card.unlocked small {
    color: rgba(255, 255, 255, .78);
}

.profile-reward-top > div:nth-child(2) strong {
    overflow: hidden;
    font-size: .83rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-reward-card .completion-ring {
    width: 58px;
    height: 58px;
    flex-basis: 58px;
    background:
        radial-gradient(circle closest-side, #242329 75%, transparent 77% 100%),
        conic-gradient(#ff7651 calc(var(--completion) * 1%), rgba(255, 255, 255, .13) 0);
}

.profile-reward-card.unlocked .completion-ring {
    background:
        radial-gradient(circle closest-side, #ed5637 75%, transparent 77% 100%),
        conic-gradient(#fff calc(var(--completion) * 1%), rgba(255, 255, 255, .23) 0);
}

.profile-reward-progress {
    position: relative;
    z-index: 1;
    height: 7px;
    overflow: hidden;
    background: rgba(255, 255, 255, .11);
    border-radius: 99px;
}

.profile-reward-progress span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #ff633f, #ff9678);
    border-radius: inherit;
    transition: width 300ms ease;
}

.profile-reward-card.unlocked .profile-reward-progress span {
    background: #fff;
}

.profile-reward-card > p {
    position: relative;
    z-index: 1;
    min-height: 32px;
    margin: 0;
    color: #c1c0c6;
    font-size: .62rem;
    line-height: 1.8;
}

.profile-reward-card.unlocked > p {
    color: rgba(255, 255, 255, .84);
}

.profile-reward-card > a {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 42px;
    padding: 9px 12px;
    color: #fff;
    font-size: .62rem;
    font-weight: 850;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 12px;
}

.profile-reward-card.unlocked > a {
    color: #d94a2d;
    background: #fff;
    border-color: #fff;
}

.profile-reward-card.account-next-step {
    color: var(--ink);
    background:
        radial-gradient(circle at 0 100%, rgba(255, 110, 72, .12), transparent 38%),
        linear-gradient(135deg, rgba(255, 255, 255, .98), #fff7f3);
    border-color: #eddad3;
    box-shadow: 0 16px 38px rgba(79, 48, 37, .09);
}

.account-next-step::after {
    border-color: rgba(255, 92, 53, .11);
}

.account-next-step .profile-reward-icon {
    color: var(--brand);
    background: #fff0eb;
    border-color: #ffd9cd;
}

.account-next-step .profile-reward-top small {
    display: inline-flex;
    gap: 5px;
    align-items: center;
    color: #b9563d;
}

.account-next-step .profile-reward-top > div:nth-child(2) strong {
    color: var(--ink);
}

.account-next-step .completion-ring {
    color: var(--ink);
    background:
        radial-gradient(circle closest-side, #fff 75%, transparent 77% 100%),
        conic-gradient(var(--brand) calc(var(--completion) * 1%), #f1e5e0 0);
}

.account-next-step .profile-reward-progress {
    background: #f1e5e0;
}

.account-next-step > p {
    color: var(--muted-strong);
}

.account-next-step > a {
    color: #fff;
    background: var(--brand);
    border-color: var(--brand);
    box-shadow: 0 9px 22px rgba(255, 92, 53, .2);
}

.account-next-step.urgent {
    background:
        radial-gradient(circle at 0 100%, rgba(255, 171, 62, .13), transparent 39%),
        linear-gradient(135deg, #fff, #fffaf0);
    border-color: #efddba;
}

.account-next-step.urgent .profile-reward-icon {
    color: #b86a11;
    background: #fff3dc;
    border-color: #f4ddb3;
}

.account-next-step.live .profile-reward-icon {
    color: #148461;
    background: #ebf8f3;
    border-color: #ceeade;
}

.next-step-badge {
    align-self: center;
    padding: 6px 9px;
    color: #ae4b33;
    font-size: .51rem;
    font-weight: 850;
    background: #fff0eb;
    border: 1px solid #ffd8cb;
    border-radius: 99px;
    white-space: nowrap;
}

.account-next-step.urgent .next-step-badge {
    color: #9a5b0e;
    background: #fff3da;
    border-color: #f1d8aa;
}

.account-next-step.live .next-step-badge {
    color: #147557;
    background: #ebf8f3;
    border-color: #cce8dc;
}

.next-step-order-meta {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 7px;
    align-items: center;
    min-width: 0;
}

.next-step-order-meta span {
    display: inline-flex;
    gap: 5px;
    align-items: center;
    min-width: 0;
    padding: 6px 8px;
    overflow: hidden;
    color: var(--muted-strong);
    font-size: .51rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: rgba(255, 255, 255, .76);
    border: 1px solid #eee3df;
    border-radius: 9px;
}

.next-step-order-meta span:first-child {
    flex: 1;
}

.next-step-order-meta i {
    color: var(--brand);
}

.account-identity {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 17px;
    align-items: center;
    min-width: 0;
}

.account-avatar {
    display: grid;
    flex: 0 0 76px;
    width: 76px;
    height: 76px;
    place-items: center;
    color: #fff;
    font-size: 1.25rem;
    font-weight: 900;
    background: linear-gradient(145deg, var(--brand), #ff8d69);
    border: 5px solid rgba(255, 255, 255, .12);
    border-radius: 25px;
    box-shadow: 0 14px 30px rgba(255, 92, 53, .22);
}

.account-welcome {
    color: #aaa9b2;
    font-size: .62rem;
    font-weight: 700;
}

.account-identity h1 {
    margin: 3px 0 1px;
    overflow: hidden;
    font-size: clamp(1.45rem, 3vw, 2.35rem);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-identity p {
    margin: 0;
    color: #d1d0d6;
    direction: ltr;
    font-size: .72rem;
    text-align: right;
}

.account-completion {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 13px;
    align-items: center;
    max-width: 300px;
}

.completion-ring {
    --completion: 25;
    display: grid;
    flex: 0 0 68px;
    width: 68px;
    height: 68px;
    place-items: center;
    background:
        radial-gradient(circle closest-side, #242329 77%, transparent 79% 100%),
        conic-gradient(#ff6d47 calc(var(--completion) * 1%), rgba(255, 255, 255, .12) 0);
    border-radius: 50%;
}

.completion-ring strong {
    font-size: .66rem;
}

.account-completion > div:last-child {
    display: grid;
    gap: 4px;
}

.account-completion > div:last-child strong {
    font-size: .72rem;
}

.account-completion > div:last-child span {
    color: #aaa9b2;
    font-size: .57rem;
    line-height: 1.7;
}

.account-quick-links {
    position: relative;
    z-index: 1;
    display: flex;
    grid-column: 1 / -1;
    gap: 9px;
    align-items: center;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.account-quick-links a {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    padding: 9px 13px;
    color: #d8d7dc;
    font-size: .61rem;
    font-weight: 700;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 11px;
    transition: 150ms ease;
}

.account-quick-links a:hover {
    color: #fff;
    background: rgba(255, 255, 255, .11);
}

.account-quick-links i {
    color: #ff7651;
}

.account-dashboard-hero .account-quick-links {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 0;
    border-color: #efdfd9;
}

.account-dashboard-hero .account-quick-links a {
    justify-content: center;
    color: var(--muted-strong);
    background: rgba(255, 255, 255, .72);
    border-color: #eee1dc;
}

.account-dashboard-hero .account-quick-links a:hover {
    color: var(--ink);
    background: #fff;
    border-color: #e6d2cb;
}

.account-overview {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.account-overview-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 11px;
    align-items: center;
    min-width: 0;
    min-height: 104px;
    padding: 15px;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 20px;
    box-shadow: 0 10px 28px rgba(33, 31, 31, .045);
    transition: 160ms ease;
}

.account-overview-card:hover {
    transform: translateY(-2px);
    border-color: #ddd5d1;
    box-shadow: 0 16px 34px rgba(33, 31, 31, .075);
}

.overview-icon {
    display: grid;
    width: 43px;
    height: 43px;
    place-items: center;
    color: var(--brand);
    background: var(--brand-soft);
    border-radius: 14px;
}

.account-overview-card.favorites .overview-icon { color:#df4963; background:#fff0f3; }
.account-overview-card.addresses .overview-icon { color:#168665; background:#edf9f5; }
.account-overview-card.notifications .overview-icon { color:#967019; background:#fff8e6; }

.account-overview-card > div {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.account-overview-card small {
    color: var(--muted);
    font-size: .54rem;
    font-weight: 750;
}

.account-overview-card strong {
    font-size: 1.12rem;
    line-height: 1.2;
}

.account-overview-card > div > span {
    overflow: hidden;
    color: var(--muted-strong);
    font-size: .54rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-overview-card > i {
    color: #c9c5c3;
    font-size: .65rem;
}

.account-active-order {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(150px, auto);
    gap: 17px;
    align-items: center;
    margin-top: 14px;
    padding: 17px 19px;
    overflow: hidden;
    color: var(--ink);
    background:
        radial-gradient(circle at 100% 0, rgba(255, 111, 74, .1), transparent 27%),
        linear-gradient(115deg, #fff, #fffaf7);
    border: 1px solid #efddd5;
    border-radius: 22px;
    box-shadow: 0 14px 34px rgba(68, 47, 39, .075);
    transition: 180ms ease;
}

.account-active-order::before {
    position: absolute;
    top: 0;
    right: 0;
    width: 5px;
    height: 100%;
    content: "";
    background: linear-gradient(180deg, var(--brand), #ff9a75);
}

.account-active-order:hover {
    transform: translateY(-2px);
    border-color: #e6c4b8;
    box-shadow: 0 19px 40px rgba(68, 47, 39, .105);
}

.active-order-pulse {
    position: relative;
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    color: var(--brand);
    font-size: 1rem;
    background: #fff1ec;
    border: 1px solid #ffd7ca;
    border-radius: 17px;
}

.active-order-pulse::after {
    position: absolute;
    width: 100%;
    height: 100%;
    content: "";
    border: 1px solid rgba(255, 111, 74, .34);
    border-radius: inherit;
    animation: dashboardOrderPulse 1.8s ease-out infinite;
}

@keyframes dashboardOrderPulse {
    0% { transform: scale(1); opacity:1; }
    100% { transform: scale(1.45); opacity:0; }
}

.active-order-main {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.active-order-kicker {
    display: flex;
    gap: 9px;
    align-items: center;
}

.active-order-kicker > span {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    color: #c84e30;
    font-size: .54rem;
    font-weight: 850;
}

.active-order-kicker > span i {
    color: #24a670;
    font-size: .34rem;
    animation: dashboardOrderDot 1.6s ease-in-out infinite;
}

@keyframes dashboardOrderDot {
    50% { opacity: .35; }
}

.active-order-kicker small {
    padding-right: 9px;
    color: var(--muted);
    font-size: .52rem;
    border-right: 1px solid #e9e2df;
}

.active-order-title {
    display: flex;
    gap: 8px;
    align-items: baseline;
    min-width: 0;
}

.active-order-title strong {
    overflow: hidden;
    font-size: .8rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.active-order-title span {
    overflow: hidden;
    color: var(--muted);
    font-size: .55rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.active-order-status {
    display: flex;
    gap: 8px;
    align-items: center;
    min-width: 0;
}

.active-order-status strong {
    flex: 0 0 auto;
    padding: 5px 9px;
    color: #b8462c;
    font-size: .56rem;
    background: #fff0eb;
    border-radius: 99px;
}

.active-order-status span {
    overflow: hidden;
    color: var(--muted-strong);
    font-size: .57rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.active-order-side {
    display: grid;
    gap: 9px;
    justify-items: end;
}

.active-order-side time {
    display: inline-flex;
    gap: 5px;
    align-items: center;
    color: var(--muted);
    font-size: .52rem;
}

.active-order-action {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    min-height: 38px;
    padding: 8px 12px;
    color: #fff;
    font-size: .59rem;
    font-weight: 850;
    white-space: nowrap;
    background: var(--brand);
    border-radius: 11px;
    box-shadow: 0 8px 18px rgba(255, 92, 53, .2);
}

.account-alert {
    display: flex;
    gap: 10px;
    align-items: center;
    margin: 16px 0;
    padding: 13px 15px;
    color: #9b2f23;
    font-size: .68rem;
    font-weight: 650;
    background: #fff1ef;
    border: 1px solid #ffd4ce;
    border-radius: 15px;
}

.account-alert button {
    margin-right: auto;
    color: inherit;
    font: inherit;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.account-grid {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: 20px;
    align-items: start;
    margin-top: 20px;
}

.account-panel {
    padding: 25px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 26px;
    box-shadow: var(--shadow-sm);
}

.account-panel-heading {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 24px;
}

.account-panel-heading h2 {
    margin: 3px 0 2px;
    color: var(--ink);
    font-size: 1.25rem;
}

.account-panel-heading p {
    margin: 0;
    color: var(--muted);
    font-size: .64rem;
}

.panel-heading-icon {
    display: grid;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    place-items: center;
    color: var(--brand);
    background: var(--brand-soft);
    border-radius: 14px;
}

.profile-checklist {
    display: grid;
    gap: 14px;
    margin-bottom: 22px;
    padding: 16px;
    background: linear-gradient(135deg, #fff8f5, #fff);
    border: 1px solid #f2ded7;
    border-radius: 18px;
}

.profile-checklist-head {
    display: flex;
    gap: 14px;
    align-items: center;
    justify-content: space-between;
}

.profile-checklist-head > div {
    display: grid;
    gap: 3px;
}

.profile-checklist-head strong { color:var(--ink); font-size:.7rem; }
.profile-checklist-head span { color:var(--muted); font-size:.57rem; }
.profile-checklist-head > b { color:var(--brand); font-size:.82rem; }

.profile-checklist-items {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 7px;
}

.profile-checklist-items > span,
.profile-checklist-items > a {
    display: grid;
    gap: 6px;
    min-height: 66px;
    padding: 9px 5px;
    place-items: center;
    color: var(--muted);
    text-align: center;
    background: #fff;
    border: 1px solid #ece7e4;
    border-radius: 13px;
}

.profile-checklist-items i {
    display: grid;
    width: 25px;
    height: 25px;
    place-items: center;
    font-size: .58rem;
    background: #f3f2f2;
    border-radius: 9px;
}

.profile-checklist-items b { font-size:.54rem; }
.profile-checklist-items .complete { color:#08754d; border-color:#d7eee4; background:#f6fcf9; }
.profile-checklist-items .complete i { color:#fff; background:#18a76b; }
.profile-checklist-items .pending { color:#9a5a45; border-style:dashed; }
.profile-checklist-items .pending i { color:var(--brand); background:var(--brand-soft); }

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

.profile-form label,
.profile-form .profile-field,
.address-form label {
    display: grid;
    gap: 7px;
}

.profile-form label > span,
.profile-form .profile-field > label,
.address-form label > span,
.gender-field legend {
    color: var(--muted-strong);
    font-size: .65rem;
    font-weight: 750;
}

.profile-form label > span b,
.address-form label > span b {
    color: var(--brand);
}

.profile-form input,
.address-form input,
.address-form textarea {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    color: var(--ink);
    font-family: inherit;
    font-size: .73rem;
    background: #fafafa;
    border: 1px solid #e7e7eb;
    border-radius: 13px;
    outline: none;
    resize: vertical;
}

.profile-form input:focus,
.address-form input:focus,
.address-form textarea:focus {
    background: #fff;
    border-color: rgba(255, 92, 53, .55);
    box-shadow: 0 0 0 4px rgba(255, 92, 53, .08);
}

.profile-field > label small {
    margin-right: 4px;
    color: var(--brand);
    font-size: .5rem;
    font-weight: 750;
}

.persian-date-input-shell {
    position: relative;
    display: flex;
    align-items: center;
}

.persian-date-input-shell > i {
    position: absolute;
    z-index: 1;
    right: 14px;
    color: var(--brand);
    font-size: .78rem;
    pointer-events: none;
}

.persian-date-input-shell > input {
    direction: ltr;
    padding-right: 42px;
    padding-left: 64px;
    font-size: .8rem;
    font-weight: 750;
    letter-spacing: .04em;
    text-align: center;
}

.persian-date-input-shell > input::placeholder {
    color: #aaa4a1;
    opacity: 1;
}

.persian-date-input-shell > input[aria-invalid="true"] {
    background: #fff8f7;
    border-color: #e99a8e;
}

.persian-date-input-shell > span {
    position: absolute;
    left: 10px;
    padding: 4px 8px;
    color: #b64e35;
    font-size: .49rem;
    font-weight: 850;
    background: #fff0eb;
    border-radius: 8px;
    pointer-events: none;
}

.persian-date-hint {
    color: var(--muted);
    font-size: .49rem;
    line-height: 1.7;
}

.persian-date-hint.error {
    color: #b83327;
    font-weight: 700;
}

.readonly-field {
    display: flex;
    gap: 8px;
    align-items: center;
    min-height: 48px;
    padding: 11px 13px;
    color: var(--muted-strong);
    background: #f5f6f7;
    border: 1px solid #e8e8eb;
    border-radius: 13px;
}

.readonly-field > i {
    color: #18a76b;
}

.readonly-field strong {
    font-size: .7rem;
    direction: ltr;
}

.readonly-field small {
    margin-right: auto;
    color: #18a76b;
    font-size: .52rem;
    font-weight: 800;
}

.gender-field {
    padding: 0;
    border: 0;
}

.gender-field legend {
    margin-bottom: 8px;
}

.gender-field > div {
    display: flex;
    gap: 8px;
}

.gender-field button {
    min-height: 41px;
    padding: 8px 13px;
    color: var(--muted-strong);
    font-family: inherit;
    font-size: .62rem;
    font-weight: 700;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 11px;
    cursor: pointer;
}

.gender-field button.selected {
    color: var(--brand);
    background: var(--brand-soft);
    border-color: rgba(255, 92, 53, .35);
}

.profile-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}

.primary-account-action,
.secondary-account-action,
.signout-action,
.add-address-button {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    min-height: 45px;
    padding: 10px 17px;
    font-family: inherit;
    font-size: .66rem;
    font-weight: 800;
    border-radius: 13px;
    cursor: pointer;
}

.primary-account-action {
    color: #fff;
    background: var(--brand);
    border: 1px solid var(--brand);
    box-shadow: 0 10px 22px rgba(255, 92, 53, .18);
}

.primary-account-action:disabled {
    opacity: .65;
    cursor: wait;
}

.secondary-account-action {
    color: var(--muted-strong);
    background: #fff;
    border: 1px solid var(--line);
}

.signout-action {
    margin-right: auto;
    color: #a4473b;
    background: transparent;
    border: 0;
}

.account-inline-message {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 14px;
    padding: 11px 13px;
    font-size: .64rem;
    font-weight: 700;
    border-radius: 12px;
}

.account-inline-message.success {
    color: #08764a;
    background: #edfff6;
    border: 1px solid #c7f1dc;
}

.account-inline-message.error {
    color: #a23d31;
    background: #fff2f0;
    border: 1px solid #ffd5cf;
}

.add-address-button {
    flex: 0 0 auto;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--line);
}

.add-address-button i {
    color: var(--brand);
}

.address-list,
.address-list-loading {
    display: grid;
    gap: 12px;
}

.address-list-loading .skeleton {
    min-height: 190px;
    border-radius: 20px;
}

.saved-address-card {
    position: relative;
    padding: 17px;
    overflow: hidden;
    background: #fcfcfd;
    border: 1px solid #e8e8ec;
    border-radius: 19px;
    transition: 150ms ease;
}

.saved-address-card:hover {
    background: #fff;
    border-color: #dcdce2;
    box-shadow: 0 12px 28px rgba(27, 27, 31, .06);
}

.saved-address-card.is-default {
    background: linear-gradient(120deg, #fff9f6, #fff);
    border-color: rgba(255, 92, 53, .3);
}

.saved-address-card.is-default::before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 4px;
    content: "";
    background: var(--brand);
}

.saved-address-top {
    display: flex;
    gap: 11px;
    align-items: center;
}

.saved-address-icon {
    display: grid;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    place-items: center;
    color: var(--brand);
    background: var(--brand-soft);
    border-radius: 13px;
}

.saved-address-top > div {
    display: flex;
    gap: 7px;
    align-items: center;
    min-width: 0;
}

.saved-address-top h3 {
    margin: 0;
    overflow: hidden;
    color: var(--ink);
    font-size: .82rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.default-address-badge {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    padding: 4px 7px;
    color: #cc4e2d;
    font-size: .49rem;
    font-weight: 850;
    background: #ffe9e1;
    border-radius: 999px;
    white-space: nowrap;
}

.address-edit-button,
.delete-address-button {
    display: grid;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    margin-right: auto;
    place-items: center;
    color: var(--muted);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    cursor: pointer;
}

.saved-address-text {
    margin: 14px 0 6px;
    color: var(--ink-soft);
    font-size: .7rem;
    line-height: 1.95;
}

.saved-address-details {
    margin: 0 0 11px;
    color: var(--muted);
    font-size: .58rem;
}

.saved-address-recipient {
    display: flex;
    flex-wrap: wrap;
    gap: 13px;
    padding-top: 11px;
    color: var(--muted-strong);
    font-size: .58rem;
    border-top: 1px dashed #dedee3;
}

.saved-address-recipient span {
    display: inline-flex;
    gap: 6px;
    align-items: center;
}

.saved-address-recipient i {
    color: var(--brand);
}

.saved-address-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 12px;
}

.saved-address-actions > button {
    padding: 7px 9px;
    color: var(--muted-strong);
    font-family: inherit;
    font-size: .56rem;
    font-weight: 700;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.saved-address-actions > span:not(.delete-confirm) {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    color: #d75633;
    font-size: .54rem;
    font-weight: 750;
}

.saved-address-actions .delete-address-button {
    margin-right: auto;
    padding: 0;
    color: #a85a51;
}

.delete-confirm {
    display: inline-flex;
    gap: 5px;
    margin-right: auto;
}

.delete-confirm button {
    padding: 6px 8px;
    color: var(--muted-strong);
    font-family: inherit;
    font-size: .52rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    cursor: pointer;
}

.delete-confirm button.danger {
    color: #fff;
    background: #c84c40;
    border-color: #c84c40;
}

.address-empty {
    display: grid;
    min-height: 330px;
    padding: 30px;
    place-items: center;
    align-content: center;
    text-align: center;
    background: #fafafb;
    border: 1px dashed #dcdce2;
    border-radius: 21px;
}

.address-empty > span {
    display: grid;
    width: 68px;
    height: 68px;
    margin-bottom: 13px;
    place-items: center;
    color: var(--brand);
    font-size: 1.35rem;
    background: var(--brand-soft);
    border-radius: 22px;
}

.address-empty h3 {
    margin: 0;
    font-size: .9rem;
}

.address-empty p {
    margin: 6px 0 18px;
    color: var(--muted);
    font-size: .64rem;
}

.address-empty button {
    padding: 10px 15px;
    color: #fff;
    font-family: inherit;
    font-size: .62rem;
    font-weight: 800;
    background: var(--ink);
    border: 0;
    border-radius: 11px;
    cursor: pointer;
}

.address-editor-backdrop {
    position: fixed;
    z-index: 1200;
    inset: 0;
    display: grid;
    padding: 18px;
    place-items: center;
    background: rgba(18, 18, 22, .55);
    backdrop-filter: blur(7px);
}

.address-editor {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    width: min(680px, 100%);
    max-height: min(90vh, 820px);
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 27px;
    box-shadow: 0 30px 90px rgba(20, 20, 25, .25);
}

.address-editor-heading {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    justify-content: space-between;
    padding: 22px 24px 17px;
    border-bottom: 1px solid var(--line);
}

.address-editor-heading h2 {
    margin: 3px 0 0;
    font-size: 1.1rem;
}

.address-editor-heading > button {
    display: grid;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    place-items: center;
    color: var(--ink);
    background: #f4f4f6;
    border: 0;
    border-radius: 12px;
    cursor: pointer;
}

.address-editor-body {
    padding: 20px 24px;
    overflow: auto;
}

.address-title-presets {
    display: flex;
    gap: 8px;
    margin-bottom: 17px;
}

.address-title-presets button {
    display: inline-flex;
    gap: 7px;
    align-items: center;
    min-height: 39px;
    padding: 8px 13px;
    color: var(--muted-strong);
    font-family: inherit;
    font-size: .6rem;
    font-weight: 750;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 11px;
    cursor: pointer;
}

.address-title-presets button.selected {
    color: var(--brand);
    background: var(--brand-soft);
    border-color: rgba(255, 92, 53, .35);
}

.default-address-toggle {
    display: flex !important;
    gap: 10px;
    align-items: center;
    min-height: 64px;
    padding: 11px 13px;
    background: #fff9f6;
    border: 1px solid #ffe0d5;
    border-radius: 14px;
    cursor: pointer;
}

.default-address-toggle > input {
    width: 18px;
    min-height: 18px;
    padding: 0;
    accent-color: var(--brand);
}

.default-address-toggle > span {
    display: grid;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    place-items: center;
    color: var(--brand);
    background: #fff;
    border-radius: 10px;
}

.default-address-toggle > div {
    display: grid;
    gap: 2px;
}

.default-address-toggle strong {
    font-size: .65rem;
}

.default-address-toggle small {
    color: var(--muted);
    font-size: .54rem;
}

.address-editor-footer {
    display: flex;
    gap: 9px;
    justify-content: flex-end;
    padding: 15px 24px;
    background: #fafafb;
    border-top: 1px solid var(--line);
}

/* Saved addresses inside checkout */
.checkout-saved-addresses {
    margin-bottom: 19px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
}

.checkout-address-picker-heading {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.checkout-address-picker-heading strong {
    font-size: .67rem;
}

.checkout-address-picker-heading a {
    color: var(--brand);
    font-size: .57rem;
    font-weight: 750;
}

.checkout-address-picker {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.checkout-address-option {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    min-height: 78px;
    padding: 11px;
    text-align: right;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 15px;
    cursor: pointer;
}

.checkout-address-icon {
    display: grid;
    width: 37px;
    height: 37px;
    place-items: center;
    color: var(--ink);
    background: #f4f4f6;
    border-radius: 11px;
}

.checkout-address-icon.new {
    color: var(--brand);
    background: var(--brand-soft);
}

.checkout-address-option > span:nth-child(2) {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.checkout-address-option strong {
    display: flex;
    gap: 5px;
    align-items: center;
    font-family: inherit;
    font-size: .65rem;
}

.checkout-address-option strong small {
    padding: 2px 5px;
    color: var(--brand);
    font-size: .45rem;
    background: var(--brand-soft);
    border-radius: 999px;
}

.checkout-address-option em {
    overflow: hidden;
    color: var(--muted);
    font-family: inherit;
    font-size: .53rem;
    font-style: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.checkout-address-option > i {
    color: #d8d8dd;
}

.checkout-address-option.selected {
    background: #fff9f6;
    border-color: rgba(255, 92, 53, .4);
    box-shadow: 0 7px 20px rgba(255, 92, 53, .07);
}

.checkout-address-option.selected .checkout-address-icon {
    color: #fff;
    background: var(--brand);
}

.checkout-address-option.selected > i {
    color: var(--brand);
}

.checkout-address-edit-hint {
    margin: 9px 0 0;
    color: var(--muted);
    font-size: .54rem;
}

.checkout-address-edit-hint i {
    margin-left: 4px;
    color: var(--brand);
}

.checkout-no-saved-address {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 16px;
    padding: 12px;
    color: #8a542f;
    background: #fff9f2;
    border: 1px solid #ffe5cf;
    border-radius: 14px;
}

.checkout-no-saved-address > i {
    display: grid;
    flex: 0 0 35px;
    width: 35px;
    height: 35px;
    place-items: center;
    color: var(--brand);
    background: #fff;
    border-radius: 10px;
}

.checkout-no-saved-address > div {
    display: grid;
    gap: 2px;
}

.checkout-no-saved-address strong {
    font-size: .64rem;
}

.checkout-no-saved-address span {
    font-size: .54rem;
}

.checkout-address-loading {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    margin-bottom: 16px;
}

.checkout-address-loading .skeleton {
    min-height: 78px;
    border-radius: 15px;
}

.checkout-save-address {
    display: grid;
    gap: 9px;
    margin-top: 15px;
}

.checkout-save-address > label {
    display: flex;
    gap: 10px;
    align-items: center;
    cursor: pointer;
}

.checkout-save-address > label > input {
    width: 17px;
    height: 17px;
    accent-color: var(--brand);
}

.checkout-save-address > label > span {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    color: var(--brand);
    background: var(--brand-soft);
    border-radius: 10px;
}

.checkout-save-address > label > div {
    display: grid;
    gap: 2px;
}

.checkout-save-address strong {
    font-size: .63rem;
}

.checkout-save-address small {
    color: var(--muted);
    font-size: .52rem;
}

.checkout-save-address > input {
    min-height: 44px;
    padding: 10px 13px;
    font-family: inherit;
    font-size: .67rem;
    background: #fafafa;
    border: 1px solid var(--line);
    border-radius: 12px;
    outline: none;
}

@media (max-width: 900px) {
    .account-login-shell,
    .account-grid {
        grid-template-columns: 1fr;
    }

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

    .account-login-shell {
        min-height: auto;
    }

    .checkout-shell,
    .tracking-content-grid {
        grid-template-columns: 1fr;
    }

    .checkout-review {
        position: static;
    }

    .payment-action-card {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .payment-action-card .payment-button {
        grid-column: 1 / -1;
    }
}

@media (max-width: 720px) {
    .account-page {
        width: min(calc(100% - 20px), var(--content-width));
        padding: 18px 0 105px;
    }

    .account-loading {
        grid-template-columns: 1fr;
    }

    .account-login-shell {
        gap: 24px;
        padding: 24px 16px;
        border-radius: 24px;
    }

    .account-login-copy h1 {
        font-size: 1.85rem;
    }

    .account-login-copy > p {
        font-size: .7rem;
    }

    .account-benefits {
        margin-top: 18px;
    }

    .account-benefits span {
        padding: 8px 10px;
        font-size: .56rem;
    }

    .account-hero {
        grid-template-columns: 1fr;
        gap: 18px;
        min-height: 0;
        padding: 20px 17px;
        border-radius: 23px;
    }

    .account-avatar {
        width: 60px;
        height: 60px;
        flex-basis: 60px;
        font-size: .95rem;
        border-radius: 19px;
    }

    .account-identity h1 {
        font-size: 1.35rem;
    }

    .account-completion {
        max-width: none;
    }

    .completion-ring {
        width: 56px;
        height: 56px;
        flex-basis: 56px;
    }

    .account-quick-links {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
        padding-top: 15px;
    }

    .account-quick-links a {
        display: grid;
        gap: 5px;
        justify-items: center;
        padding: 9px 5px;
        font-size: .54rem;
        text-align: center;
    }

    .account-dashboard-hero {
        gap: 15px;
        padding: 17px;
    }

    .account-hero-copy {
        gap: 17px;
        padding: 2px;
    }

    .account-hero-message p {
        font-size: .64rem;
    }

    .profile-reward-card {
        gap: 12px;
        padding: 17px;
        border-radius: 19px;
    }

    .profile-reward-top {
        gap: 9px;
    }

    .profile-reward-icon {
        width: 42px;
        height: 42px;
        border-radius: 13px;
    }

    .profile-reward-top > div:nth-child(2) strong {
        font-size: .72rem;
    }

    .profile-reward-card > p {
        min-height: 0;
        font-size: .57rem;
    }

    .account-dashboard-hero .account-quick-links {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .account-overview {
        gap: 8px;
        margin-top: 12px;
    }

    .account-overview-card {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 8px;
        min-height: 92px;
        padding: 11px;
        border-radius: 17px;
    }

    .account-overview-card > i {
        display: none;
    }

    .overview-icon {
        width: 37px;
        height: 37px;
        border-radius: 12px;
    }

    .account-overview-card strong {
        font-size: .95rem;
    }

    .account-overview-card > div > span {
        font-size: .49rem;
    }

    .account-active-order {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 11px;
        margin-top: 10px;
        padding: 14px 15px;
        border-radius: 18px;
    }

    .active-order-pulse {
        width: 44px;
        height: 44px;
        border-radius: 13px;
    }

    .active-order-kicker {
        gap: 6px;
    }

    .active-order-kicker small {
        padding-right: 6px;
        font-size: .48rem;
    }

    .active-order-title {
        align-items: flex-start;
        flex-direction: column;
        gap: 2px;
    }

    .active-order-title strong {
        max-width: 100%;
        font-size: .72rem;
    }

    .active-order-status {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }

    .active-order-status span {
        max-width: 100%;
        font-size: .53rem;
        white-space: normal;
    }

    .active-order-side {
        grid-column: 1 / -1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-top: 10px;
        border-top: 1px solid #eee4df;
    }

    .active-order-action {
        min-height: 35px;
        padding: 7px 10px;
    }

    .account-panel {
        padding: 17px;
        border-radius: 21px;
    }

    .account-panel-heading {
        margin-bottom: 18px;
    }

    .account-panel-heading h2 {
        font-size: 1.05rem;
    }

    .panel-heading-icon {
        display: none;
    }

    .profile-checklist {
        margin-right: -3px;
        margin-left: -3px;
        padding: 13px;
    }

    .profile-checklist-head span {
        font-size: .53rem;
    }

    .profile-checklist-items {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 4px;
        overflow: visible;
    }

    .profile-checklist-items > span,
    .profile-checklist-items > a {
        min-width: 0;
        min-height: 57px;
        padding: 7px 2px;
        border-radius: 10px;
    }

    .profile-checklist-items i {
        width: 22px;
        height: 22px;
        font-size: .51rem;
        border-radius: 7px;
    }

    .profile-checklist-items b {
        max-width: 100%;
        overflow: hidden;
        font-size: .46rem;
        text-overflow: ellipsis;
    }

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

    .profile-form .field-wide,
    .address-form .field-wide {
        grid-column: auto;
    }

    .gender-field > div {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gender-field button:last-child {
        grid-column: 1 / -1;
    }

    .profile-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .signout-action {
        margin-right: 0;
    }

    .add-address-button {
        min-height: 39px;
        padding: 8px 11px;
        font-size: .56rem;
    }

    .saved-address-card {
        padding: 14px;
    }

    .saved-address-text {
        font-size: .65rem;
    }

    .saved-address-actions {
        align-items: flex-start;
    }

    .saved-address-actions > button:first-child {
        text-align: right;
    }

    .address-editor-backdrop {
        align-items: end;
        padding: 0;
    }

    .address-editor {
        width: 100%;
        max-height: 92dvh;
        border-radius: 24px 24px 0 0;
    }

    .address-editor-heading,
    .address-editor-body {
        padding-right: 16px;
        padding-left: 16px;
    }

    .address-editor-footer {
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    }

    .address-editor-footer > button {
        flex: 1;
    }

    .checkout-address-picker,
    .checkout-address-loading {
        display: flex;
        gap: 8px;
        padding: 2px 1px 8px;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .checkout-address-picker::-webkit-scrollbar {
        display: none;
    }

    .checkout-address-option,
    .checkout-address-loading .skeleton {
        flex: 0 0 min(84vw, 290px);
        scroll-snap-align: start;
    }

    .checkout-address-picker-heading a {
        white-space: nowrap;
    }

    .checkout-page {
        padding-bottom: 105px;
    }

    .checkout-heading {
        align-items: flex-start;
    }

    .checkout-heading p {
        font-size: .65rem;
    }

    .checkout-card,
    .customer-login-card,
    .checkout-review {
        border-radius: 20px;
    }

    .checkout-card {
        padding: 17px;
    }

    .checkout-card-title {
        margin-bottom: 15px;
    }

    .delivery-options {
        grid-template-columns: 1fr;
    }

    .delivery-option {
        min-height: 73px;
        padding: 12px;
    }

    .checkout-fields {
        grid-template-columns: 1fr;
    }

    .field-wide {
        grid-column: auto;
    }

    .checkout-review {
        padding: 17px;
    }

    .customer-login-card {
        grid-template-columns: 1fr;
        padding: 19px;
    }

    .login-card-icon {
        grid-row: auto;
        margin-bottom: 14px;
    }

    .login-inline-form,
    .customer-login-card > .inline-error {
        grid-column: 1;
    }

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

    .floating-cart-bar {
        bottom: calc(82px + env(safe-area-inset-bottom));
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 9px;
        width: calc(100% - 24px);
        min-height: 62px;
        padding: 8px;
        border-radius: 20px;
    }

    .floating-cart-icon {
        width: 43px;
        height: 43px;
        border-radius: 14px;
    }

    .floating-cart-action {
        min-height: 40px;
        padding: 8px 11px;
        border-radius: 12px;
    }

    .orders-dashboard,
    .order-tracking-page {
        width: min(calc(100% - 20px), var(--content-width));
        padding: 25px 0 110px;
    }

    .dashboard-hero {
        display: grid;
        gap: 15px;
        margin-bottom: 22px;
    }

    .dashboard-live-actions {
        flex-wrap: wrap;
    }

    .dashboard-hero h1 {
        font-size: 2rem;
    }

    .dashboard-hero p {
        max-width: 330px;
        font-size: .65rem;
    }

    .active-orders-grid,
    .orders-card-skeletons {
        grid-template-columns: 1fr;
    }

    .order-dashboard-card.active {
        padding: 16px;
    }

    .order-dashboard-card.past {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .past-order-price {
        display: none;
    }

    .tracking-hero {
        padding: 16px;
        border-radius: 23px;
    }

    .tracking-status-content {
        display: grid;
        gap: 11px;
        margin: 24px 0;
    }

    .tracking-status-icon {
        width: 57px;
        height: 57px;
        border-radius: 19px;
    }

    .tracking-status-content h1 {
        font-size: 1.8rem;
    }

    .tracking-status-content p {
        font-size: .65rem;
    }

    .tracking-order-meta {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .preparation-promise-card {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 11px;
        padding: 14px;
        border-radius: 18px;
    }

    .preparation-promise-card .preparation-promise-live {
        grid-column: 1 / -1;
        justify-self: start;
    }

    .order-progress-card,
    .order-detail-card,
    .order-action-card {
        padding: 17px;
        border-radius: 20px;
    }

    .tracking-notification-callout {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: start;
        padding: 14px;
    }

    .tracking-notification-callout button {
        grid-column: 1 / -1;
        width: 100%;
    }

    .progress-heading {
        align-items: start;
    }

    .progress-heading small {
        text-align: left;
    }

    .order-progress-track {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        overflow: visible;
        padding: 2px 0;
    }

    .order-progress-track::before {
        display: none;
    }

    .progress-step {
        min-width: 0;
        gap: 6px;
        padding: 10px 4px 9px;
        background: #f8f8fa;
        border: 1px solid #ececf0;
        border-radius: 14px;
    }

    .progress-step.done {
        background: var(--success-soft);
        border-color: #d6eee4;
    }

    .progress-step.current {
        background: var(--brand-soft);
        border-color: #ffd6cb;
    }

    .progress-step > span {
        width: 33px;
        height: 33px;
    }

    .progress-step strong {
        overflow: hidden;
        width: 100%;
        font-size: .52rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .order-action-card,
    .payment-action-card {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: start;
    }

    .action-card-buttons,
    .payment-action-card .payment-button {
        grid-column: 1 / -1;
    }

    .action-card-buttons {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .payment-price {
        grid-column: 2;
        text-align: right;
    }

    .tracking-items-list article {
        grid-template-columns: 50px minmax(0, 1fr) auto;
    }

    .tracking-item-image {
        width: 50px;
        height: 48px;
    }

    .tracking-items-list article > span {
        display: none;
    }

    .tracking-items-list article > strong {
        grid-column: 2 / -1;
        color: var(--muted-strong);
    }

    .detail-card-heading h2,
    .progress-heading h2,
    .orders-section-heading h2 {
        font-size: 1.08rem;
    }

    .tracking-contact-card {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 18px;
        border-radius: 20px;
    }

    .tracking-contact-actions {
        grid-template-columns: 1fr;
    }

    .notification-feedback {
        margin-top: -8px;
    }
}

/* Categorized restaurant menu */
.categorized-menu {
    min-width: 0;
}

.categorized-menu .menu-heading-panel {
    align-items: center;
    margin-bottom: 16px;
    padding: 0 3px;
}

.menu-overview {
    display: flex;
    flex: 0 0 auto;
    gap: 11px;
    align-items: center;
    padding: 9px 13px;
    color: var(--muted);
    font-size: 0.61rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 13px;
}

.menu-overview span {
    display: inline-flex;
    gap: 4px;
    align-items: center;
}

.menu-overview strong {
    color: var(--ink);
    font-size: 0.72rem;
}

.menu-overview > i {
    width: 1px;
    height: 17px;
    background: var(--line);
}

.category-jump-nav {
    position: sticky;
    top: 78px;
    z-index: 16;
    display: flex;
    gap: 8px;
    margin-bottom: 30px;
    padding: 10px 2px;
    overflow-x: auto;
    background: rgba(251, 251, 252, 0.93);
    scrollbar-width: none;
    backdrop-filter: blur(16px);
}

.category-jump-nav::-webkit-scrollbar {
    display: none;
}

.category-jump-nav button {
    display: inline-flex;
    flex: 0 0 auto;
    gap: 7px;
    align-items: center;
    min-height: 42px;
    padding: 7px 13px;
    color: var(--muted-strong);
    font-family: inherit;
    font-size: 0.65rem;
    font-weight: 720;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(24, 24, 27, 0.035);
    transition: color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.category-jump-nav button:hover {
    color: var(--brand-strong);
    border-color: #ffc8b8;
    transform: translateY(-2px);
}

.category-jump-nav img {
    width: 25px;
    height: 25px;
    object-fit: contain;
}

.category-jump-nav i {
    display: grid;
    width: 25px;
    height: 25px;
    place-items: center;
    color: var(--brand);
    font-size: 0.66rem;
    background: var(--brand-soft);
    border-radius: 8px;
}

.menu-category-stack {
    display: grid;
    gap: 40px;
    min-width: 0;
}

.menu-category-section {
    min-width: 0;
    scroll-margin-top: 150px;
}

.menu-category-heading {
    display: flex;
    gap: 18px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.category-heading-main {
    display: flex;
    gap: 11px;
    align-items: center;
    min-width: 0;
}

.category-heading-icon {
    display: grid;
    flex: 0 0 auto;
    width: 43px;
    height: 43px;
    overflow: hidden;
    place-items: center;
    color: var(--brand);
    background: linear-gradient(145deg, #fff, var(--brand-soft));
    border: 1px solid #f3ddd5;
    border-radius: 14px;
    box-shadow: 0 9px 22px rgba(85, 52, 37, 0.07);
}

.category-heading-icon img {
    width: 31px;
    height: 31px;
    object-fit: contain;
}

.category-heading-main h3 {
    margin: 0;
    color: var(--ink);
    font-size: 1.15rem;
    font-weight: 900;
    letter-spacing: -0.025em;
}

.category-heading-main p {
    margin: 2px 0 0;
    color: var(--muted);
    font-size: 0.58rem;
}

.category-product-count {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 0.57rem;
}

.menu-category-swiper.swiper {
    display: block;
    min-width: 0;
    overflow: hidden;
    margin: 0;
    padding: 3px 2px 31px;
}

.menu-category-swiper .swiper-wrapper {
    display: flex;
    align-items: stretch;
}

.menu-category-swiper .swiper-slide {
    height: auto;
}

.menu-category-swiper .slider-control {
    width: 38px;
    height: 38px;
    border-radius: 12px;
}

.menu-category-swiper .swiper-pagination {
    bottom: 3px;
}

.menu-section .menu-product-card-compact {
    display: grid;
    grid-template-columns: 178px minmax(0, 1fr);
    height: 154px;
    min-height: 154px;
    border-radius: 19px;
    box-shadow: 0 8px 25px rgba(24, 24, 27, 0.045);
}

.menu-section .menu-product-card-compact:hover {
    border-color: #ffd3c5;
    box-shadow: 0 17px 38px rgba(62, 41, 31, 0.09);
    transform: translateY(-3px);
}

.menu-section .menu-product-card-compact .menu-product-media {
    width: 178px;
    height: 100%;
    min-height: 154px;
    aspect-ratio: auto;
}

.menu-section .menu-product-card-compact .menu-product-copy {
    flex: 1;
    padding: 11px 14px 10px;
}

.compact-product-meta {
    display: flex;
    gap: 7px;
    align-items: center;
    color: var(--muted);
    font-size: 0.57rem;
}

.compact-product-meta span {
    display: inline-flex;
    gap: 4px;
    align-items: center;
}

.compact-product-meta span:first-child i {
    color: #f2a100;
}

.compact-product-meta span:last-child i {
    color: var(--brand);
}

.compact-product-meta > i {
    width: 3px;
    height: 3px;
    background: #c8c8ce;
    border-radius: 50%;
}

.menu-section .menu-product-card-compact h4 {
    margin: 6px 0 3px;
    overflow: hidden;
    color: var(--ink);
    font-size: 0.88rem;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.compact-product-ingredients,
.compact-product-description {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    line-height: 1.65;
    -webkit-box-orient: vertical;
}

.compact-product-ingredients {
    display: flex;
    gap: 5px;
    align-items: flex-start;
    color: var(--muted-strong);
    font-size: 0.68rem;
    font-weight: 620;
}

.compact-product-ingredients i {
    flex: 0 0 auto;
    margin-left: 3px;
    margin-top: 0.24em;
    color: var(--brand);
    font-size: 0.57rem;
}

.compact-product-ingredients span {
    display: -webkit-box;
    min-width: 0;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.compact-product-description {
    margin-top: 2px;
    color: var(--muted);
    font-size: 0.64rem;
    -webkit-line-clamp: 1;
}

.compact-product-footer {
    display: flex;
    gap: 8px;
    align-items: end;
    justify-content: space-between;
    min-width: 0;
    margin-top: auto;
    padding-top: 7px;
    border-top: 1px dashed var(--line);
}

.menu-product-card-compact .menu-price strong {
    font-size: 0.79rem;
}

.menu-product-card-compact .menu-price del {
    font-size: 0.5rem;
}

.compact-select-button {
    display: grid;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    place-items: center;
    color: #fff;
    font-size: 0.62rem;
    text-decoration: none;
    background: var(--ink);
    border-radius: 11px;
    transition: background 160ms ease, transform 160ms ease;
}

.compact-select-button:hover {
    background: var(--brand);
    transform: rotate(4deg);
}

.menu-product-card-compact .menu-discount-badge,
.menu-product-card-compact .unavailable-badge {
    top: 9px;
    right: 9px;
    padding: 5px 7px;
    font-size: 0.5rem;
}

.menu-product-card-compact .unavailable-badge {
    right: auto;
    left: 9px;
}

/* Simplified product hierarchy */
.product-detail-surface .product-detail-grid {
    grid-template-columns: minmax(360px, 0.92fr) minmax(0, 1.08fr);
    gap: 34px;
}

.product-detail-surface .product-detail-media {
    height: 510px;
    min-height: 510px;
}

.product-detail-surface .product-detail-media > img {
    height: 100%;
    min-height: 0;
}

.product-detail-surface .product-detail-copy {
    align-self: center;
    padding-top: 22px;
}

.product-detail-surface .product-detail-copy h1 {
    margin: 22px 0 10px;
    font-size: clamp(2.15rem, 3.7vw, 3rem);
}

.product-essential-meta {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    color: var(--muted);
    font-size: 0.61rem;
}

.product-essential-meta a,
.product-essential-meta > span {
    display: inline-flex;
    gap: 5px;
    align-items: center;
    color: inherit;
    text-decoration: none;
}

.product-essential-meta a {
    color: #8f6500;
}

.product-essential-meta a > i {
    color: #f2a100;
}

.product-essential-meta a span {
    color: var(--muted);
}

.product-essential-meta > span i {
    color: var(--brand);
}

.product-essential-meta > i {
    width: 3px;
    height: 3px;
    background: #c6c6cc;
    border-radius: 50%;
}

.product-description-simple {
    margin: 23px 0 0;
    color: var(--muted-strong);
    font-size: 0.76rem;
    line-height: 2;
}

.product-ingredients-simple {
    margin: 10px 0 2px;
    color: var(--muted);
    font-size: 0.61rem;
    line-height: 1.9;
}

.product-ingredients-simple > i {
    margin-left: 5px;
    color: var(--success);
}

.product-ingredients-simple strong {
    color: var(--muted-strong);
}

.product-detail-surface .option-group {
    margin-top: 20px;
    padding-top: 19px;
}

.product-detail-surface .product-purchase-bar {
    margin-top: 23px;
    padding-top: 17px;
    border-top: 1px solid var(--line);
}

@media (max-width: 920px) {
    .product-detail-surface .product-detail-grid {
        grid-template-columns: 1fr;
    }

    .product-detail-surface .product-detail-media,
    .product-detail-surface .product-detail-media > img {
        height: auto;
        min-height: 0;
    }
}

@media (max-width: 720px) {
    .categorized-menu .menu-heading-panel {
        display: flex;
        gap: 12px;
        align-items: end;
    }

    .categorized-menu .menu-heading-copy h2 {
        font-size: 1.32rem;
    }

    .categorized-menu .menu-heading-copy p {
        max-width: 220px;
    }

    .menu-overview {
        display: none;
    }

    .category-jump-nav {
        top: 67px;
        margin-right: -12px;
        margin-left: -12px;
        margin-bottom: 23px;
        padding: 8px 12px;
    }

    .category-jump-nav button {
        min-height: 39px;
        padding: 6px 11px;
        font-size: 0.59rem;
    }

    .category-jump-nav img,
    .category-jump-nav i {
        width: 23px;
        height: 23px;
    }

    .menu-category-stack {
        gap: 31px;
    }

    .menu-category-section {
        scroll-margin-top: 130px;
    }

    .menu-category-heading {
        margin-bottom: 11px;
    }

    .category-heading-icon {
        width: 39px;
        height: 39px;
        border-radius: 13px;
    }

    .category-heading-icon img {
        width: 28px;
        height: 28px;
    }

    .category-heading-main h3 {
        font-size: 0.96rem;
    }

    .category-heading-main p {
        font-size: 0.52rem;
    }

    .category-product-count {
        font-size: 0.51rem;
    }

    .menu-category-swiper.swiper {
        width: calc(100% + 12px);
        margin-left: -12px;
        padding-left: 12px;
    }

    .menu-category-swiper .slider-control {
        display: none;
    }

    .menu-section .menu-product-card-compact {
        display: grid;
        grid-template-columns: 132px minmax(0, 1fr);
        height: 146px;
        min-height: 146px;
        border-radius: 18px;
    }

    .menu-section .menu-product-card-compact .menu-product-media {
        width: 132px;
        height: 100%;
        min-height: 146px;
        aspect-ratio: auto;
    }

    .menu-section .menu-product-card-compact .menu-product-copy {
        padding: 10px 11px 9px;
    }

    .menu-section .menu-product-card-compact h4 {
        font-size: 0.82rem;
    }

    .compact-product-ingredients {
        font-size: 0.68rem;
    }

    .compact-product-description {
        font-size: 0.65rem;
    }

    .compact-product-footer {
        padding-top: 6px;
    }

    .product-detail-surface .product-detail-copy h1 {
        margin: 17px 0 9px;
        font-size: clamp(1.75rem, 8.5vw, 2.25rem);
    }

    .product-essential-meta {
        gap: 7px;
        font-size: 0.55rem;
    }

    .product-description-simple {
        margin-top: 17px;
        font-size: 0.69rem;
    }

    .product-detail-surface .option-group {
        margin-top: 16px;
        padding-top: 16px;
    }

    .product-detail-surface .product-purchase-bar {
        margin-top: 18px;
        padding-top: 7px;
        border-top: 0;
    }
}

@media (max-width: 390px) {
    .product-essential-meta > i:nth-of-type(2),
    .product-essential-meta > span:last-child {
        display: none;
    }

    .category-product-count {
        display: none;
    }
}

/* Product detail — compact editorial layout */
.product-detail-surface {
    padding: clamp(20px, 2.4vw, 34px);
    background:
        radial-gradient(circle at 100% 0, rgba(255, 92, 53, 0.07), transparent 24rem),
        #fff;
    border: 1px solid #e9e8ec;
    border-radius: 32px;
    box-shadow: 0 22px 70px rgba(25, 25, 29, 0.06);
}

.product-detail-surface .product-detail-grid {
    grid-template-columns: minmax(360px, 0.88fr) minmax(0, 1.12fr);
    gap: clamp(28px, 4vw, 58px);
    align-items: center;
}

.product-detail-surface .product-detail-media {
    position: relative;
    top: auto;
    height: 430px;
    min-height: 430px;
    padding: 24px;
    overflow: visible;
    font-size: 0.72rem;
    background:
        radial-gradient(circle at 18% 18%, rgba(255, 157, 128, 0.18), transparent 30%),
        linear-gradient(145deg, #f8f7f8, #f2f1f3);
    border: 1px solid #e7e5e8;
    border-radius: 28px;
}

.product-image-stage {
    position: relative;
    display: grid;
    width: 100%;
    height: 100%;
    overflow: hidden;
    place-items: center;
    background:
        radial-gradient(circle at 50% 45%, #fff 0, #fcfbfc 50%, #f1eff1 100%);
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: 22px;
}

.product-image-stage::before,
.product-image-stage::after {
    position: absolute;
    width: 190px;
    height: 190px;
    content: "";
    border: 1px solid rgba(255, 92, 53, 0.1);
    border-radius: 50%;
}

.product-image-stage::before {
    top: -85px;
    left: -65px;
}

.product-image-stage::after {
    right: -105px;
    bottom: -120px;
    width: 240px;
    height: 240px;
}

.product-detail-surface .product-image-stage > img {
    position: relative;
    z-index: 1;
    width: auto;
    height: auto;
    min-width: 0;
    min-height: 0;
    max-width: calc(100% - 34px);
    max-height: calc(100% - 34px);
    object-fit: contain;
    border-radius: 20px;
    box-shadow: 0 18px 42px rgba(27, 25, 25, 0.16);
}

.product-image-stage .product-image-placeholder {
    position: relative;
    z-index: 1;
    display: grid;
    width: 128px;
    height: 128px;
    place-items: center;
    color: #c9c7cc;
    font-size: 2.7rem;
    background: #fff;
    border-radius: 36px;
    box-shadow: 0 18px 42px rgba(27, 25, 25, 0.08);
}

.product-detail-surface .product-media-back {
    top: 38px;
    right: 38px;
    left: auto;
    z-index: 4;
    font-size: 0.72rem;
    color: var(--ink);
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(23, 23, 27, 0.08);
    box-shadow: 0 9px 24px rgba(23, 23, 27, 0.1);
    backdrop-filter: blur(12px);
}

.product-detail-surface .product-media-badges {
    right: 38px;
    bottom: 38px;
    left: 38px;
    z-index: 4;
}

.product-detail-surface .availability-badge,
.product-detail-surface .discount-badge {
    box-shadow: 0 8px 22px rgba(23, 23, 27, 0.09);
    backdrop-filter: blur(12px);
}

.product-detail-surface .product-detail-copy {
    align-self: center;
    min-width: 0;
    padding: 10px 0;
}

.product-detail-eyebrow {
    display: inline-flex;
    gap: 7px;
    align-items: center;
    margin-top: 18px;
    color: var(--brand);
    font-size: 0.61rem;
    font-weight: 820;
}

.product-detail-eyebrow i {
    display: grid;
    width: 25px;
    height: 25px;
    place-items: center;
    background: var(--brand-soft);
    border-radius: 9px;
}

.product-detail-surface .product-detail-copy h1 {
    margin: 9px 0 11px;
    font-size: clamp(2rem, 3.5vw, 3rem);
    line-height: 1.25;
}

.product-detail-surface .product-ingredients-simple {
    margin: 20px 0 0;
    padding: 12px 14px;
    color: #4b4a50;
    font-size: 0.7rem;
    line-height: 1.9;
    background: #f7faf8;
    border: 1px solid #e3eee8;
    border-radius: 14px;
}

.product-detail-surface .product-description-simple {
    margin: 11px 0 0;
    font-size: 0.72rem;
    line-height: 1.95;
}

.product-detail-surface .product-purchase-bar {
    margin-top: 20px;
    padding-top: 16px;
}

/* Reviews — one quiet horizontal row */
.reviews-section {
    padding: clamp(20px, 2.3vw, 30px);
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(255, 246, 242, 0.72), transparent 34%),
        #fff;
    border-radius: 28px;
}

.reviews-heading {
    align-items: center;
    margin-bottom: 18px;
}

.reviews-heading h2 {
    font-size: clamp(1.25rem, 2.4vw, 1.75rem);
}

.reviews-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
}

.rating-summary-card {
    position: relative;
    top: auto;
    display: flex;
    gap: 14px;
    align-items: center;
    width: 100%;
    min-height: 74px;
    padding: 12px 15px;
    background: linear-gradient(90deg, #fff9e8, #fffdf7);
    border: 1px solid #f1e3bd;
    border-radius: 17px;
}

.rating-big {
    flex: 0 0 auto;
    margin: 0;
}

.rating-big strong {
    font-size: 1.85rem;
}

.rating-summary-copy {
    display: grid;
    min-width: 0;
}

.rating-summary-label {
    font-size: 0.64rem;
    font-weight: 820;
}

.rating-summary-card .rating-summary-copy > p {
    margin: 2px 0 0;
    color: var(--muted);
    font-size: 0.53rem;
}

.rating-summary-card .rating-stars {
    margin-right: auto;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.82);
    border-radius: 11px;
}

.product-review-swiper {
    position: relative;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    padding: 3px 2px 32px;
}

.product-review-swiper .swiper-wrapper {
    align-items: stretch;
}

.product-review-swiper .review-card {
    width: auto;
    height: auto;
    min-height: 168px;
    padding: 15px;
    border-radius: 17px;
    box-shadow: 0 9px 28px rgba(25, 25, 29, 0.045);
}

.product-review-swiper .review-card > p {
    display: -webkit-box;
    min-height: 52px;
    margin: 13px 0;
    overflow: hidden;
    font-size: 0.66rem;
    line-height: 1.9;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.product-review-swiper .slider-control {
    top: calc(50% - 16px);
    width: 38px;
    height: 38px;
}

.product-review-swiper .swiper-pagination {
    bottom: 4px;
}

.product-review-swiper .swiper-pagination-bullet-active {
    background: var(--brand);
}

.review-skeleton-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.review-skeleton-list .review-card-skeleton {
    min-height: 168px;
}

@media (max-width: 920px) {
    .product-detail-surface .product-detail-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .product-detail-surface .product-detail-media {
        height: 380px;
        min-height: 380px;
        aspect-ratio: auto;
    }

    .product-detail-surface .product-detail-copy {
        padding: 0 4px 4px;
    }
}

@media (max-width: 720px) {
    .product-detail-surface {
        padding: 0;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .product-detail-surface .product-detail-grid {
        gap: 18px;
    }

    .product-detail-surface .product-detail-media {
        height: 304px;
        min-height: 304px;
        padding: 13px;
        aspect-ratio: auto;
        border-radius: 23px;
    }

    .product-image-stage {
        border-radius: 18px;
    }

    .product-detail-surface .product-image-stage > img {
        max-width: calc(100% - 20px);
        max-height: calc(100% - 20px);
        border-radius: 16px;
    }

    .product-detail-surface .product-media-back {
        top: 24px;
        right: 24px;
    }

    .product-detail-surface .product-media-badges {
        right: 24px;
        bottom: 24px;
        left: 24px;
    }

    .product-detail-eyebrow {
        margin-top: 14px;
    }

    .product-detail-surface .product-detail-copy h1 {
        margin-top: 8px;
        margin-bottom: 10px;
    }

    .product-detail-surface .product-ingredients-simple {
        margin-top: 16px;
        padding: 10px 12px;
        font-size: 0.68rem;
    }

    .product-detail-surface .product-description-simple {
        margin-top: 9px;
        font-size: 0.69rem;
    }

    .reviews-section {
        padding: 18px 14px;
    }

    .reviews-heading {
        display: flex;
        gap: 12px;
        align-items: center;
    }

    .reviews-heading p {
        display: none;
    }

    .write-review-button {
        width: 42px;
        min-height: 42px;
        padding: 0;
        justify-content: center;
        border-radius: 13px;
    }

    .write-review-button {
        font-size: 0;
    }

    .write-review-button i {
        font-size: 0.73rem;
    }

    .rating-summary-card {
        gap: 10px;
        min-height: 66px;
        padding: 10px 12px;
    }

    .rating-big strong {
        font-size: 1.55rem;
    }

    .rating-summary-card .rating-stars {
        gap: 2px;
        padding: 7px;
        font-size: 0.58rem;
    }

    .product-review-swiper {
        width: calc(100% + 14px);
        margin-left: -14px;
        padding-left: 14px;
    }

    .product-review-swiper .slider-control {
        display: none;
    }

    .product-review-swiper .review-card {
        min-height: 164px;
    }

    .review-skeleton-list {
        grid-template-columns: 1fr;
    }

    .review-skeleton-list > :not(:first-child) {
        display: none;
    }
}

@media (max-width: 390px) {
    .product-detail-surface .product-detail-media {
        height: 272px;
        min-height: 272px;
    }

    .rating-summary-copy p {
        display: none;
    }

    .rating-summary-card .rating-stars {
        margin-right: auto;
    }
}

/* Product detail — focused mobile sheet */
@media (max-width: 720px) {
    .product-detail-surface .product-detail-grid {
        gap: 0;
    }

    .product-detail-surface .product-detail-copy {
        position: relative;
        z-index: 6;
        width: calc(100% - 12px);
        margin: -22px auto 0;
        padding: 14px 14px 8px;
        background: rgba(255, 255, 255, 0.97);
        border: 1px solid rgba(231, 229, 233, 0.95);
        border-radius: 23px;
        box-shadow: 0 18px 45px rgba(28, 26, 29, 0.1);
        backdrop-filter: blur(18px);
    }

    .product-detail-surface .product-restaurant {
        width: 100%;
        min-height: 43px;
        padding: 0 0 11px;
        background: transparent;
        border: 0;
        border-bottom: 1px solid #efedf0;
        border-radius: 0;
    }

    .product-detail-surface .mini-restaurant-logo {
        width: 35px;
        height: 35px;
        border: 1px solid #ece9ed;
        border-radius: 11px;
    }

    .product-detail-surface .product-restaurant > span:nth-child(2) {
        display: flex;
        gap: 5px;
        align-items: center;
        flex: 1 1 auto;
    }

    .product-detail-surface .product-restaurant small {
        flex: 0 0 auto;
        font-size: 0.48rem;
    }

    .product-detail-surface .product-restaurant strong {
        font-size: 0.61rem;
    }

    .product-detail-surface .product-restaurant > i {
        display: grid;
        flex: 0 0 auto;
        width: 26px;
        height: 26px;
        margin-right: auto;
        place-items: center;
        background: #f5f4f6;
        border-radius: 9px;
    }

    .product-detail-eyebrow {
        display: none;
    }

    .product-detail-surface .product-detail-copy h1 {
        margin: 16px 0 9px;
        font-size: clamp(1.75rem, 8.2vw, 2.15rem);
        line-height: 1.2;
        letter-spacing: -0.04em;
    }

    .product-essential-meta {
        gap: 6px;
        font-size: 0.54rem;
    }

    .product-essential-meta > i {
        display: none;
    }

    .product-essential-meta a,
    .product-essential-meta > span {
        min-height: 29px;
        padding: 5px 8px;
        background: #f7f6f8;
        border: 1px solid #eeecef;
        border-radius: 9px;
    }

    .product-essential-meta a {
        color: #8d6400;
        background: #fff9e9;
        border-color: #f3e5bd;
    }

    .product-essential-meta > span:last-child {
        display: none;
    }

    .product-detail-surface .product-ingredients-simple {
        position: relative;
        margin-top: 13px;
        padding: 10px 37px 10px 11px;
        font-size: 0.67rem;
        line-height: 1.85;
        background: linear-gradient(135deg, #f4faf6, #f9fcfa);
        border-radius: 13px;
    }

    .product-detail-surface .product-ingredients-simple > i {
        position: absolute;
        top: 12px;
        right: 12px;
        margin: 0;
    }

    .product-detail-surface .product-description-simple {
        display: -webkit-box;
        margin: 11px 2px 0;
        overflow: hidden;
        color: #77757c;
        font-size: 0.65rem;
        line-height: 1.85;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .product-detail-surface .option-group {
        margin-top: 14px;
        padding-top: 14px;
    }

    .product-detail-surface .product-purchase-bar {
        bottom: calc(78px + env(safe-area-inset-bottom));
        grid-template-columns: 88px minmax(0, 1fr);
        gap: 6px;
        width: calc(100% + 12px);
        margin: 14px -6px -2px;
        padding: 6px;
        background: rgba(255, 255, 255, 0.94);
        border: 1px solid #ebe9ed;
        border-radius: 19px;
        box-shadow: 0 13px 34px rgba(28, 26, 29, 0.13);
    }

    .product-detail-surface .quantity-control {
        grid-template-columns: 29px 30px 29px;
        min-height: 50px;
        background: #f5f4f6;
        border: 0;
        border-radius: 14px;
    }

    .product-detail-surface .quantity-control button {
        font-size: 0.68rem;
    }

    .product-detail-surface .quantity-control strong {
        font-size: 0.76rem;
    }

    .product-detail-surface .primary-purchase-button {
        gap: 7px;
        min-height: 50px;
        padding: 0 12px;
        border-radius: 14px;
        box-shadow: 0 10px 23px rgba(255, 92, 53, 0.2);
    }

    .product-detail-surface .primary-purchase-button span {
        gap: 6px;
        font-size: 0.59rem;
    }

    .product-detail-surface .primary-purchase-button strong {
        font-size: 0.56rem;
    }
}

@media (max-width: 390px) {
    .product-detail-surface .product-detail-copy {
        width: calc(100% - 8px);
        padding-right: 12px;
        padding-left: 12px;
    }

    .product-detail-surface .product-purchase-bar {
        grid-template-columns: 84px minmax(0, 1fr);
    }

    .product-detail-surface .quantity-control {
        grid-template-columns: 27px 30px 27px;
    }

    .product-detail-surface .primary-purchase-button {
        padding: 0 10px;
    }

    .product-detail-surface .primary-purchase-button span {
        font-size: 0.56rem;
    }
}

/* Keep reorder actions after the legacy order-card rules. */
.order-dashboard-card.past { display:flex; align-items:center; padding:.7rem; }
.order-dashboard-card.past .past-order-link { min-width:0; flex:1; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:1rem; padding:.35rem; color:inherit; }
.order-dashboard-card.past .reorder-button { display:inline-flex; align-items:center; justify-content:center; gap:.45rem; flex:0 0 auto; padding:.72rem .9rem; border:1px solid #ffd8ce; border-radius:13px; color:#e84627; font-weight:700; background:#fff4f0; }
@media (max-width: 760px) {
    .order-dashboard-card.past { align-items:stretch; flex-direction:column; }
    .order-dashboard-card.past .past-order-link { grid-template-columns:auto 1fr auto; width:100%; }
    .order-dashboard-card.past .reorder-button { width:100%; }
}
/* ── Platform points club ─────────────────────────────────────────────── */
.account-club-glance {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(120px, 220px) auto;
    align-items: center;
    gap: 18px;
    margin: 18px 0 26px;
    padding: 18px 20px;
    overflow: hidden;
    color: #24170f;
    text-decoration: none;
    border: 1px solid #f4d9c7;
    border-radius: 24px;
    background: linear-gradient(115deg, #fffaf5 0%, #fff2e7 55%, #fff8ef 100%);
    box-shadow: 0 14px 38px rgba(80, 47, 24, .08);
}

.account-club-glance::after {
    content: "";
    position: absolute;
    inset: auto -30px -65px auto;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: rgba(255, 91, 55, .09);
}

.club-glance-icon {
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    color: #fff;
    border-radius: 17px;
    background: linear-gradient(145deg, #ff6747, #ff492d);
    box-shadow: 0 10px 24px rgba(255, 81, 48, .24);
}

.club-glance-copy { display: grid; gap: 3px; min-width: 0; }
.club-glance-copy small { color: #a25b3e; font-weight: 700; }
.club-glance-copy strong { font-size: 1.05rem; }
.club-glance-copy strong b { font-size: 1.45rem; }
.club-glance-copy > span { color: #78665b; font-size: .85rem; }
.club-glance-progress { height: 7px; overflow: hidden; border-radius: 99px; background: #eadfd8; }
.club-glance-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ff5737, #ff9a43); }
.club-glance-action { position: relative; z-index: 1; color: #ff5334; font-weight: 800; white-space: nowrap; }
.club-glance-action i { margin-right: 7px; }

.points-page {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
    padding: 36px 0 90px;
}

.points-loading { display: grid; grid-template-columns: 1.4fr .8fr; gap: 18px; }
.points-loading .skeleton { min-height: 230px; border-radius: 30px; }
.points-loading .skeleton:last-child { grid-column: 1 / -1; min-height: 320px; }

.points-login {
    display: grid;
    grid-template-columns: 1fr minmax(320px, 440px);
    gap: 34px;
    align-items: center;
    min-height: 560px;
    padding: 50px;
    border: 1px solid #f0e3dc;
    border-radius: 34px;
    background: linear-gradient(135deg, #fff9f4, #fff);
}
.points-login h1 { margin: 10px 0 14px; font-size: clamp(2rem, 5vw, 4rem); line-height: 1.25; }
.points-login p { max-width: 620px; color: #746963; font-size: 1rem; line-height: 2; }

.points-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
    gap: 26px;
    padding: 34px;
    overflow: hidden;
    color: #fff;
    border-radius: 34px;
    background:
        radial-gradient(circle at 8% 105%, rgba(255, 122, 70, .38), transparent 34%),
        linear-gradient(125deg, #30231d 0%, #4b2b20 58%, #6b3322 100%);
    box-shadow: 0 24px 70px rgba(55, 34, 24, .2);
}

.points-hero::after {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    inset: -135px -70px auto auto;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 50%;
}

.points-hero-copy { position: relative; z-index: 1; }
.points-level { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; color: #ffd9bd; border: 1px solid rgba(255,255,255,.14); border-radius: 99px; background: rgba(255,255,255,.07); font-size: .8rem; font-weight: 800; }
.points-hero h1 { margin: 15px 0 5px; font-size: clamp(2rem, 4vw, 3.5rem); }
.points-hero-copy > p { margin: 0; color: rgba(255,255,255,.68); line-height: 1.9; }
.points-balance-row { display: flex; align-items: end; gap: 24px; margin-top: 30px; }
.points-balance { display: grid; }
.points-balance strong { font-size: clamp(3.2rem, 8vw, 5.8rem); line-height: .95; letter-spacing: -2px; }
.points-balance span { margin-top: 8px; color: #ffc9ad; font-weight: 700; }
.points-pending { display: flex; align-items: center; gap: 9px; margin-bottom: 4px; padding: 10px 13px; color: #ffe1ce; border-radius: 14px; background: rgba(255,255,255,.08); font-size: .82rem; }

.points-level-card {
    position: relative;
    z-index: 1;
    align-self: stretch;
    display: grid;
    align-content: center;
    gap: 16px;
    padding: 24px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 26px;
    background: rgba(255,255,255,.075);
    backdrop-filter: blur(12px);
}
.points-level-orbit { display: grid; width: 72px; height: 72px; place-items: center; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; box-shadow: inset 0 0 0 9px rgba(255,255,255,.05); }
.points-level-orbit span { font-size: 1.65rem; font-weight: 900; }
.points-level-card > div:not(.points-level-orbit):not(.points-level-progress) { display: grid; gap: 5px; }
.points-level-card span { color: rgba(255,255,255,.65); font-size: .8rem; }
.points-level-progress { height: 8px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.12); }
.points-level-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ff6b44, #ffd08a); }

.points-purpose { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 14px; margin: 20px 0; padding: 16px 20px; border: 1px solid #eee5df; border-radius: 22px; background: #fff; }
.points-purpose > div { position: relative; display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 4px 9px; min-width: 0; }
.points-purpose > div > span { display: grid; grid-row: 1 / 3; width: 29px; height: 29px; place-items: center; color: #a66346; border-radius: 10px; background: #fff1e9; font-size: .72rem; font-weight: 900; }
.points-purpose > div > i { color: #ff5738; font-size: .88rem; }
.points-purpose strong { font-size: .84rem; }
.points-purpose small { grid-column: 2 / -1; color: #8e817a; font-size: .7rem; }
.points-purpose > i { color: #d7ccc5; font-size: .72rem; }

.points-ready-gifts { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 18px; margin-bottom: 20px; padding: 15px 18px; color: #174b3b; border: 1px solid #cce9dd; border-radius: 21px; background: linear-gradient(110deg, #ebfaf4, #f8fffc); }
.points-ready-gifts > div { display: flex; align-items: center; gap: 11px; }
.points-ready-gifts > div > span:last-child { display: grid; gap: 1px; }
.points-ready-gifts small { color: #41806d; }
.ready-gift-icon { display: grid; width: 42px; height: 42px; place-items: center; color: #fff; border-radius: 13px; background: #18805f; }
.points-ready-gifts p { margin: 0; color: #648176; font-size: .75rem; }
.points-ready-gifts a { padding: 10px 14px; color: #fff; text-decoration: none; border-radius: 12px; background: #176b52; font-size: .78rem; font-weight: 800; white-space: nowrap; }
.points-ready-gifts a i { margin-right: 6px; }

.points-rewards-section { margin-bottom: 20px; padding: 24px; border: 1px solid #ece3dc; border-radius: 28px; background: linear-gradient(145deg, #fff 0%, #fffaf6 100%); box-shadow: 0 16px 48px rgba(55, 38, 28, .06); }
.points-rewards-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.points-rewards-heading h2 { margin: 4px 0 2px; font-size: 1.45rem; }
.points-rewards-heading p { margin: 0; color: #867971; font-size: .8rem; }
.points-rewards-heading > div:last-child { display: grid; min-width: 135px; padding: 10px 14px; color: #713c2a; border-radius: 16px; background: #fff0e7; text-align: center; }
.points-rewards-heading > div:last-child strong { font-size: 1.4rem; }
.points-rewards-heading > div:last-child span { font-size: .68rem; }
.points-reward-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.points-reward-card { position: relative; display: grid; align-content: start; min-width: 0; padding: 17px; overflow: hidden; border: 1px solid #ece5e0; border-radius: 21px; background: #fff; }
.points-reward-card::after { content: ""; position: absolute; inset: -55px auto auto -50px; width: 115px; height: 115px; border-radius: 50%; background: rgba(255, 91, 55, .045); }
.reward-card-top { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.reward-card-top > span { display: grid; width: 38px; height: 38px; place-items: center; color: #ff5738; border-radius: 12px; background: #fff0e9; }
.reward-card-top small { color: #a2938b; font-size: .68rem; font-weight: 800; }
.points-reward-card h3 { margin: 13px 0 3px; font-size: 1.02rem; }
.points-reward-card p { min-height: 37px; margin: 0; color: #8a7c74; font-size: .72rem; line-height: 1.7; }
.reward-cost { display: flex; align-items: baseline; gap: 5px; margin: 14px 0 7px; }
.reward-cost strong { color: #2d2724; font-size: 1.45rem; }
.reward-cost span { color: #8a7b73; font-size: .7rem; }
.reward-progress { height: 5px; margin-bottom: 13px; overflow: hidden; border-radius: 99px; background: #eee9e6; }
.reward-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ff5b3c, #ffab55); }
.points-reward-card button, .points-reward-card > a { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; min-height: 42px; margin-top: auto; padding: 9px; border: 0; border-radius: 12px; color: #fff; background: #211e1c; cursor: pointer; font: inherit; font-size: .75rem; font-weight: 800; text-decoration: none; }
.points-reward-card button.confirm { background: #ff5738; }
.points-reward-card button:disabled { opacity: .65; cursor: wait; }
.reward-needed { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 42px; margin-top: auto; color: #8b7e76; border-radius: 12px; background: #f5f2f0; font-size: .73rem; }
.points-reward-card.available { border-color: #f2cbbd; box-shadow: 0 12px 30px rgba(255, 85, 54, .09); }
.points-reward-card.owned { border-color: #bfe3d5; background: #f8fffc; }
.points-reward-card.owned .reward-card-top > span { color: #18805f; background: #e7f7f0; }
.points-reward-card.owned > a { background: #177157; }
.points-reward-message { display: flex; align-items: center; gap: 8px; margin-top: 13px; padding: 10px 12px; border-radius: 12px; font-size: .76rem; }
.points-reward-message.success { color: #176c53; background: #eaf8f2; }
.points-reward-message.error { color: #b83e2c; background: #fff0ed; }
.points-reward-rule { display: flex; align-items: flex-start; gap: 7px; margin: 13px 2px 0; color: #82766f; font-size: .7rem; line-height: 1.7; }
.points-reward-rule i { margin-top: 3px; color: #18805f; }

.points-next-mission {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 18px;
    margin: 20px 0;
    padding: 18px 20px;
    border: 1px solid #f0ded2;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 14px 42px rgba(49, 32, 23, .07);
}
.mission-icon { display: grid; width: 46px; height: 46px; flex: 0 0 auto; place-items: center; color: #ff5637; border-radius: 15px; background: #fff0e9; }
.points-next-mission small { color: #a17964; }
.points-next-mission h2 { margin: 1px 0; font-size: 1.05rem; }
.points-next-mission p { margin: 0; color: #80716a; font-size: .82rem; }
.mission-reward { padding: 8px 12px; color: #16805f; border-radius: 12px; background: #ebfaf4; font-weight: 900; }
.points-next-mission a { padding: 11px 15px; color: #fff; text-decoration: none; border-radius: 13px; background: #1e1c1b; font-size: .84rem; font-weight: 800; white-space: nowrap; }
.points-next-mission a i { margin-right: 6px; }

.points-content-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 20px; }
.points-panel { padding: 24px; border: 1px solid #ece5e1; border-radius: 28px; background: #fff; box-shadow: 0 16px 48px rgba(53, 39, 31, .06); }
.points-panel-heading { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.points-panel-heading > div { display: grid; gap: 2px; }
.points-panel-heading span { color: #ff5738; font-size: .75rem; font-weight: 800; }
.points-panel-heading h2 { margin: 0; font-size: 1.35rem; }
.points-panel-heading small { color: #978a83; }
.points-mission-list, .points-history-list { display: grid; gap: 9px; }
.points-mission { display: flex; align-items: center; gap: 12px; padding: 12px; color: inherit; text-decoration: none; border: 1px solid #eee8e4; border-radius: 18px; transition: .2s ease; }
.points-mission:hover { transform: translateY(-2px); border-color: #f3cdbd; }
.points-mission > div { display: grid; flex: 1; min-width: 0; gap: 3px; }
.points-mission strong { font-size: .9rem; }
.points-mission small { overflow: hidden; color: #8b7d76; font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }
.points-mission > b { color: #ff5738; font-size: .78rem; white-space: nowrap; }
.points-mission.completed { background: #f9fcfa; }
.points-mission.completed .mission-icon { color: #18805e; background: #eaf8f2; }
.points-mission.completed > b { color: #18805e; }
.mission-mini-progress { display: block; height: 4px; margin-top: 4px; overflow: hidden; border-radius: 99px; background: #eee9e6; }
.mission-mini-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ff5c3d, #ffb15e); }

.points-history-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px dashed #e8e0db; }
.points-history-item:last-child { border-bottom: 0; }
.history-mark { display: grid; width: 42px; height: 42px; place-items: center; color: #ff5738; border-radius: 14px; background: #fff0e9; }
.points-history-item > div { display: grid; min-width: 0; gap: 2px; }
.points-history-item strong { font-size: .86rem; }
.points-history-item small { overflow: hidden; color: #8f817a; font-size: .74rem; text-overflow: ellipsis; white-space: nowrap; }
.points-history-item time { color: #b2a8a2; font-size: .68rem; }
.points-history-item > b { color: #18805e; font-size: .82rem; white-space: nowrap; }
.points-history-item.status-1 > b { color: #b66f17; }
.points-history-item.status-4 { opacity: .62; }
.points-history-item.status-4 > b { color: #8f817a; }
.points-load-more { width: 100%; margin-top: 14px; padding: 12px; border: 1px solid #e9dfda; border-radius: 14px; background: #fff; cursor: pointer; font: inherit; font-weight: 800; }
.points-history-empty { display: grid; min-height: 220px; place-content: center; justify-items: center; gap: 7px; color: #8b7f78; text-align: center; }
.points-history-empty i { margin-bottom: 5px; color: #ff6b48; font-size: 2rem; }
.points-history-empty strong { color: #282321; }
.points-history-empty span { font-size: .78rem; }
.points-referral {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto minmax(190px, auto);
    align-items: center;
    gap: 18px;
    margin-top: 20px;
    padding: 20px;
    border: 1px solid #dcefe7;
    border-radius: 26px;
    background: linear-gradient(120deg, #f4fcf8 0%, #fff 55%, #fff8f2 100%);
    box-shadow: 0 16px 48px rgba(42, 79, 63, .06);
}
.referral-visual { display: grid; width: 54px; height: 54px; place-items: center; color: #fff; border-radius: 18px; background: linear-gradient(145deg, #168363, #25aa7f); box-shadow: 0 12px 28px rgba(24, 132, 99, .22); }
.referral-copy { display: grid; min-width: 0; gap: 3px; }
.referral-copy small { color: #16805f; font-weight: 800; }
.referral-copy h2 { margin: 0; font-size: 1rem; line-height: 1.7; }
.referral-copy h2 b { color: #ff5738; }
.referral-copy p { margin: 0; color: #80756e; font-size: .75rem; line-height: 1.7; }
.referral-code-box { display: grid; grid-template-columns: auto auto; align-items: center; gap: 4px 10px; min-width: 190px; padding: 11px 13px; border: 1px dashed #c9dfd6; border-radius: 17px; background: rgba(255,255,255,.8); }
.referral-code-box > span { color: #837770; font-size: .7rem; }
.referral-code-box code { grid-row: 2; color: #173f32; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .98rem; font-weight: 900; letter-spacing: .5px; }
.referral-code-box button { grid-column: 2; grid-row: 1 / 3; padding: 9px 10px; border: 0; border-radius: 11px; color: #176a52; background: #e7f7f0; cursor: pointer; font: inherit; font-size: .72rem; font-weight: 800; }
.referral-code-box > small { grid-column: 1 / -1; color: #16805f; font-size: .68rem; }
.referral-apply { display: grid; gap: 6px; }
.referral-apply details { min-width: 190px; }
.referral-apply summary { color: #5d514b; cursor: pointer; font-size: .78rem; font-weight: 800; list-style: none; }
.referral-apply summary::-webkit-details-marker { display: none; }
.referral-apply details > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; margin-top: 8px; }
.referral-apply input { min-width: 0; padding: 9px; border: 1px solid #ded8d4; border-radius: 10px; outline: none; font: inherit; font-size: .72rem; text-align: left; }
.referral-apply input:focus { border-color: #51ad8e; box-shadow: 0 0 0 3px rgba(32, 157, 116, .1); }
.referral-apply button { padding: 9px 11px; border: 0; border-radius: 10px; color: #fff; background: #211f1e; cursor: pointer; font: inherit; font-size: .72rem; font-weight: 800; }
.referral-apply button:disabled { opacity: .6; cursor: wait; }
.referral-applied { display: inline-flex; align-items: center; gap: 7px; color: #16805f; font-size: .78rem; font-weight: 800; }
.referral-apply > small { font-size: .68rem; line-height: 1.6; }
.referral-apply > small.success { color: #16805f; }
.referral-apply > small.error { color: #c63f2c; }
.points-footnote { display: flex; justify-content: center; gap: 8px; margin: 18px 0 0; color: #8d827c; font-size: .77rem; text-align: center; }
.points-footnote i { color: #18805e; }
.points-error { display: grid; min-height: 480px; place-content: center; justify-items: center; text-align: center; }
.points-error > i { color: #ff5738; font-size: 2.4rem; }
.points-error h1 { margin: 12px 0 4px; }
.points-error p { color: #867a74; }
.points-error button { padding: 11px 18px; border: 0; border-radius: 13px; color: #fff; background: #201e1d; font: inherit; cursor: pointer; }

.checkout-club-gift { display: grid; gap: 8px; margin: 13px 0; padding: 12px; border: 1px solid #cce8dc; border-radius: 16px; background: #f3fcf8; }
.checkout-club-gift > div { display: flex; align-items: center; gap: 9px; color: #176b52; }
.checkout-club-gift > div > i { display: grid; width: 34px; height: 34px; place-items: center; color: #fff; border-radius: 10px; background: #18805f; }
.checkout-club-gift > div > span { display: grid; gap: 1px; }
.checkout-club-gift > div small { color: #668277; font-size: .68rem; }
.club-voucher-choice { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 9px 10px; border: 1px solid #dbe9e3; border-radius: 12px; color: #3f3935; background: #fff; cursor: pointer; font: inherit; text-align: right; }
.club-voucher-choice > span { display: grid; gap: 1px; }
.club-voucher-choice strong { font-size: .75rem; }
.club-voucher-choice small { color: #8a7d75; font-size: .65rem; }
.club-voucher-choice > i { color: #c7d4cf; }
.club-voucher-choice.selected { color: #176b52; border-color: #55ab8e; box-shadow: 0 0 0 3px rgba(31, 146, 107, .08); }
.club-voucher-choice.selected > i { color: #18805f; }
.club-voucher-choice.locked { opacity: .68; cursor: not-allowed; }
.club-discount-row { color: #167054; }
.club-discount-row i { margin-left: 5px; }

@media (max-width: 820px) {
    .account-club-glance { grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; padding: 15px; border-radius: 20px; }
    .club-glance-progress { grid-column: 1 / -1; grid-row: 2; }
    .club-glance-action { font-size: 0; }
    .club-glance-action i { margin: 0; font-size: .9rem; }
    .points-page { width: min(100% - 20px, 1180px); padding-top: 16px; }
    .points-hero { grid-template-columns: 1fr; padding: 22px; border-radius: 27px; }
    .points-level-card { grid-template-columns: auto 1fr; align-items: center; padding: 16px; border-radius: 20px; }
    .points-level-progress { grid-column: 1 / -1; }
    .points-content-grid { grid-template-columns: 1fr; }
    .points-reward-grid { grid-template-columns: 1fr; }
    .points-ready-gifts { grid-template-columns: minmax(0, 1fr) auto; }
    .points-ready-gifts p { display: none; }
    .points-referral { grid-template-columns: auto minmax(0, 1fr) auto; }
    .referral-apply { grid-column: 2 / -1; }
    .points-next-mission { grid-template-columns: auto 1fr auto; }
    .points-next-mission a { grid-column: 1 / -1; text-align: center; }
    .points-login { grid-template-columns: 1fr; padding: 24px; }
}

@media (max-width: 520px) {
    .points-page { width: calc(100% - 16px); padding-bottom: 110px; }
    .points-hero { padding: 19px 17px; border-radius: 24px; }
    .points-hero h1 { font-size: 1.75rem; }
    .points-hero-copy > p { font-size: .82rem; line-height: 1.75; }
    .points-balance-row { align-items: stretch; flex-direction: column; gap: 12px; margin-top: 24px; }
    .points-balance strong { font-size: 3.8rem; }
    .points-pending { align-self: flex-start; margin: 0; }
    .points-level-card { gap: 12px; }
    .points-level-orbit { width: 56px; height: 56px; }
    .points-level-orbit span { font-size: 1.25rem; }
    .points-next-mission { gap: 10px; padding: 14px; border-radius: 20px; }
    .points-next-mission p { display: none; }
    .points-purpose { grid-template-columns: 1fr; gap: 8px; padding: 12px; }
    .points-purpose > i { display: none; }
    .points-purpose > div { padding: 4px; }
    .points-ready-gifts { grid-template-columns: 1fr; gap: 10px; }
    .points-ready-gifts a { text-align: center; }
    .points-rewards-section { padding: 17px 13px; border-radius: 22px; }
    .points-rewards-heading { align-items: stretch; flex-direction: column; }
    .points-rewards-heading h2 { font-size: 1.18rem; }
    .points-rewards-heading > div:last-child { grid-template-columns: auto 1fr; align-items: center; justify-content: start; gap: 7px; text-align: right; }
    .points-reward-card { padding: 15px; }
    .mission-reward { padding: 7px 9px; font-size: .75rem; }
    .points-panel { padding: 17px 14px; border-radius: 22px; }
    .points-panel-heading h2 { font-size: 1.16rem; }
    .points-mission { padding: 10px 8px; }
    .mission-icon { width: 40px; height: 40px; border-radius: 13px; }
    .points-mission small { max-width: 190px; }
    .points-history-item { gap: 9px; }
    .history-mark { width: 38px; height: 38px; }
    .points-history-item small { max-width: 190px; }
    .points-referral { grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 15px; border-radius: 21px; }
    .referral-copy p { display: none; }
    .referral-code-box, .referral-apply { grid-column: 1 / -1; width: 100%; }
    .referral-apply details { min-width: 0; }
    .points-footnote { align-items: flex-start; padding: 0 10px; line-height: 1.8; }
}

/* Wallet and payment-first order flow */
.account-wallet-strip { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 14px; margin: 14px 0; padding: 15px 18px; border: 1px solid #dceee8; border-radius: 20px; color: #211d1a; background: linear-gradient(135deg,#f1fbf7,#fff); box-shadow: 0 12px 30px rgba(28,111,82,.07); text-decoration: none; transition: .2s ease; }
.account-wallet-strip:hover { border-color: #b7dfd0; transform: translateY(-1px); }
.account-wallet-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 15px; color: #fff; background: linear-gradient(145deg,#1b9a70,#117955); box-shadow: 0 9px 22px rgba(27,154,112,.22); }
.account-wallet-strip > div { display: grid; gap: 1px; min-width: 0; }
.account-wallet-strip small { color: #24785c; font-size: .68rem; font-weight: 850; }
.account-wallet-strip strong { font-size: 1rem; }
.account-wallet-strip strong b { color: #6e7772; font-size: .62rem; }
.account-wallet-strip > div > span { overflow: hidden; color: #748079; font-size: .65rem; text-overflow: ellipsis; white-space: nowrap; }
.account-wallet-action { color: #17815e; font-size: .68rem; font-weight: 900; }
.account-wallet-action i { margin-right: 6px; }
.checkout-wallet-card { display: grid; gap: 11px; margin: 12px 0; padding: 13px; border: 1px solid #e8e5e2; border-radius: 17px; background: #faf9f8; transition: .2s ease; }
.checkout-wallet-card.selected { border-color: #9ad9c3; background: #f1fbf7; box-shadow: 0 10px 28px rgba(34, 139, 105, .08); }
.checkout-wallet-heading { display: flex; align-items: center; gap: 10px; }
.checkout-wallet-heading > span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: #16835f; background: #e2f7ef; }
.checkout-wallet-heading > div { display: grid; gap: 2px; min-width: 0; }
.checkout-wallet-heading small { color: #8a817b; font-size: .68rem; }
.checkout-wallet-heading strong { color: #26211e; font-size: .82rem; }
.checkout-wallet-heading > a { margin-right: auto; color: #ff583b; font-size: .7rem; font-weight: 800; text-decoration: none; }
.checkout-wallet-card > label { display: flex; align-items: center; gap: 9px; padding: 10px; border-radius: 12px; background: #fff; cursor: pointer; }
.checkout-wallet-card input { width: 18px; height: 18px; accent-color: #16835f; }
.checkout-wallet-card label > span { display: grid; gap: 2px; }
.checkout-wallet-card label strong { font-size: .75rem; }
.checkout-wallet-card label small { color: #7a716c; font-size: .65rem; line-height: 1.5; }
.checkout-wallet-charge { display: flex; justify-content: center; padding: 9px; border-radius: 11px; color: #167458; background: #e4f8f0; font-size: .72rem; font-weight: 800; text-decoration: none; }
.checkout-payment-methods { display: grid; gap: 9px; margin: 16px 0 12px; padding-top: 15px; border-top: 1px dashed #e5dfdb; }
.checkout-payment-title { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 2px; }
.checkout-payment-title > div { display: grid; gap: 1px; }
.checkout-payment-title small { color: #ff5a3d; font-size: .65rem; font-weight: 850; }
.checkout-payment-title strong { color: #211d1a; font-size: .9rem; }
.checkout-payment-title > span { color: #8b817b; font-size: .65rem; }
.checkout-payment-option { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 11px; width: 100%; padding: 12px; border: 1px solid #e7e2df; border-radius: 15px; color: #282320; background: #fff; font: inherit; text-align: right; cursor: pointer; transition: border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease; }
.checkout-payment-option:hover { border-color: #d7cec8; transform: translateY(-1px); }
.checkout-payment-option.selected { border-color: #ff9a87; background: #fff8f5; box-shadow: 0 8px 22px rgba(255,90,61,.08); }
.checkout-payment-option.wallet.selected { border-color: #8fd4bc; background: #f2fbf7; box-shadow: 0 8px 22px rgba(22,131,95,.08); }
.payment-option-icon { display: grid; place-items: center; width: 39px; height: 39px; border-radius: 12px; color: #ff5a3d; background: #ffebe5; }
.payment-option-icon.wallet { color: #16835f; background: #e1f6ee; }
.payment-option-copy { display: grid; gap: 2px; min-width: 0; }
.payment-option-copy strong { font-size: .75rem; }
.payment-option-copy small { overflow: hidden; color: #7e746e; font-size: .64rem; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; }
.payment-option-check { color: #cac3bf; font-size: 1rem; }
.checkout-payment-option.selected .payment-option-check { color: #ff5a3d; }
.checkout-payment-option.wallet.selected .payment-option-check { color: #16835f; }
.checkout-wallet-shortage { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 11px 12px; border: 1px solid #e9e4e1; border-radius: 15px; background: #faf9f8; }
.checkout-wallet-shortage > span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; color: #7d746e; background: #efedeb; }
.checkout-wallet-shortage > div { display: grid; gap: 2px; min-width: 0; }
.checkout-wallet-shortage strong { font-size: .7rem; }
.checkout-wallet-shortage small { color: #8a817b; font-size: .62rem; line-height: 1.5; }
.checkout-wallet-shortage > a { padding: 7px 9px; border-radius: 9px; color: #167458; background: #e3f7ef; font-size: .64rem; font-weight: 850; text-decoration: none; white-space: nowrap; }

@media (max-width: 520px) {
    .checkout-payment-title > span { display: none; }
    .checkout-payment-option { gap: 9px; padding: 10px; }
    .payment-option-icon { width: 36px; height: 36px; }
    .payment-option-copy small { white-space: normal; }
    .checkout-wallet-shortage { grid-template-columns: auto minmax(0,1fr); }
    .checkout-wallet-shortage > a { grid-column: 1 / -1; text-align: center; }
}

.payment-action-card { grid-template-columns: auto minmax(0,1fr) auto; }
.payment-action-card .payment-price { grid-column: 3; }
.order-payment-choices { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; padding-top: 12px; border-top: 1px dashed #ecdcd5; }
.order-wallet-shortage { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 11px; border-radius: 12px; color: #756b65; background: #f6f3f1; font-size: .67rem; }
.order-wallet-shortage span { display: inline-flex; align-items: center; gap: 6px; }
.order-wallet-shortage a { padding: 6px 9px; border-radius: 8px; color: #167458; background: #e2f6ee; font-weight: 850; text-decoration: none; white-space: nowrap; }
.payment-action-card > .customer-deadline-countdown { grid-column: 2; }
.payment-action-card .payment-button { grid-column: 3; }

@media (max-width: 720px) {
    .payment-action-card { grid-template-columns: auto minmax(0,1fr); }
    .payment-action-card .payment-price { grid-column: 2; text-align: right; }
    .order-payment-choices, .payment-action-card > .customer-deadline-countdown, .payment-action-card .payment-button { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
    .order-payment-choices { grid-template-columns: 1fr; }
    .order-wallet-shortage { align-items: stretch; flex-direction: column; }
    .order-wallet-shortage a { text-align: center; }
}

.wallet-page { width: min(1180px, calc(100% - 32px)); margin: 34px auto 110px; direction: rtl; color: #201b18; }
.wallet-loading, .wallet-empty { display: grid; place-items: center; gap: 12px; min-height: 360px; text-align: center; }
.wallet-loading i, .wallet-empty > i { color: #ff5a3d; font-size: 2rem; }
.wallet-empty button { padding: 11px 20px; border: 0; border-radius: 13px; color: #fff; background: #ff5a3d; font: inherit; font-weight: 800; cursor: pointer; }
.wallet-hero { position: relative; display: grid; grid-template-columns: 1fr minmax(310px, 420px); align-items: center; gap: 34px; overflow: hidden; padding: 38px 42px; border: 1px solid #eadfd8; border-radius: 32px; background: linear-gradient(130deg, #fffaf7 0%, #fff 52%, #eefaf6 100%); box-shadow: 0 24px 65px rgba(57, 40, 30, .08); }
.wallet-hero::before { content: ""; position: absolute; width: 260px; height: 260px; right: -110px; bottom: -150px; border-radius: 50%; background: #ffdfd5; filter: blur(2px); opacity: .65; }
.wallet-hero-copy { position: relative; z-index: 1; }
.wallet-hero-copy > span { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border-radius: 999px; color: #187356; background: #e9f8f2; font-size: .73rem; font-weight: 800; }
.wallet-hero-copy h1 { margin: 16px 0 7px; font-size: clamp(2rem, 4vw, 3.4rem); letter-spacing: -.04em; }
.wallet-hero-copy p { margin: 0; color: #746a64; font-size: .95rem; line-height: 1.9; }
.wallet-balance-card { position: relative; z-index: 1; display: grid; gap: 9px; padding: 24px; border-radius: 24px; color: #fff; background: linear-gradient(145deg, #24201e, #3b322e); box-shadow: 0 20px 45px rgba(37, 30, 27, .18); }
.wallet-balance-card::after { content: ""; position: absolute; left: 20px; top: 15px; color: rgba(255,255,255,.08); font: 3.4rem "Font Awesome 6 Free"; font-weight: 900; }
.wallet-balance-card > small { color: #d9cfca; font-size: .76rem; }
.wallet-balance-card > strong { display: flex; align-items: baseline; gap: 7px; font-size: clamp(2rem, 4vw, 3rem); font-variant-numeric: tabular-nums; }
.wallet-balance-card > strong span { font-size: .75rem; font-weight: 600; }
.wallet-balance-card p { display: flex; align-items: center; gap: 6px; margin: 0; color: #bddfd4; font-size: .7rem; }
.wallet-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 18px; margin-top: 20px; }
.wallet-charge-card, .wallet-safety-card, .wallet-transactions-card { border: 1px solid #ece7e3; border-radius: 25px; background: #fff; box-shadow: 0 18px 48px rgba(57, 40, 30, .055); }
.wallet-charge-card, .wallet-safety-card { padding: 23px; }
.wallet-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.wallet-section-heading > div { display: grid; gap: 3px; }
.wallet-section-heading span { color: #ff5a3d; font-size: .69rem; font-weight: 850; }
.wallet-section-heading h2 { margin: 0; font-size: 1.2rem; }
.wallet-section-heading > i { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: #ff5a3d; background: #fff0eb; }
.wallet-quick-amounts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 19px 0 13px; }
.wallet-quick-amounts button { padding: 10px 5px; border: 1px solid #e8e3df; border-radius: 12px; color: #4e4540; background: #fff; font: inherit; font-size: .72rem; font-weight: 800; cursor: pointer; }
.wallet-quick-amounts button.selected { color: #fff; border-color: #ff5a3d; background: #ff5a3d; }
.wallet-custom-amount { display: grid; gap: 7px; }
.wallet-custom-amount > span { color: #706762; font-size: .72rem; font-weight: 750; }
.wallet-custom-amount > div { display: flex; align-items: center; overflow: hidden; border: 1px solid #e4dfdc; border-radius: 13px; background: #faf9f8; }
.wallet-custom-amount input { min-width: 0; flex: 1; padding: 11px 13px; border: 0; outline: 0; background: transparent; font: inherit; font-weight: 800; }
.wallet-custom-amount small { padding-left: 13px; color: #8c827c; }
.wallet-charge-button { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 13px; padding: 12px; border: 0; border-radius: 13px; color: #fff; background: linear-gradient(135deg, #ff5a3d, #ff714d); box-shadow: 0 12px 25px rgba(255,90,61,.2); font: inherit; font-size: .78rem; font-weight: 850; cursor: pointer; }
.wallet-charge-button:disabled { opacity: .65; cursor: wait; }
.wallet-charge-card > p { margin: 9px 0 0; color: #a09690; font-size: .65rem; text-align: center; }
.wallet-safety-card { display: grid; align-content: center; gap: 15px; background: linear-gradient(145deg, #f2fbf8, #fff); }
.wallet-safety-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 17px; color: #14825f; background: #dcf5ec; font-size: 1.25rem; }
.wallet-safety-card > div > span { color: #16835f; font-size: .69rem; font-weight: 850; }
.wallet-safety-card h2 { margin: 4px 0 6px; font-size: 1.18rem; }
.wallet-safety-card p { margin: 0; color: #716964; font-size: .76rem; line-height: 1.9; }
.wallet-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wallet-stats > span { display: grid; gap: 4px; padding: 10px; border-radius: 12px; background: rgba(255,255,255,.8); }
.wallet-stats small { color: #8a817b; font-size: .65rem; }
.wallet-stats strong { font-size: .8rem; }
.wallet-message { display: flex; align-items: center; gap: 8px; margin-top: 16px; padding: 12px 15px; border-radius: 14px; font-size: .76rem; font-weight: 750; }
.wallet-message.success { color: #176b52; background: #e9f8f2; }
.wallet-message.error { color: #ad3d2e; background: #fff0ed; }
.wallet-transactions-card { margin-top: 20px; padding: 24px; }
.wallet-transactions-list { display: grid; margin-top: 16px; }
.wallet-transactions-list article { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid #f0ece9; }
.wallet-transactions-list article:last-child { border-bottom: 0; }
.wallet-transaction-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; }
.wallet-transaction-icon.credit { color: #16835f; background: #e4f8f0; }
.wallet-transaction-icon.debit { color: #d24c35; background: #fff0eb; }
.wallet-transactions-list article > div { display: grid; gap: 2px; min-width: 0; }
.wallet-transactions-list article strong { font-size: .79rem; }
.wallet-transactions-list article p { overflow: hidden; margin: 0; color: #817772; font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.wallet-transactions-list article small { color: #aaa19c; font-size: .62rem; }
.wallet-transaction-amount { display: flex; align-items: baseline; gap: 4px; font-size: .86rem; font-weight: 900; direction: ltr; }
.wallet-transaction-amount.credit { color: #16835f; }
.wallet-transaction-amount.debit { color: #d24c35; }
.wallet-transaction-amount small { font-size: .58rem; }
.wallet-no-transactions { display: grid; justify-items: center; gap: 6px; padding: 40px 10px; color: #948a84; text-align: center; }
.wallet-no-transactions i { font-size: 1.8rem; }
.wallet-no-transactions strong { color: #4b423e; }
.wallet-no-transactions span { font-size: .72rem; }
.wallet-load-more { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; margin-top: 12px; padding: 11px; border: 1px solid #e8e3df; border-radius: 13px; color: #554b46; background: #faf9f8; font: inherit; font-size: .7rem; font-weight: 850; cursor: pointer; }
.wallet-load-more:disabled { opacity: .65; cursor: wait; }

.tracking-cancellation-window, .tracking-restaurant-wait { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 14px; margin: 14px 0; padding: 16px 18px; border-radius: 20px; }
.tracking-cancellation-window { border: 1px solid #ffd8cd; background: linear-gradient(135deg, #fff8f5, #fff); }
.tracking-cancellation-icon, .tracking-restaurant-wait > span { display: grid; place-items: center; width: 45px; height: 45px; border-radius: 14px; color: #ff5a3d; background: #ffe9e2; }
.tracking-cancellation-window > div, .tracking-restaurant-wait > div { display: grid; gap: 2px; }
.tracking-cancellation-window h2, .tracking-restaurant-wait h2 { margin: 0; font-size: .95rem; }
.tracking-cancellation-window p, .tracking-restaurant-wait p { margin: 0; color: #756b66; font-size: .69rem; line-height: 1.7; }
.tracking-cancellation-window > div > span, .tracking-restaurant-wait small { color: #ff5a3d; font-size: .65rem; font-weight: 850; }
.tracking-cancellation-window > button { grid-column: 3; padding: 9px 12px; border: 0; border-radius: 11px; color: #b63e2c; background: #ffe7e0; font: inherit; font-size: .7rem; font-weight: 850; cursor: pointer; }
.tracking-cancellation-window .customer-deadline-countdown { grid-column: 3; }
.tracking-restaurant-wait { border: 1px solid #dceee8; background: #f4fbf8; }
.tracking-restaurant-wait > span { color: #177b5d; background: #dff5ed; }
.tracking-restaurant-wait small { color: #177b5d; }
.tracking-refund-success { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 14px; margin: 14px 0; padding: 16px 18px; border: 1px solid #bfe5d7; border-radius: 20px; background: linear-gradient(135deg,#effaf6,#fff); }
.tracking-refund-success > span { display: grid; place-items: center; width: 45px; height: 45px; border-radius: 14px; color: #fff; background: linear-gradient(145deg,#1b9a70,#117955); box-shadow: 0 8px 20px rgba(27,154,112,.18); }
.tracking-refund-success > div { display: grid; gap: 2px; }
.tracking-refund-success small { color: #177b5d; font-size: .65rem; font-weight: 850; }
.tracking-refund-success h2 { margin: 0; font-size: .95rem; }
.tracking-refund-success p { margin: 0; color: #6f7b75; font-size: .68rem; line-height: 1.7; }
.tracking-refund-success > a { padding: 9px 12px; border-radius: 11px; color: #167458; background: #daf3ea; font-size: .68rem; font-weight: 850; text-decoration: none; white-space: nowrap; }
.timeline-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border: 1px solid #e7e2df; border-radius: 10px; color: #665d58; background: #faf9f8; font: inherit; font-size: .65rem; font-weight: 800; cursor: pointer; }

@media (max-width: 760px) {
    .account-wallet-strip { grid-template-columns: auto minmax(0,1fr); margin: 10px 0; padding: 13px; border-radius: 17px; }
    .account-wallet-action { grid-column: 1 / -1; padding-top: 9px; border-top: 1px solid #dceee8; text-align: center; }
    .wallet-page { width: min(100% - 20px, 600px); margin-top: 18px; }
    .wallet-hero { grid-template-columns: 1fr; gap: 20px; padding: 23px 18px; border-radius: 25px; }
    .wallet-hero-copy h1 { font-size: 2.15rem; }
    .wallet-grid { grid-template-columns: 1fr; }
    .wallet-charge-card, .wallet-safety-card, .wallet-transactions-card { padding: 17px; border-radius: 21px; }
    .wallet-quick-amounts { grid-template-columns: repeat(2, 1fr); }
    .tracking-cancellation-window, .tracking-restaurant-wait { grid-template-columns: auto minmax(0,1fr); padding: 14px; }
    .tracking-cancellation-window .customer-deadline-countdown, .tracking-cancellation-window > button { grid-column: 1 / -1; width: 100%; }
    .tracking-cancellation-window > button { padding: 11px; }
    .tracking-refund-success { grid-template-columns: auto minmax(0,1fr); padding: 14px; }
    .tracking-refund-success > a { grid-column: 1 / -1; text-align: center; }
}

@media (max-width: 430px) {
    .wallet-balance-card { padding: 19px; }
    .wallet-balance-card > strong { font-size: 1.85rem; }
    .wallet-transactions-list article { grid-template-columns: auto minmax(0,1fr); }
    .wallet-transaction-amount { grid-column: 2; justify-self: start; }
}

/* Personalized home: intentionally limited to at most two compact rails. */
.personalized-home-section {
    position: relative;
    overflow: hidden;
    padding: 22px;
    background:
        radial-gradient(circle at 8% 0%, rgba(255, 164, 190, .12), transparent 34%),
        linear-gradient(135deg, #fff8fa 0%, #fffcfd 58%, #fff 100%);
    border: 1px solid #f5e2e8;
    border-radius: 26px;
}

.personalized-home-section.section-similar-favorites {
    background:
        radial-gradient(circle at 92% 5%, rgba(170, 142, 255, .09), transparent 32%),
        linear-gradient(135deg, #faf8ff, #fff 78%);
    border-color: #ece7f5;
}

.personalized-home-section.section-quick {
    background:
        radial-gradient(circle at 10% 100%, rgba(98, 184, 146, .09), transparent 35%),
        linear-gradient(135deg, #f7fcfa, #fff 76%);
    border-color: #e2f0ea;
}

.section-subtitle {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: .65rem;
    line-height: 1.7;
}

.personalized-product-rail {
    position: relative;
    min-width: 0;
    margin-top: 0;
    overflow: hidden;
}

.personalized-product-card {
    display: grid;
    grid-template-columns: 118px minmax(0, 1fr);
    height: 152px;
    min-height: 0;
    max-height: 152px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #eee8e4;
    border-radius: 19px;
    box-shadow: 0 12px 30px rgba(45, 35, 30, .06);
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease;
}

.personalized-product-card:hover {
    box-shadow: 0 16px 34px rgba(45, 35, 30, .1);
    transform: translateY(-2px);
}

.personalized-product-media {
    position: relative;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: #f4f1ef;
}

.personalized-product-media > img,
.personalized-product-media > .media-placeholder {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
}

.personalized-product-media > img {
    display: block;
}

.personalized-product-media .favorite-button {
    top: 9px;
    left: 9px;
    width: 31px;
    height: 31px;
    border-radius: 10px;
}

.personalized-product-copy {
    display: flex;
    min-width: 0;
    padding: 15px;
    flex-direction: column;
}

.personalized-product-copy > span {
    overflow: hidden;
    color: var(--brand);
    font-size: .56rem;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.personalized-product-copy h3 {
    margin: 5px 0 9px;
    overflow: hidden;
    font-size: .9rem;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.personalized-product-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    color: var(--muted);
}

.personalized-product-facts small { font-size: .57rem; }
.personalized-product-facts .fa-star { color: #ffad1f; }

.personalized-product-footer {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
    padding-top: 10px;
}

.personalized-product-footer strong { font-size: .76rem; }
.personalized-product-footer strong small { color: var(--muted); font-size: .52rem; }
.personalized-product-footer > i { color: var(--brand); font-size: .72rem; }

.restaurant-meta { flex-wrap: wrap; }
.restaurant-meta .on-time-badge,
.search-performance-badge,
.performance-chip {
    color: #167356;
    font-weight: 800;
}

.restaurant-meta .on-time-badge {
    flex-basis: 100%;
    width: fit-content;
    margin-top: 2px;
}

.performance-chip {
    display: inline-flex;
    gap: 5px;
    align-items: center;
    padding: 7px 10px;
    background: #edf9f4;
    border: 1px solid #d3eee2;
    border-radius: 999px;
    font-size: .61rem;
}

@media (max-width: 640px) {
    .personalized-home-section {
        padding: 16px 13px;
        border-radius: 21px;
    }

    .personalized-home-section .section-title-row {
        align-items: start;
    }

    .personalized-home-section .text-action { display: none; }
    .section-subtitle { max-width: 90%; font-size: .61rem; }

    .personalized-product-card {
        grid-template-columns: 104px minmax(0, 1fr);
        height: 140px;
        min-height: 0;
        max-height: 140px;
        border-radius: 17px;
    }

    .personalized-product-copy { padding: 13px 12px; }
    .personalized-product-copy h3 { font-size: .84rem; }
    .personalized-product-facts { gap: 7px; }
    .personalized-product-footer strong { font-size: .7rem; }
}

/* Loyalty club — simplified, value-first experience */
.points-hero.points-hero-simple {
    color: #241f1c;
    border: 1px solid #f2d9cb;
    background:
        radial-gradient(circle at 6% 110%, rgba(255, 93, 56, .14), transparent 34%),
        radial-gradient(circle at 92% -15%, rgba(255, 181, 116, .3), transparent 32%),
        linear-gradient(135deg, #fffaf7 0%, #fff0e7 100%);
    box-shadow: 0 24px 65px rgba(92, 53, 34, .11);
}
.points-hero.points-hero-simple::after { border-color: rgba(255, 91, 55, .14); }
.points-hero-simple .points-level { color: #a34029; border-color: #f0cfc0; background: rgba(255,255,255,.62); }
.points-hero-simple h1 { margin-top: 17px; font-size: clamp(2.1rem, 5vw, 4rem); }
.points-hero-simple h1 b { color: #ff5738; }
.points-hero-simple .points-hero-copy > p { max-width: 620px; color: #6f615a; font-size: .92rem; }
.points-value-stat { display: flex; align-items: center; gap: 10px; min-width: 210px; padding: 11px 13px; border: 1px solid rgba(23, 113, 87, .14); border-radius: 16px; background: rgba(255,255,255,.72); }
.points-value-stat > i { display: grid; width: 37px; height: 37px; place-items: center; color: #177157; border-radius: 12px; background: #e9f8f2; }
.points-value-stat > span { display: grid; gap: 2px; }
.points-value-stat small { color: #8a7b73; font-size: .68rem; }
.points-value-stat strong { color: #176b52; font-size: .9rem; }
.points-hero-simple .points-pending { margin: 0; color: #84634f; background: rgba(255,255,255,.65); }

.points-smart-next { position: relative; z-index: 1; align-self: stretch; display: grid; align-content: center; justify-items: start; gap: 7px; padding: 24px; color: #2c2724; border: 1px solid rgba(255,255,255,.9); border-radius: 27px; background: rgba(255,255,255,.78); box-shadow: 0 16px 38px rgba(81, 49, 33, .08); backdrop-filter: blur(12px); }
.smart-next-icon { display: grid; width: 47px; height: 47px; margin-bottom: 3px; place-items: center; color: #ff5738; border-radius: 15px; background: #fff0e9; }
.smart-next-icon.ready { color: #177157; background: #e9f8f2; }
.points-smart-next > small { color: #9c7a69; font-size: .72rem; font-weight: 800; }
.points-smart-next > strong { font-size: 1.05rem; line-height: 1.65; }
.points-smart-next > p { margin: 0; color: #7f716a; font-size: .77rem; line-height: 1.7; }
.points-smart-next > a { display: inline-flex; align-items: center; gap: 7px; margin-top: 7px; padding: 10px 14px; color: #fff; border-radius: 13px; background: #211f1e; font-size: .78rem; font-weight: 850; text-decoration: none; }
.smart-next-progress { width: 100%; height: 7px; margin: 6px 0 2px; overflow: hidden; border-radius: 99px; background: #eee8e4; }
.smart-next-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ff5738, #ffb15d); }

.points-first-tip { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 13px; margin: 18px 0 0; padding: 13px 15px; color: #5c4b42; border: 1px solid #f1ddca; border-radius: 18px; background: #fffbf3; }
.points-first-tip > span { display: grid; width: 39px; height: 39px; place-items: center; color: #a86917; border-radius: 13px; background: #fff0c8; }
.points-first-tip > div { display: grid; gap: 2px; }
.points-first-tip p { margin: 0; color: #877970; font-size: .75rem; line-height: 1.7; }
.points-first-tip button { padding: 8px 12px; border: 0; border-radius: 11px; color: #fff; background: #292522; cursor: pointer; font: inherit; font-size: .74rem; font-weight: 800; }

.points-how-it-works, .points-more-actions { margin: 14px 0 20px; border: 1px solid #ece4df; border-radius: 19px; background: #fff; }
.points-how-it-works > summary, .points-more-actions > summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 17px; cursor: pointer; list-style: none; }
.points-how-it-works > summary::-webkit-details-marker, .points-more-actions > summary::-webkit-details-marker { display: none; }
.points-how-it-works > summary span { display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 800; }
.points-how-it-works > summary span i { color: #ff5738; }
.points-how-it-works > summary > i, .points-more-actions > summary > i { color: #a89c96; transition: transform .2s ease; }
.points-how-it-works[open] > summary > i, .points-more-actions[open] > summary > i { transform: rotate(180deg); }
.points-how-it-works .points-purpose { margin: 0; border: 0; border-top: 1px solid #f0e9e5; border-radius: 0 0 19px 19px; box-shadow: none; }

.points-more-actions > summary > span { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 1px 9px; }
.points-more-actions > summary > span > i { display: grid; grid-row: 1 / 3; width: 37px; height: 37px; place-items: center; color: #ff5738; border-radius: 12px; background: #fff0e9; }
.points-more-actions > summary b { font-size: .84rem; }
.points-more-actions > summary small { color: #93857e; font-size: .68rem; }
.points-more-actions .points-panel { padding: 0 16px 16px; border: 0; border-radius: 0 0 19px 19px; box-shadow: none; }
.points-history-grid { grid-template-columns: 1fr; }
.points-history-grid .points-history-panel { max-width: none; }

.checkout-club-redeem { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 9px 11px; margin: 13px 0; padding: 13px; border: 1px solid #f0d1c3; border-radius: 17px; background: linear-gradient(135deg, #fff8f4, #fff); }
.club-redeem-icon { display: grid; grid-row: 1 / 3; width: 39px; height: 39px; place-items: center; color: #fff; border-radius: 13px; background: linear-gradient(145deg, #ff5738, #ff7c4f); box-shadow: 0 9px 20px rgba(255,87,56,.2); }
.checkout-club-redeem > div { display: grid; gap: 1px; }
.checkout-club-redeem > div small { color: #9a6755; font-size: .65rem; }
.checkout-club-redeem > div strong { color: #2b2522; font-size: .82rem; }
.checkout-club-redeem > div span { color: #887a72; font-size: .66rem; line-height: 1.55; }
.checkout-club-redeem > button { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; padding: 10px; border: 0; border-radius: 12px; color: #fff; background: #ff5738; cursor: pointer; font: inherit; font-size: .76rem; font-weight: 850; }
.checkout-club-redeem > button:disabled { opacity: .65; cursor: wait; }
.checkout-club-message { display: flex; align-items: flex-start; gap: 7px; margin: 8px 0 12px; padding: 9px 10px; border-radius: 11px; font-size: .7rem; line-height: 1.6; }
.checkout-club-message.success { color: #176b52; background: #eaf8f2; }
.checkout-club-message.error { color: #b93d2c; background: #fff0ed; }

@media (max-width: 820px) {
    .points-smart-next { padding: 18px; border-radius: 21px; }
}

@media (max-width: 520px) {
    .points-hero.points-hero-simple { padding: 17px 14px; }
    .points-hero-simple h1 { margin-top: 14px; font-size: 1.9rem; }
    .points-hero-simple .points-balance-row { margin-top: 17px; }
    .points-value-stat { width: 100%; min-width: 0; }
    .points-smart-next { gap: 5px; padding: 15px; }
    .smart-next-icon { width: 40px; height: 40px; border-radius: 13px; }
    .points-smart-next > strong { font-size: .94rem; }
    .points-smart-next > p { display: none; }
    .points-smart-next > a { width: 100%; justify-content: center; }
    .points-first-tip { grid-template-columns: auto minmax(0, 1fr); padding: 11px; }
    .points-first-tip button { grid-column: 1 / -1; width: 100%; }
    .points-how-it-works > summary, .points-more-actions > summary { padding: 12px; }
    .points-how-it-works .points-purpose { margin: 0; }
    .points-reward-card p { min-height: 0; font-size: .75rem; }
}