/* ============================================================
   ML TOOLS — Design System
   Brand extracted from ML Lopes Design plugin base
   Teal #155e6f · warm amber/coral accent · Sora + Manrope + IBM Plex Mono
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  /* Brand */
  --teal:#155e6f;
  --teal-700:#114b5a;
  --teal-900:#0c3845;
  --teal-300:#4f9aa9;
  --teal-soft:#eaf5f7;
  --teal-mist:#f3f9fa;

  /* Warm signal accent (amber/coral) */
  --amber:#e8843c;
  --amber-600:#d56f29;
  --amber-soft:#fdf0e6;
  --coral:#ef6b53;

  /* Ink / neutrals (cool, low chroma) */
  --ink:#0f2a39;
  --ink-2:#39505d;
  --muted:#5d7180;
  --faint:#8a9aa6;
  --line:#e2eaee;
  --line-2:#d2dee3;
  --paper:#ffffff;
  --bg:#f6f9fa;
  --bg-tint:#eef5f6;

  /* Dark surfaces (dashboards) */
  --d-bg:#081820;
  --d-bg-2:#0b2029;
  --d-surface:#0f2b35;
  --d-surface-2:#143641;
  --d-line:#1d4150;
  --d-line-2:#27545f;
  --d-ink:#eaf6f8;
  --d-muted:#8fb4bd;
  --d-faint:#5d8893;
  --d-teal:#3fb7c9;
  --d-teal-soft:#103039;

  /* ===== Dashboard semantic tokens — DEFAULT = LIGHT (bright SaaS) ===== */
  --app-bg:#f4f8f9;
  --app-bg2:#ffffff;
  --app-surface:#ffffff;
  --app-surface2:#f1f6f7;
  --app-line:#e6edf0;
  --app-line2:#d8e3e7;
  --app-ink:#102a39;
  --app-muted:#5d7180;
  --app-faint:#93a4ad;
  --app-accent:#155e6f;
  --app-accent-soft:#eaf5f7;
  --app-ok:#1a9e54;
  --app-warn:#c0700f;
  --app-glass:rgba(244,248,249,.85);

  /* Status */
  --green:#1a9e54;
  --green-soft:#e7f6ec;
  --red:#d92d20;
  --red-soft:#fdecea;

  /* Type */
  --font-display:'Sora',system-ui,sans-serif;
  --font:'Manrope',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;

  /* Radius */
  --r-xs:8px; --r-sm:12px; --r-md:16px; --r-lg:20px; --r-xl:28px; --r-pill:999px;

  /* Shadow (teal-tinted) */
  --sh-sm:0 1px 2px rgba(15,42,57,.04), 0 2px 6px rgba(15,102,116,.05);
  --sh-md:0 8px 24px rgba(15,102,116,.07), 0 2px 6px rgba(15,42,57,.04);
  --sh-lg:0 24px 60px rgba(15,102,116,.12), 0 6px 18px rgba(15,42,57,.06);
  --sh-amber:0 14px 34px rgba(232,132,60,.28);
  --sh-teal:0 14px 34px rgba(21,94,111,.26);

  --container:1200px;
  --nav-h:72px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font);
  color:var(--ink);
  background:var(--bg);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:1.08;letter-spacing:-.02em;margin:0;color:var(--ink)}
