/* ==========================================================================
   RUPIX3D COMPONENT LIBRARY — adapts HANDOFF.md §3 to theme conventions
   ========================================================================== */

/* ── Global resets & base ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink);
  background: var(--ivory);
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

a { color: var(--green); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Promo strip ─────────────────────────────────────────────────────────── */
.rupix-promo-strip {
  background: var(--green);
  color: var(--ivory);
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 500;
  text-align: center;
  padding: 9px 16px;
  letter-spacing: 0.02em;
}
.rupix-promo-strip span { color: var(--brass); font-weight: 700; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.rupix-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding: 0 20px; border-radius: 9999px;
  font-family: var(--font-body); font-size: 14.5px; font-weight: 600;
  letter-spacing: -0.1px; cursor: pointer; border: none; outline: none;
  transition: transform .14s ease, opacity .14s ease, box-shadow .14s ease;
  white-space: nowrap; text-decoration: none;
}
.rupix-btn:hover { text-decoration: none; }
.rupix-btn:active { transform: scale(.985); }

.rupix-btn--sm { height: 36px; padding: 0 14px; font-size: 13px; }
.rupix-btn--lg { height: 54px; padding: 0 24px; font-size: 15.5px; }
.rupix-btn--xl { height: 60px; padding: 0 28px; font-size: 16px; }
.rupix-btn--full { width: 100%; }

.rupix-btn--green { background: var(--green); color: var(--ivory); border: 1px solid var(--green); }
.rupix-btn--green:hover { background: var(--green-soft); border-color: var(--green-soft); color: var(--ivory); }

.rupix-btn--brass { background: var(--brass); color: var(--green); border: 1px solid var(--brass); }
.rupix-btn--brass:hover { background: var(--brass-2); border-color: var(--brass-2); color: var(--green); }

.rupix-btn--ghost { background: transparent; color: var(--green); border: 1px solid var(--line); }
.rupix-btn--ghost:hover { background: var(--green-tint); color: var(--green); }

.rupix-btn--soft { background: var(--green-tint); color: var(--green); border: 1px solid var(--green-tint-2); }
.rupix-btn--soft:hover { background: var(--green-tint-2); }

.rupix-btn--ivory { background: var(--ivory); color: var(--green); border: 1px solid var(--line); }
.rupix-btn--dark  { background: var(--ink);  color: var(--ivory); border: 1px solid var(--ink); }

/* ── Pills / chips ───────────────────────────────────────────────────────── */
.rupix-pill {
  display: inline-flex; align-items: center; gap: 5px;
  height: 32px; padding: 0 12px; border-radius: 9999px;
  background: var(--ivory); color: var(--ink-2);
  border: 1px solid var(--line);
  font-family: var(--font-body); font-size: 12.5px; font-weight: 500;
  white-space: nowrap; cursor: pointer; transition: all .14s;
}
.rupix-pill.is-active { background: var(--green); color: var(--brass); border-color: var(--green); font-weight: 600; }
.rupix-pill:hover:not(.is-active) { background: var(--green-tint); border-color: var(--green-tint-2); }

/* ── Product card ────────────────────────────────────────────────────────── */
.rupix-card {
  background: var(--ivory);
  border: 1px solid var(--line-2);
  border-radius: var(--r-xl);
  overflow: hidden;
  transition: transform .2s, box-shadow .2s;
  position: relative;
}
.rupix-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); }

.rupix-card__img-wrap { position: relative; }
.rupix-card__img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }
.rupix-card__img-placeholder {
  width: 100%; aspect-ratio: 1/1;
  background: linear-gradient(135deg, var(--green) 0%, var(--green-2) 100%);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 36px; font-weight: 700;
  color: var(--brass); opacity: 0.2;
}

.rupix-card__tag {
  position: absolute; top: 10px; left: 10px;
  background: var(--brass); color: var(--green);
  padding: 3px 8px; border-radius: 9999px;
  font-family: var(--font-display); font-size: 10px; font-weight: 700;
  letter-spacing: .5px; text-transform: uppercase;
}
.rupix-card__tag--stock {
  background: var(--green-tint); color: var(--green); border: 1px solid var(--green-tint-2);
}
.rupix-card__tag--low { background: #FEF3C7; color: #92400E; }

.rupix-card__body { padding: 14px 16px 16px; }
.rupix-card__cat  { font-family: var(--font-display); font-size: 10px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 5px; }
.rupix-card__name { font-family: var(--font-display); font-size: 14.5px; font-weight: 700; color: var(--ink); line-height: 1.3; margin-bottom: 6px; }
.rupix-card__name a { color: inherit; text-decoration: none; }
.rupix-card__name a:hover { color: var(--green); }

.rupix-card__rating {
  display: flex; align-items: center; gap: 4px;
  font-family: var(--font-body); font-size: 12px; color: var(--muted); margin-bottom: 10px;
}
.rupix-card__stars { color: #F59E0B; letter-spacing: -1px; }

.rupix-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.rupix-card__price  { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--green); }
.rupix-card__was    { font-size: 12px; color: var(--muted); text-decoration: line-through; margin-left: 4px; }

/* ── Material picker ─────────────────────────────────────────────────────── */
.rupix-mat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }

