/* ==========================================================================
   My Shop — Factory Fresh system, working page.
   Everything is namespaced under #cwms so theme (Bricks) CSS cannot
   rearrange it. Responsive: launcher + bottom tab bar under 980px,
   permanent left rail above it.
   ========================================================================== */

#cwms {
  --lime: var(--cw-lime, #80bc00); --lime-deep: var(--cw-lime-deep, #5f8c00); --lime-wash: var(--cw-lime-wash, #f3f9e4); --lime-row: var(--cw-lime-row, #f9fcf0);
  --olive: var(--cw-olive, #16210a); --ink: var(--cw-ink, #263238); --ink2: var(--cw-ink-2, #52575a); --grey: var(--cw-grey, #6b6b6b); --faint: var(--cw-faint, #9a9a94);
  --ground: var(--cw-ground, #f7f7f5); --card: var(--cw-card, #fff); --line: var(--cw-line, #e7e5df); --line2: var(--cw-line-2, #d6d3ca);
  --rewards: var(--cw-rewards, #185aa6); --rewards-deep: var(--cw-rewards-deep, #12467f); --rewards-tint: var(--cw-rewards-tint, #e9f1fa); --rewards-line: var(--cw-rewards-line, #cdddf0);
  --amber: var(--cw-amber, #9a6414); --amber-tint: var(--cw-amber-tint, #fdf4e6); --amber-line: var(--cw-amber-line, #ecdcc0);
  --brick: var(--cw-brick, #a3372c); --brick-tint: var(--cw-brick-tint, #fbeeec); --brick-line: var(--cw-brick-line, #eed3ce);
  --fr-teal: var(--cw-campaign-teal, #28c5c5); --fr-amber: var(--cw-campaign-amber, #fc881d);

  background: var(--ground);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  padding-bottom: 96px;
}
body.cwms-body { margin: 0; padding: 0; background: var(--cw-ground, #f7f7f5); }

#cwms *, #cwms *::before, #cwms *::after { box-sizing: border-box; }
#cwms h1, #cwms h2, #cwms h3 { margin: 0; line-height: 1.2; text-wrap: balance; font-weight: 800; color: var(--ink); }
#cwms p { margin: 0; }
#cwms a { color: inherit; text-decoration: none; }
#cwms img { max-width: 100%; height: auto; display: block; }
#cwms button { font-family: inherit; cursor: pointer; }
#cwms button:focus-visible, #cwms a:focus-visible, #cwms input:focus-visible {
  outline: 3px solid rgba(128, 188, 0, 0.5); outline-offset: 2px;
}
#cwms [hidden] { display: none !important; }

/* ---------- strip + header ---------- */
.cwms-strip { background: var(--ink); color: var(--cw-on-ink, #dfe3e4); font-size: 12px; text-align: center; padding: 7px 14px; }
.cwms-strip b { color: var(--cw-lime-bright, #b5e048); font-weight: 700; }
.cwms-strip .woocommerce-Price-amount { color: var(--cw-lime-bright, #b5e048); }
.cwms-header { background: var(--card); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; }
.cwms-bar { display: flex; align-items: center; gap: 14px; padding: 13px 18px; max-width: 1120px; margin: 0 auto; }
.cwms-logo { font-weight: 800; font-size: 19px; letter-spacing: -0.01em; color: var(--cw-ink-2, #52575a); white-space: nowrap; }
.cwms-logo b { color: var(--lime); font-weight: 800; }
.cwms-barend { margin-left: auto; display: flex; align-items: center; gap: 14px; white-space: nowrap; }
.cwms-who { font-size: 13px; font-weight: 700; color: var(--ink2); }
.cwms-who:hover { color: var(--ink); }
.cwms-basket { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.cwms-basket i { display: inline-block; background: var(--lime); color: var(--olive); border-radius: 999px;
  font-style: normal; font-weight: 800; font-size: 11.5px; padding: 1px 8px; margin-left: 5px; font-variant-numeric: tabular-nums; }

/* Narrow phones: a long account name (e.g. "Laerskool Olienpark") must not
   push the basket off-screen — the bar shrinks and the name ellipsises. */
.cwms-bar { min-width: 0; }
.cwms-logo { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cwms-barend { min-width: 0; }
.cwms-who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cwms-basket { flex: 0 0 auto; }
@media (max-width: 520px) {
  .cwms-bar { gap: 10px; padding: 12px 14px; }
  .cwms-logo { font-size: 16px; }
  .cwms-barend { gap: 10px; }
  .cwms-who { max-width: 84px; font-size: 12px; }
  .cwms-basket { font-size: 12.5px; }
}
@media (max-width: 380px) {
  .cwms-who { max-width: 58px; }
  .cwms-logo { font-size: 15px; }
}

/* ---------- shell / adaptive layout ---------- */
.cwms-shell, .cwms-wrap { max-width: 1120px; margin: 0 auto; padding: 0 18px; }
.cwms-rail { display: none; }
.cwms-content { min-width: 0; }

@media (min-width: 980px) {
  #cwms { padding-bottom: 40px; }
  .cwms-wrap { display: grid; grid-template-columns: 244px minmax(0, 1fr); gap: 30px; align-items: start; }
  .cwms-rail {
    display: block; position: sticky; top: 78px; margin-top: 26px;
    background: var(--card); border: 1px solid var(--line); border-radius: 14px;
    overflow: hidden auto; max-height: calc(100vh - 104px);
  }
  .cwms-rail a { display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 11px 16px; font-size: 13.5px; font-weight: 600; color: var(--ink2); border-bottom: 1px solid var(--line); }
  .cwms-rail a:hover { background: var(--cw-lime-row, #f9fcf0); color: var(--ink); }
  .cwms-rail a.on { background: var(--lime-row); color: var(--ink); font-weight: 800; box-shadow: inset 3px 0 0 var(--lime); }
  .cwms-rail a b { font-size: 11px; font-weight: 800; background: var(--lime); color: var(--olive);
    border-radius: 999px; padding: 1px 8px; font-variant-numeric: tabular-nums; }
  .cwms-rail a b.q { background: var(--rewards-tint); color: var(--rewards); }
  .cwms-grp { padding: 12px 16px 5px; font-size: 10px; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.09em; color: var(--faint); border-bottom: 1px solid var(--line); background: var(--cw-lime-row, #f9fcf0); }
}

/* ---------- type ---------- */
.cwms-kicker { font-size: 12px; color: var(--cw-lime-dark, #4c7000); font-weight: 800; text-transform: uppercase; letter-spacing: 0.09em; }
.cwms-head { padding: 22px 0 0; }
.cwms-head h1 { font-size: 27px; letter-spacing: -0.02em; margin-top: 7px; }
.cwms-head h1 span { color: var(--lime-deep); }
.cwms-lede { font-size: 13px; color: var(--grey); padding: 0 2px 12px; }
.cwms-lede b { color: var(--ink); font-weight: 700; }
.cwms-sech { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 26px 2px 12px; }
.cwms-sech h2 { font-size: 18px; letter-spacing: -0.015em; }
.cwms-lnk { font-size: 12.5px; font-weight: 700; color: var(--lime-deep); }

@media (min-width: 980px) {
  .cwms-head { padding-top: 26px; }
  .cwms-head h1 { font-size: 32px; }
}

/* ---------- atoms ---------- */
.cwms-cta { display: inline-flex; align-items: center; justify-content: center; background: var(--lime);
  color: var(--olive); font-weight: 800; border: none; border-radius: 999px; padding: 11px 24px;
  font-size: 13.5px; transition: background 0.15s ease, transform 0.12s ease; }
.cwms-cta:hover { background: var(--cw-lime-deep, #5f8c00); }
.cwms-cta:active { transform: scale(0.98); }
.cwms-cta[disabled] { background: var(--line2); color: var(--grey); cursor: not-allowed; transform: none; }
.cwms-cta.sm { padding: 8px 18px; font-size: 12.5px; }
.cwms-ghost { display: inline-flex; align-items: center; justify-content: center; background: transparent;
  color: var(--ink); border: 1.5px solid var(--line2); border-radius: 999px; padding: 8px 16px;
  font-size: 12px; font-weight: 700; transition: border-color 0.15s ease, background 0.15s ease; }
.cwms-ghost:hover { border-color: var(--grey); background: var(--card); }
.cwms-panel { background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.cwms-pill { font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  border-radius: 999px; padding: 3px 9px; border: 1px solid transparent; display: inline-block; white-space: nowrap; }
.cwms-pill.done { background: var(--lime-wash); color: var(--cw-lime-dark, #4c7000); border-color: var(--cw-lime-line, #dcecb8); }
.cwms-pill.move { background: var(--amber-tint); color: var(--amber); border-color: var(--amber-line); }
.cwms-pill.wait { background: var(--brick-tint); color: var(--brick); border-color: var(--brick-line); }
.cwms-pill.coll { background: var(--rewards-tint); color: var(--rewards); border-color: var(--rewards-line); }
.cwms-acts { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* ---------- empty states ---------- */
.cwms-empty { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 26px 22px; }
.cwms-empty h1 { font-size: 26px; letter-spacing: -0.02em; margin: 6px 0 0; }
.cwms-empty h3 { font-size: 17px; }
.cwms-empty p { font-size: 13.5px; color: var(--ink2); margin-top: 8px; max-width: 60ch; }
.cwms-empty .cwms-acts { margin-top: 16px; }
.cwms-empty-lg { margin-top: 30px; padding: 34px 26px; }

/* ---------- hero ---------- */
.cwms-hero { display: block; margin-top: 16px; background: var(--lime-row); border: 1px solid var(--cw-lime-line, #dcecb8);
  border-radius: 14px; box-shadow: inset 3px 0 0 var(--lime); padding: 18px; transition: border-color 0.13s ease; }
.cwms-hero:hover { border-color: var(--lime); }
.cwms-hero h2 { font-size: 22px; letter-spacing: -0.015em; margin-top: 7px; }
.cwms-hfigs { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.cwms-hprice { font-weight: 800; font-size: 24px; color: var(--lime-deep); font-variant-numeric: tabular-nums; }
.cwms-hprice .woocommerce-Price-amount { color: var(--lime-deep); }
.cwms-hmeta { font-size: 12.5px; color: var(--grey); font-weight: 600; }
.cwms-hmeta b { color: var(--ink); font-weight: 800; font-variant-numeric: tabular-nums; }
.cwms-hrow { display: flex; align-items: center; gap: 12px; margin-top: 13px; flex-wrap: wrap; }
.cwms-hnote { font-size: 11.5px; color: var(--faint); }

/* ---------- launcher option cards (brand colours) ---------- */
.cwms-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (min-width: 620px) { .cwms-opts { grid-template-columns: repeat(3, 1fr); } }
.cwms-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; border-radius: 14px;
  padding: 16px; min-height: 132px; transition: filter 0.13s ease, transform 0.12s ease; }
.cwms-opt:hover { filter: brightness(1.06); }
.cwms-opt:active { transform: scale(0.99); }
.cwms-oic { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.cwms-oic svg { width: 20px; height: 20px; }
.cwms-ot { font-weight: 800; font-size: 15px; margin-top: auto; }
.cwms-os { font-size: 12px; font-weight: 600; line-height: 1.45; }
.cwms-opt.c-blue { background: var(--rewards); }
.cwms-opt.c-grey { background: var(--cw-ink-2, #52575a); }
.cwms-opt.c-ink  { background: var(--ink); }
.cwms-opt.c-blue .cwms-ot, .cwms-opt.c-grey .cwms-ot, .cwms-opt.c-ink .cwms-ot { color: #fff; }
.cwms-opt.c-blue .cwms-os, .cwms-opt.c-grey .cwms-os, .cwms-opt.c-ink .cwms-os { color: rgba(255,255,255,0.75); }
.cwms-opt.c-blue .cwms-os b, .cwms-opt.c-grey .cwms-os b { color: #fff; font-weight: 800; }
.cwms-opt.c-ink .cwms-os b { color: var(--cw-lime-bright, #b5e048); font-weight: 800; }
.cwms-opt.c-blue .cwms-oic, .cwms-opt.c-grey .cwms-oic, .cwms-opt.c-ink .cwms-oic { background: rgba(255,255,255,0.18); color: var(--cw-card, #fff); }
.cwms-opt.c-lime { background: var(--lime); }
.cwms-opt.c-lime .cwms-ot { color: var(--olive); }
.cwms-opt.c-lime .cwms-os { color: rgba(22,33,10,0.66); }
.cwms-opt.c-lime .cwms-os b { color: var(--olive); font-weight: 800; }
.cwms-opt.c-lime .cwms-oic { background: rgba(22,33,10,0.14); color: var(--olive); }
.cwms-opt.c-teal { background: var(--fr-teal); }
.cwms-opt.c-teal .cwms-ot { color: var(--cw-teal-ink, #062e2e); }
.cwms-opt.c-teal .cwms-os { color: rgba(6,46,46,0.66); }
.cwms-opt.c-teal .cwms-os b { color: var(--cw-teal-ink, #062e2e); font-weight: 800; }
.cwms-opt.c-teal .cwms-oic { background: rgba(6,46,46,0.14); color: var(--cw-teal-ink, #062e2e); }
.cwms-opt.c-amber { background: var(--fr-amber); }
.cwms-opt.c-amber .cwms-ot { color: var(--cw-amber-ink, #3d2000); }
.cwms-opt.c-amber .cwms-os { color: rgba(61,32,0,0.66); }
.cwms-opt.c-amber .cwms-os b { color: var(--cw-amber-ink, #3d2000); font-weight: 800; }
.cwms-opt.c-amber .cwms-oic { background: rgba(61,32,0,0.14); color: var(--cw-amber-ink, #3d2000); }

/* ---------- wallet band ---------- */
.cwms-rband { margin-top: 18px; background: var(--rewards-tint); border: 1px solid var(--rewards-line);
  border-radius: 12px; padding: 12px 16px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.cwms-rlab { background: var(--rewards); color: var(--cw-card, #fff); font-size: 9.5px; font-weight: 800;
  letter-spacing: 0.07em; border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.cwms-rband p { font-size: 12.5px; color: var(--rewards); }
.cwms-rband p b, .cwms-rband .woocommerce-Price-amount { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--rewards); }

/* ---------- price per unit (from cw-price-per-unit) ---------- */
.cwms-ppu { color: var(--lime-deep); font-weight: 700; }
.cwms-ppu::before { content: "· "; color: var(--faint); font-weight: 600; }
.cwms-ppu.block { display: block; font-size: 11px; margin-top: 2px; }
.cwms-ppu.block::before { content: none; }

/* ---------- rewards panel ---------- */
.cwms-rewards { margin-top: 18px; background: var(--rewards-tint); border: 1px solid var(--rewards-line);
  border-radius: 14px; padding: 15px 17px; }
.cwms-rtop { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.cwms-rtag { font-size: 9.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--cw-card, #fff); color: var(--rewards); border: 1px solid var(--rewards-line); border-radius: 999px; padding: 3px 9px; }
.cwms-rfigs { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 11px; }
.cwms-rfig { display: flex; flex-direction: column; }
.cwms-rfig b, .cwms-rfig b .woocommerce-Price-amount { font-size: 23px; font-weight: 800; letter-spacing: -0.02em;
  color: var(--rewards); font-variant-numeric: tabular-nums; }
.cwms-rfig em { font-style: normal; font-size: 11.5px; color: var(--rewards-deep); margin-top: 1px; }
.cwms-rrates { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--rewards-line);
  font-size: 11.5px; color: var(--rewards-deep); line-height: 1.5; }
.cwms-rrates b { font-weight: 800; }
.cwms-rrates span { color: var(--cw-rewards-mid, #5b7fa8); }
.cwms-rearn { margin-left: auto; font-weight: 700; color: var(--rewards); }
.cwms-rearn b { font-variant-numeric: tabular-nums; }
.cwms-rearn .nudge { color: var(--amber); font-weight: 800; }
.cwms-earned { font-size: 11px; font-weight: 800; color: var(--cw-lime-dark, #4c7000); background: var(--lime-wash);
  border: 1px solid var(--cw-lime-line, #dcecb8); border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.cwms-earned .woocommerce-Price-amount { color: var(--cw-lime-dark, #4c7000); }
@media (max-width: 560px) { .cwms-rearn { margin-left: 0; width: 100%; } }

/* ---------- back bar ---------- */
.cwms-backbar { display: flex; align-items: center; gap: 14px; padding: 20px 0 14px; flex-wrap: wrap; }
.cwms-back { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 800;
  color: var(--ink2); border: 1.5px solid var(--line2); border-radius: 999px; padding: 8px 15px; background: var(--card); }
.cwms-back:hover { border-color: var(--grey); color: var(--ink); }
.cwms-backbar h2 { font-size: 21px; letter-spacing: -0.015em; }
@media (min-width: 980px) {
  .cwms-back { display: none; }
  .cwms-backbar { padding-top: 26px; }
  .cwms-backbar h2 { font-size: 26px; }
}

/* ---------- item rows ---------- */
.cwms-ohead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 13px 16px;
  border-bottom: 1px solid var(--line); background: var(--cw-lime-row, #f9fcf0); font-size: 12.5px; color: var(--grey); }
.cwms-ohead b { color: var(--ink); font-weight: 800; }
.cwms-ohead .cwms-pill { margin-left: auto; }

.cwms-item { display: grid; grid-template-columns: 22px minmax(0,1fr) auto; gap: 6px 12px;
  align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.cwms-item:last-child { border-bottom: none; }
.cwms-item.off { opacity: 0.45; }
.cwms-item.cwms-nock { grid-template-columns: minmax(0,1fr) auto; }
.cwms-tick { appearance: none; -webkit-appearance: none; width: 19px; height: 19px; margin: 0; flex: 0 0 auto;
  border: 2px solid var(--line2); border-radius: 5px; background: var(--card); cursor: pointer; position: relative; grid-row: 1 / span 2; }
.cwms-tick:checked { border-color: var(--lime); background: var(--lime); }
.cwms-tick:checked::after { content: ""; position: absolute; left: 4px; top: 0; width: 6px; height: 11px;
  border: solid var(--olive); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.cwms-tick:disabled { opacity: 0.4; cursor: not-allowed; }
.cwms-nm { font-weight: 800; font-size: 14px; min-width: 0; }
.cwms-nm a { color: var(--ink); }
.cwms-nm a:hover { color: var(--lime-deep); }
.cwms-pl { display: block; font-weight: 600; font-size: 11.5px; color: var(--grey); }
.cwms-pl .woocommerce-Price-amount { color: var(--grey); }
.cwms-lt { font-weight: 800; font-size: 14px; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cwms-why { grid-column: 2 / span 2; font-size: 11.5px; color: var(--grey);
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.cwms-item.cwms-nock .cwms-why { grid-column: 1 / span 2; }
.cwms-why b { color: var(--ink); font-weight: 700; }
.cwms-why .cwms-ghost, .cwms-why .cwms-cta { margin-left: auto; }
.cwms-qty { grid-column: 2; justify-self: start; display: inline-flex; align-items: center;
  border: 1.5px solid var(--line2); border-radius: 999px; background: var(--card); margin-top: 2px; }
.cwms-qty button { border: none; background: transparent; font-size: 15px; font-weight: 700; width: 30px; height: 32px; color: var(--ink); }
.cwms-qty button:hover { background: var(--lime-row); }
.cwms-q { min-width: 24px; text-align: center; font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; }

.cwms-supply { display: inline-flex; align-items: center; gap: 6px; }
.cwms-sbar { width: 56px; height: 5px; border-radius: 999px; background: var(--line); overflow: hidden; flex: 0 0 auto; }
.cwms-sbar i { display: block; height: 100%; border-radius: 999px; background: var(--lime); }
.cwms-supply.mid .cwms-sbar i { background: var(--cw-amber, #9a6414); }
.cwms-supply.low .cwms-sbar i { background: var(--brick); }
.cwms-slab { font-size: 10.5px; font-weight: 700; color: var(--grey); white-space: nowrap; }
.cwms-supply.low .cwms-slab { color: var(--brick); }

.cwms-trust { font-size: 11.5px; color: var(--grey); margin-top: 12px; padding: 0 2px; }
.cwms-hfoot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 13px 16px;
  border-top: 1px solid var(--line); background: var(--cw-lime-row, #f9fcf0); }
.cwms-lead { font-size: 12px; color: var(--grey); }
.cwms-lead b { color: var(--ink); font-weight: 800; font-variant-numeric: tabular-nums; }
.cwms-push { margin-left: auto; display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }

.cwms-later { margin-top: 18px; }
.cwms-later summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; font-weight: 800; font-size: 13.5px; color: var(--ink2); }
.cwms-later summary::-webkit-details-marker { display: none; }
.cwms-arrow { transition: transform 0.15s ease; font-size: 11px; color: var(--faint); }
.cwms-later[open] .cwms-arrow { transform: rotate(90deg); }
.cwms-cnt { font-weight: 600; font-size: 12px; color: var(--grey); }

/* ---------- order rows ---------- */
.cwms-ord { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 6px 14px;
  align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.cwms-ord:last-child { border-bottom: none; }
.cwms-oid { font-weight: 800; font-size: 14px; }
.cwms-oid span { font-weight: 600; color: var(--grey); font-size: 12px; margin-left: 7px; }
.cwms-oact { grid-column: 1 / span 2; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cwms-oamt { margin-left: auto; font-weight: 800; font-size: 14px; font-variant-numeric: tabular-nums; }

/* ---------- lists + product grid ---------- */
.cwms-lgrid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 560px) { .cwms-lgrid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } }
.cwms-lcard { background: var(--card); border: 1px solid var(--line); border-radius: 13px; padding: 16px 17px;
  display: flex; flex-direction: column; gap: 4px; }
.cwms-lcard h3 { font-size: 15px; }
.cwms-lcard .cwms-cnt { font-size: 12px; }
.cwms-foot { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 12px; }

.cwms-pgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (min-width: 620px) { .cwms-pgrid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } }
.cwms-pcard { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px;
  display: flex; flex-direction: column; position: relative; }
.cwms-pimg { height: 116px; border-radius: 9px; background: var(--ground); border: 1px solid var(--line);
  color: var(--faint); display: flex; align-items: center; justify-content: center; font-size: 11px;
  margin-bottom: 9px; overflow: hidden; }
.cwms-pimg img { width: 100%; height: 100%; object-fit: contain; }
.cwms-pbadge { font-size: 9.5px; font-weight: 800; background: var(--lime-wash); color: var(--cw-lime-dark, #4c7000);
  border-radius: 999px; padding: 2px 8px; letter-spacing: 0.05em; align-self: flex-start; margin-bottom: 5px; }
.cwms-pbadge.out { background: var(--brick-tint); color: var(--brick); }
.cwms-pname { font-size: 12px; font-weight: 700; line-height: 1.3; color: var(--ink); min-height: 2.6em; }
.cwms-pname:hover { color: var(--lime-deep); }
.cwms-pfoot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 9px; }
.cwms-pprice { font-size: 13.5px; font-weight: 800; color: var(--lime-deep); font-variant-numeric: tabular-nums; }
.cwms-pprice .woocommerce-Price-amount { color: var(--lime-deep); }
.cwms-pprice del { opacity: 0.5; font-weight: 600; font-size: 11px; }
.cwms-padd { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%; border: 1.5px solid var(--line2);
  background: var(--card); color: var(--ink); font-size: 18px; font-weight: 700; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; }
.cwms-padd:hover { background: var(--lime); border-color: var(--lime); color: var(--olive); }

/* ---------- chips ---------- */
.cwms-chipwrap { display: flex; gap: 9px; flex-wrap: wrap; }
.cwms-chip { font-size: 12.5px; font-weight: 700; border: 1.5px solid var(--line2); background: var(--card);
  color: var(--ink2); border-radius: 999px; padding: 9px 16px; }
.cwms-chip span { color: var(--faint); font-weight: 600; font-variant-numeric: tabular-nums; }
.cwms-chip:hover { border-color: var(--lime); background: var(--lime-row); color: var(--ink); }

/* ---------- bottom tab bar (mobile only) ---------- */
.cwms-tabbar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 60; }
.cwms-tabin { background: var(--card); border-top: 1px solid var(--line); display: grid;
  grid-template-columns: repeat(5, 1fr); padding: 8px 6px calc(10px + env(safe-area-inset-bottom, 0px)); }
.cwms-tabin a { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 10.5px;
  font-weight: 700; color: var(--grey); padding: 4px 2px; position: relative; }
.cwms-tabin a svg { width: 22px; height: 22px; }
.cwms-tabin a.on { color: var(--lime-deep); font-weight: 800; }
.cwms-tabin a.on::before { content: ""; position: absolute; top: -9px; left: 25%; right: 25%; height: 3px;
  border-radius: 999px; background: var(--lime); }
.cwms-bdg { position: absolute; top: -2px; right: 18%; background: var(--lime); color: var(--olive);
  font-size: 9.5px; font-weight: 800; border-radius: 999px; padding: 0 5px; min-width: 16px;
  text-align: center; font-variant-numeric: tabular-nums; }
@media (min-width: 980px) { .cwms-tabbar { display: none; } }

/* ---------- sticky confirm ---------- */
.cwms-confirm { position: fixed; left: 0; right: 0; bottom: 0; z-index: 61; }
.cwms-cinner { max-width: 720px; margin: 0 auto; padding: 0 10px 10px; }
.cwms-cbox { background: var(--card); border: 1px solid var(--line2); border-radius: 16px;
  box-shadow: 0 -6px 28px rgba(38,50,56,0.16), 0 2px 8px rgba(38,50,56,0.08); overflow: hidden; }
.cwms-overmsg { display: none; padding: 8px 16px; background: var(--brick-tint);
  border-bottom: 1px solid var(--brick-line); color: var(--brick); font-size: 11.5px; font-weight: 700; }
.cwms-overmsg.show { display: block; }
.cwms-gauges { display: flex; gap: 13px; align-items: center; flex-wrap: wrap; padding: 8px 16px;
  background: var(--rewards-tint); border-bottom: 1px solid var(--rewards-line); font-size: 11.5px; color: var(--rewards-deep); }
.cwms-gauges .ok { color: var(--cw-lime-dark, #4c7000); font-weight: 800; }
.cwms-gauges .warn { color: var(--amber); font-weight: 800; }
.cwms-g { display: flex; align-items: center; gap: 7px; }
.cwms-g b { font-variant-numeric: tabular-nums; }
.cwms-wbar { width: 84px; height: 6px; border-radius: 999px; background: var(--cw-rewards-line, #cdddf0); overflow: hidden; flex: 0 0 auto; }
.cwms-wbar i { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--rewards); transition: width 0.2s ease; }
.cwms-wbar.warn i { background: var(--cw-amber, #9a6414); }
.cwms-wbar.bad i { background: var(--brick); }
.cwms-cgo { display: flex; align-items: center; gap: 12px; padding: 11px 16px; flex-wrap: wrap; }
.cwms-csum { font-weight: 800; font-size: 20px; color: var(--lime-deep); font-variant-numeric: tabular-nums; }
.cwms-csum .woocommerce-Price-amount { color: var(--lime-deep); }
.cwms-ccnt { font-weight: 700; font-size: 12px; color: var(--grey); }
@media (min-width: 980px) { .cwms-cinner { max-width: 860px; } }

/* ---------- toast ---------- */
.cwms-toast { position: fixed; left: 50%; bottom: 104px; transform: translateX(-50%) translateY(16px);
  background: var(--ink); color: var(--cw-card, #fff); font-size: 13px; font-weight: 600; border-radius: 999px;
  padding: 11px 22px; opacity: 0; pointer-events: none; z-index: 80; max-width: 88vw; text-align: center;
  transition: opacity 0.25s ease, transform 0.25s ease; }
.cwms-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.cwms-toast.err { background: var(--brick); }
@media (min-width: 980px) { .cwms-toast { bottom: 28px; } }

/* ==========================================================================
   My Account rebuild — additions only; everything above is shared.
   ========================================================================== */

/* identity line under the greeting */
.cwms-idline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 9px;
  font-size: 12.5px; color: var(--grey); }
.cwms-idchip { font-size: 11px; font-weight: 700; background: var(--lime-wash); color: var(--cw-lime-dark, #4c7000);
  border: 1px solid var(--cw-lime-line, #dcecb8); border-radius: 999px; padding: 3px 10px; }

/* summary tiles */
.cwms-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 20px; }
.cwms-tile { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 2px; }
.cwms-tile.blue { background: var(--rewards-tint); border-color: var(--rewards-line); }
.cwms-tl { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--grey); }
.cwms-tile.blue .cwms-tl { color: var(--rewards-deep); }
.cwms-tv { font-size: 25px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--ink); }
.cwms-tv.sm { font-size: 17px; letter-spacing: -0.01em; }
.cwms-tile.blue .cwms-tv, .cwms-tile.blue .cwms-tv .woocommerce-Price-amount { color: var(--rewards); }
.cwms-tn { font-size: 11.5px; color: var(--grey); }
.cwms-tile.blue .cwms-tn { color: var(--rewards-deep); }

/* join-rewards prompt */
.cwms-joinband { margin-top: 18px; background: var(--lime-row); border: 1px solid var(--cw-lime-line, #dcecb8); border-radius: 14px;
  padding: 17px 19px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.cwms-joinband strong { font-size: 14.5px; font-weight: 800; color: var(--ink); }
.cwms-joinband p { font-size: 12.5px; color: var(--ink2); margin-top: 4px; max-width: 56ch; }
.cwms-joinband .cwms-cta { margin-left: auto; }
@media (max-width: 620px) { .cwms-joinband .cwms-cta { margin-left: 0; } }

/* definition lists */
.cwms-dl { display: grid; grid-template-columns: minmax(110px, 34%) 1fr; gap: 1px 14px; font-size: 13.5px; }
.cwms-dl dt { color: var(--grey); font-weight: 600; padding: 8px 0; border-bottom: 1px solid var(--line); }
.cwms-dl dd { margin: 0; padding: 8px 0; border-bottom: 1px solid var(--line); font-weight: 600;
  overflow-wrap: anywhere; color: var(--ink); }
.cwms-dl dt:last-of-type, .cwms-dl dd:last-of-type { border-bottom: none; }
.cwms-none { color: var(--faint); font-weight: 600; }

/* address cards */
.cwms-duo { display: grid; grid-template-columns: 1fr; gap: 13px; }
@media (min-width: 620px) { .cwms-duo { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } }
.cwms-dcard { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 17px 19px;
  display: flex; flex-direction: column; }
.cwms-dtop { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.cwms-dcard h3 { font-size: 14px; }
.cwms-dcard address { font-style: normal; font-size: 13.5px; color: var(--ink2); line-height: 1.6; }
.cwms-dcard address b { color: var(--ink); font-weight: 800; }
.cwms-dsub { font-size: 12.5px; color: var(--grey); margin-top: 4px; }
.cwms-dacts { display: flex; gap: 9px; flex-wrap: wrap; margin-top: auto; padding-top: 15px; }

/* wallet transactions */
.cwms-txn { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 4px 14px; align-items: baseline;
  padding: 13px 16px; border-bottom: 1px solid var(--line); }
.cwms-txn:last-child { border-bottom: none; }
.cwms-tdetail { font-size: 13px; font-weight: 600; color: var(--ink); min-width: 0; }
.cwms-tdetail span { display: block; font-size: 11.5px; font-weight: 600; color: var(--faint); margin-top: 2px; }
.cwms-tamt { font-weight: 800; font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.cwms-tamt.plus, .cwms-tamt.plus .woocommerce-Price-amount { color: var(--cw-lime-dark, #4c7000); }
.cwms-tamt.minus, .cwms-tamt.minus .woocommerce-Price-amount { color: var(--brick); }
.cwms-tbal { grid-column: 2; font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums;
  white-space: nowrap; text-align: right; }

/* embedded shortcode (the site's own Family Rewards dashboard) */
.cwms-embed { background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 8px; overflow-x: auto; }
.cwms-embed > * { max-width: 100%; }
.cwms-embed canvas { max-width: 100% !important; }

/* rail log-out sits apart from the navigation proper */
@media (min-width: 980px) {
  .cwms-rail .cwms-out { color: var(--grey); border-bottom: none; margin-top: 4px;
    border-top: 1px solid var(--line); }
  .cwms-rail .cwms-out:hover { color: var(--brick); }
}

/* ---------- footer ---------- */
.cwms-footer { margin-top: 46px; background: var(--card); border-top: 1px solid var(--line);
  padding: 22px 18px; display: flex; gap: 18px; flex-wrap: wrap; font-size: 12px; color: var(--grey);
  max-width: 1120px; margin-left: auto; margin-right: auto; }
.cwms-footer b { color: var(--ink2); font-weight: 800; }
.cwms-footer b:first-child { color: var(--lime); }

@media (prefers-reduced-motion: reduce) { #cwms *, .cwms-toast, .cwms-wbar i { transition: none !important; } }

/* --- My reviews (2026-08-25) ---------------------------------------------
   Rows inside the shared .cwms-panel card, same rhythm as .cwms-ord/.cwms-txn:
   the panel owns the border and radius, each row owns only its top hairline. */
.cwms-rev { padding: 15px 18px; border-top: 1px solid var(--line); }
.cwms-rev:first-child { border-top: 0; }
.cwms-rev-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cwms-rev-name { font-weight: 800; font-size: 14.5px; color: var(--ink); text-decoration: none; }
.cwms-rev-name:hover { color: var(--lime-dark, #4c7000); }
.cwms-rev-meta { display: flex; align-items: center; gap: 10px; margin-top: 3px; font-size: 12.5px; color: var(--ink2); }
/* Amber, not the lime/blue used elsewhere - stars are a rating, not a status. */
.cwms-rev-stars { color: #e8a33d; letter-spacing: 0.08em; }
.cwms-rev-body { margin: 7px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--ink2); }