p{margin:0}
::selection{background:var(--teal);color:#fff}

.container{max-width:var(--container);margin:0 auto;padding:0 28px}
.wide{max-width:1320px}

/* ---------- Eyebrow ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:12px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--teal);
}
.eyebrow::before{content:"";width:18px;height:1px;background:var(--teal);opacity:.5}
.eyebrow.amber{color:var(--amber-600)}
.eyebrow.amber::before{background:var(--amber)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  height:46px;padding:0 22px;border-radius:var(--r-pill);
  font-family:var(--font);font-weight:700;font-size:15px;
  border:1px solid transparent;cursor:pointer;white-space:nowrap;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.btn svg{width:17px;height:17px}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--teal);color:#fff;box-shadow:var(--sh-teal)}
.btn-primary:hover{background:var(--teal-700);box-shadow:0 18px 40px rgba(21,94,111,.34)}
.btn-amber{background:var(--amber);color:#fff;box-shadow:var(--sh-amber)}
.btn-amber:hover{background:var(--amber-600);box-shadow:0 18px 40px rgba(232,132,60,.36)}
.btn-ghost{background:#fff;color:var(--ink);border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--teal);color:var(--teal);background:var(--teal-mist)}
.btn-soft{background:var(--teal-soft);color:var(--teal-700)}
.btn-soft:hover{background:#dcecef}
.btn-lg{height:54px;padding:0 30px;font-size:16px}
.btn-sm{height:38px;padding:0 16px;font-size:14px}
.btn-block{width:100%}

/* ---------- Chips / badges ---------- */
.chip{
  display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 13px;
  border-radius:var(--r-pill);background:#fff;border:1px solid var(--line-2);
  font-size:13px;font-weight:600;color:var(--ink-2);white-space:nowrap;
}
.chip.teal{background:var(--teal-soft);border-color:transparent;color:var(--teal-700)}
.chip.amber{background:var(--amber-soft);border-color:transparent;color:var(--amber-600)}
.chip.green{background:var(--green-soft);border-color:transparent;color:var(--green)}
.dot{width:7px;height:7px;border-radius:50%;background:currentColor}

/* ---------- Cards ---------- */
.card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-sm);transition:transform .2s ease, box-shadow .25s ease, border-color .2s ease;
}
.card.hover:hover{transform:translateY(-4px);box-shadow:var(--sh-lg);border-color:var(--line-2)}

/* ---------- Section ---------- */
.section{padding:104px 0}
.section.tight{padding:72px 0}
.section-head{max-width:720px;margin:0 auto 56px;text-align:center}
.section-head h2{font-size:clamp(30px,4vw,46px);margin:18px 0 16px}
.section-head p{color:var(--muted);font-size:18px;text-wrap:pretty}
.lead{color:var(--muted);font-size:19px;line-height:1.6;text-wrap:pretty}

/* ---------- Placeholder media ---------- */
.ph{
  position:relative;border-radius:var(--r-md);overflow:hidden;
  background:
    repeating-linear-gradient(135deg, rgba(21,94,111,.05) 0 12px, rgba(21,94,111,.02) 12px 24px),
    var(--teal-mist);
  border:1px dashed var(--line-2);
  display:flex;align-items:center;justify-content:center;
}
.ph span{font-family:var(--mono);font-size:12px;color:var(--teal);letter-spacing:.04em;opacity:.7}

