:root {
      --primary: #2E86D0;
      --primary-light: #4AA3E6;
      --primary-tint: #E6F0FB;
      --ink: #0D1B2E;
      --muted: #7A8AA0;
      --line: #EAF0F7;
      --soft: #F3F8FE;
      --screen: #EEF3F9;
      --danger: #E11765;
      --gradient: linear-gradient(135deg, var(--primary-light), var(--primary));
      font-family: "Schibsted Grotesk", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: var(--ink);
      background: #dde8f4;
    }

    * { box-sizing: border-box; }

    body {
      min-height: 100vh;
      min-height: 100svh;
      margin: 0;
      display: flex;
      justify-content: center;
      align-items: stretch;
      padding: 0;
      background: linear-gradient(180deg, #f7fbff 0%, #dde8f4 100%);
    }

    button {
      border: 0;
      padding: 0;
      font: inherit;
      color: inherit;
      background: none;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }

    .phone {
      position: relative;
      width: min(430px, 100vw);
      min-height: 100vh;
      min-height: 100svh;
      background: transparent;
      box-shadow: none;
    }

    .screen {
      position: relative;
      z-index: 1;
      width: 100%;
      height: 100vh;
      height: 100svh;
      min-height: 640px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      border: 0;
      border-radius: 0;
      background: linear-gradient(180deg, var(--soft) 0%, var(--screen) 240px);
    }

    .content {
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 16px;
      padding: 14px 16px 16px;
      scrollbar-width: none;
    }

    .content::-webkit-scrollbar { display: none; }

    [data-screen-type="detail"] .app-header,
    [data-screen-type="detail"] .tab-bar,
    [data-screen-type="detail"] .refer-float {
      display: none;
    }

    [data-screen-type="detail"] .content {
      padding: 16px;
      gap: 0;
    }

    [data-screen-type="detail"] .screen-view.is-active {
      min-height: 100%;
    }

    .app-header {
      display: flex;
      align-items: center;
      gap: 13px;
      padding: 8px 2px 2px;
    }

    .desktop-nav {
      display: none;
    }

    .logo {
      width: 50px;
      height: 50px;
      flex: 0 0 50px;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 15px;
      background: #fff;
      box-shadow: 0 6px 16px rgba(13, 27, 46, .16);
    }

    .logo img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: contain;
    }

    .title-block {
      min-width: 0;
      flex: 1;
    }

    .title {
      margin: 0;
      font-size: 22px;
      line-height: 1.05;
      font-weight: 800;
      white-space: nowrap;
    }

    .title span { color: var(--primary); }

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

    .header-actions {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      gap: 7px;
    }

    .wallet-pill {
      height: 37px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 0 12px;
      border-radius: 999px;
      color: #fff;
      background: var(--gradient);
      box-shadow: 0 4px 11px rgba(58, 174, 217, .32);
      font-size: 13px;
      font-weight: 800;
    }

    .bag-button {
      position: relative;
      width: 37px;
      height: 37px;
      display: grid;
      place-items: center;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: #fff;
      color: var(--ink);
      box-shadow: 0 3px 9px rgba(13, 27, 46, .07);
    }

    .bag-extra-action {
      position: relative;
      width: 37px;
      height: 37px;
      display: none;
      place-items: center;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: #fff;
      color: var(--ink);
      box-shadow: 0 3px 9px rgba(13, 27, 46, .07);
    }

    .badge {
      position: absolute;
      top: -5px;
      right: -6px;
      min-width: 17px;
      height: 17px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 4px;
      border: 2px solid #fff;
      border-radius: 999px;
      color: #fff;
      background: var(--primary);
      font-size: 10px;
      font-weight: 800;
    }

    .panel {
      border: 1px solid var(--line);
      border-radius: 22px;
      background: #fff;
      box-shadow: 0 10px 24px rgba(20, 40, 80, .05);
    }


    .home-search {
      position: relative;
      height: 52px;
      display: flex;
      align-items: center;
      gap: 11px;
      padding: 6px 6px 6px 17px;
      border: 1px solid #E7EEF6;
      border-radius: 999px;
      background: #fff;
      box-shadow: 0 8px 20px rgba(13, 27, 46, .08);
    }

    .new-search-suggestions {
      position: absolute;
      top: calc(100% + 8px);
      left: 0;
      right: 0;
      z-index: 80;
      display: grid;
      gap: 6px;
      max-height: min(356px, 62vh);
      overflow: auto;
      padding: 8px;
      border: 1px solid rgba(46, 134, 208, .14);
      border-radius: 20px;
      background: rgba(255, 255, 255, .98);
      box-shadow: 0 20px 46px rgba(13, 27, 46, .18);
      backdrop-filter: blur(16px);
    }

    .new-search-suggestions[hidden] {
      display: none;
    }

    .new-search-suggestions button {
      min-height: 52px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 10px 12px;
      border: 0;
      border-radius: 15px;
      color: var(--ink);
      background: linear-gradient(135deg, #F7FCFF, #FFFFFF);
      text-align: left;
      transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
    }

    .new-search-suggestions button:active {
      transform: scale(.985);
    }

    .new-search-suggestions button:hover,
    .new-search-suggestions button:focus-visible {
      background: linear-gradient(135deg, rgba(80, 194, 233, .18), #FFFFFF);
      box-shadow: 0 10px 20px rgba(46, 134, 208, .12);
      outline: none;
    }

    .new-search-suggestions span {
      flex: 1;
      min-width: 0;
      display: grid;
      gap: 4px;
    }

    .new-search-suggestions strong {
      display: block;
      overflow: hidden;
      color: #11243A;
      font-size: 13.5px;
      font-weight: 800;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .new-search-suggestions small {
      display: block;
      overflow: hidden;
      color: #6C7D91;
      font-size: 11.5px;
      font-weight: 700;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .new-search-suggestions b {
      flex: 0 0 auto;
      padding: 5px 8px;
      border-radius: 999px;
      color: #0875A4;
      background: rgba(80, 194, 233, .16);
      font-size: 9.5px;
      font-weight: 900;
      letter-spacing: .06em;
      text-transform: uppercase;
    }

    .home-search > span {
      flex: 1;
      min-width: 0;
      overflow: hidden;
      color: #9AA8BD;
      font-size: 14px;
      font-weight: 500;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .home-round-action {
      width: 32px;
      height: 32px;
      flex: 0 0 32px;
      display: grid;
      place-items: center;
      border-radius: 999px;
      color: var(--primary);
      background: #ECF2FB;
    }

    .home-round-action.is-primary {
      width: 40px;
      height: 40px;
      flex-basis: 40px;
      color: #fff;
      background: var(--gradient);
      box-shadow: 0 6px 14px rgba(46, 134, 208, .42);
    }

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

    .home-chip {
      min-height: 84px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 7px;
      padding: 12px 2px;
      border-radius: 16px;
      color: var(--ink);
      background: #E8F2FC;
      text-align: center;
    }

    .home-chip-icon {
      width: 38px;
      height: 38px;
      display: grid;
      place-items: center;
      border-radius: 999px;
      color: #fff;
      background: var(--gradient);
      box-shadow: 0 5px 11px rgba(46, 134, 208, .4);
    }

    .home-chip span:last-child {
      font-size: 10px;
      font-weight: 700;
      line-height: 1.15;
    }

    .home-promo-banner {
      width: 100%;
      display: block;
      border-radius: 20px;
      box-shadow: 0 12px 26px rgba(13, 27, 46, .12);
    }

    .home-banner-carousel {
      position: relative;
      overflow: hidden;
      width: 100%;
      aspect-ratio: 1200 / 545;
      border-radius: 20px;
      background: linear-gradient(135deg, #041a4d, #0d61d8);
      box-shadow: 0 14px 30px rgba(13, 27, 46, .18);
      isolation: isolate;
    }

    .home-static-offer-banner {
      position: absolute;
      inset: 0;
      overflow: hidden;
      padding: 0;
      width: 100%;
      height: 100%;
      background: #062579;
      opacity: 0;
      animation: homeBannerFade 12s infinite;
      will-change: opacity;
    }

    .home-static-offer-banner:nth-of-type(2) {
      animation-delay: 4s;
    }

    .home-static-offer-banner:nth-of-type(3) {
      animation-delay: 8s;
    }

    .home-static-offer-banner picture,
    .home-static-offer-banner img {
      width: 100%;
      height: 100%;
      display: block;
    }

    .home-static-offer-banner img {
      object-fit: cover;
    }

    .home-banner-dots {
      position: absolute;
      right: 14px;
      bottom: 10px;
      z-index: 2;
      display: flex;
      gap: 5px;
      padding: 5px 7px;
      border-radius: 999px;
      background: rgba(3, 15, 43, .34);
      backdrop-filter: blur(8px);
    }

    .home-banner-dots span {
      width: 6px;
      height: 6px;
      border-radius: 999px;
      background: rgba(255, 255, 255, .58);
      animation: homeBannerDot 12s infinite;
    }

    .home-banner-dots span:nth-child(2) {
      animation-delay: 4s;
    }

    .home-banner-dots span:nth-child(3) {
      animation-delay: 8s;
    }

    .home-customer-celebration {
      position: relative;
      overflow: hidden;
      display: grid;
      gap: 13px;
      padding: 16px;
      border: 1px solid rgba(255, 255, 255, .5);
      border-radius: 22px;
      color: #fff;
      background:
        radial-gradient(circle at 88% 4%, rgba(255, 221, 125, .55) 0 16%, transparent 34%),
        linear-gradient(135deg, #3AAED9 0%, #2E86D0 48%, #1357A4 100%);
      box-shadow: 0 16px 32px rgba(46, 134, 208, .24);
      isolation: isolate;
    }

    .home-customer-celebration::before {
      content: "";
      position: absolute;
      inset: auto -30px -56px auto;
      width: 150px;
      height: 150px;
      border-radius: 999px;
      background: rgba(255, 255, 255, .13);
      z-index: -1;
    }

    .home-customer-celebration-top {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 12px;
      align-items: start;
    }

    .home-celebration-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 10px;
      border: 1px solid rgba(255, 255, 255, .32);
      border-radius: 999px;
      color: #FDF7D8;
      background: rgba(255, 255, 255, .14);
      backdrop-filter: blur(8px);
      font-size: 10.5px;
      font-weight: 800;
      letter-spacing: .05em;
      text-transform: uppercase;
    }

    .home-celebration-pill svg {
      color: #FFE082;
      fill: currentColor;
    }

    .home-customer-celebration h2 {
      margin: 10px 0 0;
      color: #fff;
      font-size: 23px;
      font-weight: 900;
      line-height: 1.06;
      letter-spacing: -.3px;
    }

    .home-customer-celebration p {
      margin: 8px 0 0;
      max-width: 31em;
      color: rgba(255, 255, 255, .88);
      font-size: 12.5px;
      line-height: 1.5;
      font-weight: 600;
    }

    .home-celebration-number {
      width: 76px;
      min-height: 76px;
      display: grid;
      place-items: center;
      align-content: center;
      gap: 1px;
      padding: 8px;
      border-radius: 21px;
      color: #0E4E8B;
      background: linear-gradient(180deg, #FFFFFF 0%, #EAF7FF 100%);
      box-shadow: 0 14px 24px rgba(6, 45, 91, .24);
      transform: rotate(2deg);
    }

    .home-celebration-number strong {
      display: block;
      font-size: 25px;
      font-weight: 950;
      line-height: 1;
      letter-spacing: -.8px;
    }

    .home-celebration-number small {
      color: #5C6B81;
      font-size: 9.5px;
      font-weight: 800;
      text-transform: uppercase;
    }

    .home-celebration-points {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 7px;
    }

    .home-celebration-points span {
      min-height: 38px;
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 3px;
      padding: 8px 6px;
      border-radius: 13px;
      color: #fff;
      background: rgba(255, 255, 255, .15);
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
      font-size: 9.8px;
      line-height: 1.1;
      font-weight: 800;
      text-align: center;
      white-space: normal;
    }

    .home-celebration-points svg {
      flex: 0 0 auto;
      color: #FFE082;
    }

    .home-celebration-action {
      min-height: 44px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 0 16px;
      border-radius: 14px;
      color: #0D4F8F;
      background: #FFFFFF;
      box-shadow: 0 10px 22px rgba(6, 45, 91, .24);
      font-size: 13.5px;
      font-weight: 900;
    }

    @keyframes homeBannerFade {
      0%, 30% {
        opacity: 1;
        z-index: 1;
      }

      35%, 95% {
        opacity: 0;
        z-index: 0;
      }

      100% {
        opacity: 1;
        z-index: 1;
      }
    }

    @keyframes homeBannerDot {
      0%, 30% {
        width: 17px;
        background: #fff;
      }

      35%, 100% {
        width: 6px;
        background: rgba(255, 255, 255, .58);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .home-static-offer-banner,
      .home-banner-dots span {
        animation: none;
      }

      .home-static-offer-banner:first-of-type {
        opacity: 1;
        z-index: 1;
      }
    }

    .home-section-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 2px;
    }

    .home-section-title {
      display: flex;
      align-items: center;
      gap: 7px;
      font-size: 18px;
      font-weight: 800;
      color: var(--ink);
    }

    .home-section-title svg {
      color: var(--primary);
      fill: currentColor;
    }

    .home-view-all {
      display: flex;
      align-items: center;
      gap: 2px;
      color: var(--primary);
      font-size: 13px;
      font-weight: 700;
    }

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

    @keyframes achebeShimmer {
      0% {
        background-position: 120% 0;
      }
      100% {
        background-position: -120% 0;
      }
    }

    @keyframes productLoadingFloat {
      0%, 100% {
        transform: translateY(0) scale(1);
      }
      50% {
        transform: translateY(-5px) scale(1.04);
      }
    }

    @keyframes productLoadingBar {
      0% {
        transform: translateX(-100%);
      }
      100% {
        transform: translateX(260%);
      }
    }

    .home-best-rail {
      display: flex;
      gap: 11px;
      overflow-x: auto;
      margin: 0 -2px;
      padding: 2px 2px 4px;
      scrollbar-width: none;
    }

    .home-best-rail::-webkit-scrollbar {
      display: none;
    }

    .home-best-card {
      flex: 0 0 142px;
      overflow: hidden;
      border: 1px solid #E7EEF6;
      border-radius: 16px;
      background: #fff;
      box-shadow: 0 6px 16px rgba(13, 27, 46, .07);
    }

    .home-best-image {
      position: relative;
      width: 100%;
      height: 120px;
      background: #F3EADF;
    }

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

    .home-best-image span {
      position: absolute;
      top: 8px;
      left: 8px;
      display: inline-flex;
      align-items: center;
      gap: 3px;
      padding: 3px 7px;
      border-radius: 999px;
      background: rgba(255, 255, 255, .94);
      color: var(--ink);
      box-shadow: 0 2px 6px rgba(13, 27, 46, .14);
      font-size: 10px;
      font-weight: 800;
    }

    .home-best-image span svg {
      color: #F2A93B;
      fill: currentColor;
    }

    .home-best-body {
      padding: 9px 10px 11px;
    }

    .home-best-body small {
      display: block;
      color: var(--primary);
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .06em;
      text-transform: uppercase;
    }

    .home-best-body strong {
      height: 31px;
      display: block;
      overflow: hidden;
      margin-top: 3px;
      color: var(--ink);
      font-size: 12.5px;
      font-weight: 700;
      line-height: 1.25;
    }

    .home-best-body div {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-top: 6px;
    }

    .home-best-body em {
      color: var(--ink);
      font-size: 15px;
      font-style: normal;
      font-weight: 800;
    }

    .home-best-body del {
      color: #9AA8BD;
      font-size: 11px;
      font-weight: 600;
    }

    .home-best-body button {
      width: 26px;
      height: 26px;
      display: grid;
      place-items: center;
      margin-left: auto;
      border-radius: 9px;
      color: #fff;
      background: var(--gradient);
      box-shadow: 0 4px 10px rgba(46, 134, 208, .4);
    }

    .home-about-card {
      padding: 20px;
      border: 1px solid var(--line);
      border-radius: 22px;
      background: linear-gradient(135deg, #E6F0FB 0%, #F6F0E4 100%);
    }

    .home-about-card p {
      margin: 14px 0 0;
      color: #5C6B81;
      font-size: 14px;
      line-height: 1.6;
    }

    .home-footer-line {
      height: 1px;
      margin: 2px 2px;
      background: #E4ECF3;
    }

    .home-footer-copy {
      padding: 0 2px;
      color: var(--muted);
      font-size: 13px;
    }

    .home-footer-tags {
      display: flex;
      gap: 9px;
      padding: 2px 0 0;
    }

    .home-footer-tags span {
      flex: 1;
      display: grid;
      grid-template-columns: 32px minmax(0, 1fr);
      align-items: center;
      gap: 9px;
      padding: 11px 12px;
      border: 1px solid #E7EEF6;
      border-radius: 14px;
      color: var(--ink);
      background: #fff;
      box-shadow: 0 4px 12px rgba(13, 27, 46, .05);
      font-size: 12px;
      font-weight: 800;
    }

    .home-footer-tags svg {
      grid-row: span 2;
      width: 32px !important;
      height: 32px !important;
      padding: 7px;
      border-radius: 10px;
      color: var(--primary);
      background: var(--primary-tint);
    }

    .home-footer-tags strong,
    .home-footer-tags small {
      display: block;
      min-width: 0;
    }

    .home-footer-tags small {
      color: var(--muted);
      font-size: 10.5px;
      font-weight: 500;
    }

    .install-app-nudge {
      position: absolute;
      right: 14px;
      bottom: 98px;
      left: 14px;
      z-index: 8;
      min-height: 68px;
      display: none;
      grid-template-columns: 38px minmax(0, 1fr) auto 28px;
      align-items: center;
      gap: 9px;
      padding: 10px 8px 10px 10px;
      border: 1px solid rgba(46, 134, 208, .2);
      border-radius: 8px;
      background: rgba(255, 255, 255, .98);
      box-shadow: 0 16px 36px rgba(13, 27, 46, .2);
    }

    .install-app-nudge.is-active { display: grid; }

    .install-app-nudge > img {
      width: 38px;
      height: 38px;
      border: 1px solid var(--line);
      border-radius: 8px;
      object-fit: contain;
      background: #fff;
    }

    .install-app-nudge-copy {
      min-width: 0;
      display: block;
    }

    .install-app-nudge-copy strong,
    .install-app-nudge-copy small {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .install-app-nudge-copy strong {
      color: var(--ink);
      font-size: 12.5px;
      font-weight: 850;
      line-height: 1.2;
    }

    .install-app-nudge-copy small {
      margin-top: 3px;
      color: var(--muted);
      font-size: 10.5px;
      font-weight: 600;
      line-height: 1.25;
    }

    .install-app-nudge-action {
      min-width: 58px;
      min-height: 34px;
      padding: 0 12px;
      border-radius: 8px;
      color: #fff;
      background: var(--primary);
      box-shadow: 0 7px 15px rgba(46, 134, 208, .25);
      font-size: 11px;
      font-weight: 850;
    }

    .install-app-nudge-dismiss {
      width: 28px;
      height: 34px;
      display: grid;
      place-items: center;
      border-radius: 8px;
      color: var(--muted);
    }

    .install-app-nudge-dismiss:focus-visible,
    .install-app-nudge-action:focus-visible {
      outline: 3px solid rgba(46, 134, 208, .28);
      outline-offset: 2px;
    }

    .whatsapp-float {
      position: absolute;
      right: 22px;
      bottom: 190px;
      z-index: 6;
      min-width: 118px;
      height: 42px;
      display: none;
      align-items: center;
      justify-content: center;
      gap: 7px;
      padding: 0 14px;
      border: 2px solid rgba(255, 255, 255, .7);
      border-radius: 999px;
      color: #fff;
      background: #25D366;
      box-shadow: 0 10px 22px rgba(37, 211, 102, .36);
      font-size: 8px;
      font-weight: 900;
      letter-spacing: .04em;
      line-height: 1;
      text-align: center;
    }

    .whatsapp-float.is-active { display: inline-flex; }

    .refer-float {
      position: absolute;
      right: 14px;
      bottom: 98px;
      z-index: 6;
      width: 84px;
      height: 84px;
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2px;
      border: 2px solid rgba(255, 255, 255, .55);
      border-radius: 999px;
      color: #fff;
      background: linear-gradient(140deg, #4AA3E6, #1F6FB8);
      box-shadow: 0 12px 24px rgba(31, 111, 184, .45);
      font-size: 8px;
      font-weight: 800;
      line-height: 1.1;
      text-align: center;
    }

    .refer-float.is-active { display: flex; }

    .refer-float strong {
      font-size: 10px;
    }

    .phone.has-install-nudge .refer-float { bottom: 178px; }
    .phone.has-install-nudge .whatsapp-float { bottom: 270px; }

    .product-search-wrap {
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .product-topbar {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    [data-screen="product"].screen-view {
      gap: 12px;
    }

    .product-collections {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .product-section-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding-inline: 0;
    }

    .product-section-head h2 {
      margin: 0;
      color: var(--ink);
      font-size: 17px;
      font-weight: 800;
      line-height: 1.15;
      letter-spacing: 0;
    }

    .product-section-head button {
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      gap: 3px;
      color: var(--primary);
      font-size: 13px;
      font-weight: 800;
    }

    .product-subcats {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 7px;
    }

    .product-subcat {
      width: 100%;
      aspect-ratio: 1 / 1.12;
      overflow: hidden;
      position: relative;
      border-radius: 14px;
      background: #FBF4EC;
      box-shadow: 0 5px 13px rgba(13, 27, 46, .12);
    }

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

    .product-subcat::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .18) 45%, rgba(0, 0, 0, .6) 100%);
    }

    .product-subcat::before {
      display: none;
    }

    .product-subcat-back {
      grid-column: 1 / -1;
      min-height: 48px;
      aspect-ratio: auto;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 10px;
      padding: 8px 12px;
      border: 1px dashed rgba(80, 194, 233, .72);
      border-radius: 16px;
      background:
        linear-gradient(135deg, rgba(80, 194, 233, .18), rgba(255, 255, 255, .94)),
        #fff;
      color: var(--primary);
    }

    .product-subcat-back::after {
      background: linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(80, 194, 233, .1));
    }

    .product-subcat-back-icon {
      position: relative;
      z-index: 2;
      width: 34px;
      height: 34px;
      flex: 0 0 34px;
      display: grid;
      place-items: center;
      border-radius: 14px;
      color: #fff;
      background: linear-gradient(135deg, #50C2E9, #2E86D0);
      box-shadow: 0 8px 18px rgba(58, 174, 217, .24);
    }

    .product-subcat-back .product-subcat-copy {
      position: relative;
      inset: auto;
      display: flex;
      width: auto;
      min-width: 0;
      text-align: left;
      align-items: flex-start;
      color: #0D3650;
    }

    .product-subcat-back .product-subcat-title {
      padding: 0;
      color: #0D3650;
      background: transparent;
      font-size: 13px;
      font-weight: 900;
      text-shadow: none;
    }

    .product-subcat-back .product-subcat-count {
      display: block;
      color: rgba(13, 54, 80, .72);
      font-size: 10px;
      line-height: 1.15;
      text-shadow: none;
    }

    .product-subcat-copy {
      position: absolute;
      z-index: 2;
      left: 0;
      right: 0;
      bottom: 9px;
      width: auto;
      height: auto;
      overflow: visible;
      clip: auto;
      color: #fff;
      padding: 0 6px;
      font-size: 9.5px;
      font-weight: 800;
      line-height: 1.12;
      text-align: center;
      white-space: normal;
    }

    .product-subcat-title {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 3px 8px;
      border-radius: 8px;
      background: rgba(13, 27, 46, .62);
    }

    .product-subcat-count {
      display: none;
    }

    .home-category-grid .product-subcat {
      aspect-ratio: 1 / 1;
      border-radius: 16px;
      box-shadow: 0 5px 13px rgba(13, 27, 46, .12);
    }

    .home-category-grid .product-subcat-copy {
      font-size: 10px;
      line-height: 1.12;
    }

    .home-category-grid .is-loading-home-category {
      overflow: hidden;
      border: 1px solid rgba(226, 239, 249, .96);
      background:
        linear-gradient(110deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.78) 44%, rgba(255,255,255,0) 72%) 120% 0 / 220% 100% no-repeat,
        linear-gradient(145deg, #F8FCFF 0%, #EAF7FD 58%, #DDF2FB 100%);
      box-shadow: 0 6px 16px rgba(46,134,208,.11);
      cursor: default;
      animation: achebeShimmer 1.35s ease-in-out infinite;
    }

    .home-category-grid .is-loading-home-category::after {
      display: none;
    }

    .home-category-grid .is-loading-home-category::before {
      content: "";
      position: absolute;
      inset: 12px 16px 34px;
      display: block;
      border-radius: 18px;
      background:
        radial-gradient(circle at 42% 38%, rgba(80,194,233,.3) 0 22%, transparent 23%),
        radial-gradient(circle at 62% 55%, rgba(58,174,217,.18) 0 18%, transparent 19%),
        linear-gradient(145deg, rgba(80,194,233,.2), rgba(255,255,255,.64));
      opacity: .9;
    }

    .home-category-skeleton {
      position: absolute;
      inset: 0;
      pointer-events: none;
    }

    .home-category-grid .is-loading-home-category .product-subcat-copy {
      bottom: 10px;
    }

    .home-category-grid .is-loading-home-category .product-subcat-title {
      width: min(70px, 72%);
      height: 12px;
      padding: 0;
      border-radius: 999px;
      background: rgba(80,194,233,.32);
      color: transparent;
    }

    .home-collection-card:nth-child(n+9) img {
      height: 100%;
      object-position: center top;
      transform: none;
      transform-origin: top center;
    }

    @media (min-width: 410px) {
      .product-subcats {
        gap: 8px;
      }
    }

    .product-filter-row {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .product-filter-button,
    .product-sort-button {
      flex: 1;
      height: 42px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      padding: 0 16px;
      border: 1px solid #E7EEF6;
      border-radius: 12px;
      color: var(--ink);
      background: #fff;
      box-shadow: 0 4px 12px rgba(13, 27, 46, .06);
      font-size: 14.5px;
      font-weight: 800;
    }

    .product-filter-button {
      border-color: transparent;
      color: #fff;
      background: var(--gradient);
      box-shadow: 0 8px 18px rgba(46, 134, 208, .4);
    }

    .product-filter-count {
      min-width: 20px;
      height: 20px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0 5px;
      border-radius: 999px;
      color: var(--primary);
      background: #fff;
      font-size: 11px;
      font-weight: 800;
    }

    .product-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6px;
      margin-inline: -6px;
    }

    .product-pull-indicator {
      --pull-distance: 0px;
      --pull-progress: 0;
      height: 0;
      margin: 0;
      opacity: var(--pull-progress);
      overflow: visible;
      pointer-events: none;
      transform: translateY(calc((var(--pull-distance) * .6) - 48px));
      transition: opacity .18s ease, transform .18s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      color: #0B5D83;
      font-size: 12px;
      font-weight: 900;
      position: relative;
      z-index: 8;
    }

    .product-pull-indicator > span {
      width: 34px;
      height: 34px;
      display: inline-grid;
      place-items: center;
      border-radius: 999px;
      color: #fff;
      background: radial-gradient(circle at 28% 22%, rgba(255,255,255,.72), transparent 34%), linear-gradient(135deg, #50C2E9, #2E86D0 54%, #0F6B8F);
      box-shadow: 0 12px 26px rgba(58, 174, 217, .34);
    }

    .product-pull-indicator strong {
      min-height: 34px;
      display: inline-flex;
      align-items: center;
      padding: 0 14px;
      border: 1px solid rgba(80, 194, 233, .32);
      border-radius: 999px;
      background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(232,248,253,.94));
      box-shadow: 0 14px 32px rgba(13, 27, 46, .1);
    }

    .product-pull-indicator.is-ready > span,
    .product-pull-indicator.is-refreshing > span {
      background: radial-gradient(circle at 28% 22%, rgba(255,255,255,.78), transparent 34%), linear-gradient(135deg, #F0B63F, #50C2E9 58%, #2E86D0);
    }

    .product-pull-indicator.is-refreshing svg {
      animation: ordersRefreshSpin .78s linear infinite;
    }

    .product-refresh-pill {
      width: 34px;
      height: 34px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      flex: 0 0 34px;
      margin: 0 8px 0 0;
      padding: 0;
      border: 1px solid rgba(80, 194, 233, .35);
      border-radius: 999px;
      color: #0B5D83;
      background:
        radial-gradient(circle at 20% 10%, rgba(255,255,255,.82), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,.96), rgba(232,248,253,.94));
      box-shadow: 0 12px 28px rgba(13, 27, 46, .08);
      font-size: 12px;
      font-weight: 900;
      transition: transform .18s ease, box-shadow .18s ease;
    }

    .product-refresh-pill span {
      width: 28px;
      height: 28px;
      display: inline-grid;
      place-items: center;
      border-radius: 999px;
      color: #fff;
      background: linear-gradient(135deg, #50C2E9, #2E86D0);
      box-shadow: 0 8px 18px rgba(58, 174, 217, .28);
    }

    .product-heading {
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .product-refresh-pill:active {
      transform: scale(.97);
    }

    .product-refresh-pill.is-refreshing span,
    [data-screen="product"]:has(.product-pull-indicator.is-refreshing) .product-refresh-pill span {
      animation: ordersRefreshSpin .78s linear infinite;
    }

    .product-grid .product-loading-state {
      grid-column: 1 / -1;
      width: min(100%, 520px);
      justify-self: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
      margin: 12px 6px 24px;
      padding: 28px 16px 18px;
      overflow: hidden;
      border: 1px solid rgba(10, 116, 187, .16);
      border-radius: 28px;
      color: var(--ink);
      background:
        radial-gradient(circle at 18% 8%, rgba(80, 194, 233, .28), transparent 32%),
        radial-gradient(circle at 82% 0%, rgba(240, 182, 63, .2), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,.98) 0%, #F5FBFF 100%);
      box-shadow: 0 18px 42px rgba(13, 27, 46, .1);
    }

    .product-loading-orb {
      width: 72px;
      height: 72px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 24px;
      color: #fff;
      background: linear-gradient(135deg, #0A74BB 0%, #3AAED9 56%, #F0B63F 100%);
      box-shadow: 0 18px 34px rgba(10, 116, 187, .3);
      animation: productLoadingFloat 1.8s ease-in-out infinite;
    }

    .product-loading-copy {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 5px;
      text-align: center;
    }

    .product-loading-copy span {
      color: var(--primary);
      font-size: 13px;
      font-weight: 900;
      text-transform: uppercase;
    }

    .product-loading-copy strong {
      color: var(--ink);
      font-size: 21px;
      font-weight: 900;
      line-height: 1.2;
    }

    .product-loading-copy small {
      max-width: 270px;
      color: var(--muted);
      font-size: 13px;
      font-weight: 700;
      line-height: 1.45;
    }

    .product-loading-bar {
      position: relative;
      width: min(240px, 78%);
      height: 8px;
      overflow: hidden;
      border-radius: 999px;
      background: rgba(10, 116, 187, .12);
    }

    .product-loading-bar span {
      position: absolute;
      inset: 0 auto 0 0;
      width: 42%;
      border-radius: inherit;
      background: linear-gradient(90deg, #0A74BB 0%, #50C2E9 54%, #F0B63F 100%);
      animation: productLoadingBar 1.2s ease-in-out infinite;
    }

    .product-loading-shelf {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 9px;
      margin-top: 2px;
    }

    .product-loading-shelf span {
      min-width: 0;
      display: grid;
      gap: 7px;
      padding: 8px;
      border: 1px solid rgba(211, 228, 243, .9);
      border-radius: 18px;
      background: rgba(255,255,255,.72);
      box-shadow: 0 10px 20px rgba(13, 27, 46, .06);
    }

    .product-loading-shelf em,
    .product-loading-shelf b,
    .product-loading-shelf i {
      display: block;
      border-radius: 999px;
      background: linear-gradient(100deg, #E8F3FB 20%, #FFFFFF 42%, #DDEDF8 68%);
      background-size: 220% 100%;
      animation: achebeShimmer 1.15s linear infinite;
    }

    .product-loading-shelf em {
      height: 58px;
      border-radius: 14px;
    }

    .product-loading-shelf b {
      height: 9px;
      width: 82%;
    }

    .product-loading-shelf i {
      height: 9px;
      width: 56%;
    }

    .product-sheet-layer {
      position: absolute;
      inset: 0;
      z-index: 30;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      background: rgba(13, 27, 46, .45);
    }

    .product-sheet-layer[hidden],
    .product-sheet[hidden] {
      display: none;
    }

    .product-sheet-backdrop {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
    }

    .product-sheet {
      position: relative;
      z-index: 1;
      padding: 18px 18px 22px;
      border-radius: 26px 26px 0 0;
      background: #fff;
      box-shadow: 0 -12px 40px rgba(13, 27, 46, .22);
    }

    .sheet-handle {
      width: 42px;
      height: 5px;
      margin: 0 auto 16px;
      border-radius: 999px;
      background: #E2E9F1;
    }

    .sheet-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16px;
    }

    .sheet-head strong {
      font-size: 18px;
      font-weight: 800;
    }

    .sheet-head button {
      width: 32px;
      height: 32px;
      display: grid;
      place-items: center;
      color: #fff;
      border-radius: 999px;
      background: linear-gradient(140deg, var(--primary-light), var(--primary));
      box-shadow: 0 6px 14px rgba(46,134,208,.32), inset 0 1px 0 rgba(255,255,255,.35);
    }

    .sheet-label {
      margin-bottom: 9px;
      color: #9AA8BD;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .05em;
    }

    .sheet-chip-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 16px;
    }

    .sheet-chip-row button {
      padding: 9px 15px;
      border: 1px solid #E7EEF6;
      border-radius: 999px;
      color: #5C6B81;
      background: #F2F6FB;
      font-size: 13px;
      font-weight: 700;
    }

    .sheet-chip-row button.is-selected {
      border-color: var(--primary);
      color: #fff;
      background: var(--primary);
    }

    .sheet-actions {
      display: flex;
      gap: 10px;
      margin-top: 4px;
    }

    .sheet-actions button {
      flex: 1;
      min-height: 48px;
      border: 1px solid #E2E9F1;
      border-radius: 13px;
      color: #5C6B81;
      font-size: 14px;
      font-weight: 800;
    }

    .sheet-actions .is-primary {
      flex: 2;
      border-color: transparent;
      color: #fff;
      background: var(--gradient);
      box-shadow: 0 8px 18px rgba(46, 134, 208, .34);
    }

    .sort-option {
      width: 100%;
      min-height: 50px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 15px 2px;
      border-bottom: 1px solid #F0F4F9;
      font-size: 15px;
      font-weight: 600;
      text-align: left;
    }

    .sort-option:last-child {
      border-bottom: 0;
    }

    .sort-option.is-selected {
      font-weight: 700;
    }

    .sort-option span {
      width: 20px;
      height: 20px;
      border: 2px solid #CBD5E1;
      border-radius: 999px;
    }

    .sort-option.is-selected span {
      border: 6px solid var(--primary);
    }

    .product-card {
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      border: 1px solid #EAF0F7;
      border-radius: 20px;
      background: #fff;
      box-shadow: 0 8px 20px rgba(13, 27, 46, .06);
    }

    .product-image {
      position: relative;
      width: 100%;
      aspect-ratio: 1 / 1;
      display: block;
      overflow: hidden;
      background: #F2F6FB;
    }

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

    .product-card.is-out-of-stock {
      border-color: #EAF0F7;
      background: #fff;
    }

    .product-image-stack {
      position: absolute;
      inset: 0;
      display: block;
      overflow: hidden;
      background: #F2F6FB;
    }

    .product-image-stack img {
      position: absolute;
      inset: 0;
      opacity: 0;
      transition: opacity .45s ease, transform .45s ease;
      transform: scale(1.018);
    }

    .product-image-stack img.is-active {
      opacity: 1;
      transform: scale(1);
    }

    .product-card.is-out-of-stock .product-image-stack img.is-active {
      opacity: 1;
    }

    .product-off {
      position: absolute;
      top: 10px;
      left: 10px;
      padding: 4px 9px;
      border-radius: 9px;
      color: #fff;
      background: linear-gradient(135deg, #FF8A3D, #F2542D);
      box-shadow: 0 4px 10px rgba(242, 84, 45, .35);
      font-size: 11px;
      font-weight: 800;
    }

    .product-stock-overlay {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 2;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      padding: 8px 0;
      border: 0;
      border-radius: 0;
      color: #FFFFFF;
      background: rgba(13,27,46,.72);
      box-shadow: none;
      backdrop-filter: blur(2px);
      font-size: 11.5px;
      font-weight: 800;
      letter-spacing: .04em;
      white-space: nowrap;
    }

    .product-heart {
      position: absolute;
      top: 9px;
      right: 9px;
      width: 32px;
      height: 32px;
      display: grid;
      place-items: center;
      border: 0;
      border-radius: 999px;
      color: #E11765;
      background: #fff;
      box-shadow: 0 3px 9px rgba(13, 27, 46, .14);
      z-index: 3;
    }

    .product-heart.is-active {
      color: #fff;
      background: linear-gradient(135deg, #FF4F93, #E11765);
      box-shadow: 0 6px 14px rgba(225, 23, 101, .28);
    }

    .product-heart.is-active svg {
      fill: currentColor;
    }

    .product-card-body {
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding: 12px;
    }

    .product-tags {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
    }

    .product-cat {
      max-width: 100%;
      overflow: hidden;
      padding: 3px 8px;
      border-radius: 7px;
      color: var(--primary);
      background: var(--primary-tint);
      font-size: 10px;
      font-weight: 700;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .product-stock {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 3px 8px;
      border-radius: 7px;
      color: #1F8A5B;
      background: #E4F7EE;
      font-size: 10px;
      font-weight: 700;
    }

    .product-stock::before {
      content: "";
      width: 5px;
      height: 5px;
      border-radius: 999px;
      background: #22C55E;
    }

    .product-stock.is-out {
      color: #B4453A;
      background: #FBEAE8;
    }

    .product-stock.is-out::before {
      background: #D6483C;
    }

    .product-name {
      color: var(--ink);
      font-size: 14px;
      font-weight: 800;
      letter-spacing: -.2px;
      line-height: 1.25;
    }

    .product-desc {
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      color: var(--muted);
      font-size: 11.5px;
      line-height: 1.4;
    }

    .product-price {
      display: flex;
      align-items: baseline;
      gap: 7px;
      margin-top: 1px;
    }

    .product-price strong {
      color: var(--ink);
      font-size: 18px;
      font-weight: 800;
    }

    .product-price del {
      color: #A9B6C7;
      font-size: 12.5px;
    }

    .product-actions {
      display: flex;
      gap: 8px;
      margin-top: 2px;
    }

    .buy-now {
      flex: 1;
      height: 40px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      border-radius: 12px;
      color: #fff;
      background: var(--gradient);
      box-shadow: 0 6px 14px rgba(46, 134, 208, .34);
      font-size: 13px;
      font-weight: 800;
    }

    .details-product {
      min-width: 72px;
      height: 40px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #D8E7F6;
      border-radius: 12px;
      color: var(--primary);
      background: #F7FBFF;
      font-size: 13px;
      font-weight: 800;
    }

    .save-product {
      width: 40px;
      height: 40px;
      display: grid;
      place-items: center;
      border: 1px solid #E7EEF6;
      border-radius: 12px;
      color: var(--primary);
      background: var(--primary-tint);
    }

    .notify-product {
      height: 40px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      margin-top: 2px;
      border: 1px solid #E7EEF6;
      border-radius: 12px;
      color: #7A8AA0;
      background: #F2F6FB;
      font-size: 13px;
      font-weight: 800;
    }

    [data-add-to-bag].is-added,
    .save-product.is-added {
      color: #fff;
      border-color: rgba(21, 181, 109, .5);
      background: linear-gradient(135deg, #19B96F 0%, #07965E 100%);
      box-shadow: 0 10px 20px rgba(7, 150, 94, .24);
      animation: bagTickPop .26s ease-out;
    }

    @keyframes bagTickPop {
      0% { transform: scale(.86); }
      70% { transform: scale(1.08); }
      100% { transform: scale(1); }
    }

    .product-load-more {
      min-height: 44px;
      margin: 4px -6px 0;
      border-radius: 13px;
      color: #fff;
      background: var(--gradient);
      box-shadow: 0 8px 18px rgba(46, 134, 208, .28);
      font-size: 14px;
      font-weight: 800;
    }

    .product-load-more[hidden] {
      display: none;
    }

    .bag-top-actions {
      display: flex;
      align-items: center;
      gap: 7px;
      flex-shrink: 0;
    }

    .bag-icon-button {
      position: relative;
      width: 37px;
      height: 37px;
      display: grid;
      place-items: center;
      border: 1px solid var(--line);
      border-radius: 999px;
      color: var(--ink);
      background: #fff;
      box-shadow: 0 3px 9px rgba(13, 27, 46, .07);
    }

    .bag-alert-dot {
      position: absolute;
      top: 6px;
      right: 7px;
      width: 8px;
      height: 8px;
      border: 2px solid #fff;
      border-radius: 999px;
      background: #E11765;
    }

    .bag-panel {
      border: 1px solid var(--line);
      border-radius: 20px;
      padding: 16px;
      background: #fff;
      box-shadow: 0 8px 20px rgba(13, 27, 46, .05);
    }

    .bag-panel.is-empty-bag-hero-panel {
      padding: 0;
      border: 0;
      background: transparent;
      box-shadow: none;
    }

    .bag-empty-hero {
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      min-height: 310px;
      padding: 28px 20px 22px;
      border-radius: 28px;
      color: #fff;
      background:
        radial-gradient(circle at 16% 16%, rgba(255,255,255,.22), transparent 30%),
        radial-gradient(circle at 82% 22%, rgba(245,166,35,.28), transparent 26%),
        linear-gradient(145deg, #4AA3E6 0%, #2E86D0 48%, #0D1B2E 100%);
      box-shadow: 0 18px 38px rgba(46,134,208,.30);
      text-align: center;
    }

    .bag-empty-hero::before,
    .bag-empty-hero::after {
      content: "";
      position: absolute;
      border-radius: 999px;
      background: rgba(255,255,255,.12);
    }

    .bag-empty-hero::before {
      width: 150px;
      height: 150px;
      right: -54px;
      top: -50px;
    }

    .bag-empty-hero::after {
      width: 118px;
      height: 118px;
      left: -44px;
      bottom: -42px;
    }

    .bag-empty-orbit {
      position: relative;
      z-index: 1;
      width: 92px;
      height: 92px;
      display: grid;
      place-items: center;
      margin-top: 4px;
      border: 1px solid rgba(255,255,255,.55);
      border-radius: 30px;
      color: var(--primary);
      background: #fff;
      box-shadow: 0 18px 32px rgba(13,27,46,.24);
    }

    .bag-empty-orbit::after {
      content: "";
      position: absolute;
      inset: -10px;
      border: 1px dashed rgba(255,255,255,.48);
      border-radius: 34px;
    }

    .bag-empty-spark {
      position: absolute;
      z-index: 1;
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      border-radius: 13px;
      color: #fff;
      background: rgba(255,255,255,.18);
      backdrop-filter: blur(8px);
    }

    .bag-empty-spark.is-one {
      top: 31px;
      right: 42px;
      color: #FFE9A6;
    }

    .bag-empty-spark.is-two {
      left: 44px;
      top: 128px;
      color: #fff;
    }

    .bag-empty-hero h2 {
      position: relative;
      z-index: 1;
      margin: 8px 0 0;
      font-size: 24px;
      line-height: 1.08;
      font-weight: 900;
      letter-spacing: 0;
    }

    .bag-empty-hero p {
      position: relative;
      z-index: 1;
      max-width: 290px;
      margin: 0;
      color: rgba(255,255,255,.82);
      font-size: 13px;
      line-height: 1.48;
      font-weight: 650;
    }

    .bag-empty-primary {
      position: relative;
      z-index: 1;
      width: min(100%, 260px);
      min-height: 50px;
      margin-top: 8px;
      border-radius: 999px;
      color: var(--primary);
      background: #fff;
      box-shadow: 0 14px 28px rgba(13,27,46,.22);
    }

    .bag-panel.is-empty-bag-actions {
      padding: 0;
      border: 0;
      background: transparent;
      box-shadow: none;
    }

    .bag-empty-quick-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
    }

    .bag-empty-quick-grid button {
      min-height: 104px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 5px;
      padding: 10px 8px;
      border: 1px solid var(--line);
      border-radius: 18px;
      background: #fff;
      box-shadow: 0 8px 20px rgba(13,27,46,.05);
      text-align: center;
    }

    .bag-empty-quick-grid span {
      width: 38px;
      height: 38px;
      display: grid;
      place-items: center;
      border-radius: 13px;
      color: var(--primary);
      background: var(--primary-tint);
    }

    .bag-empty-quick-grid strong {
      color: var(--ink);
      font-size: 12.5px;
      line-height: 1.18;
      font-weight: 850;
    }

    .bag-empty-quick-grid small {
      color: var(--muted);
      font-size: 10.5px;
      font-weight: 700;
    }

    .shipping-progress {
      display: flex;
      align-items: flex-start;
      gap: 13px;
    }

    .shipping-progress .menu-copy,
    .shipping-nudge .menu-copy {
      display: block;
    }

    .shipping-progress .menu-copy > span,
    .shipping-nudge .menu-copy > span {
      display: block;
    }

    .shipping-title {
      color: var(--ink);
      font-size: 14.5px;
      font-weight: 800;
      line-height: 1.3;
    }

    .shipping-title span {
      color: var(--primary);
    }

    .shipping-desc {
      margin-top: 3px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.4;
    }

    .progress-row {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 13px;
    }

    .progress-track {
      flex: 1;
      height: 8px;
      overflow: hidden;
      border-radius: 999px;
      background: #E9EFF6;
    }

    .progress-fill {
      width: 58%;
      height: 100%;
      border-radius: 999px;
      background: linear-gradient(90deg, var(--primary-light), var(--primary));
    }

    .progress-left {
      color: var(--ink);
      font-size: 11.5px;
      font-weight: 800;
      white-space: nowrap;
    }

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

    .bag-panel-title {
      color: var(--ink);
      font-size: 16px;
      font-weight: 800;
    }

    .add-more {
      padding: 6px 13px;
      border-radius: 999px;
      color: var(--primary);
      background: var(--primary-tint);
      font-size: 13px;
      font-weight: 700;
    }

    .bag-item {
      display: flex;
      gap: 13px;
      margin-top: 14px;
    }

    .bag-item-image {
      width: 72px;
      height: 72px;
      flex: 0 0 72px;
      overflow: hidden;
      border-radius: 14px;
      background: #F2F6FB;
    }

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

    .bag-item-copy {
      flex: 1;
      min-width: 0;
    }

    .bag-item-title-row {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 8px;
    }

    .bag-item-title {
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      color: var(--ink);
      font-size: 13.5px;
      font-weight: 800;
      line-height: 1.25;
    }

    .trash-button {
      width: 32px;
      height: 32px;
      flex: 0 0 32px;
      display: grid;
      place-items: center;
      border-radius: 999px;
      color: #E11765;
      background: #FFF1F6;
    }

    .trash-button svg {
      width: 15px !important;
      height: 15px !important;
    }

    .bag-color {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-top: 5px;
      color: var(--muted);
      font-size: 12px;
    }

    .bag-color-dot {
      width: 13px;
      height: 13px;
      border: 1px solid #fff;
      border-radius: 999px;
      background: #C9543B;
      box-shadow: 0 0 0 1px #E7EEF6;
    }

    .bag-item-price {
      margin-top: 0;
      color: var(--primary);
      font-size: 15px;
      font-weight: 800;
    }

    .bag-price-qty {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-top: 8px;
    }

    .qty-control {
      display: flex;
      align-items: center;
      overflow: hidden;
      border: 1px solid #E7EEF6;
      border-radius: 999px;
    }

    .qty-control button,
    .qty-control span {
      width: 32px;
      height: 32px;
      display: grid;
      place-items: center;
      color: var(--primary);
      font-size: 20px;
      font-weight: 700;
    }

    .qty-control span {
      min-width: 28px;
      width: auto;
      color: var(--ink);
      font-size: 15px;
      font-weight: 800;
    }

    .bag-line-total {
      color: var(--ink);
      font-size: 16px;
      font-weight: 800;
    }

    .shipping-nudge {
      display: flex;
      align-items: center;
      gap: 13px;
      border: 1px solid #DCEAFB;
      border-radius: 18px;
      padding: 14px;
      background: #E8F2FC;
    }

    .shipping-nudge.is-empty-bag-nudge {
      background: linear-gradient(135deg, #F8FCFE, #E8F2FC);
      box-shadow: 0 8px 20px rgba(46,134,208,.08);
    }

    .bag-panel.is-empty-bag-summary {
      display: grid;
      gap: 10px;
      padding: 0;
      border: 0;
      background: transparent;
      box-shadow: none;
    }

    .bag-empty-summary-card {
      display: grid;
      grid-template-columns: 40px minmax(0, 1fr);
      align-items: center;
      gap: 11px;
      padding: 13px;
      border: 1px solid var(--line);
      border-radius: 17px;
      background: #fff;
      box-shadow: 0 8px 20px rgba(13,27,46,.05);
    }

    .bag-empty-summary-card > span {
      width: 40px;
      height: 40px;
      display: grid;
      place-items: center;
      border-radius: 13px;
      color: #1F8A5B;
      background: #E4F7EE;
    }

    .bag-empty-summary-card strong {
      display: block;
      color: var(--ink);
      font-size: 13.5px;
      font-weight: 850;
    }

    .bag-empty-summary-card small {
      display: block;
      margin-top: 2px;
      color: var(--muted);
      font-size: 11.5px;
      line-height: 1.35;
      font-weight: 650;
    }

    .percent-icon {
      width: 42px;
      height: 42px;
      flex: 0 0 42px;
      display: grid;
      place-items: center;
      border-radius: 13px;
      color: var(--primary);
      background: #fff;
      font-size: 18px;
      font-weight: 800;
    }

    .nudge-title {
      color: var(--ink);
      font-size: 13.5px;
      font-weight: 800;
      line-height: 1.25;
    }

    .nudge-copy {
      margin-top: 2px;
      color: #5C6B81;
      font-size: 11.5px;
      line-height: 1.4;
    }

    .shop-more {
      flex-shrink: 0;
      padding: 9px 15px;
      border-radius: 11px;
      color: #fff;
      background: var(--gradient);
      box-shadow: 0 5px 12px rgba(46, 134, 208, .34);
      font-size: 12.5px;
      font-weight: 800;
      white-space: nowrap;
    }

    .summary-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 11px;
    }

    .summary-row:first-child {
      margin-top: 0;
    }

    .summary-label {
      color: #5C6B81;
      font-size: 13.5px;
      font-weight: 600;
    }

    .summary-value {
      color: var(--ink);
      font-size: 15px;
      font-weight: 800;
    }

    .summary-value del {
      margin-right: 7px;
      color: #A9B6C7;
      font-size: 12.5px;
      font-weight: 600;
    }

    .summary-divider {
      height: 1px;
      margin: 14px 0;
      background: #EEF3F9;
    }

    .summary-total {
      color: var(--primary);
      font-size: 22px;
      font-weight: 800;
    }

    .checkout-block {
      position: absolute;
      right: 16px;
      bottom: 84px;
      left: 16px;
      z-index: 4;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 9px;
      margin: 0;
      padding: 12px 16px 10px;
      border-top: 1px solid #EEF3F9;
      border-radius: 20px 20px 0 0;
      background: #fff;
      box-shadow: 0 -10px 24px rgba(13, 27, 46, .08);
    }

    .checkout-button {
      width: 100%;
      height: 50px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      border-radius: 15px;
      color: #fff;
      background: var(--gradient);
      box-shadow: 0 12px 24px rgba(46, 134, 208, .4);
      font-size: 16px;
      font-weight: 800;
    }

    .checkout-note {
      color: var(--muted);
      font-size: 11px;
      text-align: center;
    }

    .checkout-block.is-empty-bag {
      border-top: 0;
      background: rgba(255,255,255,.96);
      box-shadow: 0 -14px 30px rgba(13,27,46,.10);
    }
    .home-hero {
      position: relative;
      min-height: 176px;
      overflow: hidden;
      border-radius: 24px;
      color: #fff;
      background: linear-gradient(135deg, #50C2E9, #0D1B2E);
      box-shadow: 0 18px 34px rgba(13, 27, 46, .14);
    }

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

    .home-hero::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, rgba(13, 27, 46, .76), rgba(13, 27, 46, .18));
    }

    .home-hero-copy {
      position: relative;
      z-index: 1;
      width: 62%;
      padding: 20px;
    }

    .home-kicker {
      display: inline-flex;
      padding: 5px 10px;
      border-radius: 999px;
      color: #0D1B2E;
      background: rgba(255, 255, 255, .86);
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .08em;
    }

    .home-hero-title {
      margin-top: 12px;
      font-size: 24px;
      line-height: 1.05;
      font-weight: 800;
    }

    .home-hero-text {
      margin-top: 8px;
      color: rgba(255, 255, 255, .82);
      font-size: 12.5px;
      line-height: 1.45;
    }

    .home-hero-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 34px;
      margin-top: 14px;
      padding: 0 14px;
      border-radius: 999px;
      color: #fff;
      background: var(--gradient);
      font-size: 12px;
      font-weight: 800;
      text-decoration: none;
      box-shadow: 0 8px 18px rgba(58, 174, 217, .35);
    }

    .category-strip {
      display: flex;
      gap: 10px;
      overflow-x: auto;
      padding: 2px 2px 4px;
      scrollbar-width: none;
    }

    .category-strip::-webkit-scrollbar { display: none; }

    .category-card {
      width: 76px;
      flex: 0 0 76px;
      border: 0;
      padding: 0;
      background: transparent;
      text-align: center;
      color: var(--ink);
      text-decoration: none;
    }

    .category-thumb {
      width: 76px;
      height: 76px;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 20px;
      background: #fff;
      box-shadow: 0 10px 20px rgba(20, 40, 80, .06);
    }

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

    .category-label {
      display: block;
      margin-top: 7px;
      color: var(--muted);
      font-size: 11.5px;
      font-weight: 700;
    }

    .product-category-strip {
      margin: -2px -2px 0;
      padding-bottom: 6px;
    }

    .icon-category-card .category-thumb {
      display: grid;
      place-items: center;
      color: var(--primary);
      background: linear-gradient(180deg, #fff, var(--primary-tint));
    }

    .icon-category-card .category-label {
      color: var(--ink);
      font-size: 10.5px;
      line-height: 1.2;
    }

    .home-promo-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }

    .home-promo-card {
      min-height: 130px;
      overflow: hidden;
      position: relative;
      border-radius: 22px;
      color: #fff;
      background: #0D1B2E;
      text-decoration: none;
      box-shadow: 0 12px 26px rgba(13, 27, 46, .12);
    }

    .home-promo-card img {
      width: 100%;
      height: 100%;
      position: absolute;
      inset: 0;
      object-fit: cover;
    }

    .home-promo-card::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(13, 27, 46, .05), rgba(13, 27, 46, .74));
    }

    .home-promo-copy {
      position: absolute;
      z-index: 1;
      left: 14px;
      right: 14px;
      bottom: 14px;
    }

    .home-promo-title {
      display: block;
      font-size: 14px;
      font-weight: 800;
      line-height: 1.15;
    }

    .home-promo-subtitle {
      display: block;
      margin-top: 3px;
      color: rgba(255, 255, 255, .78);
      font-size: 11px;
    }

    .home-feature-card {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: 22px;
      background: #fff;
      box-shadow: 0 10px 24px rgba(20, 40, 80, .05);
    }

    .home-feature-card img {
      width: 78px;
      height: 78px;
      flex: 0 0 78px;
      object-fit: cover;
      border-radius: 18px;
      background: var(--primary-tint);
    }

    .home-feature-title {
      display: block;
      font-size: 17px;
      font-weight: 800;
      line-height: 1.18;
    }

    .home-feature-text {
      display: block;
      margin-top: 4px;
      color: var(--muted);
      font-size: 12.5px;
      line-height: 1.4;
    }

    .profile-card {
      overflow: hidden;
      padding: 20px;
      color: var(--ink);
      border: 1px solid var(--line);
      border-radius: 24px;
      background: #fff;
      box-shadow: 0 12px 28px rgba(13, 27, 46, .07);
    }

    .account-reference-card {
      min-height: 182px;
      padding: 18px;
      color: #fff;
      border: 0;
      border-radius: 26px;
      background: linear-gradient(140deg, var(--primary-light) 0%, var(--primary) 55%, #1F6FB8 100%);
      box-shadow: 0 16px 34px rgba(46,134,208,.32);
    }

    .account-reference-card .avatar {
      width: 62px;
      height: 62px;
      flex-basis: 62px;
      border: 2px solid rgba(255,255,255,.4);
      color: #fff;
      background: rgba(255,255,255,.18);
      box-shadow: none;
    }

    .account-reference-card .profile-name {
      color: #fff;
      font-size: 20px;
    }

    .account-reference-card .profile-email {
      color: rgba(255,255,255,.78);
    }

    .account-reference-card .member-pill {
      color: #fff;
      background: rgba(255,255,255,.18);
    }

    .account-reference-card .profile-edit {
      border: 0;
      color: var(--primary);
      background: #fff;
      box-shadow: 0 8px 18px rgba(13,27,46,.14);
    }

    .account-reference-card .profile-stats {
      margin-top: 18px;
      padding-top: 15px;
      border-top: 1px solid rgba(255,255,255,.2);
    }

    .account-reference-card .stat + .stat {
      border-left-color: rgba(255,255,255,.2);
    }

    .account-reference-card .stat strong,
    .account-reference-card .stat:last-child strong {
      color: #fff;
    }

    .account-reference-card .stat span {
      color: rgba(255,255,255,.78);
    }

    [data-screen="account"].screen-view {
      gap: 13px;
    }

    .profile-top {
      display: flex;
      align-items: center;
      gap: 15px;
    }

    .avatar {
      position: relative;
      width: 64px;
      height: 64px;
      flex: 0 0 64px;
      display: grid;
      place-items: center;
      border-radius: 20px;
      color: #fff;
      background: linear-gradient(140deg, var(--primary-light), #1F6FB8);
      box-shadow: 0 8px 18px rgba(46, 134, 208, .35);
      font-size: 26px;
      font-weight: 800;
    }

    .avatar-camera {
      position: absolute;
      right: -4px;
      bottom: -4px;
      width: 25px;
      height: 25px;
      display: grid;
      place-items: center;
      border-radius: 999px;
      color: var(--primary);
      background: #fff;
      box-shadow: 0 2px 6px rgba(13, 27, 46, .18);
    }

    .menu-copy {
      min-width: 0;
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
    }

    .signed-in {
      width: fit-content;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 4px 9px;
      border-radius: 999px;
      background: rgba(255, 255, 255, .18);
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .08em;
    }

    .signed-in::before {
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 999px;
      background: #5cf2a8;
    }

    .profile-name {
      font-size: 20px;
      font-weight: 800;
      letter-spacing: -.3px;
    }

    .profile-email {
      margin-top: 2px;
      color: var(--muted);
      font-size: 12.5px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .home-search input {
      flex: 1;
      min-width: 0;
      height: 100%;
      border: 0;
      outline: 0;
      color: var(--ink);
      background: transparent;
      font: 600 14px/1 "Schibsted Grotesk", system-ui, sans-serif;
      text-overflow: ellipsis;
    }

    .home-search input::placeholder {
      color: #9AA8BD;
      font-weight: 500;
      opacity: 1;
    }

    .home-search:focus-within {
      border-color: rgba(46, 134, 208, .34);
      box-shadow: 0 10px 24px rgba(46, 134, 208, .16);
    }

    .member-pill {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      margin-top: 8px;
      padding: 4px 10px;
      border-radius: 999px;
      color: var(--primary);
      background: var(--primary-tint);
      font-size: 10.5px;
      font-weight: 800;
      letter-spacing: .04em;
    }

    .profile-edit {
      width: 36px;
      height: 36px;
      flex: 0 0 36px;
      display: grid;
      place-items: center;
      border: 1px solid var(--line);
      border-radius: 12px;
      color: var(--primary);
      background: #F4F8FD;
    }

    .profile-stats {
      display: flex;
      align-items: stretch;
      gap: 0;
      margin-top: 18px;
      padding-top: 16px;
      border-top: 1px solid #F0F4F9;
    }

    .stat {
      flex: 1;
      min-height: auto;
      padding: 0 8px;
      border: 0;
      border-radius: 0;
      font: inherit;
      text-align: center;
      background: transparent;
      -webkit-appearance: none;
      appearance: none;
    }

    .stat + .stat {
      border-left: 1px solid #F0F4F9;
    }

    .stat strong {
      display: block;
      color: var(--ink);
      font-size: 19px;
      line-height: 1.15;
      font-weight: 800;
    }

    .stat:last-child strong {
      color: var(--primary);
    }

    .stat span {
      display: block;
      margin-top: 2px;
      color: var(--muted);
      font-size: 11px;
    }

    .quick-actions {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
    }

    .quick-actions button {
      min-height: 91px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 14px 4px;
      border: 1px solid var(--line);
      border-radius: 16px;
      color: var(--ink);
      background: #fff;
      box-shadow: 0 4px 12px rgba(13, 27, 46, .05);
      font-size: 11px;
      font-weight: 700;
      line-height: 1.15;
      text-align: center;
    }

    .quick-actions span {
      width: 40px;
      height: 40px;
      display: grid;
      place-items: center;
      border-radius: 12px;
      color: var(--primary);
      background: var(--primary-tint);
    }

    .account-refer-banner {
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      gap: 13px;
      height: 64px;
      padding: 11px 15px;
      border: 1px solid var(--line);
      border-radius: 18px;
      color: var(--ink);
      background: #fff;
      box-shadow: 0 6px 16px rgba(13, 27, 46, .05);
    }

    .account-refer-banner .menu-copy {
      min-width: 0;
      overflow: hidden;
    }

    .account-refer-banner::after {
      display: none;
    }

    .refer-banner-icon {
      position: relative;
      width: 44px;
      height: 44px;
      flex: 0 0 44px;
      display: grid;
      place-items: center;
      border-radius: 13px;
      color: var(--primary);
      background: var(--primary-tint);
    }

    .account-refer-banner .menu-copy,
    .account-refer-banner button {
      position: relative;
      z-index: 1;
    }

    .account-refer-banner .menu-title {
      color: var(--ink);
      font-size: 15px;
      font-weight: 800;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .account-refer-banner .menu-desc {
      color: var(--muted);
      font-size: 11.5px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .account-refer-banner button {
      flex: 0 0 auto;
      padding: 9px 13px;
      border-radius: 11px;
      color: #fff;
      background: var(--gradient);
      font-size: 12.5px;
      font-weight: 800;
      white-space: nowrap;
    }

    .section-label {
      padding: 0 6px 8px;
      color: #9AA8BD;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .1em;
    }

    .menu {
      padding: 2px 14px;
      border-radius: 18px;
    }

    .menu-row {
      position: relative;
      min-height: 62px;
      display: flex;
      align-items: center;
      gap: 14px;
      width: 100%;
      padding: 9px 4px;
      text-align: left;
    }

    [data-screen="account"] .menu-row {
      min-height: 56.6px;
      padding-block: 6px;
    }

    [data-screen="account"] .icon-box {
      width: 42px;
      height: 42px;
      flex-basis: 42px;
      border-radius: 13px;
    }

    [data-screen="account"] .menu {
      padding-block: 2px;
    }

    [data-screen="account"] .logout {
      height: 64px;
      min-height: 64px;
      padding-block: 11px;
    }

    .menu-row + .menu-row::before {
      content: "";
      position: absolute;
      top: 0;
      left: 60px;
      right: 0;
      height: 1px;
      background: #F0F4F9;
    }

    .icon-box {
      width: 46px;
      height: 46px;
      flex: 0 0 46px;
      display: grid;
      place-items: center;
      border-radius: 14px;
      color: var(--primary);
      background: var(--primary-tint);
    }

    .menu-title {
      display: block;
      width: 100%;
      font-size: 15.5px;
      font-weight: 700;
      line-height: 1.25;
      letter-spacing: -.2px;
      text-align: left;
    }

    .menu-desc {
      display: block;
      width: 100%;
      margin-top: 2px;
      color: var(--muted);
      font-size: 12.5px;
      line-height: 1.35;
      text-align: left;
    }

    .chip {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 29px;
      height: 24px;
      padding: 0 11px;
      border-radius: 999px;
      color: var(--primary);
      background: var(--primary-tint);
      font-size: 12.5px;
      font-weight: 800;
    }

    .chevron {
      flex: 0 0 auto;
      color: #B7C2D3;
    }

    .logout {
      width: 100%;
      min-height: 64px;
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 11px 14px;
      border: 1px solid #FBD7E5;
      border-radius: 18px;
      color: var(--danger);
      text-align: left;
      background: #FFF1F6;
    }

    .logout .icon-box {
      color: var(--danger);
      background: #FBE0EB;
    }

    .logout .menu-desc { color: #C97B96; }

    .appearance {
      padding: 18px;
    }

    .kicker {
      color: var(--primary);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .1em;
    }

    .card-title {
      margin-top: 6px;
      font-size: 18px;
      font-weight: 800;
    }

    .card-copy {
      margin-top: 3px;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.45;
    }

    .theme-toggle {
      width: 100%;
      min-height: 74px;
      display: flex;
      align-items: center;
      gap: 14px;
      margin-top: 14px;
      padding: 14px;
      border: 1px solid #E9F0F8;
      border-radius: 16px;
      text-align: left;
      background: #F4F8FD;
    }

    .switch {
      width: 52px;
      height: 30px;
      flex: 0 0 52px;
      display: flex;
      align-items: center;
      padding: 3px;
      border-radius: 999px;
      background: linear-gradient(135deg, #4AA3E6, #1F6FB8);
      transition: background .2s ease;
    }

    .knob {
      width: 24px;
      height: 24px;
      border-radius: 999px;
      background: #fff;
      box-shadow: 0 2px 5px rgba(0, 0, 0, .22);
      transform: translateX(22px);
      transition: transform .2s ease;
    }

    .theme-toggle.is-dark .switch { background: var(--ink); }
    .theme-toggle.is-dark .knob { transform: translateX(0); }

    [data-screen="settings"] .menu-row {
      min-height: 78px;
      padding-block: 16px;
    }

    .detail-screen {
      gap: 14px;
    }

    .detail-footer {
      flex-shrink: 0;
      margin: auto -16px -16px;
      padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
      border-top: 1px solid #EEF3F9;
      background: #fff;
    }

    .detail-footer .primary-action {
      margin: 0;
    }

    .detail-footer-split {
      display: flex;
      gap: 11px;
    }

    .detail-footer-split .secondary-action,
    .detail-footer-split .primary-action {
      min-height: 52px;
      margin: 0;
      border-radius: 14px;
    }

    .wishlist-screen {
      gap: 0;
    }

    .wishlist-head {
      flex-shrink: 0;
      padding: 16px 11px 12px;
      gap: 12px;
    }

    .wishlist-head > div {
      flex: 1;
      min-width: 0;
    }

    .wishlist-head strong {
      font-size: 20px;
      line-height: 1.15;
      letter-spacing: -.3px;
    }

    .wishlist-head small {
      display: block;
      margin-top: 1px;
      color: var(--muted);
      font-size: 12px;
    }

    .wishlist-bag-action {
      width: 40px;
      height: 40px;
      flex: 0 0 40px;
      display: grid;
      place-items: center;
      border: 1px solid #E7EEF6;
      border-radius: 12px;
      color: var(--primary);
      background: #fff;
      box-shadow: 0 4px 10px rgba(13, 27, 46, .05);
    }

    .wishlist-scroll {
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      padding: 6px 11px 16px;
      scrollbar-width: none;
    }

    .wishlist-scroll::-webkit-scrollbar {
      display: none;
    }

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

    .wishlist-card {
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      min-width: 0;
      border: 1px solid #EAF0F7;
      border-radius: 20px;
      background: #fff;
      box-shadow: 0 8px 20px rgba(13, 27, 46, .06);
    }

    .wishlist-media {
      position: relative;
      width: 100%;
      aspect-ratio: 1 / 1;
      overflow: hidden;
      background: #F2F6FB;
    }

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

    .wishlist-card.is-out .wishlist-media img {
      filter: grayscale(.5);
    }

    .wishlist-fade {
      position: absolute;
      inset: 0;
      background: rgba(255,255,255,.5);
    }

    .wishlist-stock-bar {
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
      padding: 8px 0;
      color: #fff;
      background: rgba(13,27,46,.72);
      backdrop-filter: blur(2px);
      text-align: center;
      font-size: 11.5px;
      font-weight: 800;
      letter-spacing: .04em;
    }

    .wishlist-discount {
      position: absolute;
      top: 10px;
      left: 10px;
      padding: 4px 9px;
      border-radius: 9px;
      color: #fff;
      background: linear-gradient(135deg, #FF8A3D, #F2542D);
      box-shadow: 0 4px 10px rgba(242,84,45,.35);
      font-size: 11px;
      font-weight: 800;
      white-space: nowrap;
    }

    .wishlist-remove {
      position: absolute;
      top: 9px;
      right: 9px;
      z-index: 1;
      width: 32px;
      height: 32px;
      display: grid;
      place-items: center;
      border: 0;
      border-radius: 999px;
      color: #E11765;
      background: #fff;
      box-shadow: 0 3px 9px rgba(13,27,46,.14);
    }

    .wishlist-card-body {
      display: flex;
      flex: 1;
      flex-direction: column;
      gap: 8px;
      min-width: 0;
      padding: 12px;
    }

    .wishlist-category,
    .wishlist-status {
      align-self: flex-start;
      max-width: 100%;
      padding: 3px 8px;
      overflow: hidden;
      border-radius: 7px;
      color: var(--primary);
      background: var(--primary-tint);
      font-size: 11px;
      font-weight: 800;
      line-height: 1.25;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .wishlist-status {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      color: #B4453A;
      background: #FBEAE8;
      font-size: 10px;
    }

    .wishlist-status i {
      width: 5px;
      height: 5px;
      flex: 0 0 5px;
      border-radius: 999px;
      background: #D6483C;
    }

    .wishlist-card strong {
      display: -webkit-box;
      min-height: 35px;
      overflow: hidden;
      color: var(--ink);
      font-size: 14px;
      line-height: 1.25;
      font-weight: 800;
      letter-spacing: -.2px;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .wishlist-card p {
      display: flex;
      align-items: center;
      gap: 7px;
      margin: 0;
      color: var(--muted);
      font-size: 12px;
    }

    .wishlist-card b {
      color: var(--ink);
      font-size: 18px;
      font-weight: 800;
      white-space: nowrap;
    }

    .wishlist-card del {
      color: #9AA8BD;
      font-size: 12.5px;
    }

    .wishlist-action {
      min-height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      margin-top: auto;
      border: 0;
      border-radius: 12px;
      color: #fff;
      background: linear-gradient(135deg, var(--primary-light), var(--primary));
      box-shadow: 0 6px 14px rgba(46,134,208,.34);
      font-size: 13px;
      font-weight: 800;
    }

    .notify-product.is-active,
    .notify-product-action {
      gap: 6px;
      border-color: rgba(10, 116, 187, .18);
      color: var(--primary);
      background: var(--primary-tint);
      box-shadow: none;
    }

    .notify-product-icon {
      color: var(--primary);
      background: var(--primary-tint);
    }

    .wishlist-action.is-muted {
      border: 1px solid #E7EEF6;
      color: var(--muted);
      background: #F2F6FB;
      box-shadow: none;
    }

    .wishlist-empty {
      margin-top: 20px;
    }

    html[data-theme="dark"] .wishlist-card,
    html[data-theme="dark"] .wishlist-bag-action,
    html[data-theme="dark"] .wishlist-remove {
      background: #102A40;
      border-color: #244156;
    }

    html[data-theme="dark"] .wishlist-media,
    html[data-theme="dark"] .wishlist-action.is-muted {
      background: #0B2237;
      border-color: #244156;
    }

    .notify-me-screen {
      gap: 0;
    }

    .notify-me-head {
      flex-shrink: 0;
      padding: 16px 11px 12px;
      gap: 12px;
    }

    .notify-me-head > div {
      flex: 1;
      min-width: 0;
    }

    .notify-me-head strong {
      font-size: 20px;
      line-height: 1.15;
      letter-spacing: -.3px;
    }

    .notify-me-head small {
      display: block;
      margin-top: 1px;
      color: var(--muted);
      font-size: 12px;
    }

    .notify-me-scroll {
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding: 6px 11px 16px;
      scrollbar-width: none;
    }

    .notify-me-scroll::-webkit-scrollbar {
      display: none;
    }

    .notify-me-banner,
    .notify-me-card {
      display: flex;
      align-items: flex-start;
      gap: 11px;
      padding: 13px;
      border: 1px solid rgba(10, 116, 187, .1);
      border-radius: 16px;
      background: var(--primary-tint);
    }

    .notify-me-banner > span,
    .notify-me-card > span {
      width: 34px;
      height: 34px;
      flex: 0 0 34px;
      display: grid;
      place-items: center;
      border-radius: 10px;
      color: #fff;
      background: linear-gradient(140deg, var(--primary-light), var(--primary));
    }

    .notify-me-banner div,
    .notify-me-card div {
      min-width: 0;
    }

    .notify-me-banner strong,
    .notify-me-card strong {
      display: block;
      color: var(--ink);
      font-size: 12.5px;
      line-height: 1.25;
      font-weight: 800;
    }

    .notify-me-banner small,
    .notify-me-card small {
      display: block;
      margin-top: 2px;
      color: #5C6B81;
      font-size: 11.5px;
      line-height: 1.45;
    }

    .notify-me-list {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .notify-me-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 13px;
      border: 1px solid #EAF0F7;
      border-radius: 18px;
      background: #fff;
      box-shadow: 0 6px 16px rgba(13,27,46,.05);
    }

    .notify-me-item img {
      width: 64px;
      height: 64px;
      flex: 0 0 64px;
      border-radius: 13px;
      object-fit: cover;
      background: #F2F6FB;
      filter: grayscale(.5);
    }

    .notify-me-item.is-ready img {
      filter: none;
    }

    .notify-me-item div {
      flex: 1;
      min-width: 0;
    }

    .notify-me-item strong {
      display: block;
      overflow: hidden;
      color: var(--ink);
      font-size: 13.5px;
      line-height: 1.25;
      font-weight: 800;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .notify-me-item small {
      display: block;
      margin-top: 3px;
      color: var(--muted);
      font-size: 12px;
    }

    .notify-me-item em {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      margin-top: 6px;
      padding: 3px 8px;
      border-radius: 7px;
      color: #B4453A;
      background: #FBEAE8;
      font-size: 10px;
      font-style: normal;
      font-weight: 700;
    }

    .notify-me-item.is-ready em {
      color: #0F7A4E;
      background: #E6F8EF;
    }

    .notify-me-item em i {
      width: 5px;
      height: 5px;
      border-radius: 999px;
      background: #D6483C;
    }

    .notify-me-item.is-ready em i {
      background: #12A66A;
    }

    .notify-me-item button {
      width: 34px;
      height: 34px;
      flex: 0 0 34px;
      display: grid;
      place-items: center;
      border: 0;
      border-radius: 10px;
      color: var(--primary);
      background: var(--primary-tint);
    }

    .notify-me-item button.is-ready {
      color: #fff;
      background: linear-gradient(135deg, #19B96F, #07965E);
    }

    .notify-me-empty {
      margin-top: 8px;
    }

    html[data-theme="dark"] .notify-me-item,
    html[data-theme="dark"] .notify-me-banner,
    html[data-theme="dark"] .notify-me-card {
      background: #102A40;
      border-color: #244156;
    }

    html[data-theme="dark"] .notify-me-banner small,
    html[data-theme="dark"] .notify-me-card small {
      color: #9DB1C8;
    }

    .detail-footer-split .secondary-action {
      flex: 1;
    }

    .detail-footer-split .secondary-action.is-danger {
      color: var(--danger);
      border-color: rgba(225, 23, 101, .22);
      background: #FFF5F8;
    }

    .detail-footer-split .primary-action {
      flex: 1.3;
    }

    .close-button {
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      border: 1px solid var(--line);
      border-radius: 14px;
      color: var(--muted);
      background: #fff;
      box-shadow: 0 6px 16px rgba(13,27,46,.06);
    }

    .success-screen,
    .empty-state-screen {
      min-height: 100%;
      gap: 0;
    }

    .success-close-row {
      flex-shrink: 0;
      display: flex;
      justify-content: flex-end;
      padding: 0 0 12px;
    }

    .success-body,
    .empty-state-body {
      flex: 1;
      min-height: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    .success-body {
      justify-content: flex-start;
      padding: 22px 6px 20px;
    }

    .empty-state-body {
      justify-content: center;
      padding: 22px 18px 40px;
    }

    .success-badge,
    .empty-state-icon {
      position: relative;
      display: grid;
      place-items: center;
      border-radius: 999px;
      color: #fff;
      background: var(--gradient);
      box-shadow: 0 16px 30px rgba(46,134,208,.4);
    }

    .success-badge {
      width: 118px;
      height: 118px;
      margin-top: 4px;
    }

    .success-badge::before,
    .success-badge::after {
      content: "";
      position: absolute;
      border: 2px solid #EEF4FB;
      border-radius: inherit;
    }

    .success-badge::before { inset: -14px; border-color: var(--primary-tint); }
    .success-badge::after { inset: -28px; }

    .success-badge svg {
      position: relative;
      z-index: 1;
      stroke-width: 3;
    }

    .success-body h2,
    .empty-state-body h2 {
      margin: 30px 0 0;
      color: var(--ink);
      font-size: 27px;
      line-height: 1.1;
      font-weight: 800;
    }

    .empty-state-body h2 {
      margin-top: 26px;
      font-size: 22px;
    }

    .success-body p,
    .empty-state-body p {
      max-width: 290px;
      margin: 9px 0 0;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.55;
    }

    .success-meta-card,
    .success-address-card {
      width: 100%;
      border: 1px solid var(--line);
      border-radius: 20px;
      background: #fff;
      box-shadow: 0 8px 20px rgba(13,27,46,.06);
    }

    .success-meta-card {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0 16px;
      margin-top: 26px;
      padding: 16px 18px;
      text-align: left;
    }

    .success-meta-card i {
      grid-column: 1 / -1;
      height: 1px;
      margin: 14px 0;
      background: #F0F4F9;
    }

    .success-meta-card div:nth-child(2),
    .success-meta-card div:nth-child(5) {
      text-align: right;
    }

    .success-meta-card span {
      display: block;
      color: #9AA8BD;
      font-size: 11.5px;
      font-weight: 700;
    }

    .success-meta-card strong {
      display: block;
      margin-top: 2px;
      color: var(--ink);
      font-size: 15px;
      line-height: 1.25;
      font-weight: 800;
    }

    .success-address-card {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-top: 12px;
      padding: 14px;
      text-align: left;
    }

    .success-address-card > span {
      width: 42px;
      height: 42px;
      flex: 0 0 42px;
      display: grid;
      place-items: center;
      border-radius: 14px;
      color: var(--primary);
      background: var(--primary-tint);
    }

    .success-address-card strong,
    .success-address-card small {
      display: block;
    }

    .success-address-card strong {
      color: var(--ink);
      font-size: 14px;
      font-weight: 800;
    }

    .success-address-card small {
      margin-top: 2px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.4;
    }

    .empty-state-icon {
      width: 82px;
      height: 82px;
    }

    [data-screen="address"] .address-empty-state {
      width: 100%;
      justify-content: center;
      gap: 0;
      min-height: min(500px, calc(100svh - 190px));
      padding: 42px 20px 36px;
      border: 1px solid #E3EDF7;
      border-radius: 26px;
      background:
        radial-gradient(circle at 20% 12%, rgba(74, 163, 230, .16), transparent 34%),
        linear-gradient(180deg, #FFFFFF 0%, #F6FAFF 100%);
      box-shadow: 0 18px 36px rgba(13, 27, 46, .08);
    }

    [data-screen="address"] .back-button {
      width: 44px;
      height: 44px;
      flex: 0 0 44px;
    }

    [data-screen="address"] .address-empty-icon {
      width: 96px;
      height: 96px;
      color: #fff;
      box-shadow: 0 18px 34px rgba(46, 134, 208, .35);
    }

    [data-screen="address"] .address-empty-state h2 {
      margin-top: 28px;
      font-size: 24px;
    }

    [data-screen="address"] .address-empty-state p {
      max-width: 270px;
      color: #5C6B81;
      font-size: 14px;
    }

    .address-empty-benefits {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 9px;
      margin-top: 20px;
    }

    .address-empty-benefits span {
      min-height: 44px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      padding: 0 10px;
      border: 1px solid #E5EEF8;
      border-radius: 14px;
      color: var(--primary);
      background: #fff;
      font-size: 12px;
      font-weight: 800;
      box-shadow: 0 8px 18px rgba(13, 27, 46, .05);
    }

    [data-screen="orders"] .back-button {
      width: 44px;
      height: 44px;
      flex: 0 0 44px;
    }

    [data-screen="orders"] .orders-empty-state {
      width: 100%;
      justify-content: center;
      gap: 0;
      min-height: min(500px, calc(100svh - 220px));
      padding: 42px 20px 36px;
      border: 1px solid #E3EDF7;
      border-radius: 26px;
      background:
        radial-gradient(circle at 78% 12%, rgba(255, 190, 58, .16), transparent 34%),
        radial-gradient(circle at 20% 18%, rgba(74, 163, 230, .16), transparent 34%),
        linear-gradient(180deg, #FFFFFF 0%, #F6FAFF 100%);
      box-shadow: 0 18px 36px rgba(13, 27, 46, .08);
    }

    [data-screen="orders"] .orders-empty-icon {
      width: 96px;
      height: 96px;
      color: #fff;
      background: linear-gradient(135deg, #0A74BB 0%, #3AAED9 60%, #F0B63F 100%);
      box-shadow: 0 18px 34px rgba(46, 134, 208, .35);
    }

    [data-screen="orders"] .orders-empty-state h2 {
      margin-top: 28px;
      font-size: 24px;
    }

    [data-screen="orders"] .orders-empty-state p {
      max-width: 285px;
      color: #5C6B81;
      font-size: 14px;
    }

    .orders-empty-benefits {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 9px;
      margin-top: 20px;
    }

    .orders-empty-benefits span {
      min-height: 44px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      padding: 0 10px;
      border: 1px solid #E5EEF8;
      border-radius: 14px;
      color: var(--primary);
      background: #fff;
      font-size: 12px;
      font-weight: 800;
      box-shadow: 0 8px 18px rgba(13, 27, 46, .05);
    }

    .orders-pull-indicator {
      --pull-distance: 0px;
      --pull-progress: 0;
      height: 0;
      margin: 0;
      opacity: calc(.2 + (var(--pull-progress) * .8));
      overflow: visible;
      pointer-events: none;
      transform: translateY(calc((var(--pull-distance) * .58) - 44px));
      transition: opacity .18s ease, transform .18s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      color: var(--primary);
      font-size: 12px;
      font-weight: 800;
    }

    .orders-pull-indicator > span {
      width: 30px;
      height: 30px;
      display: inline-grid;
      place-items: center;
      border-radius: 999px;
      color: #fff;
      background: linear-gradient(135deg, #50C2E9, #3AAED9);
      box-shadow: 0 10px 22px rgba(58, 174, 217, .28);
    }

    .orders-pull-indicator strong {
      min-height: 30px;
      display: inline-flex;
      align-items: center;
      padding: 0 12px;
      border: 1px solid rgba(80, 194, 233, .28);
      border-radius: 999px;
      background: rgba(255, 255, 255, .92);
      box-shadow: 0 10px 24px rgba(13, 27, 46, .08);
    }

    .orders-pull-indicator.is-ready > span,
    .orders-pull-indicator.is-refreshing > span {
      background: linear-gradient(135deg, #F0B63F, #3AAED9);
    }

    .orders-pull-indicator.is-refreshing svg,
    .orders-refresh-button.is-refreshing svg {
      animation: ordersRefreshSpin .78s linear infinite;
    }

    .orders-head {
      align-items: center;
    }

    .orders-head > div {
      min-width: 0;
      flex: 1;
    }

    .orders-refresh-button {
      width: 44px;
      height: 44px;
      flex: 0 0 44px;
      display: inline-grid;
      place-items: center;
      border: 1px solid rgba(80, 194, 233, .28);
      border-radius: 16px;
      color: var(--primary);
      background: linear-gradient(180deg, #FFFFFF 0%, #EEF9FD 100%);
      box-shadow: 0 10px 24px rgba(13, 27, 46, .08);
      transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
    }

    .orders-refresh-button:active {
      transform: scale(.96);
    }

    .orders-refresh-button:disabled {
      opacity: .72;
    }

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

    .product-grid .product-empty-state {
      grid-column: 1 / -1;
      width: min(100%, 520px);
      min-height: min(440px, calc(100svh - 280px));
      justify-self: center;
      justify-content: center;
      gap: 0;
      margin: 10px 6px 22px;
      padding: 40px 18px 24px;
      border: 1px solid #E3EDF7;
      border-radius: 26px;
      background:
        radial-gradient(circle at 22% 14%, rgba(74, 163, 230, .16), transparent 34%),
        radial-gradient(circle at 82% 10%, rgba(255, 190, 58, .15), transparent 32%),
        linear-gradient(180deg, #FFFFFF 0%, #F6FAFF 100%);
      box-shadow: 0 18px 36px rgba(13, 27, 46, .08);
    }

    .product-empty-icon {
      width: 96px;
      height: 96px;
      color: #fff;
      background: linear-gradient(135deg, #0A74BB 0%, #3AAED9 58%, #F0B63F 100%);
      box-shadow: 0 18px 34px rgba(46, 134, 208, .34);
    }

    .product-empty-state h2 {
      margin-top: 26px;
      font-size: 24px;
      letter-spacing: 0;
    }

    .product-empty-state p {
      max-width: 300px;
      color: #5C6B81;
      font-size: 14px;
    }

    .product-empty-benefits {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 9px;
      margin-top: 20px;
    }

    .product-empty-benefits span {
      min-height: 44px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      padding: 0 10px;
      border: 1px solid #E5EEF8;
      border-radius: 14px;
      color: var(--primary);
      background: #fff;
      font-size: 12px;
      font-weight: 800;
      box-shadow: 0 8px 18px rgba(13, 27, 46, .05);
    }

    .product-empty-actions {
      width: 100%;
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
      margin-top: 18px;
    }

    .product-empty-actions .primary-action,
    .product-empty-actions .secondary-action {
      min-height: 48px;
      margin: 0;
      border-radius: 15px;
    }

    .detail-card {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 14px;
      padding: 16px;
      border: 1px solid var(--line);
      border-radius: 18px;
      background: #fff;
      box-shadow: 0 6px 16px rgba(13,27,46,.05);
    }

    .compact-card {
      gap: 10px;
      padding: 16px;
    }

    .detail-top {
      min-width: 0;
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .back-button {
      width: 40px;
      height: 40px;
      flex: 0 0 40px;
      display: grid;
      place-items: center;
      border: 0;
      border-radius: 13px;
      color: #fff;
      background: linear-gradient(140deg, var(--primary-light), var(--primary));
      box-shadow: 0 8px 18px rgba(46,134,208,.34), inset 0 1px 0 rgba(255,255,255,.35);
    }

    .back-button.on-hero {
      color: #fff;
      border-color: rgba(255,255,255,.35);
      background: rgba(255,255,255,.16);
    }

    .back-button.is-brand {
      width: 42px;
      height: 42px;
      flex-basis: 42px;
      border: 0;
      border-radius: 14px;
      color: #fff;
      background: linear-gradient(140deg, var(--primary-light), var(--primary));
      box-shadow: 0 8px 18px rgba(46,134,208,.4), inset 0 1px 0 rgba(255,255,255,.35);
    }

    .detail-kicker {
      color: var(--primary);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .1em;
    }

    .detail-title {
      margin: 3px 0 0;
      font-size: 18px;
      line-height: 1.2;
      font-weight: 800;
    }

    .checkout-step,
    .field-card,
    .order-card,
    .address-card,
    .mini-product-row {
      border: 1px solid #E8F0F8;
      border-radius: 16px;
      background: #F8FBFF;
    }

    .checkout-step {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 13px;
    }

    .checkout-step > span {
      width: 32px;
      height: 32px;
      flex: 0 0 32px;
      display: grid;
      place-items: center;
      border-radius: 12px;
      color: var(--primary);
      background: var(--primary-tint);
      font-size: 13px;
      font-weight: 800;
    }

    .checkout-step.is-done > span,
    .checkout-step.is-active > span {
      color: #fff;
      background: var(--gradient);
    }

    .checkout-step strong,
    .field-card strong,
    .order-card strong,
    .address-card strong,
    .mini-product-row strong {
      display: block;
      font-size: 14px;
      line-height: 1.3;
    }

    .checkout-step small,
    .field-card span,
    .address-card small,
    .mini-product-row span {
      display: block;
      margin-top: 2px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.4;
    }

    .checkout-product-row .checkout-color-line {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-top: 5px;
    }

    .checkout-product-row .checkout-color-line i {
      width: 12px;
      height: 12px;
      flex: 0 0 12px;
      border-radius: 999px;
      background: var(--danger);
    }

    .checkout-summary-section {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .checkout-price-card {
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding: 16px;
      border: 1px solid var(--line);
      border-radius: 18px;
      background: #fff;
      box-shadow: 0 6px 16px rgba(13,27,46,.05);
    }

    .checkout-price-card .split-row > span {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .checkout-head,
    .simple-head {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .checkout-title,
    .simple-head strong {
      display: block;
      color: var(--ink);
      font-size: 21px;
      line-height: 1.05;
      font-weight: 800;
    }

    .checkout-head {
      flex-shrink: 0;
      padding: 16px 0 10px;
    }

    .simple-head small {
      display: block;
      margin-top: 1px;
      color: var(--muted);
      font-size: 12px;
    }

    .secure-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      height: 36px;
      padding: 0 13px;
      border-radius: 999px;
      color: var(--primary);
      background: var(--primary-tint);
      font-size: 12px;
      font-weight: 800;
    }

    .checkout-stepper {
      overflow: hidden;
      margin: 0 16px;
      padding: 16px 18px;
      border: 1px solid var(--line);
      border-radius: 18px;
      background: #fff;
      box-shadow: 0 6px 16px rgba(13,27,46,.05);
    }

    .checkout-stepper div,
    .checkout-stepper p {
      display: flex;
      align-items: center;
    }

    .checkout-stepper span {
      width: 30px;
      height: 30px;
      flex: 0 0 30px;
      display: grid;
      place-items: center;
      border: 2px solid #E2E9F1;
      border-radius: 999px;
      color: #9AA8BD;
      background: #fff;
      font-size: 14px;
      font-weight: 800;
    }

    .checkout-stepper span.is-active {
      color: #fff;
      border: 0;
      background: var(--gradient);
      box-shadow: 0 5px 11px rgba(46,134,208,.32);
    }

    .checkout-stepper i {
      flex: 1;
      height: 2px;
      margin: 0 6px;
      background: #E4ECF3;
    }

    .checkout-stepper p {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
      margin: 9px 0 0;
      color: #9AA8BD;
      font-size: 12px;
      font-weight: 700;
      text-align: center;
    }

    .checkout-stepper p span {
      width: auto;
      height: auto;
      min-width: 0;
      display: block;
      border: 0;
      color: inherit;
      background: transparent;
      font: inherit;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .checkout-stepper p strong {
      color: var(--ink);
      font-weight: 800;
    }

    .step-heading {
      display: flex;
      align-items: center;
      gap: 9px;
      color: var(--ink);
      font-size: 17px;
      font-weight: 800;
    }

    .step-heading > span {
      width: 24px;
      height: 24px;
      display: grid;
      place-items: center;
      border-radius: 999px;
      color: #fff;
      background: var(--primary);
      font-size: 12px;
      font-weight: 800;
    }

    .empty-address {
      padding: 18px;
      border: 1px solid var(--line);
      border-radius: 18px;
      background: #fff;
      box-shadow: 0 8px 20px rgba(13,27,46,.05);
    }

    .empty-address > .warn-pill {
      float: right;
      margin-top: -2px;
    }

    .empty-address-body {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      padding: 8px 0 14px;
      text-align: center;
      clear: both;
    }

    .empty-address-body > span {
      position: relative;
      width: 50px;
      height: 50px;
      display: grid;
      place-items: center;
      border-radius: 16px;
      color: var(--primary);
      background: var(--primary-tint);
    }

    .empty-address-body > span i + i {
      position: absolute;
      right: -3px;
      bottom: -3px;
      width: 22px;
      height: 22px;
      padding: 5px;
      border: 2px solid #fff;
      border-radius: 999px;
      color: #fff;
      background: var(--primary);
    }

    .empty-address-body strong {
      margin-top: 6px;
      font-size: 15px;
      font-weight: 800;
    }

    .empty-address-body small {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.4;
    }

    .checkout-address-card,
    .checkout-payment-card,
    .checkout-review-card {
      display: flex;
      flex-direction: column;
      gap: 13px;
      padding: 15px;
      border: 1px solid var(--line);
      border-radius: 20px;
      background: #fff;
      box-shadow: 0 8px 20px rgba(13,27,46,.06);
    }

    .checkout-card-head {
      display: flex;
      align-items: center;
      gap: 11px;
    }

    .checkout-card-head > span {
      width: 42px;
      height: 42px;
      flex: 0 0 42px;
      display: grid;
      place-items: center;
      border-radius: 14px;
      color: var(--primary);
      background: var(--primary-tint);
    }

    .checkout-card-head div {
      min-width: 0;
      flex: 1;
    }

    .checkout-card-head strong,
    .checkout-empty-state strong,
    .checkout-pay-option strong {
      display: block;
      color: var(--ink);
      font-size: 15px;
      line-height: 1.25;
      font-weight: 800;
    }

    .checkout-card-head small,
    .checkout-empty-state small,
    .checkout-pay-option small {
      display: block;
      margin-top: 2px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.35;
    }

    .checkout-card-head em {
      flex: 0 0 auto;
      padding: 5px 9px;
      border-radius: 999px;
      color: var(--primary);
      background: var(--primary-tint);
      font-size: 11px;
      font-weight: 800;
      font-style: normal;
    }

    .checkout-empty-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      padding: 18px;
      border: 1px dashed #BFE3F3;
      border-radius: 18px;
      background: #F8FCFE;
      text-align: center;
    }

    .checkout-empty-state > span {
      width: 56px;
      height: 56px;
      display: grid;
      place-items: center;
      border-radius: 18px;
      color: var(--primary);
      background: var(--primary-tint);
    }

    .checkout-empty-state .primary-action {
      margin-top: 8px;
    }

    .checkout-pay-option {
      width: 100%;
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 13px;
      border: 2px solid #BDEAF9;
      border-radius: 17px;
      background: #F8FCFE;
      text-align: left;
    }

    .checkout-pay-option > span {
      width: 44px;
      height: 44px;
      flex: 0 0 44px;
      display: grid;
      place-items: center;
      border-radius: 14px;
      color: #1F8A5B;
      background: #E4F7EE;
    }

    .checkout-pay-option div {
      flex: 1;
      min-width: 0;
    }

    .checkout-pay-option > i,
    .checkout-pay-option > svg {
      color: #1F8A5B;
      flex: 0 0 auto;
    }

    .checkout-pay-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
    }

    .checkout-pay-tags span {
      padding: 6px 10px;
      border-radius: 999px;
      color: #5C6B81;
      background: #F2F6FB;
      font-size: 11.5px;
      font-weight: 800;
    }

    .order-date {
      display: block;
      margin: -2px 0 3px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
    }

    .payment-card {
      position: relative;
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      padding: 14px;
      border: 2px solid var(--primary-light);
      border-radius: 18px;
      background: #fff;
      box-shadow: 0 10px 24px rgba(46,134,208,.12);
    }

    .payment-card .step-heading {
      flex: 0 0 100%;
      margin-bottom: -2px;
    }

    .payment-card .icon-box {
      color: #1F8A5B;
      background: #E4F7EE;
    }

    .payment-card .menu-title strong {
      color: var(--primary);
      font-size: 13px;
    }

    .payment-card .recommended-pill {
      display: inline-block;
      width: fit-content;
      margin-top: 10px;
      padding: 4px 11px;
      border-radius: 999px;
      color: #1F8A5B;
      background: #E4F7EE;
      font-size: 11px;
      font-weight: 800;
    }

    [data-screen="checkout"].screen-view.is-active {
      gap: 0;
      overflow: hidden;
      margin: 0;
    }

    .checkout-scroll {
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding: 8px 0 12px;
      scrollbar-width: none;
    }

    .checkout-scroll::-webkit-scrollbar {
      display: none;
    }

    .checkout-main-column {
      display: flex;
      flex-direction: column;
      gap: 13px;
    }

    .checkout-selected-address {
      display: grid;
      grid-template-columns: 46px minmax(0, 1fr) auto;
      align-items: start;
      gap: 12px;
      padding: 13px;
      border: 1px solid #E8F0F8;
      border-radius: 17px;
      background: linear-gradient(180deg, #FFFFFF, #F8FCFF);
      box-shadow: 0 8px 18px rgba(13,27,46,.05);
    }

    .checkout-selected-address > span {
      width: 46px;
      height: 46px;
      display: grid;
      place-items: center;
      border-radius: 15px;
      color: #fff;
      background: var(--gradient);
      box-shadow: 0 8px 16px rgba(46,134,208,.24);
    }

    .checkout-selected-address div {
      min-width: 0;
    }

    .checkout-selected-address strong {
      display: block;
      color: var(--ink);
      font-size: 15px;
      line-height: 1.15;
      font-weight: 850;
    }

    .checkout-selected-address small {
      display: block;
      margin-top: 4px;
      color: var(--muted);
      font-size: 11.5px;
      font-weight: 700;
    }

    .checkout-selected-address p {
      margin: 6px 0 0;
      color: #506176;
      font-size: 12.5px;
      line-height: 1.42;
      font-weight: 650;
    }

    .checkout-selected-address button,
    .checkout-address-actions button {
      min-height: 34px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      border-radius: 999px;
      color: var(--primary);
      background: var(--primary-tint);
      font-size: 11.5px;
      font-weight: 850;
    }

    .checkout-selected-address button {
      padding: 0 11px;
    }

    .checkout-address-actions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 9px;
    }

    .checkout-address-actions button {
      min-height: 40px;
    }

    .checkout-delivery-note {
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 11px 12px;
      border-radius: 14px;
      color: #1F8A5B;
      background: #EAF8F1;
      font-size: 12.5px;
      font-weight: 750;
    }

    .checkout-delivery-note strong {
      color: #146D47;
      font-weight: 900;
    }

    .radio-dot {
      position: absolute;
      top: 16px;
      right: 16px;
      width: 22px;
      height: 22px;
      border: 6px solid #22C55E;
      border-radius: 999px;
    }

    .gift-apply {
      display: flex;
      gap: 8px;
    }

    .gift-apply span {
      flex: 1;
      min-height: 44px;
      display: flex;
      align-items: center;
      padding: 0 14px;
      border: 1px solid #E2E9F1;
      border-radius: 12px;
      color: #9AA8BD;
      font-size: 13px;
    }

    .gift-apply button,
    .checkout-footer button {
      border-radius: 12px;
      color: #fff;
      background: var(--gradient);
      font-size: 14px;
      font-weight: 800;
      box-shadow: 0 6px 14px rgba(46,134,208,.34);
    }

    .gift-apply button {
      padding: 0 20px;
    }

    .payment-confirm-card {
      display: grid;
      grid-template-columns: 24px 40px minmax(0, 1fr);
      align-items: center;
      gap: 11px;
      padding: 12px;
      border: 1px solid #DDEAF6;
      border-radius: 16px;
      background: #FFFFFF;
      box-shadow: 0 8px 18px rgba(13,27,46,.05);
      transition: all .2s ease;
    }

    .payment-confirm-card.is-confirmed {
      border-color: #9BE3C0;
      background: linear-gradient(180deg, #F6FFFA, #FFFFFF);
      box-shadow: 0 10px 22px rgba(31,138,91,.12);
    }

    .payment-confirm-card input {
      width: 22px;
      height: 22px;
      margin: 0;
      appearance: none;
      -webkit-appearance: none;
      display: grid;
      place-items: center;
      border: 2px solid #B9C9DA;
      border-radius: 7px;
      background: #fff;
    }

    .payment-confirm-card input:checked {
      border-color: transparent;
      background: #1F8A5B;
    }

    .payment-confirm-card input:checked::after {
      content: "";
      width: 10px;
      height: 6px;
      border: solid #fff;
      border-width: 0 0 2px 2px;
      transform: rotate(-45deg) translateY(-1px);
    }

    .payment-confirm-card > span {
      width: 40px;
      height: 40px;
      display: grid;
      place-items: center;
      border-radius: 13px;
      color: var(--primary);
      background: var(--primary-tint);
    }

    .payment-confirm-card.is-confirmed > span {
      color: #1F8A5B;
      background: #E4F7EE;
    }

    .payment-confirm-card p {
      min-width: 0;
      margin: 0;
    }

    .payment-confirm-card strong {
      display: block;
      color: var(--ink);
      font-size: 13.5px;
      line-height: 1.15;
      font-weight: 850;
    }

    .payment-confirm-card small {
      display: block;
      margin-top: 3px;
      color: var(--muted);
      font-size: 11.5px;
      line-height: 1.35;
      font-weight: 650;
    }

    .checkout-offer-card {
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: 20px;
      background: #fff;
      box-shadow: 0 8px 20px rgba(13,27,46,.06);
    }

    .checkout-offer-card > button {
      display: grid;
      grid-template-columns: 42px minmax(0, 1fr) 18px;
      align-items: center;
      gap: 11px;
      min-height: 56px;
      padding: 10px 12px;
      border-radius: 15px;
      background: #F8FCFE;
      text-align: left;
    }

    .checkout-offer-card > button > span {
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      border-radius: 13px;
      color: #C77E12;
      background: #FDF1DA;
    }

    .checkout-offer-card > button strong {
      display: block;
      color: var(--ink);
      font-size: 14px;
      font-weight: 850;
    }

    .checkout-offer-card > button small {
      display: block;
      margin-top: 2px;
      color: var(--muted);
      font-size: 11.5px;
      line-height: 1.35;
      font-weight: 650;
    }

    .wallet-apply button.is-active::before {
      left: 20px;
      background: #fff;
    }

    .wallet-apply button.is-active {
      background: #1F8A5B;
    }

    .gift-card-apply {
      display: flex;
      align-items: center;
      gap: 11px;
      padding: 11px 13px;
      border-radius: 13px;
      background: #FFF8EA;
    }

    .gift-card-apply.is-applied {
      background: #EFFAF5;
    }

    .gift-card-apply > span {
      width: 36px;
      height: 36px;
      display: grid;
      place-items: center;
      flex: 0 0 36px;
      border-radius: 10px;
      color: #fff;
      background: linear-gradient(140deg, #F8B83E, #D48B0B);
    }

    .gift-card-apply div {
      min-width: 0;
    }

    .gift-card-apply strong {
      display: block;
      color: var(--ink);
      font-size: 13px;
      font-weight: 850;
    }

    .gift-card-apply small {
      display: block;
      margin-top: 1px;
      color: #6F5B31;
      font-size: 11.5px;
      line-height: 1.35;
      font-weight: 650;
    }

    .checkout-gift-code-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px;
    }

    .checkout-gift-code-row input,
    .redeem-row input,
    .gift-recipient-grid input,
    .gift-recipient-grid textarea {
      width: 100%;
      min-width: 0;
      min-height: 46px;
      box-sizing: border-box;
      border: 1px solid #E2E9F1;
      border-radius: 13px;
      padding: 0 13px;
      color: var(--ink);
      background: #fff;
      font: inherit;
      font-size: 13px;
      font-weight: 700;
      outline: none;
    }

    .checkout-gift-code-row input:focus,
    .redeem-row input:focus,
    .gift-recipient-grid input:focus,
    .gift-recipient-grid textarea:focus {
      border-color: var(--primary-light);
      box-shadow: 0 0 0 3px rgba(80,194,233,.16);
    }

    .checkout-gift-code-row button {
      min-height: 46px;
      padding: 0 16px;
      border-radius: 13px;
      color: #fff;
      background: var(--gradient);
      font-size: 13px;
      font-weight: 850;
    }

    .checkout-gift-code-row button:disabled {
      opacity: .65;
    }

    .checkout-saving {
      display: flex;
      flex-direction: column;
      gap: 9px;
      padding: 12px 13px;
      border-radius: 13px;
      color: var(--ink);
      background: var(--primary-tint);
      font-size: 12px;
      font-weight: 700;
      line-height: 1.4;
    }

    .checkout-saving span {
      display: block;
    }

    .checkout-saving div {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .checkout-saving i {
      height: 7px;
      flex: 1;
      overflow: hidden;
      border-radius: 999px;
      background: linear-gradient(90deg, var(--primary-light) 0 58%, #fff 58% 100%);
    }

    .checkout-saving strong {
      flex: 0 0 auto;
      color: var(--ink);
      font-size: 11px;
      font-weight: 800;
      white-space: nowrap;
    }

    .checkout-footer {
      display: flex;
      align-items: center;
      gap: 14px;
      flex-shrink: 0;
      margin: 0;
      padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
      border-top: 1px solid #EEF3F9;
      background: #fff;
    }

    .checkout-footer span {
      display: block;
      color: var(--muted);
      font-size: 12px;
      font-weight: 600;
    }

    .checkout-footer strong {
      display: block;
      color: var(--ink);
      font-size: 22px;
      line-height: 1.1;
      font-weight: 800;
    }

    .checkout-footer button {
      flex: 1;
      min-height: 50px;
    }

    .split-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      color: var(--muted);
      font-size: 13px;
    }

    .split-row strong {
      color: var(--ink);
      font-size: 14px;
      font-weight: 800;
      text-align: right;
    }

    .split-row .price-with-mrp {
      display: inline-flex;
      align-items: baseline;
      justify-content: flex-end;
      gap: 7px;
    }

    .split-row .price-with-mrp del {
      color: #A9B6C7;
      font-size: 12.5px;
      font-weight: 700;
    }

    .total-row span,
    .total-row strong {
      color: var(--ink);
      font-size: 16px;
      font-weight: 800;
    }

    .order-total-paid strong {
      color: var(--primary);
      font-size: 19px;
    }

    .primary-action,
    .secondary-action {
      width: 100%;
      min-height: 50px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      border-radius: 16px;
      font-size: 14px;
      font-weight: 800;
    }

    .primary-action {
      color: #fff;
      background: var(--gradient);
      box-shadow: 0 10px 24px rgba(46, 134, 208, .32);
    }

    .secondary-action {
      color: var(--primary);
      border: 1px solid #D8E7F6;
      background: #F8FBFF;
    }

    .profile-avatar-large {
      position: relative;
      width: 92px;
      height: 92px;
      display: grid;
      place-items: center;
      align-self: center;
      border-radius: 28px;
      color: #fff;
      background: var(--gradient);
      box-shadow: 0 14px 28px rgba(46, 134, 208, .25);
    }

    .profile-photo-block {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      padding: 6px 0 18px;
    }

    .field-card {
      padding: 13px 14px;
    }

    .form-stack {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .order-card,
    .address-card {
      display: flex;
      flex-direction: column;
      gap: 9px;
      padding: 15px;
    }

    .order-card {
      border-color: var(--line);
      border-radius: 18px;
      background: #fff;
      box-shadow: 0 6px 16px rgba(13,27,46,.05);
    }

    .order-card p,
    .address-card p {
      margin: 0;
      color: var(--muted);
      font-size: 12.5px;
      line-height: 1.45;
    }

    .order-card-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding-bottom: 12px;
      border-bottom: 1px solid #F0F4F9;
    }

    .order-card-head > div {
      min-width: 0;
    }

    .order-card-head .status-pill {
      flex: 0 0 auto;
    }

    .order-card-meta {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 2px;
    }

    .order-card-meta span {
      min-height: 28px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 0 10px;
      border-radius: 999px;
      color: #245C77;
      background: #EEF9FD;
      font-size: 12px;
      line-height: 1;
      font-weight: 800;
    }

    .order-card-items {
      display: flex;
      flex-direction: column;
      gap: 0;
      border-top: 1px solid #F0F4F9;
      border-bottom: 1px solid #F0F4F9;
    }

    .order-items-empty {
      margin: 0;
      padding: 12px 0;
      color: var(--muted);
      font-size: 12.5px;
      line-height: 1.4;
    }

    .status-pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      width: max-content;
      min-height: 24px;
      padding: 0 10px;
      border-radius: 999px;
      color: var(--primary);
      background: var(--primary-tint);
      font-size: 11.5px;
      font-weight: 800;
    }

    .status-pill i:not(svg) {
      width: 6px;
      height: 6px;
      border-radius: 999px;
      background: currentColor;
    }

    .status-pill.is-soft {
      color: #238755;
      background: #E8F8EF;
    }

    .order-actions {
      display: flex;
      gap: 9px;
    }

    .order-actions button {
      flex: 1;
      min-height: 40px;
      border-radius: 11px;
      font-size: 13px;
      font-weight: 800;
    }

    .order-actions .is-outline {
      border: 1px solid #E2E9F1;
      color: var(--ink);
      background: #fff;
    }

    .order-actions .is-soft {
      color: var(--primary);
      background: var(--primary-tint);
    }

    .order-actions .is-primary {
      color: #fff;
      background: var(--gradient);
      box-shadow: 0 6px 14px rgba(46,134,208,.34);
    }

    .referral-hero,
    .gift-card-screen {
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding: 18px;
      border-radius: 24px;
      color: #fff;
      background: linear-gradient(135deg, #34B8DB, #2E86D0 58%, #1B5EA2);
      box-shadow: 0 16px 30px rgba(46, 134, 208, .28);
    }

    .referral-hero .detail-kicker,
    .gift-card-screen span {
      color: rgba(255,255,255,.86);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .12em;
    }

    .referral-hero h2 {
      margin: 0;
      max-width: 260px;
      font-size: 24px;
      line-height: 1.12;
      font-weight: 800;
    }

    .referral-hero p,
    .gift-card-screen p {
      margin: 0;
      color: rgba(255,255,255,.84);
      font-size: 13px;
      line-height: 1.45;
    }

    .referral-code {
      width: max-content;
      padding: 10px 14px;
      border: 1px dashed rgba(255,255,255,.62);
      border-radius: 14px;
      background: rgba(255,255,255,.16);
      font-size: 18px;
      font-weight: 800;
      letter-spacing: .08em;
    }

    .gift-card-screen strong {
      font-size: 34px;
      line-height: 1;
    }

    .timeline {
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    .timeline-step {
      position: relative;
      display: flex;
      gap: 12px;
      padding: 0 0 18px;
    }

    .timeline-step:last-child {
      padding-bottom: 0;
    }

    .timeline-step::before {
      content: "";
      position: absolute;
      left: 8px;
      top: 20px;
      bottom: 0;
      width: 2px;
      background: #DDE8F4;
    }

    .timeline-step:last-child::before {
      display: none;
    }

    .timeline-step > span {
      width: 18px;
      height: 18px;
      flex: 0 0 18px;
      border: 3px solid #DDE8F4;
      border-radius: 999px;
      background: #fff;
    }

    .timeline-step.is-complete > span,
    .timeline-step.is-active > span {
      border-color: var(--primary);
      background: var(--primary);
    }

    .timeline-step strong {
      display: block;
      font-size: 14px;
      line-height: 1.25;
    }

    .timeline-step small {
      display: block;
      margin-top: 3px;
      color: var(--muted);
      font-size: 12px;
    }

    .mini-product-row {
      display: flex;
      align-items: center;
      gap: 13px;
      padding: 14px;
      border-color: var(--line);
      background: #fff;
      box-shadow: 0 6px 16px rgba(13,27,46,.05);
    }

    .mini-product-row img,
    .product-detail-media img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
    }

    .mini-product-row img {
      width: 56px;
      height: 56px;
      flex: 0 0 56px;
      border-radius: 12px;
      background: #EAF3FB;
    }

    .mini-product-row > div {
      flex: 1;
      min-width: 0;
    }

    .mini-product-row > strong:last-child {
      flex: 0 0 auto;
    }

    .order-card .mini-product-row {
      gap: 12px;
      padding: 13px 0;
      border: 0;
      border-radius: 0;
      box-shadow: none;
    }

    .order-card .mini-product-row + .mini-product-row {
      border-top: 1px solid #F0F4F9;
    }

    .order-card .mini-product-row.is-order-line > strong:last-child {
      font-size: 12.5px;
      white-space: nowrap;
    }

    .order-card .mini-product-row img {
      width: 58px;
      height: 58px;
      flex-basis: 58px;
    }

    [data-screen="order-details"] .mini-product-row {
      gap: 13px;
      padding: 0;
      border: 0;
      border-radius: 0;
      box-shadow: none;
    }

    .checkout-product-row {
      display: grid;
      grid-template-columns: 64px minmax(0, 1fr) auto;
      gap: 13px;
      padding: 12px;
    }

    .checkout-product-row img {
      width: 64px;
      height: 64px;
      flex-basis: 64px;
      border-radius: 13px;
    }

    .product-detail-media {
      width: 100%;
      aspect-ratio: 1.28;
      overflow: hidden;
      border-radius: 20px;
      background: #EAF3FB;
    }

    .product-detail-copy h3 {
      margin: 10px 0 6px;
      font-size: 19px;
      line-height: 1.2;
      font-weight: 800;
    }

    .profile-avatar-large span {
      font-size: 38px;
      font-weight: 800;
    }

    .profile-avatar-large i {
      position: absolute;
      right: -4px;
      bottom: -4px;
      width: 30px;
      height: 30px;
      padding: 7px;
      border-radius: 999px;
      color: var(--primary);
      background: #fff;
      box-shadow: 0 2px 7px rgba(13,27,46,.2);
    }

    .profile-form {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 14px;
    }

    .profile-form label {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 7px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
    }

    .profile-form label strong {
      min-height: 50px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 0 15px;
      border: 1px solid #E2E9F1;
      border-radius: 13px;
      color: var(--ink);
      background: #fff;
      font-size: 15px;
      font-weight: 600;
    }

    .two-fields {
      width: 100%;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }

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

    .filter-chips span {
      padding: 8px 16px;
      border: 1px solid #E7EEF6;
      border-radius: 999px;
      color: #5C6B81;
      background: #fff;
      font-size: 13px;
      font-weight: 700;
    }

    .filter-chips .is-active {
      color: #fff;
      border-color: var(--primary);
      background: var(--primary);
      font-weight: 800;
    }

    .product-detail-copy p {
      margin: 0 0 10px;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.5;
    }

    .sticky-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .recommend-section {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .recommend-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 0 2px;
    }

    .recommend-head strong {
      color: var(--ink);
      font-size: 17px;
      font-weight: 800;
    }

    .recommend-head button {
      display: inline-flex;
      align-items: center;
      gap: 2px;
      color: var(--primary);
      font-size: 13px;
      font-weight: 800;
      white-space: nowrap;
    }

    .recommend-grid {
      display: flex;
      gap: 12px;
      overflow-x: auto;
      padding-bottom: 4px;
      scrollbar-width: none;
    }

    .recommend-grid::-webkit-scrollbar {
      display: none;
    }

    .recommend-grid article {
      width: 140px;
      flex: 0 0 140px;
      overflow: hidden;
      border: 1px solid #EAF0F7;
      border-radius: 16px;
      background: #fff;
      box-shadow: 0 6px 16px rgba(13, 27, 46, .06);
    }

    .recommend-grid article > div {
      position: relative;
      height: 120px;
      background: #EAF3FB;
    }

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

    .recommend-grid article > div button {
      position: absolute;
      top: 8px;
      right: 8px;
      width: 28px;
      height: 28px;
      display: grid;
      place-items: center;
      border-radius: 999px;
      color: var(--danger);
      background: #fff;
      box-shadow: 0 2px 6px rgba(13, 27, 46, .14);
    }

    .recommend-grid strong {
      display: -webkit-box;
      height: 33px;
      margin: 10px 10px 0;
      overflow: hidden;
      color: var(--ink);
      font-size: 12.5px;
      line-height: 1.3;
      font-weight: 700;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .recommend-grid span {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin: 7px 10px 10px;
    }

    .recommend-grid em {
      color: var(--ink);
      font-size: 15px;
      font-weight: 800;
      font-style: normal;
    }

    .recommend-grid span button {
      width: 30px;
      height: 30px;
      flex: 0 0 30px;
      display: grid;
      place-items: center;
      border-radius: 9px;
      color: #fff;
      background: var(--primary);
    }

    .breadcrumb-row {
      flex-shrink: 0;
      display: flex;
      gap: 8px;
      overflow-x: auto;
      padding: 16px 16px 12px;
      color: #9AA8BD;
      font-size: 12px;
      font-weight: 700;
      scrollbar-width: none;
      white-space: nowrap;
    }

    .breadcrumb-row::-webkit-scrollbar,
    .detail-thumbs::-webkit-scrollbar {
      display: none;
    }

    .breadcrumb-row strong {
      color: var(--primary);
      font-weight: 800;
    }

    [data-screen="product-detail"].screen-view.is-active {
      gap: 0;
      overflow: hidden;
      margin: -16px;
    }

    [data-screen="product-detail"] .detail-footer {
      margin: 0;
    }

    .product-detail-scroll {
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 0;
      padding: 0;
      scrollbar-width: none;
    }

    .product-detail-scroll::-webkit-scrollbar {
      display: none;
    }

    .pd-hero {
      position: relative;
      width: 100%;
      height: 386px;
      flex: 0 0 386px;
      overflow: hidden;
      background: linear-gradient(160deg, #EAF1F8, #DCE6F1);
    }

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

    .pd-hero-shade {
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(13,27,46,.14) 0%, rgba(13,27,46,0) 22%);
      pointer-events: none;
    }

    .pd-top-controls {
      position: absolute;
      top: 16px;
      left: 16px;
      right: 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .pd-top-controls > div {
      display: flex;
      gap: 10px;
    }

    .pd-back,
    .pd-top-controls > div button {
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      border-radius: 14px;
    }

    .pd-back {
      color: #fff;
      background: linear-gradient(140deg, var(--primary-light), var(--primary));
      box-shadow: 0 8px 18px rgba(46,134,208,.4), inset 0 1px 0 rgba(255,255,255,.35);
    }

    .pd-top-controls > div button {
      color: var(--ink);
      background: rgba(255,255,255,.94);
      box-shadow: 0 4px 12px rgba(13,27,46,.16);
      backdrop-filter: blur(6px);
    }

    .pd-top-controls .is-heart { color: var(--danger); }

    .pd-top-controls .is-heart.is-active {
      color: #fff;
      background: linear-gradient(135deg, #F43F5E, #EA9FBA);
      box-shadow: 0 12px 26px rgba(244, 63, 94, .24);
    }

    .pd-discount {
      position: absolute;
      top: 74px;
      left: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 8px 11px;
      border-radius: 14px;
      color: #fff;
      background: var(--danger);
      box-shadow: 0 8px 18px rgba(225,23,101,.4);
    }

    .pd-discount strong {
      font-size: 17px;
      line-height: 1;
      font-weight: 900;
    }

    .pd-discount small {
      margin-top: 2px;
      font-size: 9px;
      font-weight: 800;
      letter-spacing: .08em;
    }

    .pd-stock-overlay {
      position: absolute;
      left: 16px;
      bottom: 96px;
      z-index: 2;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 9px 13px;
      border: 1px solid rgba(255,255,255,.7);
      border-radius: 999px;
      color: #FFFFFF;
      background: rgba(13,27,46,.72);
      box-shadow: 0 12px 24px rgba(13,27,46,.24);
      backdrop-filter: blur(8px);
      font-size: 12px;
      font-weight: 900;
      letter-spacing: .02em;
    }

    .pd-dots {
      position: absolute;
      right: 0;
      bottom: 42px;
      left: 0;
      display: flex;
      justify-content: center;
      gap: 6px;
    }

    .pd-dots span {
      width: 6px;
      height: 6px;
      border-radius: 999px;
      background: rgba(13,27,46,.2);
    }

    .pd-dots span:first-child {
      width: 22px;
      background: var(--primary);
    }

    .pd-thumbs {
      position: absolute;
      right: 16px;
      bottom: 38px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .pd-thumbs button {
      width: 50px;
      height: 50px;
      overflow: hidden;
      border: 2px solid rgba(255,255,255,.6);
      border-radius: 13px;
      background: #EAF0F7;
      box-shadow: 0 4px 11px rgba(13,27,46,.14);
    }

    .pd-thumbs .is-active {
      border-color: #fff;
      box-shadow: 0 4px 11px rgba(13,27,46,.2);
    }

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

    .pd-sheet {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      gap: 14px;
      margin-top: -28px;
      padding: 8px 16px 18px;
      border-radius: 28px 28px 0 0;
      background: var(--screen);
    }

    .pd-handle {
      width: 44px;
      height: 5px;
      display: block;
      margin: 4px auto;
      border-radius: 999px;
      background: #D6DFEA;
    }

    .pd-title-block h2 {
      margin: 9px 0 0;
      color: var(--ink);
      font-size: 22px;
      line-height: 1.22;
      font-weight: 800;
      letter-spacing: -.4px;
    }

    .pd-tags,
    .pd-meta,
    .pd-price {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
    }

    .pd-tags { gap: 8px; }

    .pd-tags span {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 5px 11px;
      border-radius: 999px;
      color: var(--primary);
      background: var(--primary-tint);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .04em;
    }

    .pd-tags span:nth-child(2) {
      color: #C77E12;
      background: #FDF1DA;
    }

    .pd-tags span.is-out {
      color: #9A3412;
      background: #FFF0E6;
    }

    .pd-meta {
      gap: 10px;
      margin-top: 10px;
    }

    .pd-meta span {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      color: #1F8A5B;
      font-size: 12.5px;
      font-weight: 800;
    }

    .pd-meta > i {
      width: 4px;
      height: 4px;
      border-radius: 999px;
      background: #C3CDDB;
    }

    .pd-meta span:last-child { color: var(--ink); }
    .pd-meta span:last-child svg { color: #F5A623; fill: #F5A623; }
    .pd-meta em { color: #9AA8BD; font-style: normal; font-weight: 600; }

    .pd-price {
      gap: 11px;
      margin-top: 13px;
    }

    .pd-price strong {
      color: var(--ink);
      font-size: 32px;
      line-height: 1;
      font-weight: 900;
      letter-spacing: -.8px;
    }

    .pd-price del {
      color: #A9B6C7;
      font-size: 15px;
    }

    .pd-price span {
      padding: 4px 10px;
      border-radius: 8px;
      color: #1F8A5B;
      background: #E4F7EE;
      font-size: 12px;
      font-weight: 800;
    }

    .pd-card {
      border: 1px solid var(--line);
      border-radius: 18px;
      background: #fff;
      box-shadow: 0 6px 16px rgba(13,27,46,.05);
    }

    .pd-colors,
    .pd-copy,
    .pd-delivery {
      padding: 15px;
    }

    .pd-colors > div {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12px;
    }

    .pd-colors strong,
    .pd-copy h3,
    .pd-delivery h3 {
      margin: 0;
      color: var(--ink);
      font-size: 15px;
      font-weight: 800;
    }

    .pd-colors > div span {
      color: var(--primary);
      font-size: 13px;
      font-weight: 800;
    }

    .pd-colors section {
      display: flex;
      gap: 11px;
    }

    .pd-colors button {
      width: 46px;
      height: 46px;
      display: grid;
      place-items: center;
      border-radius: 14px;
      color: #fff;
      background: var(--swatch);
      box-shadow: 0 0 0 1px #E7EEF6;
    }

    .pd-colors .is-active {
      box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--primary);
    }

    .pd-highlights {
      display: flex;
      gap: 9px;
      overflow-x: auto;
      margin: 0 -16px;
      padding: 0 16px 2px;
      scrollbar-width: none;
    }

    .pd-highlights::-webkit-scrollbar { display: none; }

    .pd-highlights div {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 11px 14px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: #fff;
      box-shadow: 0 3px 9px rgba(13,27,46,.04);
    }

    .pd-highlights span,
    .pd-info-list button > span {
      width: 30px;
      height: 30px;
      flex: 0 0 30px;
      display: grid;
      place-items: center;
      border-radius: 9px;
      color: var(--primary);
      background: var(--primary-tint);
    }

    .pd-highlights p { margin: 0; }

    .pd-highlights strong {
      display: block;
      color: var(--ink);
      font-size: 12.5px;
      line-height: 1.1;
      font-weight: 800;
      white-space: nowrap;
    }

    .pd-highlights small {
      display: block;
      margin-top: 2px;
      color: var(--muted);
      font-size: 10.5px;
      white-space: nowrap;
    }

    .pd-copy p {
      margin: 8px 0 0;
      color: #5C6B81;
      font-size: 13.5px;
      line-height: 1.6;
    }

    .pd-copy button {
      margin-top: 8px;
      color: var(--primary);
      font-size: 13px;
      font-weight: 800;
    }

    .pd-reviews {
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding: 15px;
    }

    .pd-reviews > div {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .pd-reviews h3 {
      margin: 0;
      color: var(--ink);
      font-size: 15px;
      font-weight: 800;
    }

    .pd-reviews > div > span {
      display: inline-flex;
      align-items: center;
      min-height: 28px;
      border-radius: 999px;
      padding: 0 10px;
      color: #9B6A00;
      background: #FFF3D8;
      font-size: 12px;
      font-weight: 850;
    }

    .pd-reviews article {
      border: 1px solid #EEF3F9;
      border-radius: 14px;
      padding: 10px 11px;
      background: #FAFCFF;
    }

    .pd-review-card > header {
      display: flex;
      align-items: center;
      gap: 9px;
    }

    .pd-review-avatar {
      width: 38px;
      height: 38px;
      flex: 0 0 38px;
      border-radius: 50%;
      object-fit: cover;
      background: #E7F7FD;
    }

    .pd-review-avatar--initials {
      display: grid;
      place-items: center;
      color: #075D80;
      background: linear-gradient(145deg, #DDF5FC, #BEE9F6);
      font-size: 12px;
      font-weight: 900;
      letter-spacing: .04em;
    }

    .pd-reviews article .pd-review-avatar--initials {
      display: grid;
      margin-top: 0;
      color: #075D80;
    }

    .pd-review-card > header > div {
      min-width: 0;
      flex: 1;
    }

    .pd-review-card .pd-review-stars {
      display: block;
      margin-top: 3px;
    }

    .pd-review-verified {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      color: #087F4B;
      font-size: 10px;
      font-weight: 850;
      white-space: nowrap;
    }

    .pd-review-images {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 7px;
      margin-top: 10px;
    }

    .pd-review-images img {
      width: 100%;
      aspect-ratio: 1;
      border-radius: 9px;
      object-fit: cover;
      background: #E7F7FD;
    }

    .pd-reviews article strong {
      display: block;
      color: var(--ink);
      font-size: 13px;
      font-weight: 850;
    }

    .pd-reviews article span {
      display: block;
      margin-top: 3px;
      color: #F5A623;
      font-size: 12px;
      letter-spacing: 0;
    }

    .pd-reviews article p,
    .pd-review-empty {
      margin: 6px 0 0;
      color: #5C6B81;
      font-size: 12.5px;
      line-height: 1.45;
    }

    .pd-review-form {
      display: grid;
      gap: 9px;
      border-top: 1px solid #F0F4F9;
      padding-top: 12px;
    }

    .pd-review-form select,
    .pd-review-form input,
    .pd-review-form textarea {
      width: 100%;
      border: 1px solid #E2E9F1;
      border-radius: 12px;
      padding: 11px 12px;
      color: var(--ink);
      background: #fff;
      font: inherit;
      font-size: 13px;
      font-weight: 700;
      outline: 0;
    }

    .pd-review-form textarea {
      min-height: 78px;
      resize: vertical;
    }

    .pd-review-form button {
      min-height: 44px;
      border-radius: 12px;
      color: #fff;
      background: var(--gradient);
      font-size: 13.5px;
      font-weight: 850;
      box-shadow: 0 8px 18px rgba(46,134,208,.28);
    }

    .pd-delivery h3 {
      display: flex;
      align-items: center;
      gap: 9px;
    }

    .pd-delivery h3 svg { color: var(--primary); }

    .pd-delivery > div {
      display: flex;
      gap: 8px;
      margin-top: 12px;
    }

    .pd-delivery > div span {
      flex: 1;
      height: 44px;
      display: flex;
      align-items: center;
      padding: 0 14px;
      border: 1px solid #E2E9F1;
      border-radius: 12px;
      color: #9AA8BD;
      font-size: 13.5px;
    }

    .pd-delivery > div button {
      height: 44px;
      padding: 0 18px;
      border-radius: 12px;
      color: var(--primary);
      background: var(--primary-tint);
      font-size: 14px;
      font-weight: 800;
    }

    .pd-delivery p {
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 12px 0 0;
      color: #5C6B81;
      font-size: 13px;
    }

    .pd-delivery p svg { color: #1F8A5B; }
    .pd-delivery p strong { color: var(--ink); font-weight: 800; }

    .pd-info-list {
      padding: 2px 16px;
    }

    .pd-info-list button {
      width: 100%;
      display: flex;
      align-items: center;
      gap: 13px;
      padding: 15px 0;
      text-align: left;
    }

    .pd-info-list button + button { border-top: 1px solid #F0F4F9; }

    .pd-info-list button > span {
      width: 38px;
      height: 38px;
      flex-basis: 38px;
      border-radius: 11px;
    }

    .pd-info-list div {
      min-width: 0;
      flex: 1;
    }

    .pd-info-list strong {
      display: block;
      color: var(--ink);
      font-size: 14.5px;
      font-weight: 800;
    }

    .pd-info-list small {
      display: block;
      margin-top: 1px;
      color: var(--muted);
      font-size: 12px;
    }

    .pd-recommend > div {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12px;
    }

    .pd-recommend > div strong {
      color: var(--ink);
      font-size: 16px;
      font-weight: 800;
    }

    .pd-recommend > div button {
      color: var(--primary);
      font-size: 13px;
      font-weight: 800;
    }

    .pd-recommend > section {
      display: flex;
      gap: 12px;
      overflow-x: auto;
      margin: 0 -16px;
      padding: 0 16px 4px;
      scrollbar-width: none;
    }

    .pd-recommend > section::-webkit-scrollbar { display: none; }

    .pd-recommend article {
      flex: 0 0 140px;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: #fff;
      box-shadow: 0 6px 16px rgba(13,27,46,.06);
    }

    .pd-recommend article > div {
      position: relative;
      height: 120px;
      background: #EAF0F7;
    }

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

    .pd-recommend article > div button {
      position: absolute;
      top: 8px;
      right: 8px;
      width: 28px;
      height: 28px;
      display: grid;
      place-items: center;
      border-radius: 999px;
      color: var(--danger);
      background: #fff;
      box-shadow: 0 2px 6px rgba(13,27,46,.14);
    }

    .pd-recommend article > strong {
      height: 33px;
      display: block;
      overflow: hidden;
      margin: 10px 10px 0;
      color: var(--ink);
      font-size: 12.5px;
      line-height: 1.3;
      font-weight: 700;
    }

    .pd-recommend article > span {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 7px 10px 10px;
    }

    .pd-recommend em {
      color: var(--ink);
      font-size: 15px;
      font-style: normal;
      font-weight: 800;
    }

    .pd-recommend article > span button {
      width: 30px;
      height: 30px;
      display: grid;
      place-items: center;
      border-radius: 9px;
      color: #fff;
      background: var(--primary);
    }

    .pd-footer {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      gap: 11px;
      padding: 10px 16px calc(12px + env(safe-area-inset-bottom));
      border-top: 1px solid #EEF3F9;
      background: #fff;
    }

    .pd-qty {
      display: flex;
      align-items: center;
      gap: 2px;
      padding: 4px;
      border: 1px solid #E7EEF6;
      border-radius: 13px;
      background: #F2F6FB;
    }

    .pd-qty button {
      width: 34px;
      height: 34px;
      color: var(--primary);
      font-size: 19px;
      font-weight: 700;
    }

    .pd-qty strong {
      min-width: 28px;
      color: var(--ink);
      font-size: 15px;
      font-weight: 800;
      text-align: center;
    }

    .pd-qty.is-disabled {
      opacity: .58;
    }

    .pd-qty.is-disabled button {
      cursor: not-allowed;
      color: #9AA8BD;
    }

    .pd-cart,
    .pd-buy {
      flex: 1;
      height: 52px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      border-radius: 14px;
      font-weight: 800;
      white-space: nowrap;
    }

    .pd-cart {
      color: var(--primary);
      background: var(--primary-tint);
      font-size: 14.5px;
    }

    .pd-cart.is-added {
      color: #fff;
      background: linear-gradient(135deg, #19B96F 0%, #07965E 100%);
      box-shadow: 0 10px 22px rgba(7, 150, 94, .24);
    }

    .pd-buy {
      color: #fff;
      background: var(--gradient);
      box-shadow: 0 10px 22px rgba(46,134,208,.4);
      font-size: 15px;
    }

    .buy-now.is-disabled,
    .save-product.is-disabled,
    .pd-cart.is-disabled,
    .pd-buy.is-disabled {
      cursor: not-allowed;
      color: #7A8AA0;
      border-color: #DCE6F1;
      background: #EEF3F8;
      box-shadow: none;
    }

    .product-detail-gallery {
      position: relative;
      flex-shrink: 0;
      height: 300px;
      overflow: hidden;
      border-radius: 20px;
      background: #EAF0F7;
    }

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

    .gallery-back,
    .gallery-tools button,
    .gallery-tools span {
      width: 40px;
      height: 40px;
      display: grid;
      place-items: center;
      border-radius: 999px;
      box-shadow: 0 3px 9px rgba(13, 27, 46, .14);
    }

    .gallery-back {
      position: absolute;
      top: 12px;
      left: 12px;
      color: var(--ink);
      background: rgba(255,255,255,.92);
      border-radius: 13px;
    }

    .gallery-tools {
      position: absolute;
      top: 12px;
      right: 12px;
      display: flex;
      flex-direction: column;
      gap: 9px;
    }

    .gallery-tools span {
      color: #fff;
      background: var(--ink);
      font-size: 12px;
      font-weight: 800;
    }

    .gallery-tools button {
      color: var(--primary);
      background: rgba(255,255,255,.92);
    }

    .gallery-discount {
      position: absolute;
      left: 12px;
      bottom: 12px;
      padding: 5px 12px;
      border-radius: 9px;
      color: #fff;
      background: #E11765;
      box-shadow: 0 4px 10px rgba(225,23,101,.35);
      font-size: 12px;
      font-weight: 800;
    }

    .detail-thumbs {
      display: flex;
      gap: 9px;
      overflow-x: auto;
      scrollbar-width: none;
    }

    .detail-thumbs button {
      width: 60px;
      height: 60px;
      flex: 0 0 60px;
      overflow: hidden;
      border: 1px solid #E2E9F1;
      border-radius: 13px;
      background: #EAF0F7;
    }

    .detail-thumbs button.is-active {
      border: 2px solid var(--primary);
    }

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

    .verified-line {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-top: 9px;
      color: #1F8A5B;
      font-size: 12.5px;
      font-weight: 700;
    }

    .detail-price {
      gap: 11px;
      margin-top: 12px;
    }

    .detail-price strong {
      font-size: 30px;
      letter-spacing: 0;
    }

    .detail-price span {
      padding: 4px 10px;
      border-radius: 8px;
      color: #fff;
      background: #E11765;
      font-size: 12px;
      font-weight: 800;
    }

    .trust-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 9px;
    }

    .trust-grid div {
      display: grid;
      grid-template-columns: 30px minmax(0, 1fr);
      gap: 2px 9px;
      align-items: start;
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: #fff;
      box-shadow: 0 3px 9px rgba(13,27,46,.04);
    }

    .trust-grid span {
      grid-row: span 2;
      width: 30px;
      height: 30px;
      display: grid;
      place-items: center;
      border-radius: 9px;
      color: var(--primary);
      background: var(--primary-tint);
    }

    .trust-grid strong {
      font-size: 12.5px;
      line-height: 1.2;
    }

    .trust-grid small {
      color: var(--muted);
      font-size: 10.5px;
    }

    .detail-description {
      margin: 0;
      color: #5C6B81;
      font-size: 13.5px;
      line-height: 1.6;
    }

    .read-more {
      width: fit-content;
      color: var(--primary);
      font-size: 13px;
      font-weight: 800;
    }

    .tag-row {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .tag-row > span:not(.status-pill):not(.warn-pill),
    .warn-pill {
      padding: 5px 11px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 700;
    }

    .tag-row > span:not(.status-pill):not(.warn-pill) {
      color: #5C6B81;
      background: #F2F6FB;
      border: 1px solid #E7EEF6;
    }

    .warn-pill {
      color: #C77E12;
      background: #FDF1DA;
      font-weight: 800;
    }

    .color-choice {
      width: fit-content;
      display: inline-flex;
      align-items: center;
      gap: 9px;
      padding: 9px 16px 9px 12px;
      border: 2px solid var(--primary-light);
      border-radius: 999px;
      color: var(--ink);
      background: var(--primary-tint);
      font-size: 14px;
      font-weight: 800;
    }

    .color-choice span {
      width: 16px;
      height: 16px;
      border-radius: 999px;
      background: #E11765;
    }

    .dark-qty {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      padding: 4px;
      border-radius: 12px;
      background: var(--ink);
    }

    .dark-qty button,
    .dark-qty strong {
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      color: #fff;
      font-size: 19px;
      font-weight: 700;
    }

    .dark-qty strong {
      width: 40px;
      color: var(--ink);
      background: #fff;
      border-radius: 9px;
      font-size: 15px;
      font-weight: 800;
    }

    .product-info-list {
      gap: 0;
      padding: 2px 16px;
    }

    .product-info-list button {
      min-height: 68px;
      display: flex;
      align-items: center;
      gap: 13px;
      padding: 15px 0;
      text-align: left;
    }

    .product-info-list button + button {
      border-top: 1px solid #F0F4F9;
    }

    .product-info-list button > span {
      width: 38px;
      height: 38px;
      flex: 0 0 38px;
      display: grid;
      place-items: center;
      border-radius: 11px;
      color: var(--primary);
      background: var(--primary-tint);
    }

    .product-info-list div {
      flex: 1;
      min-width: 0;
    }

    .product-info-list strong {
      display: block;
      font-size: 14.5px;
      line-height: 1.25;
    }

    .product-info-list small {
      display: block;
      margin-top: 1px;
      color: var(--muted);
      font-size: 12px;
    }

    .review-empty {
      padding: 22px 16px;
      border: 1px dashed #C9D6E5;
      border-radius: 16px;
      color: var(--muted);
      text-align: center;
      font-size: 13.5px;
    }

    .reference-referral {
      align-items: center;
      padding: 24px 20px;
      text-align: center;
    }

    .reference-referral .refer-banner-icon {
      width: 60px;
      height: 60px;
      flex-basis: 60px;
      margin: 0 auto;
      border-radius: 18px;
    }

    .referral-code-row {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 6px 6px 6px 18px;
      border: 2px dashed var(--primary-light);
      border-radius: 15px;
      background: #fff;
    }

    .referral-code-row strong {
      flex: 1;
      color: var(--ink);
      font-size: 19px;
      font-weight: 800;
      letter-spacing: .12em;
    }

    .referral-code-row button {
      padding: 11px 18px;
      border-radius: 11px;
      color: #fff;
      background: var(--gradient);
      box-shadow: 0 6px 14px rgba(46,134,208,.34);
      font-size: 14px;
      font-weight: 800;
    }

    .share-actions {
      display: flex;
      gap: 10px;
    }

    .share-actions button {
      flex: 1;
      min-height: 48px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      border: 1px solid var(--line);
      border-radius: 13px;
      color: var(--ink);
      background: #fff;
      box-shadow: 0 4px 12px rgba(13,27,46,.05);
      font-size: 14px;
      font-weight: 800;
    }

    .share-actions button:nth-child(2) {
      color: var(--primary);
      background: var(--primary-tint);
    }

    .refer-share-actions button:nth-child(2) {
      color: var(--ink);
      background: #fff;
    }

    .refer-share-actions button:first-child svg {
      color: var(--primary);
    }

    .refer-share-actions button:nth-child(2) svg {
      color: #22C55E;
    }

    .share-actions .is-primary {
      color: #fff;
      border-color: transparent;
      background: var(--gradient);
      box-shadow: 0 8px 18px rgba(46,134,208,.34);
    }

    .how-card h3,
    .gift-buy h3 {
      margin: 0 0 14px;
      font-size: 15px;
      line-height: 1.2;
      font-weight: 800;
    }

    .how-card div {
      display: flex;
      gap: 13px;
      align-items: flex-start;
    }

    .how-card div + div {
      margin-top: 14px;
    }

    .how-card span {
      width: 30px;
      height: 30px;
      flex: 0 0 30px;
      display: grid;
      place-items: center;
      border-radius: 999px;
      color: var(--primary);
      background: var(--primary-tint);
      font-size: 13px;
      font-weight: 800;
    }

    .how-card p {
      margin: 4px 0 0;
      color: #5C6B81;
      font-size: 13px;
      line-height: 1.45;
    }

    .earned-card,
    .info-nudge {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 16px 18px;
      border-radius: 16px;
      background: var(--primary-tint);
    }

    .earned-card span,
    .info-nudge span {
      color: #5C6B81;
      font-size: 13px;
      font-weight: 700;
      line-height: 1.5;
    }

    .earned-card strong {
      color: var(--primary);
      font-size: 22px;
      font-weight: 800;
    }

    .saved-address {
      padding: 16px;
      border: 1px solid var(--line);
      border-radius: 18px;
      background: #fff;
      box-shadow: 0 6px 16px rgba(13,27,46,.05);
    }

    .saved-address.is-default {
      border: 2px solid var(--primary-light);
      box-shadow: 0 8px 20px rgba(46,134,208,.10);
    }

    .saved-address.is-selectable {
      cursor: pointer;
    }

    .saved-address.is-selectable:active {
      transform: scale(.99);
    }

    .saved-address-head {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .saved-address-head strong {
      min-width: 0;
      color: var(--ink);
      font-size: 15px;
      font-weight: 800;
    }

    .buy-now.is-disabled,
    .save-product.is-disabled,
    .pd-cart.is-disabled,
    .pd-buy.is-disabled {
      cursor: not-allowed;
      color: #7A8AA0;
      border-color: #DCE6F1;
      background: #EEF3F8;
      box-shadow: none;
    }

    .save-product.is-disabled {
      color: #8A97A8;
    }

    .saved-address-head .icon-box {
      width: 38px;
      height: 38px;
      flex-basis: 38px;
      border-radius: 11px;
    }

    .saved-address-head em {
      padding: 3px 9px;
      border-radius: 999px;
      color: var(--primary);
      background: var(--primary-tint);
      font-size: 10px;
      font-style: normal;
      font-weight: 800;
    }

    .saved-address-actions {
      margin-left: auto;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      flex: 0 0 auto;
    }

    .saved-address-head button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 34px;
      height: 34px;
      border: 0;
      border-radius: 11px;
      color: #7A8899;
      background: #F4F8FC;
      box-shadow: 0 6px 14px rgba(13, 27, 46, .06);
      font: inherit;
    }

    .saved-address-head button.is-danger {
      color: var(--danger);
      background: #FFF5F8;
      box-shadow: 0 6px 14px rgba(225, 23, 101, .08);
    }

    .saved-address-head button:active {
      transform: scale(.97);
    }

    .icon-box.is-muted {
      color: #5C6B81;
      background: #F2F6FB;
    }

    .saved-address p,
    .delivery-row p {
      margin: 12px 0 0;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.5;
    }

    .saved-address p strong,
    .delivery-row p strong {
      display: block;
      margin-bottom: 4px;
      color: var(--ink);
      font-size: 14px;
    }

    .address-select-action {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      min-height: 44px;
      margin-top: 14px;
      border: 0;
      border-radius: 14px;
      color: #fff;
      background: linear-gradient(135deg, var(--primary-light), var(--primary));
      box-shadow: 0 10px 22px rgba(46,134,208,.18);
      font: inherit;
      font-size: 14px;
      font-weight: 800;
    }

    .address-default-action {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      width: 100%;
      min-height: 42px;
      margin-top: 12px;
      border: 1px solid #D8E7F5;
      border-radius: 14px;
      color: var(--primary);
      background: #F7FCFF;
      box-shadow: 0 8px 18px rgba(46,134,208,.08);
      font: inherit;
      font-size: 13.5px;
      font-weight: 850;
    }

    .address-default-action:active {
      transform: scale(.99);
    }

    .address-card-actions {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
      gap: 10px;
      margin-top: 12px;
    }

    .address-card-actions .address-default-action {
      margin-top: 0;
    }

    .address-delete-action {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      width: 100%;
      min-height: 42px;
      border: 1px solid rgba(225, 23, 101, .22);
      border-radius: 14px;
      color: var(--danger);
      background: #FFF5F8;
      box-shadow: 0 8px 18px rgba(225, 23, 101, .08);
      font: inherit;
      font-size: 13.5px;
      font-weight: 850;
    }

    .address-delete-action:active {
      transform: scale(.99);
    }

    .reference-gift-card {
      gap: 0;
      padding: 20px;
      color: #fff;
      border-radius: 22px;
      background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 48%, #1F6FB8 100%);
      box-shadow: 0 18px 38px rgba(46,134,208,.4);
    }

    .reference-gift-card::before,
    .reference-gift-card::after {
      content: "";
      position: absolute;
      border-radius: 999px;
      background: rgba(255,255,255,.12);
    }

    .reference-gift-card::before {
      top: -50px;
      right: -40px;
      width: 170px;
      height: 170px;
    }

    .reference-gift-card::after {
      right: 18px;
      bottom: -44px;
      width: 120px;
      height: 120px;
      background: rgba(255,255,255,.08);
    }

    .gift-card-top {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
    }

    .gift-card-top > span {
      color: rgba(255,255,255,.85);
      font-size: 11.5px;
      font-weight: 800;
      letter-spacing: .16em;
    }

    .gift-card-top > i {
      width: 40px;
      height: 40px;
      display: grid;
      place-items: center;
      border-radius: 13px;
      color: #fff;
      background: rgba(255,255,255,.18);
    }

    .gift-card-chip {
      position: relative;
      z-index: 1;
      width: 34px;
      height: 25px;
      display: block;
      margin-top: 14px;
      border-radius: 6px;
      background: linear-gradient(135deg,#F6D78B,#D8A84A);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.4);
    }

    .reference-gift-card small {
      position: relative;
      z-index: 1;
      margin-top: 18px;
      color: rgba(255,255,255,.78);
      font-size: 12px;
    }

    .reference-gift-card strong {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: baseline;
      gap: 8px;
      margin-top: 3px;
      color: #fff;
      font-size: 36px;
      line-height: 1;
      letter-spacing: -.6px;
    }

    .reference-gift-card strong em {
      padding: 3px 9px;
      border-radius: 999px;
      color: #fff;
      background: rgba(255,255,255,.2);
      font-size: 11px;
      font-style: normal;
      font-weight: 800;
      letter-spacing: 0;
    }

    .gift-card-meta {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      margin-top: 20px;
    }

    .gift-card-meta span {
      color: #fff;
      font-size: 13px;
      font-weight: 800;
    }

    .gift-card-meta span:last-child {
      text-align: right;
    }

    .gift-card-meta small {
      display: block;
      margin: 0 0 2px;
      color: rgba(255,255,255,.6);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .1em;
    }

    .gift-buy {
      display: flex;
      flex-direction: column;
      gap: 11px;
    }

    .wallet-credit-note {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 10px;
      padding: 11px 13px;
      border-radius: 12px;
      background: var(--primary-tint);
    }

    .wallet-credit-note > span {
      width: 30px;
      height: 30px;
      flex: 0 0 30px;
      display: grid;
      place-items: center;
      border-radius: 9px;
      color: #fff;
      background: linear-gradient(140deg, var(--primary-light), var(--primary));
    }

    .wallet-credit-note p {
      margin: 0;
      color: var(--ink);
      font-size: 12px;
      line-height: 1.45;
    }

    .wallet-credit-note strong {
      color: var(--primary);
    }

    .info-screen,
    .login-screen {
      position: relative;
      gap: 0;
      overflow: hidden;
      margin: 0;
    }

    .info-screen > .simple-head {
      flex-shrink: 0;
      padding: 0 0 12px;
    }

    .info-scroll,
    .login-scroll {
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      scrollbar-width: none;
    }

    .info-scroll::-webkit-scrollbar,
    .login-scroll::-webkit-scrollbar {
      display: none;
    }

    .info-scroll {
      gap: 15px;
      padding: 6px 0 18px;
    }

    .info-card {
      border: 1px solid var(--line);
      border-radius: 18px;
      background: #fff;
      box-shadow: 0 6px 16px rgba(13,27,46,.05);
      padding: 16px;
    }

    .info-card p {
      margin: 0;
      color: #5C6B81;
      font-size: 13.5px;
      line-height: 1.65;
    }

    .about-hero {
      position: relative;
      overflow: hidden;
      padding: 22px;
      border-radius: 22px;
      text-align: center;
      color: #fff;
      background: linear-gradient(150deg, var(--primary-light), var(--primary) 60%, #1F6FB8);
      box-shadow: 0 18px 36px -10px rgba(46,134,208,.5);
    }

    .about-hero::after {
      content: "";
      position: absolute;
      top: -50px;
      right: -40px;
      width: 160px;
      height: 160px;
      border-radius: 999px;
      background: rgba(255,255,255,.10);
    }

    .about-hero span {
      position: relative;
      z-index: 1;
      width: 70px;
      height: 70px;
      display: grid;
      place-items: center;
      margin: 0 auto;
      border: 2px solid rgba(255,255,255,.5);
      border-radius: 20px;
      background: rgba(255,255,255,.16);
      font-size: 30px;
      font-weight: 800;
    }

    .about-hero strong,
    .about-hero small {
      position: relative;
      z-index: 1;
      display: block;
    }

    .about-hero strong {
      margin-top: 13px;
      font-size: 24px;
      letter-spacing: .12em;
    }

    .about-hero small {
      margin-top: 5px;
      color: rgba(255,255,255,.85);
      font-size: 12.5px;
      font-weight: 700;
      letter-spacing: .04em;
    }

    .stat-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
    }

    .stat-grid div {
      padding: 14px 6px;
      border: 1px solid var(--line);
      border-radius: 18px;
      text-align: center;
      background: #fff;
      box-shadow: 0 6px 16px rgba(13,27,46,.05);
    }

    .stat-grid strong {
      display: block;
      color: var(--primary);
      font-size: 20px;
      font-weight: 800;
    }

    .stat-grid span {
      display: block;
      margin-top: 3px;
      color: var(--muted);
      font-size: 10.5px;
    }

    .value-list {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .value-list h3,
    .social-card h3,
    .charge-list h3,
    .request-list h3 {
      margin: 0;
      color: var(--ink);
      font-size: 15px;
      font-weight: 800;
    }

    .value-list div,
    .contact-row {
      display: flex;
      align-items: flex-start;
      gap: 13px;
    }

    .value-list span,
    .contact-row > span {
      width: 42px;
      height: 42px;
      flex: 0 0 42px;
      display: grid;
      place-items: center;
      border-radius: 13px;
      color: var(--primary);
      background: var(--primary-tint);
    }

    .value-list p,
    .contact-row p {
      margin: 0;
      min-width: 0;
      flex: 1;
    }

    .value-list strong,
    .contact-row strong {
      display: block;
      color: var(--ink);
      font-size: 14.5px;
      font-weight: 800;
    }

    .value-list small,
    .contact-row small {
      display: block;
      margin-top: 2px;
      color: var(--muted);
      font-size: 12.5px;
      line-height: 1.5;
    }

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

    .contact-grid div,
    .contact-grid button {
      display: flex;
      flex-direction: column;
      gap: 9px;
      padding: 14px;
      min-height: 118px;
      min-width: 0;
      width: 100%;
      text-align: left;
      font: inherit;
      border: 1px solid var(--line);
      border-radius: 18px;
      background: #fff;
      box-shadow: 0 6px 16px rgba(13,27,46,.05);
    }

    .contact-grid span {
      width: 40px;
      height: 40px;
      display: grid;
      place-items: center;
      border-radius: 12px;
      color: var(--primary);
      background: var(--primary-tint);
    }

    .contact-grid .is-green { color: #1F8A5B; background: #E4F7EE; }
    .contact-grid .is-gold { color: #C77E12; background: #FDF1DA; }
    .contact-grid .is-pink { color: #DB2777; background: #FCE7F1; }

    .contact-grid small {
      color: #9AA8BD;
      font-size: 11px;
      font-weight: 700;
    }

    .contact-grid strong {
      color: var(--ink);
      font-size: 13.5px;
      font-weight: 800;
      line-height: 1.25;
      overflow-wrap: anywhere;
    }

    button.info-card,
    button.contact-row {
      width: 100%;
      border: 1px solid var(--line);
      text-align: left;
      font: inherit;
      appearance: none;
      -webkit-appearance: none;
    }

    .contact-row em {
      display: block;
      margin-top: 9px;
      color: var(--primary);
      font-size: 12.5px;
      font-style: normal;
      font-weight: 800;
    }

    .social-card div {
      display: flex;
      gap: 11px;
      margin-top: 12px;
    }

    .social-card button {
      flex: 1;
      height: 46px;
      display: grid;
      place-items: center;
      border-radius: 13px;
      color: var(--primary);
      background: var(--primary-tint);
    }

    .policy-pill {
      width: fit-content;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 12px;
      border-radius: 999px;
      color: var(--primary);
      background: var(--primary-tint);
      font-size: 11.5px;
      font-weight: 800;
    }

    .policy-intro {
      margin: 0;
      color: #5C6B81;
      font-size: 13.5px;
      line-height: 1.65;
    }

    .policy-list {
      display: flex;
      flex-direction: column;
      gap: 18px;
      padding: 18px;
    }

    .policy-list div {
      display: flex;
      gap: 9px;
      align-items: flex-start;
    }

    .policy-list span,
    .request-list span {
      width: 23px;
      height: 23px;
      flex: 0 0 23px;
      display: grid;
      place-items: center;
      border-radius: 8px;
      color: var(--primary);
      background: var(--primary-tint);
      font-size: 12px;
      font-weight: 800;
    }

    .policy-list p {
      margin: 0;
      min-width: 0;
    }

    .policy-list strong {
      display: block;
      color: var(--ink);
      font-size: 15px;
      font-weight: 800;
    }

    .policy-list small {
      display: block;
      margin-top: 7px;
      color: #5C6B81;
      font-size: 13px;
      line-height: 1.6;
    }

    .policy-help {
      color: #9AA8BD;
      font-size: 12px;
      line-height: 1.6;
      text-align: center;
    }

    .policy-help strong {
      color: var(--primary);
      font-weight: 800;
    }

    .policy-hero {
      display: flex;
      align-items: center;
      gap: 13px;
      padding: 16px;
      border-radius: 18px;
      color: #fff;
      background: linear-gradient(135deg, var(--primary), #1F6FB8);
      box-shadow: 0 14px 30px rgba(46,134,208,.32);
    }

    .policy-hero p {
      min-width: 0;
      margin: 0;
    }

    .policy-hero.is-green {
      background: linear-gradient(135deg, #3DBB8E, #139C6E);
      box-shadow: 0 14px 30px rgba(19,156,110,.3);
    }

    .contact-hero {
      align-items: flex-start;
    }

    .policy-hero > span {
      width: 44px;
      height: 44px;
      flex: 0 0 44px;
      display: grid;
      place-items: center;
      border-radius: 13px;
      background: rgba(255,255,255,.18);
    }

    .policy-hero strong,
    .policy-hero small {
      display: block;
    }

    .policy-hero strong {
      font-size: 16px;
      font-weight: 800;
    }

    .policy-hero small {
      margin-top: 2px;
      color: rgba(255,255,255,.85);
      font-size: 12px;
    }

    .contact-action-row {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      align-items: stretch;
    }

    .contact-action-row .primary-action,
    .contact-action-row .secondary-action {
      min-height: 52px;
      margin: 0;
      white-space: nowrap;
      width: 100%;
    }

    .secondary-action {
      border: 1px solid rgba(10, 116, 187, .16);
      background: #fff;
      color: var(--primary);
      border-radius: 18px;
      padding: 0 16px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 13px;
      font-weight: 900;
      box-shadow: 0 10px 22px rgba(13, 27, 46, .08);
    }

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

      .contact-grid,
      .contact-action-row {
        gap: 8px;
      }

      .contact-grid div,
      .contact-grid button {
        padding: 12px;
        min-height: 104px;
      }

      .contact-grid strong {
        font-size: 14px;
        word-break: break-word;
      }

      .contact-row {
        gap: 11px;
        padding: 15px;
      }

      .contact-row > span {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
      }

      .contact-row em {
        width: fit-content;
      }

      .contact-action-row .primary-action,
      .contact-action-row .secondary-action {
        font-size: 12px;
      }
    }

    .request-list {
      display: flex;
      flex-direction: column;
      gap: 11px;
    }

    .request-list h3 {
      margin-bottom: 1px;
    }

    .request-list div {
      display: flex;
      align-items: center;
      gap: 11px;
      color: #5C6B81;
      font-size: 13px;
      line-height: 1.4;
    }

    .request-list span {
      border-radius: 999px;
      color: #fff;
      background: var(--primary);
    }

    .charge-list {
      padding: 4px 16px;
    }

    .charge-list h3 {
      padding: 13px 0 4px;
    }

    .charge-list div {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 13px 0;
      border-bottom: 1px solid #F0F4F9;
    }

    .charge-list div:last-child {
      border-bottom: 0;
    }

    .charge-list p {
      margin: 0;
    }

    .charge-list strong {
      display: block;
      color: var(--ink);
      font-size: 14px;
      font-weight: 700;
    }

    .charge-list small {
      display: block;
      margin-top: 2px;
      color: #9AA8BD;
      font-size: 11.5px;
    }

    .charge-list em {
      color: var(--primary);
      font-size: 14.5px;
      font-style: normal;
      font-weight: 800;
      white-space: nowrap;
    }

    .charge-list .free {
      color: #1F8A5B;
    }

    .install-top {
      padding: 8px 0 2px;
      text-align: center;
    }

    .install-top img {
      width: 90px;
      height: 90px;
      display: block;
      margin: 0 auto;
      border: 1px solid var(--line);
      border-radius: 26px;
      box-shadow: 0 16px 34px -8px rgba(46,134,208,.5);
      object-fit: contain;
    }

    .install-top strong {
      display: block;
      margin-top: 14px;
      color: var(--ink);
      font-size: 21px;
      font-weight: 800;
    }

    .install-top small {
      display: block;
      max-width: 290px;
      margin: 5px auto 0;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.5;
    }

    .login-scroll {
      padding: 30px 24px 22px;
    }

    .login-close {
      position: absolute;
      top: 14px;
      right: 16px;
      z-index: 2;
      width: 40px;
      height: 40px;
      display: grid;
      place-items: center;
      border: 0;
      border-radius: 13px;
      color: #fff;
      background: linear-gradient(140deg, var(--primary-light), var(--primary));
      box-shadow: 0 8px 18px rgba(46,134,208,.34), inset 0 1px 0 rgba(255,255,255,.35);
    }

    .login-logo {
      position: relative;
      width: 96px;
      height: 96px;
      margin: 0 auto;
    }

    .login-logo span {
      position: absolute;
      inset: 0;
      border-radius: 28px;
      background: var(--primary-tint);
    }

    .login-logo img {
      position: absolute;
      inset: 6px;
      width: 84px;
      height: 84px;
      border: 2px solid #fff;
      border-radius: 24px;
      box-shadow: 0 16px 32px -8px rgba(46,134,208,.55);
      object-fit: contain;
    }

    .login-screen h2 {
      margin: 18px 0 0;
      color: var(--ink);
      font-size: 25px;
      line-height: 1.15;
      font-weight: 800;
      text-align: center;
    }

    .login-screen > .login-scroll > p {
      margin: 6px 0 0;
      color: var(--muted);
      font-size: 13.5px;
      line-height: 1.5;
      text-align: center;
    }

    .login-field {
      display: block;
      margin-top: 28px;
    }

    .login-field > span,
    .otp-block > div > span {
      display: block;
      margin-bottom: 8px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
    }

    .login-field strong {
      height: 56px;
      display: flex;
      align-items: center;
      padding: 0 6px 0 14px;
      border: 1.5px solid var(--primary-light);
      border-radius: 16px;
      background: #fff;
      box-shadow: 0 8px 20px rgba(46,134,208,.1);
      color: var(--ink);
      font-size: 16px;
      font-weight: 700;
      letter-spacing: .5px;
    }

    .login-phone-code {
      display: inline-flex;
      align-items: center;
      padding-right: 11px;
      margin-right: 11px;
      border-right: 1px solid #E7EEF6;
      font-style: normal;
      font-size: 15px;
      font-weight: 800;
      letter-spacing: 0;
      white-space: nowrap;
    }

    .login-phone-number {
      flex: 1;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    input.login-phone-number {
      border: 0;
      outline: none;
      color: var(--ink);
      background: transparent;
      font: inherit;
      letter-spacing: .5px;
    }

    input.login-phone-number::placeholder {
      color: rgba(15,27,45,.42);
    }

    .login-phone-icon {
      width: 34px;
      height: 34px;
      flex: 0 0 34px;
      display: grid;
      place-items: center;
      margin-left: auto;
      border-radius: 11px;
      color: var(--primary);
      background: var(--primary-tint);
    }

    .login-phone-icon svg {
      width: 17px !important;
      height: 17px !important;
    }

    .otp-block {
      margin-top: 18px;
    }

    .otp-block > div {
      display: flex;
      justify-content: space-between;
      gap: 12px;
    }

    .otp-block button {
      color: var(--primary);
      font-size: 11.5px;
      font-weight: 800;
    }

    .otp-block section {
      display: flex;
      gap: 10px;
    }

    .otp-block section strong {
      flex: 1;
      height: 56px;
      display: grid;
      place-items: center;
      border: 1.5px solid var(--primary-light);
      border-radius: 14px;
      color: var(--ink);
      background: #fff;
      box-shadow: 0 6px 14px rgba(46,134,208,.12);
      font-size: 22px;
      font-weight: 800;
    }

    .otp-block section strong:last-child {
      border-color: #E2E9F1;
      background: #F8FAFD;
      box-shadow: none;
    }

    .otp-block section i {
      width: 2px;
      height: 24px;
      border-radius: 2px;
      background: var(--primary);
    }

    .referral-box {
      margin-top: 18px;
      padding: 14px;
      border: 1px dashed #F0C97A;
      border-radius: 16px;
      background: linear-gradient(135deg, #FFF6E6, #FFEFD6);
    }

    .referral-box > div,
    .referral-box section {
      display: flex;
      align-items: center;
      gap: 11px;
    }

    .referral-box > div > span {
      width: 40px;
      height: 40px;
      flex: 0 0 40px;
      display: grid;
      place-items: center;
      border-radius: 12px;
      color: #fff;
      background: linear-gradient(140deg, #FFD27A, #F5A623);
      box-shadow: 0 6px 13px rgba(245,166,35,.36);
    }

    .referral-box p {
      margin: 0;
      min-width: 0;
    }

    .referral-box strong {
      display: block;
      color: var(--ink);
      font-size: 13.5px;
      font-weight: 800;
    }

    .referral-box small {
      display: block;
      margin-top: 1px;
      color: #A77B2E;
      font-size: 11.5px;
    }

    .referral-box section {
      gap: 8px;
      margin-top: 11px;
    }

    .referral-box section strong {
      flex: 1;
      height: 44px;
      display: flex;
      align-items: center;
      padding: 0 14px;
      border: 1px solid #F0C97A;
      border-radius: 12px;
      background: #fff;
      font-size: 14px;
      letter-spacing: 1px;
    }

    .referral-box section button {
      height: 44px;
      padding: 0 18px;
      border-radius: 12px;
      color: #fff;
      background: var(--ink);
      font-size: 13.5px;
      font-weight: 800;
    }

    .login-submit {
      margin-top: 20px;
      min-height: 56px;
      font-size: 16.5px;
      box-shadow: 0 14px 26px rgba(46,134,208,.44);
    }

    .login-divider {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 20px 0;
      color: #9AA8BD;
      font-size: 12px;
      font-style: normal;
      font-weight: 600;
    }

    .login-divider span {
      flex: 1;
      height: 1px;
      background: #E7EEF6;
    }

    .login-divider em {
      font-style: normal;
    }

    .google-button {
      height: 54px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 0 16px;
      border: 1px solid #E2E9F1;
      border-radius: 15px;
      color: var(--ink);
      background: #fff;
      box-shadow: 0 4px 12px rgba(13,27,46,.05);
      font-size: 14.5px;
      font-weight: 800;
    }

    .google-button strong {
      color: #4285F4;
      font-size: 18px;
    }

    .google-button span {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      min-width: 0;
      line-height: 1.1;
    }

    .google-button em {
      padding: 4px 8px;
      border-radius: 999px;
      color: #0A74BB;
      background: #E7F7FE;
      font-size: 10.5px;
      font-style: normal;
      font-weight: 900;
      line-height: 1;
      white-space: nowrap;
    }

    .login-terms {
      display: block;
      margin-top: auto;
      padding: 22px 6px 0;
      color: #9AA8BD;
      font-size: 11.5px;
      line-height: 1.6;
      text-align: center;
    }

    .login-terms button {
      color: var(--primary);
      font-size: inherit;
      font-weight: 800;
    }

    .home-chip-grid {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 5px;
      flex-shrink: 0;
      padding: 5px;
      border: 1px solid #E7EEF6;
      border-radius: 16px;
      background: #fff;
      box-shadow: 0 4px 14px rgba(13,27,46,.06);
    }

    .home-chip {
      min-height: 54px;
      flex-direction: column;
      justify-content: center;
      gap: 3px;
      padding: 5px 2px;
      border: 0;
      border-radius: 11px;
      background: #F4F8FC;
      box-shadow: none;
      min-width: 0;
    }

    .home-chip:first-child {
      color: #fff;
      background: var(--gradient);
      box-shadow: 0 5px 11px rgba(46,134,208,.32);
    }

    .home-chip-icon {
      width: auto;
      height: auto;
      flex: 0 0 auto;
      color: var(--primary);
      background: transparent;
      box-shadow: none;
    }

    .home-chip-icon svg {
      width: 14px !important;
      height: 14px !important;
    }

    .home-chip:first-child .home-chip-icon {
      color: #fff;
    }

    .home-chip span:last-child {
      min-width: 0;
      font-size: 10.5px;
      font-weight: 700;
      line-height: 1.05;
      text-align: center;
      white-space: normal;
    }

    .home-chip small {
      display: block;
      margin-top: 2px;
      font-size: 10px;
      font-weight: 800;
      line-height: 1;
      opacity: .86;
    }

    .home-chip span br {
      display: block;
    }

    .home-hero-card {
      position: relative;
      flex-shrink: 0;
      overflow: hidden;
      padding: 17px;
      border: 1px solid #E7EEF6;
      border-radius: 20px;
      background: linear-gradient(160deg,#fff 0%, var(--primary-tint) 130%);
      box-shadow: 0 14px 30px rgba(13,27,46,.1);
    }

    .home-hero-card::before {
      content: "";
      position: absolute;
      right: -26px;
      top: -26px;
      width: 130px;
      height: 130px;
      border-radius: 999px;
      background: radial-gradient(circle, var(--primary-tint), transparent 70%);
    }

    .home-hero-copy {
      position: relative;
      z-index: 1;
      min-height: 118px;
      width: auto;
      padding: 0 120px 0 0;
      padding-right: 120px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      text-align: left;
    }

    .home-hero-copy > span {
      display: inline-block;
      padding: 4px 11px;
      border: 1px solid #9CC8EF;
      border-radius: 999px;
      color: var(--primary);
      background: #fff;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .12em;
    }

    .home-hero-copy h2 {
      margin: 11px 0 0;
      color: var(--ink);
      font-size: 23px;
      line-height: 1.12;
      font-weight: 800;
      letter-spacing: 0;
    }

    .home-hero-copy h2 em {
      color: var(--primary);
      font-style: normal;
    }

    .home-hero-copy p {
      max-width: 214px;
      margin: 9px 0 0;
      color: var(--muted);
      font-size: 11.5px;
      line-height: 1.5;
    }

    .home-hero-media {
      position: absolute;
      top: 17px;
      right: 17px;
      width: 108px;
      height: 118px;
      overflow: hidden;
      border-radius: 16px;
      background: linear-gradient(150deg,#10203a,#1F6FB8);
    }

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

    .home-hero-badges {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 9px;
      margin-top: 13px;
    }

    .home-hero-badges span {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      min-height: 34px;
      padding: 6px 7px;
      border: 1px solid #E6EEF7;
      border-radius: 12px;
      color: #5C6B81;
      background: rgba(255,255,255,.78);
      font-size: 10.5px;
      font-weight: 700;
      line-height: 1.15;
      text-align: center;
    }

    .home-hero-badges svg {
      color: var(--primary);
    }

    .home-hero-actions {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      margin-top: 14px;
    }

    .home-hero-actions button {
      min-width: 0;
      height: 46px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      border: 1px solid #E2E9F1;
      border-radius: 13px;
      color: var(--ink);
      background: #fff;
      box-shadow: 0 4px 12px rgba(13,27,46,.06);
      font-size: 13px;
      font-weight: 800;
      line-height: 1;
      white-space: nowrap;
    }

    .home-hero-actions .is-primary {
      color: #fff;
      border-color: transparent;
      background: var(--gradient);
      box-shadow: 0 8px 18px rgba(46,134,208,.4);
    }

    .home-hero-actions button:not(.is-primary) {
      padding: 0 10px;
    }

    .home-hero-actions button span {
      width: 24px;
      height: 24px;
      display: grid;
      place-items: center;
      border-radius: 999px;
      color: var(--primary);
      background: var(--primary-tint);
    }

    .checkout-step-title {
      display: flex;
      align-items: center;
      gap: 9px;
      margin: 0 0 -4px;
    }

    .checkout-step-title > span,
    .checkout-step-title > div > span {
      width: 22px;
      height: 22px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 999px;
      color: #fff;
      background: var(--primary);
      font-size: 11px;
      font-weight: 800;
    }

    .checkout-step-title strong {
      color: var(--ink);
      font-size: 15px;
      font-weight: 800;
    }

    .checkout-step-title.is-between {
      justify-content: space-between;
      margin-bottom: -2px;
    }

    .checkout-step-title.is-between > div {
      display: flex;
      align-items: center;
      gap: 9px;
    }

    .checkout-step-title.is-between em {
      padding: 4px 10px;
      border-radius: 999px;
      color: var(--primary);
      background: var(--primary-tint);
      font-size: 11.5px;
      font-style: normal;
      font-weight: 800;
    }

    .checkout-card-kicker {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .checkout-card-kicker span {
      color: var(--primary);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .1em;
    }

    .checkout-card-kicker em {
      margin-left: auto;
      padding: 3px 9px;
      border-radius: 7px;
      color: #C77E12;
      background: #FDF1DA;
      font-size: 10px;
      font-style: normal;
      font-weight: 800;
    }

    .checkout-empty-state.is-inline {
      display: grid;
      grid-template-columns: 44px 1fr;
      align-items: center;
      gap: 12px;
      padding: 0;
      border: 0;
      background: transparent;
      text-align: left;
    }

    .checkout-empty-state.is-inline > span {
      width: 44px;
      height: 44px;
      border-radius: 14px;
    }

    .checkout-empty-state.is-inline .primary-action {
      grid-column: 1 / -1;
      min-height: 44px;
      margin-top: 5px;
    }

    .checkout-pay-recommended strong em {
      margin-left: 5px;
      color: var(--primary);
      font-size: 12px;
      font-style: normal;
    }

    .wallet-apply {
      display: flex;
      align-items: center;
      gap: 11px;
      padding: 11px 13px;
      border-radius: 13px;
      background: var(--primary-tint);
    }

    .wallet-apply > span {
      width: 36px;
      height: 36px;
      display: grid;
      place-items: center;
      border-radius: 10px;
      color: #fff;
      background: var(--gradient);
      flex-shrink: 0;
    }

    .wallet-apply div {
      flex: 1;
      min-width: 0;
    }

    .wallet-apply strong {
      display: block;
      color: var(--ink);
      font-size: 13px;
      font-weight: 800;
    }

    .wallet-apply small {
      display: block;
      margin-top: 1px;
      color: #5C6B81;
      font-size: 11px;
    }

    .wallet-apply.is-disabled {
      opacity: .62;
    }

    .wallet-apply button {
      width: 42px;
      height: 24px;
      border-radius: 999px;
      background: #D7E1EC;
      position: relative;
      flex-shrink: 0;
    }

    .wallet-apply button:disabled {
      cursor: not-allowed;
    }

    .wallet-apply button::before {
      content: "";
      position: absolute;
      top: 2px;
      left: 2px;
      width: 20px;
      height: 20px;
      border-radius: 999px;
      background: #fff;
      box-shadow: 0 2px 5px rgba(13,27,46,.2);
    }

    .checkout-total-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-top: 14px;
      margin-top: 2px;
      border-top: 1px dashed #E2E9F1;
    }

    .checkout-total-row span {
      color: var(--ink);
      font-size: 15px;
      font-weight: 800;
    }

    .checkout-total-row strong {
      color: var(--primary);
      font-size: 19px;
      font-weight: 800;
    }

    .reference-referral {
      position: relative;
      overflow: hidden;
      align-items: stretch;
      box-sizing: border-box;
      max-width: 100%;
      min-height: 256px;
      padding: 24px 20px 22px;
      border-radius: 24px;
      color: #fff;
      background: linear-gradient(150deg, var(--primary-light), #1F6FB8);
      box-shadow: 0 18px 36px rgba(46,134,208,.36);
      text-align: left;
    }

    .reference-referral::before,
    .reference-referral::after {
      content: "";
      position: absolute;
      border-radius: 999px;
      background: rgba(255,255,255,.10);
    }

    .reference-referral::before {
      right: 0;
      top: -22px;
      width: 150px;
      height: 150px;
    }

    .reference-referral::after {
      left: 0;
      bottom: -24px;
      width: 120px;
      height: 120px;
      background: rgba(255,255,255,.07);
    }

    .refer-hero-pill,
    .refer-reward-grid,
    .reference-referral p {
      position: relative;
      z-index: 1;
    }

    .refer-hero-pill {
      width: fit-content;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 5px 12px;
      border-radius: 999px;
      color: #fff;
      background: rgba(255,255,255,.18);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .04em;
    }

    .refer-reward-grid {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 16px;
      margin-top: 16px;
      text-align: center;
    }

    .refer-reward-grid span {
      width: 50px;
      height: 50px;
      display: grid;
      place-items: center;
      margin: 0 auto;
      border-radius: 15px;
      color: #fff;
      background: rgba(255,255,255,.18);
    }

    .refer-reward-grid strong {
      display: block;
      margin-top: 9px;
      color: #fff;
      font-size: 22px;
      font-weight: 800;
    }

    .refer-reward-grid small {
      display: block;
      margin-top: 1px;
      color: rgba(255,255,255,.8);
      font-size: 11px;
    }

    .refer-reward-grid > em {
      color: rgba(255,255,255,.5);
      font-size: 20px;
      font-style: normal;
      font-weight: 800;
    }

    .reference-referral p {
      margin: 14px 0 0;
      color: rgba(255,255,255,.85);
      font-size: 12.5px;
      line-height: 1.45;
      text-align: center;
    }

    .reference-referral p strong {
      color: #fff;
      font-weight: 800;
    }

    .refer-progress-card {
      padding: 16px;
      border: 1px solid var(--line);
      border-radius: 18px;
      background: #fff;
      box-shadow: 0 6px 16px rgba(13,27,46,.05);
    }

    .refer-progress-card > div {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
    }

    .refer-progress-card span {
      color: #5C6B81;
      font-size: 13px;
      font-weight: 700;
    }

    .refer-progress-card strong {
      color: var(--primary);
      font-size: 17px;
      font-weight: 800;
    }

    .refer-progress-card strong em {
      color: #9AA8BD;
      font-size: 13px;
      font-style: normal;
      font-weight: 700;
    }

    .refer-progress-card > i {
      display: block;
      height: 10px;
      overflow: hidden;
      margin-top: 11px;
      border-radius: 999px;
      background: #EEF3F9;
    }

    .refer-progress-card > i b {
      display: block;
      width: 7.5%;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--primary-light), var(--primary));
    }

    .refer-progress-card p {
      display: flex;
      align-items: center;
      gap: 7px;
      margin: 11px 0 0;
      color: var(--muted);
      font-size: 12px;
    }

    .refer-progress-card p svg {
      color: var(--primary);
    }

    .refer-progress-card p strong {
      color: var(--ink);
      font-size: inherit;
    }

    .how-card div {
      position: relative;
    }

    .how-card p strong {
      display: block;
      color: var(--ink);
      font-size: 13.5px;
    }

    .how-card p small {
      display: block;
      margin-top: 2px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.45;
    }

    .refer-wallet-card {
      position: relative;
      overflow: hidden;
      display: block;
      color: #fff;
      background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 55%, #1F6FB8 100%);
      box-shadow: 0 16px 32px rgba(46,134,208,.4);
    }

    .refer-wallet-card > span {
      color: rgba(255,255,255,.8);
      font-size: 12px;
    }

    .refer-wallet-card > strong {
      display: block;
      margin-top: 2px;
      color: #fff;
      font-size: 28px;
      line-height: 1.1;
    }

    .refer-wallet-card > div {
      display: flex;
      gap: 8px;
      margin-top: 14px;
    }

    .refer-wallet-card button {
      flex: 1;
      height: 42px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      border-radius: 12px;
      color: var(--primary);
      background: #fff;
      font-size: 13.5px;
      font-weight: 800;
    }

    .refer-wallet-card button + button {
      color: #fff;
      background: rgba(255,255,255,.18);
    }

    .refer-wallet-card small {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-top: 12px;
      color: rgba(255,255,255,.8);
      font-size: 11px;
    }

    [data-screen="refer"].detail-screen {
      gap: 8px;
      min-height: auto;
      padding-bottom: calc(28px + env(safe-area-inset-bottom));
    }

    [data-screen="refer"].detail-screen > * {
      flex-shrink: 0;
    }

    [data-screen="refer"] .reference-referral {
      min-height: 0;
      overflow: hidden;
      max-width: 100%;
      padding: 14px 16px 13px;
      border-radius: 20px;
    }

    [data-screen="refer"] .refer-reward-grid {
      gap: 14px;
      margin-top: 8px;
    }

    [data-screen="refer"] .refer-reward-grid span {
      width: 44px;
      height: 44px;
      border-radius: 14px;
    }

    [data-screen="refer"] .refer-reward-grid strong {
      margin-top: 7px;
      font-size: 20px;
    }

    [data-screen="refer"] .reference-referral p {
      margin-top: 7px;
      line-height: 1.35;
    }

    [data-screen="refer"] .refer-progress-card {
      padding: 11px 13px;
      border-radius: 18px;
    }

    [data-screen="refer"] .refer-progress-card > i,
    [data-screen="refer"] .refer-progress-card p {
      margin-top: 8px;
    }

    [data-screen="refer"] .section-label {
      margin-bottom: 8px;
    }

    [data-screen="refer"] .referral-code-row button {
      min-height: 44px;
      min-width: 76px;
      padding: 9px 16px;
    }

    [data-screen="refer"] .share-actions button {
      min-height: 44px;
    }

    [data-screen="refer"] .how-card {
      gap: 0;
      padding: 12px 14px;
      border-radius: 18px;
    }

    [data-screen="refer"] .how-card h3 {
      margin-bottom: 9px;
    }

    [data-screen="refer"] .how-card div {
      gap: 14px;
    }

    [data-screen="refer"] .how-card div + div {
      margin-top: 5px;
    }

    [data-screen="refer"] .how-card span {
      width: 34px;
      height: 34px;
      flex-basis: 34px;
      border-radius: 11px;
      color: #fff;
      background: var(--gradient);
      box-shadow: 0 6px 13px rgba(46,134,208,.32);
    }

    [data-screen="refer"] .how-card p {
      margin-top: 2px;
    }

    [data-screen="refer"] .how-card p strong {
      font-size: 13.5px;
    }

    [data-screen="refer"] .how-card p small {
      line-height: 1.35;
    }

    [data-screen="refer"] .refer-wallet-card {
      overflow: visible;
      padding: 13px 14px;
      border-radius: 18px;
      box-shadow: 0 12px 26px rgba(46,134,208,.34);
    }

    .refer-wallet-top {
      position: relative;
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 0;
    }

    .refer-wallet-top > span {
      width: 44px;
      height: 44px;
      flex: 0 0 44px;
      display: grid;
      place-items: center;
      border-radius: 13px;
      color: #fff;
      background: rgba(255,255,255,.2);
    }

    .refer-wallet-top > div {
      min-width: 0;
      flex: 1;
      margin: 0;
    }

    .refer-wallet-top small {
      display: block;
      margin: 0;
      color: rgba(255,255,255,.8);
      font-size: 12px;
      font-weight: 700;
    }

    .refer-wallet-top strong {
      display: block;
      margin-top: 2px;
      color: #fff;
      font-size: 24px;
      line-height: 1.1;
      font-weight: 800;
    }

    [data-screen="refer"] .refer-wallet-card > div:not(.refer-wallet-top) {
      margin-top: 9px;
    }

    [data-screen="refer"] .refer-wallet-card button {
      min-height: 44px;
      color: #fff;
      background: rgba(255,255,255,.18);
    }

    [data-screen="refer"] .refer-wallet-card > small {
      margin-top: 9px;
    }

    .refer-friends-card {
      display: grid;
      gap: 11px;
      border: 1px solid rgba(46,134,208,.14);
      border-radius: 18px;
      padding: 15px;
      background:
        linear-gradient(145deg, rgba(255,255,255,.98), rgba(240,248,255,.94)),
        #fff;
      box-shadow: 0 14px 30px rgba(30,78,126,.09);
    }

    .refer-friends-card h3 {
      margin: 0;
      color: var(--ink);
      font-size: 15px;
      font-weight: 850;
    }

    .refer-friend-row {
      display: grid;
      grid-template-columns: 42px minmax(0, 1fr) auto;
      align-items: center;
      gap: 10px;
      padding: 11px;
      border: 1px solid rgba(226,235,246,.95);
      border-radius: 15px;
      background: rgba(255,255,255,.86);
    }

    .refer-friend-row.is-rewarded {
      border-color: rgba(31,138,91,.22);
      background: linear-gradient(135deg, rgba(235,255,244,.95), rgba(255,255,255,.94));
    }

    .refer-friend-avatar {
      display: grid;
      place-items: center;
      width: 42px;
      height: 42px;
      border-radius: 14px;
      color: #fff;
      background: linear-gradient(135deg, #2E86D0, #38BDF8);
      font-size: 15px;
      font-weight: 900;
      box-shadow: 0 9px 18px rgba(46,134,208,.22);
    }

    .refer-friend-main {
      min-width: 0;
      display: grid;
      gap: 3px;
    }

    .refer-friend-main strong,
    .refer-friend-amount strong {
      color: var(--ink);
      font-size: 13.5px;
      font-weight: 900;
    }

    .refer-friend-main small,
    .refer-friend-amount small {
      color: var(--muted);
      font-size: 11.5px;
      font-weight: 750;
    }

    .refer-friend-main em {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      width: fit-content;
      margin-top: 2px;
      padding: 4px 8px;
      border-radius: 999px;
      color: #8A5B00;
      background: rgba(255,190,70,.16);
      font-size: 10.5px;
      font-style: normal;
      font-weight: 850;
    }

    .refer-friend-row.is-rewarded .refer-friend-main em {
      color: #18734C;
      background: rgba(31,138,91,.13);
    }

    .refer-friend-amount {
      display: grid;
      justify-items: end;
      gap: 2px;
      text-align: right;
    }

    .refer-friend-row.is-pending .refer-friend-amount strong {
      color: #B7791F;
    }

    .refer-friend-row.is-rewarded .refer-friend-amount strong {
      color: #1F8A5B;
    }

    .refer-friends-card p {
      margin: 0;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.45;
    }

    .refer-history-card {
      display: grid;
      gap: 10px;
      border-radius: 18px;
      padding: 15px;
      background: #fff;
      box-shadow: 0 10px 22px rgba(13,27,46,.06);
    }

    .refer-history-card h3 {
      margin: 0;
      color: var(--ink);
      font-size: 15px;
      font-weight: 850;
    }

    .refer-history-card div {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      border-top: 1px solid #EEF3F9;
      padding-top: 10px;
    }

    .refer-history-card div:first-of-type {
      border-top: 0;
      padding-top: 0;
    }

    .refer-history-card span {
      min-width: 0;
      color: var(--ink);
      font-size: 13px;
      font-weight: 800;
    }

    .refer-history-card small {
      display: block;
      margin-top: 2px;
      color: var(--muted);
      font-size: 11.5px;
      font-weight: 700;
    }

    .refer-history-card strong {
      color: #1F8A5B;
      font-size: 14px;
      font-weight: 900;
      white-space: nowrap;
    }

    .refer-history-card p {
      margin: 0;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.45;
    }

    [data-screen="refer"] .back-button {
      width: 44px;
      height: 44px;
      flex: 0 0 44px;
    }

    .login-screen {
      margin: 0;
      border-radius: 24px 24px 0 0;
      background:
        radial-gradient(circle at 10% 4%, rgba(80,194,233,.3), transparent 34%),
        linear-gradient(180deg, #EAF8FE 0%, #F7FBFF 48%, #FFFFFF 100%);
    }

    .login-scroll {
      padding: 0 14px 24px;
      gap: 0;
      background: transparent;
    }

    .login-scroll > * {
      flex-shrink: 0;
    }

    .login-hero-panel {
      position: relative;
      flex-shrink: 0;
      overflow: hidden;
      margin: 0 -14px;
      padding: 36px 24px 70px;
      border-radius: 24px 24px 34px 34px;
      background:
        radial-gradient(circle at 20% 8%, rgba(255,255,255,.38), transparent 26%),
        radial-gradient(circle at 88% 20%, rgba(245,188,72,.24), transparent 30%),
        linear-gradient(155deg, #50C2E9 0%, #3AAED9 52%, #075A91 100%);
      box-shadow: 0 18px 36px rgba(46,134,208,.3);
    }

    .login-hero-panel::before,
    .login-hero-panel::after {
      content: "";
      position: absolute;
      border-radius: 999px;
      background: rgba(255,255,255,.12);
    }

    .login-hero-panel::before {
      right: -40px;
      top: -46px;
      width: 170px;
      height: 170px;
    }

    .login-hero-panel::after {
      left: -30px;
      bottom: -44px;
      width: 120px;
      height: 120px;
      background: rgba(255,255,255,.08);
    }

    .login-form-panel {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      margin: -44px 0 0;
      padding: 18px 16px 16px;
      border: 1px solid rgba(216,238,249,.95);
      border-radius: 28px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.98) 0%, #FFFFFF 100%);
      box-shadow: 0 18px 38px rgba(13,27,46,.12);
    }

    .login-form-panel::before {
      content: "";
      position: absolute;
      top: 10px;
      left: 50%;
      width: 44px;
      height: 4px;
      border-radius: 999px;
      background: #D9EDF7;
      transform: translateX(-50%);
    }

    .login-screen .login-close {
      position: absolute;
      top: 16px;
      right: 16px;
      width: 38px;
      height: 38px;
      border-radius: 999px;
      color: #fff;
      background: rgba(255,255,255,.22);
      box-shadow: none;
    }

    .login-hero-panel .login-logo {
      width: 118px;
      height: 118px;
    }

    .login-hero-panel .login-logo span {
      inset: 0;
      border-radius: 999px;
      background: rgba(255,255,255,.1);
    }

    .login-hero-panel .login-logo span::after {
      content: "";
      position: absolute;
      inset: 10px;
      border: 1px solid rgba(255,255,255,.22);
      border-radius: 999px;
    }

    .login-hero-panel .login-logo img {
      inset: 10px;
      width: 98px;
      height: 98px;
      border: 3px solid rgba(255,255,255,.6);
      border-radius: 999px;
      background: #fff;
      box-shadow: 0 18px 36px rgba(13,27,46,.26);
      object-fit: contain;
    }

    .login-hero-panel h2 {
      position: relative;
      margin: 18px 0 0;
      color: #fff;
      font-size: 24px;
      font-weight: 900;
      letter-spacing: 0;
    }

    .login-hero-panel p {
      position: relative;
      margin: 6px 0 0;
      color: rgba(255,255,255,.85);
      font-size: 13px;
      line-height: 1.5;
      text-align: center;
    }

    .login-field {
      margin-top: 22px;
    }

    .login-form-panel .login-field {
      margin-top: 8px;
    }

    .login-form-panel .login-field strong {
      height: 58px;
      border-color: #CFEAF7;
      border-radius: 19px;
      background: linear-gradient(180deg, #FFFFFF 0%, #F9FDFF 100%);
      box-shadow: 0 10px 22px rgba(46,134,208,.12);
    }

    .login-form-panel .login-phone-icon {
      color: #fff;
      background: linear-gradient(135deg, var(--primary-light), var(--primary));
      box-shadow: 0 8px 16px rgba(46,134,208,.28);
    }

    .login-submit {
      margin-top: 16px;
      min-height: 54px;
      border-radius: 18px;
      box-shadow: 0 14px 26px rgba(46,134,208,.34);
    }

    .login-form-panel .google-button {
      height: 52px;
      border-color: #DDEAF4;
      border-radius: 17px;
      background: #FFFFFF;
      box-shadow: 0 8px 18px rgba(13,27,46,.06);
    }

    .login-form-panel .login-divider {
      margin: 17px 0;
    }

    .login-form-panel .login-terms {
      padding-top: 18px;
    }

    .referral-box {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-top: 16px;
      border-color: var(--primary-light);
      background: var(--primary-tint);
    }

    .referral-box > div {
      flex: 1;
      min-width: 0;
    }

    .referral-box > div > span {
      color: #fff;
      background: var(--gradient);
      box-shadow: 0 6px 13px rgba(46,134,208,.32);
    }

    .referral-box small {
      color: var(--muted);
    }

    .referral-box > button {
      flex-shrink: 0;
      color: var(--primary);
      font-size: 13px;
      font-weight: 800;
    }

    .referral-box.is-active-invite {
      display: grid;
      gap: 12px;
      margin-bottom: 12px;
      padding: 14px 14px 16px;
      overflow: visible;
      border: 1px solid rgba(255,255,255,.62);
      border-radius: 22px;
      background:
        radial-gradient(circle at 12% 0%, rgba(255,255,255,.42), transparent 34%),
        linear-gradient(145deg, #50C2E9 0%, #2E86D0 58%, #195F9F 100%);
      box-shadow: 0 18px 36px rgba(46,134,208,.28);
      color: #fff;
    }

    .login-referral-top {
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
    }

    .login-referral-top > span {
      width: 46px;
      height: 46px;
      flex: 0 0 46px;
      display: grid;
      place-items: center;
      border-radius: 15px;
      color: #fff;
      background: rgba(255,255,255,.2);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.32);
    }

    .login-referral-top p {
      min-width: 0;
      margin: 0;
    }

    .login-referral-top strong {
      display: block;
      color: #fff;
      font-size: 15px;
      font-weight: 900;
    }

    .login-referral-top small {
      display: block;
      margin-top: 3px;
      color: rgba(255,255,255,.86);
      font-size: 12px;
      line-height: 1.35;
    }

    .login-referral-code {
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: 4px 10px;
      padding: 12px;
      border: 1px dashed rgba(255,255,255,.58);
      border-radius: 16px;
      background: rgba(255,255,255,.14);
    }

    .login-referral-code small {
      grid-column: 1 / -1;
      color: rgba(255,255,255,.75);
      font-size: 10px;
      font-weight: 900;
      letter-spacing: .08em;
    }

    .login-referral-code strong {
      color: #fff;
      font-size: 20px;
      font-weight: 950;
      letter-spacing: .1em;
    }

    .login-referral-code em {
      padding: 7px 10px;
      border-radius: 999px;
      color: #16734D;
      background: #E8FFF2;
      font-size: 11px;
      font-style: normal;
      font-weight: 900;
    }

    .login-referral-rewards {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .login-referral-rewards span {
      min-width: 0;
      padding: 9px 10px;
      border-radius: 15px;
      background: rgba(255,255,255,.16);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.24);
    }

    .login-referral-rewards b {
      display: block;
      color: #fff;
      font-size: 17px;
      line-height: 1.05;
      font-weight: 950;
    }

    .login-referral-rewards small {
      display: block;
      margin-top: 2px;
      color: rgba(255,255,255,.82);
      font-size: 10.5px;
      line-height: 1.15;
      font-weight: 800;
    }

    .login-referral-note {
      min-height: 30px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      margin: 0;
      padding: 7px 10px;
      border-radius: 999px;
      color: #EAF8FF;
      background: rgba(255,255,255,.14);
      font-size: 11.5px;
      line-height: 1.15;
      font-weight: 850;
      white-space: nowrap;
    }

    .otp-box-row {
      position: relative;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
    }

    .otp-native-input {
      position: absolute;
      inset: 0;
      z-index: 2;
      width: 100%;
      height: 100%;
      min-width: 0;
      min-height: 0;
      margin: 0;
      padding: 0;
      border: 0;
      border-radius: 14px;
      opacity: .01;
      color: transparent;
      background: transparent;
      caret-color: transparent;
      outline: none;
      appearance: none;
    }

    .otp-block section input[data-otp-digit] {
      position: relative;
      z-index: 1;
      width: 100%;
      height: 56px;
      pointer-events: none;
      border: 1.5px solid var(--primary-light);
      border-radius: 14px;
      outline: none;
      color: var(--ink);
      background: #fff;
      box-shadow: 0 6px 14px rgba(46,134,208,.12);
      font: 800 22px/1 "Schibsted Grotesk", system-ui, sans-serif;
      letter-spacing: .32em;
      text-align: center;
      transition: border-color .18s ease, box-shadow .18s ease;
    }

    .otp-block section input[data-otp-digit]:focus {
      border-color: var(--primary);
      box-shadow: 0 8px 18px rgba(46,134,208,.2);
    }

    .otp-box-row:focus-within input[data-otp-digit] {
      border-color: var(--primary);
      box-shadow: 0 8px 18px rgba(46,134,208,.2);
    }

    .otp-auto-toggle {
      min-height: 48px;
      display: grid;
      grid-template-columns: auto 1fr;
      column-gap: 11px;
      row-gap: 2px;
      align-items: center;
      margin-top: 12px;
      padding: 10px 12px;
      border: 1px solid #D8EEF9;
      border-radius: 16px;
      background: linear-gradient(180deg, #F4FCFF 0%, #FFFFFF 100%);
      box-shadow: 0 7px 16px rgba(46,134,208,.08);
    }

    .otp-auto-toggle input {
      position: absolute;
      width: 1px;
      height: 1px;
      opacity: 0;
      pointer-events: none;
    }

    .otp-auto-toggle > span {
      grid-row: 1 / span 2;
      position: relative;
      width: 42px;
      height: 25px;
      border-radius: 999px;
      background: #D7E8F3;
      box-shadow: inset 0 1px 3px rgba(7,42,67,.16);
      transition: background .18s ease, box-shadow .18s ease;
    }

    .otp-auto-toggle > span::after {
      content: "";
      position: absolute;
      top: 3px;
      left: 3px;
      width: 19px;
      height: 19px;
      border-radius: 999px;
      background: #fff;
      box-shadow: 0 3px 8px rgba(13,27,46,.18);
      transition: transform .18s ease;
    }

    .otp-auto-toggle input:checked + span {
      background: linear-gradient(135deg, var(--primary-light), var(--primary));
      box-shadow: 0 6px 13px rgba(46,134,208,.28);
    }

    .otp-auto-toggle input:checked + span::after {
      transform: translateX(17px);
    }

    .otp-auto-toggle strong,
    .otp-auto-toggle small {
      display: block;
      min-width: 0;
    }

    .otp-auto-toggle strong {
      color: var(--ink);
      font-size: 13px;
      line-height: 1.15;
      font-weight: 900;
    }

    .otp-auto-toggle small {
      color: #65758B;
      font-size: 11.2px;
      line-height: 1.25;
      font-weight: 700;
    }

    [data-screen="refer"].detail-screen,
    [data-screen="gift"].detail-screen {
      padding-bottom: 28px;
    }

    .amount-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 9px;
    }

    .amount-grid button {
      min-height: 50px;
      border: 1px solid #E2E9F1;
      border-radius: 13px;
      background: #fff;
      color: var(--ink);
      font-size: 14px;
      font-weight: 800;
    }

    .amount-grid .is-active {
      border: 2px solid var(--primary-light);
      color: var(--primary);
      background: var(--primary-tint);
    }

    .gift-recipient-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 8px;
    }

    .gift-recipient-grid textarea {
      min-height: 72px;
      padding-top: 11px;
      resize: none;
      line-height: 1.35;
    }

    .redeem-row {
      display: flex;
      gap: 8px;
    }

    .redeem-row span,
    .redeem-row input {
      flex: 1;
      min-height: 50px;
      display: flex;
      align-items: center;
      padding: 0 15px;
      border: 1px solid #E2E9F1;
      border-radius: 13px;
      color: #9AA8BD;
      background: #fff;
      font-size: 14px;
    }

    .redeem-row button {
      min-height: 50px;
      padding: 0 20px;
      border-radius: 13px;
      color: #fff;
      background: var(--ink);
      font-size: 14px;
      font-weight: 800;
    }

    .map-card {
      position: relative;
      height: 120px;
      overflow: hidden;
      display: grid;
      place-items: center;
      border-radius: 16px;
      background: linear-gradient(150deg,#cfe2f6,#aecbe9);
    }

    [data-screen="add-address"] > .map-card,
    [data-screen="add-address"] > .profile-form,
    [data-screen="add-address"] > .save-as {
      width: calc(100% - 4px);
      margin-right: auto;
      margin-left: auto;
    }

    .map-card::before {
      content: "";
      position: absolute;
      inset: 0;
      background: repeating-linear-gradient(0deg,rgba(255,255,255,.35) 0 1px,transparent 1px 26px), repeating-linear-gradient(90deg,rgba(255,255,255,.35) 0 1px,transparent 1px 26px);
    }

    .map-card div {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #1F6FB8;
      font-size: 11px;
      font-weight: 800;
    }

    .address-location-card {
      width: calc(100% - 4px);
      margin-right: auto;
      margin-left: auto;
      overflow: hidden;
      position: relative;
      min-height: 154px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 14px;
      padding: 17px;
      border-radius: 20px;
      color: #fff;
      background:
        linear-gradient(150deg, rgba(58,174,217,.92), rgba(31,111,184,.95)),
        repeating-linear-gradient(0deg, rgba(255,255,255,.22) 0 1px, transparent 1px 26px),
        repeating-linear-gradient(90deg, rgba(255,255,255,.22) 0 1px, transparent 1px 26px);
      box-shadow: 0 14px 30px rgba(46,134,208,.28);
    }

    .address-location-card div {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .address-location-card div > span {
      width: 50px;
      height: 50px;
      flex: 0 0 50px;
      display: grid;
      place-items: center;
      border-radius: 16px;
      background: rgba(255,255,255,.18);
    }

    .address-location-card strong,
    .address-location-card small {
      display: block;
    }

    .address-location-card strong {
      font-size: 17px;
      line-height: 1.2;
      font-weight: 800;
    }

    .address-location-card small {
      margin-top: 3px;
      color: rgba(255,255,255,.78);
      font-size: 12px;
      line-height: 1.35;
    }

    .address-location-card button {
      min-height: 44px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      border-radius: 13px;
      color: var(--primary);
      background: #fff;
      font-size: 13px;
      font-weight: 800;
      box-shadow: 0 7px 16px rgba(13,27,46,.14);
    }

    .address-form {
      align-items: stretch;
    }

    .address-form-card {
      width: calc(100% - 4px);
      margin-right: auto;
      margin-left: auto;
      padding: 15px;
      border: 1px solid var(--line);
      border-radius: 20px;
      background: #fff;
      box-shadow: 0 8px 20px rgba(13,27,46,.06);
    }

    .address-form .two-fields {
      grid-template-columns: 1fr 1.4fr;
    }

    .textarea-field {
      min-height: 72px !important;
      align-items: flex-start !important;
      padding-top: 13px !important;
      line-height: 1.5;
    }

    .save-as > span {
      display: block;
      margin-bottom: 9px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
    }

    .save-as div {
      display: flex;
      gap: 9px;
    }

    .save-as button {
      flex: 1;
      min-height: 44px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      border: 1px solid #E2E9F1;
      border-radius: 12px;
      color: #5C6B81;
      background: #fff;
      font-size: 13px;
      font-weight: 700;
    }

    .save-as .is-active {
      border: 2px solid var(--primary-light);
      color: var(--primary);
      background: var(--primary-tint);
      font-weight: 800;
    }

    [data-screen="add-address"].detail-screen {
      gap: 14px;
      padding-bottom: 0;
    }

    [data-screen="add-address"] .simple-head {
      width: calc(100% - 4px);
      margin-inline: auto;
    }

    [data-screen="add-address"] .simple-head > div {
      min-width: 0;
    }

    [data-screen="add-address"] .simple-head strong,
    [data-screen="add-address"] .simple-head small {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .address-form-card label,
    .address-form-card .two-fields label {
      min-width: 0;
    }

    .address-form-card label strong {
      min-width: 0;
      overflow: hidden;
      transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
    }

    .address-form-card label strong:focus-within {
      border-color: var(--primary-light);
      background: #fff;
      box-shadow: 0 0 0 4px rgba(74, 163, 230, .14);
    }

    .address-form-card label.is-invalid strong {
      border-color: rgba(180, 35, 24, .46);
      background: #FFF7F6;
      box-shadow: 0 0 0 4px rgba(180, 35, 24, .08);
    }

    .address-form-card label.is-invalid input,
    .address-form-card label.is-invalid textarea {
      color: #7A271A;
    }

    .address-field-error {
      display: block;
      margin-top: 6px;
      color: #B42318;
      font-size: 11.5px;
      font-weight: 800;
      line-height: 1.35;
    }

    .address-form-card input,
    .address-form-card textarea {
      width: 100%;
      min-width: 0;
      border: 0;
      outline: 0;
      color: var(--ink);
      background: transparent;
      font: 700 16px/1.35 "Schibsted Grotesk", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    .address-form-card input::placeholder,
    .address-form-card textarea::placeholder {
      color: #A6B4C6;
      font-weight: 600;
    }

    .address-form-card textarea {
      min-height: 50px;
      padding: 0;
      resize: none;
    }

    .address-form-card .textarea-field {
      display: block;
      padding-bottom: 11px !important;
    }

    .address-form-card .textarea-field textarea {
      display: block;
    }

    .flow-message {
      min-height: 0;
      margin: -2px 2px 0;
      color: var(--muted);
      font-size: 12.5px;
      line-height: 1.45;
      font-weight: 700;
    }

    .flow-message:empty {
      display: none;
    }

    .flow-message.is-error,
    .flow-message.is-success {
      display: block;
      padding: 10px 12px;
      border-radius: 13px;
    }

    .flow-message.is-error {
      color: #B42318;
      background: #FFF0EE;
    }

    .flow-message.is-success {
      color: #1F7A4E;
      background: #ECFDF3;
    }

    [data-screen="add-address"] .detail-footer {
      position: sticky;
      bottom: -16px;
      z-index: 8;
      box-shadow: 0 -12px 28px rgba(13, 27, 46, .08);
    }

    .track-hero {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 18px;
      border-radius: 18px;
      color: #fff;
      background: linear-gradient(135deg,var(--primary),#1F6FB8);
      box-shadow: 0 14px 30px rgba(46,134,208,.32);
    }

    .track-hero > span {
      width: 48px;
      height: 48px;
      flex: 0 0 48px;
      display: grid;
      place-items: center;
      border-radius: 14px;
      background: rgba(255,255,255,.18);
    }

    .track-hero strong,
    .track-hero small {
      display: block;
    }

    .track-hero strong {
      font-size: 16px;
      font-weight: 800;
    }

    .track-hero small {
      margin-top: 3px;
      color: rgba(255,255,255,.82);
      font-size: 12px;
    }

    .track-card {
      padding: 20px 18px;
      border: 1px solid var(--line);
      border-radius: 18px;
      background: #fff;
      box-shadow: 0 6px 16px rgba(13,27,46,.05);
    }

    .track-step {
      position: relative;
      display: flex;
      gap: 14px;
      min-height: 68px;
    }

    .track-step::after {
      content: "";
      position: absolute;
      left: 13px;
      top: 30px;
      bottom: 2px;
      width: 2px;
      background: #E4ECF3;
    }

    .track-step:last-child {
      min-height: 28px;
    }

    .track-step:last-child::after {
      display: none;
    }

    .track-step > span {
      position: relative;
      z-index: 1;
      width: 28px;
      height: 28px;
      flex: 0 0 28px;
      display: grid;
      place-items: center;
      border: 2px solid #E2E9F1;
      border-radius: 999px;
      color: #C3CDDB;
      background: #fff;
    }

    .track-step.is-done > span,
    .track-step.is-current > span {
      color: #fff;
      border-color: var(--primary);
      background: var(--primary);
    }

    .track-step.is-current > span {
      box-shadow: 0 0 0 5px var(--primary-tint);
    }

    .track-step.is-done::after {
      background: var(--primary);
    }

    .track-step strong,
    .track-step small {
      display: block;
    }

    .track-step strong {
      color: var(--ink);
      font-size: 14.5px;
      font-weight: 800;
    }

    .track-step.is-current strong {
      color: var(--primary);
    }

    .track-step small {
      margin-top: 2px;
      color: #9AA8BD;
      font-size: 12px;
    }

    .delivered-banner {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 14px 16px;
      border: 1px solid #CDEEDD;
      border-radius: 16px;
      background: #E4F7EE;
    }

    .delivered-banner > span {
      width: 38px;
      height: 38px;
      display: grid;
      place-items: center;
      border-radius: 11px;
      color: #1F8A5B;
      background: #fff;
    }

    .delivered-banner strong,
    .delivered-banner small {
      display: block;
    }

    .delivered-banner strong {
      font-size: 14px;
      font-weight: 800;
    }

    .delivered-banner small {
      margin-top: 1px;
      color: #5C6B81;
      font-size: 11.5px;
    }

    .order-success-screen {
      width: 100%;
      min-height: 100%;
      display: flex;
      flex-direction: column;
      gap: 12px;
      box-sizing: border-box;
      padding-bottom: calc(38px + env(safe-area-inset-bottom));
    }

    .order-success-hero {
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 7px;
      padding: 22px 18px 20px;
      border-radius: 24px;
      color: #fff;
      background:
        radial-gradient(circle at 16% 18%, rgba(255,255,255,.25), transparent 28%),
        radial-gradient(circle at 82% 10%, rgba(245, 188, 72, .28), transparent 30%),
        linear-gradient(145deg, #50C2E9 0%, #3AAED9 48%, #0A74BB 100%);
      box-shadow: 0 18px 34px rgba(46,134,208,.28);
    }

    .order-success-hero::after {
      content: "";
      position: absolute;
      inset: auto -18% -36% 30%;
      height: 120px;
      border-radius: 999px;
      background: rgba(255,255,255,.14);
      transform: rotate(-10deg);
    }

    .order-success-icon {
      position: relative;
      z-index: 1;
      width: 74px;
      height: 74px;
      display: grid;
      place-items: center;
      border: 5px solid rgba(255,255,255,.36);
      border-radius: 999px;
      color: #1F8A5B;
      background: #fff;
      box-shadow: 0 14px 30px rgba(7,58,97,.22);
    }

    .order-success-kicker {
      position: relative;
      z-index: 1;
      margin: 6px 0 0;
      color: rgba(255,255,255,.86);
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    .order-success-hero h2 {
      position: relative;
      z-index: 1;
      margin: 0;
      font-size: 26px;
      line-height: 1.08;
      font-weight: 900;
      letter-spacing: 0;
    }

    .order-success-hero p:last-child {
      position: relative;
      z-index: 1;
      max-width: 300px;
      margin: 0;
      color: rgba(255,255,255,.9);
      font-size: 13.5px;
      line-height: 1.45;
      font-weight: 650;
    }

    .order-success-summary {
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 15px;
      border: 1px solid #E3EDF7;
      border-radius: 18px;
      background: #fff;
      box-shadow: 0 8px 20px rgba(13,27,46,.06);
    }

    .order-success-summary .split-row {
      align-items: flex-start;
    }

    .order-success-summary .split-row span,
    .order-success-muted {
      color: #64748B;
      font-size: 12.5px;
    }

    .order-success-summary .split-row strong {
      min-width: 0;
      text-align: right;
      font-size: 13.5px;
      line-height: 1.25;
      overflow-wrap: anywhere;
    }

    .order-success-items .mini-product-row {
      padding: 0;
      border: 0;
      border-radius: 0;
      box-shadow: none;
    }

    .order-success-items .mini-product-row + .mini-product-row {
      padding-top: 12px;
      border-top: 1px solid #EEF3F8;
    }

    .order-success-delivery .delivery-row p {
      margin: 0;
      color: #5C6B81;
      font-size: 12.5px;
      line-height: 1.45;
    }

    .order-success-delivery .delivery-row strong {
      display: block;
      color: var(--ink);
      font-size: 14px;
      line-height: 1.3;
    }

    .order-success-next {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 14px;
      border: 1px solid #DFF0FA;
      border-radius: 18px;
      color: #255C77;
      background: #EFFAFF;
      box-shadow: 0 8px 20px rgba(46,134,208,.08);
    }

    .order-success-next.is-warning {
      border-color: #FFE5B3;
      color: #7A4A00;
      background: #FFF8E8;
    }

    .order-success-next.is-warning .icon-box {
      background: linear-gradient(135deg, #F8B83E, #D48B0B);
    }

    .gift-issued-card {
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 14px;
      border: 1px solid #DFF0FA;
      border-radius: 18px;
      background: #FFFFFF;
      box-shadow: 0 8px 20px rgba(13,27,46,.06);
    }

    .gift-issued-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 10px;
      padding: 11px;
      border-radius: 14px;
      background: linear-gradient(135deg, #F2FBFF, #FFF9E9);
    }

    .gift-issued-row span {
      min-width: 0;
    }

    .gift-issued-row strong {
      display: block;
      color: var(--ink);
      font-size: 15px;
      line-height: 1.2;
      font-weight: 900;
      letter-spacing: .04em;
      overflow-wrap: anywhere;
    }

    .gift-issued-row small {
      display: block;
      margin-top: 3px;
      color: #5C6B81;
      font-size: 11.5px;
      line-height: 1.35;
      font-weight: 700;
    }

    .gift-issued-actions {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 6px;
    }

    .gift-issued-row button {
      min-height: 38px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 0 11px;
      border-radius: 12px;
      color: #fff;
      background: var(--gradient);
      font-size: 12px;
      font-weight: 850;
    }

    .gift-generator-open {
      overflow: hidden;
    }

    .gift-generator-backdrop {
      position: fixed;
      inset: 0;
      z-index: 250;
      background: rgba(8, 30, 43, .45);
      backdrop-filter: blur(12px);
    }

    .gift-generator-sheet {
      position: fixed;
      inset: auto 50% max(12px, env(safe-area-inset-bottom, 0px)) auto;
      z-index: 251;
      width: min(980px, calc(100vw - 24px));
      max-height: min(92vh, 820px);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.7);
      border-radius: 28px;
      background: rgba(255,255,255,.96);
      box-shadow: 0 32px 90px rgba(7, 42, 58, .34);
      transform: translateX(50%);
    }

    .gift-generator-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 18px 18px 12px;
      border-bottom: 1px solid #E5F4FA;
    }

    .gift-generator-head span {
      display: block;
      color: var(--primary);
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .gift-generator-head strong {
      display: block;
      margin-top: 3px;
      color: var(--ink);
      font-size: 20px;
      line-height: 1.15;
      font-weight: 950;
    }

    .gift-generator-head button {
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      color: #0D3444;
      background: #EEF9FD;
    }

    .gift-generator-body {
      display: grid;
      grid-template-columns: minmax(0, .98fr) minmax(320px, .8fr);
      gap: 18px;
      padding: 18px;
      overflow: auto;
    }

    .gift-generator-preview {
      min-width: 0;
    }

    .gift-preview-shell {
      position: relative;
      min-height: 430px;
      display: grid;
      place-items: center;
      overflow: hidden;
      border-radius: 28px;
      color: #fff;
      isolation: isolate;
      box-shadow: 0 24px 60px rgba(13,27,46,.16);
    }

    .gift-theme-romantic {
      background:
        radial-gradient(circle at 20% 18%, rgba(255,255,255,.52), transparent 24%),
        linear-gradient(135deg, #FFD7EA, #FF7AAF 52%, #7B2D56);
    }

    .gift-theme-birthday {
      background:
        radial-gradient(circle at 75% 18%, rgba(255,255,255,.5), transparent 24%),
        linear-gradient(135deg, #FFF1A8, #50C2E9 54%, #3AAED9);
    }

    .gift-theme-thankyou {
      background:
        radial-gradient(circle at 22% 20%, rgba(255,255,255,.48), transparent 24%),
        linear-gradient(135deg, #DFFFF2, #76DDB5 54%, #1B8E68);
    }

    .gift-preview-shell::before,
    .gift-preview-shell::after {
      content: "";
      position: absolute;
      width: 220px;
      height: 220px;
      border-radius: 50%;
      background: rgba(255,255,255,.18);
      filter: blur(2px);
      animation: giftFloat 7s ease-in-out infinite;
      z-index: -1;
    }

    .gift-preview-shell::before {
      left: -70px;
      bottom: -60px;
    }

    .gift-preview-shell::after {
      right: -80px;
      top: -70px;
      animation-delay: -2.5s;
    }

    .gift-preview-particles {
      position: absolute;
      inset: 0;
      pointer-events: none;
    }

    .gift-preview-particles i {
      position: absolute;
      left: calc(14% + (var(--i) * 17%));
      bottom: -24px;
      color: rgba(255,255,255,.82);
      font-size: calc(18px + (var(--i) * 2px));
      font-style: normal;
      text-shadow: 0 0 18px rgba(255,255,255,.75);
      animation: giftParticle 6s ease-in-out infinite;
      animation-delay: calc(var(--i) * -.8s);
    }

    .gift-box-animation {
      position: absolute;
      top: 42px;
      right: 42px;
      width: 86px;
      height: 86px;
      transform: rotate(-8deg);
    }

    .gift-box-animation span {
      position: absolute;
      background: rgba(255,255,255,.9);
      box-shadow: 0 12px 28px rgba(45, 10, 35, .12);
    }

    .gift-box-animation span:nth-child(1) {
      left: 16px;
      right: 16px;
      bottom: 8px;
      height: 48px;
      border-radius: 10px;
    }

    .gift-box-animation span:nth-child(2) {
      left: 10px;
      right: 10px;
      top: 16px;
      height: 20px;
      border-radius: 8px;
      transform-origin: 18px 100%;
      animation: giftLid 2.8s ease-in-out infinite;
    }

    .gift-box-animation span:nth-child(3) {
      left: 39px;
      top: 10px;
      bottom: 8px;
      width: 9px;
      border-radius: 999px;
      background: rgba(255,255,255,.68);
    }

    .gift-preview-content {
      width: min(82%, 460px);
      padding: 28px;
      border: 1px solid rgba(255,255,255,.5);
      border-radius: 26px;
      background: rgba(255,255,255,.19);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 22px 60px rgba(0,0,0,.12);
      backdrop-filter: blur(12px);
      text-align: left;
    }

    .gift-preview-kicker {
      color: rgba(255,255,255,.88);
      font-size: 12px;
      font-weight: 950;
      letter-spacing: .09em;
      text-transform: uppercase;
    }

    .gift-preview-content h3 {
      margin: 12px 0 10px;
      color: #fff;
      font-size: clamp(28px, 7vw, 48px);
      line-height: 1.02;
      font-weight: 950;
      overflow-wrap: anywhere;
    }

    .gift-preview-content p {
      min-height: 46px;
      margin: 0 0 22px;
      color: rgba(255,255,255,.92);
      font-size: 15px;
      line-height: 1.45;
      font-weight: 700;
      overflow-wrap: anywhere;
    }

    .gift-preview-amount {
      display: inline-flex;
      padding: 10px 15px;
      border-radius: 999px;
      color: #133342;
      background: rgba(255,255,255,.92);
      font-size: 22px;
      font-weight: 950;
      box-shadow: 0 12px 28px rgba(0,0,0,.11);
    }

    .gift-preview-from {
      margin-top: 18px;
      color: rgba(255,255,255,.9);
      font-size: 13px;
      font-weight: 850;
      overflow-wrap: anywhere;
    }

    .gift-generator-controls {
      display: flex;
      flex-direction: column;
      gap: 14px;
      min-width: 0;
    }

    .gift-theme-selector {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
    }

    .gift-theme-selector button {
      min-height: 76px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      gap: 7px;
      padding: 12px;
      border: 1px solid #DDEEF7;
      border-radius: 18px;
      color: #315367;
      background: #F7FCFF;
      text-align: left;
    }

    .gift-theme-selector button.is-selected {
      border-color: rgba(58,174,217,.55);
      color: #073B4E;
      background: linear-gradient(135deg, rgba(80,194,233,.18), rgba(255,255,255,.95));
      box-shadow: 0 12px 26px rgba(58,174,217,.15);
    }

    .gift-theme-selector strong,
    .gift-theme-selector small {
      display: block;
    }

    .gift-theme-selector strong {
      font-size: 12px;
      font-weight: 950;
    }

    .gift-theme-selector small {
      margin-top: 2px;
      color: #6A7C8B;
      font-size: 10.5px;
      font-weight: 750;
    }

    .gift-generator-form {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .gift-generator-form label {
      display: flex;
      flex-direction: column;
      gap: 7px;
      color: #557084;
      font-size: 12px;
      font-weight: 850;
    }

    .gift-generator-form input,
    .gift-generator-form textarea {
      width: 100%;
      border: 1px solid #DCECF4;
      border-radius: 16px;
      padding: 13px 14px;
      color: var(--ink);
      background: #fff;
      font: inherit;
      font-size: 14px;
      font-weight: 750;
      outline: none;
      box-shadow: 0 8px 18px rgba(13,27,46,.04);
    }

    .gift-generator-form textarea {
      min-height: 92px;
      resize: vertical;
    }

    .gift-amount-lock {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 4px 10px;
      padding: 14px;
      border-radius: 18px;
      background: #EFFAFF;
      color: #255C77;
    }

    .gift-amount-lock span,
    .gift-amount-lock small {
      color: #557084;
      font-size: 12px;
      font-weight: 800;
    }

    .gift-amount-lock strong {
      color: var(--ink);
      font-size: 18px;
      font-weight: 950;
    }

    .gift-amount-lock small {
      grid-column: 1 / -1;
    }

    .gift-generator-message {
      padding: 11px 13px;
      border-radius: 14px;
      color: #255C77;
      background: #EFFAFF;
      font-size: 12.5px;
      font-weight: 800;
      line-height: 1.35;
    }

    .gift-generator-actions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 9px;
    }

    .gift-generator-actions .primary-action {
      grid-column: 1 / -1;
      min-height: 48px;
    }

    .gift-generator-actions .is-soft {
      min-height: 44px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      border-radius: 16px;
      color: #0B5D7D;
      background: #EAF9FE;
      font-size: 13px;
      font-weight: 900;
    }

    .gift-generator-entry {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: center;
      gap: 12px;
      padding: 14px;
      border: 1px solid #DFF0FA;
      border-radius: 18px;
      background: linear-gradient(135deg, #F2FCFF, #FFFFFF);
      box-shadow: 0 10px 24px rgba(13,27,46,.06);
    }

    .gift-generator-entry-icon {
      width: 46px;
      height: 46px;
      display: grid;
      place-items: center;
      border-radius: 16px;
      color: #fff;
      background: var(--gradient);
    }

    .gift-generator-entry strong,
    .gift-generator-entry small {
      display: block;
    }

    .gift-generator-entry strong {
      color: var(--ink);
      font-size: 14px;
      line-height: 1.2;
      font-weight: 950;
    }

    .gift-generator-entry small {
      margin-top: 3px;
      color: #60778A;
      font-size: 12px;
      line-height: 1.35;
      font-weight: 700;
    }

    .gift-generator-entry button {
      min-height: 42px;
      padding: 0 13px;
      border-radius: 14px;
      color: #fff;
      background: var(--gradient);
      font-size: 12.5px;
      font-weight: 950;
      white-space: nowrap;
    }

    @keyframes giftFloat {
      0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
      50% { transform: translate3d(12px, -14px, 0) scale(1.04); }
    }

    @keyframes giftParticle {
      0% { opacity: 0; transform: translate3d(0, 20px, 0) scale(.8) rotate(0deg); }
      18% { opacity: .95; }
      100% { opacity: 0; transform: translate3d(18px, -390px, 0) scale(1.25) rotate(18deg); }
    }

    @keyframes giftLid {
      0%, 55%, 100% { transform: translateY(0) rotate(0deg); }
      22% { transform: translateY(-16px) rotate(-16deg); }
    }

    .app-toast {
      position: fixed;
      left: 50%;
      bottom: calc(88px + env(safe-area-inset-bottom, 0px));
      z-index: 120;
      max-width: min(320px, calc(100vw - 32px));
      padding: 11px 15px;
      border-radius: 999px;
      color: #fff;
      background: rgba(15,27,45,.92);
      box-shadow: 0 12px 28px rgba(13,27,46,.22);
      font-size: 12.5px;
      font-weight: 850;
      line-height: 1.25;
      text-align: center;
      opacity: 0;
      pointer-events: none;
      transform: translate(-50%, 12px);
      transition: opacity .18s ease, transform .18s ease;
    }

    .app-toast.is-visible {
      opacity: 1;
      transform: translate(-50%, 0);
    }

    .app-toast.is-success {
      background: linear-gradient(135deg, var(--primary-light), var(--primary));
    }

    .app-toast.is-error {
      background: linear-gradient(135deg, #E84E78, #BE3159);
    }

    @media (max-width: 390px) {
      .gift-issued-row {
        grid-template-columns: 1fr;
      }

      .gift-issued-actions {
        justify-content: flex-start;
      }
    }

    @media (max-width: 760px) {
      .gift-generator-sheet {
        inset: 0;
        width: 100vw;
        max-height: none;
        border: 0;
        border-radius: 0;
        transform: none;
      }

      .gift-generator-head {
        padding: calc(14px + env(safe-area-inset-top, 0px)) 16px 12px;
      }

      .gift-generator-body {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 14px 14px calc(18px + env(safe-area-inset-bottom, 0px));
      }

      .gift-preview-shell {
        min-height: min(58vh, 470px);
        border-radius: 24px;
      }

      .gift-preview-content {
        width: min(88%, 420px);
        padding: 22px;
      }

      .gift-box-animation {
        top: 26px;
        right: 24px;
        transform: scale(.82) rotate(-8deg);
      }

      .gift-theme-selector {
        grid-template-columns: 1fr 1fr 1fr;
      }
    }

    @media (max-width: 420px) {
      .gift-theme-selector {
        grid-template-columns: 1fr;
      }

      .gift-theme-selector button {
        min-height: 58px;
        flex-direction: row;
        align-items: center;
      }

      .gift-generator-entry {
        grid-template-columns: auto minmax(0, 1fr);
      }

      .gift-generator-entry button {
        grid-column: 1 / -1;
        width: 100%;
      }
    }

    .order-success-next .icon-box {
      flex: 0 0 auto;
      color: #fff;
      background: linear-gradient(135deg, var(--primary-light), var(--primary));
    }

    .order-success-next strong {
      display: block;
      color: var(--ink);
      font-size: 13.5px;
      line-height: 1.25;
      font-weight: 900;
    }

    .order-success-next p {
      margin: 3px 0 0;
      color: #5C7187;
      font-size: 12.5px;
      line-height: 1.4;
      font-weight: 650;
    }

    .order-success-actions {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 10px;
      width: 100%;
      padding-bottom: max(14px, env(safe-area-inset-bottom));
    }

    .order-success-actions .primary-action,
    .order-success-secondary {
      width: 100%;
      min-width: 0;
      min-height: 48px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      border-radius: 16px;
      font-size: 14px;
      line-height: 1.2;
      font-weight: 900;
      text-align: center;
      white-space: normal;
    }

    .order-success-actions svg {
      flex: 0 0 auto;
    }

    .order-success-secondary {
      border: 1px solid #D8E7F5;
      color: var(--primary);
      background: #fff;
      box-shadow: 0 6px 14px rgba(13,27,46,.04);
    }

    .order-success-secondary.is-soft {
      border-color: transparent;
      color: #075A91;
      background: #EAF8FE;
    }

    .delivery-row {
      display: flex;
      gap: 11px;
    }

    .delivery-row p {
      margin-top: 0;
    }

    .success-row span,
    .success-row strong {
      color: #1F8A5B;
    }

    .screen-view {
      display: none;
      flex-direction: column;
      gap: 16px;
    }

    .screen-view.is-active { display: flex; }

    [data-screen="bag"].screen-view {
      padding-bottom: 116px;
    }

    [data-screen="product"].screen-view {
      padding-bottom: 116px;
    }

    .tab-bar {
      flex: 0 0 auto;
      position: relative;
      z-index: 5;
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      align-items: end;
      gap: 2px;
      padding: 12px 20px 22px;
      border-top: 1px solid #EEF3F9;
      background: #fff;
    }

    .tab {
      min-width: 0;
      min-height: 57px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end;
      gap: 5px;
      color: #9AA8BD;
      font-size: 11px;
      font-weight: 600;
    }

    .tab-icon {
      position: relative;
      width: 23px;
      height: 23px;
      display: grid;
      place-items: center;
    }

    .tab.is-active {
      color: var(--primary);
      font-weight: 800;
    }

    .tab.is-active .tab-icon {
      width: 48px;
      height: 48px;
      margin-top: -24px;
      border-radius: 18px;
      color: #fff;
      background: linear-gradient(140deg, var(--primary-light), var(--primary));
      box-shadow: 0 12px 22px rgba(58, 174, 217, .42);
    }

    .tab .badge {
      top: -8px;
      right: -9px;
      min-width: 16px;
      height: 16px;
      border: 0;
    }

    @media (max-width: 430px) {
      html,
      body {
        width: 100%;
        min-height: 100%;
        overflow: hidden;
      }

      body {
        display: block;
        padding: 0;
        background: linear-gradient(180deg, var(--soft) 0%, var(--screen) 240px);
      }

      .phone {
        width: 100%;
        height: 100vh;
        height: 100svh;
        min-height: 100vh;
        border-radius: 0;
        box-shadow: none;
      }

      .screen {
        width: 100%;
        height: 100vh;
        height: 100svh;
        min-height: 0;
        border: 0;
        border-radius: 0;
      }

      .content {
        padding-bottom: 22px;
      }

      .tab-bar {
        position: sticky;
        bottom: 0;
        padding-bottom: calc(14px + env(safe-area-inset-bottom));
        box-shadow: 0 -10px 24px rgba(13, 27, 46, .08);
      }
      .app-header { gap: 9px; }
      .logo {
        width: 46px;
        height: 46px;
        flex-basis: 46px;
      }
      .title { font-size: 20px; }
      .header-actions { gap: 6px; }
      .wallet-pill { padding: 0 9px; }
      .tab-bar { padding-inline: 14px; }
    }

    @media (max-width: 360px) {
      .install-app-nudge {
        right: 10px;
        left: 10px;
        grid-template-columns: 32px minmax(0, 1fr) auto 26px;
        gap: 7px;
        padding: 9px 6px 9px 8px;
      }

      .install-app-nudge > img {
        width: 32px;
        height: 32px;
      }

      .install-app-nudge-copy small { font-size: 9.5px; }
      .install-app-nudge-action {
        min-width: 52px;
        padding-inline: 9px;
      }

      [data-screen="add-address"] > .address-location-card,
      [data-screen="add-address"] > .profile-form,
      [data-screen="add-address"] > .save-as,
      [data-screen="add-address"] .simple-head {
        width: 100%;
      }

      .address-location-card {
        padding: 15px;
      }

      .address-location-card div > span {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
        border-radius: 14px;
      }

      .address-form-card {
        padding: 13px;
      }

      .address-form .two-fields {
        grid-template-columns: 1fr;
        gap: 14px;
      }

      .save-as div {
        gap: 7px;
      }

      .save-as button {
        font-size: 12px;
      }
    }

    @media (min-width: 900px) {
      body {
        align-items: flex-start;
        min-height: 100vh;
        padding: 46px 40px 72px;
        background: #EAEEF4;
      }

      .phone {
        width: min(1280px, calc(100vw - 80px));
        min-height: 0;
        border: 1px solid #E1E8F0;
        border-radius: 16px;
        background: #fff;
        box-shadow: 0 40px 90px -30px rgba(13,27,46,.4), 0 12px 32px rgba(13,27,46,.1);
      }

      .screen {
        height: auto;
        min-height: min(846px, calc(100vh - 118px));
        border-radius: 16px;
        background: #EDF2F8;
      }

      .content {
        height: auto;
        min-height: min(846px, calc(100vh - 118px));
        overflow: visible;
        gap: 0;
        padding: 0;
      }

      [data-screen-type="detail"] .app-header {
        display: flex;
      }

      [data-screen-type="detail"] .content {
        gap: 0;
        padding: 0;
      }

      .tab-bar,
      .refer-float,
      .whatsapp-float,
      .install-app-nudge {
        display: none !important;
      }

      .app-header {
        min-height: 72px;
        padding: 0 40px;
        border-bottom: 1px solid #EAF0F7;
        background: #fff;
      }

      .logo {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
        border-radius: 13px;
      }

      .title {
        font-size: 20px;
      }

      .subtitle {
        font-size: 12.5px;
      }

      .desktop-nav {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin: 0 auto;
      }

      .desktop-nav .tab {
        min-width: 0;
        min-height: 42px;
        padding: 0 16px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        color: #5C6B81;
        background: transparent;
        font-size: 14px;
        font-weight: 800;
      }

      .desktop-nav .tab.is-active {
        color: #fff;
        background: var(--gradient);
        box-shadow: 0 8px 18px rgba(46,134,208,.32);
      }

      .screen-view {
        padding: 30px 40px 60px;
        gap: 28px;
      }

      .home-search {
        max-width: 720px;
        min-height: 50px;
        margin: 0 auto;
      }

      .home-chip-grid {
        display: flex;
        gap: 10px;
      }

      .home-chip {
        flex: 0 0 auto;
        min-width: 124px;
        min-height: 44px;
        border-radius: 12px;
      }

      .home-hero-card {
        min-height: 360px;
        display: grid;
        grid-template-columns: minmax(0, 1fr) 420px;
        align-items: stretch;
        border-radius: 26px;
      }

      .home-hero-copy {
        width: auto;
        padding: 52px 56px;
      }

      .home-hero-copy h2,
      .home-hero-card h2 {
        font-size: 52px;
        line-height: 1.04;
      }

      .home-hero-media {
        position: relative;
        width: auto;
        height: auto;
      }

      .home-hero-badges,
      .home-hero-actions {
        position: absolute;
        left: 56px;
        right: auto;
      }

      .home-hero-badges {
        bottom: 96px;
        display: flex;
        gap: 26px;
        margin-top: 0;
      }

      .home-hero-actions {
        bottom: 32px;
        width: auto;
        display: flex;
        margin-top: 0;
      }

      .home-hero-actions .is-primary {
        min-width: 190px;
      }

      .home-hero-actions button:not(.is-primary) {
        min-width: 160px;
      }

      .home-promo-banner {
        max-height: 170px;
        object-fit: cover;
      }

      .home-customer-celebration {
        grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr);
        align-items: center;
        gap: 20px;
        padding: 22px;
      }

      .home-customer-celebration-top {
        grid-template-columns: minmax(0, 1fr) auto;
      }

      .home-celebration-points {
        align-self: stretch;
        grid-template-columns: 1fr;
      }

      .home-celebration-points span {
        flex-direction: row;
        gap: 6px;
        font-size: 11px;
        white-space: nowrap;
      }

      .home-celebration-action {
        grid-column: 2;
      }

      .home-best-rail {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 20px;
        overflow: visible;
      }

      .home-best-card {
        min-width: 0;
      }

      .home-best-image {
        height: 200px;
      }

      .home-category-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 16px;
      }

      .home-collection-card {
        aspect-ratio: 1 / 1;
      }

      .home-footer-tags {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 20px;
      }

      [data-screen="product"].screen-view {
        padding-bottom: 60px;
      }

      [data-active-screen="product"] .app-header {
        padding-inline: 40px;
        padding-bottom: 0;
      }

      .product-search-wrap {
        width: min(720px, 100%);
        margin: 0 auto;
      }

      .product-collections {
        padding: 0;
        background: transparent;
        box-shadow: none;
      }

      .product-subcats {
        grid-template-columns: repeat(6, minmax(0, 1fr));
      }

      .product-subcat {
        min-height: 150px;
      }

      .product-filter-row {
        justify-content: flex-end;
      }

      .product-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 22px;
        margin-inline: 0;
      }

      .product-card {
        border-radius: 20px;
      }

      .product-image {
        height: 230px;
      }

      [data-screen="bag"].screen-view {
        padding-bottom: 130px;
      }

      [data-screen="bag"].screen-view.is-active {
        display: grid;
        grid-template-columns: minmax(0, 1.35fr) 360px;
        align-items: start;
      }

      [data-screen="bag"] .bag-panel,
      [data-screen="bag"] .shipping-nudge {
        grid-column: 1;
      }

      [data-screen="bag"] #orderSummary {
        grid-column: 2;
        grid-row: 1 / span 3;
        position: sticky;
        top: 96px;
      }

      .checkout-block {
        left: 40px;
        right: 40px;
        bottom: 0;
        padding: 16px 40px;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        border-radius: 0;
      }

      .checkout-button {
        width: 360px;
        justify-self: end;
      }

      .checkout-note {
        align-self: center;
        justify-self: start;
        text-align: left;
        font-size: 13px;
      }

      [data-screen="checkout"].screen-view.is-active {
        margin: 0;
        display: grid;
        grid-template-columns: minmax(0, 1.35fr) 380px;
        gap: 28px;
        overflow: visible;
      }

      .checkout-head {
        grid-column: 1 / -1;
        padding: 0;
      }

      .checkout-scroll {
        display: contents;
      }

      .checkout-scroll > :not(.checkout-review-card) {
        grid-column: 1;
      }

      .checkout-review-card {
        grid-column: 2;
        grid-row: 2 / span 4;
        position: sticky;
        top: 96px;
      }

      .checkout-footer {
        grid-column: 1 / -1;
        margin: 0 -40px -60px;
        padding: 16px 40px;
      }

      [data-screen="account"].screen-view.is-active,
      [data-screen="settings"].screen-view.is-active {
        display: grid;
        grid-template-columns: 360px minmax(0, 1fr);
        align-items: start;
      }

      [data-screen="account"] .menu,
      [data-screen="settings"] .menu {
        margin-top: 0;
      }

      [data-screen="account"] .logout {
        grid-column: 2;
      }

      .profile-card,
      .settings-card {
        position: sticky;
        top: 96px;
      }

      .detail-screen {
        width: 100%;
        max-width: 1120px;
        margin: 0 auto;
      }

      .simple-head {
        padding-top: 0;
      }

      .detail-footer {
        margin: auto 0 0;
        border: 1px solid #EEF3F9;
        border-radius: 18px;
      }

      [data-screen="orders"].screen-view,
      [data-screen="address"].screen-view,
      [data-screen="refer"].screen-view,
      [data-screen="gift"].screen-view,
      [data-screen="order-details"].screen-view,
      [data-screen="track-order"].screen-view,
      [data-screen="profile"].screen-view,
      [data-screen="add-address"].screen-view {
        max-width: 900px;
      }

      [data-screen="product-detail"].screen-view.is-active {
        max-width: none;
        height: calc(100vh - 119px);
        min-height: 720px;
        padding: 0;
        margin: 0;
        overflow: hidden;
        position: relative;
        display: flex;
        flex-direction: column;
      }

      .product-detail-scroll {
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(420px, .9fr);
        align-items: stretch;
        overflow: hidden;
      }

      .pd-hero {
        height: auto;
        min-height: 100%;
        flex-basis: auto;
        position: sticky;
        top: 72px;
        border-radius: 0;
      }

      .pd-sheet {
        height: 100%;
        min-height: 0;
        overflow-y: auto;
        margin: 0;
        padding: 40px 40px 132px;
        border-radius: 0;
        scrollbar-width: none;
      }

      .pd-sheet::-webkit-scrollbar {
        display: none;
      }

      .pd-highlights {
        min-height: 48px;
        align-items: stretch;
        overflow-y: visible;
      }

      .pd-highlights div {
        min-height: 46px;
      }

      .pd-footer {
        position: absolute;
        bottom: 0;
        z-index: 20;
        right: 0;
        left: auto;
        width: min(620px, 47.5%);
        margin: 0;
        padding: 16px 40px;
        border: 1px solid #EEF3F9;
        border-right: 0;
        border-bottom: 0;
        border-radius: 22px 0 0 0;
        box-shadow: 0 -18px 35px rgba(13,27,46,.08);
      }

      .info-screen,
      .login-screen,
      .success-screen,
      .empty-state-screen {
        max-width: 760px;
      }

      .login-screen {
        border-radius: 28px;
      }
    }

[hidden] { display: none !important; }

.tab[aria-selected="true"] {
  color: var(--primary);
  font-weight: 800;
}

button:focus-visible,
a:focus-visible {
  outline: 3px solid rgba(46, 134, 208, .45);
  outline-offset: 3px;
}

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

.user-flow-screen.login-screen {
  background: #EEF3F9;
}

.user-flow-screen .login-scroll {
  min-height: 100%;
  padding: 0;
  gap: 0;
}

.user-flow-hero.is-name {
  box-sizing: border-box;
  padding: 20px 24px 46px;
  border-radius: 0 0 34px 34px;
  background: linear-gradient(160deg, var(--primary-light) 0%, var(--primary) 58%, #1F6FB8 100%);
  text-align: center;
}

.user-flow-topbar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-flow-topbar .login-close {
  position: static;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  color: #FFFFFF;
  background: rgba(255,255,255,.2);
  box-shadow: none;
}

.user-flow-topbar span {
  margin-left: auto;
  padding: 6px 13px;
  border-radius: 999px;
  color: #FFFFFF;
  background: rgba(255,255,255,.2);
  font-size: 12px;
  font-weight: 800;
}

.user-flow-avatar {
  position: relative;
  width: 104px;
  height: 104px;
  display: grid;
  place-items: center;
  margin: 20px auto 0;
}

.user-flow-avatar::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.1);
}

.user-flow-avatar::after {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
}

.user-flow-avatar span {
  position: relative;
  z-index: 1;
  width: 84px;
  height: 84px;
  display: grid;
  place-items: center;
  border: 3px solid rgba(255,255,255,.6);
  border-radius: 999px;
  color: var(--primary);
  background: #FFFFFF;
  box-shadow: 0 16px 32px rgba(13,27,46,.26);
}

.user-flow-hero h2 {
  margin-top: 16px;
  color: #FFFFFF;
  font-size: 23px;
  letter-spacing: 0;
}

.user-flow-hero p {
  margin: 6px 0 0;
  color: rgba(255,255,255,.88);
  font-size: 13px;
  line-height: 1.5;
}

.enter-user-form {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0 0 max(24px, env(safe-area-inset-bottom));
}

.user-flow-screen .login-field,
.user-flow-note,
.user-flow-contact,
.user-flow-message,
.user-flow-screen .login-submit {
  width: calc(100% - 44px);
  margin-right: auto;
  margin-left: auto;
}

.user-flow-screen .login-field {
  margin-top: 24px;
}

.user-name-field {
  margin-top: 16px !important;
}

.user-flow-screen .login-field > span {
  color: #5C6B81;
  font-weight: 800;
}

.user-flow-screen .login-field > span em {
  color: #A9B6C7;
  font-style: normal;
  font-weight: 600;
}

.user-flow-screen .login-field strong {
  height: 54px;
  gap: 11px;
  padding: 0 15px;
  border-radius: 15px;
}

.user-flow-screen .login-field .is-muted-field {
  border-color: #E2E9F1;
  box-shadow: none;
}

.user-flow-input {
  min-width: 0;
  width: 100%;
  height: 100%;
  border: 0;
  outline: 0;
  color: var(--ink);
  background: transparent;
  font: inherit;
  font-size: 15.5px;
  font-weight: 800;
}

.user-flow-input::placeholder {
  color: #A9B6C7;
  opacity: 1;
}

.login-phone-icon.is-inline {
  width: auto;
  height: auto;
  flex: 0 0 auto;
  margin: 0;
  color: var(--primary);
  background: transparent;
}

.user-flow-message {
  min-height: 20px;
  margin-top: 10px;
  padding: 0;
  font-size: 12px;
  text-align: left;
}

.user-flow-note {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-top: 14px;
  padding: 13px;
  border-radius: 14px;
  color: #5C6B81;
  background: var(--primary-tint);
  font-size: 11.5px;
  line-height: 1.45;
}

.user-flow-note svg {
  width: 34px !important;
  height: 34px !important;
  padding: 8px;
  flex: 0 0 34px;
  border-radius: 10px;
  color: #FFFFFF;
  background: var(--gradient);
}

.user-flow-note strong {
  display: block;
  margin-bottom: 2px;
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 800;
}

.user-flow-contact {
  margin-top: 12px;
  display: flex;
  justify-content: center;
  color: #7A8AA0;
  font-size: 12px;
  font-weight: 700;
}

.user-flow-contact span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-flow-screen .login-submit {
  min-height: 54px;
  margin-top: auto;
}

.user-flow-screen .login-submit:disabled {
  opacity: .75;
}

.user-gradient-screen {
  position: relative;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 14%, rgba(255,255,255,.18) 0 98px, transparent 99px),
    radial-gradient(circle at 8% 58%, rgba(255,255,255,.1) 0 82px, transparent 83px),
    linear-gradient(165deg, var(--primary-light) 0%, var(--primary) 55%, #1F6FB8 100%);
}

.user-gradient-content {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 32px;
  text-align: center;
}

.user-verified-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 15px;
  margin-bottom: 26px;
  border-radius: 999px;
  color: #FFFFFF;
  background: rgba(255,255,255,.16);
  font-size: 12.5px;
  font-weight: 800;
}

.user-avatar-large {
  position: relative;
  width: 170px;
  height: 170px;
  display: grid;
  place-items: center;
  animation: achebe-success-rise .5s ease both;
}

.user-avatar-large::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
}

.user-avatar-large::after {
  content: "";
  position: absolute;
  inset: 20px;
  border: 1px dashed rgba(255,255,255,.32);
  border-radius: 999px;
}

.user-avatar-large span {
  position: relative;
  z-index: 1;
  width: 104px;
  height: 104px;
  display: grid;
  place-items: center;
  border: 4px solid rgba(255,255,255,.6);
  border-radius: 999px;
  color: #FFFFFF;
  background: linear-gradient(140deg,#7FC0F2,var(--primary));
  box-shadow: 0 20px 40px rgba(13,27,46,.3);
  font-size: 44px;
  font-weight: 800;
}

.user-avatar-large > svg {
  position: absolute;
  right: 14px;
  bottom: 6px;
  z-index: 2;
  width: 38px !important;
  height: 38px !important;
  padding: 6px;
  border: 4px solid #FFFFFF;
  border-radius: 999px;
  color: #FFFFFF;
  background: #22C55E;
}

.user-success-mark {
  position: relative;
  width: 170px;
  height: 170px;
  display: grid;
  place-items: center;
  animation: achebe-success-rise .5s ease both;
}

.user-success-mark::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
}

.user-success-mark::after {
  content: "";
  position: absolute;
  inset: 20px;
  border: 1px dashed rgba(255,255,255,.32);
  border-radius: 999px;
}

.user-success-mark svg {
  position: relative;
  z-index: 1;
  width: 100px !important;
  height: 100px !important;
  padding: 24px;
  border: 4px solid rgba(255,255,255,.55);
  border-radius: 999px;
  color: #1F8A5B;
  background: #FFFFFF;
  box-shadow: 0 20px 40px rgba(13,27,46,.3);
  stroke-width: 3;
}

.user-flow-kicker {
  margin-top: 24px;
  color: rgba(255,255,255,.86);
  font-size: 14px;
  font-weight: 700;
}

.user-gradient-content h2 {
  margin: 4px 0 0;
  color: #FFFFFF;
  font-size: 28px;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: 0;
}

.user-gradient-content p {
  margin: 11px 0 0;
  color: rgba(255,255,255,.9);
  font-size: 14px;
  line-height: 1.55;
}

.user-flow-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
  margin-top: 24px;
}

.user-flow-badges span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 13px;
  border-radius: 999px;
  color: #FFFFFF;
  background: rgba(255,255,255,.16);
  font-size: 12px;
  font-weight: 800;
}

.user-gradient-footer {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  padding: 20px 24px max(26px, env(safe-area-inset-bottom));
}

.user-gradient-footer .login-submit.is-white {
  width: 100%;
  margin: 0;
  color: var(--primary);
  background: #FFFFFF;
  box-shadow: 0 14px 30px rgba(13,27,46,.24);
}

.user-flow-link {
  width: 100%;
  margin-top: 15px;
  color: rgba(255,255,255,.86);
  background: transparent;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

@keyframes achebe-success-rise {
  from {
    opacity: 0;
    transform: translateY(16px) scale(.92);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Login screen: production OTP logic with the clean text-first mobile design. */
.achebe-login-screen.login-screen {
  overflow: hidden;
  background: #FFFFFF;
}

.achebe-login-scroll.login-scroll {
  min-height: 100%;
  padding: 0;
  gap: 0;
  background: #FFFFFF;
}

.achebe-login-hero.login-hero-panel {
  box-sizing: border-box;
  max-width: 100%;
  min-height: 316px;
  margin: 0;
  padding: 30px 26px 82px;
  border-radius: 0;
  background:
    radial-gradient(circle at 88% 8%, rgba(255,255,255,.16) 0 92px, transparent 94px),
    radial-gradient(circle at 8% 72%, rgba(255,255,255,.10) 0 78px, transparent 80px),
    linear-gradient(158deg, var(--primary-light) 0%, var(--primary) 54%, #1F6FB8 100%);
  box-shadow: none;
}

.achebe-login-hero.login-hero-panel::before {
  right: 0;
  top: -36px;
  width: 212px;
  height: 212px;
  background: rgba(255,255,255,.11);
}

.achebe-login-hero.login-hero-panel::after {
  left: 0;
  bottom: -22px;
  width: 150px;
  height: 150px;
  background: rgba(255,255,255,.06);
}

.achebe-login-hero .login-close {
  top: 16px;
  right: 16px;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 999px;
  color: #FFFFFF;
  background: rgba(255,255,255,.2);
  box-shadow: none;
}

.achebe-login-logo.login-logo {
  width: 118px;
  height: 118px;
  margin-top: 0;
}

.achebe-login-logo.login-logo span {
  inset: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.1);
}

.achebe-login-logo.login-logo span::after {
  content: "";
  position: absolute;
  inset: 11px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 999px;
}

.achebe-login-logo.login-logo img {
  inset: 10px;
  width: 98px;
  height: 98px;
  padding: 13px;
  border: 3px solid rgba(255,255,255,.65);
  border-radius: 999px;
  object-fit: contain;
  background: #FFFFFF;
  box-shadow: 0 20px 38px rgba(13,27,46,.28);
}

.achebe-login-hero h2 {
  margin-top: 17px;
  color: #FFFFFF;
  font-size: 24px;
  line-height: 1.16;
  font-weight: 900;
  letter-spacing: 0;
}

.achebe-login-hero p {
  max-width: 270px;
  margin: 7px auto 0;
  color: rgba(255,255,255,.88);
  font-size: 13.5px;
  line-height: 1.48;
  font-weight: 700;
}

.secret-login-offer {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 8px;
  width: min(100%, 330px);
  margin: 18px auto 0;
  border: 1px solid rgba(255, 213, 111, 0.44);
  border-radius: 22px;
  padding: 14px;
  color: #fff;
  text-align: left;
  background:
    radial-gradient(circle at 94% 4%, rgba(255, 225, 128, 0.32), transparent 38%),
    linear-gradient(135deg, rgba(6, 42, 93, 0.94), rgba(10, 116, 187, 0.86));
  box-shadow: 0 18px 40px rgba(2, 31, 72, 0.22);
}

.secret-login-offer span {
  color: #ffd66d;
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.secret-login-offer strong {
  color: #fff;
  font-size: 1.08rem;
  font-weight: 950;
  line-height: 1.15;
}

.secret-login-offer p {
  max-width: none;
  margin: 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.82rem;
  font-weight: 750;
  line-height: 1.42;
}

.secret-login-offer div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-radius: 16px;
  padding: 9px 11px;
  background: rgba(255, 255, 255, 0.13);
}

.secret-login-offer small {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.72rem;
  font-weight: 850;
}

.secret-login-offer b {
  color: #ffe082;
  font-size: 0.98rem;
  font-weight: 950;
  font-variant-numeric: tabular-nums;
}

.achebe-login-sheet.login-form-panel {
  position: relative;
  z-index: 4;
  flex: 1;
  margin: -54px 0 0;
  padding: 14px 24px max(26px, env(safe-area-inset-bottom));
  border: 0;
  border-radius: 30px 30px 0 0;
  background: #FFFFFF;
  box-shadow: 0 -12px 30px rgba(13,27,46,.06);
}

.achebe-login-sheet.login-form-panel::before {
  display: none;
}

.achebe-sheet-handle {
  display: block;
  width: 44px;
  height: 4px;
  margin: 0 auto 20px;
  border-radius: 999px;
  background: #DCE5EF;
}

.achebe-phone-field.login-field {
  width: 100%;
  margin: 0;
}

.achebe-phone-field.login-field > span,
.achebe-login-sheet .otp-block > div > span {
  margin-bottom: 9px;
  color: #7A8AA0;
  font-size: 12px;
  font-weight: 800;
}

.achebe-login-sheet .otp-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.achebe-login-sheet .otp-actions button {
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid rgba(74, 163, 230, .32);
  border-radius: 999px;
  color: #0A74BB;
  background: #FFFFFF;
  box-shadow: 0 6px 14px rgba(46,134,208,.10);
}

.achebe-login-sheet .otp-actions [data-paste-otp] {
  color: #FFFFFF;
  border-color: transparent;
  background: linear-gradient(135deg, var(--primary-light), var(--primary));
  box-shadow: 0 8px 18px rgba(46,134,208,.24);
}

.achebe-phone-field.login-field strong {
  height: 58px;
  padding: 0 7px 0 15px;
  border: 1.5px solid #BFEAF8;
  border-radius: 16px;
  background: #FFFFFF;
  box-shadow: 0 10px 22px rgba(46,134,208,.12);
}

.achebe-phone-field .login-phone-code {
  height: 100%;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding-right: 12px;
  margin-right: 12px;
  border-right: 1px solid #E7EEF6;
  color: #0F1B2D;
  font-size: 16px;
  font-style: normal;
  font-weight: 900;
}

.achebe-phone-field .login-phone-code b {
  color: #7A8AA0;
  font-size: 12px;
  letter-spacing: .06em;
}

.achebe-phone-field input.login-phone-number {
  color: #0F1B2D;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .5px;
}

.achebe-phone-field input.login-phone-number::placeholder {
  color: #AEBBCC;
}

.achebe-phone-field .login-phone-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  color: #FFFFFF;
  background: linear-gradient(135deg, var(--primary-light), var(--primary));
  box-shadow: 0 8px 16px rgba(46,134,208,.36);
}

.achebe-send-otp.login-submit {
  width: 100%;
  min-height: 56px;
  margin-top: 18px;
  border-radius: 16px;
  font-size: 16.5px;
  box-shadow: 0 16px 28px rgba(46,134,208,.42);
}

.achebe-login-sheet .otp-block {
  margin-top: 18px;
}

.achebe-login-sheet .otp-box-row {
  gap: 9px;
}

.achebe-login-sheet .otp-block section input[data-otp-digit] {
  height: 54px;
  border-color: #BFEAF8;
  border-radius: 14px;
  box-shadow: 0 8px 18px rgba(46,134,208,.12);
}

.achebe-login-sheet .otp-block section input[data-otp-digit]:focus {
  border-color: var(--primary);
  box-shadow: 0 10px 22px rgba(46,134,208,.2);
}

.achebe-login-sheet .otp-auto-toggle {
  border-color: #D8EEF9;
  background: linear-gradient(180deg, #F4FCFF 0%, #FFFFFF 100%);
}

.achebe-login-sheet .google-button {
  position: relative;
  width: 100%;
  min-height: 54px;
  height: 54px;
  border-radius: 15px;
  border: 1.5px solid var(--primary-light);
  background: #FFFFFF;
  box-shadow: 0 6px 16px rgba(46,134,208,.12);
}

.achebe-login-sheet .google-button em {
  color: #7A4C00;
  background: linear-gradient(135deg, #FFF4C7, #FFE08A);
  box-shadow: 0 6px 14px rgba(219, 154, 22, .18);
}

.achebe-login-sheet .achebe-google-button > span:not(.achebe-google-badge) {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  min-width: 0;
  color: #0F1B2D;
  font-size: 14.5px;
  font-weight: 900;
  line-height: 1;
}

.achebe-login-sheet .achebe-google-button > strong {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  flex: 0 0 28px;
  border-radius: 999px;
  color: #4285F4;
  background: #FFFFFF;
  box-shadow: 0 4px 10px rgba(13,27,46,.08);
  font-size: 18px;
}

.achebe-google-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 5px;
  min-width: 0;
  padding: 4px 11px 4px 9px;
  border: 1px solid var(--primary-light);
  border-radius: 999px;
  color: var(--primary);
  background: #FFFFFF;
  box-shadow: 0 3px 8px rgba(46,134,208,.16);
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: .02em;
  line-height: 1;
  white-space: nowrap;
}

.achebe-login-sheet .login-divider {
  gap: 14px;
  margin: 20px 0;
}

.achebe-login-sheet .login-divider span {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, #E7EEF6);
}

.achebe-login-sheet .login-divider span:last-child {
  background: linear-gradient(90deg, #E7EEF6, transparent);
}

.achebe-login-sheet .login-divider em {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #FFFFFF;
  background: linear-gradient(135deg, var(--primary-light), var(--primary));
  box-shadow: 0 6px 14px rgba(46,134,208,.35);
  font-size: 12.5px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: .06em;
  line-height: 1;
  text-transform: uppercase;
}

.achebe-invite-card.referral-box {
  width: 100%;
  display: block;
  margin-top: 18px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 20px;
  background: linear-gradient(150deg, var(--primary-light) 0%, var(--primary) 58%, #1F6FB8 100%);
  box-shadow: 0 18px 32px rgba(46,134,208,.34);
}

.achebe-invite-card.referral-box.is-active-invite {
  background: linear-gradient(150deg, var(--primary-light) 0%, var(--primary) 58%, #1F6FB8 100%);
}

.achebe-invite-card.referral-box > div {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 15px 16px 13px;
}

.achebe-invite-card.referral-box > div > span {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #FFFFFF;
  background: rgba(255,255,255,.18);
}

.achebe-invite-card.referral-box p {
  margin: 0;
}

.achebe-invite-card.referral-box strong,
.achebe-invite-card.referral-box small {
  color: #FFFFFF;
}

.achebe-invite-card.referral-box > div small,
.achebe-invite-card .login-referral-top small {
  color: rgba(255,255,255,.82);
}

.achebe-invite-card.referral-box > button {
  margin: 0 16px 15px;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  color: #1F8A5B;
  background: #FFFFFF;
  font-size: 13px;
  font-weight: 900;
}

.achebe-referral-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin: 0 16px 15px;
  padding: 11px 13px;
  border: 1px dashed rgba(255,255,255,.42);
  border-radius: 13px;
  background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.08));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}

.achebe-referral-entry input {
  width: 100%;
  min-width: 0;
  height: 32px;
  border: 0;
  outline: none;
  border-radius: 0;
  padding: 0;
  color: #FFFFFF;
  background: transparent;
  box-shadow: none;
  font: 900 15px/1 "Schibsted Grotesk", system-ui, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.achebe-referral-entry input::placeholder {
  color: rgba(255,255,255,.72);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.achebe-referral-entry button {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 12px;
  border: 0;
  border-radius: 999px;
  color: #1F8A5B;
  background: #FFFFFF;
  font-size: 12px;
  font-weight: 900;
  box-shadow: none;
}

.achebe-invite-card.referral-box .achebe-referral-entry button {
  height: auto;
  min-height: 30px;
  padding: 5px 12px;
  border-radius: 999px;
  color: #1F8A5B;
  background: #FFFFFF;
  font-size: 12px;
  font-weight: 900;
}

.achebe-referral-entry button:active,
.achebe-invite-card.referral-box .achebe-invite-code-row button:active {
  transform: translateY(1px);
}

.achebe-invite-card.referral-box .achebe-invite-code-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin: 0 16px;
  padding: 11px 13px;
  border: 1px dashed rgba(255,255,255,.44);
  border-radius: 13px;
  background: rgba(255,255,255,.12);
}

.achebe-invite-card.referral-box .achebe-invite-code-row strong {
  height: auto;
  display: block;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: #FFFFFF;
  background: transparent;
  box-shadow: none;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 19px;
  line-height: 1.08;
  font-weight: 950;
  letter-spacing: .08em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.achebe-invite-card.referral-box .achebe-invite-code-row strong small {
  display: block;
  margin-bottom: 3px;
  color: rgba(255,255,255,.72);
  font-family: "Schibsted Grotesk", system-ui, sans-serif;
  font-size: 9.5px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .14em;
}

.achebe-invite-card.referral-box .achebe-invite-code-row button {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 5px 11px 5px 9px;
  border: 0;
  border-radius: 999px;
  color: #1F8A5B;
  background: #FFFFFF;
  font-size: 12px;
  font-weight: 900;
}

.achebe-wallet-note {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0;
  padding: 13px 16px 15px;
  color: rgba(255,255,255,.9);
  font-size: 12px;
  line-height: 1.4;
}

.achebe-wallet-note > span {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #FFFFFF;
  background: rgba(255,255,255,.18);
}

.achebe-wallet-note b {
  color: #FFFFFF;
  font-weight: 900;
}

.achebe-login-sheet .login-terms {
  margin-top: 20px;
  padding: 0 8px;
}

.login-message[data-login-message] {
  min-height: 18px;
  margin: 12px 2px -2px;
  color: #5B6B7F;
  font-size: 12px;
  line-height: 1.4;
  font-weight: 800;
}

html[data-active-screen="login"],
html[data-active-screen="login"] body {
  background: #FFFFFF;
}

html[data-active-screen="login"] .phone {
  width: 100vw;
  max-width: none;
  min-height: 100vh;
  min-height: 100svh;
  border: 0;
  border-radius: 0;
  background: #FFFFFF;
  box-shadow: none;
}

html[data-active-screen="login"] .screen {
  width: 100%;
  height: 100vh;
  height: 100svh;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: #FFFFFF;
}

html[data-active-screen="login"] .content {
  padding: 0 !important;
  gap: 0;
  background: #FFFFFF;
}

html[data-active-screen="login"] .achebe-login-screen.login-screen {
  width: 100%;
  min-height: 100%;
  border-radius: 0 !important;
}

html[data-active-screen="login"] .achebe-login-scroll.login-scroll {
  min-height: 100vh;
  min-height: 100svh;
}

html[data-active-screen="enter-user"] .screen {
  width: 100%;
  height: 100vh;
  height: 100svh;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: #EEF3F9;
}

html[data-active-screen="enter-user"] .content {
  padding: 0 !important;
  gap: 0;
  background: #EEF3F9;
}

html[data-active-screen="enter-user"] .user-flow-screen.login-screen {
  width: 100%;
  max-width: none;
  min-height: 100%;
  border-radius: 0 !important;
}

html[data-active-screen="enter-user"] .user-flow-screen .login-scroll {
  min-height: 100vh;
  min-height: 100svh;
}

html[data-active-screen="user-congrats"],
html[data-active-screen="user-congrats"] body,
html[data-active-screen="welcome-back"],
html[data-active-screen="welcome-back"] body,
html[data-active-screen="referral-reward"],
html[data-active-screen="referral-reward"] body,
html[data-active-screen="referral-sorry"],
html[data-active-screen="referral-sorry"] body,
html[data-active-screen="referral-switch"],
html[data-active-screen="referral-switch"] body {
  background: var(--primary);
}

html[data-active-screen="user-congrats"] .phone,
html[data-active-screen="welcome-back"] .phone,
html[data-active-screen="referral-reward"] .phone,
html[data-active-screen="referral-sorry"] .phone,
html[data-active-screen="referral-switch"] .phone {
  width: 100vw;
  max-width: none;
  min-height: 100vh;
  min-height: 100svh;
  border: 0;
  border-radius: 0;
  background: var(--primary);
  box-shadow: none;
}

html[data-active-screen="user-congrats"] .screen,
html[data-active-screen="welcome-back"] .screen,
html[data-active-screen="referral-reward"] .screen,
html[data-active-screen="referral-sorry"] .screen,
html[data-active-screen="referral-switch"] .screen {
  width: 100%;
  height: 100vh;
  height: 100svh;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: var(--primary);
}

html[data-active-screen="user-congrats"] .content,
html[data-active-screen="welcome-back"] .content,
html[data-active-screen="referral-reward"] .content,
html[data-active-screen="referral-sorry"] .content,
html[data-active-screen="referral-switch"] .content {
  padding: 0 !important;
  gap: 0;
  background: var(--primary);
}

html[data-active-screen="user-congrats"] .user-flow-screen.login-screen,
html[data-active-screen="welcome-back"] .user-flow-screen.login-screen,
html[data-active-screen="referral-reward"] .user-flow-screen.login-screen,
html[data-active-screen="referral-sorry"] .user-flow-screen.login-screen,
html[data-active-screen="referral-switch"] .user-flow-screen.login-screen {
  width: 100%;
  max-width: none;
  min-height: 100%;
  border-radius: 0 !important;
  background: var(--primary);
}

html[data-active-screen="user-congrats"] .user-flow-screen .login-scroll,
html[data-active-screen="welcome-back"] .user-flow-screen .login-scroll,
html[data-active-screen="referral-reward"] .user-flow-screen .login-scroll,
html[data-active-screen="referral-sorry"] .user-flow-screen .login-scroll,
html[data-active-screen="referral-switch"] .user-flow-screen .login-scroll {
  min-height: 100vh;
  min-height: 100svh;
}

[data-screen="referral-reward"].user-flow-screen.login-screen {
  overflow: hidden;
  background: linear-gradient(165deg, var(--primary-light) 0%, var(--primary) 55%, #1F6FB8 100%);
}

[data-screen="referral-reward"] .login-scroll.user-gradient-screen {
  min-height: 100%;
  background:
    radial-gradient(circle at 88% 12%, rgba(255,255,255,.16) 0 96px, transparent 97px),
    radial-gradient(circle at 8% 56%, rgba(255,255,255,.10) 0 80px, transparent 81px),
    linear-gradient(165deg, var(--primary-light) 0%, var(--primary) 55%, #1F6FB8 100%);
}

.reward-confetti {
  position: absolute;
  z-index: 1;
  display: block;
  pointer-events: none;
}

.reward-confetti.is-one {
  left: 60px;
  top: 110px;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #FBE9A6;
}

.reward-confetti.is-two {
  right: 70px;
  top: 150px;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #FFFFFF;
}

.reward-confetti.is-three {
  left: 100px;
  top: 200px;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: #FBE9A6;
  transform: rotate(20deg);
}

.reward-confetti.is-four {
  right: 110px;
  top: 250px;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: rgba(255,255,255,.7);
  transform: rotate(-15deg);
}

.reward-confetti.is-five {
  left: 44px;
  bottom: 230px;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #FBE9A6;
}

.reward-content.user-gradient-content {
  position: relative;
  z-index: 2;
  padding: 24px 34px;
}

.reward-joined-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  max-width: 100%;
  margin-bottom: 24px;
  padding: 8px 15px;
  border-radius: 999px;
  color: #FFFFFF;
  background: rgba(255,255,255,.16);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .02em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}

.reward-joined-pill span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reward-coin-badge {
  position: relative;
  width: 170px;
  height: 170px;
  display: grid;
  place-items: center;
}

.reward-coin-badge::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
}

.reward-coin-badge::after {
  content: "";
  position: absolute;
  inset: 20px;
  border: 1px dashed rgba(255,255,255,.3);
  border-radius: 999px;
}

.reward-coin-inner {
  position: relative;
  z-index: 1;
  width: 104px;
  height: 104px;
  display: grid;
  place-items: center;
  border: 4px solid rgba(255,255,255,.6);
  border-radius: 999px;
  background: #FFFFFF;
  box-shadow: 0 20px 40px rgba(13,27,46,.3);
}

.reward-coin-inner span {
  background: linear-gradient(180deg,#FBE9A6 0%,#E9C766 34%,#C9972F 66%,#F4DE95 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: #C9972F;
  -webkit-text-fill-color: transparent;
  font-size: 38px;
  font-weight: 800;
}

.reward-check {
  position: absolute;
  right: 14px;
  bottom: 6px;
  z-index: 2;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 4px solid #FFFFFF;
  border-radius: 999px;
  color: #FFFFFF;
  background: #22C55E;
}

.reward-check svg {
  stroke-width: 3.5;
}

.referral-reward-screen .reward-title {
  margin: 26px 0 0;
  color: #FFFFFF;
  font-size: 27px;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: 0;
}

.referral-reward-screen .reward-copy {
  max-width: 290px;
  margin: 12px auto 0;
  color: rgba(255,255,255,.9);
  font-size: 14px;
  line-height: 1.55;
}

.reward-badges {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 6px;
  margin-top: 26px;
}

.reward-badges span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  padding: 8px 9px;
  border-radius: 999px;
  color: #FFFFFF;
  background: rgba(255,255,255,.16);
  font-size: 11.5px;
  font-weight: 800;
  white-space: nowrap;
}

.reward-badges svg {
  width: 14px !important;
  height: 14px !important;
}

.reward-footer.user-gradient-footer {
  position: relative;
  z-index: 2;
  padding: 20px 24px 26px;
}

.referral-sorry-screen.login-screen {
  overflow: hidden;
  background: linear-gradient(165deg, #61CAE7 0%, #2FA7D4 52%, #1E6FB1 100%);
}

.referral-sorry-screen .user-gradient-screen {
  min-height: 100%;
  background:
    radial-gradient(circle at 86% 13%, rgba(255,255,255,.18) 0 92px, transparent 93px),
    radial-gradient(circle at 10% 58%, rgba(255,255,255,.11) 0 82px, transparent 83px),
    linear-gradient(165deg, #61CAE7 0%, #2FA7D4 52%, #1E6FB1 100%);
}

.referral-sorry-content.user-gradient-content {
  position: relative;
  z-index: 2;
  justify-content: center;
  padding: 30px 26px 18px;
}

.referral-sorry-icon {
  width: 104px;
  height: 104px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 32px;
  color: #FFFFFF;
  background: rgba(13,27,46,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 24px 48px rgba(13,27,46,.24);
}

.referral-sorry-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  max-width: min(100%, 310px);
  margin-bottom: 14px;
  padding: 8px 14px;
  border-radius: 999px;
  color: #FFFFFF;
  background: rgba(255,255,255,.17);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .02em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
}

.referral-sorry-pill span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.referral-sorry-screen h2 {
  max-width: 320px;
  margin: 0 auto;
  color: #FFFFFF;
  font-size: 30px;
  line-height: 1.06;
  font-weight: 950;
  letter-spacing: 0;
}

.referral-sorry-screen p {
  max-width: 318px;
  margin: 14px auto 0;
  color: rgba(255,255,255,.9);
  font-size: 14px;
  line-height: 1.55;
}

.referral-sorry-reason {
  width: min(100%, 318px);
  margin: 20px auto 0;
  padding: 16px 17px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 22px;
  color: #FFFFFF;
  background: rgba(13,27,46,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
  text-align: left;
}

.referral-sorry-reason small {
  display: block;
  color: rgba(255,255,255,.72);
  font-size: 10.5px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.referral-sorry-reason strong {
  display: block;
  margin-top: 7px;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 850;
  line-height: 1.45;
}

.referral-sorry-footer.user-gradient-footer {
  position: relative;
  z-index: 2;
  padding: 18px 24px 26px;
}

.referral-switch-screen.login-screen {
  overflow: hidden;
  background: linear-gradient(165deg, var(--primary-light) 0%, var(--primary) 55%, #1F6FB8 100%);
}

.referral-switch-screen .user-gradient-screen {
  min-height: 100%;
  background:
    radial-gradient(circle at 88% 12%, rgba(255,255,255,.16) 0 96px, transparent 97px),
    radial-gradient(circle at 6% 58%, rgba(255,255,255,.12) 0 84px, transparent 85px),
    linear-gradient(165deg, var(--primary-light) 0%, var(--primary) 55%, #1F6FB8 100%);
}

.referral-switch-content.user-gradient-content {
  position: relative;
  z-index: 2;
  justify-content: center;
  padding: 30px 26px 18px;
}

.referral-switch-icon {
  width: 98px;
  height: 98px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 30px;
  color: #FFFFFF;
  background: rgba(255,255,255,.17);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 22px 44px rgba(13,27,46,.22);
}

.referral-switch-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 14px;
  padding: 8px 14px;
  border-radius: 999px;
  color: #FFFFFF;
  background: rgba(13,27,46,.18);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .02em;
}

.referral-switch-screen h2 {
  max-width: 310px;
  margin: 0 auto;
  color: #FFFFFF;
  font-size: 30px;
  line-height: 1.05;
  font-weight: 950;
  letter-spacing: 0;
}

.referral-switch-screen p {
  max-width: 315px;
  margin: 14px auto 0;
  color: rgba(255,255,255,.9);
  font-size: 14px;
  line-height: 1.5;
}

.referral-switch-card,
.referral-switch-code {
  width: min(100%, 310px);
  margin: 18px auto 0;
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 22px;
  color: #FFFFFF;
  background: rgba(255,255,255,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
}

.referral-switch-card small,
.referral-switch-code small {
  display: block;
  color: rgba(255,255,255,.76);
  font-size: 10.5px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.referral-switch-card strong {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.referral-switch-code {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
}

.referral-switch-code strong {
  display: block;
  margin-top: 3px;
  color: #FFFFFF;
  font-size: 18px;
  font-weight: 950;
  letter-spacing: .08em;
}

.referral-switch-code em {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 34px;
  padding: 7px 10px;
  border-radius: 999px;
  color: #173B56;
  background: #FFFFFF;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.referral-switch-code b {
  color: #0F91C8;
}

.referral-switch-footer.user-gradient-footer {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: 18px 24px 26px;
}

.referral-switch-shopping {
  order: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 66px !important;
  margin: 0 !important;
  border-radius: 18px;
  font-size: 18px;
  font-weight: 950;
  box-shadow: 0 18px 36px rgba(13,27,46,.3) !important;
}

.referral-switch-proceed {
  order: 2;
  min-height: 38px;
  margin: 0;
}

.referral-switch-screen.is-own-invite .referral-switch-icon {
  background: rgba(255,255,255,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 22px 44px rgba(13,27,46,.24);
}

.referral-switch-screen.is-own-invite .referral-switch-pill {
  color: #173B56;
  background: #FFFFFF;
}

.referral-switch-screen:not(.is-own-invite) .referral-switch-proceed {
  order: 1;
  width: 100%;
  min-height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 16px;
  color: var(--primary);
  background: #FFFFFF;
  font-size: 14px;
  font-weight: 900;
  box-shadow: 0 14px 30px rgba(13,27,46,.24);
}

.referral-switch-screen:not(.is-own-invite) .referral-switch-shopping {
  order: 2;
  min-height: 38px !important;
  color: rgba(255,255,255,.88) !important;
  background: transparent !important;
  font-size: 13px;
  font-weight: 750;
  box-shadow: none !important;
}

/* Checkout screen copied from Music test design */
.achebe-checkout-screen {
  background: linear-gradient(180deg,#F3F8FE 0%,#EEF3F9 240px);
}

.achebe-checkout-screen.detail-screen {
  max-width: none;
  margin-right: 0;
  margin-left: 0;
}

.achebe-checkout-screen .checkout-head {
  padding: 18px 16px 16px;
  gap: 13px;
  border-bottom: 1px solid #EEF3F9;
  background: #fff;
  box-shadow: 0 4px 14px rgba(13,27,46,.03);
}

.achebe-checkout-screen .checkout-head .back-button {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(140deg,var(--primary-light),var(--primary));
  box-shadow: 0 8px 18px rgba(46,134,208,.4), inset 0 1px 0 rgba(255,255,255,.35);
}

.achebe-checkout-screen .checkout-title {
  font-size: 21px;
  letter-spacing: -.4px;
}

.achebe-checkout-screen .checkout-progress-row {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 8px;
}

.achebe-checkout-screen .checkout-progress-bars {
  width: 62px;
  flex: 0 0 62px;
  display: flex;
  gap: 4px;
}

.achebe-checkout-screen .checkout-progress-bars i {
  flex: 1;
  height: 5px;
  border-radius: 999px;
  background: #E3ECF5;
}

.achebe-checkout-screen .checkout-progress-bars i:first-child {
  background: linear-gradient(90deg,var(--primary-light),var(--primary));
  box-shadow: 0 2px 5px rgba(46,134,208,.35);
}

.achebe-checkout-screen .checkout-progress-row > span:last-child {
  color: var(--primary);
  font-size: 10.5px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .01em;
  white-space: nowrap;
}

.achebe-checkout-screen .secure-pill {
  height: 34px;
  padding: 0 10px;
  color: var(--primary);
  border: 1px solid #D3E5F6;
  background: linear-gradient(135deg,#F4F9FF,#E9F2FC);
  box-shadow: none;
  font-size: 10.5px;
}

.achebe-checkout-screen .checkout-stepper {
  display: none;
}

.achebe-checkout-screen .checkout-scroll {
  padding: 8px 16px 10px;
  gap: 10px;
}

.achebe-checkout-screen .checkout-main-column {
  gap: 10px;
}

.achebe-checkout-screen .checkout-step-title {
  margin-bottom: 8px;
  gap: 9px;
}

.achebe-checkout-screen .checkout-step-title.is-card {
  margin: 0;
}

.achebe-checkout-screen .checkout-step-title > span,
.achebe-checkout-screen .checkout-step-title > div > span {
  width: 22px;
  height: 22px;
  flex-basis: 22px;
  color: #fff;
  background: var(--primary);
  font-size: 11px;
}

.achebe-checkout-screen .checkout-step-title strong {
  font-size: 15px;
}

.achebe-checkout-screen .checkout-card-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
}

.achebe-checkout-screen .checkout-card-title-row em {
  flex: 0 0 auto;
  padding: 3px 9px;
  border-radius: 7px;
  color: #C77E12;
  background: #FDF1DA;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}

.achebe-checkout-screen .checkout-section-title {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
}

.achebe-checkout-screen .checkout-section-title > span {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: var(--primary);
  background: var(--primary-tint);
}

.achebe-checkout-screen .checkout-section-title strong {
  color: var(--ink);
  font-size: 17px;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -.2px;
}

.achebe-checkout-screen .checkout-card-title-row.is-summary {
  margin-bottom: 12px;
}

.achebe-checkout-screen .checkout-card-title-row.is-summary em {
  color: var(--primary);
  background: var(--primary-tint);
  font-size: 11.5px;
  border-radius: 999px;
}

.achebe-checkout-screen .checkout-step-title.is-between {
  margin-bottom: 10px;
}

.achebe-checkout-screen .checkout-step-title.is-between em {
  color: var(--primary);
  background: var(--primary-tint);
}

.achebe-checkout-screen .checkout-address-card,
.achebe-checkout-screen .checkout-payment-card,
.achebe-checkout-screen .checkout-review-card {
  border-color: #EAF0F7;
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(13,27,46,.05);
}

.achebe-checkout-screen .checkout-address-card,
.achebe-checkout-screen .checkout-payment-card {
  gap: 0;
  padding: 14px;
}

.achebe-checkout-screen .checkout-address-card .checkout-card-title-row {
  padding-bottom: 10px;
  border-bottom: 1px solid #EEF4FA;
  margin-bottom: 11px;
}

.achebe-checkout-screen .checkout-address-card .checkout-card-title-row em {
  color: #087EA4;
  background: #ECFAFF;
  border: 1px solid #CDEEF8;
  border-radius: 999px;
}

.achebe-checkout-screen .checkout-payment-card .checkout-card-title-row {
  margin-bottom: 12px;
}

.achebe-checkout-screen .checkout-card-kicker em {
  color: #C77E12;
  background: #FDF1DA;
}

.achebe-checkout-screen .checkout-selected-address {
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  padding: 12px;
  border: 1px solid #DCECF6;
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(240, 250, 255, .96), rgba(255, 255, 255, .98)),
    #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 8px 18px rgba(13,27,46,.05);
}

.achebe-checkout-screen .checkout-selected-address > span {
  width: 40px;
  height: 40px;
  flex-basis: 40px;
  border-radius: 13px;
  box-shadow: 0 8px 16px rgba(46,134,208,.18);
}

.achebe-checkout-screen .checkout-selected-address div {
  min-width: 0;
}

.achebe-checkout-screen .checkout-selected-address strong {
  color: #13283F;
  font-size: 14.5px;
  line-height: 1.15;
}

.achebe-checkout-screen .checkout-selected-address small {
  max-width: none;
  margin-top: 4px;
  color: #607187;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 750;
}

.achebe-checkout-screen .checkout-selected-address p {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed #D7E6F2;
  color: #42566E;
  font-size: 12.5px;
  line-height: 1.45;
  font-weight: 700;
}

.achebe-checkout-screen .checkout-selected-address button {
  align-self: start;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid #CAEAF7;
  color: #087EA4;
  background: #F1FBFF;
  box-shadow: none;
}

.achebe-checkout-screen .checkout-address-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.achebe-checkout-screen .checkout-address-actions button {
  width: 100%;
  height: 44px;
  justify-content: center;
  border: 0;
  border-radius: 13px;
  color: #fff;
  background: linear-gradient(135deg,var(--primary-light),var(--primary));
  box-shadow: 0 8px 18px rgba(46,134,208,.4);
}

.achebe-checkout-screen .checkout-address-actions.is-empty-actions {
  grid-column: 1 / -1;
  width: 100%;
  margin-top: 2px;
}

.achebe-checkout-screen .checkout-payment-card {
  position: relative;
  border: 1px solid #EAF0F7;
  box-shadow: 0 8px 20px rgba(13,27,46,.05);
}

.achebe-checkout-screen .checkout-pay-option {
  margin-top: 10px;
  padding: 12px;
  border: 1px solid #E5EEF8;
  background: #FFFFFF;
  box-shadow: 0 8px 18px rgba(13,27,46,.04);
  cursor: pointer;
}

.achebe-checkout-screen .checkout-pay-option.is-selected {
  border-color: rgba(80,194,233,.72);
  background: linear-gradient(135deg, rgba(80,194,233,.14), rgba(255,255,255,.96));
  box-shadow: 0 12px 28px rgba(58,174,217,.14);
}

.achebe-checkout-screen .checkout-pay-option.is-disabled {
  cursor: not-allowed;
  opacity: .58;
}

.achebe-checkout-screen .checkout-pay-option div {
  padding-right: 0;
}

.achebe-checkout-screen .checkout-pay-option > span {
  width: 42px;
  height: 42px;
  flex-basis: 42px;
  border-radius: 12px;
  color: #1F8A5B;
  background: #E4F7EE;
}

.achebe-checkout-screen .checkout-pay-option > i,
.achebe-checkout-screen .checkout-pay-option > svg {
  display: block;
  color: var(--primary);
}

.achebe-checkout-screen .checkout-pay-recommended strong em {
  margin-left: 4px;
  color: var(--primary);
  background: transparent;
}

.achebe-checkout-screen .checkout-pay-tags {
  margin-top: 9px;
  padding-left: 55px;
}

.achebe-checkout-screen .checkout-pay-tags span {
  color: var(--primary);
  background: var(--primary-tint);
}

.achebe-checkout-screen .checkout-upi-apps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
  padding-left: 55px;
}

.achebe-checkout-screen .checkout-upi-apps button {
  min-height: 38px;
  border: 1px solid #E5EEF8;
  border-radius: 12px;
  color: #34445A;
  background: #FFFFFF;
  font-weight: 850;
}

.achebe-checkout-screen .checkout-upi-apps button.is-active {
  color: #0B7898;
  border-color: rgba(80,194,233,.65);
  background: rgba(80,194,233,.14);
}

.achebe-checkout-screen .checkout-upi-note {
  display: block;
  margin-top: 8px;
  padding-left: 55px;
  color: #6A778A;
  font-size: 12px;
  font-weight: 750;
}

.achebe-checkout-screen .checkout-review-card {
  gap: 0;
  padding: 14px;
}

.achebe-checkout-screen .checkout-product-row {
  align-items: center;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  padding: 0;
  border: 0;
  background: transparent;
}

.achebe-checkout-screen .checkout-product-row > div {
  min-width: 0;
}

.achebe-checkout-screen .checkout-product-row > strong {
  display: none;
}

.achebe-checkout-screen .checkout-product-row > div > strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.achebe-checkout-screen .checkout-product-thumb {
  position: relative;
  width: 58px;
  height: 58px;
  display: block;
  overflow: hidden;
  border-radius: 13px;
  background: #F2F6FB;
}

.achebe-checkout-screen .checkout-product-thumb img {
  width: 58px;
  height: 58px;
  display: block;
  border-radius: 13px;
}

.achebe-checkout-screen .checkout-product-thumb span {
  position: absolute;
  right: -1px;
  bottom: -1px;
  min-width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border-radius: 8px 0 12px 0;
  color: #fff;
  background: var(--primary);
  font-size: 10px;
  font-weight: 800;
}

.achebe-checkout-screen .checkout-item-price {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin-top: 6px;
  white-space: nowrap;
}

.achebe-checkout-screen .checkout-item-price b {
  color: var(--ink);
  font-size: 15px;
  font-weight: 800;
}

.achebe-checkout-screen .checkout-item-price del {
  color: #A9B6C7;
  font-size: 11.5px;
}

.achebe-checkout-screen .checkout-item-price em {
  color: #1F8A5B;
  font-size: 10.5px;
  font-style: normal;
  font-weight: 800;
}

.achebe-checkout-screen .checkout-price-card {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #F0F4F9;
}

.achebe-checkout-screen .checkout-price-card .split-row + .split-row {
  margin-top: 9px;
}

.achebe-checkout-screen .checkout-wallet-summary.wallet-apply {
  margin-top: 13px;
  padding: 11px 13px;
  border-radius: 13px;
  background: var(--primary-tint);
}

.achebe-checkout-screen .checkout-wallet-summary > span {
  width: 36px;
  height: 36px;
  flex-basis: 36px;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(140deg,var(--primary-light),var(--primary));
}

.achebe-checkout-screen .checkout-total-row {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed #E2E9F1;
}

.achebe-checkout-screen .checkout-total-row strong {
  color: var(--primary);
  font-size: 19px;
}

.achebe-checkout-screen .checkout-footer {
  padding: 12px 16px max(12px, env(safe-area-inset-bottom));
  gap: 14px;
}

.achebe-checkout-screen .checkout-footer strong {
  font-size: 22px;
}

.achebe-checkout-screen .checkout-footer button {
  height: 50px;
  border-radius: 14px;
  font-size: 15px;
  box-shadow: 0 10px 22px rgba(46,134,208,.4);
}

.achebe-checkout-screen .checkout-product-row > img { display: none; }

@media (max-width: 720px) {
  html[data-active-screen="checkout"],
  html[data-active-screen="checkout"] body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

html[data-active-screen="checkout"] .content {
  padding-top: 0;
  padding-right: 0;
  padding-left: 0;
}

  [data-screen="checkout"].screen-view,
  [data-screen="checkout"].screen-view.is-active,
  [data-screen="checkout"].detail-screen,
  .achebe-checkout-screen,
  .achebe-checkout-screen.detail-screen {
    width: 100%;
    max-width: 100%;
    min-height: 100dvh;
    margin: 0;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    border: 0;
    overflow: hidden;
  }

  [data-screen="checkout"].screen-view.is-active {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .achebe-checkout-screen {
    background: #EEF7FE;
  }

  .achebe-checkout-screen .checkout-head {
    flex: 0 0 auto;
    width: 100%;
    margin: 0;
    border-radius: 0;
    padding: max(14px, env(safe-area-inset-top)) 12px 14px;
  }

  .achebe-checkout-screen .checkout-stepper {
    display: none;
  }

  .achebe-checkout-screen .checkout-scroll {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 12px 10px 112px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .achebe-checkout-screen .checkout-main-column,
  .achebe-checkout-screen .checkout-summary-section,
  .achebe-checkout-screen .checkout-address-card,
  .achebe-checkout-screen .checkout-payment-card,
  .achebe-checkout-screen .checkout-review-card,
  .achebe-checkout-screen .checkout-price-card {
    width: 100%;
    max-width: 100%;
  }

  .achebe-checkout-screen .checkout-address-card,
  .achebe-checkout-screen .checkout-payment-card,
  .achebe-checkout-screen .checkout-review-card {
    border-radius: 18px;
  }

  .achebe-checkout-screen .checkout-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    margin: 0;
    border-radius: 20px 20px 0 0;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 -12px 26px rgba(12, 58, 91, .12);
  }
}

@media (max-width: 340px) {
  .achebe-checkout-screen .checkout-head {
    gap: 10px;
    padding-right: 10px;
    padding-left: 10px;
  }

  .achebe-checkout-screen .checkout-title {
    font-size: 19px;
  }

  .achebe-checkout-screen .checkout-progress-row {
    gap: 5px;
  }

  .achebe-checkout-screen .checkout-progress-bars {
    width: 34px;
    flex-basis: 34px;
    gap: 2px;
  }

  .achebe-checkout-screen .checkout-progress-row > span:last-child,
  .achebe-checkout-screen .secure-pill {
    font-size: 9.5px;
  }

  .achebe-checkout-screen .secure-pill {
    padding: 0 8px;
  }
}

/* Wallet screen from the mobile redesign */
.wallet-screen {
  gap: 0;
  overflow: hidden;
  background: linear-gradient(180deg, #F4FAFF 0%, #FFFFFF 52%, #F7FBFF 100%);
}

.wallet-head {
  flex-shrink: 0;
  padding: 16px 11px 12px;
  gap: 12px;
}

.wallet-head > div {
  flex: 1;
  min-width: 0;
}

.wallet-head strong {
  display: block;
  color: var(--ink);
  font-size: 20px;
  line-height: 1.15;
  font-weight: 900;
}

.wallet-head small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.3;
  font-weight: 700;
}

.wallet-history-action {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: grid;
  place-items: center;
  border: 1px solid #DCEBFA;
  border-radius: 14px;
  color: #0A74BB;
  background: #FFFFFF;
  box-shadow: 0 8px 18px rgba(10, 116, 187, .12);
}

.wallet-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 6px 11px calc(92px + env(safe-area-inset-bottom));
  scrollbar-width: none;
}

.wallet-scroll::-webkit-scrollbar {
  display: none;
}

.wallet-balance-card {
  position: relative;
  overflow: hidden;
  padding: 20px;
  border-radius: 22px;
  color: #FFFFFF;
  background:
    radial-gradient(circle at 84% 8%, rgba(255,255,255,.28), transparent 30%),
    linear-gradient(135deg, #50C2E9 0%, #0A74BB 48%, #07528B 100%);
  box-shadow: 0 18px 38px rgba(10, 116, 187, .32);
}

.wallet-balance-card::before,
.wallet-balance-card::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  pointer-events: none;
}

.wallet-balance-card::before {
  right: -40px;
  top: -50px;
  width: 170px;
  height: 170px;
}

.wallet-balance-card::after {
  right: 24px;
  bottom: -46px;
  width: 120px;
  height: 120px;
  background: rgba(255,255,255,.08);
}

.wallet-balance-top,
.wallet-balance-amount,
.wallet-auto-line {
  position: relative;
  z-index: 1;
}

.wallet-balance-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.wallet-balance-top small {
  color: rgba(255,255,255,.86);
  font-size: 11.5px;
  font-weight: 900;
  letter-spacing: .16em;
}

.wallet-balance-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #FFFFFF;
  background: rgba(255,255,255,.18);
}

.wallet-balance-amount {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 14px;
}

.wallet-balance-amount span {
  color: #FFFFFF;
  font-size: clamp(34px, 11vw, 44px);
  line-height: 1;
  font-weight: 900;
}

.wallet-balance-amount em {
  padding: 3px 9px;
  border-radius: 999px;
  color: #FFFFFF;
  background: rgba(255,255,255,.2);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.wallet-auto-line {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 11px;
  color: rgba(255,255,255,.84);
  font-size: 11px;
  line-height: 1.35;
  font-weight: 600;
}

.wallet-add-money,
.wallet-activity {
  min-width: 0;
}

.wallet-add-money h3,
.wallet-section-head h3 {
  margin: 0;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.2;
  font-weight: 900;
}

.wallet-add-money h3 {
  margin-bottom: 11px;
}

.wallet-amount-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.wallet-amount-grid button {
  min-width: 0;
  height: 50px;
  border: 1px solid #DCEBFA;
  border-radius: 13px;
  color: #0B2742;
  background: #FFFFFF;
  font-size: 13px;
  font-weight: 900;
  box-shadow: 0 7px 16px rgba(10, 116, 187, .08);
}

.wallet-amount-grid button:active,
.wallet-amount-grid button:hover {
  border-color: #50C2E9;
  color: #0A74BB;
  background: #EAF8FE;
}

.wallet-add-button {
  width: 100%;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 11px;
  border: 0;
  border-radius: 14px;
  color: #FFFFFF;
  background: linear-gradient(135deg, #50C2E9, #0A74BB);
  box-shadow: 0 12px 22px rgba(10, 116, 187, .28);
  font-size: 15.5px;
  font-weight: 900;
}

.wallet-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 11px;
}

.wallet-section-head button {
  border: 0;
  color: #0A74BB;
  background: transparent;
  font-size: 12.5px;
  font-weight: 900;
}

.wallet-activity-list {
  overflow: hidden;
  padding: 4px 14px;
  border: 1px solid #E2EEF9;
  border-radius: 16px;
  background: #FFFFFF;
  box-shadow: 0 10px 24px rgba(13, 27, 46, .06);
}

.wallet-activity-list article {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 13px 0;
  border-top: 1px solid #EEF5FB;
}

.wallet-activity-list article:first-child {
  border-top: 0;
}

.wallet-activity-list article > span {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #0A74BB;
  background: #EAF8FE;
}

.wallet-activity-list article > span.is-credit {
  color: #168352;
  background: #E7F8EF;
}

.wallet-activity-list div {
  flex: 1;
  min-width: 0;
}

.wallet-activity-list strong {
  display: block;
  overflow: hidden;
  color: var(--ink);
  font-size: 13.5px;
  line-height: 1.25;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wallet-activity-list small {
  display: block;
  overflow: hidden;
  margin-top: 1px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wallet-activity-list em {
  flex: 0 0 auto;
  color: var(--ink);
  font-size: 14px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.wallet-activity-list em.is-credit {
  color: #168352;
}

.wallet-empty-state {
  min-height: 150px;
  display: grid;
  place-items: center;
  gap: 7px;
  padding: 22px;
  text-align: center;
}

.wallet-empty-state > span {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  color: #0A74BB;
  background: #EAF8FE;
}

.wallet-empty-state strong {
  color: var(--ink);
  font-size: 15px;
  font-weight: 900;
}

.wallet-empty-state small {
  max-width: 230px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  font-weight: 700;
}

html[data-theme="dark"] .wallet-screen {
  background: linear-gradient(180deg, #071C2F 0%, #081421 58%, #07111D 100%);
}

html[data-theme="dark"] .wallet-history-action,
html[data-theme="dark"] .wallet-amount-grid button,
html[data-theme="dark"] .wallet-activity-list {
  border-color: rgba(148, 201, 235, .22);
  color: #D8F2FF;
  background: rgba(8, 28, 46, .92);
}

html[data-theme="dark"] .wallet-activity-list article {
  border-top-color: rgba(148, 201, 235, .16);
}

html[data-theme="dark"] .wallet-empty-state > span,
html[data-theme="dark"] .wallet-activity-list article > span {
  background: rgba(80, 194, 233, .16);
}

/* Desktop/tablet presentation layer. Keep mobile rules untouched above. */
@media (min-width: 721px) {
  html,
  body {
    width: 100%;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }

  body {
    align-items: flex-start;
    flex-direction: column;
    padding: 22px;
    background:
      radial-gradient(circle at 12% 0%, rgba(80, 194, 233, .18), transparent 30%),
      radial-gradient(circle at 88% 4%, rgba(58, 174, 217, .16), transparent 28%),
      linear-gradient(180deg, #F4FAFF 0%, #E7EEF7 100%);
  }

  .phone,
  html[data-active-screen="login"] .phone,
  html[data-active-screen="user-congrats"] .phone,
  html[data-active-screen="welcome-back"] .phone,
  html[data-active-screen="referral-reward"] .phone,
  html[data-active-screen="referral-sorry"] .phone,
  html[data-active-screen="referral-switch"] .phone {
    flex: 0 0 auto;
    width: min(1180px, calc(100vw - 44px));
    max-width: none;
    min-height: 0;
    border: 1px solid rgba(196, 214, 230, .9);
    border-radius: 24px;
    background: #FFFFFF;
    box-shadow: 0 34px 90px -46px rgba(13, 27, 46, .55), 0 14px 34px rgba(13, 27, 46, .11);
  }

  .screen,
  html[data-active-screen="login"] .screen,
  html[data-active-screen="enter-user"] .screen,
  html[data-active-screen="user-congrats"] .screen,
  html[data-active-screen="welcome-back"] .screen,
  html[data-active-screen="referral-reward"] .screen,
  html[data-active-screen="referral-sorry"] .screen,
  html[data-active-screen="referral-switch"] .screen {
    height: auto;
    min-height: calc(100vh - 44px);
    border-radius: 24px;
    overflow: hidden;
    background: linear-gradient(180deg, #F5FAFF 0%, #EEF3F9 260px, #F7FAFE 100%);
  }

  .content,
  [data-screen-type="detail"] .content,
  html[data-active-screen="login"] .content,
  html[data-active-screen="enter-user"] .content,
  html[data-active-screen="user-congrats"] .content,
  html[data-active-screen="welcome-back"] .content,
  html[data-active-screen="referral-reward"] .content,
  html[data-active-screen="referral-sorry"] .content,
  html[data-active-screen="referral-switch"] .content {
    min-height: calc(100vh - 44px);
    overflow: visible;
    gap: 0;
    padding: 0 !important;
    background: transparent;
  }

  [data-screen-type="detail"] .app-header {
    display: flex;
  }

  .tab-bar,
  .refer-float,
  .whatsapp-float,
  .install-app-nudge {
    display: none !important;
  }

  .app-header {
    position: sticky;
    top: 0;
    z-index: 60;
    min-height: 74px;
    padding: 0 26px;
    border-bottom: 1px solid rgba(223, 233, 243, .95);
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 10px 26px rgba(13, 27, 46, .045);
    backdrop-filter: blur(18px);
  }

  .logo {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
    border-radius: 15px;
  }

  .title {
    font-size: 21px;
  }

  .subtitle {
    font-size: 12.5px;
  }

  .desktop-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0 18px;
  }

  .desktop-nav .tab {
    min-height: 40px;
    min-width: 0;
    padding: 0 12px;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: #52657E;
    background: transparent;
    font-size: 13px;
    font-weight: 850;
    line-height: 1;
  }

  .desktop-nav .tab-icon {
    display: none;
  }

  .desktop-nav .tab.is-active {
    color: #FFFFFF;
    background: linear-gradient(135deg, #50C2E9, #2E86D0);
    box-shadow: 0 10px 22px rgba(46, 134, 208, .26);
  }

  .header-actions {
    flex: 0 0 auto;
  }

  .screen-view {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding: 28px;
    gap: 22px;
  }

  .screen-view.is-active {
    display: flex;
  }

  [data-screen="home"].screen-view,
  [data-screen="product"].screen-view {
    max-width: none;
  }

  .home-search,
  .product-search-wrap {
    width: min(760px, 100%);
    max-width: 760px;
    margin: 0 auto;
  }

  .new-search-suggestions {
    left: 0;
    right: 0;
    z-index: 80;
    max-height: min(420px, calc(100vh - 170px));
  }

  .home-chip-grid {
    justify-content: center;
    overflow: visible;
  }

  .home-chip {
    flex: 0 0 auto;
    min-width: 132px;
  }

  .home-promo-slot {
    width: min(100%, 1180px);
    margin-inline: auto;
  }

  .home-banner-carousel,
  .home-static-offer-banner {
    border-radius: 24px;
  }

  .home-customer-celebration {
    width: min(100%, 1180px);
    margin-inline: auto;
    grid-template-columns: minmax(0, 1fr) minmax(230px, .42fr);
    align-items: center;
    padding: 24px;
    border-radius: 24px;
  }

  .home-customer-celebration-top {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .home-customer-celebration h2 {
    font-size: clamp(28px, 3vw, 44px);
    line-height: 1.04;
  }

  .home-celebration-points {
    grid-template-columns: 1fr;
  }

  .home-celebration-action {
    grid-column: 2;
    align-self: end;
  }

  .home-section-head,
  .home-category-grid,
  .home-best-rail,
  .home-footer-tags,
  .home-footer-line,
  .home-footer-copy {
    width: min(100%, 1180px);
    margin-inline: auto;
  }

  .home-best-rail {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    overflow: visible;
  }

  .home-best-card {
    min-width: 0;
  }

  .home-best-image {
    height: 190px;
  }

  .home-category-grid,
  .product-subcats {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
  }

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

  .home-footer-copy {
    padding-bottom: 18px;
  }

  .product-heading,
  .product-filter-row,
  .product-grid,
  .product-load-more {
    width: min(100%, 1180px);
    margin-inline: auto;
  }

  .product-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }

  .product-filter-row {
    justify-content: flex-end;
  }

  .product-filter-button,
  .product-sort-button {
    flex: 0 0 auto;
    min-width: 146px;
  }

  .product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-inline: auto;
  }

  .product-card {
    border: 1px solid rgba(226, 239, 249, .95);
    border-radius: 20px;
    box-shadow: 0 16px 34px rgba(13, 27, 46, .08);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  }

  .product-card:hover {
    transform: translateY(-3px);
    border-color: rgba(80, 194, 233, .6);
    box-shadow: 0 24px 46px rgba(13, 27, 46, .12);
  }

  .product-image {
    height: 220px;
  }

  [data-screen="bag"].screen-view.is-active {
    max-width: 1120px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(310px, 360px);
    align-items: start;
    gap: 18px;
    padding-bottom: 120px;
  }

  [data-screen="bag"] .bag-panel,
  [data-screen="bag"] .shipping-nudge {
    grid-column: 1;
  }

  [data-screen="bag"] #orderSummary {
    grid-column: 2;
    grid-row: 1 / span 4;
    position: sticky;
    top: 94px;
  }

  [data-screen="bag"] .checkout-block {
    position: fixed;
    right: max(22px, calc((100vw - min(1180px, calc(100vw - 44px))) / 2));
    bottom: 22px;
    left: max(22px, calc((100vw - min(1180px, calc(100vw - 44px))) / 2));
    z-index: 70;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    margin: 0;
    padding: 14px 18px;
    border: 1px solid rgba(226, 239, 249, .95);
    border-radius: 20px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 24px 52px rgba(13, 27, 46, .16);
    backdrop-filter: blur(16px);
  }

  .checkout-button {
    width: min(340px, 38vw);
    justify-self: end;
  }

  .checkout-note {
    justify-self: start;
    margin: 0;
    text-align: left;
  }

  [data-screen="checkout"].screen-view,
  [data-screen="checkout"].screen-view.is-active,
  [data-screen="checkout"].detail-screen,
  .achebe-checkout-screen,
  .achebe-checkout-screen.detail-screen {
    width: 100%;
    max-width: 1120px;
    min-height: auto;
    margin: 0 auto;
    padding: 28px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
  }

  [data-screen="checkout"].screen-view.is-active {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  .achebe-checkout-screen .checkout-head {
    padding: 0 0 16px;
    border-bottom: 0;
    background: transparent;
    box-shadow: none;
  }

  .achebe-checkout-screen .checkout-stepper {
    display: block;
  }

  .achebe-checkout-screen .checkout-scroll {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(310px, 360px);
    align-items: start;
    gap: 18px;
    padding: 0 0 92px;
    overflow: visible;
  }

  .achebe-checkout-screen .checkout-main-column {
    display: contents;
  }

  .achebe-checkout-screen .checkout-address-card,
  .achebe-checkout-screen .checkout-payment-card {
    grid-column: 1;
    padding: 18px;
    border-radius: 20px;
  }

  .achebe-checkout-screen .checkout-review-card {
    grid-column: 2;
    grid-row: 1 / span 4;
    position: sticky;
    top: 94px;
    padding: 18px;
    border-radius: 20px;
  }

  .achebe-checkout-screen .checkout-footer {
    position: fixed;
    right: max(22px, calc((100vw - min(1180px, calc(100vw - 44px))) / 2));
    bottom: 22px;
    left: max(22px, calc((100vw - min(1180px, calc(100vw - 44px))) / 2));
    z-index: 75;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 340px);
    align-items: center;
    margin: 0;
    padding: 14px 18px;
    border: 1px solid rgba(226, 239, 249, .95);
    border-radius: 20px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 24px 52px rgba(13, 27, 46, .16);
    backdrop-filter: blur(16px);
  }

  [data-screen="account"].screen-view.is-active,
  [data-screen="settings"].screen-view.is-active {
    max-width: 1040px;
    display: grid;
    grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
    align-items: start;
  }

  [data-screen="account"] > section,
  [data-screen="settings"] > section {
    min-width: 0;
  }

  [data-screen="account"] .profile-card,
  [data-screen="settings"] .appearance {
    position: sticky;
    top: 94px;
  }

  [data-screen="account"] .account-refer-banner {
    grid-column: 2;
  }

  [data-screen="account"] .logout,
  [data-screen="settings"] .logout {
    grid-column: 2;
  }

  .menu {
    overflow: hidden;
    border: 1px solid rgba(226, 239, 249, .95);
    box-shadow: 0 14px 32px rgba(13, 27, 46, .07);
  }

  .menu-row {
    min-height: 72px;
  }

  .detail-screen,
  .info-screen,
  .wishlist-screen,
  .notify-me-screen,
  .wallet-screen {
    max-width: 940px;
  }

  [data-screen="orders"].screen-view,
  [data-screen="address"].screen-view,
  [data-screen="refer"].screen-view,
  [data-screen="gift"].screen-view,
  [data-screen="wallet"].screen-view,
  [data-screen="wishlist"].screen-view,
  [data-screen="notify"].screen-view,
  [data-screen="profile"].screen-view,
  [data-screen="add-address"].screen-view,
  [data-screen="track-order"].screen-view,
  [data-screen="order-details"].screen-view,
  [data-screen="order-success"].screen-view,
  [data-screen="about"].screen-view,
  [data-screen="contact"].screen-view,
  [data-screen="privacy"].screen-view,
  [data-screen="terms"].screen-view,
  [data-screen="payment-policy"].screen-view,
  [data-screen="refund"].screen-view,
  [data-screen="shipping"].screen-view,
  [data-screen="install"].screen-view {
    max-width: 940px;
    padding: 30px 34px 42px;
  }

  .simple-head {
    min-height: 58px;
    padding-top: 0;
  }

  .filter-chips,
  .share-actions {
    flex-wrap: wrap;
  }

  .order-card,
  .saved-address,
  .detail-card,
  .info-card,
  .gift-buy,
  .wallet-add-money,
  .wallet-activity,
  .address-location-card,
  .address-form-card,
  .save-as,
  .track-card,
  .track-hero {
    border-radius: 20px;
    box-shadow: 0 14px 34px rgba(13, 27, 46, .07);
  }

  [data-screen="orders"].screen-view.is-active {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  [data-screen="orders"] .simple-head,
  [data-screen="orders"] .filter-chips,
  [data-screen="orders"] .orders-empty-state,
  [data-screen="orders"] .detail-footer {
    grid-column: 1 / -1;
  }

  [data-screen="address"].screen-view.is-active,
  [data-screen="gift"].screen-view.is-active,
  [data-screen="track-order"].screen-view.is-active,
  [data-screen="order-details"].screen-view.is-active,
  [data-screen="add-address"].screen-view.is-active {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  [data-screen="address"] .simple-head,
  [data-screen="gift"] .simple-head,
  [data-screen="track-order"] .simple-head,
  [data-screen="order-details"] .simple-head,
  [data-screen="add-address"] .simple-head,
  [data-screen="address"] .detail-footer,
  [data-screen="add-address"] .detail-footer {
    grid-column: 1 / -1;
  }

  [data-screen="profile"].screen-view.is-active {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  [data-screen="profile"] .profile-form,
  [data-screen="profile"] .detail-footer {
    max-width: 720px;
    width: 100%;
    margin-inline: auto;
  }

  [data-screen="refer"].screen-view.is-active {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, .72fr);
  }

  [data-screen="refer"] .simple-head,
  [data-screen="refer"] .referral-hero,
  [data-screen="refer"] .share-actions {
    grid-column: 1 / -1;
  }

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

  .wallet-screen {
    gap: 18px;
  }

  .wallet-scroll {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    align-items: start;
    gap: 18px;
    overflow: visible;
  }

  .wallet-head {
    padding-inline: 0;
  }

  .info-scroll {
    max-width: 820px;
    width: 100%;
    margin-inline: auto;
  }

  .contact-grid,
  .stat-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  [data-screen="product-detail"].screen-view.is-active {
    max-width: none;
    min-height: calc(100vh - 118px);
    margin: 0;
    padding: 0;
    display: flex;
    overflow: hidden;
  }

  .product-detail-scroll {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(380px, .88fr);
    align-items: stretch;
    min-height: calc(100vh - 118px);
    overflow: hidden;
  }

  .pd-hero {
    position: sticky;
    top: 74px;
    height: auto;
    min-height: calc(100vh - 118px);
    flex-basis: auto;
    border-radius: 0;
  }

  .pd-hero > img {
    object-fit: cover;
  }

  .pd-sheet {
    height: calc(100vh - 118px);
    min-height: 0;
    overflow-y: auto;
    margin: 0;
    padding: 34px 34px 124px;
    border-radius: 0;
    background: #F7FAFE;
    scrollbar-width: none;
  }

  .pd-sheet::-webkit-scrollbar {
    display: none;
  }

  .pd-handle {
    display: none;
  }

  .pd-title-block h2 {
    font-size: clamp(27px, 2.5vw, 40px);
    line-height: 1.12;
  }

  .pd-highlights,
  .pd-recommend > section {
    margin-inline: 0;
    padding-inline: 0;
    overflow: visible;
  }

  .pd-highlights {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .pd-recommend > section {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .pd-recommend article {
    flex: 1 1 auto;
  }

  .pd-footer {
    position: absolute;
    right: 0;
    bottom: 0;
    left: auto;
    z-index: 40;
    width: min(560px, 46%);
    margin: 0;
    padding: 16px 34px;
    border: 1px solid rgba(226, 239, 249, .95);
    border-right: 0;
    border-bottom: 0;
    border-radius: 22px 0 0 0;
    box-shadow: 0 -18px 36px rgba(13, 27, 46, .12);
  }

  .login-screen,
  html[data-active-screen="login"] .achebe-login-screen.login-screen,
  html[data-active-screen="enter-user"] .user-flow-screen.login-screen,
  html[data-active-screen="user-congrats"] .user-flow-screen.login-screen,
  html[data-active-screen="welcome-back"] .user-flow-screen.login-screen,
  html[data-active-screen="referral-reward"] .user-flow-screen.login-screen,
  html[data-active-screen="referral-sorry"] .user-flow-screen.login-screen,
  html[data-active-screen="referral-switch"] .user-flow-screen.login-screen {
    width: min(100%, 860px);
    max-width: 860px;
    min-height: auto;
    margin: 38px auto;
    overflow: hidden;
    border-radius: 28px !important;
    box-shadow: 0 24px 60px rgba(13, 27, 46, .16);
  }

  html[data-active-screen="login"] .achebe-login-scroll.login-scroll,
  html[data-active-screen="enter-user"] .user-flow-screen .login-scroll,
  html[data-active-screen="user-congrats"] .user-flow-screen .login-scroll,
  html[data-active-screen="welcome-back"] .user-flow-screen .login-scroll,
  html[data-active-screen="referral-reward"] .user-flow-screen .login-scroll,
  html[data-active-screen="referral-sorry"] .user-flow-screen .login-scroll,
  html[data-active-screen="referral-switch"] .user-flow-screen .login-scroll {
    min-height: min(720px, calc(100vh - 120px));
  }

  .achebe-login-scroll.login-scroll {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(360px, 1fr);
    align-items: stretch;
  }

  .achebe-login-hero.login-hero-panel,
  .user-flow-hero.is-name {
    min-height: 100%;
    border-radius: 0;
  }

  .achebe-login-sheet,
  .enter-user-form {
    align-self: center;
  }
}

@media (min-width: 1024px) {
  body {
    padding: 30px;
  }

  .phone,
  html[data-active-screen="login"] .phone,
  html[data-active-screen="user-congrats"] .phone,
  html[data-active-screen="welcome-back"] .phone,
  html[data-active-screen="referral-reward"] .phone,
  html[data-active-screen="referral-sorry"] .phone,
  html[data-active-screen="referral-switch"] .phone {
    width: min(1360px, calc(100vw - 60px));
  }

  .screen,
  html[data-active-screen="login"] .screen,
  html[data-active-screen="enter-user"] .screen,
  html[data-active-screen="user-congrats"] .screen,
  html[data-active-screen="welcome-back"] .screen,
  html[data-active-screen="referral-reward"] .screen,
  html[data-active-screen="referral-sorry"] .screen,
  html[data-active-screen="referral-switch"] .screen,
  .content,
  [data-screen-type="detail"] .content,
  html[data-active-screen="login"] .content,
  html[data-active-screen="enter-user"] .content,
  html[data-active-screen="user-congrats"] .content,
  html[data-active-screen="welcome-back"] .content,
  html[data-active-screen="referral-reward"] .content,
  html[data-active-screen="referral-sorry"] .content,
  html[data-active-screen="referral-switch"] .content {
    min-height: calc(100vh - 60px);
  }

  .app-header {
    min-height: 78px;
    padding-inline: 34px;
  }

  .desktop-nav {
    gap: 8px;
    margin-inline: 28px;
  }

  .desktop-nav .tab {
    min-height: 42px;
    padding-inline: 16px;
    font-size: 14px;
  }

  .screen-view {
    max-width: 1240px;
    padding: 34px;
  }

  .home-promo-slot,
  .home-customer-celebration,
  .home-section-head,
  .home-category-grid,
  .home-best-rail,
  .home-footer-tags,
  .home-footer-line,
  .home-footer-copy,
  .product-heading,
  .product-filter-row,
  .product-grid,
  .product-load-more {
    width: min(100%, 1240px);
  }

  .home-best-rail,
  .product-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
  }

  .home-category-grid,
  .product-subcats {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .home-footer-tags {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .product-image {
    height: 232px;
  }

  [data-screen="bag"].screen-view.is-active,
  [data-screen="checkout"].screen-view,
  [data-screen="checkout"].screen-view.is-active,
  [data-screen="checkout"].detail-screen,
  .achebe-checkout-screen,
  .achebe-checkout-screen.detail-screen {
    max-width: 1240px;
  }

  [data-screen="bag"].screen-view.is-active {
    grid-template-columns: minmax(0, 1fr) 390px;
    gap: 24px;
  }

  .achebe-checkout-screen .checkout-scroll {
    grid-template-columns: minmax(0, 1fr) 390px;
    gap: 24px;
  }

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

@media (min-width: 1440px) {
  body {
    padding: 34px 42px;
  }

  .phone,
  html[data-active-screen="login"] .phone,
  html[data-active-screen="user-congrats"] .phone,
  html[data-active-screen="welcome-back"] .phone,
  html[data-active-screen="referral-reward"] .phone,
  html[data-active-screen="referral-sorry"] .phone,
  html[data-active-screen="referral-switch"] .phone {
    width: min(1560px, calc(100vw - 84px));
  }

  .screen-view {
    max-width: 1420px;
    padding: 38px 44px 54px;
  }

  .home-promo-slot,
  .home-customer-celebration,
  .home-section-head,
  .home-category-grid,
  .home-best-rail,
  .home-footer-tags,
  .home-footer-line,
  .home-footer-copy,
  .product-heading,
  .product-filter-row,
  .product-grid,
  .product-load-more {
    width: min(100%, 1420px);
  }

  .home-best-rail,
  .product-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 22px;
  }

  .home-category-grid,
  .product-subcats {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .product-image {
    height: 250px;
  }

  [data-screen="bag"].screen-view.is-active,
  [data-screen="checkout"].screen-view,
  [data-screen="checkout"].screen-view.is-active,
  [data-screen="checkout"].detail-screen,
  .achebe-checkout-screen,
  .achebe-checkout-screen.detail-screen {
    max-width: 1420px;
  }

  [data-screen="bag"].screen-view.is-active {
    grid-template-columns: minmax(0, 1fr) 430px;
  }

  .achebe-checkout-screen .checkout-scroll {
    grid-template-columns: minmax(0, 1fr) 430px;
  }

  .product-detail-scroll {
    grid-template-columns: minmax(0, 1.12fr) minmax(480px, .88fr);
  }

  .pd-footer {
    width: min(660px, 44%);
  }
}

@media (min-width: 1800px) {
  .home-best-rail,
  .product-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

@media (min-width: 721px) and (max-width: 900px) {
  .title-block {
    min-width: 150px;
  }

  .desktop-nav .tab {
    padding-inline: 10px;
    font-size: 12px;
  }

  .wallet-pill {
    display: none;
  }

  .product-grid,
  .home-best-rail {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  [data-screen="bag"].screen-view.is-active,
  .achebe-checkout-screen .checkout-scroll,
  [data-screen="account"].screen-view.is-active,
  [data-screen="settings"].screen-view.is-active,
  [data-screen="orders"].screen-view.is-active,
  [data-screen="address"].screen-view.is-active,
  [data-screen="gift"].screen-view.is-active,
  [data-screen="track-order"].screen-view.is-active,
  [data-screen="order-details"].screen-view.is-active,
  [data-screen="add-address"].screen-view.is-active,
  [data-screen="refer"].screen-view.is-active {
    grid-template-columns: 1fr;
  }

  [data-screen="bag"] #orderSummary,
  .achebe-checkout-screen .checkout-review-card,
  [data-screen="account"] .profile-card,
  [data-screen="settings"] .appearance {
    grid-column: 1;
    position: static;
  }

  [data-screen="account"] .account-refer-banner,
  [data-screen="account"] .logout,
  [data-screen="settings"] .logout {
    grid-column: 1;
  }

  .product-detail-scroll {
    grid-template-columns: minmax(0, .94fr) minmax(360px, 1.06fr);
  }

  .pd-footer {
    width: min(500px, 52%);
    padding-inline: 24px;
  }
}

@media (min-width: 721px) and (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) body,
  html:not([data-theme="light"]) .screen {
    background:
      radial-gradient(circle at 12% 0%, rgba(80, 194, 233, .12), transparent 28%),
      linear-gradient(180deg, #071C2F 0%, #071421 100%);
  }
}

@media (min-width: 721px) {
  html[data-theme="dark"] body,
  html[data-theme="dark"] .screen {
    background:
      radial-gradient(circle at 12% 0%, rgba(80, 194, 233, .12), transparent 28%),
      linear-gradient(180deg, #071C2F 0%, #071421 100%);
  }

  html[data-theme="dark"] .phone,
  html[data-theme="dark"] .app-header,
  html[data-theme="dark"] [data-screen="bag"] .checkout-block,
  html[data-theme="dark"] .achebe-checkout-screen .checkout-footer {
    border-color: rgba(148, 201, 235, .18);
    background: rgba(7, 22, 35, .94);
  }

  html[data-theme="dark"] .product-card,
  html[data-theme="dark"] .menu,
  html[data-theme="dark"] .order-card,
  html[data-theme="dark"] .saved-address,
  html[data-theme="dark"] .detail-card,
  html[data-theme="dark"] .info-card,
  html[data-theme="dark"] .gift-buy,
  html[data-theme="dark"] .wallet-add-money,
  html[data-theme="dark"] .wallet-activity,
  html[data-theme="dark"] .address-location-card,
  html[data-theme="dark"] .address-form-card,
  html[data-theme="dark"] .save-as,
  html[data-theme="dark"] .track-card,
  html[data-theme="dark"] .track-hero,
  html[data-theme="dark"] .achebe-checkout-screen .checkout-address-card,
  html[data-theme="dark"] .achebe-checkout-screen .checkout-payment-card,
  html[data-theme="dark"] .achebe-checkout-screen .checkout-review-card {
    border-color: rgba(148, 201, 235, .18);
    background: rgba(8, 28, 46, .88);
    box-shadow: 0 18px 36px rgba(0, 0, 0, .24);
  }

  html[data-theme="dark"] .pd-sheet {
    background: #071421;
  }
}

@media (min-width: 721px) and (max-width: 899px) {
  [data-screen="settings"].screen-view.is-active {
    max-width: 740px;
  }

  [data-screen="settings"] > section:not(.appearance),
  [data-screen="settings"] > section:nth-of-type(2),
  [data-screen="settings"] > section:nth-of-type(3) {
    grid-column: 1;
    grid-row: auto;
  }

  [data-screen="product-detail"] .pd-hero > img,
  [data-screen="product-detail"] .pd-hero img {
    object-fit: cover;
    object-position: center center;
    padding: 0;
    background: linear-gradient(135deg, #EFFAFF, #FFFFFF);
  }
}