.rupix-mat {
  padding: 12px; border-radius: var(--r-md);
  background: var(--ivory); border: 1.5px solid var(--line);
  cursor: pointer; transition: all .14s;
}
.rupix-mat:hover { border-color: var(--green-tint-2); background: var(--green-tint); }
.rupix-mat.is-active { background: var(--green-tint); border-color: var(--green); }

.rupix-mat__name  { font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--green); }
.rupix-mat__sub   { font-family: var(--font-body); font-size: 11px; color: var(--muted); margin-top: 3px; }
.rupix-mat__price { font-family: var(--font-body); font-size: 12px; font-weight: 600; color: var(--ink-2); margin-top: 4px; }

/* ── Colour swatches ─────────────────────────────────────────────────────── */
.rupix-swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.rupix-swatch {
  width: 32px; height: 32px; border-radius: 9999px;
  border: 2.5px solid transparent; cursor: pointer;
  transition: transform .12s, border-color .12s;
}
.rupix-swatch.is-active { border-color: var(--green); transform: scale(1.15); }
.rupix-swatch:hover { transform: scale(1.08); }

/* ── Size segmented ──────────────────────────────────────────────────────── */
.rupix-sizes { display: flex; gap: 8px; }
.rupix-size {
  height: 36px; min-width: 52px; padding: 0 12px;
  border-radius: var(--r-sm); background: var(--ivory);
  border: 1.5px solid var(--line);
  font-family: var(--font-body); font-size: 13px; font-weight: 600;
  color: var(--ink-2); cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all .14s;
}
.rupix-size.is-active { background: var(--green); border-color: var(--green); color: var(--ivory); }
.rupix-size:hover:not(.is-active) { border-color: var(--green); color: var(--green); }

/* ── Form inputs ─────────────────────────────────────────────────────────── */
.rupix-input, .rupix-select, .rupix-textarea {
  width: 100%;
  background: var(--ivory); border: 1px solid var(--line);
  font-family: var(--font-body); font-size: 14px; font-weight: 500; color: var(--ink);
  transition: border-color .14s, box-shadow .14s;
  outline: none;
}
.rupix-input, .rupix-select {
  height: 50px; padding: 0 16px; border-radius: var(--r-lg);
}
.rupix-textarea {
  padding: 14px 16px; border-radius: var(--r-lg);
  resize: vertical; min-height: 120px; line-height: 1.6;
}
.rupix-input:focus, .rupix-select:focus, .rupix-textarea:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(17,63,43,0.1);
}
.rupix-input::placeholder, .rupix-textarea::placeholder { color: var(--muted); }

.rupix-label {
  display: block; margin-bottom: 6px;
  font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--ink-2);
}
.rupix-field { margin-bottom: 18px; }

/* Phone input with flag */
.rupix-phone-wrap {
  display: flex; align-items: stretch;
  border: 1.5px solid var(--green); border-radius: var(--r-lg);
  overflow: hidden; height: 60px;
  box-shadow: 0 0 0 4px rgba(17,63,43,0.08);
  background: var(--ivory);
}
.rupix-phone-flag {
  display: flex; align-items: center; gap: 8px;
  padding: 0 14px; background: var(--green-tint);
  border-right: 1px solid var(--line);
  font-family: var(--font-body); font-size: 14px; font-weight: 600; color: var(--green);
  white-space: nowrap; cursor: pointer;
}
.rupix-phone-input {
  flex: 1; border: none; background: transparent; outline: none;
  padding: 0 16px;
  font-family: var(--font-mono); font-size: 18px; font-weight: 500; color: var(--ink);
  letter-spacing: 2px;
}
.rupix-phone-input::placeholder { color: var(--muted); letter-spacing: 1px; font-size: 15px; }

/* ── OTP boxes ───────────────────────────────────────────────────────────── */
.rupix-otp-wrap { display: flex; gap: 10px; }
.rupix-otp-box {
  width: 52px; height: 60px; border-radius: var(--r-md);
  border: 1.5px solid var(--line); background: var(--ivory);
  font-family: var(--font-mono); font-size: 22px; font-weight: 600;
  color: var(--green); text-align: center; outline: none;
  transition: border-color .14s, box-shadow .14s;
}
.rupix-otp-box:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(17,63,43,0.12); }

/* ── Trust strip ─────────────────────────────────────────────────────────── */
.rupix-trust {
  display: grid; gap: 0;
  border: 1px solid var(--line-2); border-radius: var(--r-xl);
  overflow: hidden; margin: 24px 0;
}
.rupix-trust--5 { grid-template-columns: repeat(5, 1fr); }
.rupix-trust--3 { grid-template-columns: repeat(3, 1fr); }

