/*  Zandino Design Polish Layer 3.9.6
    Loads after zandino-main.css: depth, rhythm, precise controls.  */

/* ---------- Design tokens: tighter radius scale ---------- */
:root{--z36-radius:22px;--z36-btn-h:50px}
html[data-zandino-corners="compact"]{--z36-radius:15px}

/* ---------- Elevation system: soft, blue-tinted, consistent ---------- */
.z36-cap-card,.z36-project-card,.z36-blog-card,.z36-story-step,
.z36-proof-board,.z36-idea-stage,.z36-command-panel,.z36-idea-core,
.z36-orderable-card,.z36-svc-frame,.z36-archive-card,.z36-featured-post{
  box-shadow:0 1px 2px rgba(13,32,66,.05),0 14px 34px -14px rgba(16,55,120,.16);
}

/* ---------- Buttons: gradient, single elevation language ---------- */
.z36-btn{
  min-height:var(--z36-btn-h);
  border-radius:14px;
  font-weight:800;
  gap:11px;
  box-shadow:0 12px 28px -12px rgba(31,84,214,.5);
  transition:transform .28s var(--z36-ease),box-shadow .28s,background .28s;
}
.z36-btn:active{transform:translateY(1px) scale(.99)}
.z36-btn--solid{background:linear-gradient(135deg,#3f86ff 0%,#2456e6 100%)}
.z36-btn--solid:hover{box-shadow:0 16px 34px -12px rgba(31,84,214,.6)}
.z36-btn--ghost{border:1px solid rgba(112,160,240,.4);background:rgba(70,125,235,.08)}
.z36-btn--light{background:linear-gradient(135deg,#5a9bff,#2c62ee);color:#fff}
.z36-header-cta{background:linear-gradient(135deg,#3f86ff,#2456e6);box-shadow:0 8px 20px -8px rgba(31,84,214,.55)}

/* ---------- Header: crisper pill, balanced control sizes ---------- */
.z36-header-inner{border-radius:15px;gap:18px}
.z36-brand-mark{border-radius:11px}
.z36-brand-hover{border-radius:11px}
.z36-theme-toggle,.z36-menu-toggle{border-radius:10px}
.z36-nav a{font-weight:600}
.z36-nav a:after{bottom:-8px;height:1.5px;border-radius:2px}

/* ---------- Light mode: airy but structured (no more white wash) ---------- */
html[data-zandino-theme="light"]{
  --z36-bg:#eef3fa;
  --z36-border:#dbe5f1;
}
html[data-zandino-theme="light"] body{
  background:
    radial-gradient(1100px 560px at 88% -6%,rgba(120,170,255,.16),transparent 62%),
    radial-gradient(820px 460px at -4% 28%,rgba(96,148,250,.09),transparent 56%),
    linear-gradient(180deg,#f3f7fc 0%,#eef3fa 100%);
  background-attachment:fixed;
}
html[data-zandino-theme="light"] .z36-cap-card,
html[data-zandino-theme="light"] .z36-project-card,
html[data-zandino-theme="light"] .z36-blog-card,
html[data-zandino-theme="light"] .z36-story-step,
html[data-zandino-theme="light"] .z36-idea-stage,
html[data-zandino-theme="light"] .z36-proof-board,
html[data-zandino-theme="light"] .z36-idea-rail{
  background:#fff;
  border-color:#e2ebf5;
  box-shadow:0 1px 2px rgba(16,35,61,.05),0 20px 44px -20px rgba(23,64,130,.2);
}
html[data-zandino-theme="light"] .z36-cap-card--1{
  background:linear-gradient(150deg,#2f6ef2,#1c47c8);
  border-color:#2a5fd8;
  color:#fff;
  box-shadow:0 24px 54px -20px rgba(28,71,200,.55);
}
html[data-zandino-theme="light"] .z36-cap-card--1 p{color:#d5e3ff}
html[data-zandino-theme="light"] .z36-cap-card--1 .icon{background:rgba(255,255,255,.16);color:#fff}
html[data-zandino-theme="light"] .z36-command-panel{background:#fff;border-color:#e2ebf5}
html[data-zandino-theme="light"] .z36-command-chart{background:#f0f5fc}
html[data-zandino-theme="light"] .z36-kicker{color:#3f5f8e}
html[data-zandino-theme="light"] .z36-kicker i{background:#3f86ff;box-shadow:0 0 14px rgba(63,134,255,.5)}
html[data-zandino-theme="light"] .z36-section-head>span,
html[data-zandino-theme="light"] .z36-projects-head span,
html[data-zandino-theme="light"] .z36-blog-head span,
html[data-zandino-theme="light"] .z36-proof-head>span,
html[data-zandino-theme="light"] .z36-process-copy>span{color:#3568c4;font-weight:700}
html[data-zandino-theme="light"] .z36-header-inner{
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(20px) saturate(160%);
  border-color:#d9e4f1;
  box-shadow:0 6px 24px -6px rgba(23,64,130,.14),0 1px 0 rgba(255,255,255,.7) inset;
}
html[data-zandino-theme="light"] .z36-footer{background:#e7eef7}
html[data-zandino-theme="light"] .z36-final{background:linear-gradient(150deg,#2e6bf0,#2148c4)}
html[data-zandino-theme="light"] .z36-final,
html[data-zandino-theme="light"] .z36-final h2,
html[data-zandino-theme="light"] .z36-final-inner h2{color:#fff}
html[data-zandino-theme="light"] .z36-final-inner p{color:#dbe7ff}
html[data-zandino-theme="light"] .z36-final-inner>span{color:#bcd2ff}
html[data-zandino-theme="light"] .z36-final-inner a[href]:not(.z36-btn){color:#fff;border-bottom-color:rgba(255,255,255,.5)}
html[data-zandino-theme="light"] .z36-final .z36-btn--light{background:#fff;color:#1c47c8;box-shadow:0 14px 32px -12px rgba(6,20,60,.45)}

/* ---------- Inner page heroes stay dark-but-legible in light mode ----------
   The page heroes keep their cinematic dark canvas; their ink is pinned so
   light mode never inverts text into unreadable dark-on-dark. */
html[data-zandino-theme="light"] .z36-page-hero,
html[data-zandino-theme="light"] .z36-case-hero,
html[data-zandino-theme="light"] .z36-article-hero{
  color:#f2f6ff;
  background:radial-gradient(circle at 70% 30%,rgba(74,137,231,.2),transparent 36%),linear-gradient(180deg,#0a1c38,#0d2342 70%,#122a4e);
}
html[data-zandino-theme="light"] .z36-page-copy h1,
html[data-zandino-theme="light"] .z36-case-hero h1,
html[data-zandino-theme="light"] .z36-article-hero h1{color:#f6f9ff}
html[data-zandino-theme="light"] .z36-page-copy>p,
html[data-zandino-theme="light"] .z36-page-copy p{color:#b9c9e4}
html[data-zandino-theme="light"] .z36-page-scroll{color:#9db8e0}
html[data-zandino-theme="light"] .z36-page-hero .z36-kicker{color:#a5bfdf}
html[data-zandino-theme="light"] .z36-page-hero .z36-kicker b{color:#8aa3c9}
html[data-zandino-theme="light"] .z36-page-visual{color:#e8f0fc}
html[data-zandino-theme="light"] .z36-page-grid{opacity:.5}
/* Below the hero, inner pages return to the light canvas. */
html[data-zandino-theme="light"] .z36-inner-main,
html[data-zandino-theme="light"] .z36-principles,
html[data-zandino-theme="light"] .z36-web-evolution,
html[data-zandino-theme="light"] .z36-about-dna,
html[data-zandino-theme="light"] .z36-service-system,
html[data-zandino-theme="light"] .z36-consult,
html[data-zandino-theme="light"] .z36-contact-hub{background:#f0f5fb;color:#10233d}
html[data-zandino-theme="light"] .z36-about-dna{background:#eaf1f8}

/* ---------- Dark mode: deeper contrast rhythm ---------- */
html:not([data-zandino-theme="light"]) .z36-cap-card,
html:not([data-zandino-theme="light"]) .z36-project-card,
html:not([data-zandino-theme="light"]) .z36-blog-card,
html:not([data-zandino-theme="light"]) .z36-story-step,
html:not([data-zandino-theme="light"]) .z36-command-panel{
  box-shadow:0 1px 2px rgba(0,0,0,.2),0 18px 40px -18px rgba(0,10,30,.5);
}
html:not([data-zandino-theme="light"]) .z36-cap-card--1{
  background:linear-gradient(150deg,#123a7e,#0a2254);
  border-color:#28579f;
}

/* ---------- Section rhythm: calmer, more air ---------- */
.z36-section-head,.z36-projects-head,.z36-blog-head{align-items:start}
.z36-section-head>span,.z36-projects-head>span,.z36-blog-head>span{
  display:inline-flex;align-items:center;gap:8px;
}
.z36-section-head>span:before,.z36-projects-head>span:before,.z36-blog-head>span:before{
  content:"";width:18px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--z36-primary),transparent);
}

/* ---------- Capabilities: clear hierarchy ---------- */
.z36-cap-card h3{font-size:21px;letter-spacing:-.01em}
.z36-cap-card .icon{border-radius:12px;box-shadow:inset 0 0 0 1px rgba(44,110,233,.1)}
.z36-cap-card .arrow{opacity:.55;transition:opacity .3s,transform .3s}
.z36-cap-card:hover .arrow{opacity:1}

/* ---------- Project cards: cleaner meta ---------- */
.z36-project-info{
  background:linear-gradient(180deg,transparent,rgba(6,17,36,.88) 42%);
}
html[data-zandino-theme="light"] .z36-project-info{
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.95) 46%);
}
.z36-project-meta span{backdrop-filter:blur(6px)}

/* ---------- Mobile: precise compact controls + flicker guard ---------- */
@media (max-width:980px){
  :root{--z36-btn-h:48px}

  /* JS-settled reveals stay rock solid (belt) */
  .z36-reveal-settled{opacity:1!important;transform:none!important;filter:none!important}
  /* Curtain (suspenders): no entrance animation class can hide content */
  .z36-reveal[data-z36-reveal-ready]{transition-duration:.001s!important}
  .z36-header-inner{height:48px;border-radius:13px;gap:10px;padding-inline:7px}
  .z36-brand-mark{width:34px;height:34px;border-radius:10px}
  .z36-brand-mark>img,.z36-brand-mark .z36-brand-custom img{width:23px;height:23px;max-height:23px}
  .z36-brand-custom img{height:26px;max-height:26px}
  .z36-theme-toggle,.z36-menu-toggle{width:36px;height:36px;border-radius:10px}
  .z36-theme-toggle>span{font-size:0}.z36-theme-toggle>span::before{width:15px;height:15px}
  .z36-account-link{width:36px;height:36px;padding:0;border-radius:10px}
  .z36-account-link .z36-account-icon{width:17px;height:17px;flex:0 0 17px}
  .z36-header-actions{gap:6px}
  .z36-mobile-dock{height:38px}

  /* Flicker guard: no per-frame repaint work while scrolling */
  .z36-reveal{will-change:auto!important}
  .z36-project-real-media img{transform:none!important;transition:opacity .3s}
  .z36-cap-card,.z36-project-card,.z36-blog-card{transition:border-color .3s,box-shadow .3s}
  .z36-cap-card:hover,.z36-project-card:hover{translate:none!important}
  .z36-story-visual{contain:layout paint}
  .z36-ticker>div{animation-duration:38s}

  /* Kill entrance animations entirely on touch widths: this is the
     flicker source (staggered opacity/blur fights lazy content while
     scrolling). Content simply renders, settled. */
  .z36-reveal{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
  .z36-page-copy,.z36-page-visual{animation:none!important;opacity:1!important;transform:translate3d(0,var(--page-copy-y,0px),0)!important}
  .z36-page-hero .z36-page-visual{animation:none!important;opacity:1!important;transform:none!important}
  .z36-hero-copy,.z36-reactor{animation:none!important}
  .z36-reveal[data-z36-reveal-ready]{opacity:1!important}
}
@media (max-width:680px){
  .z36-cap-card h3{font-size:16px}
  .z36-cap-card p{font-size:12px;line-height:1.7}
  .z36-hero-actions .z36-btn{width:100%}
  .z36-section,.z36-inner-section{padding:58px 0}
}

/* ---------- Auth / My Account (login + registration) ---------- */
.woocommerce-account .entry-content,
.woocommerce-account .woocommerce{
  max-width:560px;margin-inline:auto;
}
.woocommerce form.login,
.woocommerce form.register,
.woocommerce-ResetPassword form{
  border:1px solid var(--z36-border,#d7e2ee);
  border-radius:18px;
  padding:26px 24px;
  background:rgba(255,255,255,.85);
  box-shadow:0 1px 2px rgba(13,32,66,.05),0 18px 40px -20px rgba(16,55,120,.18);
  margin:14px 0;
}
html:not([data-zandino-theme="light"]) .woocommerce form.login,
html:not([data-zandino-theme="light"]) .woocommerce form.register,
html:not([data-zandino-theme="light"]) .woocommerce-ResetPassword form{
  background:rgba(8,25,52,.82);
  border-color:rgba(101,160,255,.24);
  color:#f4f7ff;
}
.woocommerce form .form-row{padding:4px 0;margin:0}
.woocommerce form .form-row label{font-weight:700;font-size:12px;margin-bottom:6px;display:block}
html:not([data-zandino-theme="light"]) .woocommerce form .form-row label{color:#c6d4ea}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce form input[type="text"],
.woocommerce form input[type="email"],
.woocommerce form input[type="password"],
.woocommerce form input[type="tel"]{
  width:100%;box-sizing:border-box;
  min-height:48px;
  border:1px solid #cfdeed;
  border-radius:12px;
  background:#fbfdff;
  padding:0 14px;
  font-size:14px;
  transition:border-color .2s,box-shadow .2s;
}
html:not([data-zandino-theme="light"]) .woocommerce form .form-row input.input-text,
html:not([data-zandino-theme="light"]) .woocommerce form input[type="text"],
html:not([data-zandino-theme="light"]) .woocommerce form input[type="email"],
html:not([data-zandino-theme="light"]) .woocommerce form input[type="password"],
html:not([data-zandino-theme="light"]) .woocommerce form input[type="tel"]{
  background:rgba(4,14,32,.7);
  border-color:rgba(101,160,255,.28);
  color:#f4f7ff;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form input[type="text"]:focus,
.woocommerce form input[type="password"]:focus,
.woocommerce form input[type="email"]:focus{
  outline:none;
  border-color:#3f86ff;
  box-shadow:0 0 0 3px rgba(63,134,255,.18);
}
.woocommerce .button,
.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button,
.woocommerce #respond input#submit{
  background:linear-gradient(135deg,#3f86ff,#2456e6)!important;
  color:#fff!important;
  border:none!important;
  border-radius:12px!important;
  min-height:48px;
  padding:0 24px!important;
  font-weight:800!important;
  font-size:13px!important;
  box-shadow:0 10px 24px -10px rgba(31,84,214,.5);
  cursor:pointer;
  transition:filter .2s,transform .2s;
}
.woocommerce .button:hover,
.woocommerce button.button:hover{filter:brightness(1.06)}
.woocommerce-privacy-policy-text,.woocommerce-form-login__rememberme{
  font-size:12px;opacity:.85;
}
.woocommerce-account h2,.woocommerce-account h3{
  font-size:17px;letter-spacing:-.01em;
}
.woocommerce-account nav.woocommerce-MyAccount-navigation ul{
  list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;
}
.woocommerce-account nav.woocommerce-MyAccount-navigation li{
  border:1px solid var(--z36-border,#d7e2ee);border-radius:11px;background:rgba(255,255,255,.75);
}
html:not([data-zandino-theme="light"]) .woocommerce-account nav.woocommerce-MyAccount-navigation li{
  background:rgba(8,25,52,.8);border-color:rgba(101,160,255,.22);
}
.woocommerce-account nav.woocommerce-MyAccount-navigation a{
  display:inline-flex;align-items:center;min-height:40px;padding:0 14px;font-size:12.5px;font-weight:700;
}
.woocommerce-account .u-columns{display:grid;gap:18px}
.woocommerce-account .woocommerce-info{
  border:1px solid rgba(63,134,255,.35);border-radius:14px;background:rgba(63,134,255,.08);
  padding:14px 16px;font-size:13px;
}

/* ---------- Focus visibility: one consistent ring ---------- */
a:focus-visible,button:focus-visible{
  outline:2px solid #72b3ff;outline-offset:3px;border-radius:8px;
}

/* ---------- Mobile about map: node pills inherit real control size ---------- */
@media (max-width:680px){
  .z36-about-node{font-size:12px!important;gap:2px}
  .z36-about-node b{font-size:11px!important;letter-spacing:.04em}
  .z36-about-node small{font-size:9px!important;opacity:.7}
  .z36-about-node.is-active{border-color:#5aa5ff;background:#0d315d}
  .z36-about-orbit-readout h3{font-size:16px}
  .z36-about-orbit-readout p{font-size:12px}
  /* Services orbit nodes same treatment */
  .z36-service-orbit>.node{font-size:11px!important}
  .z36-service-orbit>.node b{font-size:11px!important}
  /* Process rows: tighter, no giant circles */
  .z36-process-step{grid-template-columns:34px 1fr 14px;gap:12px}
}

/* ==========================================================================
   Light-mode readability pass
   Fixes found on the live site: the scrolled header kept its dark glass in
   light mode, the narrative steps faded to 34% opacity, and the tag chips
   used dark-canvas ink on white cards.
   ========================================================================== */

/* Header: the scrolled state must stay a light glass surface. */
html[data-zandino-theme="light"] .z36-header.is-scrolled .z36-header-inner,
html[data-zandino-theme="light"] .z36-header .z36-header-inner {
    background: rgba(255, 255, 255, .95);
    border-color: #d7e3f0;
    box-shadow: 0 8px 28px -8px rgba(23, 64, 130, .18), 0 1px 0 rgba(255, 255, 255, .8) inset;
}
html[data-zandino-theme="light"] .z36-header.is-scrolled .z36-nav a,
html[data-zandino-theme="light"] .z36-header .z36-nav a { color: #41536b; }
html[data-zandino-theme="light"] .z36-header.is-scrolled .z36-nav a:hover,
html[data-zandino-theme="light"] .z36-header .z36-nav a:hover,
html[data-zandino-theme="light"] .z36-header .z36-nav .current-menu-item > a { color: #10233d; }
html[data-zandino-theme="light"] .z36-header.is-scrolled .z36-account-link { border-color: #cbd9e8; color: #173250; }

/* Narrative steps: de-emphasise the inactive card with ink, never with opacity. */
html[data-zandino-theme="light"] .z36-story-step {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    background: #fff;
    border-color: #e2ebf5;
    box-shadow: 0 1px 2px rgba(16, 35, 61, .05), 0 18px 40px -22px rgba(23, 64, 130, .22);
}
html[data-zandino-theme="light"] .z36-story-step:not(.is-active) {
    background: #f7fafd;
    border-color: #e6eef7;
    box-shadow: 0 1px 2px rgba(16, 35, 61, .04);
}
html[data-zandino-theme="light"] .z36-story-step:not(.is-active) h2 { color: #55688a; }
html[data-zandino-theme="light"] .z36-story-step:not(.is-active) h2 b { color: #5b86c9; }
html[data-zandino-theme="light"] .z36-story-step:not(.is-active) p { color: #7387a1; }
html[data-zandino-theme="light"] .z36-story-step.is-active h2 { color: #10233d; }
html[data-zandino-theme="light"] .z36-story-step.is-active h2 b { color: #2468d2; }
html[data-zandino-theme="light"] .z36-story-step.is-active p { color: #3d5470; }
html[data-zandino-theme="light"] .z36-story-step > span { color: #2a63b8; font-weight: 700; }

/* Tag chips: readable pills on every light surface. */
html[data-zandino-theme="light"] .z36-tags i,
html[data-zandino-theme="light"] .z36-tags span,
html[data-zandino-theme="light"] .z36-tags a {
    color: #2c4a6e;
    border-color: #cbdcec;
    background: #eff5fc;
}
html[data-zandino-theme="light"] .z36-story-step:not(.is-active) .z36-tags i { color: #5c7492; background: #f4f8fc; border-color: #dde8f3; }

/* ==========================================================================
   Mobile paint stability
   The cinematic layer paints a fixed full-viewport grain with a blend mode,
   blows up a 140px-blur glow and blurs the fixed toolbar. On phones that
   combination re-composites the top of every page on each scroll frame, which
   reads as flicker right under the toolbar. These rules keep the same look
   with far cheaper painting (mobile + touch only).
   ========================================================================== */
@media (max-width: 980px), (pointer: coarse) {

    /* 1. Fixed grain overlay + blend modes are the heaviest repaint source. */
    .z36-experience::before { display: none !important; }
    .z36-story-visual::before,
    .z36-story-visual::after { mix-blend-mode: normal !important; }
    .z36-story-word { display: none !important; }

    /* 2. Toolbar: opaque surface instead of a live backdrop blur. */
    .z36-header-inner,
    .z36-header.is-scrolled .z36-header-inner {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        background: rgba(5, 18, 38, .97) !important;
    }
    html[data-zandino-theme="light"] .z36-header .z36-header-inner,
    html[data-zandino-theme="light"] .z36-header.is-scrolled .z36-header-inner { background: rgba(255, 255, 255, .98) !important; }
    .z36-brand-hover { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: #05162b; }
    html[data-zandino-theme="light"] .z36-brand-hover { background: #fff; }

    /* Every other blurred surface (menus, docks, ribbon, ornaments) as well:
       live backdrop blurs are re-sampled on each frame and flicker on phones. */
    .z36-mobile-menu,
    .z36-mobile-dock,
    .z36-reactor-node,
    .z36-command-panel,
    .z36-signal-ribbon > div,
    .z36-idea-rail,
    .z36-about-node,
    .z36-about-orbit-readout,
    .z36-cine-frame-label b,
    .z36-project-card::before,
    .z36-art--social .poster,
    html[data-zandino-header-style="solid"] .z36-header-inner {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    /* 3. Replace the oversized blurs with a cheap gradient bloom. */
    .z36-page-glow,
    .z36-page-hero .z36-page-glow {
        filter: none !important;
        transform: none !important;
        background: radial-gradient(circle at 50% 42%, rgba(27, 108, 255, .2), rgba(27, 108, 255, 0) 72%) !important;
    }
    .z36-hero-glow,
    .z36-hero-beam { filter: none !important; }

    /* 4. A fixed page background repaints on every scroll frame on mobile. */
    body,
    html[data-zandino-theme="light"] body { background-attachment: scroll !important; }

    /* 5. Stop animating decorative layers we no longer need to repaint. */
    .z36-cine-frame-scan,
    .z36-page-grid { animation: none !important; }
    .z36-page-glow,
    .z36-story-visual { will-change: auto !important; }
}

/* ==========================================================================
   Services orbit map: keep the bottom nodes clear of the fixed readout bar
   The readout is absolutely positioned across the bottom 5% of the 520px
   stage; n3/n4/n5 sat inside it. Lifting those nodes keeps every label
   readable and stops the messy overlap.
   ========================================================================== */
.z36-service-orbit .n3 { bottom: 26%; }
.z36-service-orbit .n4 { bottom: 24%; }
.z36-service-orbit .n5 { bottom: 27%; }
.z36-service-orbit .n1 { top: 4%; }
.z36-service-orbit .n6 { top: 26%; }
.z36-service-map-readout p { color: #a6bcd9; font-size: 10.5px; }
.z36-service-map-readout span { color: #6f94cf; }
html[data-zandino-theme="light"] .z36-service-map-readout p { color: #4f657c; }
html[data-zandino-theme="light"] .z36-service-map-readout span { color: #3568c4; }
html[data-zandino-theme="light"] .z36-service-map-readout { border-top-color: #d7e3f0; }

/* ==========================================================================
   Orbital diagrams: nodes ride the drawn rings
   ---------------------------------------------------------------------------
   The nodes used to be placed with hand-tuned percentages, so each one floated
   at its own radius (measured 112px-271px on the same 120/180/240 ring set) and
   a few almost touched. Now every node is anchored to a real ring with the
   rotate/translate/rotate trick, so the labels sit ON the outline instead of
   drifting around it, and the curve reads as one deliberate system.
   ========================================================================== */
.art-services .node,
.z36-page-art.art-services .node {
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    transform-origin: 50% 50%;
}

/* Hero art: inner ring r=140 (280px), dashed outer ring r=210 (420px). */
.z36-page-art.art-services .node.n1 { transform: rotate(0deg)   translate(0, -140px) rotate(0deg); }
.z36-page-art.art-services .node.n2 { transform: rotate(60deg)  translate(0, -210px) rotate(-60deg); }
.z36-page-art.art-services .node.n3 { transform: rotate(120deg) translate(0, -140px) rotate(-120deg); }
.z36-page-art.art-services .node.n4 { transform: rotate(180deg) translate(0, -210px) rotate(-180deg); }
.z36-page-art.art-services .node.n5 { transform: rotate(240deg) translate(0, -140px) rotate(-240deg); }
.z36-page-art.art-services .node.n6 { transform: rotate(300deg) translate(0, -210px) rotate(-300deg); }

/* Keep the labels crisp against the busy ring they now sit on. */
.art-services .node {
    border-color: #2a5a99;
    background: #0a2145;
    box-shadow: 0 8px 22px rgba(3, 13, 35, .45);
    letter-spacing: .06em;
    white-space: nowrap;
}
html[data-zandino-theme="light"] .art-services .node {
    border-color: #c9dcf2;
    background: #fff;
    color: #2367c7;
    box-shadow: 0 8px 22px rgba(31, 61, 100, .1);
}

/* System map: 6 nodes across the 240/360/480 ring set, evenly spaced (60°)
   and mirrored left/right so the diagram stays balanced. */
@media (min-width: 681px) {
    .z36-service-orbit .n1,
    .z36-service-orbit .n2,
    .z36-service-orbit .n3,
    .z36-service-orbit .n4,
    .z36-service-orbit .n5,
    .z36-service-orbit .n6 {
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        transform-origin: 50% 50%;
    }
    /* Radii follow the first two rings (280px and 380px) so every label sits on
       a visible outline, and stay inside the narowest two-column desktop case:
       at 981px the orbit column is only ~455px wide, so a 190px radius plus a
       104px label still clears the edge. Labels wrap instead of stretching the
       row, which keeps the six pills the same visual weight. */
    .z36-service-orbit .n1 { transform: rotate(0deg)   translate(0, -190px) rotate(0deg); }
    .z36-service-orbit .n2 { transform: rotate(60deg)  translate(0, -140px) rotate(-60deg); }
    .z36-service-orbit .n3 { transform: rotate(120deg) translate(0, -190px) rotate(-120deg); }
    .z36-service-orbit .n4 { transform: rotate(180deg) translate(0, -140px) rotate(-180deg); }
    .z36-service-orbit .n5 { transform: rotate(240deg) translate(0, -190px) rotate(-240deg); }
    .z36-service-orbit .n6 { transform: rotate(300deg) translate(0, -140px) rotate(-300deg); }
    .z36-service-orbit > i { width: 280px; height: 280px; }
    .z36-service-orbit > i:nth-of-type(2) { width: 380px; height: 380px; }
    .z36-service-orbit > i:nth-of-type(3) { width: 440px; height: 440px; }
    .z36-service-orbit > .node {
        box-sizing: border-box;
        max-width: 104px;
        text-align: center;
        white-space: normal;
        line-height: 1.4;
    }

    /* The readout bar owns the bottom strip, so reserve room for the two nodes
       that now reach the widest ring. */
    .z36-service-orbit { height: 600px; }
    .z36-service-map-readout { bottom: 8px; }
}

/* Phones: same geometry, tighter radii and lighter labels so nothing collides
   with the core or runs off the 330-390px canvas. */
@media (max-width: 680px) {
    .z36-page-art.art-services > i.o1 { width: 200px; height: 200px; }
    .z36-page-art.art-services > i.o2 { width: 310px; height: 310px; }
    .art-services .node { padding: 6px 8px; font-size: 8px; border-radius: 8px; }
    .z36-page-art.art-services .node.n1 { transform: rotate(0deg)   translate(0, -100px) rotate(0deg); }
    .z36-page-art.art-services .node.n2 { transform: rotate(60deg)  translate(0, -155px) rotate(-60deg); }
    .z36-page-art.art-services .node.n3 { transform: rotate(120deg) translate(0, -100px) rotate(-120deg); }
    .z36-page-art.art-services .node.n4 { transform: rotate(180deg) translate(0, -155px) rotate(-180deg); }
    .z36-page-art.art-services .node.n5 { transform: rotate(240deg) translate(0, -100px) rotate(-240deg); }
    .z36-page-art.art-services .node.n6 { transform: rotate(300deg) translate(0, -155px) rotate(-300deg); }
}

/* ==========================================================================
   Cart · Checkout · Order confirmation
   ---------------------------------------------------------------------------
   These three screens were the only part of the site hard-wired to a light
   canvas, so in dark mode you got dark form fields floating on white cards and
   a page that obviously belonged to a different website — while the notices,
   fields and payment box were still raw WooCommerce defaults.

   Everything below is driven by one small token set that flips with the theme,
   so both modes are designed, not inherited. Light keeps the airy paper canvas;
   dark gets the same hierarchy on the site's navy surface.
   ========================================================================== */
body.zandino-service-cart,
body.zandino-service-checkout,
body.zandino-service-order-received {
    --zcm-surface: #fff;
    --zcm-surface-2: #f7fafd;
    --zcm-border: #dae4f0;
    --zcm-ink: #0f2440;
    --zcm-ink-2: #4b5f78;
    /* #74869c only reached 3.7:1 on white, and these labels render as small as
       10.5px, so the muted tone is one step darker to clear AA. */
    --zcm-ink-3: #5d7086;
    --zcm-accent: #2468d2;
    --zcm-accent-ink: #fff;
    --zcm-accent-soft: #eaf2ff;
    --zcm-ok: #17795a;
    --zcm-danger: #a53f50;
    --zcm-danger-soft: #fff5f6;
    --zcm-shadow: 0 18px 48px rgba(19, 48, 80, .07);
    --zcm-canvas: linear-gradient(180deg, #eef4fa 0, #f8fafc 320px, #f3f6fb 100%);
}
html[data-zandino-theme="dark"] body.zandino-service-cart,
html[data-zandino-theme="dark"] body.zandino-service-checkout,
html[data-zandino-theme="dark"] body.zandino-service-order-received {
    --zcm-surface: #0c2040;
    --zcm-surface-2: #0a1c36;
    --zcm-border: rgba(101, 160, 255, .2);
    --zcm-ink: #eaf2ff;
    --zcm-ink-2: #b6c8e2;
    --zcm-ink-3: #8ba2c1;
    --zcm-accent: #5b9dff;
    --zcm-accent-ink: #04122a;
    --zcm-accent-soft: rgba(91, 157, 255, .15);
    --zcm-ok: #4fd2a2;
    --zcm-danger: #ff93a2;
    --zcm-danger-soft: rgba(255, 110, 130, .13);
    --zcm-shadow: 0 20px 55px rgba(2, 10, 26, .5);
    --zcm-canvas: linear-gradient(180deg, #06142a 0, #0a1c34 320px, #07162b 100%);
}

/* --- Canvas + page title ------------------------------------------------- */
body.zandino-service-cart .z36-generic-content,
body.zandino-service-checkout .z36-generic-content,
body.zandino-service-order-received .z36-generic-content {
    background: var(--zcm-canvas) !important;
    color: var(--zcm-ink);
}
/* The wrapper behind the checkout canvas still carries a light paper colour
   from the shop stylesheet; repaint it so no pale strip can peek through. */
body.zandino-service-cart .z36-inner-main,
body.zandino-service-checkout .z36-inner-main,
body.zandino-service-order-received .z36-inner-main { background: var(--zcm-canvas) !important; }
body.zandino-service-cart .z36-generic-content > .z36-container > .woocommerce,
body.zandino-service-checkout .z36-generic-content > .z36-container > .woocommerce,
body.zandino-service-order-received .z36-generic-content > .z36-container > .woocommerce {
    color: var(--zcm-ink-2);
}
body.zandino-service-cart .z36-generic-content > .z36-container > .woocommerce::before,
body.zandino-service-checkout .z36-generic-content > .z36-container > .woocommerce::before,
body.zandino-service-order-received .z36-generic-content > .z36-container > .woocommerce::before {
    margin: 0 0 20px;
    padding: 0 0 15px;
    border-bottom: 1px solid var(--zcm-border);
    color: var(--zcm-ink);
    font-size: clamp(25px, 2.7vw, 34px);
    font-weight: 900;
    letter-spacing: -.02em;
    line-height: 1.2;
}
body.zandino-service-cart .z36-generic-content > .z36-container > .woocommerce {
    display: grid;
    gap: 18px;
    align-content: start;
}

/* --- Notices (were raw WooCommerce defaults on these screens) ------------- */
body.zandino-service-cart .woocommerce .woocommerce-message,
body.zandino-service-cart .woocommerce .woocommerce-info,
body.zandino-service-cart .woocommerce .woocommerce-error,
body.zandino-service-checkout .woocommerce .woocommerce-message,
body.zandino-service-checkout .woocommerce .woocommerce-info,
body.zandino-service-checkout .woocommerce .woocommerce-error,
body.zandino-service-order-received .woocommerce .woocommerce-message,
body.zandino-service-order-received .woocommerce .woocommerce-info {
    display: flex;
    align-items: center;
    gap: 12px;
    box-sizing: border-box;
    margin: 0 !important;
    padding: 14px 16px !important;
    border: 1px solid var(--zcm-border) !important;
    border-inline-start: 3px solid var(--zcm-accent) !important;
    border-radius: 14px !important;
    background: var(--zcm-surface) !important;
    color: var(--zcm-ink-2) !important;
    font-size: 12.5px;
    line-height: 1.7;
    box-shadow: var(--zcm-shadow);
}
body.zandino-service-cart .woocommerce .woocommerce-message,
body.zandino-service-checkout .woocommerce .woocommerce-message,
body.zandino-service-order-received .woocommerce .woocommerce-message {
    border-inline-start-color: var(--zcm-ok) !important;
}
body.zandino-service-cart .woocommerce .woocommerce-error,
body.zandino-service-checkout .woocommerce .woocommerce-error {
    border-inline-start-color: var(--zcm-danger) !important;
}
body.zandino-service-cart .woocommerce .woocommerce-message::before,
body.zandino-service-cart .woocommerce .woocommerce-info::before,
body.zandino-service-cart .woocommerce .woocommerce-error::before,
body.zandino-service-checkout .woocommerce .woocommerce-message::before,
body.zandino-service-checkout .woocommerce .woocommerce-info::before,
body.zandino-service-checkout .woocommerce .woocommerce-error::before {
    display: none !important;
}
body.zandino-service-cart .woocommerce .woocommerce-message .button,
body.zandino-service-checkout .woocommerce .woocommerce-info .button {
    margin-inline-start: auto;
}

/* --- Empty cart ---------------------------------------------------------- */
/* The empty state is the first thing a visitor sees, so it gets a real card
   with the message, a short explanation of what happens next and one CTA. */
body.zandino-service-cart .woocommerce > .cart-empty {
    display: block;
    box-sizing: border-box;
    margin: 0;
    padding: 46px 24px 8px !important;
    border: 1px solid var(--zcm-border) !important;
    border-inline-start: 1px solid var(--zcm-border) !important;
    border-radius: 22px !important;
    background: var(--zcm-surface) !important;
    color: var(--zcm-ink) !important;
    font-size: 17px;
    font-weight: 850;
    line-height: 1.6;
    text-align: center;
    box-shadow: var(--zcm-shadow);
}
body.zandino-service-cart .woocommerce > .cart-empty::before {
    content: "";
    display: block;
    width: 42px;
    height: 6px;
    margin: 0 auto 22px;
    border-radius: 999px;
    background-image: radial-gradient(circle, var(--zcm-accent) 2.2px, transparent 3px);
    background-size: 13px 6px;
    background-position: 50% 50%;
    background-repeat: repeat-x;
}
body.zandino-service-cart .woocommerce > .cart-empty::after {
    content: "\062e\062f\0645\062a\0020\0631\0627\0020\0627\0646\062a\062e\0627\0628\0020\06a9\0646\06cc\062f\061b\0020\0628\0631\0622\0648\0631\062f\0020\0648\0020\062f\0627\0645\0646\0647\0020\06a9\0627\0631\0020\0631\0627\0020\0647\0645\0627\0646\0020\062c\0627\0020\0645\06cc\200c\0628\06cc\0646\06cc\062f\002c\0020\0648\0020\067e\06cc\0634\0020\0627\0632\0020\067e\0631\062f\0627\062e\062a\0020\0645\0628\0644\063a\0020\0631\0648\06cc\0020\0633\0631\0648\0631\0020\062f\0648\0628\0627\0631\0647\0020\0628\0631\0631\0633\06cc\0020\0645\06cc\200c\0634\0648\062f.";
    display: block;
    max-width: 460px;
    margin: 12px auto 30px;
    color: var(--zcm-ink-3);
    font-size: 12px;
    font-weight: 500;
    line-height: 2;
}
body.zandino-service-cart .woocommerce > .return-to-shop {
    display: flex;
    justify-content: center;
    margin: 0;
}
body.zandino-service-cart .woocommerce > .return-to-shop .button { min-width: 220px; }

/* --- Form fields --------------------------------------------------------- */
body.zandino-service-cart .woocommerce input.input-text,
body.zandino-service-cart .woocommerce textarea,
body.zandino-service-cart .woocommerce select,
body.zandino-service-checkout .woocommerce input.input-text,
body.zandino-service-checkout .woocommerce textarea,
body.zandino-service-checkout .woocommerce select,
body.zandino-service-checkout .woocommerce .select2-container .select2-selection--single {
    box-sizing: border-box !important;
    min-height: 50px !important;
    padding: 12px 14px !important;
    border: 1px solid var(--zcm-border) !important;
    border-radius: 13px !important;
    background: var(--zcm-surface-2) !important;
    color: var(--zcm-ink) !important;
    font-size: 13.5px !important;
    line-height: 1.5;
    box-shadow: none !important;
}
body.zandino-service-cart .woocommerce textarea,
body.zandino-service-checkout .woocommerce textarea { min-height: 118px !important; resize: vertical; }
body.zandino-service-cart .woocommerce input.input-text::placeholder,
body.zandino-service-cart .woocommerce textarea::placeholder,
body.zandino-service-checkout .woocommerce input.input-text::placeholder,
body.zandino-service-checkout .woocommerce textarea::placeholder { color: var(--zcm-ink-3); opacity: 1; }
body.zandino-service-cart .woocommerce input.input-text:focus,
body.zandino-service-checkout .woocommerce input.input-text:focus,
body.zandino-service-checkout .woocommerce textarea:focus,
body.zandino-service-checkout .woocommerce select:focus {
    border-color: var(--zcm-accent) !important;
    box-shadow: 0 0 0 3px var(--zcm-accent-soft) !important;
    outline: 0 !important;
}
body.zandino-service-checkout .woocommerce form .form-row label,
body.zandino-service-checkout .woocommerce .woocommerce-additional-fields label {
    margin-bottom: 7px;
    color: var(--zcm-ink-2);
    font-size: 11.5px;
    font-weight: 700;
}
body.zandino-service-checkout .woocommerce form .form-row label abbr.required,
body.zandino-service-checkout .woocommerce form .form-row label .required {
    color: var(--zcm-danger);
    text-decoration: none;
}

/* --- Cart table ---------------------------------------------------------- */
body.zandino-service-cart .woocommerce-cart-form table.shop_table.cart {
    border: 1px solid var(--zcm-border);
    border-radius: 20px;
    background: var(--zcm-surface);
    box-shadow: var(--zcm-shadow);
}
body.zandino-service-cart .woocommerce-cart-form table.shop_table.cart th,
body.zandino-service-cart .woocommerce-cart-form table.shop_table.cart td { border-color: var(--zcm-border); }
body.zandino-service-cart .woocommerce-cart-form table.shop_table.cart thead th {
    background: var(--zcm-surface-2);
    color: var(--zcm-ink-3);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}
body.zandino-service-cart .woocommerce-cart-form td.product-name > a { color: var(--zcm-ink); }
body.zandino-service-cart .woocommerce-cart-form td.product-price { color: var(--zcm-ink-3); }
body.zandino-service-cart .woocommerce-cart-form td.product-subtotal { color: var(--zcm-accent); }
body.zandino-service-cart .woocommerce-cart-form table.shop_table.cart tr:last-child td { border-bottom: 0; }
body.zandino-service-cart .woocommerce-cart-form dl.variation dt { color: var(--zcm-ink-3); }
body.zandino-service-cart .woocommerce-cart-form dl.variation dd { color: var(--zcm-ink-2); }
body.zandino-service-cart .woocommerce-cart-form a.remove {
    box-sizing: border-box;
    border: 1px solid var(--zcm-border) !important;
    border-radius: 11px !important;
    background: var(--zcm-danger-soft) !important;
    color: var(--zcm-danger) !important;
    font-size: 17px !important;
    line-height: 1 !important;
    transition: filter .16s ease, transform .16s ease;
}
body.zandino-service-cart .woocommerce-cart-form a.remove:hover { filter: brightness(.96); transform: translateY(-1px); }
body.zandino-service-cart .woocommerce-cart-form td.actions { background: var(--zcm-surface-2); }
body.zandino-service-cart .woocommerce-cart-form td.actions .coupon {
    padding: 10px 12px;
    border: 1px solid var(--zcm-border);
    border-radius: 15px;
    background: var(--zcm-surface);
}

/* --- Cart totals --------------------------------------------------------- */
body.zandino-service-cart .cart-collaterals .cart_totals {
    border: 1px solid var(--zcm-border) !important;
    border-radius: 20px !important;
    background: var(--zcm-surface) !important;
    box-shadow: var(--zcm-shadow);
}
body.zandino-service-cart .cart_totals h2 { color: var(--zcm-ink); }
body.zandino-service-cart .cart_totals table.shop_table { border: 0 !important; background: transparent !important; box-shadow: none !important; }
body.zandino-service-cart .cart_totals table.shop_table th,
body.zandino-service-cart .cart_totals table.shop_table td { border-color: var(--zcm-border); color: var(--zcm-ink-2); }
body.zandino-service-cart .cart_totals .order-total td,
body.zandino-service-cart .cart_totals .order-total th { border-top: 1px solid var(--zcm-border); }
body.zandino-service-cart .cart_totals .order-total .amount { color: var(--zcm-accent) !important; font-size: 19px; }
body.zandino-service-cart .wc-proceed-to-checkout a.checkout-button { color: var(--zcm-accent-ink) !important; }

/* --- Checkout columns ---------------------------------------------------- */
body.zandino-service-checkout #customer_details .col-1,
body.zandino-service-checkout #customer_details .col-2,
body.zandino-service-checkout #order_review {
    border: 1px solid var(--zcm-border) !important;
    background: var(--zcm-surface) !important;
    box-shadow: var(--zcm-shadow);
}
body.zandino-service-checkout #customer_details h3,
body.zandino-service-checkout #order_review::before {
    color: var(--zcm-ink);
    border-bottom-color: var(--zcm-border);
}
body.zandino-service-checkout #customer_details h3::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 17px;
    margin-inline-end: 9px;
    border-radius: 2px;
    background: var(--zcm-accent);
    vertical-align: -3px;
}
body.zandino-service-checkout .woocommerce .woocommerce-checkout-review-order table.shop_table {
    border: 0;
    background: transparent;
    box-shadow: none;
}
body.zandino-service-checkout #order_review table.shop_table th,
body.zandino-service-checkout #order_review table.shop_table td { border-color: var(--zcm-border); color: var(--zcm-ink-2); }
body.zandino-service-checkout #order_review table.shop_table .order-total .amount { color: var(--zcm-accent); font-weight: 900; }

/* --- Payment + toggles --------------------------------------------------- */
body.zandino-service-checkout #payment {
    border: 1px solid var(--zcm-border);
    background: var(--zcm-surface-2);
}
body.zandino-service-checkout #payment ul.payment_methods { border-bottom-color: var(--zcm-border); }
body.zandino-service-checkout #payment ul.payment_methods li { color: var(--zcm-ink-2); }
body.zandino-service-checkout #payment ul.payment_methods label { color: var(--zcm-ink); }
body.zandino-service-checkout #payment div.payment_box {
    background: var(--zcm-surface);
    color: var(--zcm-ink-2);
}
body.zandino-service-checkout #payment div.payment_box::before { border-bottom-color: var(--zcm-surface); }
body.zandino-service-checkout #payment .place-order .button,
body.zandino-service-checkout #place_order { color: var(--zcm-accent-ink) !important; }
body.zandino-service-checkout form.checkout_coupon,
body.zandino-service-checkout form.login {
    border-color: var(--zcm-border);
    background: var(--zcm-surface);
    box-shadow: var(--zcm-shadow);
}
body.zandino-service-checkout form.checkout_coupon p,
body.zandino-service-checkout form.login p { color: var(--zcm-ink-2); }

/* --- Order confirmation -------------------------------------------------- */
body.zandino-service-order-received .woocommerce-order-overview li,
body.zandino-service-order-received .woocommerce-order-details,
body.zandino-service-order-received .woocommerce-customer-details {
    border-color: var(--zcm-border);
    background: var(--zcm-surface);
    box-shadow: var(--zcm-shadow);
}
body.zandino-service-order-received .woocommerce-order-overview li { color: var(--zcm-ink-2); border-inline-end-color: var(--zcm-border); }
body.zandino-service-order-received .woocommerce-order-overview li strong { color: var(--zcm-ink); }
body.zandino-service-order-received .woocommerce-order-details h2,
body.zandino-service-order-received .woocommerce-customer-details h2 { color: var(--zcm-ink); }
body.zandino-service-order-received .woocommerce-order-details table.shop_table { border: 0; background: transparent; box-shadow: none; }
body.zandino-service-order-received .woocommerce-order-details table.shop_table th,
body.zandino-service-order-received .woocommerce-order-details table.shop_table td { border-color: var(--zcm-border); color: var(--zcm-ink-2); }

/* --- Select2 dropdowns live outside the form ---------------------------- */
html[data-zandino-theme="dark"] .select2-dropdown,
html[data-zandino-theme="dark"] .select2-container .select2-selection--single {
    border-color: rgba(101, 160, 255, .24) !important;
    background: #0a1c36 !important;
    color: #eaf2ff !important;
}
html[data-zandino-theme="dark"] .select2-container .select2-selection__rendered { color: #eaf2ff !important; }
html[data-zandino-theme="dark"] .select2-results__option { background: #0a1c36; color: #b6c8e2; }
html[data-zandino-theme="dark"] .select2-results__option--highlighted,
html[data-zandino-theme="dark"] .select2-results__option[aria-selected="true"] { background: rgba(91, 157, 255, .18) !important; color: #eaf2ff !important; }

/* --- Direction ---------------------------------------------------------- */
/* WooCommerce ships physical `text-align: left` on table cells, which reads as
   broken in an RTL store: labels hug the right edge while their values drift to
   the far left, so every spec row looked disconnected. */
body.zandino-service-cart .woocommerce-cart-form table.shop_table.cart th,
body.zandino-service-cart .woocommerce-cart-form table.shop_table.cart td,
body.zandino-service-cart .woocommerce-cart-form dl.variation,
body.zandino-service-cart .woocommerce-cart-form dl.variation dt,
body.zandino-service-cart .woocommerce-cart-form dl.variation dd,
body.zandino-service-cart .woocommerce-cart-form dl.variation dd p,
body.zandino-service-checkout #order_review table.shop_table th,
body.zandino-service-checkout #order_review table.shop_table td,
body.zandino-service-checkout .woocommerce form .form-row,
body.zandino-service-checkout .woocommerce form .form-row label,
body.zandino-service-checkout #payment ul.payment_methods li,
body.zandino-service-order-received .woocommerce table.shop_table th,
body.zandino-service-order-received .woocommerce table.shop_table td { text-align: start; }
body.zandino-service-cart .woocommerce-cart-form dl.variation dd { overflow-wrap: anywhere; }

/* --- Phones -------------------------------------------------------------- */
@media (max-width: 720px) {
    body.zandino-service-cart .z36-generic-content > .z36-container > .woocommerce,
    body.zandino-service-checkout .z36-generic-content > .z36-container > .woocommerce { gap: 14px; }
    body.zandino-service-cart .z36-generic-content > .z36-container > .woocommerce::before,
    body.zandino-service-checkout .z36-generic-content > .z36-container > .woocommerce::before {
        margin-bottom: 14px;
        padding-bottom: 12px;
        font-size: 23px;
    }
    body.zandino-service-cart .woocommerce-cart-form table.shop_table.cart tr.cart_item {
        border-color: var(--zcm-border);
        background: var(--zcm-surface);
        box-shadow: var(--zcm-shadow);
    }
    body.zandino-service-cart .woocommerce-cart-form td.actions { border-top: 1px solid var(--zcm-border); }
    body.zandino-service-cart .woocommerce-cart-form td.actions .coupon { float: none; width: 100%; }
    body.zandino-service-cart .cart_totals .order-total .amount { font-size: 17px; }
    body.zandino-service-cart .cart_totals,
    body.zandino-service-checkout #customer_details .col-1,
    body.zandino-service-checkout #customer_details .col-2,
    body.zandino-service-checkout #order_review { box-shadow: 0 12px 32px rgba(11, 35, 66, .07); }
    body.zandino-service-checkout .woocommerce button.button,
    body.zandino-service-cart .woocommerce button.button { min-height: 52px; }
}
@media (max-width: 420px) {
    body.zandino-service-cart .z36-generic-content > .z36-container > .woocommerce::before,
    body.zandino-service-checkout .z36-generic-content > .z36-container > .woocommerce::before { font-size: 21px; }
    body.zandino-service-cart .woocommerce .woocommerce-message,
    body.zandino-service-checkout .woocommerce .woocommerce-info { padding: 12px !important; font-size: 12px; }
}

/* ==========================================================================
   Fixed header + mobile menu
   ---------------------------------------------------------------------------
   The bar is the only element that travels with the user, so it has to stay
   pinned to the viewport on every engine:

   1. No layer promotion on a fixed element. `will-change: transform`,
      `translateZ()` and `backface-visibility: hidden` each hand the bar to
      the compositor as its own layer — and on iOS a promoted *fixed* element
      then rides the scrolled layer for a frame or two before snapping back.
      That is the violent jump users see while flicking a page. The surface is
      already opaque and blur-free on touch widths, so a plain fixed bar is
      both stable and the cheapest thing to paint.
   2. The menu lock is the standard one: `body` becomes `position: fixed` with
      a negative `top` written from JS, so the document keeps its offset and
      nothing can move behind the dialog. `overflow: hidden` on the root is not
      enough on its own — mobile Safari keeps momentum-scrolling the page while
      the panel is open — which is why the lock is paired with the fixed body.
   ========================================================================== */
.z36-header {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
@media (pointer: coarse), (max-width: 980px) {
    .z36-header {
        transition: none;
        will-change: auto;
        transform: none !important;
        backface-visibility: visible;
        -webkit-backface-visibility: visible;
    }
    /* The dock keeps its own translateX centring, so it is only un-promoted. */
    .z36-mobile-dock { will-change: auto; backface-visibility: visible; -webkit-backface-visibility: visible; }

    /* The frozen body must not add an offset of its own — JS owns `top`. */
    html.z36-menu-open { overflow: hidden; overscroll-behavior: none; }
    html.z36-menu-open body { overflow: hidden !important; overscroll-behavior: none; }
    html.z36-menu-open .z36-mobile-panel { touch-action: manipulation; overscroll-behavior: contain; }
}

/* The menu carries its own layer now, so it no longer needs the header's
   z-index escalation to stay on top. */
body.z36-menu-open .z36-header { z-index: 100; }
body.z36-menu-open .z36-mobile-menu { z-index: 2147483000 !important; }

.z36-mobile-menu {
    background: rgba(2, 10, 24, .82);
    transition: opacity .24s ease, visibility .24s ease;
}
html[data-zandino-theme="light"] .z36-mobile-menu { background: rgba(9, 22, 43, .58); }

.z36-mobile-panel {
    inset: 10px;
    padding: 16px;
    border: 1px solid rgba(108, 164, 255, .22);
    border-radius: 24px;
    background: #071426;
    color: #e8f0fb;
    box-shadow: 0 40px 120px rgba(0, 6, 18, .6);
}
html[data-zandino-theme="light"] .z36-mobile-panel {
    border-color: #dbe5f1;
    background: #fff;
    color: #0f2440;
    box-shadow: 0 40px 120px rgba(15, 36, 64, .22);
}

/* Head row: brand + a real close target. */
.z36-mobile-head {
    align-items: center;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(101, 160, 255, .16);
    color: #7e9bc7;
    font-size: 9px;
    letter-spacing: .18em;
}
html[data-zandino-theme="light"] .z36-mobile-head { border-bottom-color: #e4ecf6; color: #7b8ba0; }
.z36-mobile-head button {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(101, 160, 255, .24);
    border-radius: 12px;
    background: rgba(101, 160, 255, .08);
    color: inherit;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}
html[data-zandino-theme="light"] .z36-mobile-head button { border-color: #dbe5f1; background: #f4f8fd; color: #173250; }

/* Item list: one clean row per destination, index pushed to the far side. */
.z36-mobile-panel > ul { gap: 0; padding: 6px 0; }
.z36-mobile-panel > ul a {
    display: flex;
    align-items: center;
    min-height: 54px;
    box-sizing: border-box;
    padding: 0 4px;
    border-bottom: 1px solid rgba(101, 160, 255, .12);
    color: #e8f0fb;
    font-size: 19px;
    font-weight: 850;
    letter-spacing: -.01em;
    text-decoration: none;
    transition: color .2s ease, padding-inline-start .2s ease;
}
html[data-zandino-theme="light"] .z36-mobile-panel > ul a { border-bottom-color: #edf2f8; color: #12304f; }
.z36-mobile-panel > ul a:hover,
.z36-mobile-panel > ul a.is-current { color: #5b9dff; padding-inline-start: 8px; }
html[data-zandino-theme="light"] .z36-mobile-panel > ul a:hover,
html[data-zandino-theme="light"] .z36-mobile-panel > ul a.is-current { color: #2468d2; }
.z36-mobile-panel > ul li:last-child a { border-bottom: 0; }
.z36-mobile-panel > ul a::after {
    margin-inline-start: auto;
    color: rgba(140, 172, 219, .55);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .1em;
}
html[data-zandino-theme="light"] .z36-mobile-panel > ul a::after { color: #93a4b9; }

/* The decorative art panel only earns its space on tall screens. */
.z36-mobile-menu-art { display: none; }
@media (min-height: 820px) and (min-width: 481px) {
    .z36-mobile-menu-art { display: block; }
}

/* Foot: one full-width control, two actions, then the quiet contact line. */
.z36-mobile-foot { gap: 9px; padding-top: 12px; border-top: 1px solid rgba(101, 160, 255, .16); }
html[data-zandino-theme="light"] .z36-mobile-foot { border-top-color: #e4ecf6; }
.z36-mobile-theme-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 46px;
    box-sizing: border-box;
    padding: 0 14px;
    border: 1px solid rgba(101, 160, 255, .22);
    border-radius: 13px;
    background: rgba(101, 160, 255, .07);
    color: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}
html[data-zandino-theme="light"] .z36-mobile-theme-toggle { border-color: #dbe5f1; background: #f5f9fd; color: #173250; }
.z36-mobile-foot .z36-btn,
.z36-mobile-foot .z36-mobile-account {
    min-height: 46px;
    box-sizing: border-box;
    padding: 0 14px;
    border-radius: 13px;
    font-size: 12.5px;
    font-weight: 800;
}
.z36-mobile-email {
    padding-top: 4px;
    color: #7e9bc7;
    font-size: 11px;
    letter-spacing: .02em;
}
html[data-zandino-theme="light"] .z36-mobile-email { color: #6b7c92; }
.z36-mobile-socials a { font-size: 10.5px; }

/* ==========================================================================
   Commerce polish: cart, checkout, order confirmation
   ========================================================================== */
/* A two-step progress rail under the page title makes the flow legible. */
body.zandino-service-cart .z36-generic-content > .z36-container > .woocommerce,
body.zandino-service-checkout .z36-generic-content > .z36-container > .woocommerce,
body.zandino-service-order-received .z36-generic-content > .z36-container > .woocommerce { position: relative; }

/* Service lines: title first, options as a tidy spec list, price last. */
body.zandino-service-cart .woocommerce-cart-form table.shop_table.cart td.product-name > a {
    display: inline-block;
    margin-bottom: 2px;
    font-size: 14px;
    font-weight: 850;
    line-height: 1.55;
}
body.zandino-service-cart .woocommerce-cart-form dl.variation { margin-top: 6px; }
body.zandino-service-cart .woocommerce-cart-form dl.variation dt { font-size: 10px; letter-spacing: .01em; }
body.zandino-service-cart .woocommerce-cart-form dl.variation dd { font-size: 11px; font-weight: 600; }

/* The coupon row is a compact utility, not a full-width field. */
body.zandino-service-cart .woocommerce-cart-form td.actions .coupon {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 420px;
}
body.zandino-service-cart .woocommerce-cart-form td.actions .coupon input.input-text { min-height: 44px !important; }
body.zandino-service-cart .woocommerce-cart-form td.actions .coupon button { min-height: 44px !important; white-space: nowrap; }

/* Totals: a clear, ownable summary card. */
body.zandino-service-cart .cart_totals table.shop_table td,
body.zandino-service-cart .cart_totals table.shop_table th { padding-block: 11px; font-size: 12.5px; }
body.zandino-service-cart .cart_totals .order-total .amount { font-size: 21px; letter-spacing: -.01em; }
body.zandino-service-cart .cart_totals .wc-proceed-to-checkout a.checkout-button {
    min-height: 54px !important;
    box-sizing: border-box;
    font-size: 13.5px;
    font-weight: 850;
}
body.zandino-service-cart .cart_totals .shop_table .woocommerce-shipping-methods,
body.zandino-service-cart .cart_totals .shop_table .woocommerce-shipping-destination { color: var(--zcm-ink-3); font-size: 11px; }

/* Checkout: numbered section chips turn two plain boxes into a guided flow. */
body.zandino-service-checkout #customer_details h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 19px;
    font-weight: 850;
}
body.zandino-service-checkout #customer_details h3::before {
    width: 26px;
    height: 26px;
    margin: 0;
    border-radius: 9px;
    background: var(--zcm-accent-soft);
    color: var(--zcm-accent);
    font-size: 11px;
    font-weight: 900;
    text-align: center;
    line-height: 26px;
}
body.zandino-service-checkout #customer_details .col-1 h3::before { content: "۰۱"; }
body.zandino-service-checkout #customer_details .col-2 h3::before { content: "۰۲"; }
body.zandino-service-checkout #order_review::before {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 19px;
}
body.zandino-service-checkout #order_review::after {
    content: "مبلغ پیش از پرداخت روی سرور دوباره بررسی می‌شود";
    display: block;
    margin: 0 0 16px;
    padding-top: 12px;
    border-top: 1px solid var(--zcm-border);
    color: var(--zcm-ink-3);
    font-size: 10.5px;
    line-height: 1.9;
}
body.zandino-service-checkout #place_order {
    min-height: 56px !important;
    font-size: 14px;
    font-weight: 850;
    letter-spacing: 0;
}
body.zandino-service-checkout .woocommerce-form-coupon-toggle .woocommerce-info,
body.zandino-service-checkout .woocommerce-form-login-toggle .woocommerce-info {
    padding: 12px 15px !important;
    font-size: 12px;
}

/* Order confirmation: lead with the result, then the receipt. */
body.zandino-service-order-received .z36-generic-content > .z36-container > .woocommerce::before { content: "تأیید سفارش"; }
body.zandino-service-order-received .woocommerce-thankyou-order-received {
    margin: 0 0 18px !important;
    padding: 18px !important;
    border: 1px solid var(--zcm-border) !important;
    border-inline-start: 3px solid var(--zcm-ok) !important;
    border-radius: 16px !important;
    background: var(--zcm-surface) !important;
    color: var(--zcm-ink) !important;
    font-size: 16px !important;
    font-weight: 850;
    line-height: 1.7;
    box-shadow: var(--zcm-shadow);
}
body.zandino-service-order-received .woocommerce-order-overview {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0 0 22px !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    list-style: none;
}
body.zandino-service-order-received .woocommerce-order-overview li {
    display: grid !important;
    gap: 4px;
    padding: 13px 15px !important;
    border: 1px solid var(--zcm-border) !important;
    border-radius: 14px !important;
    background: var(--zcm-surface) !important;
    font-size: 10.5px !important;
    box-shadow: 0 10px 28px rgba(3, 14, 34, .18);
}
body.zandino-service-order-received .woocommerce-order-overview li strong { font-size: 14px; }
@media (max-width: 640px) {
    body.zandino-service-order-received .woocommerce-order-overview { grid-template-columns: 1fr; }
}

/* The service cart's phone layout in zandino-shop.css is written at full
   specificity (`… table.shop_table.cart td.product-name > a`), so the shorter
   selectors above still lost to its hard-coded light palette on small screens.
   These rows repeat every value that matters at the same depth. */
@media (max-width: 720px) {
    body.zandino-service-cart .woocommerce-cart-form table.shop_table.cart td,
    body.zandino-service-cart .woocommerce-cart-form table.shop_table.cart td a,
    body.zandino-service-cart .woocommerce-cart-form table.shop_table.cart dl.variation dt,
    body.zandino-service-cart .woocommerce-cart-form table.shop_table.cart dl.variation dd,
    body.zandino-service-cart .woocommerce-cart-form table.shop_table.cart dl.variation dt:first-of-type { text-align: start !important; }
    body.zandino-service-cart .woocommerce-cart-form table.shop_table.cart tr.cart_item {
        border-color: var(--zcm-border) !important;
        background: var(--zcm-surface) !important;
        box-shadow: 0 12px 32px rgba(3, 14, 34, .28);
    }
    body.zandino-service-cart .woocommerce-cart-form table.shop_table.cart td.product-name > a {
        color: var(--zcm-ink) !important;
        font-size: 13.5px;
        line-height: 1.6;
    }
    body.zandino-service-cart .woocommerce-cart-form table.shop_table.cart td.product-price {
        margin-top: 4px;
        color: var(--zcm-ink-3) !important;
        font-size: 11.5px;
    }
    body.zandino-service-cart .woocommerce-cart-form table.shop_table.cart td.product-subtotal {
        margin-top: 2px;
        color: var(--zcm-accent) !important;
        font-size: 13px;
    }
    body.zandino-service-cart .woocommerce-cart-form table.shop_table.cart dl.variation dt {
        margin: 0;
        color: var(--zcm-ink-3) !important;
        font-size: 10.5px;
        line-height: 1.9;
    }
    body.zandino-service-cart .woocommerce-cart-form table.shop_table.cart dl.variation dd {
        color: var(--zcm-ink-2) !important;
        font-size: 11px;
        line-height: 1.9;
    }
    body.zandino-service-cart .woocommerce-cart-form table.shop_table.cart td.product-remove a.remove {
        border: 1px solid var(--zcm-border) !important;
        background: var(--zcm-danger-soft) !important;
        color: var(--zcm-danger) !important;
    }
    body.zandino-service-cart .woocommerce-cart-form table.shop_table.cart td.actions {
        border-top: 1px solid var(--zcm-border);
        background: transparent !important;
    }
    body.zandino-service-cart .woocommerce-cart-form table.shop_table.cart td.actions .coupon input.input-text {
        background: var(--zcm-surface-2) !important;
        color: var(--zcm-ink) !important;
    }
    body.zandino-service-cart .woocommerce-cart-form table.shop_table.cart td.actions button.button {
        color: var(--zcm-ink) !important;
    }
}

/* ==========================================================================
   Cart at desktop widths
   ---------------------------------------------------------------------------
   With five auto-width columns the browser gave the service name a huge cell
   and scattered the prices, so every row read as a long white gap. The columns
   are now sized on purpose, prices align in one numeric column, and from
   1024px the summary sits beside the items where it belongs.
   ========================================================================== */
@media (min-width: 721px) {
    /* Fixed layout makes the widths below authoritative: with auto layout the
       browser handed the surplus space to the remove cell and squeezed the
       service name into 138px. */
    body.zandino-service-cart .woocommerce-cart-form table.shop_table.cart { table-layout: fixed; }
    body.zandino-service-cart .woocommerce-cart-form table.shop_table.cart td.product-name { width: auto; overflow-wrap: anywhere; }
    body.zandino-service-cart .woocommerce-cart-form table.shop_table.cart th.product-remove,
    body.zandino-service-cart .woocommerce-cart-form table.shop_table.cart td.product-remove { width: 62px; text-align: center; }
    body.zandino-service-cart .woocommerce-cart-form table.shop_table.cart th.product-thumbnail,
    body.zandino-service-cart .woocommerce-cart-form table.shop_table.cart td.product-thumbnail { width: 104px; text-align: center; }
    body.zandino-service-cart .woocommerce-cart-form table.shop_table.cart th.product-price,
    body.zandino-service-cart .woocommerce-cart-form table.shop_table.cart td.product-price { width: 168px; text-align: end; white-space: nowrap; }
    body.zandino-service-cart .woocommerce-cart-form table.shop_table.cart th.product-subtotal,
    body.zandino-service-cart .woocommerce-cart-form table.shop_table.cart td.product-subtotal { width: 186px; text-align: end; white-space: nowrap; }
    body.zandino-service-cart .woocommerce-cart-form table.shop_table.cart td.product-price,
    body.zandino-service-cart .woocommerce-cart-form table.shop_table.cart td.product-subtotal { font-size: 13px; font-weight: 700; }

    /* Utility row: coupon anchored to one edge, update action to the other. */
    body.zandino-service-cart .woocommerce-cart-form td.actions {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        flex-wrap: wrap;
        padding: 14px 16px !important;
    }
    body.zandino-service-cart .woocommerce-cart-form td.actions .coupon { float: none; margin: 0; }
    body.zandino-service-cart .woocommerce-cart-form td.actions > button,
    body.zandino-service-cart .woocommerce-cart-form td.actions > .button { margin-inline-start: auto; }
}

@media (min-width: 1024px) {
    body.zandino-service-cart .woocommerce {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 372px;
        gap: 20px;
        align-items: start;
    }
    body.zandino-service-cart .woocommerce > * { grid-column: 1 / -1; }
    body.zandino-service-cart .woocommerce > form.woocommerce-cart-form { grid-column: 1; grid-row: 2; }
    body.zandino-service-cart .cart-collaterals {
        grid-column: 2;
        grid-row: 2;
        position: sticky;
        top: 96px;
        display: block;
        margin: 0;
    }
    body.zandino-service-cart .cart-collaterals .cart_totals { width: 100% !important; }
    body.zandino-service-cart .woocommerce-cart-form td.actions .coupon { max-width: 320px; }
}

/* Checkout on desktop: give the field column more room than the summary. */
@media (min-width: 1024px) {
    body.zandino-service-checkout .woocommerce { grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr); gap: 22px; }
    body.zandino-service-checkout #customer_details .col-1,
    body.zandino-service-checkout #customer_details .col-2 { padding: 24px 26px; }
    body.zandino-service-checkout #order_review { padding: 24px 26px; }
}

/* Trust strip: three short reassurances under the checkout fields. */
@media (min-width: 721px) {
    body.zandino-service-checkout .woocommerce-checkout-review-order-table .cart_item td { padding-block: 12px; }
}

/* ==========================================================================
   Commerce flow: one voice, three steps
   ---------------------------------------------------------------------------
   The cart, checkout and receipt each printed a second page title inside the
   content block ("سبد خدمات", "تکمیل سفارش", "تأیید سفارش") while the hero
   above already carried the real H1. Two titles for one screen read as noise,
   and the cart even disagreed with its own hero (سبد خرید / سبد خدمات).

   That slot now holds a flow kicker instead: a single quiet line that says
   where the visitor is in the three-step service flow. The hero stays the only
   headline, so hierarchy is honest.
   ========================================================================== */
body.zandino-service-cart .z36-generic-content > .z36-container > .woocommerce::before,
body.zandino-service-checkout .z36-generic-content > .z36-container > .woocommerce::before,
body.zandino-service-order-received .z36-generic-content > .z36-container > .woocommerce::before {
    display: block;
    margin: 0 0 18px;
    padding: 0 0 14px;
    border-bottom: 1px solid var(--zcm-border);
    color: var(--zcm-accent);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .18em;
    line-height: 1.4;
    text-transform: uppercase;
}
body.zandino-service-cart .z36-generic-content > .z36-container > .woocommerce::before { content: "CART · STEP 01 / 03"; }
body.zandino-service-checkout .z36-generic-content > .z36-container > .woocommerce::before { content: "CHECKOUT · STEP 02 / 03"; }
body.zandino-service-order-received .z36-generic-content > .z36-container > .woocommerce::before { content: "RECEIPT · STEP 03 / 03"; }
/* A wallet charge has no service steps; naming it "receipt" would promise a
   proforma invoice the customer is not waiting for. */
body.zandino-wallet-topup-received .z36-generic-content > .z36-container > .woocommerce::before { content: "WALLET TOP-UP · STEP 03 / 03"; }

/* Money in a tabular grid: totals stop shivering as digits change. */
body.zandino-service-cart .woocommerce .amount,
body.zandino-service-checkout .woocommerce .amount,
body.zandino-service-order-received .woocommerce .amount { font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

/* Keyboard users get the same affordance as pointer users. */
body.zandino-service-cart .woocommerce :focus-visible,
body.zandino-service-checkout .woocommerce :focus-visible,
body.zandino-service-order-received .woocommerce :focus-visible {
    outline: 2px solid var(--zcm-accent);
    outline-offset: 2px;
}

/* --- Empty cart: the state a first-time visitor actually arrives on ------
   It was a bare WooCommerce notice floated on the canvas, and the dedicated
   card never applied because the message lives in a wrapper
   (`.wc-empty-cart-message > .cart-empty`). It is now a real empty state:
   icon, statement, what-happens-next and one clear way forward. */
body.zandino-service-cart .woocommerce .wc-empty-cart-message {
    box-sizing: border-box;
    margin: 0;
    padding: 34px 22px 28px;
    border: 1px solid var(--zcm-border);
    border-radius: 22px;
    background: var(--zcm-surface);
    text-align: center;
    box-shadow: var(--zcm-shadow);
}
/* The generic notice rule above turns every `.woocommerce-info` into a flex row
   (text + icon side by side) and the empty-cart message carries that class: its
   statement, its icon and its helper paragraph ended up as three columns, with
   the statement squeezed into a sliver. It is a stacked card, so `display` and
   the icon are put back explicitly. */
body.zandino-service-cart .woocommerce .wc-empty-cart-message .cart-empty {
    display: block;
    align-items: initial;
    gap: 0;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    color: var(--zcm-ink) !important;
    font-size: 17px;
    font-weight: 850;
    line-height: 1.7;
}
body.zandino-service-cart .woocommerce .wc-empty-cart-message .cart-empty::before {
    content: "";
    display: block !important;
    /* WooCommerce parks notice icons absolutely (position: absolute; top: 1em;
       inset-inline-start: 1.5em), so simply showing the box again floated the
       sparkle badge on top of the helper paragraph. It belongs in the flow. */
    position: static;
    inset: auto;
    width: 46px;
    height: 46px;
    margin: 0 auto 18px;
    border: 1px solid var(--zcm-border);
    border-radius: 15px;
    background-color: var(--zcm-accent-soft);
    background-image: radial-gradient(circle at 50% 50%, var(--zcm-accent) 3px, transparent 3.4px), radial-gradient(circle at 28% 28%, var(--zcm-accent) 2.4px, transparent 2.8px), radial-gradient(circle at 72% 72%, var(--zcm-accent) 2.4px, transparent 2.8px);
    background-repeat: no-repeat;
}
body.zandino-service-cart .woocommerce .wc-empty-cart-message .cart-empty::after {
    content: "برای شروع یک خدمت را انتخاب کنید، دامنه کار را در صفحه خدمت تأیید کنید و سفارش را در یک قدم ثبت کنید. پیش از پرداخت، همه چیز یک بار دیگر روی سرور بررسی می‌شود.";
    display: block;
    max-width: 430px;
    margin: 12px auto 0;
    color: var(--zcm-ink-3);
    font-size: 12px;
    font-weight: 500;
    line-height: 2;
}
body.zandino-service-cart .woocommerce > .return-to-shop {
    display: flex;
    justify-content: center;
    margin: 18px 0 0 !important;
}
body.zandino-service-cart .woocommerce > .return-to-shop .button { min-width: 240px; }

/* --- Payment section: one named card, one clear decision ---------------- */
/* Three things kept this section looking undrafted:
   1. It had no name. A box of radio rows appeared under the totals with
      nothing saying this is how you pay.
   2. One available method was still presented as a *choice*: a radio gutter
      WooCommerce hides, an accent wash for a selection nothing can change,
      and a bordered description box inside it — three nested surfaces for
      one sentence.
   3. With several methods the rows read as stacked boxes, not as options.
   Now the card is titled, a lone method is *stated* (Z mark, name, what it
   does) and real alternatives are rows with a radio drawn here, where only
   the chosen one carries the accent. */
body.zandino-service-checkout #payment { padding: 18px; }
body.zandino-service-checkout #payment::before {
    content: "روش پرداخت";
    display: block;
    margin: 0 0 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--zcm-border);
    color: var(--zcm-ink);
    font-size: 15px;
    font-weight: 850;
    letter-spacing: -.01em;
}
body.zandino-service-checkout #payment ul.payment_methods {
    display: grid;
    gap: 10px;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    list-style: none;
}
/* WooCommerce floats/clears these; inside a grid they only add stray gaps. */
body.zandino-service-checkout #payment ul.payment_methods::before,
body.zandino-service-checkout #payment ul.payment_methods::after { display: none !important; }
body.zandino-service-checkout #payment ul.payment_methods li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 11px;
    margin: 0 !important;
    padding: 13px 14px !important;
    border-color: transparent !important;
    border-radius: 16px !important;
    background-color: var(--zcm-surface) !important;
    background-image: var(--zsoft-fill-2) !important;
    box-shadow: 0 0 0 1px var(--zcm-border), var(--zsoft-lift-sm) !important;
    list-style: none;
    transition: box-shadow .2s ease, background-color .2s ease;
}
body.zandino-service-checkout #payment ul.payment_methods li:hover { box-shadow: 0 0 0 1px var(--zcm-accent), var(--zsoft-lift-sm) !important; }
body.zandino-service-checkout #payment ul.payment_methods li:not(:only-child):has(input.input-radio:checked) {
    background-color: var(--zcm-accent-soft) !important;
    background-image: none !important;
    box-shadow: 0 0 0 1px var(--zcm-accent), var(--zsoft-lift-sm) !important;
}
/* The browser's radio, redrawn here. `appearance:none` plus an inset ring
   leaves the centre open, which is exactly what "selected" looks like; the
   flat declaration before it is the fallback where color-mix is unsupported. */
body.zandino-service-checkout #payment ul.payment_methods li > input.input-radio {
    flex: none;
    width: 20px;
    height: 20px;
    margin: 0;
    border: 1.5px solid var(--zcm-ink-3);
    border-color: color-mix(in srgb, var(--zcm-ink) 32%, transparent);
    border-radius: 50%;
    background: var(--zcm-surface);
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    transition: border-color .16s ease, box-shadow .16s ease;
}
body.zandino-service-checkout #payment ul.payment_methods li > input.input-radio:checked {
    border-color: var(--zcm-accent);
    box-shadow: inset 0 0 0 4.5px var(--zcm-accent);
}
body.zandino-service-checkout #payment ul.payment_methods li > input.input-radio:focus-visible {
    outline: 2px solid var(--zcm-accent);
    outline-offset: 3px;
}
body.zandino-service-checkout #payment ul.payment_methods li > label {
    flex: 1 1 140px;
    min-width: 0;
    margin: 0;
    color: var(--zcm-ink) !important;
    font-size: 13.5px;
    font-weight: 850;
    line-height: 1.7;
    cursor: pointer;
}
/* The description sits *under* its row, aligned with the method name and
   separated by a hairline — no second box inside the first. */
body.zandino-service-checkout #payment ul.payment_methods li > .payment_box {
    flex: 1 1 100%;
    margin: 2px 0 0 !important;
    padding: 12px 0 0 !important;
    padding-inline-start: 31px !important;
    border: 0 !important;
    border-top: 1px solid var(--zcm-border) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--zcm-ink-2) !important;
    font-size: 12.5px;
    line-height: 1.95;
    box-shadow: none !important;
}
body.zandino-service-checkout #payment ul.payment_methods li > .payment_box::before { display: none !important; }
body.zandino-service-checkout #payment ul.payment_methods li > .payment_box p { margin: 0; }
body.zandino-service-checkout #payment ul.payment_methods > li.woocommerce-info { display: block; padding: 14px 16px !important; }

/* Nothing to choose: only one method is available. A lone option is not a
   choice, so no radio, no accent wash, no box inside the box — the site's Z
   mark, the method name, and one sentence saying what it does. */
body.zandino-service-checkout #payment ul.payment_methods li:only-child:not(.woocommerce-info) {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
}
body.zandino-service-checkout #payment ul.payment_methods li:only-child:not(.woocommerce-info) > input.input-radio { display: none !important; }
body.zandino-service-checkout #payment ul.payment_methods li:only-child:not(.woocommerce-info) > label {
    display: flex;
    align-items: center;
    gap: 13px;
    flex: 1 1 100%;
    font-size: 14.5px;
}
body.zandino-service-checkout #payment ul.payment_methods li:only-child:not(.woocommerce-info) > label::before {
    content: "";
    flex: none;
    width: 9px;
    height: 9px;
    border-radius: 2px;
    background: var(--zcm-accent);
    box-shadow: 0 0 0 5px var(--zcm-accent-soft);
    transform: rotate(45deg);
}
body.zandino-service-checkout #payment ul.payment_methods li:only-child:not(.woocommerce-info) > .payment_box {
    padding: 13px 0 0 !important;
    padding-inline-start: 0 !important;
}
body.zandino-service-checkout #payment ul.payment_methods li:only-child:not(.woocommerce-info) > label:hover::before { background: var(--zcm-accent); box-shadow: 0 0 0 6px var(--zcm-accent-soft); }

/* The card footer: terms, then the one action. */
body.zandino-service-checkout #payment .form-row.place-order { margin: 16px 0 0 !important; padding: 0 !important; gap: 0; }
body.zandino-service-checkout #payment .woocommerce-terms-and-conditions-wrapper { margin: 0 0 14px; font-size: 12px; line-height: 1.85; }
body.zandino-service-checkout #payment .woocommerce-terms-and-conditions-wrapper a { color: var(--zcm-accent); font-weight: 800; text-decoration: none; }
body.zandino-service-checkout #payment .woocommerce-privacy-policy-text p { margin: 0; color: var(--zcm-ink-2); font-size: 11.5px; line-height: 1.95; text-align: start; }
body.zandino-service-checkout #payment #place_order {
    width: 100%;
    min-height: 52px !important;
    border-radius: 14px !important;
    font-size: 14px !important;
    letter-spacing: -.01em;
    box-shadow: 0 14px 30px -18px color-mix(in srgb, var(--zcm-accent) 75%, transparent);
}
body.zandino-service-checkout #payment #place_order:hover { box-shadow: 0 18px 36px -16px color-mix(in srgb, var(--zcm-accent) 90%, transparent); }
body.zandino-service-checkout form.checkout_coupon .form-row,
body.zandino-service-checkout form.login .form-row { margin: 0 0 12px; }

/* --- Receipt: what happens next ---------------------------------------- */
body.zandino-service-order-received .zcp-thankyou-next {
    margin: 20px 0 0;
    padding: 20px 22px;
    border: 1px solid var(--zcm-border);
    border-radius: 18px;
    background: var(--zcm-surface);
    box-shadow: var(--zcm-shadow);
}
body.zandino-service-order-received .zcp-thankyou-next h3 {
    margin: 0 0 14px;
    color: var(--zcm-ink);
    font-size: 15px;
    font-weight: 850;
}
body.zandino-service-order-received .zcp-thankyou-next ol { margin: 0; padding: 0; list-style: none; counter-reset: zcp-next; }
body.zandino-service-order-received .zcp-thankyou-next li {
    position: relative;
    margin: 0 0 10px;
    padding-inline-start: 34px;
    color: var(--zcm-ink-2);
    font-size: 12.5px;
    line-height: 1.95;
    counter-increment: zcp-next;
}
body.zandino-service-order-received .zcp-thankyou-next li::before {
    content: counter(zcp-next);
    position: absolute;
    inset-inline-start: 0;
    top: 1px;
    width: 22px;
    height: 22px;
    border-radius: 8px;
    background: var(--zcm-accent-soft);
    color: var(--zcm-accent);
    font-size: 10.5px;
    font-weight: 900;
    text-align: center;
    line-height: 22px;
}
body.zandino-service-order-received .zcp-thankyou-next__amount {
    margin: 14px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--zcm-border);
    color: var(--zcm-ink-3);
    font-size: 12px;
}
body.zandino-service-order-received .zcp-thankyou-next__amount strong { color: var(--zcm-accent); font-size: 15px; }
body.zandino-service-order-received .zcp-thankyou-next__hint {
    margin: 10px 0 0;
    color: var(--zcm-ink-3);
    font-size: 11.5px;
    line-height: 1.9;
}
body.zandino-service-order-received .zcp-thankyou-next__links { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 0; }
body.zandino-service-order-received .zcp-ghost-link {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid var(--zcm-border);
    border-radius: 12px;
    color: var(--zcm-ink) !important;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none !important;
}
body.zandino-service-order-received .zcp-ghost-link:hover { border-color: var(--zcm-accent); color: var(--zcm-accent) !important; }
/* The payment link is the one thing that finishes a wallet charge, so it is a
   filled action and not another quiet link next to the other two. */
body.zandino-service-order-received .zcp-pay-link {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 20px;
    border-radius: 12px;
    background: var(--zcm-accent);
    color: #08111c !important;
    font-size: 12.5px;
    font-weight: 900;
    text-decoration: none !important;
    box-shadow: 0 10px 24px -14px var(--zcm-accent);
}
body.zandino-service-order-received .zcp-pay-link:hover { transform: translateY(-1px); filter: brightness(1.06); }

/* --- Phones: labels, sticky total and comfortable tap targets ----------- */
@media (max-width: 720px) {
    /* The price cells carried a struck base price and the charged total with no
       labels, so the card read as two random numbers. `data-title` is already
       printed by WooCommerce for responsive tables — it just needs showing. */
    body.zandino-service-cart .woocommerce-cart-form table.shop_table.cart td.product-price::before,
    body.zandino-service-cart .woocommerce-cart-form table.shop_table.cart td.product-subtotal::before {
        content: attr(data-title);
        display: inline-block;
        margin-inline-end: 7px;
        color: var(--zcm-ink-3);
        font-size: 10.5px;
        font-weight: 700;
    }
    body.zandino-service-cart .woocommerce-cart-form table.shop_table.cart td.product-subtotal::before { color: var(--zcm-ink-2); font-weight: 800; }
    body.zandino-service-cart .woocommerce-cart-form table.shop_table.cart td.product-price del,
    body.zandino-service-cart .woocommerce-cart-form table.shop_table.cart td.product-subtotal del { opacity: .62; }
    body.zandino-service-cart .woocommerce-cart-form table.shop_table.cart colgroup,
    body.zandino-service-cart .woocommerce-cart-form table.shop_table.cart td.product-thumbnail { display: none; }

    /* The total follows the thumb: you never have to hunt for the button. */
    body.zandino-service-cart .cart-collaterals .wc-proceed-to-checkout { position: sticky; bottom: 6px; z-index: 6; }
    body.zandino-service-cart .cart-collaterals .wc-proceed-to-checkout a.checkout-button { min-height: 56px !important; }
    body.zandino-service-cart .cart_totals { padding-bottom: 10px; }

    body.zandino-service-checkout #payment ul.payment_methods li:not(:only-child) { padding: 12px !important; }
    body.zandino-service-checkout #payment ul.payment_methods li > .payment_box { padding-inline-start: 0 !important; }
    body.zandino-service-order-received .zcp-thankyou-next { padding: 18px; }
}

/* --- Touch controls: everything reachable with a thumb ------------------ */
@media (pointer: coarse), (max-width: 980px) {
    .z36-menu-toggle,
    .z36-theme-toggle { width: 44px !important; height: 44px !important; min-width: 44px !important; }
    .z36-menu-toggle span { width: 19px; margin: 5.5px auto; }
    .z36-account-link { width: 44px !important; height: 44px !important; }
    .z36-header-inner { height: 52px; }
}
@media (max-width: 380px) {
    .z36-header-inner { height: 50px; }
    .z36-menu-toggle,
    .z36-theme-toggle { width: 40px !important; height: 40px !important; min-width: 40px !important; }
}

/* ==========================================================================
   SOFT SURFACE LANGUAGE
   ---------------------------------------------------------------------------
   Light mode read as "sharp" because every panel was a flat white fill inside
   a crisp 1px outline, with a shadow too faint to lift it off the canvas. Depth
   now comes from three softer cues instead of a drawn box:

     • a hairline *ring* drawn with a shadow (6-8% ink) that reads as a soft
       edge rather than a ruled border;
     • a barely-there vertical gradient, so a surface has a top and a bottom;
     • two stacked shadows — a tight contact shadow plus a wide, low-opacity
       diffusion — so panels sit on the canvas instead of being cut into it.

   Radii grow with the size of the surface. The `balanced` corner setting is
   respected: `compact` keeps its 16px family untouched.
   ========================================================================== */

:root {
    --zsoft-ring: rgba(20, 53, 95, .075);
    --zsoft-ring-2: rgba(20, 53, 95, .11);
    --zsoft-hair: inset 0 1px 0 rgba(255, 255, 255, .9);
    --zsoft-lift-sm: 0 1px 2px rgba(16, 42, 76, .04), 0 14px 32px -22px rgba(16, 42, 76, .26);
    --zsoft-lift-md: 0 1px 2px rgba(16, 42, 76, .05), 0 22px 48px -26px rgba(16, 42, 76, .32);
    --zsoft-lift-lg: 0 2px 5px rgba(10, 30, 60, .07), 0 40px 90px -46px rgba(16, 42, 76, .42);
    --zsoft-fill: linear-gradient(180deg, #ffffff 0%, #fdfeff 58%, #f8fbfe 100%);
    --zsoft-fill-2: linear-gradient(180deg, #fcfeff 0%, #f4f8fc 100%);
    --zsoft-canvas: radial-gradient(115% 52% at 50% -6%, #ffffff 0%, rgba(255, 255, 255, 0) 62%),
                    radial-gradient(80% 46% at 100% 0%, rgba(58, 120, 220, .07), rgba(58, 120, 220, 0) 60%),
                    linear-gradient(180deg, #f3f7fc 0%, #f8fbfe 100%);
}
html[data-zandino-theme="dark"] {
    --zsoft-ring: rgba(118, 168, 255, .13);
    --zsoft-ring-2: rgba(118, 168, 255, .19);
    --zsoft-hair: inset 0 1px 0 rgba(173, 210, 255, .07);
    --zsoft-lift-sm: 0 1px 1px rgba(0, 6, 18, .34), 0 18px 40px -24px rgba(0, 6, 18, .6);
    --zsoft-lift-md: 0 1px 1px rgba(0, 6, 18, .34), 0 26px 54px -28px rgba(0, 6, 18, .66);
    --zsoft-lift-lg: 0 2px 3px rgba(0, 6, 18, .38), 0 44px 96px -48px rgba(0, 6, 18, .76);
    --zsoft-fill: linear-gradient(180deg, #0d2040 0%, #091833 100%);
    --zsoft-fill-2: linear-gradient(180deg, #0a1c36 0%, #081528 100%);
    --zsoft-canvas: radial-gradient(115% 52% at 50% -6%, rgba(74, 132, 240, .16) 0%, rgba(74, 132, 240, 0) 62%),
                    linear-gradient(180deg, #06142a 0%, #07162b 100%);
}

/* Light canvas: one soft wash from the top instead of a flat grey field. */
html[data-zandino-theme="light"] body {
    background-color: #f5f8fc;
    background-image: var(--zsoft-canvas);
    background-attachment: scroll;
}

/* Toolbar: hairline ring + diffusion, no ruled outline. */
.z36-header-inner {
    border-color: transparent !important;
    box-shadow: 0 0 0 1px var(--zsoft-ring), 0 12px 32px -20px rgba(9, 31, 62, .42), var(--zsoft-hair) !important;
}
html[data-zandino-theme="light"] .z36-header-inner {
    box-shadow: 0 0 0 1px var(--zsoft-ring), 0 12px 30px -20px rgba(23, 64, 130, .3), var(--zsoft-hair) !important;
}

/* Heading accents were 2px razor lines; now a soft rounded highlight. */
.z36-cine-heading::before {
    height: 3px;
    bottom: -.16em;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(77, 156, 255, .8), rgba(77, 156, 255, .04));
    box-shadow: 0 7px 20px -8px rgba(70, 145, 255, .6);
    opacity: .5;
}
html[data-zandino-theme="light"] .z36-cine-heading::before {
    background: linear-gradient(90deg, rgba(36, 104, 210, .7), rgba(36, 104, 210, .03));
    box-shadow: 0 7px 18px -9px rgba(36, 104, 210, .5);
}

/* --- Narrative panels (the three story steps) --------------------------- */
html[data-zandino-theme="light"] .z36-story {
    background: radial-gradient(125% 62% at 50% 0%, #f3f8fd 0%, #eaf1f9 46%, #e1eaf4 100%) !important;
}
html:not([data-zandino-corners="compact"]) .z36-story-step { border-radius: 26px !important; }
html[data-zandino-theme="light"] .z36-story-step {
    border-color: transparent !important;
    background-color: #fff;
    background-image: var(--zsoft-fill) !important;
    box-shadow: 0 0 0 1px var(--zsoft-ring), var(--zsoft-lift-md), var(--zsoft-hair) !important;
}
html[data-zandino-theme="light"] .z36-story-step:not(.is-active) {
    background-color: #fbfdff;
    background-image: var(--zsoft-fill-2) !important;
    box-shadow: 0 0 0 1px var(--zsoft-ring), 0 10px 26px -20px rgba(16, 42, 76, .3) !important;
}
/* The dark showcase panel used to sit inside a pale 1px outline, which made it
   look pasted on the page. It gets a soft ring and a deep diffused shadow. */
.z36-story-visual {
    border-color: transparent !important;
    box-shadow: 0 0 0 1px var(--zsoft-ring-2), var(--zsoft-lift-lg), var(--zsoft-hair) !important;
}
html[data-zandino-theme="light"] .z36-story-visual {
    box-shadow: 0 0 0 1px rgba(20, 53, 95, .09), 0 34px 78px -40px rgba(9, 32, 66, .55) !important;
}

/* --- The rest of the card family --------------------------------------- */
html:not([data-zandino-corners="compact"]) :is(.z36-cap-card, .z36-blog-card, .z36-faq-grid article, .z36-proof-board) {
    border-radius: 26px;
}
/* `--1` is the dark leader card (white ink on navy) and must never receive the
   light surface: filling it white made its own text vanish. */
html[data-zandino-theme="light"] :is(.z36-cap-card:not(.z36-cap-card--1), .z36-blog-card, .z36-faq-grid article, .z36-proof-board) {
    border-color: transparent !important;
    background-color: #fff;
    background-image: var(--zsoft-fill) !important;
    box-shadow: 0 0 0 1px var(--zsoft-ring), var(--zsoft-lift-sm), var(--zsoft-hair) !important;
}
html[data-zandino-theme="light"] :is(.z36-cap-card:not(.z36-cap-card--1), .z36-blog-card, .z36-faq-grid article):hover {
    box-shadow: 0 0 0 1px var(--zsoft-ring-2), var(--zsoft-lift-md), var(--zsoft-hair) !important;
}
html[data-zandino-theme="light"] .z36-cap-card--1 {
    border-color: transparent !important;
    background-color: #0a1c37 !important;
    background-image: linear-gradient(180deg, #0d2344 0%, #08182f 100%) !important;
    box-shadow: 0 0 0 1px rgba(30, 65, 109, .55), 0 26px 60px -30px rgba(9, 31, 66, .62), inset 0 1px 0 rgba(173, 210, 255, .07) !important;
}
html[data-zandino-theme="light"] .z36-cap-card p { color: #5f7189; }
html[data-zandino-theme="light"] .z36-cap-card--1 p { color: #b9cbe8; }
/* The leader card is the one dark surface sitting in a row of light ones, so
   the two marks that the light theme re-inks for a white card — the index and
   the arrow — landed dark-on-dark here: `01` measured 1.9:1 and `↗` 2.9:1,
   which is exactly the line the complaint pointed at. They now take ink from
   the surface they sit on rather than from the theme, in both themes. */
html[data-zandino-theme="light"] .z36-cap-card--1 .num { color: #93aacb; }
html:not([data-zandino-theme="light"]) .z36-cap-card--1 .num { color: #a9c2e4; }
.z36-cap-card--1 .arrow { color: #a8ceff; opacity: .9; }
/* Same orphaned scaffolding, second symptom: the arrow was lifted to sit on top
   of the missing browser mock (`bottom: 28px + 135px + 12px`), so on a card
   that is only as tall as its text the mark floated up next to the index
   instead of closing the card. It returns to the card family's own offset. */
.z36-cap-card--1 .arrow { bottom: 18px; }

/* ==========================================================================
   Principles (web-design): two by two
   ---------------------------------------------------------------------------
   Four tracks across a 1216px container handed each card a 290px column, so a
   10px index, a 21px title and an 11px body sat in a thin sliver behind 220px
   of forced height — the row read as a table of contents. Two by two gives
   every principle a real heading line and a paragraph that can breathe, and
   the index becomes a chip so the card has a deliberate top edge.
   ========================================================================== */
.z36-principles-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.z36-principles-grid article {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 30px 30px 32px;
    border-color: transparent !important;
    border-radius: 24px;
}
.z36-principles-grid article > span {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
}
.z36-principles-grid h3 { margin: 18px 0 10px; font-size: 24px; letter-spacing: -.01em; }
.z36-principles-grid p { max-width: 46ch; font-size: 13.5px; line-height: 1.9; }
html[data-zandino-theme="light"] .z36-principles-grid article {
    background-image: var(--zsoft-fill) !important;
    box-shadow: 0 0 0 1px var(--zsoft-ring), var(--zsoft-lift-sm), var(--zsoft-hair) !important;
}
html[data-zandino-theme="light"] .z36-principles-grid article > span { background: #eaf2ff; color: #2456e6; }
html[data-zandino-theme="light"] .z36-principles-grid h3 { color: #0f2440; }
html[data-zandino-theme="light"] .z36-principles-grid p { color: #5d7086; }
html[data-zandino-theme="dark"] .z36-principles-grid article {
    background-image: var(--zsoft-fill) !important;
    box-shadow: 0 0 0 1px var(--zsoft-ring), var(--zsoft-lift-sm), var(--zsoft-hair) !important;
}
html[data-zandino-theme="dark"] .z36-principles-grid article > span { background: rgba(118, 168, 255, .15); color: #a8c6f4; }
html[data-zandino-theme="dark"] .z36-principles-grid p { color: #b6c8e2; }
@media (max-width: 680px) {
    .z36-principles-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .z36-principles-grid article { padding: 22px 22px 24px; }
    .z36-principles-grid h3 { margin: 14px 0 8px; font-size: 20px; }
    .z36-principles-grid p { font-size: 12.5px; line-height: 1.85; }
}

/* ==========================================================================
   Journal row: a grid that matches how many posts actually exist
   ---------------------------------------------------------------------------
   The row is designed for three posts, but the site currently publishes one,
   so a single 394px card sat at the inline start of a 1216px row with two
   empty tracks beside it — the "its place is wrong" report. The grid now
   adapts: one post becomes a feature with the cover beside the copy, two posts
   become a pair, three or more keep the three-up magazine row.
   ========================================================================== */
.z36-blog-grid:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
.z36-blog-grid:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 981px) {
    .z36-blog-grid:has(> :only-child) > :first-child {
        display: grid;
        grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
        align-items: stretch;
    }
    .z36-blog-grid:has(> :only-child) > :first-child .media { height: 100%; min-height: 300px; }
    .z36-blog-grid:has(> :only-child) > :first-child .body {
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-height: 0;
        padding: 36px 36px 38px;
    }
    .z36-blog-grid:has(> :only-child) > :first-child h3 { margin: 14px 0 12px; font-size: 30px; }
    .z36-blog-grid:has(> :only-child) > :first-child p { max-width: 48ch; padding-left: 0; font-size: 14px; }
    .z36-blog-grid:has(> :only-child) > :first-child .arrow { position: static; align-self: flex-start; margin-top: 20px; }
}

/* ==========================================================================
   Story steps on desktop: numbered chapters instead of plain white boxes
   ---------------------------------------------------------------------------
   Each step carried a 48px headline, a paragraph and ~92px of symmetric
   padding, and its content was centred in the box, so the three cards read as
   a wall of loose type rather than a sequence. On two-column desktop they are
   chapters now: the label becomes a chip, the type scale is one step calmer,
   content aligns to the top (so the three cards share a baseline), and the
   scene the panel is actually showing carries an accent rail.
   ========================================================================== */
@media (min-width: 981px) {
    .z36-story-step {
        position: relative;
        justify-content: flex-start;
        overflow: hidden;
        padding: 32px 36px 34px;
        border-radius: 26px;
    }
    .z36-story-step::before {
        content: "";
        position: absolute;
        inset-block: 24px;
        inset-inline-start: 0;
        width: 3px;
        border-radius: 0 3px 3px 0;
        background: linear-gradient(180deg, #4a8cff, #2456e6);
        opacity: 0;
        transition: opacity .45s ease;
    }
    .z36-story-step.is-active::before { opacity: 1; }
    .z36-story-step > span {
        display: inline-flex;
        align-items: center;
        align-self: flex-start;
        padding: 5px 12px;
        border-radius: 999px;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: .1em;
    }
    .z36-story-step h2 { margin: 16px 0 14px; font-size: clamp(28px, 2.7vw, 40px); line-height: 1.3; }
    .z36-story-step p { font-size: 14px; line-height: 1.95; }
}
html[data-zandino-theme="light"] .z36-story-step > span { background: #eaf2ff; color: #2456e6; }
html[data-zandino-theme="dark"] .z36-story-step > span { background: rgba(118, 168, 255, .14); color: #9dc2ff; }
html[data-zandino-theme="light"] .z36-story-step {
    border-color: transparent !important;
    background-image: var(--zsoft-fill) !important;
    box-shadow: 0 0 0 1px var(--zsoft-ring), var(--zsoft-lift-sm), var(--zsoft-hair) !important;
}
html[data-zandino-theme="light"] .z36-story-step.is-active {
    box-shadow: 0 0 0 1px rgba(36, 86, 230, .18), var(--zsoft-lift-md), var(--zsoft-hair) !important;
}

/* ==========================================================================
   Work archive (projects): one clear card, and half the scrolling on a phone
   ---------------------------------------------------------------------------
   The mosaic widths stay — that asymmetry is the page's character — but each
   card now closes properly: the dark cover fades into the meta band instead of
   being cut off by it, the category becomes a chip, and the arrow becomes a
   badge that fills on hover so the card has an obvious affordance. On a phone
   the cards were a fixed 460px, which meant four screens of cover art before
   the titles; the cover is capped now, so a card is a title you can actually
   reach.
   ========================================================================== */
.z36-archive-card {
    border-color: transparent !important;
    box-shadow: 0 0 0 1px var(--zsoft-ring-2), var(--zsoft-lift-lg) !important;
}
.z36-archive-card .media { position: relative; height: 62%; }
.z36-archive-card .media::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 42%;
    background: linear-gradient(180deg, rgba(7, 20, 38, 0) 0%, rgba(7, 20, 38, .82) 100%);
    pointer-events: none;
}
.z36-archive-card .meta { align-items: flex-end; }
.z36-archive-card .meta small {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    margin-bottom: 10px;
    border-radius: 999px;
    background: rgba(118, 168, 255, .14);
    box-shadow: inset 0 0 0 1px rgba(118, 168, 255, .2);
    color: #a8c6f4 !important;
    font-size: 9.5px;
    font-weight: 750;
    letter-spacing: .06em;
}
.z36-archive-card .meta h2 { font-size: 22px; line-height: 1.4; margin: 0 0 8px; }
.z36-archive-card .meta p { margin: 0; color: #a9bedb; font-size: 12px; line-height: 1.85; }
.z36-archive-card .meta > strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, .07);
    box-shadow: inset 0 0 0 1px rgba(118, 168, 255, .22);
    font-size: 16px;
    font-weight: 400;
    transition: background .35s ease, color .35s ease, box-shadow .35s ease;
}
.z36-archive-card:hover .meta > strong,
.z36-archive-card:focus-within .meta > strong {
    background: linear-gradient(135deg, #4a8cff, #2456e6);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28), 0 14px 30px -14px rgba(31, 84, 214, .8);
    color: #fff;
}
html[data-zandino-theme="light"] .z36-archive-card .media::after {
    background: linear-gradient(180deg, rgba(7, 20, 38, 0) 0%, rgba(7, 20, 38, .88) 100%);
}
@media (max-width: 680px) {
    .z36-archive-card,
    .z36-archive-card.c1,
    .z36-archive-card.c2,
    .z36-archive-card.c5,
    .z36-archive-card.c6 { min-height: 0; }
    .z36-archive-card .media { height: auto; min-height: 0; aspect-ratio: 16 / 10; }
    .z36-archive-card .meta { padding: 16px 18px 18px; gap: 14px; }
    .z36-archive-card .meta h2 { font-size: 18px; margin-bottom: 6px; }
    .z36-archive-card .meta p { font-size: 11.5px; line-height: 1.8; }
    .z36-archive-card .meta > strong { width: 34px; height: 34px; font-size: 14px; }
}

/* ==========================================================================
   Leader card: the reserved space under the copy
   ---------------------------------------------------------------------------
   `.z36-cap-card--1` still reserves 164-176px of bottom padding for a browser
   mock (`--z36-cap-browser-*`) that no longer exists in the markup, so on the
   carousel the card ended in a tall empty band with nothing in it but the
   arrow — the "half-empty card" that got reported. On the two-column grid the
   height comes from the row span, so this only changes the carousel, where the
   card now ends just under its own text like its siblings.
   ========================================================================== */
.z36-cap-card--1 { padding-bottom: 30px; }
@media (max-width: 980px) {
    .z36-cap-card--1 { padding-bottom: 20px; }
}
/* Dark tiles on a light canvas: soften the cut edge, keep them dark. */
html:not([data-zandino-corners="compact"]) :is(.z36-project-card, .z36-archive-card, .z36-svc-frame) {
    border-radius: 30px;
}
:is(.z36-project-card, .z36-archive-card, .z36-svc-frame) {
    border-color: transparent !important;
    box-shadow: 0 0 0 1px var(--zsoft-ring-2), var(--zsoft-lift-lg) !important;
}

/* ==========================================================================
   Commerce refinement (cart · checkout · order received)
   ---------------------------------------------------------------------------
   The flow already had a themed palette, but three things kept it looking
   undrafted rather than designed:

   1. Every surface was a flat fill with a visible outline — the same "sharp"
      problem the rest of the light theme had.
   2. The coupon cell was a grid whose invisible screen-reader label still
      claimed a row, so the apply button stretched the full width and shouted
      louder than the real primary action.
   3. A permanently disabled "update basket" button sat under it — the cart
      sells one-off services, so there is nothing to update.
   ========================================================================== */
body.zandino-service-cart,
body.zandino-service-checkout,
body.zandino-service-order-received {
    --zcm-border: rgba(24, 58, 102, .08);
    --zcm-field: #ffffff;
    --zcm-surface-2: #fbfdff;
    --zcm-canvas: radial-gradient(115% 52% at 50% -6%, #ffffff 0%, rgba(255, 255, 255, 0) 62%),
                  linear-gradient(180deg, #f4f8fc 0, #fbfdfe 280px, #f6f9fd 100%);
    --zcm-shadow: 0 1px 2px rgba(16, 42, 76, .04), 0 22px 46px -28px rgba(16, 42, 76, .34);
}
html[data-zandino-theme="dark"] body.zandino-service-cart,
html[data-zandino-theme="dark"] body.zandino-service-checkout,
html[data-zandino-theme="dark"] body.zandino-service-order-received {
    --zcm-border: rgba(118, 168, 255, .13);
    --zcm-field: #0a1c36;
    --zcm-surface-2: #0b1e3a;
    --zcm-canvas: radial-gradient(115% 52% at 50% -6%, rgba(74, 132, 240, .16) 0%, rgba(74, 132, 240, 0) 62%),
                  linear-gradient(180deg, #06142a 0, #081830 280px, #06142a 100%);
    --zcm-shadow: 0 1px 1px rgba(0, 6, 18, .34), 0 26px 54px -30px rgba(0, 6, 18, .66);
}

/* One canvas, painted once. `body`, the page wrapper and the inner main all
   carried the same gradient, so each painted its own white radial falloff and
   the overlaps showed up as a grey band with a visible seam under the kicker. */
body.zandino-service-cart .z36-generic-content,
body.zandino-service-checkout .z36-generic-content,
body.zandino-service-order-received .z36-generic-content,
body.zandino-service-cart .z36-inner-main,
body.zandino-service-checkout .z36-inner-main,
body.zandino-service-order-received .z36-inner-main { background: transparent !important; }

/* Cards: hairline ring + gradient fill + contact/diffusion shadow pair. */
body.zandino-service-cart .woocommerce-cart-form table.shop_table.cart,
body.zandino-service-cart .cart-collaterals .cart_totals,
body.zandino-service-checkout #customer_details .col-1,
body.zandino-service-checkout #customer_details .col-2,
body.zandino-service-checkout #order_review,
body.zandino-service-checkout #payment,
body.zandino-service-order-received .woocommerce-order-details,
body.zandino-service-order-received .woocommerce-customer-details {
    border-color: transparent !important;
    border-radius: 24px !important;
    background-color: var(--zcm-surface) !important;
    background-image: var(--zsoft-fill) !important;
    box-shadow: 0 0 0 1px var(--zcm-border), var(--zcm-shadow) !important;
}
body.zandino-service-cart .woocommerce-cart-form table.shop_table.cart tr.cart_item {
    border-color: transparent !important;
    background-color: var(--zcm-surface) !important;
    background-image: var(--zsoft-fill) !important;
    box-shadow: 0 0 0 1px var(--zcm-border), 0 12px 28px -22px rgba(16, 42, 76, .3) !important;
}
html[data-zandino-theme="dark"] body.zandino-service-cart .woocommerce-cart-form table.shop_table.cart tr.cart_item {
    box-shadow: 0 0 0 1px var(--zcm-border), 0 14px 30px -22px rgba(0, 6, 18, .7) !important;
}

/* Fields: white (or deep) fill inside a soft ring, focus adds an accent halo. */
body.zandino-service-cart .woocommerce input.input-text,
body.zandino-service-cart .woocommerce textarea,
body.zandino-service-cart .woocommerce select,
body.zandino-service-checkout .woocommerce input.input-text,
body.zandino-service-checkout .woocommerce textarea,
body.zandino-service-checkout .woocommerce select,
body.zandino-service-checkout .woocommerce .select2-container .select2-selection--single {
    border-color: transparent !important;
    border-radius: 14px !important;
    background: var(--zcm-field) !important;
    box-shadow: 0 0 0 1px var(--zcm-border), inset 0 1px 2px rgba(16, 42, 76, .04) !important;
}
html[data-zandino-theme="dark"] body.zandino-service-cart .woocommerce input.input-text,
html[data-zandino-theme="dark"] body.zandino-service-checkout .woocommerce input.input-text,
html[data-zandino-theme="dark"] body.zandino-service-checkout .woocommerce textarea,
html[data-zandino-theme="dark"] body.zandino-service-checkout .woocommerce select,
html[data-zandino-theme="dark"] body.zandino-service-checkout .woocommerce .select2-container .select2-selection--single {
    box-shadow: 0 0 0 1px var(--zcm-border), inset 0 1px 1px rgba(0, 6, 18, .45) !important;
}
body.zandino-service-cart .woocommerce input.input-text:focus,
body.zandino-service-checkout .woocommerce input.input-text:focus,
body.zandino-service-checkout .woocommerce textarea:focus,
body.zandino-service-checkout .woocommerce select:focus,
body.zandino-service-checkout .woocommerce .select2-container--focus .select2-selection--single {
    box-shadow: 0 0 0 1px var(--zcm-accent), 0 0 0 4px var(--zcm-accent-soft) !important;
}
/* Labels belong to their field, not to the card. */
body.zandino-service-checkout .woocommerce form .form-row { padding-bottom: 4px; }
body.zandino-service-checkout .woocommerce form .form-row label {
    margin-bottom: 6px;
    font-size: 11px;
    letter-spacing: .01em;
}

/* Actions cell: coupon and the (usually meaningless) update button in one
   tidy row, with the secondary action styled as a quiet chip. */
body.zandino-service-cart .woocommerce-cart-form td.actions {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    border-top: 1px solid var(--zcm-border);
    background: transparent !important;
}
body.zandino-service-cart .woocommerce-cart-form td.actions .coupon {
    display: flex !important;
    flex: 1 1 240px;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    float: none !important;
    width: auto;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}
body.zandino-service-cart .woocommerce-cart-form td.actions .coupon input.input-text { flex: 1 1 130px; min-width: 0; width: auto !important; }
body.zandino-service-cart .woocommerce-cart-form td.actions .coupon button.button {
    flex: 0 0 auto;
    width: auto !important;
    min-height: 46px !important;
    padding-inline: 18px !important;
    border: 0 !important;
    background: var(--zcm-accent-soft) !important;
    color: var(--zcm-accent) !important;
    box-shadow: inset 0 0 0 1px var(--zcm-border) !important;
    font-weight: 800;
}
body.zandino-service-cart .woocommerce-cart-form td.actions .coupon button.button:hover {
    background: var(--zcm-accent) !important;
    color: var(--zcm-accent-ink) !important;
}
body.zandino-service-cart .woocommerce-cart-form td.actions button[name="update_cart"]:disabled { display: none !important; }
body.zandino-service-cart .woocommerce-cart-form td.actions button[name="update_cart"] {
    width: auto !important;
    min-height: 46px !important;
    background: transparent !important;
    color: var(--zcm-ink-2) !important;
    box-shadow: inset 0 0 0 1px var(--zcm-border) !important;
}

/* Item card: the remove control becomes a quiet round ghost at the top. */
body.zandino-service-cart .woocommerce-cart-form a.remove {
    border: 0 !important;
    border-radius: 13px !important;
    box-shadow: inset 0 0 0 1px var(--zcm-border);
}
body.zandino-service-cart .woocommerce-cart-form a.remove:hover {
    box-shadow: inset 0 0 0 1px rgba(165, 63, 80, .35);
}

/* Summary: a hairline divider above the total, no stray accent underline. */
body.zandino-service-cart .cart_totals h2,
body.zandino-service-checkout #order_review::before {
    padding-bottom: 12px;
    border-bottom: 1px solid var(--zcm-border);
}
body.zandino-service-cart .cart_totals h2::before { opacity: .34; }
body.zandino-service-cart .cart_totals .order-total td,
body.zandino-service-cart .cart_totals .order-total th { border-top: 1px solid var(--zcm-border); }

/* Coupon / login toggles on checkout: soft capsules, no ruled edges. */
body.zandino-service-checkout .woocommerce-form-coupon-toggle .woocommerce-info,
body.zandino-service-checkout .woocommerce-form-login-toggle .woocommerce-info {
    border-color: transparent !important;
    border-radius: 16px !important;
    background-color: var(--zcm-surface) !important;
    box-shadow: 0 0 0 1px var(--zcm-border), 0 10px 24px -20px rgba(16, 42, 76, .4) !important;
}
body.zandino-service-checkout form.checkout_coupon,
body.zandino-service-checkout form.login {
    border-color: transparent !important;
    border-radius: 18px !important;
    background-color: var(--zcm-surface) !important;
    box-shadow: 0 0 0 1px var(--zcm-border), var(--zcm-shadow) !important;
}

/* Order confirmation: the overview strip and the thank-you note. */
body.zandino-service-order-received .woocommerce-thankyou-order-received {
    border: 0 !important;
    border-radius: 18px !important;
    background-image: var(--zsoft-fill) !important;
    box-shadow: 0 0 0 1px var(--zcm-border), var(--zcm-shadow) !important;
    color: var(--zcm-ink) !important;
}
body.zandino-service-order-received .woocommerce-order-overview {
    border: 0 !important;
    border-radius: 20px !important;
    background-image: var(--zsoft-fill) !important;
    box-shadow: 0 0 0 1px var(--zcm-border), var(--zcm-shadow) !important;
    overflow: hidden;
}

@media (max-width: 720px) {
    body.zandino-service-cart .woocommerce-cart-form td.actions .coupon { flex: 1 1 100%; }
    body.zandino-service-cart .woocommerce-cart-form td.actions .coupon button.button { flex: 0 0 auto; }
    body.zandino-service-cart .cart_totals,
    body.zandino-service-checkout #customer_details .col-1,
    body.zandino-service-checkout #customer_details .col-2,
    body.zandino-service-checkout #order_review { border-radius: 22px !important; }
}

/* ==========================================================================
   Mobile motion: the flicker fix
   ---------------------------------------------------------------------------
   `mobile_motion: reduced` shortens *every* animation to .001ms so entry
   motion settles on the first frame. It never touched the iteration count,
   though — so every `infinite` animation kept looping with a one-microsecond
   period. A loop that fast has an effectively random phase at each rendered
   frame, so the big hero apertures, the blurred hero beam and the intro noise
   were re-sampled to a different keyframe on every frame. On a phone that is
   the jitter users describe as the background flickering and the circle
   behind the panel shrinking.

   Running each animation exactly once fixes it at the source: one-shot
   animations still settle instantly (unchanged behaviour), while the infinite
   decorative loops now finish and rest on their base style — which is the
   static look they are meant to have on reduced mobile motion.
   ========================================================================== */
html[data-zandino-mobile-motion="reduced"] *,
html[data-zandino-mobile-motion="reduced"] *::before,
html[data-zandino-mobile-motion="reduced"] *::after {
    animation-iteration-count: 1 !important;
}
/* Decorative loops that are pure ornament get switched off entirely on touch
   widths, so nothing repaints a 300-690px circle under the toolbar. */
@media (max-width: 980px), (pointer: coarse) {
    html[data-zandino-mobile-motion="reduced"] :where(
        .z36-hero-aperture > i,
        .z36-hero-beam,
        .z36-intro-noise,
        .z36-final-orbits i,
        .z36-service-orbit > i,
        .z36-404-orbit i,
        .z36-about-orbit::before,
        .z36-about-orbit::after
    ) { animation: none !important; }
}

/* ==========================================================================
   Mobile: the ticker stopped moving
   ---------------------------------------------------------------------------
   `mobile_motion: reduced` switches every ambient loop off with
   `animation: none`, and that is right for the big blurred decorations — but
   wrong for the ticker. The strip is one compositor `translate` across a
   `width: max-content` row: it never repaints, never reflows and never touches
   the layout above it, so it is the cheapest motion on the page, and it is the
   one piece of movement the design leans on. It runs again here, at the slow
   period it is meant to have on a phone (the blanket one-shot rule would
   otherwise compress a full cycle into a microsecond).

   The block stays inside `prefers-reduced-motion: no-preference`, so a visitor
   who asks their system for less motion still gets a still strip.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) and (max-width: 980px),
    (prefers-reduced-motion: no-preference) and (pointer: coarse) {
    html[data-zandino-mobile-motion="reduced"] :is(.z36-ticker, .z36-tech-ticker) > div {
        animation: z36Ticker 38s linear infinite !important;
    }
    html[data-zandino-mobile-motion="reduced"] .z36-about-marquee > div {
        animation: z36Ticker 30s linear infinite !important;
    }
}

/* --- Service system map: the hover that made text disappear ------------- */
/* A node is a white pill, but the base stylesheet switched only its *ink* to
   white on hover (and for the selected node). White on white meant the label
   you were pointing at was the one label you could not read. Both states now
   share one accent surface, so the white label sits on blue — and the selected
   service reads as clearly chosen instead of merely floating. */
/* The theme-scoped light surface rule carries an extra `html[attr]` in its
   selector, so these states have to be prefixed the same way or the white fill
   still wins and the label stays invisible. */
html[data-zandino-theme="light"] .z36-service-orbit .node:hover,
html[data-zandino-theme="light"] .z36-service-orbit .node.is-active,
html[data-zandino-theme="dark"] .z36-service-orbit .node:hover,
html[data-zandino-theme="dark"] .z36-service-orbit .node.is-active,
.z36-service-orbit .node:hover,
.z36-service-orbit .node.is-active {
    color: #fff !important;
    border-color: transparent !important;
    background-color: #2456e6 !important;
    background-image: linear-gradient(135deg, #4a8cff 0%, #2456e6 100%) !important;
    box-shadow: 0 18px 36px -18px rgba(31, 84, 214, .62), inset 0 1px 0 rgba(255, 255, 255, .3) !important;
}
/* The readout strip inherits white ink from the dark hero treatment, so on the
   light section every unclassified line inside it came out white-on-white. */
html[data-zandino-theme="light"] .z36-service-map-readout { color: #10233d; }
html[data-zandino-theme="dark"] .z36-service-map-readout { color: #eaf2ff; }

/* --- Story showcase: scene tabs ------------------------------------------ */
/* The panel's first line is free space, so the tab strip lands there and the
   scene headline plus the dashboard card shift down by exactly the room the
   strip needs. The strip is built by the theme script from the three story
   steps, which is why it is styled here rather than written into the markup. */
.z36-story-tabs {
    position: absolute;
    z-index: 7;
    top: 9px;
    left: 26px;
    right: 26px;
    display: flex;
    gap: 4px;
    padding: 4px;
    border-radius: 13px;
    background: rgba(4, 17, 38, .42);
    box-shadow: inset 0 0 0 1px rgba(118, 168, 255, .16);
}
.z36-story-tab {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 30px;
    padding: 0 8px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #9db6da;
    font: inherit;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: background .3s ease, color .3s ease;
}
.z36-story-tab > i { font-style: normal; opacity: .6; font-size: 8px; }
.z36-story-tab:hover { color: #e9f1fc; background: rgba(118, 168, 255, .12); }
.z36-story-tab.is-active {
    color: #fff;
    background: linear-gradient(135deg, #4a8cff, #2456e6);
    box-shadow: 0 10px 24px -12px rgba(31, 84, 214, .72), inset 0 1px 0 rgba(255, 255, 255, .26);
}
.z36-story-tab.is-active > i { opacity: .9; }
.z36-story-tab:focus-visible { outline: 2px solid #72b3ff; outline-offset: 2px; }
/* Room for the strip: the headline and the dashboard card each move down. */
[data-z36-story-visual] .z36-scene-head { top: 52px; }
[data-z36-story-visual] .z36-command-panel { top: calc(15% + 28px); }
@media (max-width: 980px) {
    [data-z36-story-visual] .z36-command-panel { top: calc(13% + 28px); }
}

/* --- Story showcase: the scene headline kept the light theme's dark ink ----- */
/* The showcase panel stays navy in light mode, but only its inner cards were
   re-inked for the light theme — the scene headline between them inherited
   `#10233d` and vanished into the panel (measured 1.04:1). Giving the panel the
   light ink it needs fixes every inheriting line at once; the white cards
   inside set their own dark ink, so they are unaffected. */
html[data-zandino-theme="light"] .z36-story-visual {
    color: #e9f1fc;
}
html[data-zandino-theme="light"] .z36-story-visual .z36-scene-head > span,
html[data-zandino-theme="light"] .z36-story-visual .z36-scene-head > small { color: #8fb0dd; }

/* --- The last ruled edges ----------------------------------------------- */
/* An audit of the light theme (1px outline, corner radius under 18px) found a
   short list of stragglers: the reactor nodes, the idea rails, the capabilities
   link, two full-bleed sections and the ticker strip. They all get the same
   soft ring treatment as the rest of the system. */
html:not([data-zandino-corners="compact"]) :is(.z36-reactor-node, .z36-idea-rail, .z36-capabilities-link) {
    border-radius: 18px;
}
:is(.z36-reactor-node, .z36-idea-rail, .z36-capabilities-link) {
    border-color: transparent !important;
    box-shadow: 0 0 0 1px var(--zsoft-ring), var(--zsoft-lift-sm) !important;
}
html[data-zandino-theme="light"] :is(.z36-reactor-node, .z36-idea-rail, .z36-capabilities-link) {
    background-image: var(--zsoft-fill) !important;
    box-shadow: 0 0 0 1px var(--zsoft-ring), var(--zsoft-lift-sm), var(--zsoft-hair) !important;
}
html[data-zandino-theme="dark"] :is(.z36-idea-rail, .z36-capabilities-link) {
    background-image: var(--zsoft-fill-2) !important;
}

/* The ghost button keeps a visible edge (it is a control, and it must read as
   one) but as a ring rather than a drawn line. */
.z36-btn--ghost { border-color: transparent !important; box-shadow: inset 0 0 0 1px rgba(112, 160, 240, .38); }
html[data-zandino-theme="light"] .z36-btn--ghost { box-shadow: inset 0 0 0 1px rgba(43, 98, 200, .3); }

/* Full-bleed sections and the ticker strip: no ruled box around the page. */
:is(.z36-idea-machine, .z36-manifest, .z36-ticker, .z36-svc-frame-visual, .z36-about-marquee) { border-color: transparent !important; }
html[data-zandino-theme="light"] :is(.z36-idea-machine, .z36-manifest) { border-color: transparent !important; }

/* Orbit nodes and readouts on the inner pages (services / about). The inactive
   ones keep their own ink, so only the shell is softened. */
html:not([data-zandino-corners="compact"]) :is(.z36-service-orbit .node, .z36-about-node, .z36-service-map-readout, .z36-about-orbit-readout) {
    border-radius: 16px;
}
:is(.z36-service-orbit .node, .z36-about-node, .z36-service-map-readout, .z36-about-orbit-readout) {
    border-color: transparent !important;
    box-shadow: 0 0 0 1px var(--zsoft-ring), var(--zsoft-lift-sm) !important;
}
html[data-zandino-theme="light"] :is(.z36-service-orbit .node, .z36-service-map-readout) {
    background-image: var(--zsoft-fill) !important;
    box-shadow: 0 0 0 1px var(--zsoft-ring), var(--zsoft-lift-sm), var(--zsoft-hair) !important;
}
/* The about nodes are dark pills with white labels. A light fill would make
   their own text vanish, so they keep their ink and only gain a soft ring. */
html[data-zandino-theme="light"] :is(.z36-about-node, .z36-about-orbit-readout) {
    box-shadow: 0 0 0 1px var(--zsoft-ring-2), var(--zsoft-lift-sm) !important;
}
html[data-zandino-theme="light"] .z36-about-node.is-active {
    background-image: none !important;
    box-shadow: 0 0 0 1px rgba(43, 98, 200, .32), 0 16px 34px -22px rgba(23, 64, 130, .55) !important;
}
/* The 9px sub-label sat at 4.3:1 on the blended pill; it now clears AA. */
.z36-about-node small { color: #a0badd; }
.z36-about-node.is-active small { color: #a9c6ea; }
html[data-zandino-theme="light"] .z36-about-node small { color: #a0badd; }

/* --- Receipt (order received) ------------------------------------------- */
/* The overview was four independent cards stacked with gaps, which read as
   four unrelated boxes. It is one receipt now: a single surface ruled into
   rows, label on one side and value on the other. */
body.zandino-service-order-received .woocommerce-order-overview {
    display: block !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 22px !important;
    background-image: var(--zsoft-fill) !important;
    box-shadow: 0 0 0 1px var(--zcm-border), var(--zcm-shadow) !important;
    overflow: hidden;
}
body.zandino-service-order-received .woocommerce-order-overview li {
    display: flex !important;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    width: auto !important;
    margin: 0 !important;
    padding: 14px 18px !important;
    border: 0 !important;
    border-top: 1px solid var(--zcm-border) !important;
    background: transparent !important;
    box-shadow: none !important;
    text-align: start;
}
body.zandino-service-order-received .woocommerce-order-overview li:first-child { border-top: 0 !important; }
body.zandino-service-order-received .woocommerce-order-overview li strong { margin: 0; font-size: 15px; font-weight: 850; }

/* The success line carries a green cue, but a soft one — a tinted surface and
   a coloured ring instead of a hard rule. */
html[data-zandino-theme="light"] body.zandino-service-order-received .woocommerce-thankyou-order-received {
    background-image: linear-gradient(180deg, #f5fcf8 0%, #edf8f3 100%) !important;
    box-shadow: 0 0 0 1px rgba(23, 121, 90, .18), 0 18px 40px -26px rgba(23, 121, 90, .38) !important;
    color: #10503c !important;
}
html[data-zandino-theme="dark"] body.zandino-service-order-received .woocommerce-thankyou-order-received {
    background-image: linear-gradient(180deg, rgba(31, 92, 74, .4) 0%, rgba(19, 66, 53, .34) 100%) !important;
    box-shadow: 0 0 0 1px rgba(79, 210, 162, .24), var(--zcm-shadow) !important;
    color: #d9f6ea !important;
}

/* The "what happens next" block is the last thing read on the receipt, so it
   gets the same soft surface as the rest of the flow. */
body.zandino-service-order-received .zcp-thankyou-next {
    border-radius: 22px !important;
    background-image: var(--zsoft-fill) !important;
    box-shadow: 0 0 0 1px var(--zcm-border), var(--zcm-shadow) !important;
}

/* ==========================================================================
   Hero reactor: the off-centre bug on phones
   ---------------------------------------------------------------------------
   Below 420px the reactor is given `margin-inline: -4%` on top of a width that
   already equals its grid column. A negative inline margin makes the item's
   margin box wider than the column, and an over-wide box resolves against one
   edge instead of the middle — so the whole visual (rings, core, caption and
   the LIVE / SYSTEM stat nodes) sat ~12-15px right of everything else on the
   page. Neutralising the margin puts the border box back on exactly the
   column, which centres the visual; the rings still bleed past it because they
   are absolutely positioned and nothing clips them.
   ========================================================================== */
@media (max-width: 420px) {
    .z36-reactor { margin-inline: 0; }
}
/* No negative inline margin may push the visual off centre on any touch width. */
@media (max-width: 980px), (pointer: coarse) {
    .z36-reactor { margin-inline: 0; }
}

/* ==========================================================================
   Profile checklist (account dashboard)
   ---------------------------------------------------------------------------
   The six profile items were laid out as `flex-wrap` pills, so their widths
   decided the shape of the block: on a phone the first row held three items,
   the second two and the third one, and every row started at a different
   inline position. It read as a broken cloud rather than a checklist.
   It is a grid now — two ordered columns on touch widths, three on wider
   screens — and each item is a row with a state badge, so the eye can scan
   "done vs. remaining" down a single axis.
   ========================================================================== */
.zcp-profile-meter__steps {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 2px 0 0 !important;
}
.zcp-profile-meter__steps li {
    display: grid !important;
    grid-template-columns: 20px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 9px 12px !important;
    border: 0 !important;
    border-radius: 14px !important;
    background-image: var(--zsoft-fill) !important;
    box-shadow: 0 0 0 1px var(--zsoft-ring), var(--zsoft-hair) !important;
    font-size: 11.5px;
    font-weight: 650;
    line-height: 1.5;
    text-align: start;
}
/* The badge carries the state, so the label never has to say it in colour. */
.zcp-profile-meter__steps li > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
}
html[data-zandino-theme="light"] .zcp-profile-meter__steps li.is-done {
    background-image: linear-gradient(180deg, #f3fbf7 0%, #ebf7f1 100%) !important;
    box-shadow: 0 0 0 1px rgba(23, 121, 90, .2), var(--zsoft-hair) !important;
    color: #14614a !important;
}
html[data-zandino-theme="light"] .zcp-profile-meter__steps li.is-done > span { background: #d8f0e4; color: #116146; }
html[data-zandino-theme="light"] .zcp-profile-meter__steps li.is-todo { color: #4b5f78 !important; }
html[data-zandino-theme="light"] .zcp-profile-meter__steps li.is-todo > span { background: #eef3fa; color: #4b5f78; }
html[data-zandino-theme="dark"] .zcp-profile-meter__steps li.is-done {
    background-image: linear-gradient(180deg, rgba(31, 92, 74, .34) 0%, rgba(19, 66, 53, .28) 100%) !important;
    box-shadow: 0 0 0 1px rgba(79, 210, 162, .22), var(--zsoft-hair) !important;
    color: #c8f0e0 !important;
}
html[data-zandino-theme="dark"] .zcp-profile-meter__steps li.is-done > span { background: rgba(79, 210, 162, .2); color: #a9ecd3; }
html[data-zandino-theme="dark"] .zcp-profile-meter__steps li.is-todo { color: #b6c8e2 !important; }
html[data-zandino-theme="dark"] .zcp-profile-meter__steps li.is-todo > span { background: rgba(118, 168, 255, .14); color: #b6c8e2; }
@media (min-width: 700px) {
    .zcp-profile-meter__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* ---------- Final readability pass ----------
   The manifesto keeps its scroll-fill effect, but the "not yet filled" words
   used to sit at 2.1:1 on white and read as empty space. Lifting them to a
   legible grey keeps the effect and the sentence readable in both modes. */
.z36-manifest p b { color: #8d9eb7; }
.z36-manifest p b.is-hot,
.z36-manifest p strong { color: #2f6fe4; }

/* Blog covers: the eyebrow was a 9px chip in cover-blue; give it room to read. */
.z36-blog-card .media i { font-size: 10.5px; letter-spacing: .16em; color: #aacdff; }
.z36-blog-card .media > span { color: #cfe2ff; }

/* Light mode: card greys were tuned against dark covers. */
html[data-zandino-theme="light"] .z36-blog-card small { color: #5c6b84; }
html[data-zandino-theme="light"] .z36-blog-card p { color: #54647c; }
html[data-zandino-theme="light"] .z36-blog-card h3 { color: #0d1e36; }
html[data-zandino-theme="light"] .z36-section-head > span,
html[data-zandino-theme="light"] .z36-projects-head > span,
html[data-zandino-theme="light"] .z36-blog-head > span,
html[data-zandino-theme="light"] .z36-proof-head > span { color: #2f5fb5; }

/* Light mode: muted body copy on white cards needs a darker grey to clear 4.5:1. */
html[data-zandino-theme="light"] .z36-cap-card p,
html[data-zandino-theme="light"] .z36-proof-board p,
html[data-zandino-theme="light"] .z36-story-step p { color: #4e5f79; }
html[data-zandino-theme="light"] .z36-cap-card .num,
html[data-zandino-theme="light"] .z36-proof-number .num { color: #46596f; }

/* Light mode: micro-labels that were tuned for the dark cinema surfaces.
   They sit on white/very pale panels there, so they need a darker ink. */
html[data-zandino-theme="light"] .z36-project-meta,
html[data-zandino-theme="light"] .z36-project-meta span { color: #45576e; }
html[data-zandino-theme="light"] .z36-command-panel header,
html[data-zandino-theme="light"] .z36-command-chart small,
html[data-zandino-theme="light"] .z36-command-metrics small { color: #4a5d78; }
html[data-zandino-theme="light"] .z36-scene-head span,
html[data-zandino-theme="light"] .z36-scene-card small { color: #485a74; }
html[data-zandino-theme="light"] .z36-reactor-node small,
html[data-zandino-theme="light"] .z36-reactor-caption { color: #46586f; }
html[data-zandino-theme="light"] .z36-browser-window header small,
html[data-zandino-theme="light"] .z36-proof-number small,
html[data-zandino-theme="light"] .z36-scroll-cue { color: #485a74; }