/* RealityCharting — corporate refresh
   Palette: deep navy, professional blue, slate neutrals, gold accent */
:root {
  --navy: #0d2a4d;
  --navy-700: #163a64;
  --blue: #1c64b4;
  --blue-600: #1554a0;
  --blue-50: #eef4fb;
  --gold: #c8902f;
  --gold-soft: #f3e7cf;
  --ink: #1b2733;
  --slate: #5a6b7b;
  --line: #e3e8ee;
  --bg: #ffffff;
  --bg-soft: #f5f8fc;
  --radius: 12px;
  --shadow-sm: 0 1px 3px rgba(13,42,77,.08), 0 1px 2px rgba(13,42,77,.06);
  --shadow-md: 0 8px 28px rgba(13,42,77,.12);
  --maxw: 1160px;
  --font: "Segoe UI", "Helvetica Neue", Arial, system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  line-height: 1.65;
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { color: var(--navy); line-height: 1.2; margin: 0 0 .5em; font-weight: 700; }
h1 { font-size: clamp(2.1rem, 4.5vw, 3.2rem); letter-spacing: -.01em; }
h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); }
h3 { font-size: 1.28rem; }
p { margin: 0 0 1rem; }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-600); }
img { max-width: 100%; height: auto; display: block; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.eyebrow {
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .78rem;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: .6rem;
}
.lead { font-size: 1.12rem; color: var(--slate); }
.center { text-align: center; }
.muted { color: var(--slate); }

/* Buttons */
.btn {
  display: inline-block;
  padding: .8rem 1.6rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: .96rem;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all .18s ease;
  letter-spacing: .01em;
}
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-600); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-gold { background: var(--gold); color: #2a1d05; }
.btn-gold:hover { background: #b67f24; color: #2a1d05; transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn-ghost:hover { background: rgba(255,255,255,.12); color: #fff; }
.btn-outline { background: transparent; color: var(--blue); border-color: var(--blue); }
.btn-outline:hover { background: var(--blue); color: #fff; }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--navy);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; justify-content: space-between; height: 74px; position: relative; }
.brand { display: flex; align-items: center; gap: .6rem; font-weight: 800; color: var(--navy); font-size: 1.15rem; letter-spacing: -.01em; }
.brand .mark {
  width: 34px; height: 34px; border-radius: 8px;
  background: linear-gradient(135deg, var(--navy), var(--blue));
  display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 1rem;
}
.brand .reg { color: var(--gold); }
.brand-logo { height: 42px; width: auto; display: block; }
.footer-logo { height: 44px; width: auto; display: block; }
.brand { order: 1; margin-right: 2rem; }
.nav-links { display: flex; gap: 1.6rem; align-items: center; list-style: none; margin: 0; padding: 0; }
/* nowrap: translated labels ("À propos", "Sobre nós") must not break onto two lines;
   the breakpoints below drop items instead. */
.nav-links a { color: var(--bg); font-weight: 500; font-size: .96rem; white-space: nowrap; }
.nav-links a:hover, .nav-links a.active { color: var(--blue); }
.nav-auth { display: flex; flex-direction: column; gap: .1rem; line-height: 1.3; }
.nav-auth a { display: block; font-size: .88rem; white-space: nowrap; }
.nav-links { order: 3; }
.nav-cta { display: contents; }
.nav-toggle { display: none; background: none; border: 0; font-size: 1.6rem; color: var(--bg); cursor: pointer; }
.nav-toggle { order: 2; margin-left: .2rem; margin-right: .6rem; }
.cart-link { order: 4; margin-left: auto; padding: .45rem 1rem; font-size: .9rem; white-space: nowrap; }
.lang-switch {
  order: 5; margin-left: .6rem; padding: .3rem .4rem; cursor: pointer;
  background: none; border: 1px solid rgba(255,255,255,.35); border-radius: 6px;
  color: var(--bg); font: inherit; font-size: .78rem; font-weight: 700; letter-spacing: .04em;
}
.lang-switch:hover { border-color: var(--blue); color: var(--blue); }
/* The dropdown list paints on the OS's white, so give it dark text explicitly. */
.lang-switch option { color: #111; background: #fff; font-weight: 600; }

/* Gradual nav collapse before full mobile menu */
@media (max-width: 1140px) {
  .nav-toggle { display: block; }
  .nav-links { gap: 1rem; }
  .nav-links a { font-size: .9rem; }
  .nav-links:not(.open) li:nth-child(1) { display: none; }
  .nav-links.open {
    display: flex;
    position: absolute;
    top: 74px;
    left: 0;
    right: 0;
    background: #fff;
    flex-direction: column;
    padding: 1rem 24px;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    z-index: 60;
  }
  .nav-links.open li { display: block !important; }
  .nav-links.open a { color: var(--navy); }
  .nav-links.open a:hover,
  .nav-links.open a.active { color: var(--blue); }
}
@media (max-width: 1020px) {
  .nav-links:not(.open) li:nth-child(2) { display: none; }
}
@media (max-width: 940px) {
  .nav-links:not(.open) li:nth-child(3) { display: none; }
}
@media (max-width: 860px) {
  .nav-links:not(.open) li:nth-child(4) { display: none; }
}
@media (max-width: 780px) {
  .nav-links:not(.open) li:nth-child(5) { display: none; }
  .nav-cta .btn { padding: .55rem 1rem; font-size: .85rem; }
}
@media (max-width: 720px) {
  .nav-links:not(.open) li:nth-child(6) { display: none; }
}
@media (max-width: 660px) {
  .nav-links:not(.open) li:nth-child(7) { display: none; }
}
@media (max-width: 600px) {
  .nav-links:not(.open) li:nth-child(8) { display: none; }
}
@media (max-width: 560px) {
  .nav-links:not(.open) { display: none; }
}

/* Section submenu — a page's own sections, listed under the site nav.
   Sits one step off the header's navy so it reads as a sub-level of the same
   object. Gold appears nowhere else in the header, so it can own
   "you are here". */
.subnav { background: var(--navy-700); border-top: 1px solid rgba(255,255,255,.10); }
.subnav-inner {
  display: flex;
  padding-top: .1rem;
  padding-bottom: .1rem;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.subnav-inner::-webkit-scrollbar { display: none; }
.subnav a {
  white-space: nowrap;
  padding: 0 1.1rem;
  color: #cfe0f2;
  font-size: .78rem;
  font-weight: 600;
  border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.subnav a:first-child { padding-left: 0; }
.subnav a:hover { color: #fff; }
.subnav a.active { color: #fff; border-bottom-color: var(--gold); }
.subnav a:focus-visible { outline: 2px solid var(--gold); outline-offset: -4px; }
@media (max-width: 700px) {
  .subnav a { padding: 0 .9rem; font-size: .72rem; }
}
@media (prefers-reduced-motion: reduce) {
  .subnav a { transition: none; }
}
/* Clear the sticky header when jumping to an anchor. */
section[id], .price-grid[id] { scroll-margin-top: 90px; }
body:has(.site-header .subnav) section[id],
body:has(.site-header .subnav) .price-grid[id] { scroll-margin-top: 110px; }

/* Hero */
.hero {
  background:
    radial-gradient(circle at 80% -10%, rgba(28,100,180,.35), transparent 55%),
    linear-gradient(160deg, rgba(13,42,77,.55) 0%, rgba(22,58,100,.55) 60%, rgba(29,69,117,.6) 100%),
    url("/assets/bg/original-hero.jpg") center / cover no-repeat;
  color: #fff;
  padding: 5.5rem 0 5rem;
  position: relative;
  overflow: hidden;
}
.hero::after {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 22px 22px; opacity: .6; pointer-events: none;
}
.hero .wrap { position: relative; z-index: 1; text-align: center; }
.hero h1 { color: #fff; max-width: 24ch; margin-inline: auto; }
.hero .lead { color: #cfe0f2; max-width: 56ch; font-size: 1.18rem; margin-inline: auto; }
.hero-cta { display: flex; gap: .9rem; flex-wrap: wrap; margin-top: 1.8rem; justify-content: center; }
.hero-stats { display: flex; gap: 2.5rem; margin-top: 3rem; flex-wrap: wrap; justify-content: center; }
.hero-stats .num { font-size: 2rem; font-weight: 800; color: #fff; }
.hero-stats .lbl { color: #aac5e2; font-size: .9rem; }

/* Page banner (inner pages) */
.banner {
  background: linear-gradient(160deg, var(--navy), var(--navy-700));
  color: #fff; padding: 3.6rem 0 3.4rem;
}
.banner-training {
  background:
    linear-gradient(160deg, rgba(13,42,77,.5), rgba(20,53,92,.55)),
    url("/assets/bg/original-training.jpg") center / cover no-repeat;
}
.banner-software {
  background:
    linear-gradient(160deg, rgba(13,42,77,.5), rgba(20,53,92,.55)),
    url("/assets/bg/original-software.jpg") center / cover no-repeat;
}
.banner-about {
  background:
    linear-gradient(160deg, rgba(13,42,77,.82), rgba(20,53,92,.8)),
    url("/assets/bg/original-team.png") center 30% / cover no-repeat, var(--navy);
}
.banner-contact {
  background:
    linear-gradient(160deg, rgba(13,42,77,.82), rgba(20,53,92,.8)),
    url("/assets/bg/original-consult.png") center 25% / cover no-repeat, var(--navy);
}
.banner-resources {
  background:
    linear-gradient(160deg, rgba(13,42,77,.5), rgba(20,53,92,.55)),
    url("/assets/bg/original-resources.jpg") center / cover no-repeat;
}
.banner-pricing {
  background:
    linear-gradient(160deg, rgba(13,42,77,.5), rgba(20,53,92,.55)),
    url("/assets/bg/original-pricing.jpg") center / cover no-repeat;
}
.banner-cart {
  background:
    linear-gradient(160deg, rgba(13,42,77,.5), rgba(20,53,92,.55)),
    url("/assets/bg/original-pricing.jpg") center / cover no-repeat;
}
.banner h1 { color: #fff; margin-bottom: .3rem; }
.banner p { color: #cfe0f2; max-width: 60ch; margin: 0; }
.crumbs { font-size: .85rem; color: #9fbbdc; margin-bottom: 1rem; }
.crumbs a { color: #cfe0f2; }

/* Sections */
section.block { padding: 4.5rem 0; }
/* Clear the sticky header when an in-page link jumps to a section. */
section[id] { scroll-margin-top: 90px; }
section.soft { background: var(--bg-soft); }
.section-head { max-width: 720px; margin: 0 auto 2.6rem; text-align: center; }
.section-head p { color: var(--slate); font-size: 1.08rem; }

/* Cards */
.grid { display: grid; gap: 1.6rem; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 2rem; box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.card .ic {
  width: 52px; height: 52px; border-radius: 12px; background: var(--blue-50);
  display: grid; place-items: center; margin-bottom: 1.1rem; color: var(--blue);
}
.card .ic svg { width: 26px; height: 26px; }
/* Icons taken from the RC Pro app: filled 20px glyphs with fine detail, so
   they sit larger in the tile than the stroked line icons. */
.card .ic-app svg { width: 34px; height: 34px; }
.card h3 { margin-bottom: .4rem; }
.card p { color: var(--slate); margin-bottom: 1rem; }
.card .more { font-weight: 600; font-size: .92rem; }

/* Partner cards (about) - logo above name, HQ, blurb and outbound link.
   The logos are cropped to their white plate and sit unframed on the white
   card. The ratio is pinned so cards stay aligned whatever a future logo
   measures; contain plus the white backing keeps any slack invisible. */
.partner-card { display: flex; flex-direction: column; }
.partner-logo {
  width: 100%; aspect-ratio: 3 / 2; object-fit: contain; background: #fff;
  margin-bottom: 1.2rem;
}
.partner-card .partner-hq {
  font-weight: 600; font-size: .9rem; color: var(--navy); margin-bottom: .6rem;
}
.partner-card .muted { flex: 1; }
.partner-card .btn { align-self: flex-start; }
.variant-list { display: flex; flex-direction: column; gap: .5rem; }
.variant-list .btn { width: 100%; text-align: center; }
.date-note { font-size: .78rem; margin: .6rem 0 0; }

/* Split feature */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.split .visual {
  border-radius: var(--radius); min-height: 320px;
  background: linear-gradient(140deg, var(--blue-50), #dce9f7);
  border: 1px solid var(--line); display: grid; place-items: center; color: var(--blue);
  box-shadow: var(--shadow-sm);
}
.split .visual .product-shot { max-width: 92%; height: auto; filter: drop-shadow(0 10px 26px rgba(13,42,77,.25)); }
.visual-photo {
  position: relative;
  overflow: hidden;
  background-size: cover !important;
  background-position: center !important;
}
.visual-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(13,42,77,.14));
  z-index: 0;
}
.visual-photo svg {
  position: relative;
  z-index: 1;
  opacity: .76;
  filter: drop-shadow(0 4px 18px rgba(13,42,77,.18));
}
.visual-photo .inset-diagram {
  position: relative;
  z-index: 1;
  width: 88%;
  height: auto;
  filter: drop-shadow(0 4px 18px rgba(13,42,77,.35));
}
.visual-methodology { background-image: url("/assets/bg/methodology.png"); }
.visual-software { background-image: url("/assets/bg/software.png"); }
.visual-training { background-image: url("/assets/bg/training.png"); }
.visual-book { background-image: url("/assets/bg/ebook.jpg"); }
.checklist { list-style: none; padding: 0; margin: 1.2rem 0 0; }
.checklist li { padding: .35rem 0 .35rem 2rem; position: relative; color: var(--ink); }
.checklist li::before {
  content: "✓"; position: absolute; left: 0; top: .35rem;
  width: 1.3rem; height: 1.3rem; background: var(--blue-50); color: var(--blue);
  border-radius: 50%; display: grid; place-items: center; font-size: .8rem; font-weight: 700;
}

/* Testimonials */
.quote {
  background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--gold);
  border-radius: var(--radius); padding: 1.8rem; box-shadow: var(--shadow-sm);
}
.quote p { font-style: italic; color: var(--ink); }
.quote .who { font-style: normal; font-weight: 700; color: var(--navy); }
.quote .role { font-style: normal; font-size: .85rem; color: var(--slate); }
.q-person { display: flex; align-items: center; gap: .85rem; margin-top: 1.1rem; }
.q-person img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }

/* CTA band */
.cta-band {
  background:
    linear-gradient(135deg, rgba(13,42,77,.92), rgba(28,100,180,.86)),
    url("/assets/bg/original-pattern.png") center / cover no-repeat;
  color: #fff; border-radius: 18px; padding: 3rem; text-align: center;
}
.cta-band h2 { color: #fff; }
.cta-band p { color: #d6e5f5; max-width: 56ch; margin: 0 auto 1.6rem; }

/* Pricing */
.price-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.6rem; align-items: stretch; }
.price {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 2.2rem; box-shadow: var(--shadow-sm); display: flex; flex-direction: column;
}
.price.featured { border: 2px solid var(--blue); box-shadow: var(--shadow-md); position: relative; }
.price.featured .tag {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--gold); color: #2a1d05; font-size: .72rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .1em; padding: .3rem .9rem; border-radius: 20px;
}
.price h3 { margin-bottom: .2rem; }
.price .amt { font-size: 2.4rem; font-weight: 800; color: var(--navy); margin: .6rem 0; }
.price .amt small { font-size: .9rem; color: var(--slate); font-weight: 500; }
.price ul { list-style: none; padding: 0; margin: 1rem 0 1.6rem; flex: 1; }
.price li { padding: .4rem 0 .4rem 1.7rem; position: relative; color: var(--slate); font-size: .95rem; }
.price li::before { content: "✓"; position: absolute; left: 0; color: var(--blue); font-weight: 700; }

/* Logos / clients */
.logos { display: flex; flex-wrap: wrap; gap: 1.2rem; justify-content: center; align-items: center; }
.logo-chip {
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  padding: .9rem 1.6rem; color: var(--slate); font-weight: 700; letter-spacing: .03em;
  box-shadow: var(--shadow-sm);
}

/* Forms */
.form { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 2.2rem; box-shadow: var(--shadow-sm); }
.field { margin-bottom: 1.1rem; }
.field label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .35rem; color: var(--navy); }
.field input, .field select, .field textarea {
  width: 100%; padding: .75rem .85rem; border: 1px solid var(--line); border-radius: 8px;
  font: inherit; color: var(--ink); background: #fcfdfe;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--blue-50); border-color: var(--blue); }
.field .req { color: #c0392b; }
.field-check { display: flex; gap: .65rem; align-items: flex-start; margin: 1.4rem 0; }
.field-check input { flex: none; width: 18px; height: 18px; margin-top: .15rem; accent-color: var(--blue); }
.field-check span { font-size: .92rem; color: var(--slate); }
.form-captcha { margin-bottom: .5rem; }
.form-fine { font-size: .78rem; color: var(--slate); margin-bottom: 1.4rem; }
.form-fine a { color: var(--slate); text-decoration: underline; }
.form-status { margin-top: .9rem; font-size: .92rem; color: var(--slate); }
.form-status.error { color: #c0392b; }
.form button[type=submit][disabled] { opacity: .5; cursor: not-allowed; box-shadow: none; }
.form button[type=submit][disabled]:hover { transform: none; }
.form-done {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 2.2rem; box-shadow: var(--shadow-sm);
}
.form-done h3 { margin-bottom: .8rem; }
.form-done p { margin-bottom: .9rem; }
.form-done p:last-child { margin-bottom: 0; }

/* Steps */
.steps { counter-reset: step; display: grid; gap: 1.4rem; }
.step { display: flex; gap: 1.1rem; align-items: flex-start; }
.step .n {
  counter-increment: step; flex: none; width: 42px; height: 42px; border-radius: 50%;
  background: var(--navy); color: #fff; display: grid; place-items: center; font-weight: 800;
}
.step .n::before { content: counter(step); }

/* Bracket icons - the old site's four method step icons (about #steps) and
   three software value icons (software #features), redrawn as SVG, in place
   of the generic .ic tile on those cards. */
.step-icon { display: block; width: 84px; height: 84px; margin: 0 0 1rem -4px; }

/* Footer */
.site-footer {
  background:
    linear-gradient(180deg, rgba(13,42,77,.3), rgba(13,42,77,.55)),
    url("/assets/bg/original-footer.jpg") center top / cover no-repeat, var(--navy);
  color: #d9e6f4; padding: 3.5rem 0 1.5rem;
}
.site-footer h4 { color: #fff; font-size: .95rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 1rem; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2rem; }
.site-footer a { color: #d9e6f4; display: block; padding: .25rem 0; font-size: .92rem; }
.site-footer a:hover { color: #fff; }
.footer-brand { display: flex; align-items: center; gap: .6rem; color: #fff; font-weight: 800; font-size: 1.15rem; margin-bottom: .8rem; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.18); margin-top: 2.5rem; padding-top: 1.2rem; font-size: .85rem; color: #b6c9e0; display: flex; justify-content: center; align-items: center; flex-wrap: nowrap; gap: .5rem; text-align: center; white-space: nowrap; }
.footer-bottom a { display: inline; padding: 0; }
@media (max-width: 480px) { .footer-bottom { white-space: normal; flex-wrap: wrap; } }

/* Cart badge in nav */
.cart-link { position: relative; }
.cart-count {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px;
  padding: 0 6px; margin-left: .35rem; border-radius: 999px;
  background: var(--line); color: var(--slate); font-size: .75rem; font-weight: 800;
  transition: background .15s ease, color .15s ease;
}
.cart-count.has-items { background: var(--gold); color: #2a1d05; }

/* Add-to-cart button feedback */
.btn.added { background: #1f7a44 !important; border-color: #1f7a44 !important; color: #fff !important; }
/* A gold puck arcs from the button to the cart badge, which then bumps.
   Decoration only — flyToCart() bails out when the badge is off-screen, when
   the browser has no Web Animations, or on prefers-reduced-motion. */
.fly-puck {
  position: fixed; z-index: 200; width: 18px; height: 18px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 3px 12px rgba(13,42,77,.4);
  pointer-events: none; will-change: transform, opacity;
}
.cart-count.bumped { animation: cart-bump .42s ease; }
@keyframes cart-bump {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.4); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .cart-count.bumped { animation: none; }
}

/* Cart page layout */
.cart-layout { display: grid; grid-template-columns: 1fr 340px; gap: 2rem; align-items: start; }
.cart-table-wrap { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: .5rem 1.5rem 1.5rem; box-shadow: var(--shadow-sm); overflow-x: auto; }
.cart-table { width: 100%; border-collapse: collapse; }
.cart-table th { text-align: left; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--slate); padding: 1rem .5rem; border-bottom: 2px solid var(--line); }
.cart-table th:nth-child(2), .cart-table th:nth-child(4) { text-align: right; }
.cart-table th:nth-child(3) { text-align: center; }
.cart-table td { padding: 1.1rem .5rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.cart-table tr:last-child td { border-bottom: 0; }
.ci-name { font-weight: 600; color: var(--navy); }
.ci-variant { font-size: .84rem; color: var(--slate); font-weight: 500; margin-top: .2rem; }
.ci-note { font-size: .82rem; }
.ci-item { display: flex; align-items: center; gap: .9rem; }
.ci-thumb { flex: 0 0 56px; width: 56px; height: 56px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg-soft); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.ci-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.ci-price, .ci-line { white-space: nowrap; text-align: right; }
.ci-line { font-weight: 700; color: var(--navy); }
.ci-qty { text-align: center; }
.qty-ctrl { display: inline-flex; align-items: stretch; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.qty-ctrl button { width: 32px; height: 34px; border: 0; background: var(--bg-soft); color: var(--navy); font-size: 1.1rem; cursor: pointer; display: grid; place-items: center; padding: 0; line-height: 1; }
.qty-ctrl button:hover { background: var(--blue-50); }
.qty-ctrl input { width: 46px; height: 34px; border: 0; border-left: 1px solid var(--line); border-right: 1px solid var(--line); text-align: center; font: inherit; -moz-appearance: textfield; }
.qty-ctrl input::-webkit-outer-spin-button, .qty-ctrl input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ci-remove button { border: 0; background: none; color: var(--slate); font-size: 1rem; cursor: pointer; padding: .3rem .5rem; border-radius: 6px; }
.ci-remove button:hover { background: #fdeaea; color: #c0392b; }
.cart-actions { display: flex; justify-content: space-between; margin-top: 1.2rem; }
.link-btn { background: none; border: 0; color: var(--blue); font: inherit; cursor: pointer; padding: 0; }
.link-btn:hover { color: var(--blue-600); text-decoration: underline; }
.cart-summary { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.8rem; box-shadow: var(--shadow-sm); position: sticky; top: 96px; }
.cart-summary h3 { margin-bottom: 1.2rem; }
.sum-row { display: flex; justify-content: space-between; padding: .55rem 0; font-size: .95rem; }
.sum-row.total { border-top: 1px solid var(--line); margin-top: .4rem; padding-top: 1rem; font-size: 1.2rem; font-weight: 800; color: var(--navy); }
.btn-block { width: 100%; margin-top: 1.2rem; text-align: center; }
.secure-note { text-align: center; font-size: .82rem; margin: .9rem 0 0; }
.cart-empty { text-align: center; padding: 3rem 1rem; }
#checkout-note code { background: var(--bg-soft); padding: .1rem .35rem; border-radius: 4px; font-size: .85em; }

/* Product card buy footer */
.price .price-buy { display: flex; flex-direction: column; gap: .5rem; }

/* Responsive */
@media (max-width: 900px) {
  .grid-3, .price-grid { grid-template-columns: 1fr; }
  .grid-2, .split, .cart-layout { grid-template-columns: 1fr; }
  .cart-summary { position: static; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
  .cta-band { padding: 2rem 1.4rem; }
}

/* =====================================================================
   zoho-bridge.css
   ---------------------------------------------------------------------
   Bridges the flat site's design system to Zoho Commerce's own markup.
   styles.css is the original site stylesheet, kept UNCHANGED so it can
   be re-synced from the git repo. Put every Zoho-specific override in
   THIS file so the two never tangle.
   ===================================================================== */

/* --- Zoho-injected wrappers: neutralise default padding/width -------- */
#zohoCommerceMainDiv,
.zpstore-container,
.zpcommerce-wrapper { max-width: none; margin: 0; padding: 0; }

/* --- Map Zoho product-grid markup onto our .price card look ---------- */
.zpstore-product-item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 1.6rem;
}
.zpstore-product-item .zpstore-product-name { color: var(--navy); font-weight: 700; }
.zpstore-product-item .zpstore-product-price { font-size: 1.5rem; font-weight: 800; color: var(--navy); }

/* --- Zoho's default buttons -> our .btn-primary ---------------------- */
.zpstore-btn,
button.zpstore-addtocart {
  background: var(--blue);
  color: #fff;
  border: 0;
  border-radius: 8px;
  padding: .8rem 1.6rem;
  font-weight: 600;
  cursor: pointer;
}
.zpstore-btn:hover,
button.zpstore-addtocart:hover { background: var(--blue-600); }

/* --- Checkout is rendered by Zoho and only partially themeable ------- */
.zpstore-checkout-container { font-family: var(--font); color: var(--ink); }
.zpstore-checkout-container h1,
.zpstore-checkout-container h2 { color: var(--navy); }

/* --- Cart badge in the header --------------------------------------- */
.cart-count.has-items { background: var(--gold); color: #fff; }

.brand-logo svg { height: 42px; width: auto; display: block; }
.footer-logo svg { height: 44px; width: auto; display: block; }

/* Translations (README "Translations"): the head snippet hides the page while
   a non-English dictionary loads; i18n.js unhides once it is applied, and the
   snippet's own 1.5 s timer unhides regardless. Visibility, not display, so
   nothing reflows when the page appears. */
html.i18n-pending body { visibility: hidden; }