.rupix-trust__item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 18px 12px; background: var(--ivory);
  border-right: 1px solid var(--line-2); text-align: center;
}
.rupix-trust__item:last-child { border-right: none; }
.rupix-trust__icon { font-size: 20px; }
.rupix-trust__label { font-family: var(--font-display); font-size: 12px; font-weight: 700; color: var(--ink); }
.rupix-trust__sub   { font-family: var(--font-body); font-size: 11px; color: var(--muted); }

/* ── Section header ──────────────────────────────────────────────────────── */
.rupix-eyebrow {
  display: block; margin-bottom: 10px;
  font-family: var(--font-display); font-size: 11px; font-weight: 600;
  letter-spacing: 1.4px; text-transform: uppercase; color: var(--brass);
}

/* ── Steps / progress ribbon ─────────────────────────────────────────────── */
.rupix-steps {
  display: flex; align-items: center;
  background: var(--ivory); border: 1px solid var(--line-2);
  border-radius: var(--r-xl); padding: 6px; gap: 4px;
  margin-bottom: 32px;
}
.rupix-step {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; border-radius: var(--r-lg);
  font-family: var(--font-body); font-size: 13px; font-weight: 500;
  color: var(--muted); cursor: default;
}
.rupix-step.is-active {
  background: var(--green); color: var(--ivory);
  font-weight: 600; box-shadow: var(--shadow-card);
}
.rupix-step.is-done {
  color: var(--green); font-weight: 600;
}
.rupix-step__num {
  width: 22px; height: 22px; border-radius: 9999px;
  background: rgba(17,63,43,0.12); color: var(--green);
  font-family: var(--font-display); font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.rupix-step.is-active .rupix-step__num {
  background: var(--brass); color: var(--green);
}

/* ── Steps BEM variant (used in checkout progress bar) ──────────────────── */
.rupix-steps {
  display: flex; align-items: center; justify-content: center;
  gap: 0; margin-bottom: 32px; padding: 20px 0;
}
.rupix-steps__item {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  flex: 0 0 auto; position: relative;
}
.rupix-steps__dot {
  width: 16px; height: 16px; border-radius: 9999px;
  background: var(--line-2); border: 2px solid var(--line-2);
  transition: all .2s;
}
.rupix-steps__item.is-active .rupix-steps__dot {
  background: var(--green); border-color: var(--green);
  box-shadow: 0 0 0 4px var(--green-tint);
}
.rupix-steps__item.is-done .rupix-steps__dot {
  background: var(--brass); border-color: var(--brass);
}
.rupix-steps__label {
  font-family: var(--font-body); font-size: 12px; font-weight: 500;
  color: var(--muted); white-space: nowrap;
}
.rupix-steps__item.is-active .rupix-steps__label { color: var(--green); font-weight: 700; }
.rupix-steps__item.is-done  .rupix-steps__label  { color: var(--brass); font-weight: 600; }
.rupix-steps__line {
  flex: 1; height: 2px; background: var(--line-2);
  align-self: flex-start; margin-top: 7px;
  min-width: 40px; max-width: 80px;
  transition: background .2s;
}
.rupix-steps__line.is-done { background: var(--brass); }

/* ── Order status badges ─────────────────────────────────────────────────── */
.rupix-status {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 9999px;
  font-family: var(--font-body); font-size: 12px; font-weight: 600;
}
.rupix-status--processing { background: var(--green-tint); color: var(--green); }
.rupix-status--completed  { background: #D1FAE5; color: #065F46; }
.rupix-status--pending    { background: #FEF3C7; color: #92400E; }
.rupix-status--cancelled  { background: var(--line-2); color: var(--muted); }

/* ── Qty stepper ─────────────────────────────────────────────────────────── */
.rupix-qty {
  display: flex; align-items: center;
  border: 1px solid var(--line); border-radius: 9999px;
  overflow: hidden; background: var(--ivory);
}
.rupix-qty__btn {
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; cursor: pointer; color: var(--green);
  font-size: 18px; font-weight: 300; transition: background .12s;
}
.rupix-qty__btn:hover { background: var(--green-tint); }
.rupix-qty__val {
  min-width: 36px; text-align: center;
  font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--ink);
}

/* ── Sticky summary card ─────────────────────────────────────────────────── */
.rupix-summary {
  background: var(--ivory); border: 1px solid var(--line-2);
  border-radius: var(--r-xl); padding: 24px;
  position: sticky; top: 100px;
}
.rupix-summary--dark {
  background: var(--green); border-color: var(--green);
}
.rupix-summary--dark .rupix-summary__label { color: var(--brass-soft); }
.rupix-summary--dark .rupix-summary__total { color: var(--brass); }
.rupix-summary--dark .rupix-summary__row-label { color: rgba(248,246,240,0.75); }
.rupix-summary--dark .rupix-summary__row-val { color: var(--ivory); }

.rupix-summary__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.rupix-summary__label {
  font-family: var(--font-display); font-size: 11px; font-weight: 600;
  letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted);
}
.rupix-summary__rows { display: flex; flex-direction: column; gap: 0; border-top: 1px solid rgba(226,222,207,0.3); padding-top: 16px; }
.rupix-summary__row  { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid rgba(226,222,207,0.2); }
.rupix-summary__row:last-child { border-bottom: none; }
.rupix-summary__row-label { font-family: var(--font-body); font-size: 13px; font-weight: 500; color: var(--ink-2); }
.rupix-summary__row-val   { font-family: var(--font-display); font-size: 13px; font-weight: 600; color: var(--ink); }
.rupix-summary__row-val--green { color: #22C55E; }

.rupix-summary__total-row { padding: 16px 0 0; border-top: 1px solid var(--line-2); margin-top: 8px; }
.rupix-summary__total {
  font-family: var(--font-display); font-size: 28px; font-weight: 700;
  color: var(--green); letter-spacing: -0.03em; line-height: 1;
}
.rupix-summary__total-label { font-family: var(--font-body); font-size: 12px; color: var(--muted); margin-bottom: 4px; }

/* ── Sidebar filters ─────────────────────────────────────────────────────── */
.rupix-filters {
  background: var(--ivory); border: 1px solid var(--line-2);
  border-radius: var(--r-xl); padding: 20px;
}
.rupix-filters__section { margin-bottom: 24px; }
.rupix-filters__section:last-child { margin-bottom: 0; }
.rupix-filters__label {
  font-family: var(--font-display); font-size: 11px; font-weight: 600;
  letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted);
  margin-bottom: 12px; display: block;
}
.rupix-filters__list { list-style: none; padding: 0; margin: 0; }
.rupix-filters__item {
  display: flex; align-items: center; gap: 8px; padding: 6px 0;
  font-family: var(--font-body); font-size: 13.5px; color: var(--ink-2); cursor: pointer;
}
.rupix-filters__item input[type="checkbox"] { accent-color: var(--green); width: 15px; height: 15px; }
.rupix-filters__item:hover { color: var(--green); }
.rupix-filters__count { color: var(--muted); margin-left: auto; font-size: 12px; }

/* ── Divider ─────────────────────────────────────────────────────────────── */
.rupix-divider {
  display: flex; align-items: center; gap: 12px; margin: 20px 0;
  font-family: var(--font-body); font-size: 12px; color: var(--muted);
}
.rupix-divider::before, .rupix-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--line);
}

