/* ================================================================
   Clover POS — Store CSS v4.7.8
   Clean, professional. All vars from Theme Manager (:root).
   ================================================================ */

/* ── Base ──────────────────────────────────────────────────────── */
.cp-store-wrap {
  font-family: var(--cp-ff-b, 'Outfit', system-ui, sans-serif);
  background: var(--cp-bg, #FAF6EF);
  color: var(--cp-text, #1C1209);
  width: 100%;
  min-height: 60vh;
  -webkit-font-smoothing: antialiased;
  font-size: 15px;
  line-height: 1.6;
  animation: cpFadeIn .35s ease both;
}
@keyframes cpFadeIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
.cp-store-wrap *, .cp-store-wrap *::before, .cp-store-wrap *::after { box-sizing: border-box; margin: 0; }
.cp-store-wrap a { text-decoration: none; color: inherit; }
.cp-store-wrap img { display: block; max-width: 100%; }
.cp-store-wrap button { font-family: inherit; cursor: pointer; border: none; }
.cp-store-wrap input, .cp-store-wrap select, .cp-store-wrap textarea { font-family: inherit; }
.cp-store-wrap h2, .cp-store-wrap h3, .cp-store-wrap h4 { margin: 0; }
.cp-store-wrap p { margin: 0; }
.cp-store-wrap ul, .cp-store-wrap ol { list-style: none; margin: 0; padding: 0; }

/* ── Inner container ───────────────────────────────────────────── */
.cp-inner { max-width: 1320px; margin: 0 auto; padding: 0 48px; }
@media (max-width: 900px) { .cp-inner { padding: 0 24px; } }
@media (max-width: 480px) { .cp-inner { padding: 0 16px; } }

/* ── Toast ─────────────────────────────────────────────────────── */
#cp-toast {
  position: fixed; bottom: 28px; left: 50%;
  transform: translateX(-50%) translateY(16px);
  padding: 12px 26px; border-radius: 100px;
  font-family: var(--cp-ff-b); font-size: 14px; font-weight: 500;
  z-index: 99999; display: none; opacity: 0;
  box-shadow: 0 8px 32px rgba(0,0,0,.2);
  transition: opacity .25s, transform .25s;
  white-space: nowrap; pointer-events: none;
}
#cp-toast.cp-toast-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.cp-toast-success { background: var(--cp-text); color: var(--cp-bg); }
.cp-toast-error   { background: var(--cp-danger, #B72B2B); color: #fff; }

/* ── Cart FAB ──────────────────────────────────────────────────── */
#cp-cart-badge {
  position: fixed; bottom: 28px; right: 28px;
  min-width: 60px; height: 60px; padding: 0 20px;
  background: var(--cp-accent); color: #fff;
  border-radius: 100px; display: flex;
  align-items: center; justify-content: center; gap: 8px;
  font-family: var(--cp-ff-b); font-weight: 700; font-size: 16px;
  box-shadow: 0 6px 24px rgba(0,0,0,.25); z-index: 9999;
  transition: transform .2s, box-shadow .2s, opacity .2s;
  text-decoration: none;
  /* Always visible — dims when cart is empty */
  opacity: 0.45;
}
#cp-cart-badge.cp-badge-visible,
#cp-cart-badge:has(#cp-cart-count:not(:empty)) { opacity: 1; }
#cp-cart-badge:hover { transform: translateY(-3px); box-shadow: 0 10px 36px rgba(0,0,0,.3); opacity: 1; }
#cp-cart-count:empty { display: none; }
@media (max-width: 480px) { #cp-cart-badge { bottom: 18px; right: 18px; } }

/* ── Buttons ───────────────────────────────────────────────────── */
.cp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 11px 22px; border-radius: var(--cp-radius, 10px);
  font-family: var(--cp-ff-b); font-size: 14px; font-weight: 600;
  cursor: pointer; border: none; text-decoration: none;
  transition: all .2s; white-space: nowrap; line-height: 1;
}
.cp-btn:active:not(:disabled) { transform: scale(.97); }
.cp-btn:disabled { opacity: .4; cursor: not-allowed; pointer-events: none; }
.cp-btn-primary  { background: var(--cp-accent); color: #fff; }
.cp-btn-primary:hover:not(:disabled)  { background: var(--cp-accent-dk); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,0,0,.18); }
.cp-btn-secondary { background: transparent; color: var(--cp-accent); border: 1.5px solid var(--cp-accent); }
.cp-btn-secondary:hover:not(:disabled) { background: var(--cp-accent); color: #fff; }
.cp-btn-ghost { background: var(--cp-surface); color: var(--cp-text); border: 1.5px solid var(--cp-border); }
.cp-btn-ghost:hover:not(:disabled) { border-color: var(--cp-text); background: var(--cp-surface2); }
.cp-btn-dark { background: var(--cp-text); color: var(--cp-bg); }
.cp-btn-dark:hover:not(:disabled) { opacity: .85; transform: translateY(-1px); }
.cp-btn-lg { width: 100%; padding: 17px 24px; font-size: 16px; font-weight: 700; border-radius: var(--cp-radius-lg, 16px); }
.cp-btn-danger { background: var(--cp-danger, #B72B2B); color: #fff; }
.cp-btn-spin::before {
  content: ''; display: inline-block; width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,.3); border-top-color: #fff;
  border-radius: 50%; animation: cpSpin .7s linear infinite;
}
@keyframes cpSpin { to { transform: rotate(360deg); } }

/* ── Notices ───────────────────────────────────────────────────── */
.cp-notice { padding: 14px 16px; border-radius: var(--cp-radius); font-size: 13.5px; margin-bottom: 14px; display: flex; align-items: flex-start; gap: 9px; line-height: 1.5; }
.cp-notice-error   { background: rgba(183,43,43,.07); border: 1px solid rgba(183,43,43,.2); color: var(--cp-danger, #B72B2B); }
.cp-notice-success { background: rgba(46,125,69,.07);  border: 1px solid rgba(46,125,69,.2);  color: var(--cp-success, #1D6A40); }
.cp-notice-info    { background: rgba(37,99,235,.06);  border: 1px solid rgba(37,99,235,.18); color: #1d4ed8; }

/* ================================================================
   SHOP PAGE
   ================================================================ */

.cp-shop-wrap { padding: 0 0 80px; }

/* ── Hero ─────────────────────────────────────────────────────── */
.cp-shop-hero {
  padding: 48px 0 0;
  background: var(--cp-bg);
}
.cp-shop-hero-inner {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  padding-bottom: 28px; border-bottom: 1.5px solid var(--cp-border);
}
.cp-shop-eyebrow {
  display: block; font-family: var(--cp-ff-b);
  font-size: 11px; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--cp-accent); margin-bottom: 10px;
}
.cp-shop-title {
  font-family: var(--cp-ff-d, 'Cormorant Garamond', Georgia, serif);
  font-size: clamp(36px, 5.5vw, 64px);
  font-weight: 700; line-height: 1.05; letter-spacing: -.03em;
  color: var(--cp-text); margin-bottom: 8px;
}
.cp-shop-title em { font-style: italic; color: var(--cp-accent); }
.cp-shop-subtitle { font-size: 15px; color: var(--cp-text-muted, #7A6E62); }
.cp-shop-count-block { text-align: right; flex-shrink: 0; }
.cp-shop-count-num {
  font-family: var(--cp-ff-d); font-size: clamp(48px, 6vw, 80px);
  font-weight: 700; line-height: 1; color: var(--cp-border); letter-spacing: -.05em;
}
.cp-shop-count-label { font-size: 10px; color: var(--cp-text-muted); letter-spacing: .14em; text-transform: uppercase; margin-top: 3px; }

/* ── Category tabs + search bar ───────────────────────────────── */
.cp-shop-controls {
  position: sticky; top: 0; z-index: 100;
  background: var(--cp-bg);
  border-bottom: 1.5px solid var(--cp-border);
  margin-bottom: 36px;
}
.cp-shop-controls-inner {
  max-width: 1320px; margin: 0 auto; padding: 0 48px;
  display: flex; align-items: stretch;
  overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none;
}
.cp-shop-controls-inner::-webkit-scrollbar { display: none; }
@media (max-width: 900px) { .cp-shop-controls-inner { padding: 0 24px; } }
@media (max-width: 480px) { .cp-shop-controls-inner { padding: 0 16px; } }

.cp-cat-tab {
  padding: 15px 20px;
  background: transparent; border: none; border-bottom: 2.5px solid transparent;
  color: var(--cp-text-muted); font-family: var(--cp-ff-b); font-size: 13px; font-weight: 500;
  cursor: pointer; transition: all .18s; white-space: nowrap; flex-shrink: 0;
  display: flex; align-items: center; gap: 6px;
}
.cp-cat-tab:hover { color: var(--cp-text); }
.cp-cat-tab.active { color: var(--cp-accent); border-bottom-color: var(--cp-accent); font-weight: 600; }
.cp-cat-tab-count {
  font-size: 10px; background: var(--cp-surface2); border-radius: 100px;
  padding: 1px 6px; color: var(--cp-text-muted); font-weight: 600;
  transition: all .18s;
}
.cp-cat-tab.active .cp-cat-tab-count { background: var(--cp-accent); color: #fff; }

.cp-shop-search {
  margin-left: auto; flex-shrink: 0;
  display: flex; align-items: center;
  padding: 8px 0 8px 16px; border-left: 1px solid var(--cp-border);
}
.cp-shop-search-wrap { position: relative; }
.cp-shop-search-wrap svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--cp-text-muted); }
.cp-shop-search-wrap input {
  background: var(--cp-surface2); border: 1.5px solid var(--cp-border);
  border-radius: 100px; padding: 8px 16px 8px 36px;
  font-family: var(--cp-ff-b); font-size: 13px; color: var(--cp-text);
  width: 190px; transition: all .2s; outline: none;
}
.cp-shop-search-wrap input:focus { border-color: var(--cp-accent); width: 220px; background: var(--cp-surface); }
.cp-shop-search-wrap input::placeholder { color: var(--cp-text-muted); }

/* ── Category section headers ─────────────────────────────────── */
.cp-section-header {
  padding: 8px 0 20px;
  display: flex; align-items: baseline; justify-content: space-between;
  border-bottom: 1px solid var(--cp-border-lt, #E8DECE);
  margin-bottom: 24px;
}
.cp-section-title {
  font-family: var(--cp-ff-d); font-size: 26px; font-weight: 700;
  color: var(--cp-text); letter-spacing: -.02em;
}
.cp-section-count { font-size: 12px; color: var(--cp-text-muted); }

/* ── Product grid ──────────────────────────────────────────────── */
.cp-product-grid { display: grid; gap: 22px; margin-bottom: 52px; }
.cp-cols-1 { grid-template-columns: 1fr; }
.cp-cols-2 { grid-template-columns: repeat(2,1fr); }
.cp-cols-3 { grid-template-columns: repeat(3,1fr); }
.cp-cols-4 { grid-template-columns: repeat(4,1fr); }
@media (max-width: 1100px) { .cp-cols-4 { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 900px)  { .cp-cols-3,.cp-cols-4 { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 540px)  { .cp-cols-2,.cp-cols-3,.cp-cols-4 { grid-template-columns: 1fr; } }

/* ── Product card ──────────────────────────────────────────────── */
.cp-card {
  background: var(--cp-surface, #fff);
  border: 1px solid var(--cp-border-lt, #E8DECE);
  border-radius: var(--cp-radius-lg, 16px);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .28s cubic-bezier(.4,0,.2,1), box-shadow .28s;
  cursor: default;
}
.cp-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--cp-card-hover-shadow, 0 14px 40px rgba(0,0,0,.12));
}
.cp-card-img { height: var(--cp-img-height, 210px); overflow: hidden; background: var(--cp-surface2); position: relative; flex-shrink: 0; }
.cp-card-img img { width:100%; height:100%; object-fit:cover; transition: transform .55s cubic-bezier(.4,0,.2,1); }
.cp-card:hover .cp-card-img img { transform: scale(1.06); }
.cp-card-img-placeholder { height:100%; display:flex; align-items:center; justify-content:center; font-size:50px; opacity:.35; }

.cp-card-badge { position:absolute; top:10px; left:10px; font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:4px 9px; border-radius:6px; line-height:1.2; }
.cp-card-badge.out { background: var(--cp-danger, #B72B2B); color:#fff; }
.cp-card-badge.low { background: #D97706; color:#fff; }
.cp-card-cat-strip { position:absolute; bottom:0; left:0; right:0; background:linear-gradient(to top,rgba(0,0,0,.58),transparent); color:rgba(255,255,255,.88); font-size:10px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; padding:22px 12px 9px; }

.cp-card-body { padding: 16px 18px 20px; flex:1; display:flex; flex-direction:column; gap:7px; }
.cp-card-name { font-family: var(--cp-ff-d); font-size: 19px; font-weight: 700; color: var(--cp-text); line-height: 1.2; }
.cp-card-desc { font-size: 13px; color: var(--cp-text-muted); line-height: 1.65; flex: 1; }

.cp-card-mods { border-top: 1px solid var(--cp-border-lt); padding-top: 12px; margin-top: 2px; display: flex; flex-direction: column; gap: 9px; }
.cp-mod-group-label { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cp-text-muted); display: block; margin-bottom: 6px; }
.cp-mod-options { display: flex; flex-wrap: wrap; gap: 5px; }
.cp-mod-radio { display: none; }
.cp-mod-pill-label { padding: 4px 12px; border: 1.5px solid var(--cp-border); border-radius: 100px; font-size: 12px; color: var(--cp-text-muted); cursor: pointer; transition: all .18s; user-select: none; }
.cp-mod-pill-label:hover { border-color: var(--cp-accent); color: var(--cp-accent); }
.cp-mod-radio:checked + .cp-mod-pill-label { background: var(--cp-accent); border-color: var(--cp-accent); color: #fff; font-weight: 600; }

.cp-card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 13px; border-top: 1px solid var(--cp-border-lt); gap: 10px; }
.cp-card-price { font-family: var(--cp-ff-d); font-size: 24px; font-weight: 700; color: var(--cp-text); letter-spacing: -.025em; line-height: 1; white-space: nowrap; }
.cp-card-price sup { font-size: 11px; font-weight: 400; color: var(--cp-text-muted); vertical-align: super; }

.cp-card-add {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 9px 16px; background: var(--cp-accent); color: #fff;
  border: none; border-radius: var(--cp-radius, 10px);
  font-family: var(--cp-ff-b); font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all .2s; box-shadow: 0 2px 8px rgba(0,0,0,.1); white-space: nowrap;
}
.cp-card-add:hover:not(:disabled) { background: var(--cp-accent-dk); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,.16); }
.cp-card-add:active:not(:disabled) { transform: scale(.97); }
.cp-card-add:disabled { background: var(--cp-border); color: var(--cp-text-muted); cursor: not-allowed; box-shadow: none; }

/* ── Empty / no results ────────────────────────────────────────── */
.cp-empty-state { grid-column:1/-1; text-align:center; padding:80px 20px; }
.cp-empty-icon  { font-size:52px; margin-bottom:16px; opacity:.28; }
.cp-empty-title { font-family:var(--cp-ff-d); font-size:26px; color:var(--cp-text); margin-bottom:8px; font-weight:700; }
.cp-empty-text  { font-size:14px; color:var(--cp-text-muted); line-height:1.7; }

/* ================================================================
   CART PAGE
   ================================================================ */

.cp-cart-wrap { padding: 44px 0 80px; }

/* ── Page title ─────────────────────────────────────────────────── */
.cp-page-title {
  font-family: var(--cp-ff-d);
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 700; line-height: 1.06; letter-spacing: -.03em;
  color: var(--cp-text); padding-bottom: 24px;
  border-bottom: 1.5px solid var(--cp-border); margin-bottom: 32px;
}
.cp-page-title em { font-style: italic; color: var(--cp-accent); }

/* ── Layout ──────────────────────────────────────────────────────── */
.cp-cart-layout { display: grid; grid-template-columns: 1fr 360px; gap: 44px; align-items: start; }
@media (max-width: 900px) { .cp-cart-layout { grid-template-columns: 1fr; gap: 28px; } }

/* ── Cart rows ───────────────────────────────────────────────────── */
.cp-cart-items { display: flex; flex-direction: column; }
.cp-cart-row {
  display: grid; grid-template-columns: 80px 1fr auto;
  gap: 16px; align-items: start;
  padding: 20px 0; border-bottom: 1px solid var(--cp-border-lt);
  transition: opacity .28s, transform .28s;
}
.cp-cart-row.removing { opacity:0; transform:translateX(-18px); }
.cp-cart-thumb {
  width:80px; height:80px; border-radius: var(--cp-radius);
  overflow:hidden; background: var(--cp-surface2);
  border:1px solid var(--cp-border-lt);
  display:flex; align-items:center; justify-content:center; font-size:28px; flex-shrink:0;
}
.cp-cart-thumb img { width:100%; height:100%; object-fit:cover; }
.cp-cart-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cp-cart-name { font-family: var(--cp-ff-d); font-size: 17px; font-weight: 700; color: var(--cp-text); line-height: 1.2; }
.cp-cart-mods { display: flex; flex-wrap: wrap; gap: 4px; }
.cp-cart-mods span { background: var(--cp-surface2); border: 1px solid var(--cp-border-lt); padding: 2px 7px; border-radius: 4px; font-size: 11px; color: var(--cp-text-muted); }
.cp-cart-unit { font-size: 12px; color: var(--cp-text-muted); }

.cp-cart-right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; padding-top: 2px; }
.cp-qty-wrap   { display: flex; align-items: center; border: 1.5px solid var(--cp-border); border-radius: var(--cp-radius); overflow: hidden; }
.cp-qty-btn    { width: 34px; height: 34px; background: transparent; border: none; color: var(--cp-text-muted); font-size: 17px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .15s; flex-shrink: 0; }
.cp-qty-btn:hover { background: var(--cp-surface2); color: var(--cp-accent); }
.cp-qty-val    { min-width: 34px; text-align: center; font-size: 14px; font-weight: 700; color: var(--cp-text); }
.cp-line-total { font-family: var(--cp-ff-d); font-size: 18px; font-weight: 700; color: var(--cp-text); }
.cp-remove-btn { background: none; border: none; font-size: 11px; color: var(--cp-text-muted); cursor: pointer; padding: 2px 0; transition: color .15s; display: flex; align-items: center; gap: 4px; font-family: var(--cp-ff-b); }
.cp-remove-btn:hover { color: var(--cp-danger, #B72B2B); }

@media (max-width: 560px) {
  .cp-cart-row { grid-template-columns: 68px 1fr; }
  .cp-cart-right { grid-column: 2; flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: wrap; }
}

/* ── Promo ────────────────────────────────────────────────────────── */
.cp-promo-bar { display: flex; gap: 8px; padding: 18px 0; border-bottom: 1px solid var(--cp-border-lt); }
.cp-promo-bar input {
  flex: 1; padding: 10px 14px; border: 1.5px solid var(--cp-border);
  border-radius: var(--cp-radius); font-family: var(--cp-ff-b); font-size: 13px;
  background: var(--cp-surface2); color: var(--cp-text); outline: none;
  text-transform: uppercase; letter-spacing: .04em; transition: border-color .2s;
}
.cp-promo-bar input:focus { border-color: var(--cp-accent); background: var(--cp-surface); }
.cp-promo-bar input::placeholder { text-transform: none; letter-spacing: 0; color: var(--cp-text-muted); opacity: .7; }
#cp-promo-msg { font-size: 12.5px; align-self: center; flex-shrink: 0; }
#cp-promo-msg.ok  { color: var(--cp-success, #1D6A40); }
#cp-promo-msg.err { color: var(--cp-danger, #B72B2B); }
.cp-continue-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; font-size: 13px; color: var(--cp-text-muted); transition: color .18s; }
.cp-continue-link:hover { color: var(--cp-accent); }

/* ── Cart sidebar ────────────────────────────────────────────────── */
.cp-cart-sidebar {
  background: var(--cp-sidebar-bg, var(--cp-text));
  color: var(--cp-sidebar-txt, var(--cp-bg));
  border-radius: var(--cp-radius-xl, 22px);
  overflow: hidden; position: sticky; top: 24px;
}
.cp-sidebar-head {
  padding: 22px 24px 0;
  display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px;
}
.cp-sidebar-title { font-family: var(--cp-ff-d); font-size: 20px; font-weight: 700; }
.cp-sidebar-count { font-size: 11px; opacity: .45; }

.cp-totals { padding: 0 24px; }
.cp-totals li { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; font-size: 13.5px; border-bottom: 1px solid rgba(255,255,255,.08); }
.cp-totals li:last-child { border-bottom: none; }
.cp-totals .tl { opacity: .55; }
.cp-totals .discount .tv { color: #6FCF97; }

.cp-grand { display: flex; justify-content: space-between; align-items: baseline; padding: 18px 24px; border-top: 1px solid rgba(255,255,255,.1); }
.cp-grand .tl { font-family: var(--cp-ff-d); font-size: 15px; font-weight: 700; }
.cp-grand .tv { font-family: var(--cp-ff-d); font-size: 30px; font-weight: 700; color: var(--cp-highlight, var(--cp-accent-lt, #D97B47)); letter-spacing: -.025em; }

.cp-sidebar-cta { padding: 0 24px 24px; display: flex; flex-direction: column; gap: 10px; }
.cp-secure { display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 11px; opacity: .3; margin-top: 4px; }

/* ── Cart empty ───────────────────────────────────────────────────── */
.cp-cart-empty { text-align: center; padding: 100px 20px; }
.cp-cart-empty-icon { font-size: 60px; margin-bottom: 18px; opacity: .2; }
.cp-cart-empty h3 { font-family: var(--cp-ff-d); font-size: 28px; font-weight: 700; color: var(--cp-text); margin-bottom: 10px; }
.cp-cart-empty p  { font-size: 14px; color: var(--cp-text-muted); margin-bottom: 26px; }

/* ================================================================
   CHECKOUT PAGE
   ================================================================ */

.cp-checkout-wrap { padding: 44px 0 80px; }

/* ── Checkout header ──────────────────────────────────────────────── */
.cp-checkout-header { padding-bottom: 22px; border-bottom: 1.5px solid var(--cp-border); margin-bottom: 32px; }
.cp-checkout-header h2 {
  font-family: var(--cp-ff-d); font-size: clamp(28px, 4vw, 46px); font-weight: 700;
  color: var(--cp-text); letter-spacing: -.025em; margin-bottom: 14px;
}
.cp-steps { display: flex; align-items: center; gap: 0; }
.cp-step  { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--cp-text-muted); }
.cp-step.active { color: var(--cp-accent); }
.cp-step.done   { color: var(--cp-success, #1D6A40); }
.cp-step-n { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid currentColor; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; flex-shrink: 0; }
.cp-step.done .cp-step-n   { background: var(--cp-success, #1D6A40); border-color: var(--cp-success, #1D6A40); color: #fff; }
.cp-step.active .cp-step-n { background: var(--cp-accent); border-color: var(--cp-accent); color: #fff; }
.cp-step-line { flex: 1; height: 1px; background: var(--cp-border); margin: 0 8px; max-width: 40px; }

/* ── Two col ──────────────────────────────────────────────────────── */
.cp-co-layout { display: grid; grid-template-columns: 1fr 380px; gap: 44px; align-items: start; }
@media (max-width: 960px) { .cp-co-layout { grid-template-columns: 1fr; } }
@media (max-width: 960px) { .cp-co-summary-wrap { order: -1; position: static !important; } }

/* ── Form cards ───────────────────────────────────────────────────── */
.cp-form-card {
  background: var(--cp-surface); border: 1px solid var(--cp-border-lt);
  border-radius: var(--cp-radius-xl, 22px); padding: 24px; margin-bottom: 14px;
  box-shadow: 0 1px 8px rgba(0,0,0,.04);
}
.cp-form-card:last-of-type { margin-bottom: 0; }
.cp-form-card-title {
  font-family: var(--cp-ff-d); font-size: 18px; font-weight: 700;
  color: var(--cp-text); margin-bottom: 20px;
  display: flex; align-items: center; gap: 10px; line-height: 1;
}
.cp-form-card-icon {
  width: 32px; height: 32px; background: var(--cp-surface2);
  border-radius: 8px; display: flex; align-items: center; justify-content: center;
  font-size: 15px; flex-shrink: 0;
}
.cp-field-row { display: grid; gap: 12px; margin-bottom: 12px; }
.cp-field-row-2 { grid-template-columns: 1fr 1fr; }
.cp-field-row-3 { grid-template-columns: 1fr 1fr 1fr; }
.cp-field-row:last-child { margin-bottom: 0; }
@media (max-width: 520px) { .cp-field-row-2,.cp-field-row-3 { grid-template-columns: 1fr; } }
.cp-field { display: flex; flex-direction: column; gap: 6px; }
.cp-label { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cp-text-muted); }
.cp-label .req { color: var(--cp-accent); }
.cp-input {
  width: 100%; padding: 11px 13px; background: var(--cp-surface2);
  border: 1.5px solid var(--cp-border); border-radius: var(--cp-radius);
  font-family: var(--cp-ff-b); font-size: 14px; color: var(--cp-text);
  transition: all .18s; box-sizing: border-box; outline: none;
}
.cp-input:focus { border-color: var(--cp-accent); background: var(--cp-surface); box-shadow: 0 0 0 3px rgba(0,0,0,.05); }
.cp-input::placeholder { color: var(--cp-text-muted); opacity: .6; }
.cp-input.has-err { border-color: var(--cp-danger, #B72B2B); }

.cp-iframe { width:100%; padding:11px 13px; background:var(--cp-surface2); border:1.5px solid var(--cp-border); border-radius:var(--cp-radius); min-height:44px; transition:border-color .18s; }
.cp-iframe:focus-within { border-color:var(--cp-accent); background:var(--cp-surface); }

/* Payment method toggle (card vs cash) */
.cp-payment-toggle { display:flex; gap:8px; margin-bottom:16px; }
.cp-pay-opt {
  flex:1; display:flex; align-items:center; gap:8px;
  padding:10px 14px; border:1.5px solid var(--cp-border);
  border-radius:var(--cp-radius); cursor:pointer; font-size:14px;
  font-weight:600; color:var(--cp-text-muted); transition:all .15s;
}
.cp-pay-opt input[type=radio] { display:none; }
.cp-pay-opt:hover { border-color:var(--cp-accent); color:var(--cp-text); }
.cp-pay-opt.cp-pay-opt-active {
  border-color:var(--cp-accent); color:var(--cp-accent);
  background:color-mix(in srgb, var(--cp-accent) 8%, transparent);
}

/* Info/notice box */
.cp-info-notice {
  display:flex; align-items:flex-start; gap:8px;
  background: color-mix(in srgb, var(--cp-accent) 8%, transparent);
  border:1px solid color-mix(in srgb, var(--cp-accent) 25%, transparent);
  border-radius:var(--cp-radius); padding:12px 14px;
  font-size:13px; color:var(--cp-text); line-height:1.5;
}
.cp-info-notice svg { flex-shrink:0; margin-top:1px; color:var(--cp-accent); }

.cp-card-brands { display:flex; gap:6px; margin-bottom:16px; flex-wrap:wrap; }
.cp-card-brand { background:var(--cp-surface2); border:1px solid var(--cp-border); border-radius:5px; padding:3px 9px; font-size:10px; font-weight:800; color:var(--cp-text-muted); letter-spacing:.03em; }
.cp-ssl-line { display:flex; align-items:center; gap:6px; margin-top:12px; font-size:11.5px; color:var(--cp-text-muted); opacity:.65; }
#cp-payment-errors { display:none; margin-top:14px; padding:12px 14px; background:rgba(183,43,43,.07); border:1px solid rgba(183,43,43,.2); border-radius:var(--cp-radius); color:var(--cp-danger,#B72B2B); font-size:13px; }

/* ── Delivery options ─────────────────────────────────────────────── */
#cp-delivery-card .cp-dlv-opt {
  display:flex; align-items:flex-start; gap:11px;
  padding:13px 15px; border:1.5px solid var(--cp-border);
  border-radius:var(--cp-radius-lg,16px); cursor:pointer;
  transition:all .18s; background:var(--cp-surface); margin-bottom:8px;
}
#cp-delivery-card .cp-dlv-opt:last-child { margin-bottom:0; }
#cp-delivery-card .cp-dlv-opt:hover { border-color:var(--cp-accent); }
#cp-delivery-card .cp-dlv-opt.selected { border-color:var(--cp-accent); background:rgba(196,98,45,.05); }

/* ── Checkout summary panel ───────────────────────────────────────── */
.cp-co-summary-wrap {
  background: var(--cp-surface); border: 1px solid var(--cp-border-lt);
  border-radius: var(--cp-radius-xl); overflow: hidden;
  position: sticky; top: 24px; box-shadow: 0 2px 18px rgba(0,0,0,.06);
}
.cp-co-summary-head {
  padding: 18px 22px 16px; border-bottom: 1px solid var(--cp-border-lt);
  display: flex; align-items: center; justify-content: space-between;
  background: var(--cp-surface2);
}
.cp-co-summary-head h3 { font-family: var(--cp-ff-d); font-size: 17px; font-weight: 700; color: var(--cp-text); }
.cp-co-summary-head span { font-size: 12px; color: var(--cp-text-muted); }
.cp-co-items { padding: 2px 22px; max-height: 300px; overflow-y: auto; }
.cp-co-items::-webkit-scrollbar { width: 3px; }
.cp-co-items::-webkit-scrollbar-thumb { background: var(--cp-border); border-radius: 2px; }
.cp-co-item { display:flex; align-items:center; gap:11px; padding:11px 0; border-bottom:1px solid var(--cp-border-lt); }
.cp-co-item:last-child { border-bottom:none; }
.cp-co-thumb { width:40px; height:40px; border-radius:8px; background:var(--cp-surface2); border:1px solid var(--cp-border-lt); display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; overflow:hidden; }
.cp-co-thumb img { width:100%; height:100%; object-fit:cover; }
.cp-co-item-name  { flex:1; font-size:13px; font-weight:500; color:var(--cp-text); line-height:1.3; }
.cp-co-item-qty   { background:var(--cp-surface2); border:1px solid var(--cp-border); padding:1px 7px; border-radius:4px; font-size:10px; font-weight:600; color:var(--cp-text-muted); flex-shrink:0; }
.cp-co-item-price { font-size:13px; font-weight:700; color:var(--cp-text); flex-shrink:0; }
.cp-co-totals-wrap { padding:14px 22px; border-top:1px solid var(--cp-border-lt); background:var(--cp-surface2); }
.cp-co-row { display:flex; justify-content:space-between; align-items:center; padding:6px 0; font-size:13px; color:var(--cp-text-muted); }
.cp-co-row.disc { color:var(--cp-success,#1D6A40); }
.cp-co-grand { display:flex; justify-content:space-between; align-items:baseline; padding-top:12px; margin-top:8px; border-top:1.5px solid var(--cp-border); }
.cp-co-grand .gl { font-family:var(--cp-ff-d); font-size:16px; font-weight:700; color:var(--cp-text); }
.cp-co-grand .gv { font-family:var(--cp-ff-d); font-size:28px; font-weight:700; color:var(--cp-accent); letter-spacing:-.025em; }

/* ── Order success ────────────────────────────────────────────────── */
.cp-success-screen { text-align:center; padding:72px 24px; }
.cp-success-ring {
  width:90px; height:90px; background:rgba(46,125,69,.09);
  border:2px solid rgba(46,125,69,.25); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 22px; font-size:36px;
  animation:cpPop .5s cubic-bezier(.175,.885,.32,1.275) both;
}
@keyframes cpPop { from{transform:scale(.25);opacity:0} to{transform:scale(1);opacity:1} }
.cp-success-title   { font-family:var(--cp-ff-d); font-size:38px; font-weight:700; color:var(--cp-text); margin-bottom:8px; letter-spacing:-.025em; }
.cp-success-sub     { font-size:14px; color:var(--cp-text-muted); margin-bottom:12px; line-height:1.7; }
.cp-success-order   { display:inline-block; background:var(--cp-text); color:var(--cp-bg); padding:8px 22px; border-radius:100px; font-size:14px; font-weight:600; margin:14px 0; }
.cp-success-actions { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:24px; }

/* ================================================================
   MY ORDERS PAGE
   ================================================================ */

.cp-orders-wrap { padding: 44px 0 80px; }

.cp-orders-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  padding-bottom: 24px; border-bottom: 1.5px solid var(--cp-border); margin-bottom: 28px;
  gap: 12px; flex-wrap: wrap;
}
.cp-orders-count { font-size: 13px; color: var(--cp-text-muted); }

.cp-order-card {
  background: var(--cp-surface); border: 1px solid var(--cp-border-lt);
  border-radius: var(--cp-radius-lg); overflow: hidden; margin-bottom: 10px;
  transition: box-shadow .2s;
}
.cp-order-card:hover { box-shadow: var(--cp-card-shadow, 0 4px 20px rgba(0,0,0,.07)); }
.cp-order-card-head { display:flex; align-items:center; gap:14px; padding:16px 22px; cursor:pointer; user-select:none; }
.cp-order-num   { font-family:var(--cp-ff-d); font-size:16px; font-weight:700; color:var(--cp-text); min-width:75px; }
.cp-order-date  { font-size:12.5px; color:var(--cp-text-muted); flex:1; }
.cp-order-total { font-family:var(--cp-ff-d); font-size:18px; font-weight:700; color:var(--cp-text); }

.cp-status { display:inline-flex; align-items:center; gap:5px; padding:4px 11px; border-radius:100px; font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; }
.cp-status::before { content:''; width:5px; height:5px; border-radius:50%; background:currentColor; flex-shrink:0; }
.cp-status-completed  { background:rgba(46,125,69,.1);  color:var(--cp-success,#1D6A40); }
.cp-status-processing { background:rgba(37,99,235,.09); color:#1D4ED8; }
.cp-status-pending    { background:rgba(180,83,9,.1);   color:#B45309; }
.cp-status-cancelled  { background:rgba(107,114,128,.1);color:#6B7280; }
.cp-status-refunded   { background:rgba(157,23,77,.1);  color:#9D174D; }

.cp-order-chevron { color:var(--cp-text-muted); transition:transform .2s; margin-left:auto; flex-shrink:0; }
.cp-order-card.expanded .cp-order-chevron { transform:rotate(180deg); }
.cp-order-card-body { display:none; border-top:1px solid var(--cp-border-lt); animation:cpFadeIn .2s ease both; }
.cp-order-card.expanded .cp-order-card-body { display:block; }

.cp-order-lines { padding:16px 22px; display:flex; flex-direction:column; gap:0; }
.cp-order-line { display:grid; grid-template-columns:1fr auto auto; gap:14px; padding:10px 0; border-bottom:1px solid var(--cp-border-lt); align-items:center; }
.cp-order-line:first-child { padding-top:0; }
.cp-order-line:last-child  { border-bottom:none; }
.cp-order-line-name  { font-size:14px; font-weight:500; color:var(--cp-text); line-height:1.3; }
.cp-order-line-mod   { font-size:11px; color:var(--cp-text-muted); margin-top:2px; }
.cp-order-line-qty   { font-size:12px; color:var(--cp-text-muted); text-align:center; }
.cp-order-line-price { font-family:var(--cp-ff-d); font-size:15px; font-weight:700; color:var(--cp-text); text-align:right; }

.cp-order-totals {
  padding:12px 22px 16px; border-top:1px solid var(--cp-border-lt);
  background:var(--cp-surface2); display:flex; flex-direction:column; gap:5px;
}
.cp-order-totals-row { display:flex; justify-content:space-between; align-items:center; font-size:12.5px; color:var(--cp-text-muted); }
.cp-order-totals-row.grand { font-family:var(--cp-ff-d); font-size:17px; font-weight:700; color:var(--cp-text); padding-top:9px; margin-top:3px; border-top:1px solid var(--cp-border); }
.cp-order-totals-row.grand span:last-child { color:var(--cp-accent); }
.cp-order-totals-row.discount span:last-child { color:var(--cp-success,#1D6A40); }
.cp-order-footer { display:flex; justify-content:flex-end; gap:8px; padding:12px 22px; border-top:1px solid var(--cp-border-lt); }

.cp-no-orders { text-align:center; padding:90px 20px; }
.cp-no-orders-icon { font-size:54px; margin-bottom:18px; opacity:.22; }
.cp-no-orders h3 { font-family:var(--cp-ff-d); font-size:28px; font-weight:700; color:var(--cp-text); margin-bottom:8px; }
.cp-no-orders p  { font-size:14px; color:var(--cp-text-muted); margin-bottom:24px; }

@media (max-width:640px) {
  .cp-order-card-head { flex-wrap:wrap; gap:8px; }
  .cp-order-date { order:10; flex:100%; font-size:11.5px; }
}

/* ================================================================
   GLOBAL FIXES — mobile, admin bar offsets, spin anim
   ================================================================ */

/* Spin keyframe (used by add-to-cart loading state) */
@keyframes cpSpin { to { transform: rotate(360deg); } }

/* Admin bar offset — when WP admin bar is visible */
.admin-bar .cp-shop-controls  { top: 32px; }
.admin-bar .cp-cart-sidebar   { top: calc(32px + 24px); }
.admin-bar .cp-co-summary-wrap { top: calc(32px + 24px); }
@media (max-width: 782px) {
  .admin-bar .cp-shop-controls { top: 46px; }
  .admin-bar .cp-cart-sidebar  { top: calc(46px + 16px); }
}

/* Cart row — fix mobile grid when 2-col was breaking */
@media (max-width: 480px) {
  .cp-cart-row { grid-template-columns: 68px 1fr; gap: 10px; }
  .cp-cart-right { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: wrap; }
}

/* Cart sidebar — on mobile, no longer sticky */
@media (max-width: 900px) {
  .cp-cart-sidebar { position: static; }
}

/* Fix order card mobile head overflow */
@media (max-width: 500px) {
  .cp-order-card-head { padding: 14px 16px; gap: 8px; }
  .cp-order-num { min-width: auto; font-size: 14px; }
  .cp-order-total { font-size: 16px; }
}

/* ================================================================
   GLOBAL STORE FIXES — animation, admin bar, mobile cart, toast
   ================================================================ */

/* Spin animation used by add-to-cart loading */
@keyframes cpSpin { to { transform: rotate(360deg); } }

/* Toast positioning fix */
#cp-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99999;
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  pointer-events: none;
  white-space: nowrap;
  display: none;
}
.cp-toast-success { background: #1a1a1a; color: #fff; }
.cp-toast-error   { background: #dc2626; color: #fff; }

/* Admin bar offset — WP adds 32px (desktop) / 46px (mobile) */
.admin-bar .bt-nav,
.admin-bar .cl-bar,
.admin-bar .ff-controls,
.admin-bar .cf-pills-wrap,
.admin-bar .lx-nav,
.admin-bar .cp-shop-controls { top: 32px; }

@media (max-width: 782px) {
  .admin-bar .bt-nav,
  .admin-bar .cl-bar,
  .admin-bar .ff-controls,
  .admin-bar .cf-pills-wrap,
  .admin-bar .lx-nav,
  .admin-bar .cp-shop-controls { top: 46px; }
}

/* Cart FAB always above everything */
.bt-cart-fab, .cl-cart-fab, .cf-cart-fab,
.lx-cart-float, .md-cart-fab { z-index: 9999; }

/* Fast food cart bar */
.ff-cart-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 9999;
  display: none; /* overridden by JS when n > 0 */
}

/* Smokehouse ticker */
.sm-ticker {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: space-between;
  text-decoration: none;
}

/* Cart page sidebar mobile fix */
@media (max-width: 900px) {
  .cp-cart-sidebar { position: static !important; }
}

/* Cart row mobile compact */
@media (max-width: 480px) {
  .cp-cart-row { grid-template-columns: 64px 1fr; gap: 10px; }
  .cp-cart-right { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; flex-wrap: wrap; }
}

/* Orders page mobile */
@media (max-width: 500px) {
  .cp-order-card-head { flex-wrap: wrap; gap: 8px; padding: 12px 16px; }
  .cp-order-num { font-size: 14px; }
}

/* ================================================================
   MY ACCOUNT PAGE  [clover_account]
   ================================================================ */

/* ── Layout ──────────────────────────────────────────────────────── */
.cp-account-wrap { max-width: 860px; margin: 0 auto; padding: 24px 0 60px; }

/* ── Header ──────────────────────────────────────────────────────── */
.cp-account-header {
  display: flex; align-items: center; gap: 16px;
  padding: 24px; background: var(--cp-surface); border-radius: var(--cp-radius, 14px);
  border: 1px solid var(--cp-border); margin-bottom: 24px;
}
.cp-account-avatar {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--cp-accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 700; font-family: var(--cp-ff-d, system-ui);
  flex-shrink: 0;
}
.cp-account-header-info { flex: 1; min-width: 0; }
.cp-account-name { font-size: 18px; font-weight: 700; margin: 0 0 2px; color: var(--cp-text); }
.cp-account-email { font-size: 13px; color: var(--cp-text-muted); display: block; }
.cp-account-tier-badge {
  display: inline-block; margin-top: 6px;
  padding: 2px 10px; border-radius: 99px;
  font-size: 11px; font-weight: 700; letter-spacing: .5px;
  background: color-mix(in srgb, var(--tier-color) 15%, transparent);
  color: var(--tier-color); border: 1px solid color-mix(in srgb, var(--tier-color) 30%, transparent);
}
.cp-account-logout {
  font-size: 13px; color: var(--cp-text-muted); text-decoration: none;
  padding: 6px 14px; border: 1px solid var(--cp-border); border-radius: var(--cp-radius, 10px);
  transition: all .15s; white-space: nowrap; flex-shrink: 0;
}
.cp-account-logout:hover { color: var(--cp-danger, #B72B2B); border-color: var(--cp-danger, #B72B2B); }

/* ── Tabs ────────────────────────────────────────────────────────── */
.cp-account-tabs {
  display: flex; gap: 4px; border-bottom: 2px solid var(--cp-border);
  margin-bottom: 24px; overflow-x: auto;
}
.cp-account-tab {
  padding: 10px 16px; font-size: 14px; font-weight: 600;
  color: var(--cp-text-muted); text-decoration: none; white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -2px;
  transition: all .15s; border-radius: var(--cp-radius, 10px) var(--cp-radius, 10px) 0 0;
  display: flex; align-items: center; gap: 6px;
}
.cp-account-tab:hover { color: var(--cp-text); background: var(--cp-surface); }
.cp-account-tab.active { color: var(--cp-accent); border-bottom-color: var(--cp-accent); }
.cp-tab-badge {
  background: var(--cp-accent); color: #fff;
  font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 99px;
}

/* ── Panel ────────────────────────────────────────────────────────── */
.cp-account-panel { animation: cpFadeIn .2s ease; }
.cp-account-section-title {
  font-size: 15px; font-weight: 700; color: var(--cp-text);
  margin: 0 0 16px; padding: 0;
}
.cp-account-divider { border: none; border-top: 1px solid var(--cp-border); margin: 28px 0; }
.cp-account-notice {
  padding: 12px 16px; border-radius: var(--cp-radius, 10px);
  font-size: 14px; font-weight: 500; margin-bottom: 20px;
}
.cp-account-notice.ok  { background: #ECFDF5; color: #065F46; border: 1px solid #6EE7B7; }
.cp-account-notice.err { background: #FEF2F2; color: #991B1B; border: 1px solid #FECACA; }

/* ── Form ────────────────────────────────────────────────────────── */
.cp-account-form { margin: 0; }
.cp-account-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.cp-account-field { display: flex; flex-direction: column; gap: 5px; }
.cp-field-full { grid-column: 1 / -1; }
.cp-account-label { font-size: 13px; font-weight: 600; color: var(--cp-text); }
.cp-account-input {
  padding: 10px 12px; border: 1.5px solid var(--cp-border);
  border-radius: var(--cp-radius, 10px); font-size: 14px;
  color: var(--cp-text); background: var(--cp-bg);
  font-family: var(--cp-ff-b, system-ui); transition: border-color .15s;
  width: 100%; box-sizing: border-box;
}
.cp-account-input:focus { outline: none; border-color: var(--cp-accent); }
.cp-account-input:disabled { opacity: .5; cursor: not-allowed; background: var(--cp-surface); }
.cp-account-hint { font-size: 11px; color: var(--cp-text-muted); margin-top: 2px; }

/* ── Addresses ───────────────────────────────────────────────────── */
.cp-address-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 24px; }
.cp-address-card {
  padding: 16px; border: 1.5px solid var(--cp-border);
  border-radius: var(--cp-radius, 14px); position: relative;
  background: var(--cp-surface);
}
.cp-address-card.is-default { border-color: var(--cp-accent); }
.cp-address-default-badge {
  position: absolute; top: 10px; right: 10px;
  background: var(--cp-accent); color: #fff;
  font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 99px;
  letter-spacing: .3px;
}
.cp-address-label { font-size: 14px; font-weight: 700; color: var(--cp-text); display: block; margin-bottom: 6px; }
.cp-address-text { font-size: 13px; color: var(--cp-text-muted); line-height: 1.6; margin: 0 0 12px; }
.cp-address-actions { display: flex; gap: 8px; }
.cp-address-action-btn {
  font-size: 12px; font-weight: 600; padding: 5px 12px;
  border: 1px solid var(--cp-border); border-radius: var(--cp-radius, 8px);
  background: transparent; color: var(--cp-text); cursor: pointer; transition: all .15s;
}
.cp-address-action-btn:hover { border-color: var(--cp-accent); color: var(--cp-accent); }
.cp-address-delete-btn:hover { border-color: var(--cp-danger, #B72B2B); color: var(--cp-danger, #B72B2B); }

/* ── Loyalty ─────────────────────────────────────────────────────── */
.cp-loyalty-hero {
  display: flex; align-items: center; gap: 24px;
  padding: 24px; background: var(--cp-surface); border-radius: var(--cp-radius, 14px);
  border: 2px solid color-mix(in srgb, var(--tier-color) 25%, transparent);
  margin-bottom: 28px;
}
.cp-loyalty-points-big { text-align: center; flex-shrink: 0; }
.cp-loyalty-pts-num { font-size: 48px; font-weight: 900; font-family: var(--cp-ff-d, system-ui); color: var(--tier-color); display: block; line-height: 1; }
.cp-loyalty-pts-label { font-size: 12px; font-weight: 600; color: var(--cp-text-muted); letter-spacing: 1px; text-transform: uppercase; }
.cp-loyalty-tier-info { flex: 1; }
.cp-loyalty-tier-name { font-size: 22px; font-weight: 800; display: block; margin-bottom: 4px; }
.cp-loyalty-next { font-size: 13px; color: var(--cp-text-muted); display: block; margin-bottom: 10px; }
.cp-loyalty-bar-wrap { height: 6px; background: var(--cp-border); border-radius: 99px; overflow: hidden; }
.cp-loyalty-bar { height: 100%; border-radius: 99px; transition: width .5s ease; }
.cp-loyalty-tiers-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.cp-loyalty-tier-card {
  text-align: center; padding: 12px 8px; border-radius: var(--cp-radius, 10px);
  border: 1.5px solid var(--cp-border); display: flex; flex-direction: column; gap: 4px;
}
.cp-loyalty-tier-card.current { border-color: var(--tc); background: color-mix(in srgb, var(--tc) 8%, transparent); }
.cp-loyalty-tier-card strong { font-size: 13px; }
.cp-loyalty-tier-card span { font-size: 11px; color: var(--cp-text-muted); }
.cp-loyalty-history { display: flex; flex-direction: column; gap: 0; }
.cp-loyalty-history-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--cp-border); font-size: 14px;
}
.cp-loyalty-history-desc { flex: 1; color: var(--cp-text); }
.cp-loyalty-history-date { color: var(--cp-text-muted); font-size: 12px; flex-shrink: 0; }
.cp-loyalty-history-pts { font-weight: 700; flex-shrink: 0; }
.cp-loyalty-history-pts.earned { color: #16A34A; }
.cp-loyalty-history-pts.spent  { color: var(--cp-danger, #B72B2B); }
.cp-loyalty-how { margin-top: 4px; }

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .cp-account-grid { grid-template-columns: 1fr; }
  .cp-address-grid { grid-template-columns: 1fr; }
  .cp-loyalty-tiers-grid { grid-template-columns: repeat(2, 1fr); }
  .cp-loyalty-hero { flex-direction: column; text-align: center; }
  .cp-account-header { flex-wrap: wrap; }
  .cp-account-logout { margin-left: auto; }
}