/* ---------- Top navigation ---------- */
.nav{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav-inner{height:var(--nav-h);display:flex;align-items:center;gap:32px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:700;font-size:18px;letter-spacing:-.02em;color:var(--ink)}
.brand img{width:30px;height:30px}
.brand .tm{font-size:10px;color:var(--teal);vertical-align:super;font-family:var(--mono)}
.nav-links{display:flex;align-items:center;gap:4px;margin-left:8px}
.nav-links a{padding:9px 14px;border-radius:var(--r-pill);font-weight:600;font-size:15px;color:var(--ink-2);white-space:nowrap;transition:background .15s,color .15s}
.nav-links a:hover{background:var(--teal-mist);color:var(--teal)}
.nav-links a.active{color:var(--teal);background:var(--teal-soft)}
.nav-cta{margin-left:auto;display:flex;align-items:center;gap:10px}
.nav-burger{display:none;width:44px;height:44px;border:1px solid var(--line-2);background:#fff;border-radius:12px;cursor:pointer;align-items:center;justify-content:center}

/* ---------- Footer ---------- */
.footer{background:var(--ink);color:#cfe0e6;padding:72px 0 36px;margin-top:0}
.footer a{color:#a9c3cc;transition:color .15s}
.footer a:hover{color:#fff}
.footer-grid{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:40px}
.footer h5{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-300);margin:0 0 18px;font-weight:500}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:11px;font-size:14px}
.footer-brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:700;font-size:19px;color:#fff;margin-bottom:16px}
.footer-brand img{width:30px;height:30px}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:56px;padding-top:26px;border-top:1px solid rgba(255,255,255,.1);font-size:13px;color:#8aa6af;flex-wrap:wrap}
.footer-links-list{list-style:none;display:flex;flex-wrap:wrap;gap:8px 18px;margin:0;padding:0}
.footer-links-list a{font-size:13px;color:#9fbcc4}
.footer-links-list a:hover{color:#fff}

/* ============================================================
   DARK THEME (dashboards / licensing)
   ============================================================ */
body.dark{background:var(--d-bg);color:var(--d-ink)}
body.dark h1,body.dark h2,body.dark h3,body.dark h4{color:var(--d-ink)}
.dark .nav{background:rgba(8,24,32,.78);border-bottom:1px solid var(--d-line)}
.dark .brand{color:var(--d-ink)}
.dark .nav-links a{color:var(--d-muted)}
.dark .nav-links a:hover{background:var(--d-surface);color:var(--d-ink)}
.dark .nav-links a.active{background:var(--d-teal-soft);color:var(--d-teal)}
.dark .card{background:var(--d-surface);border-color:var(--d-line);box-shadow:none}
.dark .card.hover:hover{border-color:var(--d-line-2);box-shadow:0 24px 60px rgba(0,0,0,.4)}
.dark .chip{background:var(--d-surface-2);border-color:var(--d-line-2);color:var(--d-muted)}
.dark .btn-ghost{background:var(--d-surface);border-color:var(--d-line-2);color:var(--d-ink)}
.dark .btn-ghost:hover{border-color:var(--d-teal);color:var(--d-teal);background:var(--d-surface-2)}
.dark .eyebrow{color:var(--d-teal)}
.dark .eyebrow::before{background:var(--d-teal)}
.dark .ph{background:repeating-linear-gradient(135deg, rgba(63,183,201,.07) 0 12px, rgba(63,183,201,.02) 12px 24px), var(--d-bg-2);border-color:var(--d-line-2)}
.dark .ph span{color:var(--d-teal)}
.dark .muted{color:var(--d-muted)}

.muted{color:var(--muted)}
.mono{font-family:var(--mono)}

/* ---------- utility ---------- */
.grid{display:grid}
.flex{display:flex}
.tac{text-align:center}
.fade-up{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.fade-up.in{opacity:1;transform:none}

@media(max-width:920px){
  .nav-links{display:none}
  .nav-burger{display:flex}
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
  .section{padding:72px 0}
}
@media(max-width:600px){
  .container{padding:0 18px}
  .footer-grid{grid-template-columns:1fr}
}

/* ===== Optional DARK theme for dashboards (opt-in via .theme-dark) ===== */
body.theme-dark{
  --app-bg:#081820;
  --app-bg2:#0b2029;
  --app-surface:#0f2b35;
  --app-surface2:#143641;
  --app-line:#1d4150;
  --app-line2:#27545f;
  --app-ink:#eaf6f8;
  --app-muted:#8fb4bd;
  --app-faint:#5d8893;
  --app-accent:#3fb7c9;
  --app-accent-soft:#103039;
  --app-ok:#48c98a;
  --app-warn:#f0a667;
  --app-glass:rgba(8,24,32,.82);
  background:var(--app-bg);
  color:var(--app-ink);
}
/* in light dashboards, default .card already light; in dark theme make them app-surface */
body.theme-dark .card{background:var(--app-surface);border-color:var(--app-line);box-shadow:none}
body.theme-dark .btn-ghost{background:var(--app-surface);border-color:var(--app-line2);color:var(--app-ink)}
body.theme-dark .btn-ghost:hover{border-color:var(--app-accent);color:var(--app-accent);background:var(--app-surface2)}

/* ============================================================
   APP SHELL (customer area / dashboards) — light by default
   ============================================================ */
.app{display:grid;grid-template-columns:264px 1fr;min-height:100vh;background:var(--app-bg);color:var(--app-ink)}
.side{background:var(--app-bg2);border-right:1px solid var(--app-line);padding:22px 16px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.side .brand{color:var(--app-ink);padding:6px 8px 22px}
.side .brand img{width:28px;height:28px}
.side-sec{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--app-faint);padding:14px 12px 8px}
.side-nav{display:grid;gap:3px}
.side-nav a{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:11px;color:var(--app-muted);font-weight:600;font-size:14.5px;transition:all .15s}
.side-nav a svg{width:18px;height:18px;flex:0 0 18px}
.side-nav a:hover{background:var(--app-surface2);color:var(--app-ink)}
.side-nav a.on{background:var(--app-accent-soft);color:var(--app-accent)}
.side-nav a .ct{margin-left:auto;font-family:var(--mono);font-size:11px;background:var(--app-surface2);color:var(--app-muted);padding:2px 8px;border-radius:var(--r-pill)}
.side-foot{margin-top:auto;border-top:1px solid var(--app-line);padding-top:14px}
.side-user{display:flex;align-items:center;gap:11px;padding:8px}
.side-user .av{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--app-accent),var(--teal));display:grid;place-items:center;font-family:var(--font-display);font-weight:700;color:#fff;font-size:14px}
.side-user b{font-size:13.5px;color:var(--app-ink);display:block}
.side-user span{font-size:12px;color:var(--app-faint)}
.appmain{padding:0 0 60px;min-width:0}
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:18px;padding:18px 34px;background:var(--app-glass);backdrop-filter:blur(12px);border-bottom:1px solid var(--app-line)}
.topbar h1{font-size:22px;color:var(--app-ink)}
.tb-search{margin-left:auto;display:flex;align-items:center;gap:9px;background:var(--app-surface);border:1px solid var(--app-line2);border-radius:var(--r-pill);padding:0 16px;height:42px;width:280px;color:var(--app-faint)}
.tb-search input{background:transparent;border:none;outline:none;color:var(--app-ink);font-family:var(--font);font-size:14px;width:100%}
.tb-ic{width:42px;height:42px;border-radius:12px;border:1px solid var(--app-line2);background:var(--app-surface);display:grid;place-items:center;color:var(--app-muted);cursor:pointer;position:relative}
.content{padding:28px 34px}
.pane{padding:0;overflow:hidden}
.pane-h{display:flex;align-items:center;justify-content:space-between;padding:20px 22px;border-bottom:1px solid var(--app-line)}
.pane-h h3{font-size:16px;color:var(--app-ink)}
.pane-h a{font-size:13px;color:var(--app-accent);font-weight:600}
.mtoggle{display:none}
@media(max-width:860px){
  .app{grid-template-columns:1fr}
  .side{position:fixed;left:0;top:0;z-index:80;transform:translateX(-100%);transition:transform .25s;width:264px}
  body.nav-open .side{transform:none}
  .mtoggle{display:grid}
  .tb-search{display:none}
}
@media(max-width:520px){.content,.topbar{padding-left:18px;padding-right:18px}}

/* ============================================================
   WordPress template adjustments (ML Tools Theme)
   ============================================================ */
.nav-links{list-style:none;margin:0;padding:0}
.nav-links li{display:flex}
.nav-links .current-menu-item>a,.nav-links .current_page_item>a{color:var(--teal);background:var(--teal-soft)}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:11px;font-size:14px}

/* Page header */
.page-hero{padding:56px 0 30px;background:linear-gradient(180deg,#fbfdfd,var(--bg));border-bottom:1px solid var(--line)}
.page-hero h1{font-size:clamp(32px,4.4vw,48px);font-weight:800;letter-spacing:-.03em;margin:14px 0 12px}
.page-body{max-width:760px;margin:0 auto;padding:48px 28px 70px}
.page-body p{font-size:17px;line-height:1.75;color:var(--ink-2);margin-bottom:22px}
.page-body h2{font-size:28px;margin:36px 0 14px}
.page-body h3{font-family:var(--font-display);font-size:20px;margin:26px 0 10px}
.page-body img{border-radius:var(--r-md);margin:10px 0}
.page-body ul,.page-body ol{font-size:17px;line-height:1.7;color:var(--ink-2);padding-left:22px;margin:0 0 22px;display:grid;gap:8px}

/* Blog loop */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.post-card{display:flex;flex-direction:column;overflow:hidden}
.post-card .thumb{height:180px;display:block;border-bottom:1px solid var(--line);background:var(--teal-mist);object-fit:cover;width:100%}
.post-card .pb{padding:22px;display:flex;flex-direction:column;gap:10px;flex:1}
.post-card h3{font-size:18px;line-height:1.3}
.post-card .ex{font-size:14px;color:var(--muted);flex:1}
.post-card .meta{font-size:12.5px;color:var(--faint);font-family:var(--mono)}
.post-card .meta a{color:var(--faint)}
@media(max-width:920px){.blog-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.blog-grid{grid-template-columns:1fr}}

/* Single article */
.single-cover{width:100%;max-height:420px;object-fit:cover;border-radius:var(--r-lg);margin:6px 0 0}
.pagination{display:flex;gap:10px;justify-content:center;margin-top:40px}
.pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 12px;border:1px solid var(--line-2);border-radius:var(--r-pill);background:#fff;font-weight:700;color:var(--ink-2)}
.pagination .page-numbers.current{background:var(--teal);border-color:var(--teal);color:#fff}
.pagination .page-numbers:hover{border-color:var(--teal);color:var(--teal)}

/* 404 / centered states */
.center-state{max-width:560px;margin:0 auto;padding:90px 28px;text-align:center}
.center-state .big{font-family:var(--font-display);font-weight:800;font-size:84px;color:var(--teal);letter-spacing:-.03em;line-height:1}
.center-state h1{font-size:30px;margin:10px 0 12px}

/* WooCommerce: inherit theme look without destructive overrides */
.woocommerce-account .woocommerce{max-width:var(--container);margin:0 auto}
.woocommerce-MyAccount-navigation ul{list-style:none;margin:0 0 24px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.woocommerce-MyAccount-navigation ul li a{display:inline-flex;align-items:center;height:40px;padding:0 16px;border-radius:var(--r-pill);border:1px solid var(--line-2);background:#fff;font-weight:600;font-size:14px;color:var(--ink-2)}
.woocommerce-MyAccount-navigation ul li.is-active a,.woocommerce-MyAccount-navigation ul li a:hover{background:var(--teal);border-color:var(--teal);color:#fff}
.woocommerce ul.products{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:0;list-style:none}
.woocommerce ul.products li.product{margin:0}
@media(max-width:920px){.woocommerce ul.products{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.woocommerce ul.products{grid-template-columns:1fr}}

/* ---- Product card internals (loop) ---- */
.woocommerce ul.products li.product.prod{display:flex;flex-direction:column;overflow:hidden;text-align:left}
.prod .shot{display:block;height:172px;overflow:hidden;border-bottom:1px solid var(--line);background:var(--teal-mist)}
.prod .shot img{width:100%;height:100%;object-fit:cover;margin:0}
.prod .ph.shot span{font-family:var(--mono);font-size:12px;color:var(--teal);opacity:.7}
.prod .pb{padding:22px;display:flex;flex-direction:column;gap:12px;flex:1}
.prod .pt{display:flex;align-items:center;gap:11px}
.prod h3{font-size:18px;margin:0}
.prod h3 a{color:var(--ink)}
.prod h3 a:hover{color:var(--teal)}
.prod .cat{font-size:12px;color:var(--muted);font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em;margin-top:3px}
.prod p{font-size:14.5px;color:var(--muted);flex:1;margin:0}
.prod .pf{display:flex;align-items:center;justify-content:space-between;padding-top:14px;border-top:1px solid var(--line);gap:10px}
.prod .price{color:var(--ink)}
.prod .price .amount,.prod .price bdi{font-family:var(--font-display);font-size:20px;font-weight:700}
.prod .price del{color:var(--faint);font-size:14px;font-weight:500}
.prod .price ins{text-decoration:none}
.prod .added_to_cart{margin-top:6px;font-size:13px;color:var(--teal);font-weight:700}

/* ---- WooCommerce buttons → ML buttons ---- */
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,.woocommerce .button,
.woocommerce #respond input#submit,.woocommerce-page button.button{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;height:46px;padding:0 22px;
  border-radius:var(--r-pill);font-family:var(--font);font-weight:700;font-size:15px;border:1px solid transparent;
  background:var(--teal);color:#fff;cursor:pointer;box-shadow:var(--sh-teal);transition:background .2s,box-shadow .2s;line-height:1}
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce .button:hover,
.woocommerce #respond input#submit:hover{background:var(--teal-700);color:#fff}
.woocommerce a.button.alt,.woocommerce button.button.alt,.woocommerce .button.alt{background:var(--amber);box-shadow:var(--sh-amber)}
.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover{background:var(--amber-600)}
.prod .button.add_to_cart_button{height:38px;padding:0 16px;font-size:14px;box-shadow:none;background:var(--teal-soft);color:var(--teal-700)}
.prod .button.add_to_cart_button:hover{background:#dcecef;color:var(--teal-700)}

/* ---- Single product ---- */
.single-product div.product{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;margin-top:34px}
.single-product div.product .woocommerce-product-gallery{margin:0}
.single-product div.product .summary{margin:0}
.single-product div.product .product_title{font-family:var(--font-display);font-size:clamp(28px,3.4vw,42px);letter-spacing:-.02em;margin:6px 0 14px}
.single-product .woocommerce-breadcrumb{font-family:var(--mono);font-size:13px;color:var(--muted);margin:24px 0 8px}
.single-product div.product p.price,.single-product div.product span.price{color:var(--ink)}
.single-product div.product p.price .amount,.single-product div.product p.price bdi{font-family:var(--font-display);font-size:30px;font-weight:800}
.single-product div.product .woocommerce-product-details__short-description{color:var(--ink-2);font-size:16px;margin:16px 0}
.single-product .quantity input{height:46px;border:1px solid var(--line-2);border-radius:12px;width:72px;padding:0 10px}
.woocommerce-tabs{grid-column:1 / -1;margin-top:30px;border-top:1px solid var(--line);padding-top:10px}
.woocommerce-tabs ul.tabs{list-style:none;display:flex;gap:8px;flex-wrap:wrap;padding:0;margin:0 0 22px;border-bottom:1px solid var(--line)}
.woocommerce-tabs ul.tabs li{margin:0}
.woocommerce-tabs ul.tabs li a{display:inline-block;padding:14px 20px;font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px}
.woocommerce-tabs ul.tabs li.active a,.woocommerce-tabs ul.tabs li a:hover{color:var(--teal);border-bottom-color:var(--teal)}
.related.products,.upsells.products{grid-column:1 / -1;margin-top:20px}
.related.products>h2,.upsells.products>h2{font-family:var(--font-display);font-size:24px;margin-bottom:18px}
@media(max-width:860px){.single-product div.product{grid-template-columns:1fr;gap:28px}}

/* ---- Cart / Checkout / Account forms ---- */
.woocommerce table.shop_table{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;border-collapse:separate}
.woocommerce table.shop_table th{background:var(--teal-mist);font-family:var(--font-display);font-size:14px;color:var(--ink)}
.woocommerce table.shop_table td,.woocommerce table.shop_table th{padding:16px 18px;border-top:1px solid var(--line)}
.woocommerce .cart-collaterals .cart_totals,.woocommerce-checkout #order_review,.woocommerce-checkout #customer_details .col-1,.woocommerce-checkout #customer_details .col-2{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;box-shadow:var(--sh-sm)}
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,.woocommerce form .form-row select,
.woocommerce-checkout input.input-text,.select2-container .select2-selection{border:1px solid var(--line-2)!important;border-radius:11px!important;min-height:46px;padding:10px 14px;font-family:var(--font)}
.woocommerce form .form-row label{font-weight:700;font-size:13.5px;color:var(--ink)}
.woocommerce .woocommerce-info,.woocommerce .woocommerce-message{border-top-color:var(--teal);background:var(--teal-mist);border-radius:12px}
.woocommerce .woocommerce-message::before,.woocommerce .woocommerce-info::before{color:var(--teal)}

/* My Account layout: nav + content side by side */
.woocommerce-account .woocommerce{display:grid;grid-template-columns:240px 1fr;gap:32px;padding:40px 0 70px}
.woocommerce-MyAccount-navigation ul{flex-direction:column;align-items:stretch}
.woocommerce-MyAccount-navigation ul li a{justify-content:flex-start;width:100%}
.woocommerce-MyAccount-content{min-width:0}
@media(max-width:860px){.woocommerce-account .woocommerce{grid-template-columns:1fr;gap:18px}.woocommerce-MyAccount-navigation ul{flex-direction:row}}