/* ── Hero band (shop) ────────────────────────────────────────────────────── */
.rupix-shop-hero {
  background: var(--green-tint); padding: 48px 0;
  border-bottom: 1px solid var(--line-2); position: relative; overflow: hidden;
}
.rupix-shop-hero__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.rupix-shop-hero__eyebrow { font-family: var(--font-display); font-size: 11px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--brass-2); margin-bottom: 12px; }
.rupix-shop-hero__title { font-family: var(--font-display); font-size: clamp(32px,4vw,52px); font-weight: 600; color: var(--green); line-height: 1.05; letter-spacing: -0.03em; margin-bottom: 16px; }
.rupix-shop-hero__body { font-family: var(--font-body); font-size: 15px; color: var(--muted); line-height: 1.6; margin-bottom: 24px; }
.rupix-shop-hero__imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rupix-shop-hero__img-item { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 1/1; }

/* ── Payment method row ──────────────────────────────────────────────────── */
.rupix-payment-row {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-radius: var(--r-lg);
  border: 1.5px solid var(--line); background: var(--ivory);
  cursor: pointer; margin-bottom: 8px; transition: all .14s;
}
.rupix-payment-row.is-active { border-color: var(--green); background: var(--green-tint); }
.rupix-payment-row input[type="radio"] { accent-color: var(--green); width: 16px; height: 16px; }
.rupix-payment-row__icon { font-size: 20px; }
.rupix-payment-row__label { font-family: var(--font-body); font-size: 14px; font-weight: 600; color: var(--ink); flex: 1; }
.rupix-payment-row__sub   { font-family: var(--font-body); font-size: 12px; color: var(--muted); }

