/* ==========================================================================
   Aptaim storefront theme
   Change the brand colours in :root and the whole site follows.
   ========================================================================== */

:root {
  --brand: #0b7a6b;          /* primary: header accents, links, active states */
  --brand-dark: #075e53;
  --brand-soft: #e7f5f2;
  --accent: #f4511e;         /* calls to action: ADD, checkout */
  --accent-dark: #d63f0f;
  --accent-soft: #fff1ec;
  --price: #1f8a3b;          /* price badge */
  --price-dark: #0d4f20;
  --ink: #101418;
  --ink-2: #3b4350;
  --muted: #6b7482;
  --line: #e6e8ec;
  --surface: #f5f6f8;
  --card: #ffffff;
  --danger: #d92d20;
  --warn-bg: #fff6e5;
  --warn-ink: #8a5a00;
  --radius: 14px;
  --radius-sm: 9px;
  --shadow-1: 0 1px 2px rgba(16, 20, 24, .06), 0 2px 8px rgba(16, 20, 24, .05);
  --shadow-2: 0 8px 28px rgba(16, 20, 24, .12);
  --wrap: 1200px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --hdr-h: 76px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}
body.is-locked { overflow: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.i { width: 22px; height: 22px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.i--sm { width: 16px; height: 16px; }
.i--lg { width: 28px; height: 28px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Page load bar ---------- */
.pagebar { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 200; background: linear-gradient(90deg, var(--brand), var(--accent)); transition: width .35s var(--ease), opacity .3s; }
.pagebar.is-done { opacity: 0; }

/* ---------- Header ---------- */
.hdr { position: sticky; top: 0; z-index: 60; background: #fff; border-bottom: 1px solid var(--line); transition: box-shadow .25s; }
.hdr.is-stuck { box-shadow: 0 6px 20px rgba(16, 20, 24, .07); }
.hdr__row { display: flex; align-items: center; gap: 22px; height: var(--hdr-h); }
.logo { font-size: 30px; font-weight: 800; letter-spacing: -1.2px; color: var(--brand); line-height: 1; display: inline-flex; align-items: baseline; }
.logo span { color: var(--accent); font-size: .55em; font-weight: 700; letter-spacing: 0; margin-left: 1px; }
.logo img { height: 38px; width: auto; }

.loc { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 6px 10px; border-radius: 10px; transition: background .2s; text-align: left; }
.loc:hover { background: var(--surface); }
.loc__top { display: flex; align-items: center; gap: 5px; font-weight: 700; font-size: 14.5px; white-space: nowrap; }
.loc__top .i { color: var(--accent); fill: var(--accent); stroke: none; width: 15px; height: 15px; }
.loc__sub { display: flex; align-items: center; gap: 3px; font-size: 12.5px; color: var(--muted); white-space: nowrap; }

.search { position: relative; flex: 1; min-width: 0; }
.search__box { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; transition: border-color .2s, box-shadow .2s; }
.search__box:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
.search__box .i { color: var(--ink-2); }
.search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 15px; height: 100%; }
.search input::-webkit-search-cancel-button { display: none; }
.search__hint { position: absolute; left: 46px; top: 0; height: 46px; display: flex; align-items: center; color: var(--muted); pointer-events: none; white-space: nowrap; overflow: hidden; max-width: calc(100% - 60px); }
.search__hint b { font-weight: 500; }
.search__hint b::after { content: ""; display: inline-block; width: 1px; height: 1em; margin-left: 1px; background: var(--muted); vertical-align: -2px; animation: blink 1s steps(1) infinite; }
.search.has-text .search__hint { display: none; }
.suggest { position: absolute; left: 0; right: 0; top: calc(100% + 8px); background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-2); padding: 8px; z-index: 5; animation: drop .18s var(--ease); max-height: 70vh; overflow: auto; }
.suggest[hidden] { display: none; }
.suggest__item { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 10px; }
.suggest__item:hover, .suggest__item.is-active { background: var(--surface); }
.suggest__item img, .suggest__ico { width: 40px; height: 40px; border-radius: 8px; background: var(--surface); object-fit: contain; flex: none; display: grid; place-items: center; color: var(--brand); }
.suggest__item > span:not(.suggest__ico) { flex: 1; min-width: 0; font-weight: 500; }
.suggest__item small { display: block; color: var(--muted); font-weight: 400; }
.suggest__item em { font-style: normal; font-weight: 700; color: var(--price); white-space: nowrap; }
.suggest__all { color: var(--brand); font-weight: 600; }
.suggest__empty { padding: 14px; color: var(--muted); text-align: center; }

.hdr__actions { display: flex; align-items: center; gap: 6px; }
.hact { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 58px; padding: 6px 8px; border-radius: 10px; font-size: 12.5px; font-weight: 600; transition: background .2s, color .2s; }
.hact:hover { background: var(--surface); color: var(--brand); }
.badge { position: absolute; top: 0; right: 8px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.badge[data-n="0"] { display: none; }
.badge.is-bump { animation: bump .45s var(--ease); }

.depts { border-top: 1px solid var(--line); }
.depts__box { position: relative; }
.depts__row { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; }
.depts__row::-webkit-scrollbar { display: none; }
/* Arrows at the ends of the strip, shown by app.js only when more departments are hidden that way */
.depts__btn { position: absolute; top: 0; bottom: 0; z-index: 2; width: 64px; display: flex; align-items: center; color: var(--ink); }
.depts__btn[hidden] { display: none; }
.depts__btn--prev { left: 0; justify-content: flex-start; background: linear-gradient(90deg, #fff 40%, rgba(255, 255, 255, 0)); }
.depts__btn--next { right: 0; justify-content: flex-end; background: linear-gradient(270deg, #fff 40%, rgba(255, 255, 255, 0)); }
.depts__btn span { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-1); transition: border-color .2s, color .2s, transform .15s var(--ease); }
.depts__btn:hover span { border-color: var(--brand); color: var(--brand); }
.depts__btn:active span { transform: scale(.92); }
.depts__btn .i { width: 18px; height: 18px; }
/* Touch screens swipe the strip, so the arrows just become a fade hinting there is more */
@media (hover: none) {
  .depts__btn { width: 36px; pointer-events: none; }
  .depts__btn span { display: none; }
}
.dept { position: relative; display: flex; align-items: center; gap: 7px; padding: 12px 12px 11px; font-size: 15.5px; font-weight: 600; color: var(--muted); white-space: nowrap; transition: color .2s; }
.dept .i { width: 20px; height: 20px; }
.dept::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--brand); transform: scaleX(0); transition: transform .25s var(--ease); }
.dept:hover { color: var(--ink); }
.dept.is-active { color: var(--brand); }
.dept.is-active::after, .dept:hover::after { transform: scaleX(1); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 22px; border-radius: 12px; font-weight: 700; font-size: 15.5px; transition: transform .15s var(--ease), box-shadow .2s, background .2s, color .2s; white-space: nowrap; }
.btn:active { transform: scale(.97); }
.btn--primary { background: var(--accent); color: #fff; box-shadow: 0 6px 16px rgba(244, 81, 30, .28); }
.btn--primary:hover { background: var(--accent-dark); }
.btn--brand { background: var(--brand); color: #fff; }
.btn--brand:hover { background: var(--brand-dark); }
.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: #000; }
.btn--ghost { border: 1px solid var(--line); background: #fff; }
.btn--ghost:hover { border-color: var(--ink); }
.btn--block { width: 100%; }
.btn--sm { height: 38px; padding: 0 14px; font-size: 14px; border-radius: 10px; }
.btn[disabled] { opacity: .55; pointer-events: none; }
.link { color: var(--accent); font-weight: 600; }
.link:hover { text-decoration: underline; }

/* ---------- Sections ---------- */
main { min-height: 60vh; }
.section { padding: 26px 0 6px; }
.section__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.section__title { font-size: 22px; font-weight: 800; letter-spacing: -.3px; }
.section__title em { font-style: normal; color: var(--brand); }
.see-all { display: inline-flex; align-items: center; gap: 4px; color: var(--accent); font-weight: 700; font-size: 14.5px; }
.see-all .i { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.see-all:hover .i { transform: translateX(4px); }

/* ---------- Hero banners ---------- */
.hero { padding-top: 18px; }
.hero__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc(50% - 8px); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: 18px; }
.hero__track::-webkit-scrollbar { display: none; }
.hero__track--single { grid-auto-columns: 100%; }
.banner { position: relative; scroll-snap-align: start; min-height: 272px; border-radius: 18px; overflow: hidden; display: flex; align-items: center; padding: 30px 34px; background: var(--brand-soft); isolation: isolate; }
.banner:nth-child(3n+2) { background: #fff1ec; }
.banner:nth-child(3n+3) { background: #eef2ff; }
.banner__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; transition: transform 6s linear; }
.banner:hover .banner__img { transform: scale(1.06); }
.banner__body { max-width: 62%; }
.banner__kicker { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: var(--brand-dark); background: rgba(255, 255, 255, .75); padding: 5px 10px; border-radius: 20px; margin-bottom: 12px; }
.banner__title { font-size: clamp(24px, 2.6vw, 36px); font-weight: 800; line-height: 1.12; letter-spacing: -.8px; color: #0e2f2a; }
.banner__text { margin-top: 10px; color: #33504b; font-weight: 500; font-size: 15.5px; }
.banner__text p { margin: 0; }
.banner .btn { margin-top: 18px; }
.hero__dots { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
.hero__dots button { width: 7px; height: 7px; border-radius: 7px; background: var(--line); transition: width .3s var(--ease), background .3s; }
.hero__dots button.is-active { width: 22px; background: var(--brand); }

/* ---------- Trust strip ---------- */
.perks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 18px; }
.perk { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.perk__ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); flex: none; }
.perk b { display: block; font-size: 14.5px; }
.perk small { color: var(--muted); font-size: 12.5px; }

/* ---------- Category tiles ---------- */
.tiles { display: grid; grid-template-columns: repeat(10, 1fr); gap: 14px 12px; }
.tile { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; font-weight: 600; font-size: 14px; line-height: 1.3; }
.tile__img { width: 100%; aspect-ratio: 1; border-radius: 14px; background: var(--surface); overflow: hidden; display: grid; place-items: center; transition: transform .25s var(--ease), box-shadow .25s; }
.tile__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s var(--ease); }
.tile__img .i { width: 40%; height: 40%; color: var(--brand); }
.tile:hover .tile__img { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.tile:hover .tile__img img { transform: scale(1.08) rotate(-2deg); }
.tile:hover { color: var(--brand); }

/* ---------- Product rail ---------- */
.rail { position: relative; }
.rail__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 7 * 12px) / 8); gap: 12px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding: 4px 2px 14px; }
.rail__track::-webkit-scrollbar { display: none; }
.rail__track > * { scroll-snap-align: start; }
.rail__btn { position: absolute; top: 34%; width: 38px; height: 38px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; box-shadow: var(--shadow-2); z-index: 2; transition: transform .2s var(--ease), opacity .2s; }
.rail__btn:hover { transform: scale(1.1); }
.rail__btn .i { width: 18px; height: 18px; }
.rail__btn--prev { left: -14px; }
.rail__btn--next { right: -14px; }
.rail__btn[hidden] { display: none; }

/* ---------- Product card ---------- */
.pcard { position: relative; display: flex; flex-direction: column; min-width: 0; }
.pcard__media { position: relative; display: block; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); }
.pcard__media img { width: 100%; height: 100%; object-fit: cover; transition: opacity .4s, transform .4s var(--ease); }
.js .pcard__media img:not(.is-loaded) { opacity: 0; }
.pcard:hover .pcard__media img { transform: scale(1.06); }
.pcard__off { position: absolute; top: 0; left: 8px; background: var(--brand); color: #fff; font-size: 10.5px; font-weight: 800; line-height: 1.15; padding: 5px 5px 8px; text-align: center; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%); letter-spacing: .2px; }
.pcard__tag { position: absolute; right: 8px; top: 8px; background: rgba(16, 20, 24, .78); color: #fff; font-size: 9.5px; font-weight: 700; padding: 3px 7px; border-radius: 6px; text-transform: uppercase; letter-spacing: .4px; }
.pcard__add { position: absolute; right: 6px; bottom: -15px; z-index: 1; }
.pcard__mediawrap { position: relative; }
.pcard__body { padding: 20px 2px 0; display: flex; flex-direction: column; gap: 5px; }
.pcard__name { font-size: 14px; font-weight: 600; line-height: 1.38; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pcard__name:hover { color: var(--brand); }
.pcard__unit { font-size: 12.5px; color: var(--muted); }
.pcard__brand { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }

.price { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.price__now { background: var(--price); color: #fff; font-weight: 800; font-size: 15px; line-height: 1; padding: 5px 7px 4px; border-radius: 6px; box-shadow: 1.5px 1.5px 0 var(--price-dark); }
.price__mrp { color: var(--muted); font-size: 13px; text-decoration: line-through; }
.price__save { color: var(--price); font-size: 13px; font-weight: 700; }
.price--lg .price__now { font-size: 24px; padding: 8px 12px 6px; border-radius: 9px; box-shadow: 2.5px 2.5px 0 var(--price-dark); }

/* ---------- ADD / quantity stepper ---------- */
.qty { display: inline-flex; }
.qty__add, .qty__step { height: 34px; min-width: 66px; border-radius: 9px; font-weight: 800; font-size: 13.5px; letter-spacing: .4px; }
.qty__add { background: #fff; color: var(--accent); border: 1.5px solid var(--accent); box-shadow: 1.5px 1.5px 0 var(--accent); padding: 0 14px; transition: background .18s, color .18s, transform .15s var(--ease), box-shadow .18s; }
.qty__add:hover { background: var(--accent); color: #fff; }
.qty__add:active { transform: translate(1.5px, 1.5px); box-shadow: 0 0 0 var(--accent); }
.qty__step { display: none; align-items: center; justify-content: space-between; background: var(--accent); color: #fff; box-shadow: 1.5px 1.5px 0 var(--accent-dark); overflow: hidden; }
.qty__step button { width: 26px; height: 100%; font-size: 18px; font-weight: 700; line-height: 1; display: grid; place-items: center; transition: background .15s; }
.qty__step button:hover { background: rgba(0, 0, 0, .14); }
.qty__n { min-width: 16px; text-align: center; font-size: 14px; }
.qty:not([data-q="0"]) .qty__add { display: none; }
.qty:not([data-q="0"]) .qty__step { display: inline-flex; animation: pop .28s var(--ease); }
.qty.is-busy { opacity: .6; pointer-events: none; }
.qty__oos { display: inline-flex; align-items: center; height: 34px; padding: 0 10px; border-radius: 9px; background: #fff; border: 1.5px solid var(--line); color: var(--muted); font-size: 12px; font-weight: 700; }
.qty--lg { display: flex; }
.qty--lg .qty__add, .qty--lg .qty__step { width: 100%; height: 52px; font-size: 16.5px; border-radius: 12px; }
.qty--lg .qty__add { background: var(--accent); color: #fff; border: 0; box-shadow: 0 8px 18px rgba(244, 81, 30, .3); letter-spacing: 0; }
.qty--lg .qty__add:hover { background: var(--accent-dark); }
.qty--lg .qty__step button { width: 64px; font-size: 24px; }
.qty--lg .qty__n { font-size: 18px; }
.qty--sm .qty__step, .qty--sm .qty__add { height: 30px; min-width: 62px; box-shadow: none; }
.qty--sm .qty__step { background: #fff; color: var(--accent); border: 1.5px solid var(--accent); }
.qty--sm .qty__step button:hover { background: var(--accent-soft); }

/* ---------- Product grid ---------- */
.grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 22px 14px; }
.grid--5 { grid-template-columns: repeat(5, 1fr); }

/* ---------- Listing page ---------- */
.crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 18px 0 14px; font-size: 13.5px; color: var(--muted); }
.crumbs a:hover { color: var(--brand); }
.crumbs .i { width: 13px; height: 13px; }
.crumbs b { color: var(--ink); font-weight: 600; }
.listing { display: grid; grid-template-columns: 212px 1fr; gap: 0; border-top: 1px solid var(--line); }
.side { border-right: 1px solid var(--line); padding: 8px 0 30px; position: sticky; top: calc(var(--hdr-h) + 48px); align-self: start; max-height: calc(100vh - var(--hdr-h) - 48px); overflow-y: auto; scrollbar-width: thin; }
.side__title { padding: 12px 16px 8px; font-size: 12px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.side__item { display: flex; align-items: center; gap: 12px; padding: 10px 16px; font-weight: 600; font-size: 14.5px; color: var(--ink-2); border-left: 3px solid transparent; transition: background .2s, color .2s, border-color .2s; }
.side__item img, .side__ico { width: 42px; height: 42px; border-radius: 10px; background: var(--surface); object-fit: cover; flex: none; display: grid; place-items: center; color: var(--brand); transition: transform .25s var(--ease); }
.side__item:hover { background: var(--surface); }
.side__item:hover img { transform: scale(1.1); }
.side__item.is-active { background: var(--brand-soft); color: var(--brand-dark); border-left-color: var(--brand); }
.side__sub { padding-left: 28px; font-size: 14px; font-weight: 500; }
.listing__main { padding: 18px 0 40px 22px; min-width: 0; }
.listing__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.listing__head h1 { font-size: 22px; font-weight: 800; letter-spacing: -.3px; }
.listing__head small { color: var(--muted); font-weight: 500; font-size: 14px; margin-left: 6px; }
.select { height: 40px; padding: 0 34px 0 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%233b4350' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center; appearance: none; font-weight: 600; font-size: 14px; cursor: pointer; }
.empty { text-align: center; padding: 70px 20px; color: var(--muted); }
.empty .i { width: 54px; height: 54px; color: var(--line); margin: 0 auto 14px; }
.empty h3 { color: var(--ink); font-size: 19px; margin-bottom: 6px; }
.empty .btn { margin-top: 18px; }
.pager { display: flex; justify-content: center; gap: 6px; margin-top: 34px; flex-wrap: wrap; }
.pager a, .pager span { min-width: 40px; height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); display: grid; place-items: center; font-weight: 600; font-size: 14px; transition: border-color .2s, background .2s; }
.pager a:hover { border-color: var(--brand); color: var(--brand); }
.pager .is-current { background: var(--brand); color: #fff; border-color: var(--brand); }
.pager .is-off { color: var(--line); }

/* ---------- Product page ---------- */
.pdp { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 26px; align-items: start; padding-bottom: 20px; }
.pdp__left { position: sticky; top: calc(var(--hdr-h) + 64px); display: grid; grid-template-columns: 62px 1fr; gap: 14px; }
.thumbs { display: flex; flex-direction: column; gap: 10px; }
.thumbs button { width: 62px; height: 62px; border-radius: 12px; overflow: hidden; border: 2px solid var(--line); background: var(--surface); transition: border-color .2s, transform .2s var(--ease); }
.thumbs button:hover { transform: translateY(-2px); }
.thumbs button.is-active { border-color: var(--brand); }
.thumbs img { width: 100%; height: 100%; object-fit: cover; }
.gallery { border-radius: 18px; overflow: hidden; border: 1px solid var(--line); background: var(--surface); aspect-ratio: 1; }
.gallery img { width: 100%; height: 100%; object-fit: cover; animation: fadein .35s; }
.pdp__cta { grid-column: 2; margin-top: 4px; display: flex; gap: 10px; }
.pdp__left--single { grid-template-columns: 1fr; }
.pdp__left--single .thumbs { display: none; }
.pdp__left--single .pdp__cta { grid-column: 1; }
.pdp__cta .qty { flex: 1; }
.iconbtn { width: 52px; height: 52px; border-radius: 12px; border: 1px solid var(--line); display: grid; place-items: center; flex: none; transition: border-color .2s, color .2s, transform .2s var(--ease); background: #fff; }
.iconbtn:hover { border-color: var(--accent); color: var(--accent); transform: scale(1.05); }
.panel { border: 1px solid var(--line); border-radius: 16px; padding: 20px; background: #fff; }
.panel + .panel { margin-top: 16px; }
.panel h2, .panel h3 { font-size: 17px; font-weight: 800; margin-bottom: 14px; }
.pdp__brand { display: inline-flex; align-items: center; gap: 3px; color: var(--muted); font-weight: 600; font-size: 14px; }
.pdp__brand:hover { color: var(--brand); }
.pdp__title { font-size: 21px; font-weight: 800; line-height: 1.3; letter-spacing: -.3px; margin: 4px 0 6px; }
.pdp__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--muted); font-size: 13.5px; margin-bottom: 16px; }
.rating { display: inline-flex; align-items: center; gap: 3px; color: var(--price); font-weight: 700; }
.rating .i { width: 14px; height: 14px; fill: currentColor; stroke: none; }
.pdp__tax { margin-top: 10px; font-size: 13px; color: var(--muted); }
.pdp__tax b { color: var(--price); }
.feats { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.feat { width: 96px; padding: 12px 8px; border-radius: 12px; background: var(--surface); text-align: center; font-size: 11.5px; font-weight: 700; line-height: 1.3; }
.feat .i { display: block; width: 28px; height: 28px; margin: 0 auto 7px; color: var(--brand); }
.kv { display: grid; grid-template-columns: 150px 1fr; gap: 10px 16px; font-size: 14px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; font-weight: 500; }
.prose { font-size: 14.5px; color: var(--ink-2); line-height: 1.7; }
.prose p { margin: 0 0 10px; }
.prose ul { list-style: disc; padding-left: 20px; }
.stock { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13px; padding: 4px 10px; border-radius: 20px; background: var(--brand-soft); color: var(--brand-dark); }
.stock--out { background: #fdecea; color: var(--danger); }
.review { padding: 14px 0; border-top: 1px solid var(--line); }
.review:first-of-type { border-top: 0; padding-top: 0; }
.review__head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.review__av { width: 36px; height: 36px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-dark); display: grid; place-items: center; font-weight: 800; object-fit: cover; }
.review__head small { color: var(--muted); display: block; font-size: 12px; }
.stars { display: inline-flex; gap: 1px; color: #f5a524; }
.stars .i { width: 15px; height: 15px; fill: currentColor; stroke: none; }
.stars .is-off { color: var(--line); }
.starpick { display: inline-flex; flex-direction: row-reverse; gap: 4px; }
.starpick input { position: absolute; opacity: 0; pointer-events: none; }
.starpick label { cursor: pointer; color: var(--line); transition: color .15s, transform .15s var(--ease); }
.starpick label .i { width: 28px; height: 28px; fill: currentColor; stroke: none; }
.starpick label:hover, .starpick label:hover ~ label, .starpick input:checked ~ label { color: #f5a524; }
.starpick label:hover { transform: scale(1.15); }

/* ---------- Forms ---------- */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field label { font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.field label span { color: var(--danger); }
.input { width: 100%; height: 46px; padding: 0 14px; border: 1px solid var(--line); border-radius: 11px; background: #fff; transition: border-color .2s, box-shadow .2s; outline: 0; }
textarea.input { height: auto; padding: 12px 14px; min-height: 110px; resize: vertical; }
.input:focus { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
.field .err, .err { color: var(--danger); font-size: 12.5px; font-weight: 600; }
/* Password field with its show/hide button (added by password.js) */
.pw { position: relative; display: block; }
.pw input { padding-right: 48px; }
.pw input::-ms-reveal, .pw input::-ms-clear { display: none; }
.pw__btn { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; color: var(--muted); transition: color .2s, background .2s; }
.pw__btn:hover { color: var(--ink); background: var(--surface); }
.pw__btn[aria-pressed="true"] { color: var(--brand); }
.pw__btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.check input { width: 17px; height: 17px; accent-color: var(--brand); }

/* ---------- Auth ---------- */
.auth { display: grid; grid-template-columns: 1fr 1fr; max-width: 940px; margin: 34px auto 50px; border: 1px solid var(--line); border-radius: 22px; overflow: hidden; box-shadow: var(--shadow-1); }
.auth__art { background: linear-gradient(150deg, var(--brand) 0%, #0e9a86 60%, #18b79f 100%); color: #fff; padding: 40px 36px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.auth__art::before, .auth__art::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .09); animation: float 9s ease-in-out infinite; }
.auth__art::before { width: 260px; height: 260px; right: -80px; top: -70px; }
.auth__art::after { width: 180px; height: 180px; left: -60px; bottom: -50px; animation-delay: -4s; }
.auth__art h2 { font-size: 30px; font-weight: 800; line-height: 1.15; letter-spacing: -.6px; position: relative; }
.auth__art p { margin-top: 12px; opacity: .9; position: relative; }
.auth__art ul { position: relative; display: grid; gap: 12px; margin-top: 28px; }
.auth__art li { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.auth__form { padding: 38px 36px; }
.auth__form h1 { font-size: 25px; font-weight: 800; letter-spacing: -.4px; }
.auth__form > p { color: var(--muted); margin: 6px 0 22px; }
.auth__alt { margin-top: 18px; text-align: center; color: var(--muted); font-size: 14px; }
.auth__row { display: flex; align-items: center; justify-content: space-between; margin: 2px 0 18px; font-size: 14px; }

/* ---------- Cart drawer ---------- */
.backdrop { position: fixed; inset: 0; background: rgba(16, 20, 24, .5); z-index: 90; opacity: 0; visibility: hidden; transition: opacity .28s, visibility .28s; backdrop-filter: blur(2px); }
.backdrop.is-open { opacity: 1; visibility: visible; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 424px; max-width: 100vw; background: var(--surface); z-index: 100; display: flex; flex-direction: column; transform: translateX(104%); transition: transform .34s var(--ease); box-shadow: -12px 0 40px rgba(16, 20, 24, .18); }
.drawer.is-open { transform: none; }
.drawer__head { display: flex; align-items: center; gap: 10px; height: 58px; padding: 0 14px; background: #fff; border-bottom: 1px solid var(--line); font-weight: 800; font-size: 17px; flex: none; }
.drawer__close { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; transition: background .2s, transform .25s var(--ease); }
.drawer__close:hover { background: var(--surface); transform: translateX(-3px); }
.drawer__body { flex: 1; overflow-y: auto; }
.cart { display: flex; flex-direction: column; min-height: 100%; }
.cart__scroll { flex: 1; padding: 14px; display: flex; flex-direction: column; gap: 14px; }
.cart__card { background: #fff; border-radius: 14px; border: 1px solid var(--line); overflow: hidden; }
.cart__eta { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.cart__eta .i { color: var(--brand); width: 30px; height: 30px; }
.cart__eta b { display: block; font-size: 15.5px; }
.cart__eta small { color: var(--muted); }
.cline { display: flex; align-items: center; gap: 12px; padding: 12px 16px; animation: fadein .3s; }
.cline + .cline { border-top: 1px dashed var(--line); }
.cline__img { width: 52px; height: 52px; border-radius: 10px; background: var(--surface); object-fit: cover; flex: none; border: 1px solid var(--line); }
.cline__info { flex: 1; min-width: 0; }
.cline__info a { font-weight: 600; font-size: 14px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cline__info small { color: var(--muted); font-size: 12.5px; }
.cline__right { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.cline__price { font-size: 13px; white-space: nowrap; }
.cline__price s { color: var(--muted); margin-right: 4px; }
.cline__price b { color: var(--price); font-size: 14px; }
.cart__more { padding: 12px 16px; border-top: 1px solid var(--line); text-align: center; font-weight: 600; font-size: 14px; }
.bill h4 { padding: 14px 16px; font-size: 16px; font-weight: 800; border-bottom: 1px solid var(--line); }
.bill__row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 16px; font-size: 14.5px; }
.bill__row s { color: var(--muted); margin-right: 6px; font-size: 13px; }
.bill__row--save { color: var(--price); font-weight: 600; }
.bill__row--total { border-top: 1px solid var(--line); margin-top: 4px; padding: 13px 16px; font-weight: 800; font-size: 16.5px; }
.note { margin: 6px 16px 14px; padding: 10px 12px; border-radius: 10px; background: var(--warn-bg); color: var(--warn-ink); font-size: 12.5px; line-height: 1.45; }
.note--ok { background: var(--brand-soft); color: var(--brand-dark); }
.cart__foot { position: sticky; bottom: 0; padding: 14px; background: #fff; border-top: 1px solid var(--line); flex: none; }
.cart__empty { margin: 14px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 34px 20px; text-align: center; }
.cart__empty .i { width: 64px; height: 64px; color: var(--line); margin: 0 auto 12px; }
.cart__empty b { display: block; margin-bottom: 16px; font-size: 16px; }

/* ---------- Toasts ---------- */
.toasts { position: fixed; top: calc(var(--hdr-h) + 12px); right: max(20px, calc((100vw - var(--wrap)) / 2 + 20px)); z-index: 120; display: flex; flex-direction: column; gap: 10px; width: 320px; max-width: calc(100vw - 40px); pointer-events: none; }
.toast { pointer-events: auto; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-2); padding: 12px 14px; animation: drop .3s var(--ease); transition: opacity .3s, transform .3s; }
.toast.is-leaving { opacity: 0; transform: translateY(-8px); }
.toast__head { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13.5px; color: var(--price); }
.toast--error .toast__head { color: var(--danger); }
.toast__head button { margin-left: auto; color: var(--muted); display: grid; }
.toast__body { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.toast__body img { width: 44px; height: 44px; border-radius: 9px; background: var(--surface); object-fit: cover; }
.toast__body b { font-size: 13.5px; line-height: 1.3; display: block; }
.toast__body small { color: var(--muted); }
.toast .btn { margin-top: 12px; }

/* ---------- Modal ---------- */
.modal { position: fixed; inset: 0; z-index: 110; display: grid; place-items: center; padding: 20px; opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; }
.modal.is-open { opacity: 1; visibility: visible; }
.modal__box { position: relative; width: 420px; max-width: 100%; background: #fff; border-radius: 20px; padding: 26px; box-shadow: var(--shadow-2); transform: translateY(14px) scale(.97); transition: transform .3s var(--ease); }
.modal.is-open .modal__box { transform: none; }
.modal__box h3 { font-size: 20px; font-weight: 800; }
.modal__box p { color: var(--muted); margin: 6px 0 18px; font-size: 14px; }
.modal__x { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; }
.modal__x:hover { background: var(--surface); }

/* ---------- Checkout / cart page ---------- */
.page-title { font-size: 26px; font-weight: 800; letter-spacing: -.5px; padding: 6px 0 18px; }
.cols { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 24px; align-items: start; padding-bottom: 50px; }
.cols__side { position: sticky; top: calc(var(--hdr-h) + 64px); }
.cols .cart__card + .cart__card, .cols .panel + .cart__card, .cols .cart__card + .panel { margin-top: 16px; }
.pay { display: grid; gap: 10px; }
.pay label { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border: 1.5px solid var(--line); border-radius: 12px; cursor: pointer; transition: border-color .2s, background .2s; }
.pay label:hover { border-color: var(--brand); }
.pay input { accent-color: var(--brand); width: 18px; height: 18px; }
.pay label:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.pay b { display: block; font-size: 14.5px; }
.pay small { color: var(--muted); font-size: 12.5px; }
.coupon { display: flex; gap: 8px; padding: 14px 16px; }
.coupon .input { height: 42px; text-transform: uppercase; }
.table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.table th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); padding: 10px 12px; border-bottom: 1px solid var(--line); }
.table td { padding: 14px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.pill { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 700; background: var(--surface); text-transform: capitalize; }
.pill--new { background: #eef2ff; color: #3538cd; }
.pill--process { background: var(--warn-bg); color: var(--warn-ink); }
.pill--delivered { background: var(--brand-soft); color: var(--brand-dark); }
.pill--cancel { background: #fdecea; color: var(--danger); }

/* ---------- Content pages ---------- */
.narrow { max-width: 860px; margin: 0 auto; }
.lead { font-size: 17px; color: var(--ink-2); line-height: 1.7; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.post { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: #fff; transition: transform .25s var(--ease), box-shadow .25s; display: flex; flex-direction: column; }
.post:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.post__img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; background: var(--surface); }
.post__body { padding: 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.post__body small { color: var(--muted); font-size: 12.5px; }
.post__body h3 { font-size: 16.5px; line-height: 1.35; }
.post__body p { color: var(--ink-2); font-size: 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 6px 12px; border-radius: 20px; border: 1px solid var(--line); font-size: 13.5px; font-weight: 600; transition: border-color .2s, color .2s, background .2s; }
.chip:hover, .chip.is-active { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }

/* ---------- Footer ---------- */
.ftr { margin-top: 50px; background: var(--surface); border-top: 1px solid var(--line); }
.ftr__cats { padding: 30px 0 8px; }
.ftr__cats h4 { font-size: 17px; font-weight: 800; margin-bottom: 14px; }
.ftr__catgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px 20px; font-size: 14px; }
.ftr__catgrid a { color: var(--ink-2); font-weight: 600; }
.ftr__catgrid a:hover { color: var(--brand); }
.ftr__main { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 30px; padding: 30px 0; border-top: 1px solid var(--line); margin-top: 22px; }
.ftr__main h5 { font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); margin: 0 0 12px; }
.ftr__main li { margin-bottom: 9px; font-weight: 600; font-size: 14.5px; }
.ftr__main li a:hover { color: var(--brand); }
.ftr__about p { color: var(--muted); font-size: 14px; margin: 12px 0; max-width: 320px; }
.ftr__contact li { display: flex; gap: 9px; align-items: flex-start; font-weight: 500; color: var(--ink-2); }
.ftr__contact .i { width: 18px; height: 18px; color: var(--brand); margin-top: 2px; }
.ftr__bottom { border-top: 1px solid var(--line); padding: 16px 0; display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; color: var(--muted); font-size: 13px; }

/* ---------- Mobile cart bar ---------- */
.cartbar { display: none; }

/* ---------- Skeleton + reveal ---------- */
.sk { background: linear-gradient(100deg, #eef0f3 30%, #f8f9fa 50%, #eef0f3 70%); background-size: 200% 100%; animation: shimmer 1.3s linear infinite; }
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }

@keyframes shimmer { to { background-position: -200% 0; } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes pop { 0% { transform: scale(.82); } 60% { transform: scale(1.07); } 100% { transform: scale(1); } }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.45); } 100% { transform: scale(1); } }
@keyframes drop { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .tiles { grid-template-columns: repeat(7, 1fr); }
  .rail__track { grid-auto-columns: calc((100% - 5 * 12px) / 6); }
  .grid { grid-template-columns: repeat(4, 1fr); }
  .ftr__catgrid { grid-template-columns: repeat(4, 1fr); }
  .cols { grid-template-columns: minmax(0, 1fr) 360px; }
}
@media (max-width: 860px) {
  :root { --hdr-h: 64px; }
  .hdr__row { flex-wrap: wrap; height: auto; padding-top: 10px; padding-bottom: 10px; gap: 10px 12px; }
  .logo { font-size: 26px; }
  .hdr__actions { order: 2; margin-left: auto; }
  .loc { order: 3; flex-basis: 100%; flex-direction: row; align-items: center; gap: 8px; padding: 0; }
  .loc__sub::before { content: "\00b7"; margin-right: 5px; }
  .hact span { display: none; }
  .hact { min-width: 44px; }
  .search { order: 4; flex-basis: 100%; }
  .tiles { grid-template-columns: repeat(5, 1fr); }
  .rail__track { grid-auto-columns: calc((100% - 3 * 12px) / 4); }
  .rail__btn { display: none; }
  .hero__track { grid-auto-columns: 86%; }
  .perks { grid-template-columns: repeat(2, 1fr); }
  .listing { grid-template-columns: 86px 1fr; }
  .side__item { flex-direction: column; gap: 5px; padding: 10px 4px; text-align: center; font-size: 11.5px; line-height: 1.25; }
  .side__title { display: none; }
  .side__sub { padding-left: 4px; }
  .listing__main { padding-left: 12px; }
  .grid { grid-template-columns: repeat(3, 1fr); gap: 20px 10px; }
  .pdp { grid-template-columns: 1fr; }
  .pdp__left { position: static; }
  .cols { grid-template-columns: 1fr; }
  .cols__side { position: static; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .auth { grid-template-columns: 1fr; margin: 20px auto 40px; }
  .auth__art { display: none; }
  .ftr__main { grid-template-columns: 1fr 1fr; }
  .ftr__catgrid { grid-template-columns: repeat(3, 1fr); }
  .toasts { top: auto; bottom: 84px; right: 20px; }
  .cartbar { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-radius: 14px; background: var(--accent); color: #fff; font-weight: 700; box-shadow: 0 10px 26px rgba(244, 81, 30, .4); animation: drop .3s var(--ease); }
  .cartbar[data-n="0"] { display: none; }
  .cartbar small { display: block; font-weight: 500; opacity: .9; font-size: 12px; }
  body:has(.cartbar:not([data-n="0"])) { padding-bottom: 76px; }
}
@media (max-width: 560px) {
  .wrap { padding: 0 14px; }
  .tiles { grid-template-columns: repeat(4, 1fr); gap: 12px 8px; }
  .tile { font-size: 12px; }
  .rail__track { grid-auto-columns: calc((100% - 1.4 * 12px) / 2.4); }
  .grid { grid-template-columns: repeat(2, 1fr); }
  .banner { min-height: 210px; padding: 22px; }
  .banner__body { max-width: 78%; }
  .section__title { font-size: 19px; }
  .form-row { grid-template-columns: 1fr; }
  .pdp__left { grid-template-columns: 1fr; }
  .thumbs { flex-direction: row; order: 2; overflow-x: auto; }
  .pdp__cta { grid-column: 1; }
  .kv { grid-template-columns: 110px 1fr; }
  .cards { grid-template-columns: 1fr; }
  .ftr__main { grid-template-columns: 1fr; }
  .ftr__catgrid { grid-template-columns: repeat(2, 1fr); }
  .auth__form { padding: 26px 20px; }
  .perk small { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* ---------- Order tracking timeline ---------- */
.track { display: flex; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.track li { flex: 1; position: relative; text-align: center; font-size: 13.5px; color: var(--muted); }
.track li::before { content: ""; position: absolute; top: 15px; left: -50%; width: 100%; height: 3px; background: var(--line); }
.track li:first-child::before { display: none; }
.track__dot { position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%; background: #fff; border: 3px solid var(--line); display: grid; place-items: center; margin: 0 auto 8px; color: transparent; transition: background .3s, border-color .3s; }
.track li.is-done { color: var(--ink); }
.track li.is-done::before { background: var(--brand); }
.track li.is-done .track__dot { background: var(--brand); border-color: var(--brand); color: #fff; animation: pop .4s var(--ease); }
.track b { display: block; font-weight: 600; }

/* ---------- Comments ---------- */
.comment { display: flex; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); }
.comment__body { flex: 1; min-width: 0; }
.comment__body small { color: var(--muted); font-size: 12px; margin-left: 6px; }
.comment__replies { margin-left: 34px; }
.comment button { color: var(--accent); font-weight: 600; font-size: 13px; margin-top: 4px; }
.pay label.is-off { opacity: .55; cursor: not-allowed; background: var(--surface); }
.pay label.is-off:hover { border-color: var(--line); }

/* ---------- Customer account ---------- */
.account { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 24px; align-items: start; padding: 22px 0 50px; }
.acct-nav { position: sticky; top: calc(var(--hdr-h) + 64px); border: 1px solid var(--line); border-radius: 16px; background: #fff; overflow: hidden; }
.acct-nav__me { display: flex; align-items: center; gap: 12px; padding: 16px; border-bottom: 1px solid var(--line); background: var(--brand-soft); }
.acct-nav__me .review__av { width: 44px; height: 44px; background: #fff; }
.acct-nav__me b { display: block; line-height: 1.25; }
.acct-nav__me small { color: var(--muted); font-size: 12.5px; word-break: break-all; }
.acct-nav a, .acct-nav button { display: flex; align-items: center; gap: 11px; width: 100%; padding: 12px 16px; font-weight: 600; font-size: 14.5px; color: var(--ink-2); border-left: 3px solid transparent; transition: background .2s, color .2s, border-color .2s; text-align: left; }
.acct-nav a:hover, .acct-nav button:hover { background: var(--surface); color: var(--ink); }
.acct-nav a.is-active { background: var(--brand-soft); color: var(--brand-dark); border-left-color: var(--brand); }
.acct-nav .i { width: 19px; height: 19px; }
.acct-nav hr { border: 0; border-top: 1px solid var(--line); margin: 6px 0; }
.account__main > h1 { font-size: 24px; font-weight: 800; letter-spacing: -.4px; margin-bottom: 16px; }
.account__main > h1 small { display: block; font-size: 14px; font-weight: 500; color: var(--muted); letter-spacing: 0; margin-top: 2px; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px; }
.stat { border: 1px solid var(--line); border-radius: 14px; padding: 16px; background: #fff; display: flex; align-items: center; gap: 12px; transition: transform .2s var(--ease), box-shadow .2s; }
a.stat:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.stat__ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); flex: none; }
.stat b { display: block; font-size: 22px; font-weight: 800; line-height: 1.1; }
.stat small { color: var(--muted); font-size: 13px; }
.orow { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.orow:first-of-type { border-top: 0; }
.orow__ico { width: 42px; height: 42px; border-radius: 12px; background: var(--surface); display: grid; place-items: center; color: var(--brand); flex: none; }
.orow__main { flex: 1; min-width: 180px; }
.orow__main b { display: block; }
.orow__main small { color: var(--muted); font-size: 13px; }
.orow__amt { font-weight: 800; white-space: nowrap; }
.panel--flush { padding: 0; overflow: hidden; }
.panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.panel__head h2 { margin: 0; }
.twocol { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.avatar-pick { display: flex; align-items: center; gap: 14px; }
.avatar-pick img, .avatar-pick .review__av { width: 64px; height: 64px; font-size: 22px; border-radius: 50%; object-fit: cover; flex: none; }
.avatar-pick input[type=file] { flex: 1; min-width: 0; max-width: 100%; font-size: 13.5px; }
@media (max-width: 860px) {
  /* minmax(0, ...) so wide tables scroll inside their panel instead of stretching the page */
  .account { grid-template-columns: minmax(0, 1fr); gap: 14px; padding-top: 14px; }
  .acct-nav { position: static; display: flex; overflow-x: auto; scrollbar-width: none; border-radius: 12px; }
  .acct-nav::-webkit-scrollbar { display: none; }
  .acct-nav__me, .acct-nav hr { display: none; }
  .acct-nav a, .acct-nav button { width: auto; white-space: nowrap; border-left: 0; border-bottom: 3px solid transparent; padding: 11px 14px; }
  .acct-nav a.is-active { border-bottom-color: var(--brand); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .twocol { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .account__main > h1 { font-size: 21px; }
  .account__main .panel:not(.panel--flush) { padding: 16px; }
  .panel__head { padding: 14px 16px; flex-wrap: wrap; gap: 4px 12px; }
  .stats { gap: 10px; }
  .stat { padding: 12px; gap: 10px; }
  .stat__ico { width: 36px; height: 36px; border-radius: 10px; }
  .stat b { font-size: 17px; overflow-wrap: anywhere; }
  .stat small { font-size: 12px; display: block; line-height: 1.3; }
  .orow { padding: 12px 14px; gap: 10px; }
}

/* ---------- Saved addresses ---------- */
.addr-add { display: flex; align-items: center; gap: 12px; padding: 16px 18px; margin-bottom: 18px; border: 1px solid var(--line); border-radius: 16px; background: #fff; color: var(--brand); transition: box-shadow .2s, border-color .2s; }
.addr-add:hover { border-color: var(--brand); box-shadow: var(--shadow-1); }
.addr-add b { flex: 1; font-size: 16px; }
.addr-list { display: grid; gap: 12px; }
.addr { position: relative; display: flex; gap: 14px; align-items: flex-start; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.addr__ico { width: 52px; height: 52px; flex: none; border-radius: 13px; border: 1px solid var(--line); display: grid; place-items: center; color: var(--brand); }
.addr__ico .i { width: 24px; height: 24px; }
.addr__body { flex: 1; min-width: 0; padding-right: 40px; }
.addr__body b { display: flex; align-items: center; gap: 8px; font-size: 16px; margin-bottom: 4px; }
.addr__body p { color: var(--ink-2); font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.addr__body small { display: block; color: var(--muted); font-size: 13px; margin-top: 4px; }
.addr__default { font-size: 11px; font-weight: 700; color: var(--brand-dark); background: var(--brand-soft); border-radius: 20px; padding: 2px 8px; }
.addr__menu { position: absolute; top: 12px; right: 12px; }
.addr__menu summary { list-style: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; cursor: pointer; color: var(--ink-2); }
.addr__menu summary::-webkit-details-marker { display: none; }
.addr__menu[open] summary, .addr__menu summary:hover { border-color: var(--brand); color: var(--brand); }
.addr__drop { position: absolute; right: 0; top: 40px; z-index: 5; min-width: 170px; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: var(--shadow-2); }
.addr__drop a, .addr__drop button { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 10px; border-radius: 8px; font-size: 14px; font-weight: 600; color: var(--ink-2); text-align: left; }
.addr__drop a:hover, .addr__drop button:hover { background: var(--surface); color: var(--ink); }
.addr__drop .is-danger { color: var(--danger); }
.addr__drop .i { width: 17px; height: 17px; }
.addr-labels { display: flex; flex-wrap: wrap; gap: 8px; }
.addr-label input { position: absolute; opacity: 0; pointer-events: none; }
.addr-labels .addr-label span { display: inline-flex; color: var(--ink-2); align-items: center; gap: 7px; padding: 8px 14px; border: 1.5px solid var(--line); border-radius: 22px; font-weight: 600; font-size: 14px; cursor: pointer; transition: border-color .2s, background .2s, color .2s; }
.addr-labels .addr-label span .i { width: 17px; height: 17px; }
.addr-labels .addr-label input:checked + span { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-dark); }
.addr-labels .addr-label input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.addr-other { display: none; }
form:has(.addr-label input[value="other"]:checked) .addr-other { display: flex; }
.addr-row3 { grid-template-columns: 1fr 1fr 1fr; }
/* Checkout: choose a saved address */
.addr-pick { display: grid; gap: 10px; margin-bottom: 16px; }
.addr-pick label { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 13px; cursor: pointer; transition: border-color .2s, background .2s; }
.addr-pick label:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.addr-pick input { margin-top: 4px; accent-color: var(--brand); flex: none; }
.addr-pick b { display: flex; align-items: center; gap: 6px; font-size: 14.5px; }
.addr-pick b .i { width: 16px; height: 16px; color: var(--brand); }
.addr-pick small { display: block; color: var(--ink-2); font-size: 13px; line-height: 1.4; margin-top: 2px; overflow-wrap: anywhere; }
.addr-pick__links { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13.5px; font-weight: 600; }
.addr-save { margin-top: 4px; padding: 12px 14px; border-radius: 12px; background: var(--surface); }
.addr-save .addr-labels { margin-top: 10px; }
form .addr-save:not(:has(input[name="save_address"]:checked)) .addr-labels, form .addr-save:not(:has(input[name="save_address"]:checked)) .addr-other { display: none; }
@media (max-width: 560px) {
  .addr-row3 { grid-template-columns: 1fr; }
  .addr { padding: 14px; gap: 12px; }
  .addr__ico { width: 44px; height: 44px; }
}

/* ---------- Wallet ---------- */
.acct-nav__amt { margin-left: auto; font-size: 12.5px; font-weight: 700; color: var(--brand-dark); background: var(--brand-soft); padding: 2px 8px; border-radius: 20px; }
.acct-nav a.is-active .acct-nav__amt { background: #fff; }
.wallet-strip { display: flex; align-items: center; gap: 14px; padding: 16px; margin-bottom: 14px; border-radius: 16px; background: linear-gradient(120deg, var(--brand-soft), #fff 70%); border: 1px solid var(--line); transition: box-shadow .2s; }
.wallet-strip:hover { box-shadow: var(--shadow-2); }
.wallet-strip > div { flex: 1; min-width: 0; }
.wallet-strip small { display: block; color: var(--muted); font-size: 13px; }
.wallet-strip b { font-size: 22px; font-weight: 800; line-height: 1.2; }
.wallet { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 16px; align-items: stretch; }
.wallet__card { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 22px; border-radius: 16px; color: #fff; background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%); }
.wallet__card::after { content: ""; position: absolute; right: -60px; bottom: -80px; width: 220px; height: 220px; border-radius: 50%; background: rgba(255, 255, 255, .08); }
.wallet__ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 255, 255, .16); margin-bottom: 10px; }
.wallet__card small { font-size: 13.5px; opacity: .85; }
.wallet__card b { font-size: 34px; font-weight: 800; letter-spacing: -.8px; line-height: 1.15; }
.wallet__card p { font-size: 13.5px; opacity: .85; margin-bottom: 14px; }
.wallet__cta { margin-top: auto; background: #fff; color: var(--brand-dark); position: relative; z-index: 1; }
.wallet__cta:hover { background: var(--brand-soft); }
.wallet__add form { display: flex; flex-direction: column; gap: 12px; }
.wallet__amt { position: relative; display: block; }
.wallet__amt span { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-weight: 700; color: var(--ink-2); font-size: 17px; }
.wallet__amt .input { padding-left: 32px; height: 52px; font-size: 18px; font-weight: 700; }
.wallet__quick .chip { background: #fff; }
.wallet__fine { color: var(--muted); font-size: 12.5px; text-align: center; }
.wallet__head { flex-wrap: wrap; }
.wtx .orow__ico.is-credit { background: var(--brand-soft); color: var(--price); }
.wtx .orow__ico.is-debit { background: var(--accent-soft); color: var(--accent); }
.wtx__amt { text-align: right; margin-left: auto; }
.wtx__amt b { display: block; font-weight: 800; white-space: nowrap; }
.wtx__amt b.is-credit { color: var(--price); }
.wtx__amt small { color: var(--muted); font-size: 12px; white-space: nowrap; }
.wallet__faq { display: grid; gap: 10px; font-size: 14px; color: var(--ink-2); }
.wallet__faq li { display: flex; gap: 10px; align-items: flex-start; }
.wallet__faq .i { color: var(--brand); margin-top: 2px; }
@media (max-width: 860px) {
  .wallet { grid-template-columns: 1fr; }
  .acct-nav__amt { margin-left: 6px; }
}
@media (max-width: 520px) {
  .wtx { flex-wrap: nowrap; align-items: flex-start; }
  .wtx .orow__main { min-width: 0; }
  .wallet-strip .btn { display: none; }
}

/* ---------- Member centre ---------- */
.mc-status { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 20px; font-size: 12px; font-weight: 700; background: var(--warn-bg); color: var(--warn-ink); }
.mc-status--active { background: var(--brand-soft); color: var(--brand-dark); }
.mc-status--blocked { background: #fdecea; color: var(--danger); }
.mc-code { font-weight: 800; letter-spacing: .4px; }
.mc-hero { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 18px; padding: 22px; margin-bottom: 16px; border-radius: 18px; color: #fff; background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%); }
.mc-hero::after { content: ""; position: absolute; right: -70px; top: -90px; width: 240px; height: 240px; border-radius: 50%; background: rgba(255, 255, 255, .07); pointer-events: none; }
.mc-hero small { font-size: 13px; opacity: .85; }
.mc-hero__id { display: block; font-size: 28px; font-weight: 800; letter-spacing: .5px; line-height: 1.15; }
.mc-hero__tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.mc-hero__tags span { background: rgba(255, 255, 255, .16); border-radius: 20px; padding: 3px 10px; font-size: 12.5px; font-weight: 700; }
.mc-hero__sponsor { margin-top: 12px; font-size: 13px; opacity: .9; }
.mc-links { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; position: relative; z-index: 1; }
.mc-link { background: rgba(255, 255, 255, .12); border-radius: 12px; padding: 10px 12px; }
.mc-link small { display: block; font-size: 12px; margin-bottom: 5px; }
.mc-link__row { display: flex; gap: 6px; }
.mc-link input { flex: 1; min-width: 0; height: 36px; border: 0; border-radius: 9px; padding: 0 10px; font-size: 13px; color: var(--ink); background: #fff; }
.mc-link button, .mc-link a { flex: none; height: 36px; padding: 0 12px; border-radius: 9px; background: #fff; color: var(--brand-dark); font-weight: 700; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }
.mc-link a { background: #25d366; color: #fff; }
.mc-alert { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; margin-bottom: 16px; border-radius: 16px; background: var(--accent-soft); border: 1px solid #ffd9cc; }
.mc-alert > .i { color: var(--accent); margin-top: 2px; }
.mc-alert > div { flex: 1; min-width: 0; }
.mc-alert b { display: block; font-size: 16px; }
.mc-alert p { color: var(--ink-2); font-size: 14px; margin: 2px 0 0; }
.mc-alert--ok { background: var(--brand-soft); border-color: #c6e8e0; }
.mc-alert--ok > .i { color: var(--brand); }
.mc-alert--bad { background: #fdecea; border-color: #f7c9c4; }
.mc-alert--bad > .i { color: var(--danger); }
.mc-kits { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 12px; margin-top: 14px; }
.mc-grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-bottom: 16px; }
.mc-grid2 > .panel { margin: 0; }
.mc-legs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mc-leg { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; min-height: 92px; transition: border-color .2s, box-shadow .2s; }
a.mc-leg:hover { border-color: var(--brand); box-shadow: var(--shadow-1); }
.mc-leg__letter { position: absolute; top: 10px; right: 10px; width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-dark); font-weight: 800; font-size: 12.5px; }
.mc-leg b { font-size: 14px; padding-right: 28px; line-height: 1.3; }
.mc-leg small { color: var(--muted); font-size: 12.5px; }
.mc-leg--empty { border-style: dashed; background: var(--surface); justify-content: center; color: var(--muted); font-size: 13px; }
.mc-leg--empty .mc-leg__letter { background: #fff; }
.mc-leg--empty span { color: var(--accent); font-weight: 700; }
.mc-target { margin-bottom: 14px; }
.mc-target:last-child { margin-bottom: 0; }
.mc-target__row { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; }
.mc-target__row span { color: var(--muted); }
.mc-target__row b { font-weight: 700; }
.mc-progress { height: 8px; border-radius: 8px; background: var(--surface); overflow: hidden; margin-top: 6px; }
.mc-progress span { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg, var(--brand), #18b79f); }
.mc-progress.is-done span { background: var(--price); }
.mc-scroll { overflow-x: auto; }
.mc-scroll .table { min-width: 560px; }
.table td small, .table td .sub { display: block; color: var(--muted); font-size: 12.5px; }
.table tbody tr:last-child td { border-bottom: 0; }
.mc-amt { font-weight: 800; white-space: nowrap; }
.mc-amt.is-credit { color: var(--price); }
.mc-amt.is-debit { color: var(--accent); }
.mc-num { text-align: right; white-space: nowrap; }
.mc-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.mc-filters .field { margin: 0; min-width: 120px; flex: 1 1 120px; }
.mc-filters .input { height: 40px; }
.mc-filters .btn { height: 40px; }
.mc-wallets { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.mc-wcard { display: flex; flex-direction: column; padding: 16px; border-radius: 16px; border: 1px solid var(--line); background: #fff; }
.mc-wcard small { color: var(--muted); font-size: 13px; font-weight: 600; }
.mc-wcard b { font-size: 22px; font-weight: 800; letter-spacing: -.4px; line-height: 1.3; }
.mc-wcard p { color: var(--muted); font-size: 12.5px; margin-top: 4px; line-height: 1.4; }
.mc-wcard--main { background: linear-gradient(135deg, var(--brand), var(--brand-dark)); color: #fff; border: 0; }
.mc-wcard--main small, .mc-wcard--main p { color: rgba(255, 255, 255, .85); }
.mc-wcard.is-neg b { color: var(--danger); }
.mc-tabs { display: flex; gap: 4px; padding: 4px; background: var(--surface); border-radius: 12px; margin-bottom: 14px; }
.mc-tabs button { flex: 1; padding: 9px 6px; border-radius: 9px; font-weight: 700; font-size: 14px; color: var(--muted); }
.mc-tabs button.is-on { background: #fff; color: var(--ink); box-shadow: 0 1px 4px rgba(16, 20, 24, .1); }
.mc-pane[hidden] { display: none; }
.mc-fees { display: grid; gap: 4px; font-size: 13.5px; background: var(--surface); border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; }
.mc-fees div { display: flex; justify-content: space-between; gap: 10px; }
.mc-fees .is-total { font-weight: 800; border-top: 1px solid var(--line); padding-top: 6px; margin-top: 2px; }
.mc-rank { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; }
.mc-rank i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; background: var(--muted); }
.mc-ladder tr.is-mine td { background: var(--brand-soft); }
.mc-ladder tr.is-done td:first-child .mc-rank::after { content: "✓"; color: var(--price); font-weight: 800; }
.mc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.mc-card { border: 1px solid var(--line); border-radius: 14px; padding: 16px; background: #fff; display: flex; flex-direction: column; gap: 6px; }
.mc-card h3 { font-size: 15.5px; font-weight: 800; margin: 0; }
.mc-card p { color: var(--ink-2); font-size: 13.5px; }
.mc-card small { color: var(--muted); font-size: 12.5px; }
.mc-card .mc-status { align-self: flex-start; }
.mc-join { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px; align-items: start; padding: 22px 0 50px; }
.mc-join__aside { position: sticky; top: calc(var(--hdr-h) + 64px); }
.mc-benefits { display: grid; gap: 14px; margin: 16px 0; }
.mc-benefits li { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--ink-2); }
.mc-benefits li b { display: block; color: var(--ink); }
.mc-benefits .stat__ico { width: 38px; height: 38px; border-radius: 10px; }
.mc-legpick { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.mc-legpick label { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 9px 0; border: 1.5px solid var(--line); border-radius: 11px; cursor: pointer; font-weight: 800; transition: border-color .2s, background .2s; }
.mc-legpick label small { font-size: 11px; font-weight: 600; color: var(--muted); }
.mc-legpick input { position: absolute; opacity: 0; pointer-events: none; }
.mc-legpick label:hover { border-color: var(--brand); }
.mc-legpick label:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-dark); }
.mc-legpick label.is-taken { opacity: .45; cursor: not-allowed; background: var(--surface); }
.mc-legpick label.is-taken small { color: var(--danger); }
.mc-legpick label.is-any { grid-column: span 2; }
.mc-lookup { min-height: 18px; font-size: 13px; font-weight: 600; color: var(--muted); }
.mc-lookup.is-ok { color: var(--price); }
.mc-lookup.is-bad { color: var(--danger); }
.mc-terms { max-height: 150px; overflow: auto; white-space: pre-line; font-size: 13px; color: var(--ink-2); background: var(--surface); border-radius: 10px; padding: 12px; margin-bottom: 10px; }
.mc-teaser { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 5px 10px; border-radius: 9px; background: var(--brand-soft); color: var(--brand-dark); font-size: 13px; font-weight: 600; }
.mc-teaser b { font-weight: 800; }
.mc-teaser a { color: var(--accent); font-weight: 700; }
.pcard__member { display: block; font-size: 11.5px; font-weight: 700; color: var(--brand); margin-top: 2px; }
.price__tier { display: inline-block; font-size: 11px; font-weight: 800; color: #fff; background: var(--brand); border-radius: 6px; padding: 1px 6px; margin-left: 4px; vertical-align: 2px; letter-spacing: .2px; }
.mc-popup .modal__box { width: 460px; padding: 0; overflow: hidden; }
.mc-popup__art { padding: 24px 26px 18px; color: #fff; background: linear-gradient(135deg, var(--brand) 0%, #0e9a86 100%); }
.mc-popup__art h3 { color: #fff; font-size: 21px; }
.mc-popup__art p { color: rgba(255, 255, 255, .88) !important; margin: 6px 0 0 !important; }
.mc-popup__body { padding: 18px 26px 24px; }
.mc-popup__body .mc-benefits { margin: 0 0 18px; }
.mc-popup .modal__x { color: #fff; }
.mc-popup .modal__x:hover { background: rgba(255, 255, 255, .15); }
@media (max-width: 960px) {
  .mc-hero, .mc-grid2, .mc-join { grid-template-columns: minmax(0, 1fr); }
  .mc-wallets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mc-join__aside { position: static; }
}
@media (max-width: 520px) {
  .mc-legs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mc-legpick { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mc-hero { padding: 18px; }
  .mc-hero__id { font-size: 24px; }
  .mc-link__row { flex-wrap: wrap; }
  .mc-link input { flex-basis: 100%; }
  .mc-link button, .mc-link a { flex: 1; justify-content: center; }
  .mc-alert { padding: 14px; gap: 10px; }
  .mc-kits { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .mc-wcard b { font-size: 19px; }
  .mc-tabs button { padding: 8px 4px; font-size: 13px; line-height: 1.25; }
}
/* Phones: member-centre tables become one card per row. app.js labels each cell with its column name and adds .is-cards. */
@media (max-width: 600px) {
  .mc-scroll .table.is-cards { min-width: 0; }
  .table.is-cards thead { display: none; }
  .table.is-cards, .table.is-cards tbody { display: block; }
  .table.is-cards tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 14px; padding: 14px 16px; border-top: 1px solid var(--line); }
  .table.is-cards tr:first-child { border-top: 0; }
  .table.is-cards td { display: block; min-width: 0; padding: 0; border: 0; text-align: left; white-space: normal; overflow-wrap: anywhere; }
  .table.is-cards td::before { content: attr(data-label); display: block; margin-bottom: 1px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
  .table.is-cards td:first-child, .table.is-cards td[data-label=""] { grid-column: 1 / -1; }
  .table.is-cards td:first-child { font-size: 15px; }
  .table.is-cards td:first-child::before, .table.is-cards td[data-label=""]::before { display: none; }
  .mc-ladder.is-cards tr.is-mine { background: var(--brand-soft); }
  .mc-ladder.is-cards tr.is-mine td { background: none; }
  /* Short number-only tables (.mc-fit) stay tables, just tighter */
  .mc-scroll .table.mc-fit { min-width: 0; font-size: 13.5px; }
  .mc-fit th, .mc-fit td { padding: 10px 6px; }
  .mc-fit th:first-child, .mc-fit td:first-child { padding-left: 16px; white-space: nowrap; }
  .mc-fit th:last-child, .mc-fit td:last-child { padding-right: 16px; }
  .mc-fit th { font-size: 10.5px; letter-spacing: .3px; white-space: normal; vertical-align: bottom; }
  .mc-fit td small { display: block !important; font-size: 11.5px; }
}
@media (max-width: 360px) {
  .mc-scroll .table.mc-fit { font-size: 12.5px; }
  .mc-fit th, .mc-fit td { padding: 9px 4px; }
  .mc-fit th:first-child, .mc-fit td:first-child { padding-left: 12px; }
  .mc-fit th:last-child, .mc-fit td:last-child { padding-right: 12px; }
  .mc-fit th { font-size: 9.5px; letter-spacing: 0; }
  .mc-fit td small { font-size: 10.5px; }
}

/* ---------- Cashback ---------- */
.cb-strip { padding: 4px 0; background: linear-gradient(120deg, #fff7ed, #fff 75%); border-color: #fbd7b0; }
.cb-strip__row { display: flex; gap: 12px; align-items: flex-start; padding: 10px 14px; }
.cb-strip__row + .cb-strip__row { border-top: 1px dashed #fbd7b0; }
.cb-strip__row b { display: block; font-size: 14px; line-height: 1.3; }
.cb-strip__row small { color: var(--ink-2); font-size: 12.5px; }
.cb-strip__ico { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--accent); color: #fff; flex: none; }
.cb-strip__ico--next { background: #fff; color: var(--accent); border: 1.5px dashed var(--accent); }
.cb-strip__bar { height: 6px; border-radius: 6px; background: #fde4c8; overflow: hidden; margin-top: 7px; }
.cb-strip__bar span { display: block; height: 100%; border-radius: 6px; background: var(--accent); }
.bill__row small { color: var(--muted); font-size: 12px; font-weight: 500; }
.pdp-offers { margin-top: 14px; border: 1px dashed #f5b26b; border-radius: 12px; background: #fffaf3; padding: 10px 14px; }
.pdp-offers h3 { font-size: 14px !important; margin: 0 0 6px !important; display: flex; align-items: center; gap: 6px; color: var(--accent-dark); }
.pdp-offers li { display: flex; gap: 8px; font-size: 13.5px; color: var(--ink-2); padding: 3px 0; }
.pdp-offers li b { color: var(--ink); }
.pdp-offers .i { color: var(--accent); flex: none; margin-top: 2px; }
.ocb { display: flex; gap: 10px; align-items: flex-start; margin: 0 16px 14px; padding: 10px 12px; border-radius: 10px; background: #fff7ed; font-size: 13px; color: var(--ink-2); }
.ocb b { color: var(--ink); }
.ocb .i { color: var(--accent); flex: none; margin-top: 1px; }
.ocb--done { background: var(--brand-soft); }
.ocb--done .i { color: var(--price); }
.ocb--off { background: var(--surface); }
.ocb--off .i { color: var(--muted); }
.sw-box { padding: 0; border-color: #c6e8e0; background: linear-gradient(120deg, var(--brand-soft), #fff 80%); }
.sw-box.is-off { opacity: .7; background: var(--surface); }
.sw-box__row { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; cursor: pointer; }
.sw-box__row input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--brand); flex: none; }
.sw-box__row b { display: block; font-size: 14.5px; }
.sw-box__row small { color: var(--ink-2); font-size: 12.5px; }
.wallet__card--shopping { background: linear-gradient(135deg, #f4511e 0%, #c2410c 100%); }