/* =====================================================================
   Mr. Mechanic Platinum Auto Parts — Universal Stylesheet
   Eduwest International Company Nigeria Limited, Nnewi, Anambra State.
   Shared design system for every page (home, products, about, admin).

   The token NAMES are inherited from the source build so every rule
   downstream keeps working; only the values are Mr. Mechanic's.
   Colour mapping, taken from the approved homepage:
     --brand  -> navy   #141b5e  (identity: nav, links, dark sections)
     gradients-> red    #e0231d  drives the primary call to action
     --solar  -> violet #5f3f9e  (badges, pills, highlights)
     --green  stays a true green, so "in stock" still reads as success
   ===================================================================== */

/* ----- 1. Design tokens -------------------------------------------- */
:root {
  /* Brand — navy-led (Mr. Mechanic banner) with red + violet accents */
  --brand:        #141b5e;   /* primary navy */
  --brand-dark:   #0c1140;
  --brand-darker: #080c2e;
  --brand-light:  #3a45a8;
  --green:        #128a4d;   /* semantic only — in-stock, success */
  --green-dark:   #0e6d3d;
  --green-light:  #2fb56e;
  --solar:        #5f3f9e;   /* accent — badges, stars, highlights (violet) */
  --solar-dark:   #4a2f80;
  --solar-light:  #f1ecfa;

  /* Action red — the colour that carries every primary button */
  --red:          #e0231d;
  --red-dark:     #b4160f;
  --red-light:    #f2564f;

  /* Neutrals */
  --ink:        #0c1140;   /* deep navy — dark sections / headings */
  --ink-2:      #141b5e;
  --ink-3:      #232c86;
  --text:       #141824;
  --muted:      #5b6577;
  --muted-2:    #8a92a3;
  --line:       #e0e4ea;
  --line-2:     #cdd4dd;
  --bg:         #ffffff;
  --bg-soft:    #f5f7fb;
  --bg-soft-2:  #eceff7;
  --white:      #ffffff;

  /* Effects */
  --radius:     14px;
  --radius-lg:  22px;
  --radius-sm:  10px;
  --radius-pill: 999px;
  --shadow-sm:  0 2px 8px rgba(20, 24, 36, .06);
  --shadow:     0 12px 30px rgba(20, 24, 36, .10);
  --shadow-lg:  0 26px 60px rgba(20, 24, 36, .18);
  --shadow-brand: 0 14px 34px rgba(224, 35, 29, .32);
  --shadow-green: 0 14px 30px rgba(20, 27, 94, .35);
  --shadow-solar: 0 14px 30px rgba(95, 63, 158, .35);

  /* .btn-primary reads --grad-brand, so the primary action is red. */
  --grad-brand: linear-gradient(135deg, #e8322c 0%, #b4160f 100%);
  --grad-green: linear-gradient(135deg, #232c86 0%, #141b5e 55%, #0c1140 100%);
  --grad-solar: linear-gradient(135deg, #7d5cbd 0%, #5f3f9e 55%, #4a2f80 100%);
  --grad-ink:   linear-gradient(160deg, #0c1140 0%, #141b5e 55%, #232c86 130%);

  --ease: cubic-bezier(.22, 1, .36, 1);
  --t-fast: .18s ease;
  --t: .3s var(--ease);

  --container: 1200px;
  --nav-h: 76px;
  --font: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* ----- 2. Reset / base --------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  line-height: 1.65;
  font-size: 16px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
ul { list-style: none; }
h1, h2, h3, h4 { line-height: 1.15; color: var(--ink); font-weight: 800; letter-spacing: -.02em; }
::selection { background: var(--brand); color: #fff; }

/* ----- 3. Layout helpers ------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 22px; }
.section { padding: 92px 0; position: relative; }
.section--tight { padding: 64px 0; }
.section--soft { background: var(--bg-soft); }
.section--ink { background: var(--grad-ink); color: #cdd9e8; }
.section--ink h1, .section--ink h2, .section--ink h3 { color: #fff; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--brand); margin-bottom: 16px;
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--solar); border-radius: 2px; }
.section--ink .eyebrow { color: var(--solar-light); }

.section-head { max-width: 680px; margin: 0 auto 56px; text-align: center; }
.section-head.left { margin-inline: 0; text-align: left; }
.section-title { font-size: clamp(1.8rem, 4vw, 2.7rem); }
.section-sub { margin-top: 16px; color: var(--muted); font-size: 1.06rem; }
.section--ink .section-sub { color: #aebfd2; }

.grid { display: grid; gap: 26px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* ----- 4. Buttons -------------------------------------------------- */
.btn {
  --b: var(--brand);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 26px; border-radius: var(--radius-pill);
  font-weight: 700; font-size: .98rem; letter-spacing: .01em;
  transition: transform var(--t-fast), box-shadow var(--t), background var(--t), color var(--t);
  white-space: nowrap; border: 1.5px solid transparent;
}
.btn svg { width: 19px; height: 19px; }
.btn:active { transform: translateY(1px) scale(.99); }

.btn-primary { background: var(--grad-brand); color: #fff; box-shadow: var(--shadow-brand); }
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 20px 40px rgba(47,128,201,.42); }

.btn-solar { background: var(--grad-green); color: #fff; box-shadow: var(--shadow-green); }
.btn-solar:hover { transform: translateY(-3px); box-shadow: 0 20px 40px rgba(31,162,76,.5); }
.btn-green { background: var(--grad-green); color: #fff; box-shadow: var(--shadow-green); }
.btn-green:hover { transform: translateY(-3px); box-shadow: 0 20px 40px rgba(31,162,76,.5); }
.btn-yellow { background: var(--grad-solar); color: #3a2e00; box-shadow: var(--shadow-solar); }
.btn-yellow:hover { transform: translateY(-3px); box-shadow: 0 20px 40px rgba(247,201,72,.55); }

.btn-whatsapp { background: #25d366; color: #053d1c; box-shadow: 0 14px 30px rgba(37,211,102,.35); }
.btn-whatsapp:hover { transform: translateY(-3px); box-shadow: 0 20px 40px rgba(37,211,102,.5); }

.btn-ghost { background: transparent; color: var(--brand); border-color: var(--line-2); }
.btn-ghost:hover { background: var(--brand); color: #fff; border-color: var(--brand); transform: translateY(-3px); }

.btn-light { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.28); backdrop-filter: blur(6px); }
.btn-light:hover { background: #fff; color: var(--ink); transform: translateY(-3px); }

.btn-lg { padding: 17px 34px; font-size: 1.05rem; }
.btn-sm { padding: 10px 18px; font-size: .88rem; }
.btn-block { width: 100%; }

/* ----- 5. Navbar --------------------------------------------------- */
.nav {
  position: fixed; inset: 0 0 auto 0; height: var(--nav-h); z-index: 1000;
  display: flex; align-items: center;
  transition: background var(--t), box-shadow var(--t), border-color var(--t);
  border-bottom: 1px solid transparent;
}
.nav.solid { background: rgba(255,255,255,.92); backdrop-filter: blur(14px); box-shadow: var(--shadow-sm); border-bottom-color: var(--line); }
.nav__inner { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 22px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand img { height: 42px; width: auto; border-radius: 10px; background: #fff; padding: 4px; box-shadow: 0 2px 10px rgba(12,22,38,.14); }
.brand__txt { font-weight: 800; font-size: 1.05rem; color: var(--ink); letter-spacing: -.01em; line-height: 1; }
.brand__txt span { color: var(--brand); }
.brand__txt small { display: block; font-size: .62rem; font-weight: 600; letter-spacing: .22em; color: var(--muted-2); text-transform: uppercase; margin-top: 3px; }
.nav.transparent .brand__txt { color: #fff; }
.nav.transparent .brand__txt small { color: rgba(255,255,255,.7); }

.nav__links { display: flex; align-items: center; gap: 6px; }
.nav__links a {
  padding: 9px 15px; border-radius: var(--radius-pill); font-weight: 600; font-size: .96rem;
  color: var(--text); transition: color var(--t-fast), background var(--t-fast); position: relative;
}
.nav.transparent .nav__links a { color: rgba(255,255,255,.86); }
.nav__links a:hover { color: var(--brand); background: var(--bg-soft); }
.nav.transparent .nav__links a:hover { color: #fff; background: rgba(255,255,255,.12); }
.nav__links a.active { color: var(--brand); }
.nav.transparent .nav__links a.active { color: var(--solar-light); }
.nav__cta { display: flex; align-items: center; gap: 12px; }
.nav__toggle { display: none; width: 44px; height: 44px; border-radius: 12px; align-items: center; justify-content: center; color: var(--ink); }
.nav.transparent .nav__toggle { color: #fff; }
.nav__toggle svg { width: 26px; height: 26px; }

/* mobile drawer */
.nav__backdrop { position: fixed; inset: 0; background: rgba(8,16,28,.5); opacity: 0; visibility: hidden; transition: var(--t); z-index: 999; }
.nav__backdrop.open { opacity: 1; visibility: visible; }
.drawer {
  position: fixed; top: 0; right: 0; height: 100dvh; width: min(86vw, 340px);
  background: #fff; z-index: 1001; transform: translateX(100%); transition: transform var(--t);
  display: flex; flex-direction: column; padding: 22px; box-shadow: var(--shadow-lg);
  /* Without this the menu simply runs off the bottom of the screen with
     no way to reach what is down there. */
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px));
}
.drawer.open { transform: translateX(0); }
.drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.drawer a { padding: 14px 16px; border-radius: 12px; font-weight: 600; font-size: 1.05rem; color: var(--ink); transition: var(--t-fast); }
.drawer a:hover, .drawer a.active { background: var(--bg-soft); color: var(--brand); }
.drawer .btn { margin-top: 14px; }

/* ----- 6. Hero ----------------------------------------------------- */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; color: #fff; overflow: hidden; padding-top: var(--nav-h); }
.hero__bg { position: absolute; inset: 0; z-index: -2; background-color: var(--ink); background-size: cover; background-position: center; transform: scale(1.06); }
.hero__overlay { position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, rgba(8,16,28,.94) 0%, rgba(12,22,38,.82) 42%, rgba(21,70,111,.55) 100%); }
.hero__inner { padding-block: 60px; max-width: 760px; }
.hero h1 { font-size: clamp(2.3rem, 6vw, 4rem); color: #fff; line-height: 1.06; }
.hero h1 .hl { background: var(--grad-solar); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p.lead { margin-top: 22px; font-size: clamp(1.05rem, 2.2vw, 1.28rem); color: #d2deec; max-width: 600px; }
.hero__actions { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 14px; }
.hero__stats { margin-top: 52px; display: flex; flex-wrap: wrap; gap: 38px; }
.hero__stat strong { display: block; font-size: clamp(1.6rem, 4vw, 2.3rem); color: #fff; font-weight: 800; }
.hero__stat span { font-size: .9rem; color: #9fb2c8; letter-spacing: .02em; }
.scroll-cue { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.6); font-size: .76rem; letter-spacing: .18em; text-transform: uppercase; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.scroll-cue::after { content: ""; width: 1px; height: 36px; background: linear-gradient(rgba(255,255,255,.6), transparent); animation: cue 1.8s infinite; }
@keyframes cue { 0%{opacity:.2; transform: scaleY(.3);} 50%{opacity:1;} 100%{opacity:.2; transform: scaleY(1); transform-origin: top;} }

/* ----- 7. Cards ---------------------------------------------------- */
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); transition: transform var(--t), box-shadow var(--t), border-color var(--t); }

/* feature / service cards */
.feature { padding: 32px 28px; }
.feature:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: transparent; }
.feature__icon { width: 58px; height: 58px; border-radius: 16px; display: grid; place-items: center; background: var(--bg-soft-2); color: var(--brand); margin-bottom: 20px; transition: var(--t); }
.feature:hover .feature__icon { background: var(--grad-brand); color: #fff; transform: rotate(-6deg) scale(1.06); }
.feature__icon svg { width: 28px; height: 28px; }
.feature h3 { font-size: 1.2rem; margin-bottom: 10px; }
.feature p { color: var(--muted); font-size: .98rem; }

/* product cards */
.pcard { overflow: hidden; display: flex; flex-direction: column; }
.pcard:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }
.pcard__media { position: relative; aspect-ratio: 4/3; background: var(--bg-soft-2); overflow: hidden; }
.pcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.pcard:hover .pcard__media img { transform: scale(1.08); }
.pcard__badge { position: absolute; top: 12px; left: 12px; background: var(--grad-solar); color: #3a2300; font-size: .72rem; font-weight: 800; padding: 6px 12px; border-radius: var(--radius-pill); letter-spacing: .03em; box-shadow: var(--shadow-sm); }
.pcard__cat { position: absolute; top: 12px; right: 12px; background: rgba(12,22,38,.78); color: #fff; font-size: .68rem; font-weight: 600; padding: 5px 11px; border-radius: var(--radius-pill); backdrop-filter: blur(4px); }
.pcard__play { position: absolute; bottom: 12px; right: 12px; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.9); display: grid; place-items: center; color: var(--brand); box-shadow: var(--shadow-sm); }
.pcard__body { padding: 20px 20px 22px; display: flex; flex-direction: column; flex: 1; }
.pcard__body h3 { font-size: 1.12rem; margin-bottom: 8px; }
.pcard__desc { color: var(--muted); font-size: .92rem; margin-bottom: 16px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* stacked footer: price on its own row, actions full-width below — never crops,
   even in the narrow 4-column desktop grid */
.pcard__foot { margin-top: auto; display: flex; flex-direction: column; align-items: stretch; gap: 11px; }
.pcard__price { font-weight: 800; color: var(--ink); font-size: 1.18rem; line-height: 1.2; }
.pcard__price small { display: block; font-size: .68rem; color: var(--muted-2); font-weight: 600; letter-spacing: .04em; margin-top: 2px; }
.pcard__price.poa { font-size: 1rem; color: var(--brand); }
.pcard__actions { display: flex; gap: 8px; }
.pcard__actions .btn { flex: 1; min-width: 0; padding: 10px 10px; font-size: .86rem; gap: 6px; }
.pcard__actions .btn svg { width: 15px; height: 15px; flex: none; }
.oos { opacity: .62; }
.oos .pcard__media::after { content: "Out of stock"; position: absolute; inset: 0; background: rgba(12,22,38,.55); color: #fff; display: grid; place-items: center; font-weight: 700; letter-spacing: .04em; }

/* ----- 8. Misc components ------------------------------------------ */
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 15px; border-radius: var(--radius-pill); background: var(--bg-soft-2); color: var(--brand); font-weight: 600; font-size: .85rem; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.split img { border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.media-frame { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.media-frame img { width: 100%; height: 100%; object-fit: cover; }
.media-badge { position: absolute; padding: 16px 20px; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); display: flex; align-items: center; gap: 12px; }
.media-badge .ic { width: 42px; height: 42px; border-radius: 12px; background: var(--grad-solar); color: #3a2300; display: grid; place-items: center; }
.media-badge strong { display: block; font-size: 1.25rem; color: var(--ink); }
.media-badge span { font-size: .78rem; color: var(--muted); }

.checklist li { display: flex; gap: 13px; align-items: flex-start; margin-bottom: 15px; color: var(--text); }
.checklist li svg { flex: none; width: 24px; height: 24px; color: var(--brand); margin-top: 1px; }
.checklist li b { color: var(--ink); }

/* steps */
.step { position: relative; padding: 30px 26px; }
.step__num { font-size: 2.4rem; font-weight: 800; color: var(--bg-soft-2); position: absolute; top: 16px; right: 22px; line-height: 1; }
.section--ink .step__num { color: rgba(255,255,255,.08); }
.step__ic { width: 50px; height: 50px; border-radius: 14px; background: var(--grad-brand); color: #fff; display: grid; place-items: center; margin-bottom: 18px; }
.step h3 { font-size: 1.14rem; margin-bottom: 8px; }
.section--ink .step { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); }
.section--ink .step p { color: #aebfd2; }

/* testimonials */
.quote { padding: 30px 28px; }
.quote__stars { color: var(--solar); display: flex; gap: 3px; margin-bottom: 14px; }
.quote__stars svg { width: 18px; height: 18px; }
.quote p { font-size: 1.02rem; color: var(--text); }
.quote__who { margin-top: 20px; display: flex; align-items: center; gap: 13px; }
.quote__av { width: 46px; height: 46px; border-radius: 50%; background: var(--grad-brand); color: #fff; display: grid; place-items: center; font-weight: 800; }
.quote__who b { color: var(--ink); display: block; font-size: .96rem; }
.quote__who span { color: var(--muted); font-size: .82rem; }

/* stat band */
.statband { display: grid; grid-template-columns: repeat(4,1fr); gap: 26px; text-align: center; }
.statband .s strong { font-size: clamp(2rem, 5vw, 3rem); background: var(--grad-solar); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 800; display: block; }
.statband .s span { color: #aebfd2; font-size: .92rem; }

/* CTA band */
.cta-band { position: relative; overflow: hidden; border-radius: var(--radius-lg); padding: 56px clamp(24px, 6vw, 70px); background: var(--grad-brand); color: #fff; }
.cta-band::after { content: ""; position: absolute; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.18), transparent 70%); top: -160px; right: -80px; }
.cta-band h2 { color: #fff; font-size: clamp(1.6rem, 3.6vw, 2.4rem); position: relative; }
.cta-band p { color: #d8e9fb; margin-top: 12px; position: relative; max-width: 560px; }
.cta-band .hero__actions { position: relative; }

/* contact cards */
.contact-card { padding: 26px; display: flex; gap: 16px; align-items: flex-start; }
.contact-card .ic { flex: none; width: 50px; height: 50px; border-radius: 14px; background: var(--bg-soft-2); color: var(--brand); display: grid; place-items: center; }
.contact-card h4 { font-size: 1.05rem; margin-bottom: 4px; }
.contact-card p, .contact-card a { color: var(--muted); font-size: .95rem; }
.contact-card a:hover { color: var(--brand); }

/* ----- 8b. Catalog toolbar ----------------------------------------- */
.catalog-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chip {
  padding: 9px 17px; border-radius: var(--radius-pill); border: 1.5px solid var(--line-2);
  background: #fff; color: var(--text); font-weight: 600; font-size: .9rem; transition: var(--t-fast);
}
.chip:hover { border-color: var(--brand); color: var(--brand); }
.chip.active { background: var(--grad-brand); color: #fff; border-color: transparent; box-shadow: var(--shadow-brand); }
.catalog-search { position: relative; min-width: 240px; flex: 1; max-width: 340px; }
.catalog-search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--muted-2); pointer-events: none; }
.catalog-search .input { padding-left: 42px; border-radius: var(--radius-pill); }

/* ----- 8b-i. Star ratings + likes ---------------------------------- */
.stars { position: relative; display: inline-block; font-size: .98rem; line-height: 1; letter-spacing: 2px; font-family: Arial, sans-serif; }
.stars .base { color: #d7dee6; }
.stars .fill { position: absolute; top: 0; left: 0; overflow: hidden; color: var(--solar-dark); white-space: nowrap; }
.stars__n { margin-left: 8px; font-size: .82rem; color: var(--muted); font-weight: 600; letter-spacing: 0; }
.rate-row { display: flex; align-items: center; gap: 0; margin: 8px 0 12px; }
.likes { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; font-size: .82rem; color: var(--ink); }
.likes svg { width: 15px; height: 15px; color: #ef4d5a; }
.pcard__like { position: absolute; top: 12px; right: 12px; background: rgba(255,255,255,.94); border-radius: 999px; padding: 5px 10px; box-shadow: var(--shadow-sm); display: inline-flex; align-items: center; gap: 5px; font-size: .76rem; font-weight: 800; color: var(--ink); backdrop-filter: blur(3px); }
.pcard__like svg { width: 13px; height: 13px; color: #ef4d5a; }
.pcard__cat2 { display: inline-block; font-size: .72rem; font-weight: 700; color: var(--brand); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; }
.pcard__cat2:hover { text-decoration: underline; }
a.pd__cat:hover { background: var(--brand); color: #fff; }

/* Shop-by-category tiles (home) */
.cat-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; transition: transform var(--t), box-shadow var(--t), border-color var(--t); }
.cat-tile:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: transparent; }
.cat-tile__ic { width: 54px; height: 54px; border-radius: 15px; background: var(--bg-soft-2); color: var(--brand); display: grid; place-items: center; margin-bottom: 8px; transition: var(--t); }
.cat-tile:hover .cat-tile__ic { background: var(--grad-brand); color: #fff; transform: rotate(-6deg) scale(1.06); }
.cat-tile__ic svg { width: 27px; height: 27px; }
.cat-tile h3 { font-size: 1.08rem; }
.cat-tile span { font-size: .82rem; color: var(--muted); font-weight: 600; }

/* ----- 8b-ii. E-commerce shop layout ------------------------------- */
.shop { display: grid; grid-template-columns: 258px 1fr; gap: 32px; align-items: start; }
.shop__side { position: sticky; top: calc(var(--nav-h) + 16px); display: flex; flex-direction: column; gap: 18px; }
.filter-group { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.filter-group h4 { font-size: .95rem; margin-bottom: 13px; }
.filter-list { display: flex; flex-direction: column; gap: 2px; }
.filter-list button { text-align: left; padding: 9px 12px; border-radius: 9px; font-weight: 600; font-size: .92rem; color: var(--text); display: flex; justify-content: space-between; align-items: center; gap: 8px; transition: var(--t-fast); width: 100%; }
.filter-list button .n { font-size: .74rem; color: var(--muted-2); background: var(--bg-soft); padding: 2px 9px; border-radius: 999px; font-weight: 700; }
.filter-list button:hover { background: var(--bg-soft); color: var(--brand); }
.filter-list button.active { background: var(--grad-brand); color: #fff; }
.filter-list button.active .n { background: rgba(255,255,255,.25); color: #fff; }
.price-inputs { display: flex; align-items: center; gap: 8px; }
.price-inputs input { width: 100%; padding: 9px 10px; border: 1.5px solid var(--line-2); border-radius: 9px; font-size: .88rem; }
.price-inputs span { color: var(--muted-2); }
.rating-filter button .stars { pointer-events: none; }
.shop__main { min-width: 0; }

/* view toggle (grid / list) */
.view-toggle { display: inline-flex; border: 1.5px solid var(--line-2); border-radius: var(--radius-pill); overflow: hidden; }
.view-toggle button { width: 42px; height: 42px; display: grid; place-items: center; color: var(--muted); transition: var(--t-fast); }
.view-toggle button svg { width: 18px; height: 18px; }
.view-toggle button.active { background: var(--grad-brand); color: #fff; }
.view-toggle button:not(.active):hover { color: var(--brand); background: var(--bg-soft); }

/* GRID VIEW — responsive columns: 2 on phones → up to 4 on large screens */
#catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (min-width: 620px) { #catalog-grid:not(.list) { grid-template-columns: repeat(auto-fill, minmax(186px, 1fr)); gap: 22px; } }

/* LIST VIEW — horizontal rows */
#catalog-grid.list { grid-template-columns: 1fr; gap: 14px; }
#catalog-grid.list .pcard { flex-direction: row; }
#catalog-grid.list .pcard__media { width: clamp(120px, 32%, 240px); flex: none; aspect-ratio: auto; }
#catalog-grid.list .pcard__media img { height: 100%; }
#catalog-grid.list .pcard__body { flex: 1; }
#catalog-grid.list .pcard__desc { -webkit-line-clamp: 2; }
#catalog-grid.list .pcard__foot { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
#catalog-grid.list .pcard__actions .btn { flex: none; padding: 10px 16px; }
@media (max-width: 480px) { #catalog-grid.list .pcard__cat2 { display: none; } #catalog-grid.list .pcard__desc { display: none; } }
.shop__bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.shop__bar .count { color: var(--muted); font-size: .92rem; font-weight: 600; }
.shop__tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sort-select { padding: 10px 16px; border: 1.5px solid var(--line-2); border-radius: var(--radius-pill); font-weight: 600; font-size: .9rem; background: #fff; cursor: pointer; }
.side-toggle { display: none; }
@media (max-width: 900px) {
  .shop { grid-template-columns: 1fr; }
  .shop__side { position: static; display: none; }
  .shop__side.open { display: flex; }
  .side-toggle { display: inline-flex; }
}

/* ----- 8b-iii. Product detail reviews ------------------------------ */
.rating-summary { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 6px 0 2px; }
.rating-summary .big { font-size: 1.5rem; font-weight: 800; color: var(--ink); }
.reviews-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 700px) { .reviews-grid { grid-template-columns: 1fr; } }
.review { padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.review__head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.review__av { width: 44px; height: 44px; border-radius: 50%; background: var(--grad-brand); color: #fff; display: grid; place-items: center; font-weight: 800; flex: none; }
.review__who b { display: block; color: var(--ink); font-size: .96rem; }
.review__who span { font-size: .8rem; color: var(--muted); }
.review p { color: var(--text); font-size: .98rem; }
.review .stars { margin-top: 3px; }

/* ----- 8c. Team + mission ------------------------------------------ */
.team-card { padding: 30px 26px; text-align: center; }
.team-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.team-card .av { width: 86px; height: 86px; border-radius: 50%; margin: 0 auto 18px; background: var(--grad-brand); color: #fff; display: grid; place-items: center; font-size: 1.7rem; font-weight: 800; box-shadow: var(--shadow-brand); }
.team-card h3 { font-size: 1.2rem; }
.team-card .role { color: var(--brand); font-weight: 700; font-size: .92rem; margin: 4px 0 12px; }
.team-card p { color: var(--muted); font-size: .94rem; }
.mission-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.mission { padding: 34px 30px; border-radius: var(--radius-lg); position: relative; overflow: hidden; }
.mission.brand { background: var(--grad-brand); color: #fff; }
.mission.dark { background: var(--grad-ink); color: #cdd9e8; }
.mission h3 { color: #fff; font-size: 1.4rem; margin-bottom: 12px; display: flex; align-items: center; gap: 12px; }
.mission .ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: rgba(255,255,255,.16); }
.mission.brand p { color: #e3effb; } .mission p { font-size: 1.02rem; }
@media (max-width: 860px) { .mission-grid { grid-template-columns: 1fr; } }

/* ----- 8d. Product detail ------------------------------------------ */
.pcard__media { display: block; }
.pcard__body h3 a { color: inherit; transition: color var(--t-fast); }
.pcard:hover .pcard__body h3 a { color: var(--brand); }

.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--muted); margin-bottom: 22px; flex-wrap: wrap; }
.breadcrumb a:hover { color: var(--brand); }
.breadcrumb svg { width: 14px; height: 14px; opacity: .6; }

.pd { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: start; }
/* Media column sticks in view while the description scrolls past (desktop). */
.pd__media { position: sticky; top: calc(var(--nav-h) + 20px); align-self: start; }
/* Ratio is set per-media in JS (var --pd-ratio); 4/3 is only the pre-load default.
   Height is capped so a tall portrait (9:16) video never exceeds the viewport,
   and object-fit: contain guarantees the whole frame shows — never cropped. */
.pd__main { aspect-ratio: var(--pd-ratio, 4 / 3); max-height: calc(100vh - var(--nav-h) - 40px); border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-soft-2); box-shadow: var(--shadow); }
.pd__main img, .pd__main video { width: 100%; height: 100%; object-fit: contain; padding: 14px; }
.pd__thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.pd__thumb { width: 76px; height: 76px; border-radius: 12px; overflow: hidden; border: 2px solid transparent; cursor: pointer; background: var(--bg-soft-2); position: relative; transition: border var(--t-fast); }
.pd__thumb.active { border-color: var(--brand); }
.pd__thumb img, .pd__thumb video { width: 100%; height: 100%; object-fit: cover; }
.pd__thumb .pi { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; background: rgba(12,22,38,.4); }
.pd__thumb .pi svg { width: 22px; height: 22px; }
.pd__cat { display: inline-flex; margin-bottom: 14px; }
.pd__title { font-size: clamp(1.6rem, 4vw, 2.3rem); }
.pd__price { font-size: 2rem; font-weight: 800; color: var(--ink); margin: 16px 0 6px; }
.pd__price.poa { font-size: 1.3rem; color: var(--brand); }
.pd__stock { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: .9rem; }
.pd__stock.in { color: #137a43; } .pd__stock.out { color: #b3261e; }
.pd__stock .d { width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.pd__desc { color: var(--muted); font-size: 1.04rem; margin: 20px 0 24px; white-space: pre-line; }
.pd__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }
.pd__assure { display: grid; gap: 12px; padding: 22px; border-radius: var(--radius); background: var(--bg-soft); border: 1px solid var(--line); }
.pd__assure li { display: flex; gap: 11px; align-items: center; font-size: .94rem; color: var(--text); }
.pd__assure svg { width: 20px; height: 20px; color: var(--brand); flex: none; }
@media (max-width: 900px) {
  .pd { grid-template-columns: 1fr; gap: 30px; }
  /* Stacked layout: media scrolls normally, no sticky, taller cap allowed. */
  .pd__media { position: static; }
  .pd__main { max-height: 78vh; }
}

/* ----- 8e. Blog ---------------------------------------------------- */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
@media (max-width: 900px) { .blog-grid { grid-template-columns: 1fr; } }
.bcard { overflow: hidden; display: flex; flex-direction: column; }
.bcard:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }
.bcard__media { display: block; aspect-ratio: 16/10; overflow: hidden; background: var(--bg-soft-2); }
.bcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.bcard:hover .bcard__media img { transform: scale(1.07); }
.bcard__body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.bcard__meta { display: flex; align-items: center; gap: 10px; font-size: .8rem; color: var(--muted-2); margin-bottom: 11px; }
.bcard__meta .pill { padding: 4px 11px; font-size: .74rem; }
.bcard__body h3 { font-size: 1.2rem; line-height: 1.3; margin-bottom: 9px; }
.bcard__body h3 a { color: inherit; transition: color var(--t-fast); }
.bcard:hover h3 a { color: var(--brand); }
.bcard__excerpt { color: var(--muted); font-size: .94rem; flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bcard__more { margin-top: 16px; font-weight: 700; color: var(--brand); font-size: .92rem; display: inline-flex; align-items: center; gap: 6px; }
.bcard__more svg { width: 16px; height: 16px; transition: transform var(--t-fast); }
.bcard:hover .bcard__more svg { transform: translateX(4px); }

/* featured blog hero */
.blog-feature { display: grid; grid-template-columns: 1.1fr 1fr; gap: 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--line); background: #fff; margin-bottom: 40px; }
.blog-feature__img { min-height: 320px; background-size: cover; background-position: center; background-color: var(--bg-soft-2); }
.blog-feature__body { padding: clamp(26px, 4vw, 44px); display: flex; flex-direction: column; justify-content: center; }
.blog-feature__body h2 { font-size: clamp(1.4rem, 3vw, 2rem); margin: 12px 0; }
.blog-feature__body p { color: var(--muted); margin-bottom: 20px; }
@media (max-width: 820px) { .blog-feature { grid-template-columns: 1fr; } .blog-feature__img { min-height: 220px; } }

/* post detail */
.post { max-width: 760px; margin-inline: auto; }
/* Cover ratio is set per-image in JS (--post-cover-ratio); 16/8 is the pre-load
   default. Height capped + object-fit: contain so a portrait cover shows fully. */
.post__cover { width: 100%; aspect-ratio: var(--post-cover-ratio, 16 / 8); max-height: 70vh; object-fit: contain; border-radius: var(--radius-lg); box-shadow: var(--shadow); margin-bottom: 30px; background: var(--bg-soft-2); }
.post__meta { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: .9rem; margin-bottom: 14px; flex-wrap: wrap; }
.post__title { font-size: clamp(1.8rem, 4.5vw, 2.8rem); margin-bottom: 18px; }
.post__content { font-size: 1.08rem; color: #33414f; line-height: 1.8; }
.post__content p { margin-bottom: 22px; }
.post__content img, .post__content video { border-radius: var(--radius); margin: 10px 0 24px; width: 100%; }
/* Inline video: never taller than the viewport; portrait clips sit centered on a
   dark band (contain) instead of stretching the page full-width. */
.post__content video { max-height: 70vh; object-fit: contain; background: #0c1626; display: block; }
.post__share { margin-top: 40px; padding-top: 26px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ----- Social share row (product + blog) --------------------------- */
.share { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.share__label { font-weight: 700; color: var(--ink); }
.share__btn { gap: 7px; }
.share__btn svg { width: 17px; height: 17px; }
.post__share-more { margin-top: 16px; }

/* ----- 8f. Admin tabs ---------------------------------------------- */
.tabs { display: inline-flex; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 5px; gap: 4px; margin-bottom: 26px; }
.tab { padding: 9px 22px; border-radius: var(--radius-pill); font-weight: 700; font-size: .94rem; color: var(--muted); transition: var(--t-fast); }
.tab.active { background: var(--grad-brand); color: #fff; box-shadow: var(--shadow-brand); }
.tab:not(.active):hover { color: var(--brand); }

/* ----- 9. Footer --------------------------------------------------- */
.footer { background: var(--grad-ink); color: #aebfd2; padding-top: 72px; }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 40px; padding-bottom: 50px; }
.footer h5 { color: #fff; font-size: 1rem; margin-bottom: 18px; letter-spacing: .02em; }
.footer a { color: #aebfd2; transition: var(--t-fast); }
.footer a:hover { color: var(--solar-light); }
.footer__links li { margin-bottom: 11px; }
.footer__brand img { height: 96px; width: auto; background: #0a0f18; padding: 12px 16px; border-radius: 14px; }
.footer__brand p { margin-top: 18px; font-size: .94rem; max-width: 320px; }
.footer__contact li { display: flex; gap: 12px; margin-bottom: 14px; font-size: .94rem; align-items: flex-start; }
.footer__contact svg { width: 19px; height: 19px; color: var(--solar); flex: none; margin-top: 3px; }
.socials { display: flex; gap: 11px; margin-top: 20px; }
.socials a { width: 42px; height: 42px; border-radius: 12px; background: rgba(255,255,255,.07); display: grid; place-items: center; transition: var(--t); }
.socials a:hover { background: var(--grad-brand); transform: translateY(-3px); }
.socials svg { width: 20px; height: 20px; color: #fff; }
.footer__bottom { border-top: 1px solid rgba(255,255,255,.09); padding: 22px 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: .86rem; }
.footer__bottom a.admin-link { color: #6b7e94; }
.footer__bottom a.admin-link:hover { color: var(--solar-light); }

/* ----- 10. Floating WhatsApp -------------------------------------- */
.wa-float { position: fixed; bottom: 22px; right: 22px; z-index: 900; width: 60px; height: 60px; border-radius: 50%; background: #25d366; display: grid; place-items: center; box-shadow: 0 12px 30px rgba(37,211,102,.45); animation: wa-pulse 2.4s infinite; transition: transform var(--t); }
.wa-float:hover { transform: scale(1.08); }
.wa-float svg { width: 32px; height: 32px; color: #fff; }
@keyframes wa-pulse { 0%{box-shadow:0 0 0 0 rgba(37,211,102,.5);} 70%{box-shadow:0 0 0 18px rgba(37,211,102,0);} 100%{box-shadow:0 0 0 0 rgba(37,211,102,0);} }

/* ----- 10b. Mobile sticky bottom bar ------------------------------- */
.botbar { display: none; }
.botbar__item { position: relative; }
.botbar__item .badge-wa { position: absolute; top: 4px; right: 50%; transform: translateX(18px); width: 7px; height: 7px; border-radius: 50%; background: #25d366; }
@media (max-width: 860px) {
  .botbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 950;
    display: flex; justify-content: space-around; align-items: stretch;
    background: rgba(255,255,255,.97); backdrop-filter: blur(12px);
    border-top: 1px solid var(--line); box-shadow: 0 -6px 24px rgba(12,22,38,.10);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .botbar__item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 9px 4px 9px; color: var(--muted); font-size: .68rem; font-weight: 700; letter-spacing: .01em; transition: color var(--t-fast); }
  .botbar__item svg { width: 22px; height: 22px; }
  .botbar__item.active { color: var(--brand); }
  .botbar__item.wa { color: var(--green-dark); }
  body { padding-bottom: 64px; }
  .wa-float { bottom: 76px; width: 54px; height: 54px; }
  .wa-float svg { width: 28px; height: 28px; }
}

/* ----- 11. Scroll reveal animations -------------------------------- */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }
.reveal.d4 { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }

/* ----- 12. Forms (shared + admin) ---------------------------------- */
.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 600; font-size: .9rem; color: var(--ink); margin-bottom: 7px; }
.field .hint { font-weight: 400; color: var(--muted-2); font-size: .82rem; }
.input, .textarea, .select {
  width: 100%; padding: 13px 15px; border: 1.5px solid var(--line-2); border-radius: var(--radius-sm);
  background: #fff; transition: border var(--t-fast), box-shadow var(--t-fast); font-size: .98rem;
}
.input:focus, .textarea:focus, .select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(47,128,201,.14); }
.textarea { resize: vertical; min-height: 110px; }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 600; font-size: .94rem; color: var(--ink); }
.switch input { display: none; }
.switch .track { width: 46px; height: 26px; border-radius: 999px; background: var(--line-2); position: relative; transition: var(--t-fast); flex: none; }
.switch .track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: var(--t-fast); box-shadow: var(--shadow-sm); }
.switch input:checked + .track { background: var(--brand); }
.switch input:checked + .track::after { transform: translateX(20px); }

/* ----- 13. Modal --------------------------------------------------- */
.modal { position: fixed; inset: 0; z-index: 1100; display: none; }
.modal.open { display: block; }
.modal__bg { position: absolute; inset: 0; background: rgba(8,16,28,.62); backdrop-filter: blur(4px); animation: fade .25s; }
.modal__panel {
  position: relative; z-index: 1; background: #fff; width: min(640px, 94vw); max-height: 92vh; overflow-y: auto;
  margin: 5vh auto; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); animation: pop .3s var(--ease);
}
.modal__head { position: sticky; top: 0; background: #fff; padding: 22px 26px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; z-index: 2; }
.modal__head h3 { font-size: 1.25rem; }
.modal__close { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; color: var(--muted); transition: var(--t-fast); }
.modal__close:hover { background: var(--bg-soft); color: var(--ink); }
.modal__body { padding: 26px; }
.modal__foot { position: sticky; bottom: 0; background: #fff; padding: 18px 26px; border-top: 1px solid var(--line); display: flex; gap: 12px; justify-content: flex-end; }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(20px) scale(.98); } }

/* ----- 14. Toast --------------------------------------------------- */
.toast-wrap { position: fixed; top: 18px; right: 18px; z-index: 1200; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.toast { background: var(--ink); color: #fff; padding: 14px 18px; border-radius: 12px; box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: 11px; font-weight: 600; font-size: .94rem; animation: slide-in .3s var(--ease); max-width: 360px; }
.toast.ok { background: #137a43; } .toast.err { background: #b3261e; } .toast.info { background: var(--brand-dark); }
.toast svg { width: 20px; height: 20px; flex: none; }
@keyframes slide-in { from { opacity: 0; transform: translateX(40px); } }

/* ----- 15. Loaders / states ---------------------------------------- */
.skeleton { background: linear-gradient(100deg, var(--bg-soft) 30%, var(--bg-soft-2) 50%, var(--bg-soft) 70%); background-size: 200% 100%; animation: shimmer 1.3s infinite; border-radius: var(--radius-lg); }
@keyframes shimmer { to { background-position: -200% 0; } }
.empty-state { text-align: center; padding: 70px 20px; color: var(--muted); }
.empty-state svg { width: 60px; height: 60px; color: var(--line-2); margin: 0 auto 18px; }
.spinner { width: 22px; height: 22px; border: 2.5px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
.spinner.dark { border-color: rgba(47,128,201,.25); border-top-color: var(--brand); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ----- 15b. Admin dashboard ---------------------------------------- */
body.admin { background: var(--bg-soft); }
.admin-top { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid var(--line); height: 66px; display: flex; align-items: center; }
.admin-top__inner { width: 100%; max-width: 1160px; margin-inline: auto; padding-inline: 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.admin-top .brand img { height: 34px; }
.admin-user { display: flex; align-items: center; gap: 12px; font-size: .9rem; color: var(--muted); }
.admin-user .who { display: flex; align-items: center; gap: 9px; font-weight: 600; color: var(--ink); }
.admin-user .dot { width: 30px; height: 30px; border-radius: 50%; background: var(--grad-brand); color: #fff; display: grid; place-items: center; font-size: .8rem; font-weight: 800; }

.admin-main { max-width: 1160px; margin: 0 auto; padding: 30px 22px 80px; }
.admin-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.admin-head h1 { font-size: 1.7rem; }
.admin-head p { color: var(--muted); font-size: .95rem; margin-top: 2px; }

/* login */
.login-wrap { min-height: calc(100vh - 66px); display: grid; place-items: center; padding: 30px 20px; }
.login-card { width: min(420px, 100%); background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 38px 32px; border: 1px solid var(--line); }
.login-card .logo-badge { width: 68px; height: 68px; border-radius: 18px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); display: grid; place-items: center; margin: 0 auto 20px; }
.login-card .logo-badge img { height: 46px; }
.login-card h2 { text-align: center; font-size: 1.4rem; }
.login-card .sub { text-align: center; color: var(--muted); font-size: .94rem; margin: 6px 0 26px; }

/* admin account settings */
.acct-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; max-width: 860px; }
.acct-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 26px 24px; }
.acct-card h2 { font-size: 1.15rem; }
.acct-card__sub { color: var(--muted); font-size: .88rem; margin: 6px 0 18px; }
.acct-card .field { margin-bottom: 14px; }
.acct-card .btn { margin-top: 4px; }

/* admin product grid */
.admin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 20px; }
.ptile { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: var(--t); display: flex; flex-direction: column; }
.ptile:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.ptile__media { position: relative; aspect-ratio: 1; background: var(--bg-soft-2); }
.ptile__media img { width: 100%; height: 100%; object-fit: cover; }
.ptile__flags { position: absolute; top: 8px; left: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.tag { font-size: .66rem; font-weight: 800; padding: 4px 9px; border-radius: 999px; letter-spacing: .03em; }
.tag.solar { background: var(--grad-solar); color: #3a2300; }
.tag.feat { background: var(--brand); color: #fff; }
.tag.oos { background: #b3261e; color: #fff; }
.tag.vid { background: rgba(12,22,38,.8); color: #fff; }
.ptile__body { padding: 13px 14px 14px; flex: 1; display: flex; flex-direction: column; }
.ptile__body h3 { font-size: .98rem; line-height: 1.3; }
.ptile__cat { font-size: .74rem; color: var(--brand); font-weight: 700; margin: 3px 0 7px; }
.ptile__price { font-weight: 800; color: var(--ink); margin-top: auto; }
.ptile__acts { display: flex; gap: 8px; padding: 0 14px 14px; }
.ptile__acts button { flex: 1; padding: 9px; border-radius: 9px; font-weight: 700; font-size: .84rem; border: 1.5px solid var(--line-2); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: var(--t-fast); }
.ptile__acts button svg { width: 15px; height: 15px; }
.ptile__acts .edit:hover { border-color: var(--brand); color: var(--brand); background: var(--bg-soft); }
.ptile__acts .del:hover { border-color: #b3261e; color: #b3261e; background: #fdf0ef; }

.add-tile { border: 2px dashed var(--line-2); border-radius: var(--radius); display: grid; place-items: center; min-height: 230px; cursor: pointer; transition: var(--t); color: var(--brand); background: #fff; text-align: center; }
.add-tile:hover { border-color: var(--brand); background: var(--bg-soft); transform: translateY(-3px); }
.add-tile svg { width: 40px; height: 40px; margin-bottom: 8px; }
.add-tile span { font-weight: 700; }

/* uploader / dropzone */
.dropzone { border: 2px dashed var(--line-2); border-radius: var(--radius); padding: 26px; text-align: center; cursor: pointer; transition: var(--t-fast); color: var(--muted); }
.dropzone:hover, .dropzone.drag { border-color: var(--brand); background: var(--bg-soft); color: var(--brand); }
.dropzone svg { width: 38px; height: 38px; margin: 0 auto 10px; color: var(--brand); }
.dropzone b { color: var(--ink); }
.previews { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px,1fr)); gap: 10px; margin-top: 14px; }
.previews:empty { display: none; }
.preview { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: #000; }
.preview img, .preview video { width: 100%; height: 100%; object-fit: cover; }
.preview .rm { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border-radius: 50%; background: rgba(12,22,38,.85); color: #fff; display: grid; place-items: center; }
.preview .rm svg { width: 14px; height: 14px; }
.preview .cover { position: absolute; bottom: 0; left: 0; right: 0; background: var(--brand); color: #fff; font-size: .62rem; font-weight: 800; text-align: center; padding: 2px; letter-spacing: .04em; }
.preview .vlabel { position: absolute; top: 4px; left: 4px; background: rgba(12,22,38,.8); color: #fff; font-size: .6rem; font-weight: 800; padding: 2px 6px; border-radius: 6px; }
.upload-bar { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; margin-top: 12px; }
.upload-bar i { display: block; height: 100%; width: 0; background: var(--grad-brand); transition: width .2s; }

/* ratings row + testimonials editor (admin) */
.row-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 560px) { .row-3 { grid-template-columns: 1fr; } }
.t-editor { display: flex; flex-direction: column; gap: 14px; }
.t-editor:empty { display: none; }
.t-row { border: 1px solid var(--line); border-radius: 12px; padding: 14px; background: var(--bg-soft); }
.t-row__grid { display: grid; grid-template-columns: 1fr 1fr 96px; gap: 10px; margin-bottom: 10px; }
@media (max-width: 560px) { .t-row__grid { grid-template-columns: 1fr; } }
.t-row .input, .t-row .textarea { background: #fff; }
.t-remove { margin-top: 10px; color: #b3261e; font-weight: 700; font-size: .84rem; display: inline-flex; align-items: center; gap: 6px; }
.t-remove:hover { text-decoration: underline; }

/* content builder (admin) */
.cb-list { display: flex; flex-direction: column; gap: 12px; }
.cb-list:empty { display: none; }
.cb-block { border: 1px solid var(--line); border-radius: 12px; background: var(--bg-soft); padding: 12px 12px 14px; }
.cb-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cb-type { font-weight: 800; font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--brand); }
.cb-ctrls { display: inline-flex; gap: 4px; }
.cb-ctrls button { width: 28px; height: 28px; border-radius: 7px; color: var(--muted); font-size: .8rem; line-height: 1; }
.cb-ctrls button:hover { background: #fff; color: var(--ink); }
.cb-ctrls .cb-del:hover { color: #b3261e; }
.cb-body .input, .cb-body .textarea { background: #fff; }
.cb-media { margin-bottom: 8px; }
.cb-media:empty { display: none; }
.cb-media img, .cb-media video { max-height: 160px; max-width: 100%; border-radius: 8px; border: 1px solid var(--line); }
.cb-add { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.cb-add__label { font-weight: 700; font-size: .85rem; color: var(--muted); }
.cb-add button { padding: 7px 13px; border: 1.5px dashed var(--line-2); border-radius: 999px; font-weight: 700; font-size: .82rem; color: var(--brand); transition: var(--t-fast); }
.cb-add button:hover { border-color: var(--brand); background: #fff; }

/* content builder (public render) */
.cb-render { max-width: 820px; }
.cb-render > * { margin-bottom: 24px; }
.cb-render > *:last-child { margin-bottom: 0; }
.cb-h { font-size: clamp(1.25rem, 3vw, 1.6rem); }
.cb-text { color: #33414f; line-height: 1.8; font-size: 1.05rem; }
.cb-text p { margin-bottom: 16px; }
.cb-text p:last-child { margin-bottom: 0; }
.cb-img img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.cb-img figcaption { text-align: center; color: var(--muted); font-size: .86rem; margin-top: 10px; }
.cb-video { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow-sm); background: #000; }
.cb-embed { position: relative; padding-bottom: 56.25%; height: 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.cb-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cb-btnwrap { display: flex; }

/* ----- 16. Utilities ----------------------------------------------- */
.text-center { text-align: center; }
.mt-0{margin-top:0}.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}.mt-4{margin-top:36px}
.mb-2{margin-bottom:16px}.mb-3{margin-bottom:24px}
.flex { display: flex; } .gap-2 { gap: 16px; } .gap-3 { gap: 24px; }
.wrap { flex-wrap: wrap; } .items-center { align-items: center; } .justify-center { justify-content: center; }
.hide { display: none !important; }
.muted { color: var(--muted); }

/* ----- 17. Responsive ---------------------------------------------- */
@media (max-width: 1024px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 34px; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .statband { grid-template-columns: repeat(2, 1fr); gap: 30px; }
}
@media (max-width: 860px) {
  .nav__links, .nav__cta .btn { display: none; }
  .nav__toggle { display: flex; }
  .section { padding: 70px 0; }
  .split { grid-template-columns: 1fr; gap: 36px; }
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .hero__stats { gap: 26px; }
  .row-2 { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .grid-4 { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .statband { grid-template-columns: 1fr 1fr; }
  .cta-band { padding: 40px 22px; }
  .section { padding: 58px 0; }
}

/* ----- 18. Mobile overflow / cropping hardening -------------------- */
@media (max-width: 560px) {
  /* buttons must never clip their text — allow wrapping + stack full width */
  .btn { white-space: normal; }
  .btn-lg { padding: 15px 20px; font-size: 1rem; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; flex: none; }
  .pd__actions { flex-direction: column; }
  .pd__actions .btn { width: 100%; }
  ul.checklist { columns: 1 !important; }
  .toast { max-width: calc(100vw - 36px); }
  .hero__stats { gap: 20px 30px; }
  .breadcrumb { font-size: .82rem; }
}
/* very narrow phones: stack the two action buttons vertically */
@media (max-width: 430px) {
  #catalog-grid:not(.list) .pcard__actions { flex-direction: column; }
  #catalog-grid:not(.list) .pcard__desc { -webkit-line-clamp: 3; }
  #catalog-grid.list .pcard__foot { flex-direction: column; align-items: stretch; gap: 9px; }
  #catalog-grid.list .pcard__actions .btn { flex: 1; }
}
/* very small phones: single column so cards never get too cramped */
@media (max-width: 359px) {
  #catalog-grid:not(.list) { grid-template-columns: 1fr; }
}

/* ----- 18b. Mobile card carousels -----------------------------------
   On phones, the tall "info card" rows (value props, services, process
   steps, testimonials) turn into a single swipeable horizontal strip so
   the page stays short and scannable — a visitor swipes sideways instead
   of scrolling past a long vertical stack. Tablet/desktop keep the grid. */
@media (max-width: 700px) {
  .section-head { margin-bottom: 30px; }
  .section-head .section-sub { font-size: .98rem; margin-top: 10px; }

  .m-carousel {
    display: flex;
    grid-template-columns: none;          /* cancel the grid layout */
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 22px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: -22px;                 /* bleed to the screen edges */
    padding: 4px 22px 14px;               /* ...but keep content aligned */
  }
  .m-carousel::-webkit-scrollbar { display: none; }
  .m-carousel > * {
    flex: 0 0 80%;                        /* next card "peeks" → signals swipe */
    max-width: 300px;
    scroll-snap-align: start;
  }
  /* cards off-screen horizontally never trigger the scroll-reveal observer,
     so keep every carousel card visible instead of stuck at opacity 0 */
  .m-carousel .reveal { opacity: 1; transform: none; }
  /* compact the cards inside a carousel so each one is quick to read */
  .m-carousel .feature,
  .m-carousel .step,
  .m-carousel .quote { padding: 20px 18px; }
  .m-carousel .feature__icon { width: 46px; height: 46px; border-radius: 13px; margin-bottom: 12px; }
  .m-carousel .feature__icon svg { width: 22px; height: 22px; }
  .m-carousel .feature h3,
  .m-carousel .step h3 { font-size: 1.04rem; margin-bottom: 6px; }
  .m-carousel .feature p,
  .m-carousel .step p { font-size: .9rem; }
  .m-carousel .feature p,
  .m-carousel .step p {
    display: -webkit-box; -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; overflow: hidden;   /* keep every card the same short height */
  }
  .m-carousel .quote p {
    display: -webkit-box; -webkit-box-orient: vertical;
    -webkit-line-clamp: 5; overflow: hidden;
  }
  .m-carousel .step__num { font-size: 2.6rem; }
}

/* ----- 18c. Admin dashboard: mobile responsive ---------------------- */
@media (max-width: 700px) {
  .admin-top { height: 56px; }
  .admin-top__inner { padding-inline: 14px; gap: 10px; }
  .admin-top .brand img { height: 28px; }
  .admin-top .brand__txt small { display: none; }
  .admin-user { gap: 8px; min-width: 0; }
  .admin-user .who { min-width: 0; max-width: 46vw; }
  .admin-user .who #user-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .admin-main { padding: 20px 14px 96px; }
  .admin-head { margin-bottom: 20px; }
  .admin-head h1 { font-size: 1.4rem; }

  /* Tabs → a full-width horizontal scroll strip that never overflows the page */
  .tabs {
    display: flex;
    gap: 8px;
    margin-inline: -14px;
    padding: 4px 14px 6px;
    overflow-x: auto;
    scrollbar-width: none;
    background: transparent;
    border: 0;
    border-radius: 0;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 9px 16px;
    background: #fff;
    border: 1px solid var(--line);
  }
  .tab.active { border-color: transparent; }
}
@media (max-width: 460px) {
  .admin-user .who #user-email { display: none; }   /* the avatar initial is enough */
  .admin-head > .btn { width: 100%; }               /* full-width "Add" button */
}

/* =====================================================================
   Editor.js block editor (admin) + .rich rendered content (public)
   Appended section; safe to keep at the end of the file.
   ===================================================================== */

/* ---- Admin: Editor.js holder ---- */
.ejs {
  border: 1.5px solid var(--line-2); border-radius: var(--radius-sm);
  background: #fff; min-height: 140px; padding: 6px 8px;
  transition: border var(--t-fast), box-shadow var(--t-fast);
  /* allow inline/block toolbars & popovers to overflow the holder */
  overflow: visible;
}
.ejs:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(47,128,201,.14); }
/* Editor.js injects .codex-editor — match the form typography & width */
.ejs .codex-editor { font-family: inherit; color: var(--ink); }
.ejs .codex-editor__redactor { padding-bottom: 60px !important; }
/* constrain content width so blocks don't run edge-to-edge inside the modal,
   but leave room on the left for the "+"/settings tune buttons */
.ejs .ce-block__content,
.ejs .ce-toolbar__content { max-width: 100%; }
.ejs .ce-paragraph { line-height: 1.65; }
/* keep the "+" add button and settings tune buttons visible */
.ejs .ce-toolbar__plus,
.ejs .ce-toolbar__settings-btn { color: var(--ink); }
/* popovers / inline toolbars must sit above modal content and not clip */
.ejs .ce-toolbar, .ejs .ce-inline-toolbar, .ejs .ce-conversion-toolbar,
.ejs .ce-popover, .ejs .ce-settings { z-index: 30; }
.ejs .cdx-marker { background: rgba(245,235,111,.85); padding: 1px 0; }

/* the modal body scrolls — don't clip Editor.js popovers horizontally */
.modal__body { overflow-x: visible; }

@media (max-width: 560px) {
  .ejs { padding: 4px 4px; }
}

/* ---- Public: rendered rich content (.rich) ---- */
.rich > *:first-child { margin-top: 0; }
.rich > *:last-child { margin-bottom: 0; }
.rich h1 { font-size: clamp(1.5rem, 3.4vw, 2rem); margin: 30px 0 14px; }
.rich h2 { font-size: clamp(1.3rem, 3vw, 1.6rem); margin: 26px 0 12px; }
.rich h3 { font-size: clamp(1.12rem, 2.4vw, 1.3rem); margin: 22px 0 10px; }
.rich h4 { font-size: clamp(1rem, 2vw, 1.14rem); margin: 20px 0 9px; }
.rich p { margin: 0 0 18px; }
.rich ul, .rich ol { margin: 0 0 18px; padding-left: 28px; }
.rich ul { list-style: disc; }
.rich ol { list-style: decimal; }
.rich li { margin-bottom: 8px; }
.rich a { color: var(--brand); text-decoration: underline; font-weight: 600; }
.rich a:hover { color: var(--brand-dark); }
.rich strong, .rich b { font-weight: 700; color: var(--ink); }
.rich mark { background: rgba(245,235,111,.75); padding: 1px 2px; border-radius: 3px; }
.rich blockquote {
  margin: 0 0 22px; padding: 12px 20px; border-left: 4px solid var(--brand);
  background: var(--bg-soft); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--muted); font-style: italic;
}
.rich blockquote cite { display: block; margin-top: 8px; font-style: normal; font-weight: 700; color: var(--ink); font-size: .9rem; }
.rich figure.cb-img { margin: 0 0 22px; }
.rich figure.cb-embed-fig { margin: 0 0 22px; }
.rich figure.cb-embed-fig figcaption { text-align: center; color: var(--muted); font-size: .86rem; margin-top: 10px; }
.rich .cb-embed { margin: 0; }
.rich iframe { max-width: 100%; }
.rich hr.cb-hr {
  border: 0; height: 0; margin: 30px auto; width: 60%;
  border-top: 2px dashed var(--line-2);
}
/* pd__desc uses .rich too — clear its legacy pre-line whitespace mode */
.pd__desc.rich { white-space: normal; }

/* =====================================================================
   Custom Editor.js blocks (admin) + their public .rich rendering
   Video/Embed, Button, Bookmark, Checklist, Table, Callout, Divider.
   Appended section; safe to keep at the end of the file.
   ===================================================================== */

/* ---- Admin: custom block forms (.cb-tool) ---- */
.cb-tool { display: grid; gap: 10px; padding: 4px 2px; }
.cb-tool__label { font-weight: 700; font-size: .82rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.cb-tool__row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cb-tool__input { flex: 1 1 200px; min-width: 0; }
.cb-tool__select { max-width: 200px; }
.cb-tool__btn { flex: none; white-space: nowrap; }
.cb-tool__note { color: var(--muted-2); font-size: .84rem; font-style: italic; }
.cb-tool__preview { margin-top: 2px; }
.cb-tool__preview:empty { display: none; }
.cb-tool__preview .cb-embed,
.cb-tool__preview .cb-video { max-width: 480px; }
.cb-tool__preview.cb-btnwrap { display: flex; }
.cb-tool__preview .btn { pointer-events: none; }

/* ---- Admin: Carousel block editor ---- */
.cbc-opts { align-items: center; }
.cbc-auto { display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; color: var(--text); white-space: nowrap; }
.cbc-auto input { width: 16px; height: 16px; }
.cbc-list { display: flex; gap: 10px; flex-wrap: wrap; --cbc-ratio: 16 / 9; }
.cbc-slide { width: 130px; border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden; background: var(--bg-soft-2); }
.cbc-slide__media { aspect-ratio: var(--cbc-ratio); background: #0c1626; display: grid; place-items: center; }
.cbc-slide__media img, .cbc-slide__media video { width: 100%; height: 100%; object-fit: contain; }
.cbc-slide__ctrl { display: flex; gap: 2px; padding: 5px; background: #fff; }
.cbc-slide__ctrl button { flex: 1; border: 1px solid var(--line-2); background: #fff; border-radius: 6px; cursor: pointer; font-size: .95rem; line-height: 1; padding: 5px 0; color: var(--ink); }
.cbc-slide__ctrl button:hover:not([disabled]) { background: var(--bg-soft); border-color: var(--brand); }
.cbc-slide__ctrl button[disabled] { opacity: .35; cursor: default; }
.cbc-slide__ctrl .cbc-del { color: #b3261e; font-weight: 700; }

/* ---- Public (.rich) & anywhere: Carousel / slider ---- */
.carousel { position: relative; margin: 0 0 24px; border-radius: var(--radius); overflow: hidden; background: #0c1626; box-shadow: var(--shadow-sm); --carousel-ratio: 16 / 9; }
.carousel__viewport { overflow: hidden; touch-action: pan-y; cursor: grab; }
.carousel__viewport:active { cursor: grabbing; }
.carousel__track { display: flex; transition: transform .5s cubic-bezier(.22,.61,.36,1); will-change: transform; }
.carousel__slide { position: relative; flex: 0 0 100%; margin: 0; aspect-ratio: var(--carousel-ratio); background: #0c1626; }
.carousel__slide img, .carousel__slide video { width: 100%; height: 100%; object-fit: contain; display: block; }
.carousel__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 16px; color: #fff; font-size: .9rem; background: linear-gradient(transparent, rgba(8,14,24,.75)); }
.carousel__arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; display: grid; place-items: center; border: none; border-radius: 50%; background: rgba(255,255,255,.9); color: var(--ink); cursor: pointer; box-shadow: var(--shadow-sm); transition: background var(--t-fast), transform var(--t-fast); z-index: 2; }
.carousel__arrow:hover { background: #fff; transform: translateY(-50%) scale(1.08); }
.carousel__arrow svg { width: 22px; height: 22px; }
.carousel__arrow.prev { left: 12px; }
.carousel__arrow.next { right: 12px; }
.carousel__dots { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; gap: 8px; z-index: 2; }
.carousel__dot { width: 9px; height: 9px; padding: 0; border: none; border-radius: 50%; background: rgba(255,255,255,.5); cursor: pointer; transition: background var(--t-fast), transform var(--t-fast); }
.carousel__dot.active { background: #fff; transform: scale(1.25); }
@media (max-width: 640px) {
  .carousel__arrow { width: 34px; height: 34px; }
  .carousel__arrow svg { width: 18px; height: 18px; }
  .carousel__arrow.prev { left: 8px; }
  .carousel__arrow.next { right: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .carousel__track { transition: none; }
}

/* ---- Admin: shared row-list builder (spec / features / faq) ---- */
.cbx-list { display: grid; gap: 8px; margin: 4px 0; }
.cbx-row { display: flex; gap: 8px; align-items: flex-start; }
.cbx-row .input, .cbx-row .textarea { min-width: 0; }
.cbx-icon { flex: 0 0 60px; text-align: center; }
.cbx-row--spec .cbx-label { flex: 1 1 40%; }
.cbx-row--spec .cbx-value { flex: 1 1 40%; }
.cbx-fbody { flex: 1; display: grid; gap: 6px; min-width: 0; }
.cbx-fbody .textarea { min-height: 52px; }
.cbx-del { flex: none; width: 34px; height: 34px; border: 1px solid var(--line-2); background: #fff; border-radius: 8px; color: #b3261e; font-size: 1.2rem; line-height: 1; cursor: pointer; }
.cbx-del:hover { background: #fdeceb; border-color: #b3261e; }

/* ---- Public (.rich): Spec table ---- */
.rich .rich-spec { margin: 0 0 24px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; }
.rich .rich-spec__title { margin: 0; padding: 14px 18px; font-size: 1.05rem; background: var(--bg-soft); border-bottom: 1px solid var(--line); }
.rich .rich-spec__row { display: flex; justify-content: space-between; gap: 16px; padding: 12px 18px; border-top: 1px solid var(--line); }
.rich .rich-spec__row:first-child { border-top: none; }
.rich .rich-spec__k { display: inline-flex; align-items: center; gap: 9px; color: var(--muted); font-weight: 600; }
.rich .rich-spec__i { font-size: 1.1rem; }
.rich .rich-spec__v { color: var(--ink); font-weight: 700; text-align: right; }

/* ---- Public (.rich): Feature cards ---- */
.rich .rich-features__title { margin: 0 0 16px; }
.rich .rich-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin: 0 0 24px; }
.rich .rich-feature { padding: 20px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; transition: transform var(--t-fast), box-shadow var(--t-fast); }
.rich .rich-feature:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.rich .rich-feature__i { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--bg-soft); font-size: 1.4rem; margin-bottom: 12px; }
.rich .rich-feature__t { margin: 0 0 6px; font-size: 1.05rem; }
.rich .rich-feature__x { margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.6; }

/* ---- Public (.rich): CTA banner ---- */
.rich .rich-cta { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin: 0 0 24px; padding: 26px 28px; border-radius: var(--radius-lg); background: var(--grad-brand, linear-gradient(135deg, var(--brand), var(--brand-dark))); color: #fff; box-shadow: var(--shadow); }
.rich .rich-cta__h { font-size: 1.35rem; font-weight: 800; line-height: 1.2; }
.rich .rich-cta__s { margin-top: 6px; opacity: .92; font-size: 1rem; }
.rich .rich-cta__btn { flex: none; }
.rich .rich-cta__btn svg { width: 20px; height: 20px; }
@media (max-width: 560px) { .rich .rich-cta { flex-direction: column; align-items: flex-start; } .rich .rich-cta__btn { width: 100%; justify-content: center; } }

/* ---- Public (.rich): FAQ accordion ---- */
.rich .rich-faq { margin: 0 0 24px; }
.rich .rich-faq__title { margin: 0 0 14px; }
.rich .rich-faq__item { border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; margin-bottom: 10px; overflow: hidden; }
.rich .rich-faq__q { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 18px; font-weight: 700; color: var(--ink); cursor: pointer; list-style: none; }
.rich .rich-faq__q::-webkit-details-marker { display: none; }
.rich .rich-faq__chev { flex: none; width: 11px; height: 11px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform var(--t-fast); margin-top: -4px; }
.rich .rich-faq__item[open] .rich-faq__chev { transform: rotate(-135deg); margin-top: 2px; }
.rich .rich-faq__a { padding: 0 18px 16px; color: var(--muted); line-height: 1.7; }

/* ---- Public (.rich): bookmark card ---- */
.rich .cb-bookmark {
  display: flex; flex-direction: column; gap: 4px;
  padding: 16px 18px; margin: 0 0 22px;
  border: 1.5px solid var(--line-2); border-radius: var(--radius-sm);
  background: #fff; text-decoration: none;
  transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}
.rich .cb-bookmark:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); border-color: var(--brand); }
.rich .cb-bookmark__t { font-weight: 700; color: var(--ink); text-decoration: none; }
.rich .cb-bookmark__u { font-size: .82rem; color: var(--muted); }

/* ---- Public (.rich): checklist / to-do ---- */
.rich .rich-check { list-style: none; margin: 0 0 18px; padding-left: 0; }
.rich .rich-check li { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; color: var(--ink); }
.rich .rich-check .tick {
  flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 6px;
  border: 2px solid var(--line-2); background: #fff; position: relative;
}
.rich .rich-check li.done .tick { background: var(--green); border-color: var(--green); }
.rich .rich-check li.done .tick::after {
  content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.rich .rich-check li.done { color: var(--muted); }

/* ---- Public (.rich): table ---- */
.rich .rich-table-wrap { overflow-x: auto; margin: 0 0 22px; -webkit-overflow-scrolling: touch; }
.rich .rich-table { width: 100%; border-collapse: collapse; font-size: .96rem; }
.rich .rich-table th, .rich .rich-table td {
  border: 1px solid var(--line-2); padding: 10px 14px; text-align: left; vertical-align: top;
}
.rich .rich-table th { background: var(--bg-soft); font-weight: 700; color: var(--ink); }

/* ---- Public (.rich): callout / warning ---- */
.rich .rich-callout {
  margin: 0 0 22px; padding: 14px 18px;
  border-left: 4px solid var(--brand); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--bg-soft);
}
.rich .rich-callout__t { font-weight: 800; color: var(--ink); margin-bottom: 4px; }
.rich .rich-callout__t:empty { display: none; }
.rich .rich-callout__m { color: var(--muted); }
.rich .rich-callout__m:empty { display: none; }

/* ---- Public (.rich): video + divider spacing ---- */
.rich .cb-video { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow-sm); background: #000; margin: 0 0 22px; }
.rich .cb-btnwrap { margin: 0 0 22px; }

@media (max-width: 560px) {
  .cb-tool__row { flex-direction: column; align-items: stretch; }
  .cb-tool__btn { width: 100%; }
  .cb-tool__select { max-width: 100%; }
}

/* =====================================================================
   FEATURE 1 — Full-page editor screen (product + post editors)
   These editors reuse the .modal markup but present as a full-screen page
   that replaces the dashboard (no dark backdrop, no centered card).
   The delete #confirm-modal keeps the normal modal styling above.
   ===================================================================== */
.modal.editor-page { position: fixed; inset: 0; z-index: 1100; display: none; background: var(--bg-soft); overflow-y: auto; }
.modal.editor-page.open { display: block; }
/* no dark backdrop / blur on the full-page editors */
.modal.editor-page > .modal__bg { display: none; }
.modal.editor-page > .modal__panel {
  position: relative; z-index: 1; background: transparent; box-shadow: none;
  width: 100%; max-width: none; max-height: none; overflow: visible;
  margin: 0; border-radius: 0; animation: fade .2s;
}

/* sticky top bar: back • title • save */
.editor-topbar {
  position: sticky; top: 0; z-index: 20; background: #fff;
  border-bottom: 1px solid var(--line); box-shadow: var(--shadow-sm);
  padding: 12px 22px; display: flex; align-items: center; gap: 14px;
}
.editor-topbar h3 { flex: 1; text-align: center; font-size: 1.15rem; margin: 0; }
.editor-back {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  padding: 9px 15px; border-radius: var(--radius-pill); font-weight: 600; font-size: .92rem;
  color: var(--brand); background: var(--bg-soft-2); transition: var(--t-fast);
}
.editor-back:hover { background: var(--line-2); }
.editor-back svg { width: 18px; height: 18px; }
.editor-topbar__save { flex: none; }

/* constrain the editor form content to a comfortable reading width */
.modal.editor-page .modal__body {
  max-width: 820px; margin: 0 auto; padding: 26px 22px 60px; overflow-x: visible;
}
.modal.editor-page .modal__foot {
  position: static; max-width: 820px; margin: 0 auto; width: 100%;
  border-top: 1px solid var(--line); background: transparent;
  padding: 18px 22px 60px;
}

@media (max-width: 560px) {
  .editor-topbar { padding: 10px 14px; gap: 8px; }
  .editor-topbar h3 { font-size: 1rem; }
  .editor-back span { display: none; }        /* compact: arrow only on tiny screens */
  .editor-back { padding: 9px 12px; }
  .modal.editor-page .modal__body { padding: 18px 14px 50px; }
  .modal.editor-page .modal__foot { padding: 16px 14px 50px; }
}

/* =====================================================================
   FEATURE 2 — Columns block (admin editing UI)
   ===================================================================== */
.cb-columns { display: grid; gap: 14px; padding: 4px 2px; }
.cb-columns__bar { display: flex; align-items: center; gap: 8px; }
.cb-columns__bar .lbl { font-weight: 700; font-size: .82rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.cb-columns__switch { display: inline-flex; gap: 6px; }
.cb-columns__switch button {
  min-width: 34px; padding: 5px 10px; border-radius: 8px; font-weight: 700; font-size: .86rem;
  border: 1.5px solid var(--line-2); background: #fff; color: var(--muted); transition: var(--t-fast);
}
.cb-columns__switch button.active { border-color: var(--brand); background: var(--bg-soft-2); color: var(--brand); }
.cb-columns__cols { display: grid; gap: 14px; }
.cb-columns__cols.n2 { grid-template-columns: 1fr 1fr; }
.cb-columns__cols.n3 { grid-template-columns: 1fr 1fr 1fr; }
.cb-columns__col {
  border: 1.5px dashed var(--line-2); border-radius: var(--radius-sm);
  background: #fff; padding: 4px 6px; min-width: 0;
}
.cb-columns__col .codex-editor { min-height: 60px; }
.cb-columns__col .ce-block__content, .cb-columns__col .ce-toolbar__content { max-width: 100%; }
@media (max-width: 700px) {
  .cb-columns__cols.n2, .cb-columns__cols.n3 { grid-template-columns: 1fr; }
}

/* Public (.rich): rendered columns */
.rich .rich-cols { display: grid; gap: 22px; margin: 0 0 22px; }
.rich .rich-cols-2 { grid-template-columns: repeat(2, 1fr); }
.rich .rich-cols-3 { grid-template-columns: repeat(3, 1fr); }
.rich .rich-col > *:first-child { margin-top: 0; }
.rich .rich-col > *:last-child { margin-bottom: 0; }
@media (max-width: 700px) {
  .rich .rich-cols-2, .rich .rich-cols-3 { grid-template-columns: 1fr; }
}

/* =====================================================================
   FEATURE 3 — Image width presets (Small / Medium / Full)
   Applies to both the public .rich figure and stays responsive.
   ===================================================================== */
.cb-img img, .rich figure.cb-img img { max-width: 100%; }
.rich figure.cb-img.img-full { max-width: 100%; }
.rich figure.cb-img.img-md { max-width: 560px; margin-left: auto; margin-right: auto; }
.rich figure.cb-img.img-sm { max-width: 320px; margin-left: auto; margin-right: auto; }
.rich figure.cb-img.img-md, .rich figure.cb-img.img-sm { text-align: center; }

/* =====================================================================
   CHECKOUT — bank transfer + WhatsApp confirmation flow (checkout.html)
   ===================================================================== */

/* step indicator */
.co-steps { list-style: none; padding-left: 0; display: flex; gap: 8px; margin-bottom: 30px; flex-wrap: wrap; }
.co-steps li {
  display: inline-flex; align-items: center; gap: 10px; flex: 1; min-width: 0;
  padding: 12px 16px; border: 1.5px solid var(--line-2); border-radius: var(--radius);
  background: #fff; color: var(--muted); font-weight: 700; font-size: .92rem;
  transition: var(--t-fast);
}
.co-steps li .n {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; background: var(--bg-soft-2); color: var(--muted);
  font-size: .84rem; font-weight: 800;
}
.co-steps li .t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.co-steps li.active { border-color: var(--brand); color: var(--ink); box-shadow: var(--shadow-sm); }
.co-steps li.active .n { background: var(--grad-brand); color: #fff; }
.co-steps li.done { border-color: var(--green); color: var(--green-dark); }
.co-steps li.done .n { background: var(--grad-green); color: #fff; }
.co-steps li.done .n::before { content: "✓"; }
.co-steps li.done .n { font-size: 0; }
.co-steps li.done .n::before { font-size: .9rem; }

/* layout */
.co { display: grid; grid-template-columns: 1.5fr 1fr; gap: 30px; align-items: start; }
.co__side { position: sticky; top: calc(var(--nav-h) + 16px); }

/* panels */
.co-panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(22px, 3.5vw, 36px); }
.co-panel__title { font-size: clamp(1.35rem, 3vw, 1.7rem); margin-bottom: 8px; }
.co-panel__sub { color: var(--muted); margin-bottom: 24px; font-size: .98rem; }
.co-panel__sub b { color: var(--ink); }
.co-panel__acts { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 26px; flex-wrap: wrap; }
.co-panel__acts.center { justify-content: center; margin-top: 16px; }

/* quantity stepper */
.co-qty { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.co-qty button {
  width: 44px; height: 44px; border-radius: 12px; border: 1.5px solid var(--line-2);
  font-size: 1.3rem; font-weight: 800; color: var(--brand); background: #fff; transition: var(--t-fast);
}
.co-qty button:hover { border-color: var(--brand); background: var(--bg-soft); }
.co-qty input {
  width: 74px; height: 44px; text-align: center; font-weight: 800; font-size: 1.05rem;
  border: 1.5px solid var(--line-2); border-radius: 12px; -moz-appearance: textfield;
}
.co-qty input::-webkit-outer-spin-button, .co-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.co-qty input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(47,128,201,.14); }
.co-qty__total { margin-left: auto; color: var(--muted); font-size: .95rem; }
.co-qty__total b { color: var(--ink); font-size: 1.1rem; }

/* bank details box */
.co-bank { border: 1.5px solid var(--line-2); border-radius: var(--radius); overflow: hidden; margin-bottom: 18px; }
.co-bank__head {
  display: flex; align-items: center; gap: 10px; padding: 14px 18px;
  background: var(--grad-ink); color: #fff; font-weight: 800; letter-spacing: .02em; font-size: .95rem;
}
.co-bank__head svg { width: 20px; height: 20px; color: var(--solar); }
.co-bank__row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 15px 18px; border-top: 1px solid var(--line);
}
.co-bank__row:first-of-type { border-top: 0; }
.co-bank__row > div { min-width: 0; }
.co-bank__row span { display: block; font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted-2); margin-bottom: 2px; }
.co-bank__row b { font-size: 1.05rem; color: var(--ink); word-break: break-word; }
.co-bank__row b.acct { font-size: 1.45rem; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.co-copy {
  flex: none; display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border-radius: var(--radius-pill); border: 1.5px solid var(--line-2);
  font-weight: 700; font-size: .86rem; color: var(--brand); background: #fff; transition: var(--t-fast);
}
.co-copy:hover { border-color: var(--brand); background: var(--bg-soft); }
.co-copy svg { width: 15px; height: 15px; }

/* helper note */
.co-hint {
  display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px;
  background: #fff9e8; border: 1px solid #f3dfa0; border-radius: var(--radius-sm);
}
.co-hint svg { flex: none; width: 20px; height: 20px; color: var(--solar-dark); margin-top: 2px; }
.co-hint p { font-size: .92rem; color: #6b5a1e; }
.co-hint b { color: #4a3d0f; }

/* step 3 */
.co-done { text-align: center; margin-bottom: 22px; }
.co-done__ic {
  width: 64px; height: 64px; border-radius: 50%; background: var(--grad-green); color: #fff;
  display: grid; place-items: center; margin: 0 auto 16px; box-shadow: var(--shadow-green);
}
.co-done__ic svg { width: 30px; height: 30px; }
.co-todo { list-style: none; padding-left: 0; counter-reset: todo; margin: 0 0 24px; display: grid; gap: 12px; }
.co-todo li {
  counter-increment: todo; position: relative; padding: 13px 16px 13px 52px;
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-size: .95rem; color: var(--text);
}
.co-todo li b { color: var(--ink); }
.co-todo li::before {
  content: counter(todo); position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; border-radius: 50%; background: var(--grad-brand); color: #fff;
  display: grid; place-items: center; font-size: .8rem; font-weight: 800;
}
.co-fineprint { margin-top: 20px; text-align: center; color: var(--muted); font-size: .88rem; }
.co-fineprint a { color: var(--brand); font-weight: 700; }

/* order summary sidebar */
.co-summary { padding: 22px; }
.co-summary h4 { font-size: 1.05rem; margin-bottom: 16px; }
.co-summary__prod { display: flex; gap: 14px; align-items: center; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.co-summary__prod img { flex: none; width: 74px; height: 74px; object-fit: cover; border-radius: 12px; background: var(--bg-soft-2); }
.co-summary__prod b { display: block; color: var(--ink); font-size: .98rem; line-height: 1.3; }
.co-summary__prod span { font-size: .8rem; color: var(--brand); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.co-summary__rows { margin: 14px 0; display: grid; gap: 10px; }
.co-summary__rows li { display: flex; justify-content: space-between; gap: 10px; font-size: .94rem; color: var(--muted); }
.co-summary__rows li b { color: var(--ink); }
.co-summary__rows li.total { padding-top: 12px; border-top: 1px solid var(--line); font-weight: 700; color: var(--ink); }
.co-summary__rows li.total b { font-size: 1.25rem; }
.co-summary__note { display: flex; gap: 9px; align-items: flex-start; font-size: .84rem; color: var(--muted); padding-top: 4px; }
.co-summary__note svg { flex: none; width: 17px; height: 17px; color: var(--green); margin-top: 2px; }

@media (max-width: 900px) {
  .co { grid-template-columns: 1fr; }
  .co__side { position: static; }
}
@media (max-width: 560px) {
  .co-steps { gap: 6px; }
  .co-steps li { padding: 10px 10px; justify-content: center; }
  .co-steps li:not(.active) .t { display: none; }   /* compact: number-only chips for inactive steps */
  .co-panel__acts { flex-direction: column-reverse; align-items: stretch; }
  .co-panel__acts .btn { width: 100%; }
  .co-bank__row { flex-wrap: wrap; }
  .co-qty__total { margin-left: 0; width: 100%; }
}

/* =====================================================================
   SHOPPING CART — navbar icon, bottom-bar badge, cart page (cart.html)
   ===================================================================== */

/* navbar cart icon + live badge */
.nav-cart { position: relative; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: var(--ink); transition: var(--t-fast); }
.nav-cart:hover { background: var(--bg-soft); color: var(--brand); }
.nav.transparent .nav-cart { color: #fff; }
.nav.transparent .nav-cart:hover { background: rgba(255,255,255,.12); }
.nav-cart svg { width: 23px; height: 23px; }
.nav-cart__n {
  position: absolute; top: 1px; right: -2px; min-width: 18px; height: 18px;
  border-radius: 999px; background: var(--green); color: #fff;
  font-size: .64rem; font-weight: 800; display: grid; place-items: center;
  padding: 0 5px; line-height: 1; box-shadow: 0 0 0 2px #fff;
}
.nav.transparent .nav-cart__n { box-shadow: none; }

/* mobile bottom-bar badge */
.botbar__badge {
  position: absolute; top: 3px; right: 50%; transform: translateX(17px);
  min-width: 16px; height: 16px; border-radius: 999px; background: var(--green); color: #fff;
  font-size: .6rem; font-weight: 800; display: grid; place-items: center; padding: 0 4px; line-height: 1;
}

/* cart page */
.cart-n { color: var(--muted); font-weight: 600; font-size: 1rem; }
.cart-list { border-top: 1px solid var(--line); }
.cart-item { display: flex; gap: 16px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line); }
.cart-item img { width: 86px; height: 86px; object-fit: cover; border-radius: 12px; background: var(--bg-soft-2); flex: none; }
.cart-item__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cart-item__info .c { font-size: .72rem; font-weight: 700; color: var(--brand); text-transform: uppercase; letter-spacing: .05em; }
.cart-item__info .t { font-weight: 700; color: var(--ink); font-size: 1.02rem; line-height: 1.3; }
.cart-item__info .t:hover { color: var(--brand); }
.cart-item__info .u { font-size: .84rem; color: var(--muted); }
.cart-item__info .co-qty { margin-top: 8px; }
.co-qty.sm button { width: 34px; height: 34px; border-radius: 9px; font-size: 1.05rem; }
.co-qty.sm input { width: 56px; height: 34px; border-radius: 9px; font-size: .95rem; }
.cart-item__right { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; flex: none; }
.cart-item__right b { font-size: 1.08rem; color: var(--ink); }
.cart-item__rm { display: inline-flex; align-items: center; gap: 6px; color: #b3261e; font-weight: 700; font-size: .82rem; padding: 6px 10px; border-radius: 8px; transition: var(--t-fast); }
.cart-item__rm:hover { background: #fdf0ef; }
.cart-item__rm svg { width: 14px; height: 14px; }
.cart-acts { display: flex; justify-content: space-between; gap: 12px; margin-top: 20px; flex-wrap: wrap; }

/* checkout sidebar: multi-item list */
.co-summary__list { display: grid; }
.co-summary__list .co-summary__prod { padding: 12px 0 12px; border-bottom: 1px solid var(--line); align-items: center; }
.co-summary__list .co-summary__prod img { width: 54px; height: 54px; border-radius: 10px; }
.co-summary__list .co-summary__prod > div { flex: 1; min-width: 0; }
.co-summary__list .co-summary__prod b { font-size: .92rem; }
.co-summary__list .co-summary__prod span { font-size: .8rem; color: var(--muted); text-transform: none; letter-spacing: 0; font-weight: 600; }
.co-summary__list .co-summary__prod em { font-style: normal; font-weight: 800; color: var(--ink); font-size: .92rem; flex: none; }
.co-summary__edit { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: .88rem; color: var(--brand); margin-bottom: 10px; }
.co-summary__edit:hover { text-decoration: underline; }
.co-summary__edit svg { width: 15px; height: 15px; }

@media (max-width: 560px) {
  .cart-item { flex-wrap: wrap; }
  .cart-item img { width: 72px; height: 72px; }
  .cart-item__right { flex-direction: row; width: 100%; justify-content: space-between; align-items: center; }
}

/* =====================================================================
   CATEGORY LANDING PAGES — category.html (+ admin Categories tab)
   Editable categories: hero banner, offer strip, best sellers, buying
   guide, FAQ accordion and the admin featured-product picker.
   ===================================================================== */

/* price anchor pill in the category hero ("From ₦185,000") */
.cat-from {
  display: inline-flex; align-items: baseline; gap: 8px; margin-top: 20px;
  padding: 10px 20px; border-radius: var(--radius-pill);
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(6px); color: #d2deec; font-size: .92rem; font-weight: 600;
}
.cat-from b { color: #fff; font-size: 1.35rem; font-weight: 800; letter-spacing: -.01em; }

/* offer / promo strip under the hero */
.offer-strip { background: var(--grad-solar); color: #3a2e00; }
.offer-strip__inner {
  max-width: var(--container); margin-inline: auto; padding: 14px 22px;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  font-weight: 800; font-size: 1rem; text-align: center; flex-wrap: wrap;
}
.offer-strip__inner svg { width: 22px; height: 22px; flex: none; }

/* FAQ accordion (public) */
.faq { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; margin-bottom: 12px; overflow: hidden; }
.faq summary {
  list-style: none; cursor: pointer; padding: 18px 20px; display: flex; align-items: center;
  justify-content: space-between; gap: 14px; font-weight: 700; color: var(--ink); transition: var(--t-fast);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--brand); }
.faq summary .faq__ic {
  flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--bg-soft-2);
  color: var(--brand); display: grid; place-items: center; transition: transform var(--t);
}
.faq summary .faq__ic svg { width: 15px; height: 15px; }
.faq[open] summary .faq__ic { transform: rotate(45deg); background: var(--grad-brand); color: #fff; }
.faq__a { padding: 0 20px 18px; color: var(--muted); font-size: .98rem; line-height: 1.7; }

/* category tiles can show the banner image instead of an icon */
.cat-tile__ic.cat-tile__img { overflow: hidden; padding: 0; background: var(--bg-soft-2); }
.cat-tile__ic.cat-tile__img img { width: 100%; height: 100%; object-fit: cover; }

/* "Browse other categories" chip links */
a.chip { display: inline-flex; align-items: center; gap: 7px; }

/* ---- Admin: featured-product picker (category editor) ---- */
.fp-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 620px) { .fp-list { grid-template-columns: 1fr; } }
.fp-list .fp-note { grid-column: 1 / -1; color: var(--muted-2); font-size: .9rem; font-style: italic; }
.fp-item {
  display: flex; align-items: center; gap: 11px; padding: 10px 12px; cursor: pointer;
  border: 1.5px solid var(--line-2); border-radius: var(--radius-sm); background: #fff; transition: var(--t-fast);
}
.fp-item:hover { border-color: var(--brand); }
.fp-item.on { border-color: var(--brand); background: var(--bg-soft-2); box-shadow: 0 0 0 3px rgba(47,128,201,.12); }
.fp-item input { accent-color: var(--brand); width: 17px; height: 17px; flex: none; }
.fp-item img { width: 42px; height: 42px; border-radius: 9px; object-fit: cover; background: var(--bg-soft-2); flex: none; }
.fp-item .fp-txt { min-width: 0; line-height: 1.3; }
.fp-item .fp-txt b { display: block; font-size: .9rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-item .fp-txt span { font-size: .78rem; color: var(--muted); }

/* slug preview under the slug input */
.slug-preview { font-size: .82rem; color: var(--muted-2); margin-top: 6px; word-break: break-all; }
.slug-preview b { color: var(--brand); font-weight: 700; }

/* ---- Navbar: "Products" categories dropdown (desktop) ---- */
.nav__links li.has-dd { position: relative; }
.nav__links li.has-dd > a::after {
  content: ""; display: inline-block; margin-left: 7px; width: 7px; height: 7px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px); opacity: .7;
}
.nav .nav__links .nav-dd__panel {
  position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%) translateY(8px);
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow-lg); padding: 8px; min-width: 230px;
  opacity: 0; visibility: hidden; transition: opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast);
  z-index: 1002;
}
/* invisible bridge so the pointer can travel from the link into the panel */
.nav .nav__links .nav-dd__panel::before { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }
.nav__links li.has-dd:hover > .nav-dd__panel,
.nav__links li.has-dd:focus-within > .nav-dd__panel {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.nav .nav__links .nav-dd__panel a {
  display: block; color: var(--text); font-weight: 600; font-size: .92rem;
  padding: 10px 14px; border-radius: 9px;
}
.nav .nav__links .nav-dd__panel a:first-child { color: var(--brand); font-weight: 700; border-bottom: 1px solid var(--line); border-radius: 9px 9px 0 0; margin-bottom: 4px; }
.nav .nav__links .nav-dd__panel a:hover { background: var(--bg-soft); color: var(--brand); }

/* ---- Mobile drawer: collapsible category tree under "Products" ------
   Folded shut by default. The previous version dumped every category
   into the drawer expanded, which pushed the rest of the menu below a
   drawer that could not scroll. -------------------------------------- */
.drawer__cats {
  display: flex; flex-direction: column; gap: 0;
  margin: 0 0 4px 18px; padding-left: 12px; border-left: 2px solid var(--line);
}
.drawer__cats a { padding: 10px 12px; border-radius: 10px; font-weight: 600; font-size: .95rem; color: var(--muted); transition: var(--t-fast); }
.drawer__cats a:hover { background: var(--bg-soft); color: var(--brand); }
.dcat__all { color: var(--brand) !important; }

.dcat__row { display: flex; align-items: center; gap: 4px; }
.dcat__row .dcat__link,
.dcat__row > a { flex: 1 1 auto; min-width: 0; }
/* A finger-sized target, kept clear of the link it sits beside. */
.dcat__toggle {
  flex: 0 0 auto; width: 44px; height: 44px; display: grid; place-items: center;
  border: 0; background: transparent; color: var(--muted);
  border-radius: 10px; cursor: pointer;
}
.dcat__toggle:hover { background: var(--bg-soft); color: var(--brand); }
.dcat__caret { width: 20px; height: 20px; transition: transform var(--t-fast); }
.dcat__toggle.is-open .dcat__caret { transform: rotate(180deg); }
.dcat__kids { display: flex; flex-direction: column; }

/* =====================================================================
   Mr. Mechanic additions — part finder, retail/wholesale paths, brand
   cards and the order block. Built on the tokens above so they inherit
   the same palette as everything else.
   ===================================================================== */

/* ----- part finder (sits under the hero) --------------------------- */
.finder {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 24px;
  margin-top: -60px;
  position: relative;
  z-index: 5;
}
.finder h3 { margin: 0 0 16px; font-size: 1.05rem; }
.finder__row { display: grid; gap: 12px; }
@media (min-width: 760px) { .finder__row { grid-template-columns: 1fr 1fr 1fr auto; align-items: end; } }
.finder__note { font-size: .82rem; color: var(--muted); margin: 12px 0 0; }
.finder .btn { width: 100%; }
@media (min-width: 760px) { .finder .btn { width: auto; } }

/* ----- shared form field ------------------------------------------- */
.field label {
  display: block; font-size: .76rem; font-weight: 700; color: var(--muted);
  margin-bottom: 6px; text-transform: uppercase; letter-spacing: .05em;
}
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 12px 14px;
  border-radius: var(--radius-sm); border: 1px solid var(--line-2);
  background: var(--white); color: var(--text); font: inherit; font-size: .97rem;
}
.field textarea { min-height: 96px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand);
}

/* ----- retail vs wholesale ----------------------------------------- */
.path {
  border-radius: var(--radius-lg); padding: 32px 26px; color: #fff;
  display: flex; flex-direction: column;
}
.path--retail { background: var(--grad-green); }          /* navy */
.path--whole  { background: linear-gradient(150deg, #3d2568, var(--solar)); }
.path h3 { font-size: 1.35rem; margin: 0 0 8px; color: #fff; }
.path > p { opacity: .92; margin: 0; }
.path .btn { margin-top: 24px; align-self: flex-start; }
.checklist--light li { color: rgba(255,255,255,.95); }
.checklist--light li svg { color: #fff; flex: 0 0 18px; }

/* ----- brand cards -------------------------------------------------- */
.brandcard { text-align: center; padding: 22px 16px; }
.brandcard b { display: block; font-size: 1rem; color: var(--brand); }
.brandcard span { display: block; font-size: .8rem; color: var(--muted); margin-top: 4px; }

/* ----- order block inside the CTA band ------------------------------ */
.orderform { margin-top: 26px; display: grid; gap: 14px; text-align: left; }
.orderform__row { display: grid; gap: 14px; }
@media (min-width: 620px) { .orderform__row { grid-template-columns: 1fr 1fr; } }
.orderform .field label { color: rgba(255,255,255,.78); }
.orderform .field input, .orderform .field select, .orderform .field textarea {
  background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.26); color: #fff;
}
.orderform .field input::placeholder, .orderform .field textarea::placeholder { color: rgba(255,255,255,.55); }
.orderform .field select option { color: var(--text); }
.orderform .btn { width: 100%; }
.formnote { font-size: .82rem; color: rgba(255,255,255,.7); margin: 4px 0 0; text-align: center; }

/* =====================================================================
   Header + hero banner — client revision, Aug 2026
   ---------------------------------------------------------------------
   The supplied logo sets "PLATINUM AUTO PARTS" in white, so it only reads
   on a dark ground. The bar is therefore navy in every state (it used to
   go transparent over the hero and white on scroll), finished with the
   red rule from the approved homepage.
   ===================================================================== */

.nav,
.nav.solid,
.nav.transparent {
  background: var(--brand-dark);
  border-bottom: 3px solid var(--red);
  box-shadow: 0 2px 18px rgba(8, 12, 46, .28);
  backdrop-filter: none;
}

/* The logo is a transparent PNG now — no white plate, no rounding. */
.nav .brand img,
.nav.transparent .brand img,
.nav.solid .brand img {
  height: 46px;
  width: auto;
  background: none;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}
/* Must repeat the grouped selector: `.nav.transparent .brand img` above
   outranks a bare `.nav .brand img`, so the shrink would never apply. */
@media (max-width: 600px) {
  .nav .brand img,
  .nav.transparent .brand img,
  .nav.solid .brand img { height: 36px; }
}

/* Links sit on navy in every state now. */
.nav .nav__links a,
.nav.solid .nav__links a,
.nav.transparent .nav__links a { color: rgba(255, 255, 255, .88); }
.nav .nav__links a:hover,
.nav.solid .nav__links a:hover,
.nav.transparent .nav__links a:hover { color: #fff; background: rgba(255, 255, 255, .12); }
.nav .nav__links a.active,
.nav.solid .nav__links a.active,
.nav.transparent .nav__links a.active { color: #fff; }
.nav .nav__toggle,
.nav.solid .nav__toggle,
.nav.transparent .nav__toggle { color: #fff; }
.nav .nav-cart,
.nav.solid .nav-cart,
.nav.transparent .nav-cart { color: #fff; }
.nav .nav-cart:hover,
.nav.solid .nav-cart:hover,
.nav.transparent .nav-cart:hover { background: rgba(255, 255, 255, .12); }

/* ----- hero: the artwork is the hero ------------------------------- */
.hero--banner {
  min-height: 0;
  display: block;
  padding-top: var(--nav-h);
  background: var(--brand-dark);
  color: inherit;
  overflow: hidden;
}
.hero--banner .hero__banner { display: block; text-decoration: none; }
.hero--banner picture { display: block; }
/* Edge to edge, full bleed. No height cap and no object-fit: capping the
   height made the artwork letterbox with bars down either side. The banner
   is never cropped either — the brand strip and the CTA sit right on the
   bottom edge, so `cover` would cut them off. It simply runs at its own
   aspect ratio, which on a wide screen means a tall hero. */
.hero--banner img {
  display: block;
  width: 100%;
  height: auto;
  margin-inline: auto;
}

/* Screen readers still get a real headline even though the art carries the text. */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ----- photo-identification callout --------------------------------
   Lives in the order block rather than the top of the page: "you do not
   need the part number" answers a doubt that only shows up once someone
   is actually ordering. Sits on the dark CTA band. */
.photo-note {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  text-align: left;
  margin: 22px auto 0;
  max-width: 620px;
  padding: 16px 18px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .18);
  border-left: 3px solid var(--red);
}
.photo-note svg {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  color: var(--red-light);
}
.photo-note p {
  margin: 0;
  font-size: .95rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, .82);
}
.photo-note strong { color: #fff; display: block; margin-bottom: 2px; }

/* ----- pack selector: one piece, or a full carton -------------------- */
.packs { display: grid; gap: 12px; margin: 18px 0 6px; }
@media (min-width: 520px) { .packs { grid-template-columns: 1fr 1fr; } }
.pack {
  position: relative;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  background: var(--white);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 3px;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.pack:hover { border-color: var(--line-2); }
.pack input { position: absolute; opacity: 0; pointer-events: none; }
.pack__k { font-size: .7rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.pack__p { font-size: 1.3rem; font-weight: 800; color: var(--brand); line-height: 1.15; }
.pack__n { font-size: .82rem; color: var(--muted); }
.pack.is-on { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(20, 27, 94, .10); }
.pack--whole .pack__p { color: var(--solar); }
.pack--whole.is-on { border-color: var(--solar); box-shadow: 0 0 0 3px rgba(95, 63, 158, .12); }

/* carton line under the price on a product card */
.pcard__price small { display: block; font-size: .74rem; font-weight: 600; color: var(--solar); margin-top: 2px; }

/* =====================================================================
   Hero carousel — four client banners, crossfading.
   Slides are stacked and faded rather than slid, so the hero never
   changes height and nothing below it shifts while it plays.
   ===================================================================== */
.hero-carousel { position: relative; width: 100%; overflow: hidden; background: var(--brand-dark); }
.hero-carousel__viewport { position: relative; width: 100%; aspect-ratio: 1672 / 941; }

.hero-slide {
  position: absolute; inset: 0;
  display: block; text-decoration: none;
  opacity: 0; pointer-events: none;
  transition: opacity .9s ease;
}
.hero-slide.is-active { opacity: 1; pointer-events: auto; }
.hero-slide picture { display: block; width: 100%; height: 100%; }
.hero-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* arrows — quiet until you interact with the hero */
.hero-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: rgba(12, 17, 64, .55); color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 3;
  opacity: 0; transition: opacity .25s ease, background .2s ease;
}
.hero-carousel:hover .hero-arrow,
.hero-arrow:focus-visible { opacity: 1; }
.hero-arrow:hover { background: var(--red); }
.hero-arrow svg { width: 22px; height: 22px; }
.hero-arrow--prev { left: 16px; }
.hero-arrow--next { right: 16px; }
@media (max-width: 700px) { .hero-arrow { display: none; } }  /* swipe instead */

/* dots */
.hero-dots {
  position: absolute; left: 0; right: 0; bottom: 14px;
  display: flex; justify-content: center; gap: 9px; z-index: 3;
}
.hero-dot {
  width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .45); cursor: pointer;
  transition: background .2s ease, width .2s ease;
}
.hero-dot:hover { background: rgba(255, 255, 255, .8); }
.hero-dot.is-on { background: var(--red); width: 26px; border-radius: 5px; }
@media (max-width: 700px) { .hero-dots { bottom: 8px; } .hero-dot { width: 8px; height: 8px; } }

/* Someone who has asked for less motion gets a still hero, not a fade loop. */
@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none; }
}

/* =====================================================================
   Fixes — Aug 2026
   ===================================================================== */

/* The navy-header rule above colours every .nav__links a white, and the
   dropdown panel lives inside .nav__links on a WHITE background — so the
   category links were rendering white-on-white. Scope them back to dark. */
.nav .nav-dd__panel a,
.nav.solid .nav-dd__panel a,
.nav.transparent .nav-dd__panel a {
  color: var(--text);
  background: transparent;
}
.nav .nav-dd__panel a:hover,
.nav.solid .nav-dd__panel a:hover,
.nav.transparent .nav-dd__panel a:hover {
  color: var(--brand);
  background: var(--bg-soft);
}

/* Footer logo carried its own dark plate. The mark is transparent now, so
   it should sit straight on the footer like it does in the header. */
.footer__brand img {
  background: none;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  height: 72px;
}

/* Quantity stepper on the product page — reuses the cart's .co-qty control */
.pd__qty { display: flex; align-items: center; gap: 14px; margin: 18px 0 4px; }
.pd__qty-label { font-size: .74rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }

/* ----- subcategory cards + two-level nav ---------------------------- */
.subcats { margin-bottom: 46px; }
.subcats__grid { display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .subcats__grid { grid-template-columns: repeat(4, 1fr); } }
.subcat {
  display: flex; flex-direction: column; text-decoration: none;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}
.subcat:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--line-2); }
.subcat__img { display: block; aspect-ratio: 4/3; background: var(--bg-soft); overflow: hidden; }
.subcat__img img { width: 100%; height: 100%; object-fit: cover; }
.subcat__b { padding: 12px 14px 14px; display: block; }
.subcat__b strong { display: block; font-size: .96rem; color: var(--text); line-height: 1.3; }
.subcat__b small { display: block; font-size: .78rem; color: var(--muted); margin-top: 3px; }

/* nav dropdown: parents bold, children indented under them */
.nav-dd__panel .nav-dd__top { font-weight: 700; }
.nav-dd__kids { display: block; }
.nav-dd__panel .nav-dd__kid { padding-left: 26px; font-size: .88rem; opacity: .9; position: relative; }
.nav-dd__panel .nav-dd__kid::before {
  content: ""; position: absolute; left: 14px; top: 50%; width: 6px; height: 1px; background: var(--line-2);
}
.drawer__cats .nav-dd__kid { padding-left: 34px; font-size: .9rem; }

/* ----- category view toggle (grid / list) --------------------------- */
.viewtoggle {
  display: flex; gap: 6px; justify-content: flex-end;
  margin: -6px 0 18px;
}
.viewtoggle__btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: var(--radius-pill);
  border: 1px solid var(--line); background: var(--white);
  color: var(--muted); font: inherit; font-size: .84rem; font-weight: 700;
  cursor: pointer; transition: all var(--t-fast);
}
.viewtoggle__btn svg { width: 16px; height: 16px; }
.viewtoggle__btn:hover { border-color: var(--line-2); color: var(--text); }
.viewtoggle__btn.is-on { background: var(--brand); border-color: var(--brand); color: #fff; }

/* Grid view — two-up on a phone instead of one long column */
.cats-view--grid { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) { .cats-view--grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .cats-view--grid { grid-template-columns: repeat(4, 1fr); } }

/* List view — compact rows, thumbnail beside the name */
.cats-view--list { grid-template-columns: 1fr; gap: 10px; }
.cats-view--list .cat-tile {
  display: grid; grid-template-columns: 56px 1fr auto; align-items: center;
  gap: 14px; padding: 10px 14px; text-align: left; min-height: 0;
}
.cats-view--list .cat-tile__ic { width: 56px; height: 56px; margin: 0; border-radius: var(--radius-sm); }
.cats-view--list .cat-tile__ic img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-sm); }
.cats-view--list .cat-tile h3 { margin: 0; font-size: .98rem; }
.cats-view--list .cat-tile span { grid-column: 3; font-size: .8rem; color: var(--muted); white-space: nowrap; }

/* ----- PWA install card ---------------------------------------------
   The old version was a pill at bottom-left, z-index 70. The mobile
   bottom nav is fixed at z-index 950 and 62px tall, so on every phone
   the install offer sat behind it, invisible. This sits above the nav,
   spans the width, and reads as an actual offer.
   -------------------------------------------------------------------- */
.pwa-card {
  position: fixed; z-index: 960;
  left: 12px; right: 12px; bottom: 12px;
  display: flex; align-items: center; gap: 13px; flex-wrap: wrap;
  padding: 14px 16px; border-radius: 16px;
  background: #fff; border: 1px solid var(--line);
  box-shadow: 0 14px 40px rgba(12, 22, 38, .22);
  transform: translateY(140%); opacity: 0;
  transition: transform .28s var(--ease), opacity .28s var(--ease);
}
.pwa-card.is-up { transform: none; opacity: 1; }
.pwa-card__icon { width: 46px; height: 46px; border-radius: 11px; flex: 0 0 auto; }
.pwa-card__text { flex: 1 1 190px; min-width: 0; }
.pwa-card__text b { display: block; font-size: .95rem; color: var(--ink); }
.pwa-card__text span { display: block; font-size: .82rem; line-height: 1.55; color: var(--muted); margin-top: 2px; }
.pwa-card__acts { display: flex; gap: 8px; flex: 0 0 auto; }
.pwa-share { width: 15px; height: 15px; vertical-align: -3px; }

.pwa-btn { border: 0; border-radius: var(--radius-pill); padding: 10px 18px;
           font: inherit; font-size: .86rem; font-weight: 700; cursor: pointer; }
.pwa-btn--go { background: var(--grad-brand); color: #fff; box-shadow: var(--shadow-brand); }
.pwa-btn--ghost { background: var(--bg-soft-2); color: var(--muted); }

/* Clear of the bottom navigation, and of its safe-area padding. */
@media (max-width: 860px) {
  .pwa-card { bottom: calc(62px + env(safe-area-inset-bottom, 0px) + 10px); }
  .pwa-card__acts { width: 100%; }
  .pwa-btn { flex: 1; }
  /* One floating thing at a time in that corner. */
  body.has-install .wa-float { display: none; }
}

/* ----- per-product QR code ------------------------------------------ */
.pd-qr {
  display: grid; grid-template-columns: 118px 1fr; gap: 18px; align-items: center;
  margin-top: 22px; padding: 18px;
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius-lg);
}
.pd-qr__code { width: 118px; height: 118px; background: #fff; border-radius: var(--radius-sm); padding: 6px; }
.pd-qr__code svg { display: block; width: 100%; height: 100%; }
.pd-qr__b strong { display: block; font-size: 1rem; color: var(--text); margin-bottom: 5px; }
.pd-qr__b p { font-size: .86rem; color: var(--muted); line-height: 1.55; margin-bottom: 12px; }
@media (max-width: 520px) {
  .pd-qr { grid-template-columns: 1fr; justify-items: center; text-align: center; }
}

/* =====================================================================
   Admin — quantity discount editor rows
   ===================================================================== */
.tier-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 10px; margin-bottom: 8px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--bg-soft);
}
.tier-row__lbl { font-size: .82rem; color: var(--muted); white-space: nowrap; }
.tier-row .input { width: 88px; min-height: 40px; padding: 8px 10px; }
.tier-row__x {
  margin-left: auto; width: 32px; height: 32px; flex: 0 0 auto;
  border: 1px solid var(--line-2); border-radius: 50%;
  background: var(--white); color: var(--muted);
  font-size: 1.1rem; line-height: 1; cursor: pointer;
}
.tier-row__x:hover { border-color: var(--red); color: var(--red); }

/* =====================================================================
   Admin — Orders table
   ===================================================================== */
.ord-filters { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.ord-filters .field { margin: 0; }
.ord-filters .input { min-height: 42px; }

.ord-stats { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); margin-bottom: 16px; }
@media (min-width: 720px) { .ord-stats { grid-template-columns: repeat(4, 1fr); } }
.ord-stat {
  background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 12px 14px;
}
.ord-stat b { display: block; font-size: 1.15rem; color: var(--brand); }
.ord-stat span { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }

.ord-tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.ord-table { width: 100%; border-collapse: collapse; font-size: .88rem; min-width: 720px; }
.ord-table th {
  text-align: left; padding: 12px 14px; background: var(--bg-soft);
  font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); border-bottom: 1px solid var(--line); white-space: nowrap;
}
.ord-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.ord-table tr:last-child td { border-bottom: 0; }
.ord-table tr:hover td { background: var(--bg-soft); }
.ta-r { text-align: right; }
.ord-sub { display: block; font-size: .76rem; color: var(--muted); }
.ord-empty { text-align: center; color: var(--muted); padding: 34px 14px !important; }

.ord-tag {
  display: inline-block; padding: 3px 10px; border-radius: var(--radius-pill);
  font-size: .72rem; font-weight: 700; background: var(--bg-soft-2); color: var(--muted);
  white-space: nowrap;
}
.ord-tag--ok { background: #e7f6ee; color: #0e6d3d; }
.ord-tag--warn { background: #fff5e0; color: #8a5b00; }
.ord-tag--bad { background: #fdeceb; color: #b4160f; }

.ord-pager { display: flex; align-items: center; gap: 14px; justify-content: center; padding: 18px 0; flex-wrap: wrap; }
.ord-pager span { font-size: .84rem; color: var(--muted); }
.ord-pager .btn[disabled] { opacity: .45; cursor: not-allowed; }

/* order detail overlay */
.ord-overlay {
  position: fixed; inset: 0; z-index: 200; background: rgba(12, 17, 64, .55);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 24px 16px; overflow-y: auto; backdrop-filter: blur(2px);
}
.ord-detail {
  background: var(--white); border-radius: var(--radius-lg); width: 100%; max-width: 640px;
  padding: 22px; box-shadow: var(--shadow-lg);
}
.ord-detail__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.ord-detail__head h3 { margin: 0 0 6px; font-size: 1.2rem; }
.ord-detail__grid { display: grid; gap: 16px; margin-bottom: 18px; }
@media (min-width: 560px) { .ord-detail__grid { grid-template-columns: 1fr 1fr; } }
.ord-detail__grid h4 { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 0 0 6px; }
.ord-detail__grid p { font-size: .87rem; line-height: 1.6; margin: 0; }
.ord-items { width: 100%; border-collapse: collapse; font-size: .86rem; }
.ord-items th { text-align: left; padding: 8px 10px; background: var(--bg-soft); font-size: .7rem; text-transform: uppercase; color: var(--muted); }
.ord-items td { padding: 9px 10px; border-bottom: 1px solid var(--line); }
.ord-items tfoot td { border-bottom: 0; padding-top: 12px; }
.ord-detail__acts { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 18px; }
.ord-detail__lbl { font-size: .78rem; color: var(--muted); }
.ord-detail__acts .input { min-height: 42px; width: auto; }

.switch-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: .9rem; cursor: pointer; }
.switch-row input { width: 18px; height: 18px; }

/* ---- Admin: homepage banner rows ---- */
.hero-row {
  display: flex; gap: 14px; align-items: flex-start;
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px; margin-bottom: 12px; background: var(--white);
}
.hero-row__thumb {
  flex: 0 0 140px; aspect-ratio: 16/7; border-radius: var(--radius-sm);
  background: var(--bg-soft); overflow: hidden; display: grid; place-items: center;
  font-size: .74rem; color: var(--muted-2);
}
.hero-row__thumb img { width: 100%; height: 100%; object-fit: cover; }
.hero-row__fields { flex: 1; min-width: 0; }
.hero-row__fields .hint { display: block; margin: 8px 0 4px; font-size: .72rem; }
.hero-row__fields .hint:first-child { margin-top: 0; }
.hero-row__pick { display: flex; gap: 8px; }
.hero-row__pick .input { flex: 1; min-width: 0; }
.hero-row__x { flex: 0 0 auto; }
@media (max-width: 640px) { .hero-row { flex-direction: column; } .hero-row__thumb { flex: none; width: 100%; } }

/* ----- "Install app" row in the mobile drawer ------------------------
   Permanent, because Chrome only fires its install event after an
   engagement heuristic and suppresses it for months after a dismissal.
   Waiting for that event means most visitors never learn the app exists.
   -------------------------------------------------------------------- */
.drawer__install {
  display: flex !important; align-items: center; gap: 10px;
  margin-top: 6px; color: var(--brand) !important;
  border: 1px dashed var(--line); border-radius: 12px;
}
.drawer__install svg { width: 19px; height: 19px; flex: 0 0 auto; }
.drawer__install:hover { background: var(--bg-soft); border-style: solid; }