/* ── Delivery tile ───────────────────────────────────────────────────────── */
.rupix-delivery-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; }
.rupix-delivery-tile {
  padding: 14px 16px; border-radius: var(--r-lg);
  border: 1.5px solid var(--line); background: var(--ivory);
  cursor: pointer; transition: all .14s;
}
.rupix-delivery-tile.is-active { border-color: var(--green); background: var(--green-tint); }
.rupix-delivery-tile__label { font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--ink); }
.rupix-delivery-tile__eta   { font-family: var(--font-body); font-size: 12px; color: var(--muted); margin-top: 3px; }
.rupix-delivery-tile__price { font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--green); margin-top: 6px; }
.rupix-delivery-tile__price--free { color: #22C55E; }

/* ── Upload dropzone ─────────────────────────────────────────────────────── */
.rupix-dropzone {
  border: 2px dashed var(--brass); border-radius: var(--r-xl);
  background: var(--brass-soft); padding: 40px 24px; text-align: center;
  cursor: pointer; transition: all .2s; position: relative;
}
.rupix-dropzone:hover, .rupix-dropzone.is-dragging { background: rgba(197,168,128,0.2); border-color: var(--brass-2); }
.rupix-dropzone__icon { font-size: 40px; margin-bottom: 12px; color: var(--brass-2); }
.rupix-dropzone__title { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--green); margin-bottom: 6px; }
.rupix-dropzone__sub   { font-family: var(--font-body); font-size: 13px; color: var(--muted); margin-bottom: 20px; }
.rupix-dropzone__input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* ── Live quote card ─────────────────────────────────────────────────────── */
.rupix-quote-card {
  background: var(--green); border-radius: var(--r-xl);
  padding: 24px; color: var(--ivory);
  position: sticky; top: 100px;
}
.rupix-quote-card__label { font-family: var(--font-display); font-size: 10px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--brass-soft); margin-bottom: 4px; }
.rupix-quote-card__title { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--brass); margin-bottom: 20px; }
.rupix-quote-card__row   { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid rgba(248,246,240,0.1); font-family: var(--font-body); font-size: 13px; }
.rupix-quote-card__row-l { color: rgba(248,246,240,0.7); }
.rupix-quote-card__row-r { font-weight: 600; color: var(--ivory); }
.rupix-quote-card__total-row { padding-top: 16px; }
.rupix-quote-card__total     { font-family: var(--font-display); font-size: 30px; font-weight: 700; color: var(--brass); letter-spacing: -0.03em; }
.rupix-quote-card__note      { font-family: var(--font-body); font-size: 12px; color: rgba(248,246,240,0.6); margin-top: 6px; }

/* ── Account sidebar ─────────────────────────────────────────────────────── */
.rupix-account-layout { display: grid; grid-template-columns: 260px 1fr; gap: 32px; align-items: start; }

.rupix-account-sidebar {
  background: var(--ivory); border: 1px solid var(--line-2);
  border-radius: var(--r-xl); overflow: hidden;
  position: sticky; top: 100px;
}
.rupix-account-profile {
  background: var(--green); padding: 20px;
  display: flex; align-items: center; gap: 14px;
}
.rupix-account-avatar {
  width: 44px; height: 44px; border-radius: 9999px;
  background: var(--brass); color: var(--green);
  font-family: var(--font-display); font-size: 18px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.rupix-account-profile__name { font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--ivory); }
.rupix-account-profile__email { font-family: var(--font-body); font-size: 11px; color: rgba(248,246,240,0.65); margin-top: 2px; }

.rupix-account-nav { padding: 8px 0; }
.rupix-account-nav__item {
  display: flex; align-items: center; gap: 10px; padding: 10px 16px;
  font-family: var(--font-body); font-size: 13.5px; font-weight: 500; color: var(--ink-2);
  text-decoration: none; transition: all .12s; cursor: pointer;
}
.rupix-account-nav__item:hover, .rupix-account-nav__item.is-active {
  background: var(--green-tint); color: var(--green); text-decoration: none;
}
.rupix-account-nav__item.is-active { font-weight: 600; }
.rupix-account-nav__icon { width: 16px; height: 16px; color: var(--muted); flex-shrink: 0; }
.rupix-account-nav__item.is-active .rupix-account-nav__icon { color: var(--green); }
.rupix-account-nav__badge {
  margin-left: auto; background: var(--green-tint-2); color: var(--green);
  border-radius: 9999px; font-size: 10px; font-weight: 700;
  min-width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; padding: 0 4px;
}
.rupix-account-nav__divider { height: 1px; background: var(--line-2); margin: 6px 0; }

