/* YingXi app layout — base: tokens, hiding the theme chrome, top bar, search pill, tab bar, pages, sheets, buttons */
:root {
  --yxa-p: #851b87;
  --yxa-p2: #f4e6f4;
  --yxa-p3: #fbf4fb;
  --yxa-ink: #1d1b24;
  --yxa-mute: #8a8494;
  --yxa-line: #eee9f0;
  --yxa-bg: #f7f5f8;
  --yxa-green: #22a35a;
  --yxa-green2: #e5f6ec;
  --yxa-shadow: 0 2px 12px rgba(48, 22, 60, .07);
  --yxa-font: Urbanist, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
#yxa-root { display: none; }

/* Colour chart (/color-chart/, all screen sizes): no circle frame; the photo is shown whole, and a small script
   (yxa colour chart) scales and centres each one so every balloon appears the same size. */
.yxcc span.c, .yxcc-card span.c { border: 0 !important; border-radius: 0 !important; background: none !important; overflow: hidden !important; }
.yxcc span.c img, .yxcc-card span.c img { object-fit: contain !important; padding: 0 !important; transform: none; transform-origin: 50% 50%; mix-blend-mode: multiply; }

@media (max-width: 1023.98px) {
  html.yxa-on #yxa-root { display: block; }
  html.yxa-on body.yxa2 { background: var(--yxa-bg) !important; padding-bottom: 0 !important; }
  html.yxa-lock, html.yxa-lock body { overflow: hidden !important; }

  /* Theme chrome the app does not have */
  html.yxa-on body.yxa2 > .yx-skip,
  html.yxa-on body.yxa2 > .yxb-preview-banner,
  html.yxa-on body.yxa2 > .yx-top,
  html.yxa-on body.yxa2 > header.yx-header,
  html.yxa-on body.yxa2 > footer,
  html.yxa-on body.yxa2 > .yxb-support-launcher,
  html.yxa-on body.yxa2 .yxm-tabbar,
  html.yxa-on body.yxa2 .yxm-back { display: none !important; }
  /* Redrawn views: only the app is shown */
  html.yxa-on body.yxa2-full > *:not(#yxa-root):not([class*="yxa-"]):not(script):not(style) { display: none !important; }
  html.yxa-fallback.yxa-on body.yxa2.yxa2-full > main#yx-main { display: block !important; }
  html.yxa-on body.yxa2:not(.yxa2-full) > main { padding-bottom: 110px; }

  .yxa-on [class*="yxa-"][hidden], .yxa-on .yxa-pane[hidden] { display: none !important; }

  #yxa-root, .yxa-page, .yxa-sheet, .yxa-tabbar, .yxa-toast, .yxa-buybar {
    font-family: var(--yxa-font) !important;
    color: var(--yxa-ink);
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
  }
  /* Resets kept at class weight so the component rules below win over them */
  .yxa-on :where(#yxa-root, .yxa-page, .yxa-sheet, .yxa-tabbar, .yxa-buybar) * { box-sizing: border-box; }
  .yxa-on :where(#yxa-root, .yxa-page, .yxa-sheet, .yxa-tabbar, .yxa-buybar) :is(button, input, a) {
    font-family: inherit !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    text-decoration: none;
    min-height: 0;
  }
  .yxa-on :where(#yxa-root, .yxa-page, .yxa-sheet) :is(h1, h2, h3, p) { margin: 0; font-family: inherit !important; letter-spacing: normal; text-transform: none; }
  .yxa-on :where(#yxa-root, .yxa-page, .yxa-sheet, .yxa-tabbar, .yxa-buybar, .yxa-toast) svg { width: 20px; height: 20px; flex: none; }
  .yxa-main { padding-bottom: 110px; min-height: 100vh; }

  /* ---------- Top bar ---------- */
  .yxa-top {
    position: sticky; top: 0; z-index: 800;
    display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center;
    height: 58px; padding: 0 10px;
    background: rgba(255, 255, 255, .86);
    -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px);
  }
  .admin-bar .yxa-top { top: 0; }
  .yxa-logo { justify-self: center; display: flex; align-items: center; gap: 8px; height: 58px; text-decoration: none !important; }
  .yxa-logo img { height: 38px; width: auto; display: block; }
  .yxa-logo span { display: flex; flex-direction: column; color: var(--yxa-p); font-size: 21px; font-weight: 800; line-height: 1; letter-spacing: -.01em; }
  .yxa-logo small { margin-top: 2px; color: #b08a3e; font-size: 9.5px; font-weight: 800; letter-spacing: .34em; }
  .yxa-top-title { grid-column: 2; text-align: center; font-size: 18px !important; font-weight: 800 !important; line-height: 1.2; color: var(--yxa-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .yxa-back, .yxa-cartbtn {
    position: relative; display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; padding: 0 !important; border: 0 !important; border-radius: 50%;
    background: transparent !important; color: var(--yxa-p) !important;
  }
  .yxa-back svg { width: 26px; height: 26px; stroke-width: 2.4; }
  .yxa-cartbtn { grid-column: 3; justify-self: end; color: var(--yxa-ink) !important; }
  .yxa-cartbtn svg { width: 26px; height: 26px; }
  .yxa-cart-count {
    position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 9px; background: var(--yxa-p); color: #fff; font-size: 11px; font-weight: 800; line-height: 18px; text-align: center;
  }
  .yxa-top--search { grid-template-columns: 40px minmax(0, 1fr) 44px; gap: 6px; }
  .yxa-top--search .yxa-pill { min-width: 0; margin: 0; height: 42px; grid-column: 2; }

  /* ---------- Search pill ---------- */
  .yxa-pill {
    display: flex; align-items: center; gap: 10px;
    height: 50px; margin: 4px 16px 14px; padding: 0 8px 0 16px;
    border-radius: 25px; background: #f0eef2;
  }
  .yxa-pill > svg { color: var(--yxa-p); width: 22px; height: 22px; }
  .yxa-pill input {
    flex: 1; min-width: 0; height: 100%; padding: 0 !important; margin: 0;
    border: 0 !important; outline: 0; background: transparent !important; box-shadow: none !important;
    font-size: 16px !important; color: var(--yxa-ink); -webkit-appearance: none; appearance: none;
  }
  /* The theme draws a brown focus box on inputs; the pill itself is the field here */
  .yxa-on .yxa-pill input:is(:focus, :focus-visible, :hover) { outline: 0 !important; border: 0 !important; box-shadow: none !important; background: transparent !important; }
  .yxa-pill input::placeholder { color: #9a94a3; }
  .yxa-pill input::-webkit-search-cancel-button { display: none; }
  .yxa-pill-scan, .yxa-pill-x { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0 !important; border: 0 !important; border-radius: 50%; background: transparent !important; color: var(--yxa-p) !important; }
  .yxa-pill-x { background: #e2dfe6 !important; width: 26px; height: 26px; color: #6b6573 !important; margin-right: 6px; }
  .yxa-pill-x svg { width: 14px; height: 14px; }

  /* ---------- Buttons ---------- */
  .yxa-btn {
    display: flex !important; align-items: center; justify-content: center; gap: 8px;
    height: 52px; margin: 12px 16px 0; padding: 0 24px !important;
    border: 2px solid var(--yxa-p) !important; border-radius: 26px !important;
    background: var(--yxa-p) !important; color: #fff !important;
    font-size: 16px !important; font-weight: 700 !important; line-height: 1 !important; text-decoration: none !important;
    box-shadow: 0 6px 16px rgba(133, 27, 135, .25);
  }
  .yxa-btn--ghost { background: transparent !important; color: var(--yxa-p) !important; box-shadow: none; }
  .yxa-round { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: #f4f1f6 !important; color: var(--yxa-ink) !important; }
  .yxa-round svg { width: 19px; height: 19px; }
  .yxa-round.is-on { color: var(--yxa-p) !important; }
  .yxa-round.is-on svg { fill: var(--yxa-p); }

  /* ---------- Bottom tab bar ---------- */
  .yxa-tabbar {
    position: fixed; z-index: 1000; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom));
    display: grid; grid-template-columns: repeat(4, 1fr);
    height: 66px; padding: 0 6px; border-radius: 24px;
    background: #fff; box-shadow: 0 8px 30px rgba(48, 22, 60, .14);
  }
  .yxa-tabbar { transition: transform .28s cubic-bezier(.2, .8, .2, 1), opacity .2s; }
  .yxa-tabbar-hide {
    position: absolute; left: 50%; top: -11px; display: flex; align-items: center; justify-content: center;
    width: 40px; height: 20px; margin-left: -20px; padding: 0 !important; border: 0 !important; border-radius: 10px !important;
    background: #fff !important; color: var(--yxa-mute) !important; box-shadow: 0 -3px 10px rgba(48, 22, 60, .1) !important;
  }
  .yxa-on .yxa-tabbar-hide svg { width: 16px; height: 16px; }
  .yxa-tabbar-show {
    position: fixed; z-index: 1000; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom));
    display: none; align-items: center; justify-content: center; width: 46px; height: 46px;
    padding: 0 !important; border: 0 !important; border-radius: 50% !important;
    background: var(--yxa-p) !important; color: #fff !important; box-shadow: 0 6px 16px rgba(133, 27, 135, .35) !important;
  }
  .yxa-on .yxa-tabbar-show svg { width: 20px; height: 20px; }
  html.yxa-nav-off .yxa-tabbar { transform: translateY(calc(100% + 30px)); opacity: 0; pointer-events: none; }
  html.yxa-nav-off .yxa-tabbar-show { display: flex; }
  html.yxa-nav-off .yxa-buybar { bottom: calc(10px + env(safe-area-inset-bottom)); right: 70px; }
  html.yxa-nav-off .yxa-toast { bottom: calc(76px + env(safe-area-inset-bottom)); }
  .yxa-tab {
    display: flex !important; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px;
    height: 100%; padding: 0 0 10px !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important;
    background: transparent !important; box-shadow: none !important;
    color: var(--yxa-mute) !important; font-size: 11.5px !important; font-weight: 600 !important; line-height: 1.1 !important;
  }
  .yxa-tab-ico { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; transition: transform .2s, background .2s; }
  .yxa-tab-ico svg { width: 24px; height: 24px; }
  .yxa-tab.is-on { color: var(--yxa-p) !important; font-weight: 700 !important; }
  .yxa-tab.is-on .yxa-tab-ico {
    width: 50px; height: 50px; margin: -22px 0 -2px;
    background: var(--yxa-p); color: #fff; box-shadow: 0 6px 16px rgba(133, 27, 135, .35);
    border: 4px solid #fff;
  }

  /* ---------- Full-screen pages (Categories / Search / Account) ---------- */
  .yxa-page {
    position: fixed; z-index: 900; inset: 0;
    display: none; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    background: var(--yxa-bg); padding-bottom: 110px;
  }
  .yxa-page.is-on { display: block; }
  .yxa-page .yxa-top { position: sticky; }

  /* ---------- Bottom sheets ---------- */
  .yxa-shade { position: fixed; z-index: 1100; inset: 0; background: rgba(24, 12, 32, .45); opacity: 0; pointer-events: none; transition: opacity .25s; }
  .yxa-shade.is-on { opacity: 1; pointer-events: auto; }
  .yxa-sheet {
    position: fixed; z-index: 1101; left: 0; right: 0; bottom: 0;
    display: flex; flex-direction: column; max-height: 88vh;
    border-radius: 26px 26px 0 0; background: #fff;
    transform: translateY(105%); transition: transform .3s cubic-bezier(.2, .8, .2, 1);
  }
  .yxa-sheet.is-on { transform: none; }
  .yxa-sheet-handle { width: 42px; height: 5px; margin: 9px auto 4px; border-radius: 3px; background: #dcd7e0; }
  .yxa-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 20px 14px; font-size: 20px; font-weight: 800; }
  .yxa-sheet-body { flex: 1; overflow-y: auto; padding: 0 16px 12px; overscroll-behavior: contain; }
  .yxa-sheet-foot { padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--yxa-line); }
  .yxa-sheet-foot .yxa-btn { margin: 0; width: 100%; }

  /* ---------- Toast, skeletons, spinner, dots, section heads ---------- */
  .yxa-toast {
    position: fixed; z-index: 1200; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom));
    display: flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 22px;
    background: #1d1b24; color: #fff; font-size: 14px; font-weight: 600;
    transform: translate(-50%, 10px); opacity: 0; pointer-events: none; transition: .25s;
  }
  .yxa-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
  .yxa-toast svg { color: #5fe39a; width: 18px; height: 18px; }
  .yxa-skel { flex: 0 0 158px; height: 300px; border-radius: 18px; background: linear-gradient(90deg, #efebf1 25%, #f8f6f9 50%, #efebf1 75%) 0 0 / 200% 100%; animation: yxa-shine 1.2s infinite linear; }
  .yxa-skel--row { height: 110px; margin: 12px 16px; }
  @keyframes yxa-shine { to { background-position: -200% 0; } }
  .yxa-spinner { width: 30px; height: 30px; margin: 24px auto; border: 3px solid #eadbea; border-top-color: var(--yxa-p); border-radius: 50%; animation: yxa-spin .8s linear infinite; }
  @keyframes yxa-spin { to { transform: rotate(360deg); } }
  .yxa-dots { display: flex; justify-content: center; gap: 6px; padding: 12px 0 2px; }
  .yxa-dots i { width: 7px; height: 7px; border-radius: 4px; background: #dcd6df; transition: width .25s, background .25s; }
  .yxa-dots i.is-on { width: 22px; background: var(--yxa-p); }
  .yxa-sec { margin-top: 26px; }
  .yxa-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 16px 12px; }
  .yxa-sec-head h2 { font-size: 20px !important; font-weight: 800 !important; line-height: 1.2 !important; color: var(--yxa-ink); }
  .yxa-sec-head a { display: flex; align-items: center; gap: 2px; color: var(--yxa-p) !important; font-size: 15px; font-weight: 700; white-space: nowrap; }
  .yxa-sec-head a svg { width: 16px; height: 16px; stroke-width: 2.6; }
  .yxa-empty { padding: 60px 24px; text-align: center; }
  .yxa-empty > svg { width: 44px; height: 44px; padding: 24px; box-sizing: content-box; border-radius: 50%; background: var(--yxa-p2); color: var(--yxa-p); }
  .yxa-empty h2 { margin-top: 16px !important; font-size: 21px !important; font-weight: 800 !important; }
  .yxa-empty p { margin-top: 6px !important; color: var(--yxa-mute); font-size: 15px; }
  .yxa-empty .yxa-btn { display: inline-flex !important; margin-top: 20px; }
  .yxa-empty--sm { padding: 30px 16px; }
  .yxa-empty--sm span { font-size: 38px; color: var(--yxa-p); }
}

/* Categories, Search and Account pages */
@media (max-width: 1023.98px) {
  /* ---------- Categories ---------- */
  .yxa-cats { list-style: none; margin: 0; padding: 8px 16px 20px; }
  .yxa-l1 { margin: 0 0 10px; }
  .yxa-l1-row {
    display: flex !important; align-items: center; gap: 12px; width: 100%;
    padding: 11px 14px !important; margin: 0 !important; border: 0 !important; border-radius: 18px !important;
    background: #fff !important; box-shadow: var(--yxa-shadow) !important;
    color: var(--yxa-ink) !important; font-size: 16px !important; font-weight: 700 !important; text-align: left; line-height: 1.25 !important;
  }
  .yxa-l1-row > svg:last-child { margin-left: auto; color: var(--yxa-p); width: 20px; height: 20px; transition: transform .2s; }
  .yxa-l1.is-open > .yxa-l1-row > svg:last-child, .yxa-l2.is-open > .yxa-l2-row > svg:last-child { transform: rotate(180deg); }
  .yxa-l1-ico { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: var(--yxa-p2); color: var(--yxa-p); flex: none; }
  .yxa-l1-ico svg { width: 22px; height: 22px; stroke-width: 1.8; }
  .yxa-l2s {
    display: none; position: relative; list-style: none;
    margin: 8px 0 0; padding: 8px 10px 8px 26px; border-radius: 16px; background: #f8edf8;
  }
  .yxa-l2s::before { content: ""; position: absolute; left: 15px; top: 20px; bottom: 20px; border-left: 1.5px dashed #d6b2d7; }
  .yxa-l1.is-open > .yxa-l2s { display: block; }
  .yxa-l2s > li { margin: 0; }
  .yxa-l2-row {
    position: relative; display: flex !important; align-items: center; gap: 10px; width: 100%;
    padding: 11px 6px !important; margin: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important;
    color: var(--yxa-ink) !important; font-size: 15px !important; font-weight: 600 !important; text-align: left; line-height: 1.25 !important;
  }
  .yxa-l2-row > svg { margin-left: auto; color: var(--yxa-p); width: 18px; height: 18px; transition: transform .2s; }
  .yxa-dot { position: absolute; left: -15px; width: 9px; height: 9px; border-radius: 50%; background: var(--yxa-p); box-shadow: 0 0 0 3px #f8edf8; }
  .yxa-l3 { display: none; list-style: none; margin: 0 0 6px; padding: 4px 0 4px 6px; }
  .yxa-l2.is-open > .yxa-l3 { display: block; }
  .yxa-l3 a { display: flex; align-items: center; gap: 12px; padding: 7px 4px; color: #3c3744 !important; font-size: 14px; font-weight: 500; }
  .yxa-l3 a > svg { margin-left: auto; width: 16px; height: 16px; color: #b9b2bf; }
  .yxa-l3 img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: #fff; flex: none; }
  .yxa-sw { width: 14px; height: 14px; border-radius: 50%; background: var(--yxa-p); opacity: .5; flex: none; }

  /* ---------- Search ---------- */
  .yxa-page--search .yxa-pill { margin: 6px 16px 18px; }
  .yxa-sh { display: flex; align-items: center; gap: 8px; padding: 0 16px 12px; font-size: 17px; font-weight: 800; }
  .yxa-sh svg { width: 20px; height: 20px; color: var(--yxa-p); }
  .yxa-sh:has(+ .yxa-popular) svg { color: #ff7a1a; }
  .yxa-clear { margin-left: auto; padding: 0 !important; border: 0 !important; background: none !important; color: var(--yxa-p) !important; font-size: 15px !important; font-weight: 700 !important; }
  .yxa-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 22px; }
  .yxa-chips button {
    display: flex !important; align-items: center; gap: 6px; height: 36px; padding: 0 14px !important; margin: 0 !important;
    border: 1.5px solid #e2dce5 !important; border-radius: 18px !important; background: #fff !important; color: var(--yxa-ink) !important; font-size: 14px !important; font-weight: 600 !important;
  }
  .yxa-chips svg { width: 15px; height: 15px; color: var(--yxa-mute); }
  .yxa-popular { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 0 16px; }
  .yxa-popular button { display: flex !important; flex-direction: column; padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 18px !important; overflow: hidden; background: #fff !important; box-shadow: var(--yxa-shadow) !important; }
  .yxa-pop-art { display: block; aspect-ratio: 1; background: #fff; }
  .yxa-pop-art img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 6px; }
  .yxa-pop-art:empty { background: linear-gradient(90deg, #efebf1 25%, #f8f6f9 50%, #efebf1 75%) 0 0 / 200% 100%; animation: yxa-shine 1.2s infinite linear; }
  .yxa-pop-name { display: block; padding: 8px 4px; color: var(--yxa-ink); font-size: 13px; font-weight: 700; }
  .yxa-suggest { padding: 0 16px; }
  .yxa-sug-label { padding: 4px 0 8px; color: var(--yxa-p); font-size: 12px; font-weight: 800; letter-spacing: .08em !important; }
  .yxa-sug { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--yxa-line); color: var(--yxa-ink) !important; }
  .yxa-sug-img { width: 52px; height: 52px; border-radius: 12px; overflow: hidden; background: #fff; flex: none; }
  .yxa-sug-img img { width: 100%; height: 100%; object-fit: contain; }
  .yxa-sug-name { flex: 1; font-size: 14px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .yxa-sug b { font-size: 15px; font-weight: 800; }
  .yxa-sug-none { padding: 16px 0; color: var(--yxa-mute); }

  /* ---------- Account (guest) ---------- */
  .yxa-join { padding: 10px 24px 6px; text-align: center; }
  .yxa-join-art { position: relative; width: 170px; height: 130px; margin: 0 auto 8px; }
  .yxa-join-art i { position: absolute; border-radius: 50% 50% 48% 48%; box-shadow: inset -8px -10px 18px rgba(0, 0, 0, .14), inset 8px 8px 14px rgba(255, 255, 255, .45); }
  .yxa-join-art i:nth-child(1) { left: 40px; top: 8px; width: 74px; height: 84px; background: var(--yxa-p); }
  .yxa-join-art i:nth-child(2) { left: 98px; top: 30px; width: 56px; height: 64px; background: #ff9a3c; }
  .yxa-join-art i:nth-child(3) { left: 14px; top: 46px; width: 46px; height: 54px; background: #fff; }
  .yxa-join-art b { position: absolute; width: 14px; height: 14px; background: #ffd34d; clip-path: polygon(50% 0, 61% 38%, 100% 50%, 61% 62%, 50% 100%, 39% 62%, 0 50%, 39% 38%); }
  .yxa-join-art b:nth-of-type(1) { left: 8px; top: 10px; }
  .yxa-join-art b:nth-of-type(2) { right: 4px; top: 4px; width: 18px; height: 18px; }
  .yxa-join-art b:nth-of-type(3) { right: 26px; bottom: 6px; width: 10px; height: 10px; }
  .yxa-join h2 { font-size: 26px !important; font-weight: 800 !important; line-height: 1.2 !important; }
  .yxa-join p { margin-top: 6px !important; color: var(--yxa-mute); font-size: 15px; line-height: 1.4; }
  .yxa-perks { list-style: none; margin: 18px 16px 8px; padding: 4px 0; border-radius: 18px; background: #fff; box-shadow: var(--yxa-shadow); }
  .yxa-perks li { display: flex; align-items: center; gap: 12px; margin: 0; padding: 10px 14px; font-size: 15px; font-weight: 600; }
  .yxa-ico { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--yxa-p2); color: var(--yxa-p); flex: none; }
  .yxa-ico svg { width: 20px; height: 20px; }
  .yxa-menu { list-style: none; margin: 20px 0 0; padding: 0 16px; }
  .yxa-menu li { margin: 0 0 10px; }
  .yxa-menu a { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 18px; background: #fff; box-shadow: var(--yxa-shadow); color: var(--yxa-ink) !important; font-size: 15px; font-weight: 600; }
  .yxa-menu a > svg:last-child { margin-left: auto; width: 18px; height: 18px; color: #b5aebb; }

  /* ---------- Checkout step balloons ---------- */
  .yxa-steps {
    position: sticky; top: 58px; z-index: 790; display: flex; align-items: center; justify-content: center;
    padding: 6px 16px 12px; background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  }
  .yxa-steps i { flex: 1; max-width: 46px; height: 2px; margin: 0 4px 18px; background: #e6dde8; }
  .yxa-steps :is(button, .yxa-steps-item) {
    display: flex !important; flex-direction: column; align-items: center; gap: 4px; padding: 0 !important; margin: 0 !important;
    border: 0 !important; background: none !important; color: var(--yxa-mute) !important; font-size: 12.5px !important; font-weight: 700 !important;
  }
  .yxa-step-ball {
    position: relative; display: flex; align-items: center; justify-content: center; width: 34px; height: 38px;
    border-radius: 50% 50% 46% 46%; background: var(--yxa-p2); color: var(--yxa-p); font-size: 14px; font-weight: 800;
    box-shadow: inset -4px -5px 8px rgba(0, 0, 0, .06), inset 4px 4px 6px rgba(255, 255, 255, .6);
  }
  .yxa-step-ball::after { content: ""; position: absolute; left: 50%; bottom: -4px; width: 6px; height: 5px; margin-left: -3px; background: inherit; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
  .yxa-steps :is(button, .yxa-steps-item):is(.is-on, .is-done) { color: var(--yxa-p) !important; }
  .yxa-steps :is(button, .yxa-steps-item):is(.is-on, .is-done) .yxa-step-ball { background: var(--yxa-p); color: #fff; }

  /* ---------- Theme pages kept inside the app frame (checkout, account, content) ---------- */
  html.yxa-content body.yxa2 > main { padding-top: 4px; }
  html.yxa-content body.yxa2 > main h1 { font-size: 30px !important; font-weight: 800 !important; }
}

/* Product cards, rails, grid and the home page blocks */
@media (max-width: 1023.98px) {
  /* ---------- Rails and grid ---------- */
  .yxa-rail {
    display: flex; gap: 12px; overflow-x: auto; padding: 2px 16px 10px;
    scroll-snap-type: x mandatory; scroll-padding: 0 16px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .yxa-rail::-webkit-scrollbar, .yxa-banner-track::-webkit-scrollbar, .yxa-gallery::-webkit-scrollbar, .yxa-pdp-track::-webkit-scrollbar { display: none; }
  .yxa-rail > * { scroll-snap-align: start; }
  .yxa-rail > .yxa-card { flex: 0 0 calc((100vw - 44px) / 2.12); }
  .yxa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 16px; }

  /* ---------- Product card ---------- */
  .yxa-card { position: relative; display: flex; flex-direction: column; min-width: 0; border-radius: 18px; overflow: hidden; background: #fff; box-shadow: var(--yxa-shadow); }
  .yxa-card-media {
    position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden;
    background:
      radial-gradient(circle at 18% 78%, rgba(255, 196, 214, .7) 0 3px, transparent 4px),
      radial-gradient(circle at 84% 70%, rgba(201, 182, 255, .7) 0 3px, transparent 4px),
      radial-gradient(circle at 70% 14%, rgba(255, 216, 160, .8) 0 2px, transparent 3px),
      linear-gradient(160deg, #fff4f8 0%, #fde3ee 100%);
  }
  .yxa-card-media img { width: 100%; height: 100%; object-fit: contain; padding: 10px; mix-blend-mode: multiply; }
  .yxa-badges { position: absolute; top: 8px; left: 8px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
  .yxa-b { padding: 3px 8px; border-radius: 10px; color: #fff; font-size: 11px; font-weight: 800; line-height: 1.35; }
  .yxa-b--new { background: #20b25c; }
  .yxa-b--best { background: #ff8a1f; }
  .yxa-b--sale { background: #ff4d8d; }
  .yxa-b--rate { background: #efe4fb; color: #6c3aa6; }
  .yxa-heart {
    position: absolute; top: 8px; right: 8px; display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 50% !important;
    background: #fff !important; color: #9b95a3 !important; box-shadow: 0 2px 8px rgba(0, 0, 0, .08) !important;
  }
  .yxa-heart svg { width: 17px; height: 17px; }
  .yxa-heart.is-on { color: var(--yxa-p) !important; }
  .yxa-heart.is-on svg { fill: var(--yxa-p); }
  .yxa-card-body { display: flex; flex: 1; flex-direction: column; gap: 4px; padding: 9px 10px 10px; }
  .yxa-card-brand { color: var(--yxa-mute); font-size: 10.5px; font-weight: 700; text-transform: uppercase !important; letter-spacing: .04em !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .yxa-card-name {
    min-height: 2.6em; color: var(--yxa-ink) !important; font-size: 14px; font-weight: 600; line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .yxa-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 6px; color: var(--yxa-p); font-size: 18px; font-weight: 800; line-height: 1.2; }
  .yxa-price * { color: inherit; font-weight: inherit; }
  .yxa-price del { order: -1; color: #a39dab; font-size: 13px; font-weight: 500; }
  .yxa-price ins { text-decoration: none; }
  .yxa-stock { display: flex; align-items: center; gap: 5px; color: var(--yxa-green); font-size: 12px; font-weight: 700; }
  .yxa-stock svg { width: 15px; height: 15px; padding: 2.5px; border-radius: 50%; background: var(--yxa-green); color: #fff; stroke-width: 3.4; }
  .yxa-stock.is-out { color: var(--yxa-mute); }
  .yxa-card-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: auto; padding-top: 6px; }
  .yxa-step { display: flex; align-items: center; gap: 7px; }
  .yxa-step button {
    display: flex; align-items: center; justify-content: center; width: 28px; height: 28px;
    padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 50% !important;
    background: #f1eef3 !important; color: var(--yxa-ink) !important; font-size: 17px !important; font-weight: 700 !important; line-height: 1 !important;
  }
  .yxa-step button[data-d="1"], .yxa-ci .yxa-step button { background: var(--yxa-p2) !important; color: var(--yxa-p) !important; }
  .yxa-step button:disabled { opacity: .45; }
  .yxa-step span { min-width: 14px; text-align: center; font-size: 15px; font-weight: 800; }
  .yxa-add {
    display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none;
    padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 50% !important;
    background: var(--yxa-p) !important; color: #fff !important; box-shadow: 0 5px 12px rgba(133, 27, 135, .3) !important;
  }
  .yxa-add svg { width: 21px; height: 21px; }
  .yxa-add.is-busy, .is-busy { opacity: .5; pointer-events: none; }

  /* ---------- Home ---------- */
  .yxa-home > .yxa-pill { margin-top: 2px; }
  .yxa-banner { margin: 0 16px; }
  .yxa-banner-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; border-radius: 22px; scrollbar-width: none; }
  .yxa-banner-slide { position: relative; flex: 0 0 100%; aspect-ratio: 16 / 10; scroll-snap-align: start; overflow: hidden; background: var(--yxa-p3); }
  .yxa-banner-slide img { width: 100%; height: 100%; object-fit: cover; }
  .yxa-banner-copy {
    position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 4px;
    padding: 16px; background: linear-gradient(180deg, transparent 35%, rgba(40, 10, 50, .62));
    color: #fff;
  }
  .yxa-banner-copy b { max-width: 82%; font-size: 23px; font-weight: 800; line-height: 1.1; }
  .yxa-banner-copy small { max-width: 85%; font-size: 13px; line-height: 1.3; opacity: .92; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .yxa-banner-copy i { display: inline-flex; align-items: center; gap: 2px; margin-top: 6px; padding: 7px 12px 7px 14px; border-radius: 16px; background: #fff; color: var(--yxa-p); font-size: 13px; font-weight: 800; font-style: normal; }
  .yxa-banner-copy i svg { width: 15px; height: 15px; }

  /* Every tile in a row has the same box, image area and one-line label */
  .yxa-brand { flex: 0 0 104px; width: 104px; padding: 8px 8px 10px; border-radius: 18px; background: #fff; box-shadow: var(--yxa-shadow); text-align: center; color: var(--yxa-ink) !important; }
  .yxa-brand-img { display: block; width: 100%; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: #fff; }
  .yxa-brand-img img { display: block; width: 100%; height: 100%; object-fit: contain; }
  .yxa-brand small, .yxa-color small { display: block; margin-top: 7px; color: var(--yxa-ink); font-size: 13px !important; font-weight: 700; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* Finish names can be two words long: two lines, same height on every tile */
  .yxa-brand small { height: 2.5em; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

  .yxa-size { flex: 0 0 116px; width: 116px; padding: 8px 8px 10px; border-radius: 18px; background: #fff; box-shadow: var(--yxa-shadow); text-align: center; color: var(--yxa-ink) !important; }
  .yxa-size-art { display: block; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: #faf7fb; }
  .yxa-size-art img { display: block; width: 100%; height: 100%; object-fit: contain; }
  .yxa-size b { display: block; margin-top: 8px; font-size: 16px; font-weight: 800; }
  .yxa-size small { display: block; color: var(--yxa-mute); font-size: 12px; font-weight: 600; }

  .yxa-color { flex: 0 0 72px; width: 72px; text-align: center; color: var(--yxa-ink) !important; }
  .yxa-skel--dot { flex: 0 0 64px; height: 72px; border-radius: 50%; }
  .yxa-color span {
    position: relative; display: block; width: 64px; height: 72px; margin: 0 auto; border-radius: 50% 50% 47% 47%;
    background: #ddd; overflow: hidden;
    box-shadow: inset -8px -10px 16px rgba(0, 0, 0, .16), inset 8px 8px 14px rgba(255, 255, 255, .4), 0 3px 8px rgba(0, 0, 0, .08);
  }
  .yxa-color span::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 8px; height: 6px; margin-left: -4px; background: inherit; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
  .yxa-color span img { width: 100%; height: 100%; object-fit: cover; }

  .yxa-gallery { display: flex; gap: 12px; overflow-x: auto; padding: 0 16px 6px; scroll-snap-type: x mandatory; scroll-padding: 0 16px; scrollbar-width: none; }
  .yxa-gal-card { flex: 0 0 100%; scroll-snap-align: start; border-radius: 24px; overflow: hidden; background: #fff; box-shadow: var(--yxa-shadow); }
  .yxa-gal-card > img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
  /* Compact strip under the photo; it no longer overlaps the picture */
  .yxa-gal-panel { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #fff; text-align: left; }
  .yxa-gal-panel b { flex: 1; min-width: 0; color: var(--yxa-p); font-size: 14.5px; font-weight: 800; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .yxa-gal-panel small { display: none; }
  .yxa-gal-panel .yxa-btn { flex: none; height: 38px; margin: 0; padding: 0 14px !important; font-size: 13.5px !important; box-shadow: none; }
}

/* Lists and search results, product page, cart */
@media (max-width: 1023.98px) {
  /* ---------- List ---------- */
  .yxa-rels { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 14px 16px 4px; }
  .yxa-rels .yxa-sec-head { grid-column: 1 / -1; padding: 0; margin-bottom: -2px; }
  .yxa-rel { display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: #fff; box-shadow: var(--yxa-shadow); color: var(--yxa-ink) !important; }
  .yxa-rel-img { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; background: linear-gradient(160deg, #fff4f8, #fde3ee); color: var(--yxa-p); }
  .yxa-rel-img img { width: 100%; height: 100%; object-fit: contain; padding: 8px; mix-blend-mode: multiply; }
  .yxa-rel-img svg { width: 40px; height: 40px; }
  .yxa-rel-name { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; padding: 9px 10px 11px; font-size: 14px; font-weight: 700; line-height: 1.25; }
  .yxa-rel-name small { padding: 2px 9px; border-radius: 10px; background: var(--yxa-p2); color: var(--yxa-p); font-size: 11.5px; font-weight: 700; }

  .yxa-listbar {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    margin: 14px 16px; padding: 6px 6px 6px 18px; border-radius: 26px; background: #fff; box-shadow: var(--yxa-shadow);
  }
  .yxa-listbar p { color: var(--yxa-mute); font-size: 14px; font-weight: 600; }
  .yxa-listbar p b { color: var(--yxa-mute); font-weight: 600; }
  .yxa-listbar-btns { display: flex; align-items: center; }
  .yxa-listbar-btns button {
    position: relative; display: flex !important; align-items: center; gap: 7px; height: 40px; padding: 0 10px !important; margin: 0 !important;
    border: 0 !important; border-radius: 20px !important; background: transparent !important; color: var(--yxa-ink) !important; font-size: 15px !important; font-weight: 700 !important;
  }
  .yxa-listbar-btns button + button { border-left: 1px solid var(--yxa-line) !important; border-radius: 0 20px 20px 0 !important; }
  .yxa-listbar-btns svg { width: 30px; height: 30px; padding: 7px; border-radius: 50%; background: var(--yxa-p2); color: var(--yxa-p); }
  .yxa-listbar-btns em { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--yxa-p); color: #fff; font-size: 11px; font-style: normal; line-height: 18px; text-align: center; }
  .yxa-listbar--search { padding: 0; background: transparent; box-shadow: none; }
  .yxa-listbar--search p { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .yxa-listbar--search .yxa-listbar-btns { gap: 8px; }
  .yxa-listbar--search .yxa-listbar-btns button, .yxa-listbar--search .yxa-listbar-btns button + button {
    height: 38px; padding: 0 14px !important; border: 1.5px solid #ded7e2 !important; border-radius: 19px !important; background: #fff !important; font-size: 14px !important;
  }
  .yxa-listbar--search .yxa-listbar-btns svg { width: 17px; height: 17px; padding: 0; background: none; color: var(--yxa-ink); }
  .yxa-more { min-height: 20px; }

  /* Sort sheet */
  .yxa-radios label { display: flex; align-items: center; gap: 12px; margin: 0 0 4px; padding: 14px 14px; border-radius: 14px; font-size: 16px; font-weight: 600; cursor: pointer; }
  .yxa-radios input { position: absolute; opacity: 0; pointer-events: none; }
  .yxa-radios i { margin-left: auto; width: 22px; height: 22px; border: 2px solid #cfc7d4; border-radius: 50%; flex: none; }
  .yxa-radios label:has(input:checked) { background: var(--yxa-p3); color: var(--yxa-p); }
  .yxa-radios label:has(input:checked) i { border-color: var(--yxa-p); background: var(--yxa-p); box-shadow: inset 0 0 0 4px #fff; }

  /* Filter sheet */
  .yxa-clearall { display: flex !important; align-items: center; gap: 5px; height: 32px; padding: 0 12px !important; border: 1.5px solid var(--yxa-p) !important; border-radius: 16px !important; background: #fff !important; color: var(--yxa-p) !important; font-size: 13px !important; font-weight: 700 !important; }
  .yxa-clearall svg { width: 15px; height: 15px; }
  .yxa-facet { margin: 0 0 10px; border: 1px solid var(--yxa-line); border-radius: 18px; background: #fff; }
  .yxa-facet-head {
    display: flex !important; align-items: center; gap: 5px; width: 100%; padding: 14px 14px 14px 16px !important; margin: 0 !important;
    border: 0 !important; background: transparent !important; color: var(--yxa-ink) !important; font-size: 16px !important; font-weight: 700 !important; text-align: left;
  }
  .yxa-facet-n { color: var(--yxa-p); font-weight: 600; }
  .yxa-facet-head em { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--yxa-p); color: #fff; font-size: 11px; font-style: normal; line-height: 18px; text-align: center; }
  .yxa-facet-head > svg { margin-left: auto; width: 28px; height: 28px; padding: 5px; border-radius: 50%; background: var(--yxa-p2); color: var(--yxa-p); transition: transform .2s; }
  .yxa-facet.is-open .yxa-facet-head { color: var(--yxa-p) !important; }
  .yxa-facet.is-open .yxa-facet-head > svg { transform: rotate(180deg); background: var(--yxa-p); color: #fff; }
  .yxa-chipset { display: none; padding: 0 8px 8px; }
  .yxa-facet.is-open .yxa-chipset { display: block; }
  .yxa-chipset button {
    display: flex !important; align-items: center; gap: 10px; width: 100%; padding: 11px 10px !important; margin: 0 !important;
    border: 0 !important; border-radius: 12px !important; background: transparent !important; color: var(--yxa-ink) !important; font-size: 15px !important; font-weight: 500 !important; text-align: left;
  }
  .yxa-chipset button::before { content: ""; width: 20px; height: 20px; border: 2px solid #cfc7d4; border-radius: 6px; flex: none; box-sizing: border-box; }
  .yxa-chipset button.is-on { background: var(--yxa-p3) !important; }
  .yxa-chipset button.is-on::before {
    border-color: var(--yxa-p); background: var(--yxa-p) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / 14px no-repeat;
  }
  .yxa-chipset--color i { width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .12); flex: none; }
  .yxa-chipset--color i.is-all { background: conic-gradient(#ff5c8a, #ffb340, #ffe14d, #5cd68a, #4db6ff, #9b6bff, #ff5c8a); }

  /* ---------- Product page ---------- */
  .yxa-pdp-gallery { background: #fff; padding-bottom: 28px; }
  .yxa-pdp-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .yxa-pdp-slide { flex: 0 0 100%; aspect-ratio: 1 / 1; scroll-snap-align: start; }
  .yxa-pdp-slide img { width: 100%; height: 100%; object-fit: contain; }
  .yxa-pdp-thumbs { display: flex; gap: 8px; overflow-x: auto; padding: 10px 16px 0; scrollbar-width: none; }
  .yxa-pdp-thumbs button { flex: 0 0 60px; height: 60px; padding: 3px !important; margin: 0 !important; border: 2px solid var(--yxa-line) !important; border-radius: 14px !important; background: #fff !important; }
  .yxa-pdp-thumbs button.is-on { border-color: var(--yxa-p) !important; }
  .yxa-pdp-thumbs img { width: 100%; height: 100%; object-fit: contain; border-radius: 10px; }
  /* Ruler sheet slide: the sheet's own SVG, balloon centred */
  .yxa-pdp-slide--sheet { display: flex; align-items: center; justify-content: center; padding: 3%; }
  .yxa-on :is(.yxa-pdp-slide--sheet, .yxa-pdp-thumbs button) > svg { display: block; width: 100% !important; height: 100% !important; }
  /* Product photos card: no inner frame, sheet centred, size caption centred under it */
  .yxa-desc #yxb-photos :is(.yxb-detail-photo-grid, figure, .yxb-image-window, .yxb-photo-full) { margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; }
  .yxa-desc #yxb-photos .yxb-detail-photo-grid { display: block !important; }
  .yxa-desc #yxb-photos svg.yxnc-dimension-svg { display: block; margin: 0 auto; }
  .yxa-desc #yxb-photos figcaption { margin: 4px 0 0 !important; color: var(--yxa-mute); font-size: 14px; font-weight: 700; text-align: center; }
  .yxa-pdp-info { position: relative; margin: -20px 12px 0; padding: 16px; border-radius: 24px; background: #fff; box-shadow: 0 8px 28px rgba(48, 22, 60, .09); }
  .yxa-pdp-top { display: flex; align-items: center; gap: 8px; }
  .yxa-pdp-crumb { flex: 1; min-width: 0; display: flex; align-items: center; gap: 3px; color: var(--yxa-mute); font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; }
  .yxa-pdp-crumb svg { width: 13px; height: 13px; }
  .yxa-pdp-crumb a { color: var(--yxa-p) !important; overflow: hidden; text-overflow: ellipsis; }
  .yxa-pdp-title { margin-top: 10px !important; font-size: 23px !important; font-weight: 800 !important; line-height: 1.22 !important; color: var(--yxa-ink); }
  .yxa-pdp-sku { margin-top: 5px !important; color: var(--yxa-mute); font-size: 13px; }
  .yxa-pdp-rate { display: flex; align-items: center; gap: 6px; margin-top: 7px !important; color: var(--yxa-mute); font-size: 14px; font-weight: 600; }
  .yxa-stars i { color: #d9d2de; font-style: normal; font-size: 16px; }
  .yxa-stars i.is-on { color: var(--yxa-p); }
  .yxa-pdp-pricerow { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 12px 0 4px; }
  .yxa-pdp-pricerow .yx-single-price, .yxa-pdp-pricerow .price { margin: 0 !important; color: var(--yxa-p) !important; font-size: 28px !important; font-weight: 800 !important; line-height: 1.1 !important; }
  .yxa-pdp-pricerow .yx-single-price * { color: inherit !important; font: inherit !important; }
  .yxa-pdp-stock { display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border-radius: 16px; background: var(--yxa-green2); color: var(--yxa-green); font-size: 13px; font-weight: 700; white-space: nowrap; }
  .yxa-pdp-stock svg { width: 15px; height: 15px; stroke-width: 3; }
  .yxa-pdp-stock.is-out { background: #f1eef3; color: var(--yxa-mute); }

  /* The theme cart form inside the info card: options as chips, then qty pill + Add to Cart */
  .yxa-pdp-info form.cart { margin: 10px 0 0 !important; padding: 0 !important; border: 0 !important; background: none !important; }
  .yxa-pdp-info .yxls-purchase-spec,
  .yxa-pdp-info .yxls-order-total,
  .yxa-pdp-info .yxb-buy-delivery,
  .yxa-pdp-info .yxb-qty-caption,
  .yxa-pdp-info .reset_variations,
  .yxa-pdp-info .woocommerce-variation-price,
  .yxa-pdp-info .ppc-button-wrapper,
  .yxa-pdp-info [id^="ppc-button"],
  .yxa-pdp-info .wc-block-components-express-payment { display: none !important; }
  .yxa-pdp-info .yxls-fixed-form table.variations { display: none !important; }
  .yxa-pdp-info table.variations { width: 100%; margin: 0 0 10px !important; border: 0 !important; }
  .yxa-pdp-info table.variations :is(tr, th, td) { display: block; padding: 0 !important; border: 0 !important; background: none !important; text-align: left; }
  .yxa-pdp-info table.variations th label { display: block; margin: 4px 0 8px; color: var(--yxa-ink); font-size: 15px; font-weight: 800; }
  .yxa-pdp-info .yxb-variant-grid { display: flex; flex-wrap: wrap; gap: 8px; }
  .yxa-pdp-info .yxb-variant-card { display: flex; flex-direction: column; align-items: flex-start; padding: 8px 12px !important; margin: 0 !important; border: 1.5px solid var(--yxa-line) !important; border-radius: 14px !important; background: #fff !important; color: var(--yxa-ink) !important; font-size: 13px !important; text-align: left; }
  .yxa-pdp-info .yxb-variant-card[aria-pressed="true"] { border-color: var(--yxa-p) !important; background: var(--yxa-p3) !important; color: var(--yxa-p) !important; }
  .yxa-pdp-info .yxb-variant-card small { color: var(--yxa-mute); font-size: 11.5px; }
  .yxa-pdp-info :is(.woocommerce-variation-add-to-cart, form.cart:not(.variations_form)),
  .yxa-on .yxa-pdp-info .yxm-buyrow { display: flex !important; flex-wrap: wrap; align-items: center; gap: 10px; grid-template-columns: none !important; width: 100% !important; }
  .yxa-on .yxa-pdp-info .yxm-buyrow > :is(.yxls-order-total, .yxb-buy-delivery) { flex-basis: 100%; }
  .yxa-pdp-info .quantity { display: flex !important; align-items: center; margin: 0 !important; flex: none; }
  .yxa-pdp-info .yxls-quantity-stepper { display: flex; align-items: center; gap: 2px; height: 50px; padding: 0 5px; border-radius: 25px; background: #f3f0f5; }
  .yxa-pdp-info .yxls-quantity-stepper button {
    width: 38px; height: 38px; padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 50% !important;
    background: #fff !important; color: var(--yxa-ink) !important; font-size: 20px !important; font-weight: 700 !important; line-height: 1 !important; box-shadow: none !important;
  }
  .yxa-pdp-info .yxls-quantity-stepper button:last-child { background: var(--yxa-p2) !important; color: var(--yxa-p) !important; }
  .yxa-pdp-info input.qty { width: 38px !important; height: 38px; padding: 0 !important; margin: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; text-align: center; font-size: 17px !important; font-weight: 800 !important; -moz-appearance: textfield; }
  .yxa-pdp-info input.qty::-webkit-inner-spin-button, .yxa-pdp-info input.qty::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
  .yxa-pdp-info .single_add_to_cart_button {
    flex: 1; min-width: 150px; height: 50px; padding: 0 20px !important; margin: 0 !important;
    border: 0 !important; border-radius: 25px !important; background: var(--yxa-p) !important; color: #fff !important;
    font-family: var(--yxa-font) !important; font-size: 17px !important; font-weight: 700 !important; letter-spacing: normal !important; text-transform: none !important;
    box-shadow: 0 6px 16px rgba(133, 27, 135, .28) !important;
  }
  .yxa-pdp-info .single_add_to_cart_button.disabled { opacity: .5; }

  .yxa-pdp-sizes { margin-top: 22px; }
  .yxa-pdp-sizes h2 { padding: 0 16px 10px; font-size: 19px !important; font-weight: 800 !important; }
  .yxa-pdp-sizes .yxa-rail > a { flex: 0 0 96px; padding: 6px 6px 9px; border: 2px solid transparent; border-radius: 18px; background: #fff; box-shadow: var(--yxa-shadow); text-align: center; color: var(--yxa-ink) !important; }
  .yxa-pdp-sizes .yxa-rail > a.is-on { border-color: var(--yxa-p); }
  .yxa-pdp-size-img { display: block; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: linear-gradient(160deg, #fff4f8, #fde3ee); }
  .yxa-pdp-size-img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
  .yxa-pdp-sizes b { display: inline-block; margin-top: 7px; padding: 2px 10px; border-radius: 10px; background: var(--yxa-p2); color: var(--yxa-p); font-size: 13px; font-weight: 800; }
  .yxa-pdp-sizes small { display: block; margin-top: 3px; color: var(--yxa-mute); font-size: 12px; font-weight: 600; }

  .yxa-pdp-tabs { margin: 22px 16px 0; }
  .yxa-seg { display: flex; padding: 4px; border: 1px solid var(--yxa-line); border-radius: 26px; background: #fff; }
  .yxa-seg button { flex: 1; height: 42px; padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 21px !important; background: transparent !important; color: var(--yxa-mute) !important; font-size: 15px !important; font-weight: 700 !important; }
  .yxa-seg button.is-on { background: var(--yxa-p2) !important; color: var(--yxa-p) !important; }
  .yxa-pane h3 { margin: 22px 0 10px !important; font-size: 19px !important; font-weight: 800 !important; }
  .yxa-details { width: 100%; border-collapse: separate; border-spacing: 0; border-radius: 18px; overflow: hidden; background: #fff; box-shadow: var(--yxa-shadow); }
  .yxa-details :is(th, td) { padding: 12px 14px !important; border: 0 !important; border-bottom: 1px solid #f0ecf2 !important; background: #fff !important; font-size: 14px; line-height: 1.4; text-align: left; vertical-align: top; }
  .yxa-details tr:last-child :is(th, td) { border-bottom: 0 !important; }
  .yxa-details th { width: 42%; color: var(--yxa-mute); font-weight: 500; }
  .yxa-details td { color: var(--yxa-ink); font-weight: 600; }
  .yxa-desc-body { color: #4a4553; font-size: 15px; line-height: 1.6; }
  .yxa-desc-body :is(p, ul, ol) { margin: 0 0 12px !important; }
  .yxa-desc-body li::marker { color: var(--yxa-p); }
  .yxa-desc-body img { max-width: 100%; height: auto; border-radius: 14px; }
  .yxa-desc > .yxb-info-card { display: block !important; margin: 0 !important; padding: 14px !important; border: 0 !important; border-radius: 18px !important; background: #fff !important; box-shadow: var(--yxa-shadow) !important; font-family: var(--yxa-font); }
  .yxa-desc > .yxb-info-card :is(h3, h4) { margin: 10px 0 4px !important; color: var(--yxa-ink); font-size: 15px !important; font-weight: 800 !important; }
  .yxa-desc > .yxb-info-card a { color: var(--yxa-p) !important; font-weight: 700; }
  /* Delivery & care: two sections split by a line, without the theme's stray icons; the FAQ rows underneath as a list */
  .yxa-desc .yxb-service-icon { display: none !important; }
  .yxa-desc .yxb-delivery-grid { display: block !important; }
  .yxa-desc .yxb-delivery-grid > article { margin: 0 !important; padding: 0 0 12px !important; border: 0 !important; background: none !important; box-shadow: none !important; }
  .yxa-desc .yxb-delivery-grid > article + article { padding-top: 12px !important; border-top: 1px solid var(--yxa-line) !important; }
  .yxa-desc .yxb-delivery-grid > article :is(h3, h4) { margin-top: 0 !important; }
  .yxa-desc .yxb-delivery-grid > article p { margin: 0 0 6px !important; }
  .yxa-desc .yxb-info-card details { margin: 0 !important; padding: 12px 0 !important; border: 0 !important; border-top: 1px solid var(--yxa-line) !important; background: none !important; }
  .yxa-desc .yxb-info-card details > summary { color: var(--yxa-ink); font-size: 15px; font-weight: 700; }
  .yxa-desc .yxb-info-card details > p { margin: 8px 0 0 !important; font-size: 14px; }
  .yxa-desc .yxb-info-card details button { margin-top: 8px; padding: 0 !important; border: 0 !important; background: none !important; color: var(--yxa-p) !important; font-size: 14px !important; font-weight: 700 !important; }
  .yxa-rev-head h3 { margin-bottom: 4px !important; }
  .yxa-pane .yxrv { margin: 0 !important; padding: 0 !important; background: none !important; font-family: var(--yxa-font); }
  .yxa-pane .yxrv-title { display: none !important; }
  .yxa-pane .yxrv-summary { padding: 14px !important; border-radius: 18px !important; background: #fff !important; box-shadow: var(--yxa-shadow); }
  .yxa-pane .yxrv-review { margin: 10px 0 0 !important; padding: 14px !important; border: 0 !important; border-radius: 18px !important; background: #fff !important; box-shadow: var(--yxa-shadow); }

  .yxa-buybar {
    position: fixed; z-index: 950; left: 12px; right: 12px; bottom: calc(86px + env(safe-area-inset-bottom));
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 9px 9px 9px 18px; border-radius: 22px; background: #fff; box-shadow: 0 8px 30px rgba(48, 22, 60, .16);
    transform: translateY(20px); opacity: 0; pointer-events: none; transition: .25s;
  }
  .yxa-buybar.is-on { transform: none; opacity: 1; pointer-events: auto; }
  .yxa-buybar b { display: block; color: var(--yxa-p); font-size: 21px; font-weight: 800; line-height: 1.1; }
  .yxa-buybar small { display: block; color: var(--yxa-mute); font-size: 12.5px; font-weight: 600; }
  .yxa-buybar .yxa-btn { margin: 0; height: 48px; padding: 0 26px !important; }

  /* ---------- Cart ---------- */
  .yxa-cis { padding: 6px 16px 0; }
  .yxa-ci { position: relative; display: grid; grid-template-columns: 92px 1fr; gap: 12px; margin: 0 0 12px; padding: 12px; border-radius: 20px; background: #fff; box-shadow: var(--yxa-shadow); }
  .yxa-ci-img { display: block; width: 92px; height: 92px; border-radius: 14px; overflow: hidden; background: linear-gradient(160deg, #fff4f8, #fde3ee); }
  .yxa-ci-img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
  .yxa-ci-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  .yxa-ci-name { padding-right: 30px; color: var(--yxa-ink) !important; font-size: 15px; font-weight: 700; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .yxa-ci-sku { color: var(--yxa-mute); font-size: 12.5px; }
  .yxa-ci-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 6px; }
  .yxa-ci .yxa-price { font-size: 18px; }
  .yxa-ci-x { position: absolute; top: 10px; right: 10px; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 50% !important; background: var(--yxa-p2) !important; color: var(--yxa-p) !important; }
  .yxa-ci-x svg { width: 15px; height: 15px; stroke-width: 2.6; }
  .yxa-summary { margin: 4px 16px 0; padding: 18px 16px 16px; border-radius: 20px; background: #fff; box-shadow: var(--yxa-shadow); }
  .yxa-summary h2 { margin-bottom: 8px !important; font-size: 19px !important; font-weight: 800 !important; }
  .yxa-summary > div:not(.yxa-pay) { display: flex; align-items: center; justify-content: space-between; padding: 7px 0; font-size: 15px; }
  .yxa-summary > div > span:first-child { color: #5d5866; }
  .yxa-summary > div > span:last-child { font-weight: 700; }
  .yxa-summary i { color: var(--yxa-mute); font-weight: 500; }
  .yxa-summary-total { margin-top: 6px; padding-top: 14px !important; border-top: 1px solid var(--yxa-line); }
  .yxa-summary-total span { color: var(--yxa-ink) !important; font-size: 17px; font-weight: 800; }
  .yxa-summary-total b { color: var(--yxa-p); font-size: 23px; font-weight: 800; }
  .yxa-summary .yxa-btn { margin: 16px 0 0; }
}

/* Signed-in account, sign-in page, policy / content pages */
@media (max-width: 1023.98px) {
  /* ---------- Theme chrome on account, checkout and content pages ---------- */
  html.yxa-on body.yxa2 .yx-commerce-page > .yx-breadcrumb,
  html.yxa-on body.woocommerce-account.yxa2 .yx-commerce-page > h1,
  html.yxa-on body.woocommerce-account.yxa2 .yx-commerce-page > .yx-commerce-note { display: none !important; }
  html.yxa-on body.yxa2 .yx-commerce-page { padding-top: 6px !important; font-family: var(--yxa-font); }

  /* ---------- Account dashboard (app view replaces the theme content) ---------- */
  html.yxa-acct-dash body.yxa2 > main { display: none !important; }
  .yxa-acct { padding-top: 6px; }
  .yxa-profile { display: flex; align-items: center; gap: 14px; margin: 4px 16px 0; padding: 18px 16px; border-radius: 22px; background: linear-gradient(135deg, var(--yxa-p), #b44bb6); color: #fff; box-shadow: 0 10px 24px rgba(133, 27, 135, .25); }
  .yxa-avatar { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: rgba(255, 255, 255, .22); border: 2px solid rgba(255, 255, 255, .6); font-size: 24px; font-weight: 800; flex: none; }
  .yxa-profile h2 { color: #fff !important; font-size: 21px !important; font-weight: 800 !important; line-height: 1.2 !important; }
  .yxa-profile p { margin-top: 3px !important; color: rgba(255, 255, 255, .85); font-size: 14px; }
  .yxa-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 14px 16px 0; padding: 14px 8px; border-radius: 20px; background: #fff; box-shadow: var(--yxa-shadow); }
  .yxa-quick a { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--yxa-ink) !important; font-size: 12.5px; font-weight: 700; }
  .yxa-quick span { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--yxa-p2); color: var(--yxa-p); }
  .yxa-quick svg { width: 22px; height: 22px; }
  .yxa-menu-head { margin: 22px 20px 10px !important; color: var(--yxa-mute); font-size: 13px !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: .06em !important; }
  .yxa-acct .yxa-menu { margin-top: 0; }
  .yxa-menu-txt { display: flex; flex-direction: column; min-width: 0; }
  .yxa-menu-txt small { margin-top: 2px; color: var(--yxa-mute); font-size: 12.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .yxa-logout { margin-top: 18px !important; }

  /* ---------- Account endpoints (orders, view order, coupons, addresses, details) ---------- */
  body.woocommerce-account.yxa2 .woocommerce-MyAccount-navigation { display: none !important; }
  body.woocommerce-account.yxa2 .woocommerce-MyAccount-content { float: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; font-family: var(--yxa-font); }
  body.woocommerce-account.yxa2 .woocommerce-MyAccount-content :is(h2, h3) { font-family: var(--yxa-font) !important; font-size: 19px !important; font-weight: 800 !important; }
  body.woocommerce-account.yxa2 .woocommerce-MyAccount-content :is(table.shop_table, .woocommerce-Address, .woocommerce-order-details, .woocommerce-customer-details, fieldset, form.woocommerce-EditAccountForm, form.edit-account, .wt_sc_myaccount_coupons, .wcmamtx_order_card, .woocommerce-orders-table__row) {
    border: 0 !important; border-radius: 18px !important; background: #fff !important; box-shadow: var(--yxa-shadow);
  }
  body.woocommerce-account.yxa2 .woocommerce-MyAccount-content :is(form.woocommerce-EditAccountForm, form.edit-account, .woocommerce-Address) { padding: 16px !important; }
  body.woocommerce-account.yxa2 .woocommerce-MyAccount-content :is(input.input-text, select, textarea) {
    min-height: 50px; padding: 0 16px !important; border: 1.5px solid transparent !important; border-radius: 16px !important; background: #f1eef3 !important; box-shadow: none !important; font-size: 16px !important;
  }
  body.woocommerce-account.yxa2 .woocommerce-MyAccount-content :is(.button, button[type="submit"], .woocommerce-button) {
    min-height: 44px; padding: 0 20px !important; border: 0 !important; border-radius: 22px !important; background: var(--yxa-p) !important; color: #fff !important;
    font-family: var(--yxa-font) !important; font-size: 14.5px !important; font-weight: 700 !important; text-transform: none !important; letter-spacing: normal !important; box-shadow: none !important;
  }
  body.woocommerce-account.yxa2 .woocommerce-MyAccount-content a:not(.button):not(.woocommerce-button) { color: var(--yxa-p) !important; }
  body.woocommerce-account.yxa2 .woocommerce-MyAccount-content mark { background: var(--yxa-p2); color: var(--yxa-p); border-radius: 6px; padding: 0 4px; }
  body.woocommerce-account.yxa2 .woocommerce-MyAccount-content .woocommerce-info,
  body.woocommerce-account.yxa2 .woocommerce-MyAccount-content .woocommerce-message { border: 0 !important; border-radius: 16px; background: var(--yxa-p3) !important; color: var(--yxa-ink); }
  /* Orders (Customize My Account order cards): scrolling status pills, then thumb | details, actions underneath */
  body.woocommerce-account.yxa2 .wcmam-order-filters { display: flex !important; flex-wrap: nowrap !important; gap: 8px; overflow-x: auto; margin: 0 -16px 14px !important; padding: 2px 16px 4px; scrollbar-width: none; }
  body.woocommerce-account.yxa2 .wcmam-order-filters::-webkit-scrollbar { display: none; }
  body.woocommerce-account.yxa2 .wcmam-order-filters-button {
    flex: none; min-height: 0 !important; height: 36px; margin: 0 !important; padding: 0 14px !important; border: 1.5px solid #e2dce5 !important; border-radius: 18px !important;
    background: #fff !important; color: var(--yxa-ink) !important; font-family: var(--yxa-font) !important; font-size: 14px !important; font-weight: 600 !important; box-shadow: none !important;
  }
  body.woocommerce-account.yxa2 .wcmam-order-filters-button.active { border-color: var(--yxa-p) !important; background: var(--yxa-p) !important; color: #fff !important; }
  body.woocommerce-account.yxa2 .wcmam-order-card { margin: 0 0 12px !important; padding: 14px !important; border: 0 !important; border-radius: 20px !important; background: #fff !important; box-shadow: var(--yxa-shadow) !important; }
  body.woocommerce-account.yxa2 .wcmam-order-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 10px !important; padding: 0 !important; border: 0 !important; }
  body.woocommerce-account.yxa2 .wcmam-order-header .status { padding: 4px 10px !important; border-radius: 12px !important; font-size: 12px !important; font-weight: 800 !important; background: #f1eef3; color: var(--yxa-mute); }
  body.woocommerce-account.yxa2 .wcmam-order-header .status:is(.processing, .on-hold, .pending) { background: #fff3df; color: #c77a00; }
  body.woocommerce-account.yxa2 .wcmam-order-header .status.completed { background: var(--yxa-green2); color: var(--yxa-green); }
  body.woocommerce-account.yxa2 .wcmam-order-header .status:is(.failed, .cancelled) { background: #fdebee; color: #c8344e; }
  body.woocommerce-account.yxa2 .wcmam-order-header .order-date { color: var(--yxa-mute); font-size: 13px; }
  body.woocommerce-account.yxa2 .wcmam-order-body { display: grid !important; grid-template-columns: 72px 1fr; align-items: center; gap: 4px 12px; padding: 0 !important; }
  body.woocommerce-account.yxa2 .wcmam-order-body .product-thumb { width: 72px; height: 72px; border-radius: 14px; overflow: hidden; background: linear-gradient(160deg, #fff4f8, #fde3ee); }
  body.woocommerce-account.yxa2 .wcmam-order-body .product-thumb img { width: 100% !important; height: 100% !important; object-fit: contain; mix-blend-mode: multiply; }
  body.woocommerce-account.yxa2 .wcmam-order-body .order-details { min-width: 0; }
  body.woocommerce-account.yxa2 .wcmam-order-body .order-details h4 { margin: 0 0 2px !important; font-family: var(--yxa-font) !important; font-size: 16px !important; font-weight: 800 !important; }
  body.woocommerce-account.yxa2 .wcmam-order-body .order-details p { margin: 0 !important; color: #5d5866; font-size: 13.5px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  body.woocommerce-account.yxa2 .wcmam-order-body .order-total { margin-top: 4px; color: var(--yxa-p); font-size: 15px; font-weight: 800; }
  body.woocommerce-account.yxa2 .wcmam-order-body .order-total del { color: #a39dab; font-weight: 500; margin-right: 4px; }
  /* Icon-only actions are replaced by labelled buttons (built in 60-account.js) */
  body.woocommerce-account.yxa2 .wcmam-order-body:has(.yxa-order-actions) .order-arrow { display: none !important; }
  body.woocommerce-account.yxa2 .yxa-order-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--yxa-line); }
  body.woocommerce-account.yxa2 .woocommerce-MyAccount-content .yxa-order-actions a {
    display: inline-flex; align-items: center; height: 34px; padding: 0 12px; border: 1.5px solid var(--yxa-p); border-radius: 17px; white-space: nowrap;
    color: var(--yxa-p) !important; font-size: 13px; font-weight: 700; line-height: 1; text-decoration: none !important;
  }
  body.woocommerce-account.yxa2 .woocommerce-MyAccount-content .yxa-order-actions a.is-main:not(.button) { background: var(--yxa-p); color: #fff !important; }
  /* Order actions: secondary buttons share one row; with three or more, "View & Track" gets its own full-width row */
  body.woocommerce-account.yxa2 .yxa-order-actions { justify-content: stretch; }
  body.woocommerce-account.yxa2 .woocommerce-MyAccount-content .yxa-order-actions a { flex: 1 1 0; justify-content: center; min-width: 0; height: 38px; border-radius: 19px; }
  body.woocommerce-account.yxa2 .yxa-order-actions:has(> a:nth-child(3)) a.is-main { flex-basis: 100%; order: 9; }

  /* Notices and intro lines: one soft purple box, no theme icon */
  body.woocommerce-account.yxa2 .woocommerce-MyAccount-content :is(.woocommerce-info, .woocommerce-message, .woocommerce-error),
  body.woocommerce-account.yxa2 .woocommerce-MyAccount-content > p:first-of-type {
    margin: 0 0 12px !important; padding: 12px 14px !important; border: 0 !important; border-radius: 14px !important; background: var(--yxa-p3) !important;
    color: var(--yxa-ink) !important; font-size: 14px !important; line-height: 1.45 !important; box-shadow: none !important;
  }
  body.woocommerce-account.yxa2 .woocommerce-MyAccount-content :is(.woocommerce-info, .woocommerce-message, .woocommerce-error)::before,
  body.woocommerce-account.yxa2 .woocommerce-MyAccount-content > p::before { display: none !important; }
  body.woocommerce-account.yxa2 .woocommerce-MyAccount-content .woocommerce-info .button { float: none !important; display: flex; width: 100%; margin: 10px 0 0 !important; }
  /* Buttons: label centered; the page's main action is full width */
  body.woocommerce-account.yxa2 .woocommerce-MyAccount-content :is(.button, button[type="submit"], .woocommerce-button) { display: inline-flex !important; align-items: center; justify-content: center; line-height: 1.2 !important; }
  body.woocommerce-account.yxa2 .woocommerce-MyAccount-content :is(form > p > button[type="submit"], form .form-row > button[type="submit"]),
  body.woocommerce-account.yxa2 .woocommerce-MyAccount-content > a.button { width: 100%; height: 52px; margin-top: 6px !important; border-radius: 26px !important; font-size: 16px !important; }

  /* Addresses: two separate cards, title with a small Edit pill, plain (not italic) address */
  body.woocommerce-account.yxa2 .woocommerce-Addresses { display: flex !important; flex-direction: column; gap: 12px; margin: 0 !important; }
  body.woocommerce-account.yxa2 .woocommerce-Addresses::before, body.woocommerce-account.yxa2 .woocommerce-Addresses::after { content: none !important; }
  body.woocommerce-account.yxa2 .woocommerce-Address { float: none !important; width: auto !important; margin: 0 !important; }
  body.woocommerce-account.yxa2 .woocommerce-Address-title { display: flex !important; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 10px !important; }
  body.woocommerce-account.yxa2 .woocommerce-Address-title::before, body.woocommerce-account.yxa2 .woocommerce-Address-title::after { content: none !important; }
  body.woocommerce-account.yxa2 .woocommerce-Address-title :is(h2, h3) { float: none !important; margin: 0 !important; font-size: 17px !important; }
  body.woocommerce-account.yxa2 .woocommerce-MyAccount-content .woocommerce-Address-title a.edit {
    float: none !important; flex: none; padding: 6px 14px !important; border-radius: 16px !important; background: var(--yxa-p2) !important; font-size: 13px !important; line-height: 1.2 !important; font-weight: 700; font-style: normal; text-decoration: none !important;
  }
  body.woocommerce-account.yxa2 .woocommerce-Address address { margin: 0 !important; color: #5d5866; font-size: 14.5px; font-style: normal !important; line-height: 1.6; }

  /* Account details: password change is a titled section inside the same card, not a card in a card */
  body.woocommerce-account.yxa2 .woocommerce-MyAccount-content fieldset { margin: 18px 0 6px !important; padding: 14px 0 0 !important; border: 0 !important; border-top: 1px solid var(--yxa-line) !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; }
  body.woocommerce-account.yxa2 .woocommerce-MyAccount-content fieldset legend { float: left; width: 100%; margin: 0 0 10px !important; padding: 0 !important; color: var(--yxa-ink); font-size: 17px; font-weight: 800; }
  body.woocommerce-account.yxa2 .woocommerce-MyAccount-content fieldset legend + * { clear: both; }
  body.woocommerce-account.yxa2 .woocommerce-MyAccount-content :is(#account_display_name_description, .form-row em, .description) { display: block; margin-top: 6px; color: var(--yxa-mute); font-size: 12.5px; font-style: normal !important; line-height: 1.45; }
  body.woocommerce-account.yxa2 .woocommerce-MyAccount-content .form-row label { color: var(--yxa-ink); font-size: 14px; font-weight: 700; line-height: 1.35; }

  /* My Coupons: a card per list, a friendly empty state, sorting only when there is something to sort */
  body.woocommerce-account.yxa2 :is(.wt-mycoupons, .wt-used-coupons) { margin: 0 0 12px; padding: 16px; border-radius: 20px; background: #fff; box-shadow: var(--yxa-shadow); }
  body.woocommerce-account.yxa2 :is(.wt-mycoupons, .wt-used-coupons) h4 { margin: 0 0 12px !important; font-family: var(--yxa-font) !important; font-size: 17px !important; font-weight: 800 !important; }
  body.woocommerce-account.yxa2 .wt-mycoupons:has(.wt_sc_myaccount_no_available_coupons) .wt_sc_available_coupon_sort_by { display: none; }
  body.woocommerce-account.yxa2 .wt_sc_available_coupon_sort_by { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; color: var(--yxa-mute); font-size: 13px; }
  body.woocommerce-account.yxa2 .wt_sc_available_coupon_sort_by select { min-height: 36px !important; padding: 0 12px !important; border-radius: 18px !important; font-size: 14px !important; }
  body.woocommerce-account.yxa2 :is(.wt_sc_myaccount_no_available_coupons, .wt_sc_myaccount_no_used_coupons) {
    position: relative; padding: 14px 14px 14px 58px; border-radius: 14px; background: #faf7fb; color: var(--yxa-mute); font-size: 14px; line-height: 1.4;
  }
  body.woocommerce-account.yxa2 :is(.wt_sc_myaccount_no_available_coupons, .wt_sc_myaccount_no_used_coupons)::before {
    content: ""; position: absolute; left: 14px; top: 50%; width: 32px; height: 32px; margin-top: -16px; border-radius: 50%;
    background: var(--yxa-p2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23851b87' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12V4h8l10 10-8 8z'/%3E%3Ccircle cx='7.5' cy='8' r='1.5'/%3E%3C/svg%3E") center / 17px no-repeat;
  }

  /* Smart Coupons in the app colors */
  body.woocommerce-account.yxa2 .wt_sc_single_coupon { width: 100% !important; max-width: none !important; margin: 0 0 12px !important; border-radius: 18px !important; background: linear-gradient(135deg, var(--yxa-p), #b44bb6) !important; box-shadow: 0 8px 20px rgba(133, 27, 135, .2); }

  /* Customize My Account extras the app does not have */
  body.woocommerce-account.yxa2 :is(.sb-spending-chart-card, .wcmamtx_upload_div, #wcmamtx-avatar-content-output) { display: none !important; }

  /* ---------- Sign in / create account ---------- */
  html.yxa-signin body.yxa2 .yx-commerce-page > :is(h1, .yx-commerce-note) { display: none !important; }
  .yxa-signin-intro { padding: 0 8px 14px; text-align: center; }
  .yxa-signin-intro h2 { font-family: var(--yxa-font); font-size: 27px !important; font-weight: 800 !important; }
  .yxa-signin-intro p { margin-top: 4px !important; color: var(--yxa-mute); font-family: var(--yxa-font); font-size: 15px; }
  .yxa-signin-seg { margin: 0 0 14px; }
  html.yxa-signin #customer_login { display: block !important; }
  html.yxa-signin #customer_login > [hidden] { display: none !important; }
  html.yxa-signin #customer_login > div { float: none !important; width: auto !important; }
  html.yxa-signin #customer_login h2 { display: none; }
  html.yxa-signin form:is(.woocommerce-form-login, .woocommerce-form-register) {
    margin: 0 !important; padding: 18px 16px !important; border: 0 !important; border-radius: 22px !important; background: #fff !important; box-shadow: var(--yxa-shadow); font-family: var(--yxa-font);
  }
  html.yxa-signin form label { color: var(--yxa-ink); font-size: 14px; font-weight: 700; }
  html.yxa-signin form input.input-text { min-height: 50px; padding: 0 16px !important; border: 1.5px solid transparent !important; border-radius: 16px !important; background: #f1eef3 !important; font-size: 16px !important; }
  html.yxa-signin form input.input-text:focus { border-color: var(--yxa-p) !important; background: #fff !important; outline: 0; }
  html.yxa-signin form button[type="submit"] {
    width: 100%; height: 52px; margin-top: 8px; border: 0 !important; border-radius: 26px !important; background: var(--yxa-p) !important; color: #fff !important;
    font-family: var(--yxa-font) !important; font-size: 16px !important; font-weight: 800 !important; text-transform: none !important; letter-spacing: normal !important;
  }
  html.yxa-signin .woocommerce-LostPassword { text-align: right; }
  html.yxa-signin .woocommerce-LostPassword a { color: var(--yxa-p) !important; font-weight: 700; }

  /* The site's own account flow (yingxi-customer-accounts): one white card, switch on top, Google first, then email */
  html.yxa-signin body.yxa2 .yx-commerce-page { padding: 0 16px 120px !important; }
  html.yxa-signin .yxa-signin-intro { padding: 4px 8px 16px; }
  html.yxa-signin .yxa-signin-intro .yxa-join-art { margin-bottom: 6px; }
  html.yxa-signin .yxa-signin-intro h2 { margin: 0 !important; color: var(--yxa-ink); font-size: 27px !important; line-height: 1.2 !important; letter-spacing: -.01em; }
  html.yxa-signin :is(.yxca-auth, .yxca-single) { display: block !important; max-width: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; font-family: var(--yxa-font); }
  html.yxa-signin .yxca-intro[hidden] { display: none !important; }
  html.yxa-signin :is(.yxca-form-card, .yxca-single) {
    display: flex; flex-direction: column; padding: 18px 16px 20px !important; border: 0 !important; border-radius: 24px !important; background: #fff !important; box-shadow: var(--yxa-shadow) !important;
  }
  html.yxa-signin .yxca-form-card > .yxca-tabs { order: -2; }
  html.yxa-signin .yxca-form-card > .yxca-google { order: -1; }
  html.yxa-signin .yxca-tabs { display: flex; margin: 0 0 18px; padding: 4px; border: 0; border-radius: 26px; background: #f1eef3; }
  html.yxa-signin .yxca-tabs a {
    flex: 1; display: flex; align-items: center; justify-content: center; height: 42px; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 21px;
    color: var(--yxa-mute) !important; font-size: 15px; font-weight: 700; text-decoration: none !important;
  }
  html.yxa-signin .yxca-tabs a.is-active { background: #fff; color: var(--yxa-p) !important; box-shadow: 0 2px 8px rgba(48, 22, 60, .1); }
  html.yxa-signin .yxca-google { display: flex; flex-direction: column; align-items: center; min-height: 44px; margin: 0; }
  html.yxa-signin .yxca-google-button { display: flex; justify-content: center; width: 100%; }
  html.yxa-signin .yxca-google-status { margin: 6px 0 0 !important; color: var(--yxa-mute); font-size: 13px; text-align: center; }
  html.yxa-signin .yxca-auth-divider { display: flex; align-items: center; gap: 12px; margin: 16px 0 !important; color: var(--yxa-mute); font-size: 13px; font-weight: 600; }
  html.yxa-signin .yxca-auth-divider::before, html.yxa-signin .yxca-auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--yxa-line); }
  html.yxa-signin .yxca-auth-divider span { padding: 0 !important; background: none !important; }
  html.yxa-signin :is(.yxca-form-card, .yxca-single) > h2 { margin: 0 0 6px !important; font-size: 22px !important; font-weight: 800 !important; }
  html.yxa-signin :is(.yxca-form-card, .yxca-single) > p { margin: 0 0 12px !important; color: var(--yxa-mute); font-size: 14px; line-height: 1.5; }
  html.yxa-signin :is(.yxca-form-card, .yxca-single) form { margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; }
  html.yxa-signin :is(.yxca-form-card, .yxca-single) .form-row { margin: 0 0 14px !important; padding: 0 !important; }
  html.yxa-signin :is(.yxca-form-card, .yxca-single) label { display: block; margin: 0 0 6px; color: var(--yxa-ink); font-size: 14px; font-weight: 700; }
  html.yxa-signin :is(.yxca-form-card, .yxca-single) :is(input[type="email"], input[type="password"], input[type="text"], input.input-text) {
    width: 100%; min-height: 52px !important; padding: 0 16px !important; border: 1.5px solid transparent !important; border-radius: 16px !important;
    background: #f1eef3 !important; box-shadow: none !important; color: var(--yxa-ink); font-family: var(--yxa-font); font-size: 16px !important;
  }
  html.yxa-signin :is(.yxca-form-card, .yxca-single) input:focus { border-color: var(--yxa-p) !important; background: #fff !important; outline: 0 !important; }
  html.yxa-signin :is(.yxca-form-card, .yxca-single) .yxca-password-field input { padding: 0 74px 0 16px !important; }
  html.yxa-signin .yxca-password-field .yxca-toggle { top: 6px !important; color: var(--yxa-p) !important; font-weight: 800 !important; }
  html.yxa-signin .yxca-form-options { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: -2px 0 14px; font-size: 14px; }
  html.yxa-signin .yxca-form-options label { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 600; }
  html.yxa-signin .yxca-form-options input { accent-color: var(--yxa-p); width: 18px; height: 18px; margin: 0; }
  html.yxa-signin :is(.yxca-form-options, .yxca-single) a { color: var(--yxa-p) !important; font-weight: 700; text-decoration: none !important; }
  html.yxa-signin :is(.yxca-form-card, .yxca-single) button[type="submit"]:not(.yxca-resend-link) {
    width: 100%; min-height: 54px !important; margin: 4px 0 0; border: 0 !important; border-radius: 27px !important; background: var(--yxa-p) !important; color: #fff !important;
    font-family: var(--yxa-font) !important; font-size: 17px !important; font-weight: 800 !important; text-transform: none !important; letter-spacing: normal !important;
    box-shadow: 0 6px 16px rgba(133, 27, 135, .28) !important;
  }
  html.yxa-signin :is(.yxca-password-hint, .woocommerce-privacy-policy-text) { color: var(--yxa-mute); font-size: 13px; line-height: 1.5; }
  html.yxa-signin .yxca-code-input { border-radius: 18px !important; }
  /* Under the form: one fold-away section; every group is a full-width card with divided rows */
  .yxa-signin-extras { margin: 16px 0 0; }
  .yxa-extras-toggle {
    display: flex !important; align-items: center; justify-content: space-between; gap: 10px; width: 100%; height: 52px; margin: 0 !important; padding: 0 18px !important;
    border: 0 !important; border-radius: 26px !important; background: #fff !important; box-shadow: var(--yxa-shadow) !important;
    color: var(--yxa-ink) !important; font-family: var(--yxa-font) !important; font-size: 15px !important; font-weight: 700 !important; text-transform: none !important; letter-spacing: normal !important;
  }
  .yxa-on .yxa-extras-toggle svg { width: 18px; height: 18px; color: var(--yxa-p); transition: transform .2s; }
  .yxa-extras-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
  .yxa-signin-extras .yxa-menu-head { margin: 20px 4px 8px !important; }
  .yxa-signin-extras .yxa-group { list-style: none; margin: 0 !important; padding: 2px 0 !important; border-radius: 20px; background: #fff; box-shadow: var(--yxa-shadow); overflow: hidden; }
  .yxa-signin-extras .yxa-group > li { display: block; margin: 0 !important; padding: 0 !important; }
  .yxa-signin-extras .yxa-group > li + li { border-top: 1px solid #f1edf3; }
  .yxa-signin-extras .yxa-perks > li { display: flex; align-items: center; gap: 12px; padding: 12px 14px !important; font-size: 15px; font-weight: 600; line-height: 1.35; }
  .yxa-signin-extras .yxa-menu a { padding: 12px 14px; border-radius: 0; background: none; box-shadow: none; }
  html.yxa-signin .yxca-inline-help { margin: 16px 0 0 !important; }

  /* ---------- Policy and content pages ---------- */
  html.yxa-doc body.yxa2 > main { background: var(--yxa-bg); }
  html.yxa-doc .yx-editorial { padding: 4px 16px 20px !important; font-family: var(--yxa-font); color: #3f3a47; }
  html.yxa-doc .yx-editorial .yx-eyebrow { margin: 0 0 4px; color: var(--yxa-p); font-size: 12px; font-weight: 800; letter-spacing: .1em; }
  html.yxa-doc .yx-editorial h1 { margin: 0 0 10px !important; color: var(--yxa-ink); font-family: var(--yxa-font) !important; font-size: 30px !important; font-weight: 800 !important; line-height: 1.15 !important; }
  html.yxa-doc .yx-editorial .yxa-dup { display: none; }
  html.yxa-doc .yx-editorial > p { font-size: 16px; line-height: 1.6; }
  html.yxa-doc .yx-editorial :is(h2) { margin: 22px 0 10px !important; font-family: var(--yxa-font) !important; font-size: 21px !important; font-weight: 800 !important; }
  .yxa-doc-sec { margin: 12px 0 0; padding: 16px; border-radius: 18px; background: #fff; box-shadow: var(--yxa-shadow); }
  .yxa-doc-sec h3 { margin: 0 0 6px !important; color: var(--yxa-ink); font-family: var(--yxa-font) !important; font-size: 17px !important; font-weight: 800 !important; }
  .yxa-doc-sec :is(p, li) { margin: 0 0 8px; font-size: 15px; line-height: 1.6; }
  .yxa-doc-sec :is(p, ul, ol):last-child { margin-bottom: 0; }
  .yxa-doc-sec a, html.yxa-doc .yx-editorial a { color: var(--yxa-p) !important; font-weight: 700; }
  html.yxa-doc .yx-editorial img { max-width: 100%; height: auto; border-radius: 16px; }
  html.yxa-doc .yx-editorial table { display: block; overflow-x: auto; }

  /* Plain WordPress pages (privacy policy, track order, balloon planner): side margins like every other page */
  html.yxa-content .yx-legacy-page:not(:has(> .elementor)) { box-sizing: border-box; padding: 6px 16px 24px !important; font-family: var(--yxa-font); color: #3f3a47; }
  html.yxa-content .yx-legacy-page > h2 { margin: 22px 0 8px !important; color: var(--yxa-ink); font-family: var(--yxa-font) !important; font-size: 20px !important; font-weight: 800 !important; line-height: 1.25 !important; }
  html.yxa-content .yx-legacy-page > :is(p, ul, ol) { font-size: 15px; line-height: 1.6; }
  /* Track order: intro text, then the two fields stacked and a full-width button */
  html.yxa-content form.woocommerce-form-track-order { margin: 0 !important; padding: 16px !important; border: 0 !important; border-radius: 20px; background: #fff; box-shadow: var(--yxa-shadow); }
  html.yxa-content form.woocommerce-form-track-order > p:first-child { margin: 0 0 14px !important; color: var(--yxa-mute); font-size: 14px; line-height: 1.5; }
  html.yxa-content form.woocommerce-form-track-order .form-row { float: none !important; width: 100% !important; margin: 0 0 12px !important; padding: 0 !important; }
  html.yxa-content form.woocommerce-form-track-order label { display: block; margin: 0 0 6px; color: var(--yxa-ink); font-size: 14px; font-weight: 700; }
  html.yxa-content form.woocommerce-form-track-order input.input-text {
    width: 100%; min-height: 50px; padding: 0 16px !important; border: 1.5px solid transparent !important; border-radius: 16px !important; background: #f1eef3 !important; box-shadow: none !important; font-size: 16px !important;
  }
  html.yxa-content form.woocommerce-form-track-order input.input-text:focus { border-color: var(--yxa-p) !important; background: #fff !important; outline: 0 !important; }
  html.yxa-content form.woocommerce-form-track-order button {
    width: 100%; height: 52px; margin: 4px 0 0 !important; border: 0 !important; border-radius: 26px !important; background: var(--yxa-p) !important; color: #fff !important;
    font-family: var(--yxa-font) !important; font-size: 16px !important; font-weight: 800 !important; text-transform: none !important; box-shadow: none !important;
  }

  /* Expandable FAQ rows: a purple chevron instead of the browser's triangle */
  html.yxa-on details > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; list-style: none; cursor: pointer; }
  html.yxa-on details > summary::-webkit-details-marker { display: none; }
  html.yxa-on details > summary::marker { content: ""; }
  html.yxa-on details > summary::after {
    content: ""; flex: none; width: 8px; height: 8px; margin-right: 4px; border-right: 2px solid var(--yxa-p); border-bottom: 2px solid var(--yxa-p);
    transform: rotate(45deg) translateY(-2px); transition: transform .2s;
  }
  html.yxa-on details[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
}

/* Checkout (WooCommerce's own form, app layout) and the accepted-payment marks shared with the cart */
@media (max-width: 1023.98px) {
  /* ---------- Payment marks ---------- */
  .yxa-payi { width: 38px !important; height: 24px !important; flex: none; }
  /* Under the checkout button: one centered "Secure checkout" line, then one row of marks */
  .yxa-pay { display: block; margin-top: 14px; text-align: center; }
  .yxa-pay p { display: flex; align-items: center; justify-content: center; gap: 5px; margin: 0 0 10px !important; color: var(--yxa-mute); font-size: 13px; font-weight: 600; line-height: 1; }
  .yxa-on .yxa-pay p svg { width: 14px; height: 14px; color: var(--yxa-green); }
  .yxa-pay-icons { display: flex; justify-content: center; flex-wrap: nowrap; gap: 6px; }

  /* Cart shipping, same rates as the desktop cart */
  .yxa-summary .yxa-ship-opts { align-items: flex-start; }
  .yxa-ship-opts > div { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
  .yxa-ship-opts label { display: flex; align-items: center; gap: 6px; font-weight: 700; }
  .yxa-ship-opts input { accent-color: var(--yxa-p); width: 17px; height: 17px; margin: 0; }
  /* Address line under Shipping: small, one line, "Change" on the right */
  .yxa-ship-to { display: flex; align-items: center; gap: 10px; margin: -4px 0 8px !important; color: var(--yxa-mute); font-size: 13px; line-height: 1.4; }
  .yxa-ship-to span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .yxa-ship-to a { flex: none; color: var(--yxa-p) !important; font-weight: 700; }


  /* ---------- Checkout: hosted single-page store checkout look ---------- */
  html.yxa-co body.yxa2 { background: #fff !important; }
  html.yxa-co .yxa-steps, html.yxa-co .yxa-tabbar, html.yxa-co .yxa-tabbar-show { display: none !important; }
  html.yxa-co #yxa-root .yxa-top { grid-template-columns: minmax(0, 1fr) auto; padding: 0 16px; background: #fff !important; border-bottom: 1px solid #e6e6e6; }
  html.yxa-co #yxa-root .yxa-top > span:first-child { display: none; }
  html.yxa-co #yxa-root .yxa-logo { justify-self: start; }
  html.yxa-co body.yxa2 .yx-commerce-page { width: 100% !important; max-width: 560px !important; margin: 0 auto !important; padding: 0 0 40px !important; font-family: var(--yxa-font); color: #1f1b24; }
  html.yxa-co body.yxa2 .yx-commerce-page > :is(.yx-breadcrumb, h1) { display: none !important; }
  html.yxa-co .yx-commerce-page .woocommerce { display: block; }
  html.yxa-co .woocommerce > .woocommerce-notices-wrapper:empty { display: none; }
  html.yxa-co .woocommerce > :is(.woocommerce-notices-wrapper, .woocommerce-info, .woocommerce-message, .woocommerce-error, .yxa-co-note) { margin: 14px 16px 0 !important; }
  html.yxa-co :is(.woocommerce-info, .woocommerce-message, .woocommerce-error, .yxa-co-note) {
    display: block; padding: 12px 14px !important; border: 1px solid #e3c9e4 !important; border-radius: 8px !important; background: #fbf4fb !important;
    color: #3a2f3f !important; font-size: 13.5px !important; line-height: 1.5 !important; box-shadow: none !important;
  }
  html.yxa-co .woocommerce-error { border-color: #f2b8c4 !important; background: #fdf0f2 !important; }
  html.yxa-co :is(.woocommerce-info, .woocommerce-message, .woocommerce-error)::before { display: none !important; }
  html.yxa-co .woocommerce-info a { color: var(--yxa-p) !important; font-weight: 700; }

  /* Order summary band */
  .yxa-co-sum { border-bottom: 1px solid #e6e6e6; background: #f5f5f5; }
  .yxa-co-sum-head {
    display: flex !important; align-items: center; justify-content: space-between; width: 100%; height: 54px; padding: 0 16px !important; margin: 0 !important;
    border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important;
    font-family: var(--yxa-font) !important; text-transform: none !important; letter-spacing: normal !important;
  }
  .yxa-co-sum-head span { display: flex; align-items: center; gap: 4px; color: var(--yxa-p); font-size: 14.5px; font-weight: 600; }
  .yxa-on .yxa-co-sum-head svg { width: 16px; height: 16px; transition: transform .2s; }
  .yxa-co-sum-head[aria-expanded="true"] svg { transform: rotate(180deg); }
  .yxa-co-sum-head b { color: #1f1b24; font-size: 18px; font-weight: 800; }
  .yxa-co-sum-body { padding: 4px 16px 16px; }
  .yxa-co-item { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
  .yxa-co-img { position: relative; flex: none; width: 60px; height: 60px; border: 1px solid #e3e3e3; border-radius: 8px; background: #fff; }
  .yxa-co-img img { width: 100%; height: 100%; object-fit: contain; padding: 4px; border-radius: 8px; }
  .yxa-co-img i { position: absolute; top: -8px; right: -8px; min-width: 21px; height: 21px; padding: 0 6px; border-radius: 11px; background: #666; color: #fff; font-size: 11.5px; font-weight: 700; font-style: normal; line-height: 21px; text-align: center; }
  .yxa-co-img--sm { width: 44px; height: 44px; }
  .yxa-co-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; line-height: 1.3; }
  .yxa-co-name small { display: block; color: #707070; font-size: 12.5px; font-weight: 500; }
  .yxa-co-item b { font-size: 14px; font-weight: 700; }
  .yxa-co-coupon { margin: 8px 0; }
  .yxa-co-coupon .woocommerce-info { margin: 0 !important; background: transparent !important; border: 0 !important; padding: 6px 0 !important; }
  .yxa-co-coupon form.checkout_coupon { display: flex; gap: 8px; margin: 6px 0 0 !important; padding: 0 !important; border: 0 !important; }
  .yxa-co-coupon form.checkout_coupon[style*="none"] { display: none !important; }
  .yxa-co-coupon form.checkout_coupon > p:not(.form-row) { display: none; }
  .yxa-co-coupon form.checkout_coupon .form-row { flex: 1; width: auto !important; float: none !important; margin: 0 !important; padding: 0 !important; }
  .yxa-co-coupon form.checkout_coupon .form-row-last { flex: none; }
  .yxa-co-coupon input.input-text { width: 100%; height: 48px; padding: 0 13px !important; border: 1px solid #d9d9d9 !important; border-radius: 6px !important; background: #fff !important; font-size: 15px !important; box-shadow: none !important; }
  .yxa-co-coupon button { height: 48px; padding: 0 18px !important; border: 0 !important; border-radius: 6px !important; background: #e8e8e8 !important; color: #555 !important; font-size: 14px !important; font-weight: 700 !important; text-transform: none !important; }
  .yxa-co-lines { border-top: 1px solid #e3e3e3; padding-top: 10px; }
  .yxa-co-lines div { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: 14px; }
  .yxa-co-lines .is-total { padding-top: 8px; font-size: 18px; font-weight: 800; }

  /* Sections and in-field labels */
  html.yxa-on.yxa-co form.checkout { display: block; margin: 0 !important; padding: 0 16px; }
  html.yxa-co #customer_details { display: none !important; }
  .yxa-co-sec { margin: 26px 0 0; }
  .yxa-co-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
  .yxa-co-h h2 { margin: 0 !important; color: #1f1b24; font-family: var(--yxa-font) !important; font-size: 21px !important; font-weight: 800 !important; letter-spacing: -.01em; text-transform: none !important; }
  .yxa-co-h a { color: var(--yxa-p) !important; font-size: 14px; text-decoration: underline !important; }
  .yxa-co-payh { display: block; margin: 30px 0 12px !important; }
  .yxa-co-payh p { margin: 2px 0 0 !important; color: #707070; font-size: 13.5px; }
  html.yxa-co .woocommerce-billing-fields > h3 { display: none !important; }
  html.yxa-co .yx-card-billing-note { margin: -4px 0 12px !important; color: #707070; font-size: 12.5px !important; line-height: 1.45 !important; }
  html.yxa-co :is(.woocommerce-billing-fields, .woocommerce-shipping-fields, .woocommerce-additional-fields) { margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; }
  html.yxa-co :is(.woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper) { display: block; }
  html.yxa-on.yxa-co form.checkout .form-row { position: relative; float: none !important; width: 100% !important; margin: 0 0 12px !important; padding: 0 !important; }
  html.yxa-on.yxa-co form.checkout .form-row::after { content: none; }
  html.yxa-on.yxa-co form.checkout .yxa-fl > label {
    position: absolute; z-index: 2; left: 14px; top: 7px; margin: 0 !important; color: #707070 !important; font-size: 11.5px !important; font-weight: 500 !important; line-height: 1.2;
    pointer-events: none; opacity: 0; transition: opacity .15s;
  }
  html.yxa-on.yxa-co form.checkout .yxa-fl > label .optional { display: none; }
  html.yxa-on.yxa-co form.checkout label abbr.required { color: #d12a2a !important; text-decoration: none !important; border: 0 !important; font-weight: 700; }
  html.yxa-on.yxa-co form.checkout .yxa-err { margin: 6px 2px 0 !important; color: #d12a2a; font-size: 13px; line-height: 1.35; }
  html.yxa-on.yxa-co form.checkout .yxa-bad > label { color: #d12a2a !important; }

  /* "!" box at the top: missing fields and WooCommerce / PayPal errors */
  .yxa-co-alert { display: flex; gap: 12px; margin: 14px 16px 0; padding: 14px 16px; border: 1px solid #f3c2c2; border-radius: 10px; background: #fdf1f1; color: #3d2626; font-size: 14px; line-height: 1.45; }
  .yxa-co-alert-i { flex: none; display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; border: 2px solid #d12a2a; border-radius: 50%; color: #d12a2a; font-size: 13px; font-weight: 900; line-height: 1; }
  .yxa-co-alert b { display: block; margin-bottom: 4px; font-weight: 800; }
  .yxa-co-alert ul { margin: 0 !important; padding: 0 0 0 18px !important; }
  .yxa-co-alert li { margin: 2px 0; list-style: disc; }
  html.yxa-co .woocommerce-NoticeGroup-checkout, html.yxa-co .yxm-steps, html.yxa-co .woocommerce-notices-wrapper > .woocommerce-error { display: none !important; }
  html.yxa-on.yxa-co form.checkout .woocommerce-input-wrapper::before, html.yxa-on.yxa-co form.checkout .form-row::before { content: none !important; display: none !important; }

  /* Express checkout */
  .yxa-co-express { margin: 16px 16px 0; }
  .yxa-co-xh { margin: 0 0 10px !important; color: #707070; font-size: 14px; text-align: center; }
  .yxa-co-xbtns { display: grid; gap: 10px; }
  .yxa-co-x {
    display: flex !important; align-items: center; justify-content: center; gap: 3px; height: 48px; margin: 0 !important; padding: 0 8px !important; border: 0 !important; border-radius: 8px !important;
    box-shadow: none !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important; font-size: 21px !important; font-weight: 600 !important; line-height: 1 !important; cursor: pointer;
  }
  .yxa-co-x--pp { background: #ffc439 !important; }
  .yxa-co-x--pp i { font-family: Verdana, Arial, sans-serif; font-size: 20px; font-weight: 800; font-style: italic; letter-spacing: -.02em; color: #253b80; }
  .yxa-co-x--pp i + i { margin-left: -3px; color: #179bd7; }
  .yxa-co-x--ap, .yxa-co-x--gp { background: #000 !important; color: #fff !important; }
  .yxa-on .yxa-co-x--ap svg { width: 17px; height: 20px; margin-top: -3px; }
  .yxa-co-x--gp b { font-family: Arial, sans-serif; font-weight: 700; background: conic-gradient(from -45deg, #ea4335 0 25%, #4285f4 0 50%, #34a853 0 75%, #fbbc05 0); -webkit-background-clip: text; background-clip: text; color: transparent; margin-right: 3px; }
  .yxa-co-or { display: flex; align-items: center; gap: 12px; margin: 16px 0 0; color: #8a8a8a; font-size: 13px; }
  .yxa-co-or::before, .yxa-co-or::after { content: ""; flex: 1; height: 1px; background: #e3e3e3; }
  @keyframes yxa-flash { 0%, 100% { box-shadow: 0 0 0 0 rgba(133, 27, 135, 0); } 30% { box-shadow: 0 0 0 4px rgba(133, 27, 135, .35); } }
  html.yxa-co #payment .yxa-flash { border-radius: 10px; animation: yxa-flash 1.4s ease 2; }
  html.yxa-on.yxa-co form.checkout :is(.yxa-filled, .yxa-fl-select) > label { opacity: 1; }
  html.yxa-on.yxa-co form.checkout :is(input.input-text, select:not(.select2-hidden-accessible), textarea):not(#yxa-a):not(#yxa-b),
  html.yxa-on.yxa-co form.checkout .select2-selection {
    width: 100% !important; height: 50px; min-height: 50px; padding: 0 14px !important; border: 1px solid #d9d9d9 !important; border-radius: 6px !important;
    background: #fff none !important; box-shadow: none !important; color: #1f1b24 !important; font-family: var(--yxa-font) !important; font-size: 16px !important; outline: 0 !important;
  }
  html.yxa-on.yxa-co form.checkout textarea:not(#yxa-a):not(#yxa-b):not(#yxa-c) { height: 90px !important; min-height: 90px !important; padding: 14px !important; }
  html.yxa-on.yxa-co form.checkout .yxa-filled input.input-text:not(#yxa-a):not(#yxa-b) { padding-top: 16px !important; }
  html.yxa-on.yxa-co form.checkout .yxa-filled textarea:not(#yxa-a):not(#yxa-b) { padding-top: 24px !important; }
  html.yxa-on.yxa-co form.checkout ::placeholder { color: #8a8a8a; opacity: 1; }
  html.yxa-on.yxa-co form.checkout .yxa-fl-select .select2-selection__rendered { padding: 14px 0 0 !important; line-height: 34px !important; color: #1f1b24 !important; }
  html.yxa-on.yxa-co form.checkout .yxa-fl-select select:not(.select2-hidden-accessible):not(#yxa-a):not(#yxa-b):not(#yxa-c) { padding-top: 16px !important; }
  html.yxa-on.yxa-co form.checkout .select2-selection__arrow { height: 48px !important; right: 8px !important; }
  html.yxa-on.yxa-co form.checkout :is(input.input-text, select, textarea):focus:not(#yxa-a):not(#yxa-b):not(#yxa-c), html.yxa-on.yxa-co form.checkout .select2-container--open .select2-selection { border-color: var(--yxa-p) !important; box-shadow: 0 0 0 1px var(--yxa-p) !important; }
  html.yxa-on.yxa-co form.checkout .woocommerce-invalid :is(input.input-text, select, .select2-selection):not(#yxa-a):not(#yxa-b):not(#yxa-c) { border-color: #dd1d1d !important; box-shadow: 0 0 0 1px #dd1d1d !important; }
  html.yxa-on.yxa-co form.checkout input[type="checkbox"], html.yxa-on.yxa-co form.checkout input[type="radio"] { accent-color: var(--yxa-p); width: 18px; height: 18px; margin: 0 !important; flex: none; }
  html.yxa-co #ship-to-different-address { margin: 4px 0 12px !important; font-size: 14.5px !important; font-weight: 500 !important; text-transform: none !important; letter-spacing: normal !important; }
  html.yxa-co #ship-to-different-address label, html.yxa-on.yxa-co form.checkout label.checkbox { display: flex; align-items: center; gap: 10px; font-weight: 500 !important; cursor: pointer; }

  /* Shipping method box */
  .yxa-co-ship { margin: 0 0 12px; }
  .yxa-co-empty { margin: 0 !important; padding: 16px; border-radius: 6px; background: #f5f5f5; color: #707070; font-size: 14px; line-height: 1.45; }
  .yxa-co-list { margin: 0 !important; padding: 0 !important; list-style: none; border: 1px solid #d9d9d9; border-radius: 6px; overflow: hidden; }
  .yxa-co-list li { display: flex; align-items: center; gap: 12px; min-height: 54px; margin: 0 !important; padding: 12px 14px !important; border-top: 1px solid #d9d9d9; font-size: 14.5px; cursor: pointer; }
  .yxa-co-list li:first-child { border-top: 0; }
  .yxa-co-list li > span:nth-child(2) { flex: 1; }
  .yxa-co-list li.is-on { background: #fbf4fb; box-shadow: inset 0 0 0 1px var(--yxa-p); }
  .yxa-co-radio { flex: none; width: 18px; height: 18px; border: 1px solid #bdbdbd; border-radius: 50%; background: #fff; }
  .is-on > .yxa-co-radio { border: 6px solid var(--yxa-p); }

  /* Review table stays in the page for WooCommerce but is shown through the summary band */
  html.yxa-co #order_review_heading, html.yxa-co .woocommerce-checkout-review-order-table { display: none !important; }
  html.yxa-co #order_review { width: 100% !important; float: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; }

  /* Payment options: one bordered list */
  html.yxa-co #payment { margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; }
  html.yxa-co #payment ul.payment_methods { margin: 0 !important; padding: 0 !important; border: 1px solid #d9d9d9 !important; border-radius: 6px !important; overflow: hidden; list-style: none; }
  html.yxa-co #payment ul.payment_methods > li { position: relative; margin: 0 !important; padding: 0 !important; border: 0 !important; border-top: 1px solid #d9d9d9 !important; background: #fff !important; }
  html.yxa-co #payment ul.payment_methods > li:first-child { border-top: 0 !important; }
  html.yxa-co #payment ul.payment_methods > li:has(> input:checked) { box-shadow: inset 0 0 0 1px var(--yxa-p); }
  html.yxa-co #payment ul.payment_methods > li:has(> input:checked) > label { background: #fbf4fb; }
  html.yxa-co #payment ul.payment_methods > li > input { position: absolute; opacity: 0; pointer-events: none; }
  html.yxa-co #payment ul.payment_methods > li > label {
    position: relative; display: flex !important; align-items: center; flex-wrap: wrap; gap: 6px 10px; min-height: 54px; margin: 0 !important; padding: 12px 14px 12px 44px !important;
    color: #1f1b24 !important; font-size: 15px !important; font-weight: 700 !important; cursor: pointer;
  }
  html.yxa-co #payment ul.payment_methods > li > label::before {
    content: ""; position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border: 1px solid #bdbdbd; border-radius: 50%; background: #fff; box-sizing: border-box;
  }
  html.yxa-co #payment ul.payment_methods > li:has(> input:checked) > label::before { border: 6px solid var(--yxa-p); }
  .yxa-co-marks { display: flex; gap: 4px; margin-left: auto; }
  html.yxa-co #payment .payment_box { margin: 0 !important; padding: 14px !important; border: 0 !important; border-top: 1px solid #d9d9d9 !important; border-radius: 0 !important; background: #f5f5f5 !important; color: #555; font-size: 13.5px; }
  html.yxa-co #payment .payment_box::before { display: none !important; }
  html.yxa-co #payment .payment_box input.input-text { height: 50px; border: 1px solid #d9d9d9 !important; border-radius: 6px !important; background: #fff !important; }

  /* Total row, notes and Pay now */
  html.yxa-co #payment .place-order { margin: 22px 0 0 !important; padding: 0 !important; }
  .yxa-co-totalrow { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; }
  .yxa-co-tl { flex: 1; display: flex; flex-direction: column; line-height: 1.25; }
  .yxa-co-tl b { font-size: 18px; font-weight: 800; }
  .yxa-co-tl small, .yxa-co-tv small { color: #707070; font-size: 12.5px; }
  .yxa-co-tv { display: flex; align-items: baseline; gap: 6px; }
  .yxa-co-tv b { font-size: 21px; font-weight: 800; }
  html.yxa-co #payment .place-order :is(p, .woocommerce-privacy-policy-text) { margin: 0 0 10px !important; color: #707070; font-size: 12.5px; line-height: 1.5; }
  html.yxa-co #place_order {
    width: 100% !important; height: 54px; margin: 6px 0 0 !important; border: 0 !important; border-radius: 8px !important; background: var(--yxa-p) !important; color: #fff !important;
    font-family: var(--yxa-font) !important; font-size: 17px !important; font-weight: 700 !important; letter-spacing: normal; text-transform: none !important; box-shadow: none !important;
  }
  html.yxa-co .ppc-button-wrapper { margin: 10px 0 0 !important; }
  .yxa-co-policies { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 26px 16px 0; padding-top: 16px; border-top: 1px solid #e6e6e6; }
  .yxa-co-policies a { color: var(--yxa-p) !important; font-size: 13px; text-decoration: underline !important; }
}
/* CheckoutWC (Lite) finishing touches in the YingXi purple, phones and desktop alike */
body.checkout-wc #cfw input:is([type="radio"], [type="checkbox"]):checked { background-color: #851b87 !important; border-color: #851b87 !important; }
/* CheckoutWC paints the checked radio with a black inset shadow */
body.checkout-wc #cfw input[type="radio"]:checked { box-shadow: inset 0 0 0 10px #851b87 !important; }
body.checkout-wc #cfw .cfw-arrow, body.checkout-wc #cfw .cfw-arrow path { fill: #851b87 !important; }
/* The theme's floating WhatsApp button sits on top of the form fields; checkout keeps it out of the way */
body.checkout-wc .qing-whatsapp-float { display: none !important; }