/* ── Stat cards ──────────────────────────────────────────────────────────── */
.rupix-stat-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 24px; }
.rupix-stat-card {
  padding: 20px; border-radius: var(--r-xl);
  border: 1px solid var(--line-2); background: var(--ivory);
}
.rupix-stat-card--green  { background: var(--green); border-color: var(--green); }
.rupix-stat-card--brass  { background: var(--brass-soft); border-color: var(--brass-soft); }
.rupix-stat-card__label { font-family: var(--font-display); font-size: 11px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.rupix-stat-card--green .rupix-stat-card__label { color: rgba(248,246,240,0.6); }
.rupix-stat-card__value { font-family: var(--font-display); font-size: 28px; font-weight: 700; color: var(--ink); letter-spacing: -0.03em; }
.rupix-stat-card--green .rupix-stat-card__value { color: var(--brass); }

/* ── Progress bar ────────────────────────────────────────────────────────── */
.rupix-progress { height: 5px; background: var(--line-2); border-radius: 9999px; overflow: hidden; }
.rupix-progress__bar { height: 100%; background: var(--green); border-radius: 9999px; transition: width .5s ease; }

/* ── Refer card ──────────────────────────────────────────────────────────── */
.rupix-refer-card {
  background: linear-gradient(135deg, var(--brass) 0%, var(--brass-2) 100%);
  border-radius: var(--r-xl); padding: 24px; color: var(--green);
}
.rupix-refer-card__title { font-family: var(--font-display); font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.rupix-refer-card__sub   { font-family: var(--font-body); font-size: 13px; opacity: .75; margin-bottom: 16px; }
.rupix-refer-code {
  display: flex; align-items: center; gap: 0;
  background: rgba(17,63,43,0.12); border-radius: 9999px;
  overflow: hidden;
}
.rupix-refer-code__val { flex: 1; padding: 10px 16px; font-family: var(--font-mono); font-size: 14px; font-weight: 600; }
.rupix-refer-code__copy {
  padding: 10px 16px; background: var(--green); color: var(--ivory);
  font-family: var(--font-body); font-size: 12px; font-weight: 600; cursor: pointer; border: none;
}

/* ── Timeline (tracking) ─────────────────────────────────────────────────── */
.rupix-timeline { position: relative; }
.rupix-timeline-item {
  display: flex; gap: 16px; padding-bottom: 28px; position: relative;
}
.rupix-timeline-item:last-child { padding-bottom: 0; }
.rupix-timeline-item::before {
  content: ''; position: absolute; left: 9px; top: 22px;
  bottom: 0; width: 2px; background: var(--line-2);
}
.rupix-timeline-item:last-child::before { display: none; }
.rupix-timeline-dot {
  width: 20px; height: 20px; border-radius: 9999px; flex-shrink: 0; margin-top: 2px;
  background: var(--line-2); border: 2px solid var(--line); z-index: 1;
  display: flex; align-items: center; justify-content: center;
}
.rupix-timeline-item.is-active .rupix-timeline-dot { background: var(--green); border-color: var(--green); }
.rupix-timeline-item.is-done  .rupix-timeline-dot { background: var(--green-tint); border-color: var(--green); }
.rupix-timeline-content { flex: 1; }
.rupix-timeline-item.is-active .rupix-timeline-content {
  background: var(--green-tint); border: 1px solid var(--green-tint-2);
  border-radius: var(--r-md); padding: 12px 14px;
}
.rupix-timeline-label { font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--ink); }
.rupix-timeline-item.is-active .rupix-timeline-label { color: var(--green); }
.rupix-timeline-time  { font-family: var(--font-body); font-size: 12px; color: var(--muted); margin-top: 3px; }

/* ── Printer telemetry card ──────────────────────────────────────────────── */
.rupix-printer-card {
  background: var(--ivory-2); border: 1px solid var(--line);
  border-radius: var(--r-xl); padding: 20px;
}
.rupix-printer-card__title { font-family: var(--font-display); font-size: 13px; font-weight: 700; color: var(--green); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.rupix-telemetry-row { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--line-2); font-family: var(--font-body); font-size: 13px; }
.rupix-telemetry-row:last-child { border-bottom: none; }
.rupix-telemetry-row__label { color: var(--muted); }
.rupix-telemetry-row__val   { font-family: var(--font-mono); font-weight: 600; color: var(--ink); }

/* ── Pulse animation ─────────────────────────────────────────────────────── */
@keyframes rupix-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .4; }
}
.rupix-pulse { animation: rupix-pulse 2s infinite; }

/* ── Layout helpers ──────────────────────────────────────────────────────── */
.rupix-container { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.rupix-two-col   { display: grid; gap: 32px; }
.rupix-two-col--1-6 { grid-template-columns: 1.6fr 1fr; }
.rupix-two-col--1-4 { grid-template-columns: 1.4fr 1fr; }
.rupix-two-col--1-1 { grid-template-columns: 1fr 1fr; }
.rupix-two-col--1-1-split { grid-template-columns: 1fr 1fr; height: 100%; }
.rupix-stack { display: flex; flex-direction: column; gap: 16px; }

/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .rupix-account-layout { grid-template-columns: 220px 1fr; }
  .rupix-stat-cards { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 768px) {
  .rupix-two-col--1-6,
  .rupix-two-col--1-4,
  .rupix-two-col--1-1 { grid-template-columns: 1fr; }

  .rupix-shop-hero__inner { grid-template-columns: 1fr; }
  .rupix-shop-hero__imgs  { display: none; }

  .rupix-account-layout { grid-template-columns: 1fr; }
  .rupix-account-sidebar { position: static; }

  .rupix-stat-cards { grid-template-columns: repeat(2,1fr); }
  .rupix-trust--5   { grid-template-columns: repeat(3,1fr); }
  .rupix-trust--5 .rupix-trust__item:nth-child(n+4) { border-top: 1px solid var(--line-2); }

  .rupix-steps { overflow-x: auto; flex-wrap: nowrap; }
  .rupix-step  { flex: 0 0 auto; min-width: 100px; }

  .rupix-summary { position: static; }
  .rupix-quote-card { position: static; }
}

/* ==========================================================================
   COMPREHENSIVE MOBILE OVERRIDES  ≤ 768px
   ========================================================================== */
@media (max-width: 768px) {

  /* ── Container padding ──────────────────────────────────────────────────── */
  .rupix-container { padding: 0 16px; }

  /* ── Promo strip ────────────────────────────────────────────────────────── */
  .rupix-promo-strip { font-size: 11px; padding: 7px 36px 7px 10px !important; }
  .rupix-promo-sep   { display: none; }
  .rupix-promo-extra { display: none; }

  /* ── Logo ───────────────────────────────────────────────────────────────── */
  .custom-logo-link img,
  .custom-logo      { max-height: 36px !important; width: auto !important; }
  .pf3d-logo-svg svg { max-height: 36px !important; width: auto !important; }

  /* ── Buttons ────────────────────────────────────────────────────────────── */
  .rupix-btn--xl { height: 50px; padding: 0 20px; font-size: 15px; }
  .rupix-btn--lg { height: 46px; padding: 0 18px; font-size: 14px; }

  /* ── Trust strip ────────────────────────────────────────────────────────── */
  .rupix-trust--5 { grid-template-columns: repeat(2, 1fr); }
  .rupix-trust--5 .rupix-trust__item:nth-child(5) {
    grid-column: 1 / -1;
    border-right: none;
    border-top: 1px solid var(--line-2);
  }
  .rupix-trust--3 { grid-template-columns: 1fr; }
  .rupix-trust__item { padding: 14px 10px; }

  /* ── Product card grid ──────────────────────────────────────────────────── */
  .rupix-products-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px; }
  .rupix-card__body    { padding: 10px 12px 12px; }
  .rupix-card__name    { font-size: 13px; }
  .rupix-card__price   { font-size: 15px; }
  .rupix-card__footer  { gap: 6px; }

  /* ── Category grid ──────────────────────────────────────────────────────── */
  .rupix-cats-grid { grid-template-columns: 1fr 1fr !important; gap: 10px; }

  /* ── WooCommerce shop loop override ─────────────────────────────────────── */
  .woocommerce ul.products,
  ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }

  /* ── Cart table — stack rows ────────────────────────────────────────────── */
  .woocommerce-cart-form .shop_table thead { display: none !important; }
  .woocommerce-cart-form .shop_table,
  .woocommerce-cart-form .shop_table tbody,
  .woocommerce-cart-form .shop_table tr     { display: block !important; width: 100%; }
  .woocommerce-cart-form .shop_table tr     { position: relative; padding: 12px 0; border-bottom: 1px solid var(--line-2); }
  .woocommerce-cart-form .shop_table td     { display: block !important; border: none !important; padding: 4px 0; }
  .woocommerce-cart-form .shop_table td.product-thumbnail { float: left; width: 80px; margin-right: 12px; }
  .woocommerce-cart-form .shop_table td.product-name      { overflow: hidden; font-weight: 600; }
  .woocommerce-cart-form .shop_table td.product-remove    { position: absolute; top: 12px; right: 0; }
  .woocommerce-cart-form .shop_table td.product-price::before     { content: "Price: "; color: var(--muted); font-size: 12px; }
  .woocommerce-cart-form .shop_table td.product-subtotal::before  { content: "Subtotal: "; color: var(--muted); font-size: 12px; }

  /* ── Cart totals / coupon ───────────────────────────────────────────────── */
  .woocommerce .cart-collaterals { grid-template-columns: 1fr !important; }
  .woocommerce .cart-collaterals .cart_totals { width: 100% !important; }
  .woocommerce .coupon { flex-direction: column; gap: 8px; }
  .woocommerce .coupon input,
  .woocommerce .coupon .button { width: 100% !important; }

  /* ── Checkout ───────────────────────────────────────────────────────────── */
  .woocommerce .col2-set { grid-template-columns: 1fr !important; }
  .woocommerce .col2-set .col-1,
  .woocommerce .col2-set .col-2 { width: 100% !important; float: none !important; }
  .woocommerce-checkout #order_review_heading,
  .woocommerce-checkout #order_review { padding: 16px !important; }

  /* ── Order pay / thankyou ───────────────────────────────────────────────── */
  .woocommerce-order-details table.woocommerce-table { font-size: 13px; }
  .woocommerce-order-details table.woocommerce-table td,
  .woocommerce-order-details table.woocommerce-table th { padding: 8px !important; }

  /* ── My account layout ──────────────────────────────────────────────────── */
  .woocommerce-MyAccount-navigation ul {
    display: flex !important;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 !important;
    list-style: none;
    margin-bottom: 20px;
  }
  .woocommerce-MyAccount-navigation ul li { flex: none; }
  .woocommerce-MyAccount-navigation ul li a {
    display: block;
    padding: 6px 14px;
    border: 1px solid var(--line);
    border-radius: 9999px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-2);
    text-decoration: none;
  }
  .woocommerce-MyAccount-navigation ul li.is-active a,
  .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--active a {
    background: var(--green);
    color: var(--ivory);
    border-color: var(--green);
  }

  /* ── Single product ─────────────────────────────────────────────────────── */
  .rupix-two-col--product { grid-template-columns: 1fr !important; }
  .woocommerce div.product .woocommerce-tabs ul.tabs li a { font-size: 13px; padding: 8px 12px; }

  /* ── Hero section ───────────────────────────────────────────────────────── */
  .rupix-hero__inner,
  .pf3d-hero__inner { grid-template-columns: 1fr !important; text-align: center; gap: 24px !important; }
  .pf3d-hero__content { order: 1; }
  .pf3d-hero__visual  { order: 2; max-width: 280px; margin: 0 auto; }
  .pf3d-hero__actions { justify-content: center; flex-wrap: wrap; }
  .pf3d-hero__trust   { justify-content: center; flex-wrap: wrap; }

  /* ── Section typography ─────────────────────────────────────────────────── */
  .pf-section-title { font-size: clamp(1.4rem, 5vw, 2rem); }
  h1 { font-size: clamp(1.75rem, 7vw, 2.5rem); }
  h2 { font-size: clamp(1.4rem, 5.5vw, 2rem); }
  h3 { font-size: clamp(1.1rem, 4vw, 1.5rem); }

  /* ── Footer ─────────────────────────────────────────────────────────────── */
  .rupix-footer__grid  { grid-template-columns: 1fr !important; gap: 28px; }
  .pf3d-footer__grid   { grid-template-columns: 1fr !important; gap: 28px; }
  .pf3d-footer__bottom-inner { flex-direction: column; gap: 10px; align-items: flex-start; }

  /* ── Prevent horizontal overflow ────────────────────────────────────────── */
  body { overflow-x: hidden; }
  .pf3d-hero, .pf3d-stats-strip, .pf3d-categories,
  .pf3d-featured-products, .pf3d-services-strip,
  .pf3d-how-it-works, .pf3d-testimonials, .pf3d-cta-banner { overflow-x: hidden; }
}

/* ==========================================================================
   SMALL MOBILE  ≤ 480px
   ========================================================================== */
@media (max-width: 480px) {

  .rupix-container { padding: 0 14px; }

  /* ── Product grid: 1 column on tiny screens ─────────────────────────────── */
  .rupix-products-grid  { grid-template-columns: 1fr !important; }
  .rupix-cats-grid      { grid-template-columns: 1fr !important; }
  .woocommerce ul.products,
  ul.products           { grid-template-columns: 1fr !important; }

  /* ── Hero CTA: full-width stacked ──────────────────────────────────────── */
  .pf3d-hero__actions { flex-direction: column; align-items: stretch; }
  .pf3d-hero__actions .pf-btn,
  .pf3d-hero__actions .rupix-btn { width: 100%; justify-content: center; }

  /* ── Checkout steps bar: smaller ───────────────────────────────────────── */
  .rupix-steps__label { font-size: 10px; }
  .rupix-steps__line  { min-width: 24px; max-width: 48px; }

  /* ── Stats strip: 2 col ─────────────────────────────────────────────────── */
  .pf3d-stats-strip__grid { grid-template-columns: 1fr 1fr !important; }
  .pf3d-stat-divider       { display: none !important; }
  .pf3d-stat-item          { border-bottom: 1px solid var(--pf-border, var(--line-2)); padding: 14px; }
  .pf3d-stat-item:nth-child(odd) { border-right: 1px solid var(--pf-border, var(--line-2)); }

  /* ── Promo strip: even shorter ──────────────────────────────────────────── */
  .rupix-promo-strip { font-size: 10.5px; }

  /* ── Footer social + payments ──────────────────────────────────────────── */
  .pf3d-footer__payments { flex-wrap: wrap; gap: 6px; }
  .pf3d-footer__social   { flex-wrap: wrap; }
}

/* ==========================================================================
   MOBILE HEADER SPECIFICS
   ========================================================================== */
@media (max-width: 768px) {
  /* Ensure cart pill doesn't overflow on narrow screens */
  .rupix-bag-pill { padding: 7px 10px; min-width: 44px; }
  .rupix-bag-pill span.rupix-cart-count { display: inline; }

  /* Tighten header action gap on mobile */
  #pf3d-header .rupix-header-btn { width: 36px; height: 36px; }

  /* Hide search toggle label if present */
  .rupix-header-btn .rupix-btn-label { display: none; }
}

@media (max-width: 360px) {
  /* Very small phones: hide cart text, show just icon+count */
  .rupix-bag-pill .rupix-cart-label { display: none; }
  .rupix-bag-pill { padding: 7px 9px; }
}