/* ==========================================================================
   ONEKING Shop - main stylesheet
   Layout language: Tenveo-style independent storefront
   ========================================================================== */

:root {
  --brand: #1668e3;
  --brand-600: #1259c4;
  --brand-700: #0f4ba6;
  --brand-dark: #0a2540;
  --brand-soft: #eaf1ff;
  --accent: #ff6a00;
  --accent-600: #e85f00;
  --ink: #101828;
  --ink-2: #344054;
  --muted: #667085;
  --line: #e4e7ec;
  --line-2: #eaecf0;
  --bg: #ffffff;
  --soft: #f5f8ff;
  --soft-2: #f8fafc;
  --star: #ffb020;
  --ok: #12b76a;
  --radius: 14px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
  --shadow: 0 6px 20px rgba(16, 24, 40, .08);
  --shadow-lg: 0 18px 48px rgba(16, 24, 40, .14);
  --container: 1240px;
  --header-h: 68px;
}

/* ---------- base ---------- */
html { scroll-behavior: smooth; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--ink);
  background: var(--bg);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
body.okg-no-scroll { overflow: hidden; }
h1, h2, h3, h4, h5 { margin: 0 0 .5em; line-height: 1.25; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
h1 { font-size: clamp(30px, 4vw, 46px); }
h2 { font-size: clamp(24px, 3vw, 36px); }
h3 { font-size: clamp(19px, 2vw, 24px); }
h4 { font-size: 18px; }
p { margin: 0 0 1em; }
a { color: var(--brand); transition: color .18s ease, opacity .18s ease; }
a:hover { color: var(--brand-700); }
ul, ol { margin: 0 0 1em 1.2em; padding: 0; }
img { border-radius: var(--radius-sm); }
button { font-family: inherit; }
.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Visually hidden via clip, not by moving it off-canvas: `left:-9999px` is a
   physical offset, and in RTL the browser counts it as horizontal overflow
   (the cart page reported an 11440px scroll width in Arabic). */
.skip-link {
  position: absolute; inset-block-start: 0; inset-inline-start: 0; z-index: 9999;
  inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  background: var(--brand); color: #fff;
}
.skip-link:focus {
  inline-size: auto; block-size: auto; overflow: visible; clip-path: none;
  padding: 10px 16px; margin: 8px; color: #fff;
}

/* ---------- layout helpers ---------- */
/* box-sizing: 这个容器是 width:100% + padding，默认 content-box 会多出 40px，
   在手机上表现为整页可以横向拖动、工具栏右侧被截断。 */
.okg-container { box-sizing: border-box; width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 20px; }
.okg-container--narrow { max-width: 860px; }
.okg-section { padding: 64px 0; }
.okg-section--soft { background: var(--soft-2); }
.okg-section--tint { background: var(--soft); }
.okg-section--dark { background: var(--brand-dark); color: #fff; }
.okg-section--dark h2, .okg-section--dark h3 { color: #fff; }
.okg-grid { display: grid; gap: 24px; }
.okg-grid-2 { grid-template-columns: repeat(2, 1fr); }
.okg-grid-3 { grid-template-columns: repeat(3, 1fr); }
.okg-grid-4 { grid-template-columns: repeat(4, 1fr); }
.okg-text-center { text-align: center; }
.okg-eyebrow {
  display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--brand); margin-bottom: 10px;
}
.okg-section-head { text-align: center; max-width: 760px; margin: 0 auto 40px; }
.okg-section-head h2 { margin-bottom: 10px; }
.okg-section-head p { color: var(--muted); margin: 0; }
.okg-section-head--left { text-align: left; margin-left: 0; }

/* ---------- buttons ---------- */
.okg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 24px; border-radius: 999px; font-weight: 700; font-size: 15px;
  border: 1px solid transparent; cursor: pointer; text-align: center;
  transition: transform .16s ease, background .18s ease, box-shadow .18s ease, color .18s ease;
}
.okg-btn--primary { background: var(--brand); color: #fff; box-shadow: 0 6px 16px rgba(22, 104, 227, .28); }
.okg-btn--primary:hover { background: var(--brand-600); color: #fff; transform: translateY(-1px); }
.okg-btn--accent { background: var(--accent); color: #fff; box-shadow: 0 6px 16px rgba(255, 106, 0, .28); }
.okg-btn--accent:hover { background: var(--accent-600); color: #fff; transform: translateY(-1px); }
.okg-btn--outline { background: #fff; color: var(--brand); border-color: var(--brand); }
.okg-btn--outline:hover { background: var(--brand-soft); color: var(--brand-700); }
.okg-btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.okg-btn--ghost:hover { background: rgba(255,255,255,.12); color: #fff; }
.okg-btn--light { background: #fff; color: var(--brand-dark); }
.okg-btn--light:hover { background: #eaf1ff; color: var(--brand-700); }
.okg-btn--sm { padding: 9px 18px; font-size: 14px; }
.okg-btn--block { width: 100%; }
.okg-btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.okg-btn-row--center { justify-content: center; }

/* ---------- announcement bar ---------- */
.okg-announce { background: var(--brand-dark); color: #fff; font-size: 13.5px; padding: 9px 0; }
.okg-announce .okg-container { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; text-align: center; }
.okg-announce a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.okg-announce .okg-announce__close { background: none; border: 0; color: rgba(255,255,255,.7); cursor: pointer; font-size: 16px; line-height: 1; }

/* ---------- header ---------- */
.okg-header { position: sticky; top: 0; z-index: 900; background: #fff; border-bottom: 1px solid var(--line-2); }
.okg-header__inner { display: flex; align-items: center; gap: 24px; height: var(--header-h); }
.okg-logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 20px; color: var(--brand-dark); letter-spacing: -.02em; flex: 0 0 auto; }
.okg-logo img { max-height: 38px; width: auto; border-radius: 0; }
.okg-logo__mark {
  width: 34px; height: 34px; border-radius: 9px; background: linear-gradient(135deg, var(--brand), #4f9bff);
  color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 800;
}
.okg-nav { display: flex; align-items: center; gap: 4px; margin-left: 8px; flex: 1 1 auto; }
.okg-nav > ul { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.okg-nav li { position: relative; }
.okg-nav li a {
  display: block; padding: 10px 14px; font-size: 15px; font-weight: 600; color: var(--ink-2); border-radius: 8px;
}
.okg-nav li a:hover { color: var(--brand); background: var(--brand-soft); }
.okg-nav li.current-menu-item > a, .okg-nav li.current-menu-ancestor > a { color: var(--brand); }
.okg-nav .sub-menu {
  position: absolute; top: 100%; left: 0; min-width: 220px; background: #fff; border: 1px solid var(--line-2);
  border-radius: 12px; box-shadow: var(--shadow); padding: 8px; list-style: none; margin: 4px 0 0;
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: all .18s ease; z-index: 20;
}
.okg-nav li:hover > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.okg-nav .sub-menu li a { font-weight: 500; font-size: 14px; padding: 8px 12px; }
.okg-header__actions { display: flex; align-items: center; gap: 10px; margin-left: auto; flex: 0 0 auto; }
.okg-icon-btn {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: #fff;
  display: inline-flex; align-items: center; justify-content: center; color: var(--ink-2); cursor: pointer; position: relative;
}
.okg-icon-btn:hover { border-color: var(--brand); color: var(--brand); }
.okg-icon-btn svg { width: 19px; height: 19px; }
.okg-cart-count {
  position: absolute; top: -4px; right: -4px; min-width: 19px; height: 19px; border-radius: 999px;
  background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; display: inline-flex;
  align-items: center; justify-content: center; padding: 0 5px;
}
.okg-header__b2b {
  background: linear-gradient(135deg, var(--brand-dark), #123a63); color: #fff; font-size: 13px; font-weight: 700;
  padding: 8px 14px; border-radius: 999px; white-space: nowrap;
}
.okg-header__b2b:hover { color: #fff; opacity: .9; }
.okg-burger { display: none; }

/* ---------- mobile drawer ---------- */
.okg-drawer {
  position: fixed; inset: 0; z-index: 1200; background: rgba(16,24,40,.45); opacity: 0; visibility: hidden;
  transition: opacity .2s ease;
}
.okg-drawer.is-open { opacity: 1; visibility: visible; }
.okg-drawer__panel {
  position: absolute; top: 0; inset-inline-end: 0; width: min(360px, 88vw); height: 100%; background: #fff; padding: 22px;
  overflow-y: auto; transform: translateX(100%); transition: transform .24s ease;
}
/* In RTL the panel sits on the inline-start edge, so it has to leave that way. */
[dir="rtl"] .okg-drawer__panel { transform: translateX(-100%); }
[dir="rtl"] .okg-drawer.is-open .okg-drawer__panel { transform: translateX(0); }
.okg-drawer.is-open .okg-drawer__panel { transform: translateX(0); }
.okg-drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.okg-drawer__close { background: none; border: 0; font-size: 26px; line-height: 1; cursor: pointer; color: var(--muted); }
.okg-drawer ul { list-style: none; margin: 0; padding: 0; }
.okg-drawer ul li a { display: block; padding: 12px 0; font-weight: 600; border-bottom: 1px solid var(--line-2); color: var(--ink); }
.okg-drawer .sub-menu { padding-inline-start: 14px; }
.okg-drawer .sub-menu li a { font-weight: 500; color: var(--muted); }

/* ---------- search overlay ---------- */
.okg-search-overlay {
  position: fixed; inset: 0; z-index: 1300; background: rgba(10,37,64,.55); backdrop-filter: blur(3px);
  display: flex; align-items: flex-start; justify-content: center; padding-top: 14vh;
  opacity: 0; visibility: hidden; transition: opacity .2s ease;
}
.okg-search-overlay.is-open { opacity: 1; visibility: visible; }
.okg-search-box { width: min(680px, 92vw); background: #fff; border-radius: 16px; padding: 18px; box-shadow: var(--shadow-lg); }
.okg-search-box form { display: flex; gap: 10px; }
.okg-search-box input {
  flex: 1; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; font-size: 16px;
}
.okg-search-box input:focus { outline: none; border-color: var(--brand); }

/* ---------- logo / trust strip ---------- */
.okg-strip { background: #fff; border-bottom: 1px solid var(--line-2); padding: 18px 0; }
.okg-strip__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.okg-strip span { font-size: 13px; font-weight: 700; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
.okg-strip__logos { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.okg-strip__logos em {
  font-style: normal; font-weight: 800; font-size: 15px; color: var(--ink-2); opacity: .78; letter-spacing: -.01em;
}

/* ---------- product card ---------- */
.okg-products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.okg-card {
  position: relative; background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius);
  padding: 16px; display: flex; flex-direction: column; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.okg-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: #d7e2f7; }
.okg-card__media { position: relative; background: var(--soft-2); border-radius: 10px; overflow: hidden; margin-bottom: 14px; }
.okg-card__media img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: #fff; border-radius: 0; }
.okg-card__badges { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.okg-badge {
  font-size: 11.5px; font-weight: 800; padding: 4px 9px; border-radius: 6px; text-transform: uppercase; letter-spacing: .04em;
}
.okg-badge--sale { background: var(--accent); color: #fff; }
.okg-badge--new { background: var(--ok); color: #fff; }
.okg-badge--hot { background: var(--brand); color: #fff; }
.okg-badge--b2b { background: var(--brand-dark); color: #fff; }
.okg-card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
/* Same chips on the single-product summary (hooked after the price). */
.okg-single__tags { margin: 2px 0 10px; }
.okg-chip {
  font-size: 11.5px; font-weight: 600; background: var(--brand-soft); color: var(--brand-700);
  padding: 3px 9px; border-radius: 999px;
}
.okg-chip--scene { background: #fff4e6; color: #b93800; }
.okg-card__title { font-size: 15px; font-weight: 600; line-height: 1.45; margin-bottom: 8px; min-height: 44px; }
.okg-card__title a { color: var(--ink); }
.okg-card__title a:hover { color: var(--brand); }
.okg-rating { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.okg-stars { color: var(--star); letter-spacing: 1px; font-size: 14px; }
.okg-price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.okg-price .amount, .okg-price bdi { font-size: 19px; font-weight: 800; color: var(--ink); }
.okg-price del { font-size: 14px; color: var(--muted); font-weight: 500; }
/* Sale contrast: original price recedes in grey, promo price pops in red.
   The visible digits live in <span class=amount><bdi>$9.99</bdi></span>, so the
   bdi MUST be targeted too — it carries its own ink color from the rule above
   and inherits nothing from .amount (this exact gap shipped black prices). */
.okg-price del .amount, .okg-price del bdi { font-size: 14px; color: var(--muted); font-weight: 500; }
.okg-price ins { text-decoration: none; }
.okg-price ins .amount, .okg-price ins bdi { color: var(--red); }
.woocommerce div.product .price ins, .woocommerce div.product .price ins bdi { color: var(--red); text-decoration: none; }
.okg-price .okg-price__from { font-size: 12.5px; color: var(--muted); }
.okg-price--b2b .amount { color: var(--brand-700); }
.okg-card__actions { margin-top: auto; display: grid; grid-template-columns: 1fr; gap: 8px; }
.okg-card__actions .okg-btn { padding: 10px 16px; font-size: 14px; }
.okg-card__quick { display: flex; gap: 8px; }
/* flex:1 pins the width, but the JS "Added to cart" confirmation used to wrap
   to two lines and double the height. Nowrap keeps the button identical in
   both states; overflow guard covers ultra-narrow cards. */
.okg-card__quick .okg-btn { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.okg-card__moq { font-size: 12px; color: var(--muted); margin-top: 8px; text-align: center; }

/* ---------- archive pagination (WooCommerce's own nav) ----------
   Woo ships grey bordered boxes; these become brand pills: white cards that
   tint blue on hover, the current page a solid brand chip. Same selectors as
   Woo's sheet but later in the cascade, so they win without !important. */
.woocommerce nav.woocommerce-pagination ul.page-numbers {
  display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap;
  border: 0; margin: 34px 0 4px; overflow: visible;
}
.woocommerce nav.woocommerce-pagination ul.page-numbers li {
  float: none; border: 0; padding: 0; overflow: visible;
}
.woocommerce nav.woocommerce-pagination ul.page-numbers a,
.woocommerce nav.woocommerce-pagination ul.page-numbers span {
  display: inline-flex; align-items: center; justify-content: center;
  width: auto; height: 42px; min-inline-size: 42px; padding: 0 15px;
  border: 1px solid var(--line); border-radius: 10px;
  background: #fff; color: var(--ink-2); font-size: 14.5px; font-weight: 600; line-height: 1;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.woocommerce nav.woocommerce-pagination ul.page-numbers a:hover,
.woocommerce nav.woocommerce-pagination ul.page-numbers a:focus-visible {
  color: var(--brand); border-color: var(--brand); background: var(--brand-soft);
}
.woocommerce nav.woocommerce-pagination ul.page-numbers span.current {
  background: var(--brand); border-color: var(--brand); color: #fff;
}
.woocommerce nav.woocommerce-pagination ul.page-numbers span.dots {
  border-color: transparent; background: none; min-inline-size: auto; padding: 0 4px;
}
.okg-pagination a.page-numbers:hover { color: var(--brand); border-color: var(--brand); background: var(--brand-soft); }

/* ---------- category / scenario tiles ---------- */
.okg-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.okg-tile {
  position: relative; border-radius: var(--radius); overflow: hidden; min-height: 260px; display: flex;
  align-items: flex-end; padding: 22px; color: #fff; text-decoration: none;
  background: linear-gradient(160deg, #123a63, #0a2540);
}
.okg-tile::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,37,64,0) 35%, rgba(10,37,64,.86) 100%);
}
.okg-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.okg-tile__body { position: relative; z-index: 2; }
.okg-tile__body h3 { color: #fff; margin-bottom: 6px; font-size: 20px; }
.okg-tile__body p { color: rgba(255,255,255,.82); font-size: 14px; margin: 0 0 10px; }
.okg-tile__link { font-weight: 700; font-size: 14px; color: #fff; display: inline-flex; align-items: center; gap: 6px; }
.okg-tile__link::after { content: "\2192"; transition: transform .18s ease; }
.okg-tile:hover .okg-tile__link::after { transform: translateX(4px); }
.okg-tile:hover img { transform: scale(1.04); }
.okg-tile img { transition: transform .4s ease; }

/* ---------- trust / feature list ---------- */
.okg-trust { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 18px; }
.okg-trust__item { text-align: center; padding: 18px 12px; background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius); }
.okg-trust__item .okg-ico {
  width: 46px; height: 46px; border-radius: 50%; background: var(--brand-soft); color: var(--brand);
  display: inline-flex; align-items: center; justify-content: center; margin-bottom: 10px; font-size: 20px;
}
.okg-trust__item h4 { font-size: 15px; margin-bottom: 4px; }
.okg-trust__item p { font-size: 13px; color: var(--muted); margin: 0; }

/* Dark variant: the same six points sit inside the dark "Why choose us" band.
   Without this the white cards would punch holes in the section. */
.okg-trust__item h3 { font-size: 15px; margin-bottom: 4px; }
.okg-trust--dark .okg-trust__item {
  background: rgba(255, 255, 255, .045);
  border-color: rgba(255, 255, 255, .12);
}
.okg-trust--dark .okg-trust__item .okg-ico {
  background: rgba(58, 118, 220, .22);
  color: #8fbaff;
}
.okg-trust--dark .okg-trust__item h3 { color: #fff; }
.okg-trust--dark .okg-trust__item p { color: rgba(226, 236, 255, .68); }

/* ---------- testimonials ---------- */
.okg-quotes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.okg-quote { background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius); padding: 22px; }
.okg-quote .okg-stars { margin-bottom: 10px; }
.okg-quote p { font-size: 14.5px; color: var(--ink-2); }
.okg-quote__meta { font-size: 13px; color: var(--muted); display: flex; justify-content: space-between; gap: 10px; margin-top: 14px; border-top: 1px solid var(--line-2); padding-top: 12px; }
.okg-quote__meta strong { color: var(--ink); font-size: 13.5px; }

/* ---------- solutions grid ---------- */
.okg-solutions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.okg-solution {
  border-radius: var(--radius); overflow: hidden; background: #fff; border: 1px solid var(--line-2);
  display: flex; flex-direction: column; transition: box-shadow .2s ease, transform .2s ease;
}
.okg-solution:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.okg-solution img { width: 100%; height: 180px; object-fit: cover; border-radius: 0; }
.okg-solution__body { padding: 20px; }
.okg-solution__body h3 { font-size: 18px; margin-bottom: 8px; }
.okg-solution__body p { font-size: 14.5px; color: var(--muted); }
.okg-solution__body .okg-link { font-weight: 700; font-size: 14px; }

/* ---------- blog ---------- */
.okg-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.okg-post { background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.okg-post img { width: 100%; height: 200px; object-fit: cover; border-radius: 0; }
.okg-post__body { padding: 20px; display: flex; flex-direction: column; flex: 1; }
.okg-post__meta { font-size: 12.5px; color: var(--muted); margin-bottom: 8px; display: flex; gap: 10px; flex-wrap: wrap; }
.okg-post__meta .tag { background: var(--brand-soft); color: var(--brand-700); padding: 2px 9px; border-radius: 999px; font-weight: 700; }
.okg-post h3 { font-size: 17.5px; margin-bottom: 8px; line-height: 1.4; }
.okg-post p { font-size: 14.5px; color: var(--muted); }
.okg-post .okg-link { margin-top: auto; font-weight: 700; font-size: 14px; }

/* ---------- stats / why ---------- */
.okg-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.okg-stat { text-align: center; padding: 26px 20px; background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius); }
.okg-stat strong { display: block; font-size: 42px; color: var(--brand); line-height: 1.1; }
.okg-stat h4 { margin: 8px 0 6px; }
.okg-stat p { font-size: 14px; color: var(--muted); margin: 0; }
.okg-section--dark .okg-stat { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); }
.okg-section--dark .okg-stat strong { color: #7fb2ff; }
.okg-section--dark .okg-stat h4 { color: #fff; }
.okg-section--dark .okg-stat p { color: rgba(255,255,255,.75); }

/* ---------- CTA ---------- */
.okg-cta { background: linear-gradient(135deg, var(--brand-dark) 0%, #14406e 100%); color: #fff; border-radius: 20px; padding: 46px 40px; text-align: center; }
.okg-cta h2 { color: #fff; }
.okg-cta p { color: rgba(255,255,255,.82); max-width: 700px; margin: 0 auto 24px; }
.okg-cta .okg-btn-row { justify-content: center; }

/* ---------- newsletter ---------- */
.okg-newsletter { background: var(--soft); border-radius: 18px; padding: 40px; text-align: center; }
.okg-newsletter h3 { margin-bottom: 8px; }
.okg-newsletter p { color: var(--muted); margin-bottom: 20px; }
.okg-newsletter form { display: flex; gap: 10px; max-width: 520px; margin: 0 auto; }
.okg-newsletter input { flex: 1; padding: 12px 16px; border: 1px solid var(--line); border-radius: 999px; font-size: 15px; }
.okg-newsletter input:focus { outline: none; border-color: var(--brand); }
.okg-newsletter__note { font-size: 12.5px; color: var(--muted); margin-top: 12px; }

/* ---------- breadcrumb ---------- */
.okg-crumbs { background: var(--soft-2); border-bottom: 1px solid var(--line-2); font-size: 13.5px; padding: 12px 0; }
.okg-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; color: var(--muted); }
.okg-crumbs a { color: var(--muted); }
.okg-crumbs a:hover { color: var(--brand); }
.okg-crumbs li + li::before { content: "/"; margin-right: 8px; color: #cbd2dc; }

/* ---------- page / blog content ---------- */
.okg-page-hero { background: var(--brand-dark); color: #fff; padding: 56px 0 48px; }
.okg-page-hero h1 { color: #fff; margin-bottom: 10px; }
.okg-page-hero p { color: rgba(255,255,255,.8); margin: 0; max-width: 760px; }
.okg-content { padding: 56px 0; }
.okg-content h2 { margin-top: 1.4em; }
.okg-content h3 { margin-top: 1.2em; }
.okg-content img { border-radius: var(--radius); }
.okg-content blockquote {
  border-left: 4px solid var(--brand); background: var(--brand-soft); padding: 16px 20px; border-radius: 0 10px 10px 0; margin: 1.5em 0;
}
.okg-content table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: 14.5px; }
.okg-content table th, .okg-content table td { border: 1px solid var(--line-2); padding: 10px 12px; text-align: left; }
.okg-content table th { background: var(--soft-2); }
.okg-content ul li, .okg-content ol li { margin-bottom: 6px; }
.okg-entry { background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius); padding: 34px; }
.okg-entry__meta { color: var(--muted); font-size: 13.5px; margin-bottom: 18px; display: flex; gap: 14px; flex-wrap: wrap; }
.okg-post-nav { display: flex; justify-content: space-between; gap: 16px; margin-top: 30px; font-size: 14px; }
.okg-share { display: flex; gap: 10px; align-items: center; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line-2); }
.okg-share a {
  width: 36px; height: 36px; border-radius: 50%; background: var(--soft-2); display: inline-flex;
  align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--ink-2);
}
.okg-share a:hover { background: var(--brand); color: #fff; }
.okg-pagination { display: flex; gap: 8px; justify-content: center; margin: 40px 0 0; flex-wrap: wrap; }
.okg-pagination .page-numbers {
  padding: 9px 15px; border: 1px solid var(--line); border-radius: 8px; font-weight: 600; font-size: 14px; color: var(--ink-2);
}
.okg-pagination .page-numbers.current { background: var(--brand); color: #fff; border-color: var(--brand); }
.okg-grid-blog { display: grid; grid-template-columns: 1fr 320px; gap: 40px; align-items: start; }
.okg-sidebar .okg-widget { background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius); padding: 22px; margin-bottom: 22px; }
.okg-sidebar .okg-widget h4 { margin-bottom: 14px; font-size: 16px; }
.okg-sidebar ul { list-style: none; margin: 0; padding: 0; }
.okg-sidebar ul li { padding: 8px 0; border-bottom: 1px solid var(--line-2); font-size: 14.5px; }
.okg-sidebar ul li:last-child { border-bottom: 0; }

/* ---------- WooCommerce overrides ---------- */
.woocommerce .okg-shop-layout { display: grid; grid-template-columns: 260px 1fr; gap: 32px; align-items: start; }
.woocommerce ul.products { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 22px; margin: 0; padding: 0; }
/* WooCommerce's clearfix pseudo-elements become grid items and eat cell (1,1),
   pushing every product one cell to the right. Grid needs no clearfix. */
.woocommerce ul.products::before, .woocommerce ul.products::after { display: none !important; content: none; }
.woocommerce ul.products li.product {
  background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius); padding: 16px;
  display: flex; flex-direction: column; width: auto !important; margin: 0 !important; float: none !important;
}
.woocommerce ul.products li.product:hover { box-shadow: var(--shadow); }
.woocommerce ul.products li.product img { border-radius: 10px; margin-bottom: 12px !important; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 15px; line-height: 1.45; padding: 0; margin-bottom: 8px; }
.woocommerce ul.products li.product .price { color: var(--ink); font-size: 18px; font-weight: 800; margin-bottom: 12px; }
.woocommerce ul.products li.product .price del { color: var(--muted); font-weight: 500; font-size: 14px; }
.woocommerce ul.products li.product .button { border-radius: 999px; background: var(--brand); color: #fff; font-weight: 700; }
.woocommerce ul.products li.product .button:hover { background: var(--brand-600); }
.woocommerce ul.products li.product .onsale {
  background: var(--accent); color: #fff; border-radius: 6px; font-size: 11px; font-weight: 800;
  min-height: 0; line-height: 1.6; padding: 3px 9px; top: 8px; left: 8px; right: auto; margin: 0;
}
.woocommerce .woocommerce-result-count, .woocommerce .woocommerce-ordering { font-size: 14px; color: var(--muted); }
.woocommerce .woocommerce-ordering select { border: 1px solid var(--line); border-radius: 8px; padding: 8px; }
.woocommerce div.product div.summary .price { font-size: 26px; font-weight: 800; color: var(--ink); }
.woocommerce div.product div.summary .price del { font-size: 18px; color: var(--muted); }
.woocommerce div.product div.images { border: 1px solid var(--line-2); border-radius: var(--radius); padding: 12px; }

/* Single product layout.
 * Some setups never enqueue WooCommerce's base stylesheet (woocommerce.css),
 * which carries the float layout + clearfix for div.images / div.summary.
 * Without it the next section (trust row, tabs) slides up over the summary
 * and covers the title and price. Own the layout here instead. */
/* :not(.okg-card) —— 卡片 div 现在带 .product 类（post_class 修复后），
   不排除的话下面这套单品页 grid 会把卡片也拆成两栏（标题挤在左边、价格飘右边）。 */
.woocommerce div.product:not(.okg-card) {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 36px;
  align-items: start;
}
.woocommerce div.product:not(.okg-card)::before,
.woocommerce div.product:not(.okg-card)::after { display: none; }
.woocommerce div.product:not(.okg-card) > div.images,
.woocommerce div.product:not(.okg-card) > div.summary { float: none; width: auto; margin: 0; }
.woocommerce div.product:not(.okg-card) > div.images { grid-column: 1; }
.woocommerce div.product:not(.okg-card) > div.summary { grid-column: 2; }
.woocommerce div.product:not(.okg-card) > .woocommerce-notices-wrapper,
.woocommerce div.product:not(.okg-card) > .woocommerce-tabs,
.woocommerce div.product:not(.okg-card) > .related,
.woocommerce div.product:not(.okg-card) > .upsells,
.woocommerce div.product:not(.okg-card) > section.okg-section { grid-column: 1 / -1; }
.woocommerce div.product > section.okg-section { margin: 12px 0 0; border-radius: var(--radius); }
.woocommerce div.product > section.okg-section .okg-trust { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); padding: 0; }
.woocommerce div.product div.images .flex-viewport { border-radius: 10px; overflow: hidden; }
.woocommerce div.product .woocommerce-product-gallery__image img { width: 100%; height: auto; display: block; }
.woocommerce div.product form.cart { display: flex; align-items: center; gap: 12px; margin: 18px 0; }
.woocommerce div.product form.cart .qty { padding: 10px; border: 1px solid var(--line); border-radius: 10px; width: 72px; }
.woocommerce div.product p.stock { color: #1e7b45; font-weight: 600; }

/* Product title is usually a long SKU sentence ("… 4K NDI PTZ Camera with AI
 * Auto-Tracking, 12X Optical Zoom, HDMI/USB3.0/LAN PoE for OBS, Zoom & vMix").
 * Inheriting the global h1 (46px) turns it into a 5-line wall of text that
 * out-shouts the product photo. Cap it and let it balance. */
.woocommerce div.product:not(.okg-card) .product_title {
  font-size: clamp(26px, 2.5vw, 36px);
  line-height: 1.24;
  letter-spacing: -0.012em;
  margin: 0 0 12px;
  text-wrap: pretty;
  overflow-wrap: anywhere;
  hyphens: auto;
}

@media (max-width: 900px) {
  /* 特异性必须与上面那条基础规则一致（.woocommerce div.product:not(.okg-card)
     = 0,3,1）。写成 .woocommerce div.product（0,2,1）会输给基础规则，
     手机/平板上 grid 仍是 5fr + 6fr 两栏 —— 图被压到 150px、标题挤成 170px
     宽的窄条里折成十几行，看起来"标题比图还大"。2026-11-03 修。 */
  .woocommerce div.product:not(.okg-card) { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .woocommerce div.product,
  .woocommerce div.product:not(.okg-card) > div.images,
  .woocommerce div.product:not(.okg-card) > div.summary,
  .woocommerce div.product:not(.okg-card) > .woocommerce-notices-wrapper,
  .woocommerce div.product:not(.okg-card) > .woocommerce-tabs,
  .woocommerce div.product:not(.okg-card) > .related,
  .woocommerce div.product:not(.okg-card) > .upsells,
  .woocommerce div.product:not(.okg-card) > section.okg-section { grid-column: 1 / -1; }

  /* 标题：脱离 h1 的 30px 下限，随视口缩放；优先保证不被硬裁 */
  .woocommerce div.product:not(.okg-card) .product_title {
    font-size: clamp(20px, 4.6vw, 26px);
    line-height: 1.32;
    letter-spacing: 0;
    margin: 0 0 10px;
    text-wrap: pretty;
    overflow-wrap: anywhere;
  }
  .woocommerce div.product:not(.okg-card) div.summary .price { font-size: 24px; }

  /* 图库：整行宽度、居中、缩略图横排四列（WooCommerce 默认 float:left
     在窄容器里会碎成一列竖排） */
  .woocommerce div.product:not(.okg-card) div.images {
    float: none; width: 100%; max-width: 560px; margin: 0 auto;
  }
  .woocommerce div.product:not(.okg-card) .woocommerce-product-gallery__image { overflow: hidden; }
  .woocommerce div.product:not(.okg-card) div.images .flex-control-thumbs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 10px 0 0;
    padding: 0;
  }
  .woocommerce div.product:not(.okg-card) div.images .flex-control-thumbs li {
    width: auto; float: none; margin: 0;
  }
  .woocommerce div.product:not(.okg-card) div.images .flex-control-thumbs img {
    width: 100%; height: auto; border-radius: 8px; opacity: .72;
  }
  .woocommerce div.product:not(.okg-card) div.images .flex-control-thumbs img.flex-active { opacity: 1; }

  /* 加购：允许换行，按钮至少 44px 高（触控目标），不再被右边缘裁掉 */
  .woocommerce div.product:not(.okg-card) form.cart { flex-wrap: wrap; gap: 10px; margin: 14px 0; }
  .woocommerce div.product:not(.okg-card) form.cart .qty { width: 76px; height: 44px; box-sizing: border-box; }
  .woocommerce div.product:not(.okg-card) form.cart .single_add_to_cart_button {
    flex: 1 1 160px; min-height: 44px; white-space: normal; line-height: 1.2;
  }

  /* 芯片 / 下载按钮：宁可换行，也不裁字 */
  .woocommerce div.product:not(.okg-card) .okg-single__tags { flex-wrap: wrap; }
  .woocommerce div.product:not(.okg-card) .okg-datasheet-row { display: flex; flex-wrap: wrap; gap: 8px; }
  .woocommerce div.product:not(.okg-card) .okg-datasheet {
    max-width: 100%; white-space: normal; overflow-wrap: anywhere; word-break: break-word;
  }
  .woocommerce div.product:not(.okg-card) .okg-datasheet__label { white-space: normal; }
  .woocommerce div.product:not(.okg-card) .okg-datasheet__meta {
    white-space: normal; overflow: visible; text-overflow: clip; flex-basis: 100%;
  }
  .woocommerce div.product:not(.okg-card) .okg-trust { grid-template-columns: 1fr; }
}

/* ≤900px 的细节修正（第二轮） */
@media (max-width: 900px) {
  /* 缩略图按 58px 最小宽自动排：4 张 = 4 列，5 张 = 5 列一行放下，
     不再出现"最后一张孤零零挂在第二行" */
  .woocommerce div.product:not(.okg-card) div.images .flex-control-thumbs {
    grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
  }

  /* 下载按钮：图标 + "Download datasheet" 一行，文件名另起一行缩进对齐，
     不再是标题折两行、文件名贴在右边 */
  .woocommerce div.product:not(.okg-card) .okg-datasheet {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 8px;
    row-gap: 2px;
  }
  .woocommerce div.product:not(.okg-card) .okg-datasheet__label { white-space: nowrap; flex: none; }
  .woocommerce div.product:not(.okg-card) .okg-datasheet__meta {
    flex-basis: 100%;
    padding-left: 24px;
  }

  /* SKU / Category / Tags 逐行，别挤成一条 */
  .woocommerce div.product:not(.okg-card) .product_meta > span {
    display: block;
    margin-top: 4px;
  }
  .woocommerce div.product:not(.okg-card) div.summary .price { margin: 2px 0 10px; }
}

.woocommerce div.product .woocommerce-tabs ul.tabs { padding: 0; margin-bottom: 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs li { border-radius: 10px 10px 0 0; background: var(--soft-2); border-color: var(--line-2); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { background: #fff; }
.woocommerce div.product .woocommerce-tabs .panel { border: 1px solid var(--line-2); border-radius: 0 var(--radius) var(--radius) var(--radius); padding: 24px; }
.woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button {
  background: var(--brand); color: #fff; border-radius: 999px; font-weight: 700; padding: 12px 24px;
}
.woocommerce #respond input#submit:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover {
  background: var(--brand-600); color: #fff;
}
.woocommerce #respond input#submit.alt, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt {
  background: var(--accent);
}
.woocommerce #respond input#submit.alt:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover {
  background: var(--accent-600);
}
.woocommerce-cart table.cart, .woocommerce-checkout table, .woocommerce table.shop_table { border-radius: var(--radius); overflow: hidden; }
.woocommerce .quantity .qty { border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.woocommerce-message, .woocommerce-info, .woocommerce-error { border-top-color: var(--brand); border-radius: 10px; }
.woocommerce span.onsale { background: var(--accent); }
.okg-shop-toolbar {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 22px;
  padding-bottom: 16px; border-bottom: 1px solid var(--line-2);
}
.okg-wc-sidebar .widget { background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius); padding: 20px; margin-bottom: 20px; }
.okg-wc-sidebar .widget-title, .okg-wc-sidebar .widgettitle { font-size: 16px; margin-bottom: 14px; }
.okg-wc-sidebar ul { list-style: none; margin: 0; padding: 0; }
.okg-wc-sidebar ul li { padding: 6px 0; font-size: 14.5px; }
.okg-wc-sidebar .woocommerce-widget-layered-nav-list li { border-bottom: 1px solid var(--line-2); }
.okg-filter-toggle { display: none; }

/* ---------- B2B UI ---------- */
.okg-price-lock {
  background: var(--soft); border: 1px dashed var(--brand); color: var(--brand-700); border-radius: 10px;
  padding: 12px 14px; font-size: 14px; font-weight: 600; text-align: center; margin-bottom: 12px;
}
.okg-b2b-bar {
  background: linear-gradient(135deg, var(--brand-dark), #14406e); color: #fff; border-radius: var(--radius);
  padding: 18px 22px; display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 24px;
}
.okg-b2b-bar h4 { color: #fff; margin: 0 0 4px; }
.okg-b2b-bar p { margin: 0; font-size: 14px; color: rgba(255,255,255,.8); }
.okg-b2b-bar .okg-btn { flex: 0 0 auto; }
.okg-tier-table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 14px 0; }
.okg-tier-table th, .okg-tier-table td { border: 1px solid var(--line-2); padding: 8px 12px; text-align: left; }
.okg-tier-table th { background: var(--soft-2); font-weight: 700; }
.okg-notice { padding: 12px 16px; border-radius: 10px; font-size: 14.5px; margin-bottom: 18px; }
.okg-notice--ok { background: #ecfdf3; color: #027a48; border: 1px solid #a6f4c5; }
.okg-notice--warn { background: #fffaeb; color: #b54708; border: 1px solid #fedf89; }
.okg-notice--err { background: #fef3f2; color: #b42318; border: 1px solid #fecdca; }
.okg-form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.okg-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.okg-field label { font-size: 13.5px; font-weight: 700; color: var(--ink-2); }
.okg-field input, .okg-field select, .okg-field textarea {
  border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; font-size: 15px; background: #fff; font-family: inherit;
}
.okg-field input:focus, .okg-field select:focus, .okg-field textarea:focus { outline: none; border-color: var(--brand); }
.okg-field--full { grid-column: 1 / -1; }
.okg-req { color: var(--accent); }
.okg-b2b-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.okg-b2b-card { background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow-sm); }
.okg-b2b-benefits { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 12px; }
.okg-b2b-benefits li { display: flex; gap: 10px; font-size: 15px; color: var(--ink-2); }
.okg-b2b-benefits li::before { content: "\2713"; color: var(--ok); font-weight: 800; }
.okg-quote-list { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.okg-quote-list th, .okg-quote-list td { border-bottom: 1px solid var(--line-2); padding: 12px 10px; text-align: left; }
.okg-quote-list th { background: var(--soft-2); }
.okg-quote-list img { width: 56px; height: 56px; object-fit: contain; border: 1px solid var(--line-2); border-radius: 8px; }

/* ---------- footer ---------- */
.okg-footer { background: var(--brand-dark); color: rgba(255,255,255,.75); margin-top: 0; }
.okg-footer__top { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; padding: 56px 0 40px; }
.okg-footer h4 { color: #fff; font-size: 15px; margin-bottom: 14px; letter-spacing: .02em; }
.okg-footer ul { list-style: none; margin: 0; padding: 0; }
.okg-footer ul li { padding: 5px 0; font-size: 14px; }
.okg-footer ul li a { color: rgba(255,255,255,.72); }
.okg-footer ul li a:hover { color: #fff; }
.okg-footer__brand .okg-logo { color: #fff; margin-bottom: 14px; }
.okg-footer__brand p { font-size: 14px; color: rgba(255,255,255,.7); }
.okg-footer__contact { font-size: 14px; display: grid; gap: 8px; margin-top: 14px; }
.okg-footer__contact a { color: rgba(255,255,255,.85); }
.okg-socials { display: flex; gap: 10px; margin-top: 16px; }
.okg-socials a {
  width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.1); display: inline-flex;
  align-items: center; justify-content: center; color: rgba(255,255,255,.85);
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.okg-socials a svg { width: 17px; height: 17px; display: block; }
.okg-socials a:hover { background: var(--brand); color: #fff; transform: translateY(-2px); }
.okg-footer__bottom { border-top: 1px solid rgba(255,255,255,.12); padding: 20px 0; }
.okg-footer__bottom .okg-container { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; font-size: 13.5px; }
.okg-footer__legal { display: flex; gap: 18px; flex-wrap: wrap; }
.okg-footer__legal a { color: rgba(255,255,255,.7); }
.okg-pay { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.okg-pay img { height: 24px; width: auto; background: #fff; border-radius: 4px; padding: 2px; }
.okg-pay span {
  font-size: 11px; font-weight: 800; background: #fff; color: #1d2939; border-radius: 4px; padding: 4px 7px; letter-spacing: .02em;
}

/* ---------- back to top ---------- */
.okg-totop {
  position: fixed; right: 22px; bottom: 22px; width: 44px; height: 44px; border-radius: 50%;
  background: var(--brand); color: #fff; border: 0; cursor: pointer; box-shadow: var(--shadow);
  display: inline-flex; align-items: center; justify-content: center; z-index: 800; opacity: 0; visibility: hidden;
  transition: opacity .2s ease;
}
.okg-totop.is-show { opacity: 1; visibility: visible; }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .okg-trust { grid-template-columns: repeat(3, 1fr); }
  .okg-footer__top { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 1024px) {
  .okg-products, .okg-tiles, .okg-quotes { grid-template-columns: repeat(2, 1fr); }
  .okg-solutions, .okg-posts, .okg-stats { grid-template-columns: repeat(2, 1fr); }
  .okg-grid-blog, .woocommerce .okg-shop-layout { grid-template-columns: 1fr; }
  .okg-b2b-hero { grid-template-columns: 1fr; }
  .okg-nav { display: none; }
  .okg-burger { display: inline-flex; }
}
@media (max-width: 780px) {
  .okg-section { padding: 44px 0; }
  .okg-products, .okg-tiles, .okg-quotes, .okg-solutions, .okg-posts, .okg-stats, .okg-trust { grid-template-columns: 1fr 1fr; }
  .woocommerce ul.products { grid-template-columns: repeat(2, 1fr) !important; }
  .okg-footer__top { grid-template-columns: 1fr 1fr; }
  .okg-cta { padding: 32px 22px; }
  .okg-newsletter { padding: 26px 20px; }
  .okg-newsletter form { flex-direction: column; }
  .okg-form-grid { grid-template-columns: 1fr; }
  .okg-entry { padding: 22px; }
}
@media (max-width: 560px) {
  .okg-products, .okg-tiles, .okg-quotes, .okg-solutions, .okg-posts, .okg-trust { grid-template-columns: 1fr; }
  .okg-stats { grid-template-columns: 1fr; }
  .woocommerce ul.products { grid-template-columns: 1fr !important; }
  .okg-header__b2b { display: none; }
  .okg-footer__top { grid-template-columns: 1fr; }
}

/* ---------- print ---------- */
@media print {
  .okg-header, .okg-footer, .okg-totop, .okg-announce { display: none !important; }
}

/* ---------------------------------------------------------- language switcher */
.okg-langsw { position: relative; margin-right: 4px; }
.okg-langsw__btn {
  display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 12px;
  background: #fff; border: 1px solid var(--line-2); border-radius: 999px; cursor: pointer;
  font-size: 13px; font-weight: 700; color: var(--ink);
}
.okg-langsw__btn:hover { border-color: var(--brand); color: var(--brand); }
.okg-langsw__globe svg { width: 16px; height: 16px; display: block; }
.okg-langsw__caret { font-size: 10px; opacity: .7; }
.okg-langsw__list {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 120; min-width: 190px; max-height: 320px;
  overflow-y: auto; margin: 0; padding: 6px; list-style: none;
  background: #fff; border: 1px solid var(--line-2); border-radius: 14px; box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transform: translateY(-4px); transition: .15s ease;
}
.okg-langsw.is-open .okg-langsw__list { opacity: 1; visibility: visible; transform: none; }
.okg-langsw__list li a {
  display: block; padding: 8px 12px; border-radius: 9px; color: var(--ink);
  font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.okg-langsw__list li a:hover { background: var(--soft); color: var(--brand); }
.okg-langsw__list li a.is-current { background: var(--soft); color: var(--brand); }
html[dir="rtl"] .okg-langsw__list { right: auto; left: 0; }
@media (max-width: 900px) { .okg-langsw__label { display: none; } }

/* ---------- strikethrough centered on the text middle ---------- */
.okg-price del,
.woocommerce ul.products li.product .price del,
.woocommerce div.product div.summary .price del,
.woocommerce div.product .price del,
.woocommerce-grouped-product-list del {
  text-decoration: none;
  position: relative;
}
.okg-price del::after,
.woocommerce ul.products li.product .price del::after,
.woocommerce div.product div.summary .price del::after,
.woocommerce div.product .price del::after,
.woocommerce-grouped-product-list del::after {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  top: 50%;
  height: 1.5px;
  border-radius: 1px;
  background: currentColor;
  opacity: 0.7;
  transform: translateY(-50%);
}

/* ==========================================================================
   Header: stop long menu labels from wrapping  —  added 2026-10-22
   "Corporate Purchase" used to break onto two lines between 1025px and
   ~1180px, which pushed the nav row taller than --header-h.
   ========================================================================== */
.okg-nav li a { white-space: nowrap; }
.okg-nav > ul { flex-wrap: nowrap; }

@media (max-width: 1260px) {
  .okg-header__inner { gap: 18px; }
  .okg-nav li a { padding: 9px 10px; font-size: 14.5px; }
  .okg-header__actions { gap: 8px; }
  .okg-icon-btn { width: 36px; height: 36px; }
}
@media (max-width: 1140px) {
  .okg-header__inner { gap: 14px; }
  .okg-nav { margin-left: 4px; }
  .okg-nav li a { padding: 8px 8px; font-size: 14px; }
  .okg-langsw__btn { padding: 0 10px; height: 36px; }
}

/* ==========================================================================


/* ==========================================================================
   HERO CAROUSEL V3 — full-width product slides
   Replaces the small right-column slider. One slide fills the whole band:
   copy left, product render right, arrows on the edges, progress bars below.
   ========================================================================== */
.okg-hero2 {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(125% 105% at 50% -18%, #153c6d 0%, rgba(9, 24, 45, 0) 62%),
    linear-gradient(160deg, #0a1f3a 0%, #071628 56%, #040e1c 100%);
}
/* Faint technical grid, faded out towards the edges. */
.okg-hero2::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .45;
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 76px 76px;
  -webkit-mask-image: radial-gradient(72% 76% at 52% 42%, #000 0%, transparent 80%);
  mask-image: radial-gradient(72% 76% at 52% 42%, #000 0%, transparent 80%);
}
.okg-hero2__glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(44% 60% at 77% 44%, rgba(47, 123, 255, .36) 0%, rgba(47, 123, 255, 0) 72%),
    radial-gradient(40% 52% at 8% 92%, rgba(24, 82, 168, .30) 0%, rgba(24, 82, 168, 0) 74%);
}

.okg-hero2__stage {
  position: relative;
  z-index: 2;
  width: min(1680px, 100%);
  margin: 0 auto;
  padding: clamp(40px, 4.6vw, 64px) clamp(56px, 5.6vw, 104px) clamp(22px, 2.4vw, 34px);
}

/* Slides share one grid cell so the band is as tall as the tallest copy. */
.okg-hero2__track { display: grid; }
.okg-hero2__slide {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(18px, 3vw, 48px);
  align-items: center;
  min-height: clamp(300px, 25vw, 384px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* The outgoing slide leaves first, the incoming one enters afterwards, so the
     two copies never ghost over each other mid-transition. */
  transition: opacity .2s ease, visibility 0s linear .2s;
}
.okg-hero2__slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .52s ease .1s, visibility 0s;
}

/* ---- copy ---- */
.okg-hero2__copy { max-width: 620px; min-width: 0; }
.okg-hero2__copy > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22, .61, .36, 1);
}
.okg-hero2__slide.is-active .okg-hero2__copy > * { opacity: 1; transform: none; }
.okg-hero2__slide.is-active .okg-hero2__eyebrow { transition-delay: .16s; }
.okg-hero2__slide.is-active .okg-hero2__title { transition-delay: .22s; }
.okg-hero2__slide.is-active .okg-hero2__desc { transition-delay: .29s; }
.okg-hero2__slide.is-active .okg-hero2__actions { transition-delay: .36s; }

.okg-hero2__eyebrow {
  display: inline-block;
  margin: 0 0 18px;
  padding: 6px 15px;
  border: 1px solid rgba(120, 170, 255, .42);
  border-radius: 999px;
  background: rgba(58, 118, 220, .16);
  color: #a7c6ff;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.okg-hero2__title {
  margin: 0 0 14px;
  color: #fff;
  font-size: clamp(30px, 3.55vw, 54px);
  font-weight: 800;
  line-height: 1.07;
  letter-spacing: -.022em;
  text-wrap: balance;
}
.okg-hero2__accent {
  display: block;
  color: #4d8dff;
  text-shadow: 0 0 34px rgba(77, 141, 255, .38);
}
.okg-hero2__desc {
  max-width: 580px;
  margin: 0 0 26px;
  color: rgba(226, 236, 255, .78);
  font-size: clamp(14.5px, 1.05vw, 16.5px);
  line-height: 1.62;
}
.okg-hero2__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.okg-hero2__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 47px;
  padding: 0 27px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.okg-hero2__btn--primary {
  color: #fff;
  background: linear-gradient(180deg, #3f86ff 0%, #1c5cf0 100%);
  box-shadow: 0 10px 24px rgba(31, 101, 241, .42), inset 0 1px 0 rgba(255, 255, 255, .24);
}
.okg-hero2__btn--primary:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(31, 101, 241, .54), inset 0 1px 0 rgba(255, 255, 255, .28);
}
.okg-hero2__btn--ghost {
  color: #eaf2ff;
  border: 1px solid rgba(255, 255, 255, .30);
  background: rgba(255, 255, 255, .05);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.okg-hero2__btn--ghost:hover {
  color: #fff;
  background: rgba(255, 255, 255, .13);
  border-color: rgba(255, 255, 255, .52);
  transform: translateY(-2px);
}

/* ---- product art ---- */
.okg-hero2__art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding-block: 6px;
}
.okg-hero2__art::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 8%;
  width: 46%;
  height: 18px;
  transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(60, 132, 255, .22) 0%, rgba(60, 132, 255, 0) 74%);
  filter: blur(10px);
  pointer-events: none;
}
.okg-hero2__art img {
  position: relative;
  z-index: 1;
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: clamp(226px, 27vw, 460px);
  opacity: 0;
  transform: scale(.94) translateY(10px);
  filter: drop-shadow(0 26px 44px rgba(0, 0, 0, .52));
  transition: opacity .8s ease, transform .9s cubic-bezier(.22, .61, .36, 1);
}
.okg-hero2__slide.is-active .okg-hero2__art img { opacity: 1; transform: none; transition-delay: .16s; }

/* ---- arrows ---- */
.okg-hero2__arrow {
  position: absolute;
  top: 50%;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  padding: 0;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: 50%;
  background: rgba(255, 255, 255, .06);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.okg-hero2__arrow svg { width: 18px; height: 18px; }
.okg-hero2__arrow:hover { background: rgba(56, 130, 255, .9); border-color: transparent; }
.okg-hero2__arrow:focus-visible { outline: 2px solid #7fb2ff; outline-offset: 3px; }
.okg-hero2__arrow--prev { left: clamp(8px, 1.5vw, 22px); }
.okg-hero2__arrow--next { right: clamp(8px, 1.5vw, 22px); }

/* ---- progress bars ---- */
.okg-hero2__bars {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: clamp(16px, 1.9vw, 26px);
}
.okg-hero2__bar {
  display: flex;
  align-items: center;
  width: clamp(34px, 3.6vw, 58px);
  height: 16px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.okg-hero2__bar i {
  position: relative;
  display: block;
  width: 100%;
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, .24);
  transition: background .2s ease, height .2s ease;
}
.okg-hero2__bar:hover i { height: 4px; background: rgba(255, 255, 255, .38); }
.okg-hero2__bar i::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #4d8dff;
  transform: scaleX(0);
  transform-origin: left center;
}
.okg-hero2__bar.is-run i::after { animation: okg-hero2-fill var(--okg-hero-dur, 6500ms) linear forwards; }
.okg-hero2.is-paused .okg-hero2__bar i::after { animation-play-state: paused; }
@keyframes okg-hero2-fill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ---- stat strip ---- */
.okg-hero2__stats {
  position: relative;
  z-index: 2;
  border-top: 1px solid rgba(255, 255, 255, .10);
  background: rgba(4, 12, 24, .34);
}
.okg-hero2__stats-inner {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 4vw, 64px);
  width: min(1000px, 100%);
  margin: 0 auto;
  padding: 18px 32px;
  text-align: center;
}
.okg-hero2__stat strong {
  display: block;
  color: #6ba3ff;
  font-size: clamp(19px, 1.75vw, 25px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.01em;
}
.okg-hero2__stat span { font-size: 12.5px; color: rgba(226, 236, 255, .62); }

/* ---- responsive ---- */
@media (max-width: 1180px) {
  .okg-hero2__stage { padding-inline: 72px; }
}
@media (max-width: 1000px) {
  .okg-hero2__stage { padding-inline: 46px; }
  .okg-hero2__arrow { width: 36px; height: 36px; margin-top: -18px; }
  .okg-hero2__arrow svg { width: 15px; height: 15px; }
  .okg-hero2__arrow--prev { left: 6px; }
  .okg-hero2__arrow--next { right: 6px; }
  .okg-hero2__copy { max-width: 520px; }
}
@media (max-width: 900px) {
  .okg-hero2__stage { padding: 26px 26px 18px; }
  .okg-hero2__slide {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    min-height: 0;
  }
  .okg-hero2__art { order: -1; }
  .okg-hero2__art::after { display: none; }
  .okg-hero2__art img { max-height: min(31vh, 250px); }
  .okg-hero2__arrow { display: none; }
  .okg-hero2__copy { max-width: none; }
  .okg-hero2__title { font-size: clamp(27px, 6.4vw, 36px); }
  .okg-hero2__desc { margin-bottom: 20px; font-size: 14.5px; }
  .okg-hero2__bars { justify-content: center; margin-top: 14px; }
  .okg-hero2__bar { width: clamp(34px, 9vw, 62px); }
  .okg-hero2__stats-inner {
    gap: 10px;
    padding: 14px 20px;
  }
  .okg-hero2__stat { min-width: 0; }
  .okg-hero2__stat span { font-size: 11px; line-height: 1.35; display: block; }
}
@media (max-width: 560px) {
  .okg-hero2__stage { padding: 26px 18px 16px; }
  .okg-hero2__eyebrow { margin-bottom: 13px; padding: 5px 12px; font-size: 10.5px; letter-spacing: .1em; }
  .okg-hero2__title { font-size: clamp(25px, 7.6vw, 31px); margin-bottom: 10px; }
  .okg-hero2__desc { font-size: 14px; line-height: 1.55; margin-bottom: 18px; }
  .okg-hero2__art img { max-height: min(27vh, 200px); }
  .okg-hero2__btn { height: 43px; padding: 0 20px; font-size: 14px; }
  .okg-hero2__stats-inner { padding: 12px 14px; gap: 6px; }
  .okg-hero2__stat strong { font-size: 17px; }
  .okg-hero2__stat span { font-size: 10.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .okg-hero2__copy > *,
  .okg-hero2__art img,
  .okg-hero2__slide { transition-duration: .01ms !important; }
  .okg-hero2__bar.is-run i::after { animation: none; transform: scaleX(1); }
}

/* ==========================================================================
   CART PAGE V3  —  2026-10-23
   Supersedes CART-BLOCK-FIX-V2.

   The cart uses the WooCommerce Cart Block, so the line-item table is rendered
   by React from the Store API. Everything below is styling only; the data
   (model, specs, MOQ) comes from hooks in inc/cart.php.

   Layout rules follow the section order in the WooCommerce block, with every
   horizontal measure written as a logical property so Arabic (RTL) mirrors
   correctly without a separate stylesheet.
   ========================================================================== */

/* Brand tokens used only on the cart surface. */
.okg-cart-page {
  --okg-cart-dark: #0a1530;
  --okg-cart-line: #e6eaf2;
  --okg-cart-radius: 12px;
}

/* --------------------------------------------------------------- 1. banner
   The stock page hero is 56/48 padding, which pushes the products and the
   checkout button below the fold on a 900px-tall laptop. Compress it to a
   compact strip and drop the excerpt paragraph. */
.okg-cart-page .okg-page-hero {
  background: var(--okg-cart-dark);
  padding-block: 16px 15px;
}
.okg-cart-page .okg-page-hero h1 {
  font-size: clamp(24px, 2.4vw, 30px);
  line-height: 1.2;
  margin: 0;
}
.okg-cart-page .okg-page-hero p { display: none; }
.okg-cart-page .okg-breadcrumbs {
  padding-block: 9px;
  font-size: 12.5px;
  color: var(--muted);
}
.okg-cart-page .okg-content { padding-block: 26px 56px; }
.okg-cart-page .okg-entry {
  border: 0;
  padding: 0;
  background: transparent;
}

/* ------------------------------------------------------------ 2. line items
   De-tabled (2026-10-23): the mockup the client approved has no column
   headers, so the thead (PRODUCT / DETAILS / TOTAL) is removed outright and
   each row becomes a card — image left, facts centre, line total pinned to
   the top-right corner. The block still renders a real <table> for React and
   assistive tech; CSS only changes how it presents. WooCommerce targets rows
   via `table.wc-block-cart-items .wc-block-cart-items__row` (element + two
   classes), so layout properties here need !important to win regardless of
   stylesheet order. */
.okg-cart-page .wc-block-cart-items {
  display: block !important;
  width: 100% !important;
  border-collapse: separate;
  border-spacing: 0;
}
.okg-cart-page .wc-block-cart-items thead { display: none !important; }
.okg-cart-page .wc-block-cart-items tbody,
.okg-cart-page .wc-block-cart-items tr { display: block !important; width: 100% !important; }

/* tr.wc-block-cart-items__row: the extra element selector out-specifies the
   `tr { display: block }` reset above — at equal !important the (0,2,2) rule
   beats (0,2,1), and a plain two-class selector would lose to it silently. */
.okg-cart-page .wc-block-cart-items tr.wc-block-cart-items__row {
  display: grid !important;
  grid-template-columns: 148px minmax(0, 1fr) auto !important;
  grid-template-areas: "media info total";
  gap: 4px 28px;
  padding: 26px 28px;
  border: 1px solid var(--okg-cart-line);
  border-radius: var(--okg-cart-radius);
  background: #fff;
}
.okg-cart-page .wc-block-cart-items tr.wc-block-cart-items__row + tr.wc-block-cart-items__row { margin-block-start: 18px; }

.okg-cart-page .wc-block-cart-items__row > td {
  display: block !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  vertical-align: top;
}
.okg-cart-page .wc-block-cart-item__image { grid-area: media; width: auto !important; }
.okg-cart-page .wc-block-cart-item__product { grid-area: info; min-width: 0; }
.okg-cart-page .wc-block-cart-item__total {
  grid-area: total;
  align-self: start;
  width: auto !important;
  text-align: end;
  padding: 2px 0 0;
}

/* Type scale — the block ships 13px product names, which is what the client
   kept flagging as "too small". Three-class selectors plus !important beat
   the plugin sheet no matter when it loads. */
.okg-cart-page .wc-block-cart .wc-block-components-product-name {
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 1.55 !important;
  color: var(--ink);
  text-decoration: none;
}
.okg-cart-page .wc-block-cart .wc-block-cart-item__total {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--ink);
  white-space: nowrap;
}

/* ---------------------------------------------------------- 3. thumbnail
   The block hard-codes width/height attributes of 80 while the CSS used to
   render it at 63px, so the browser re-laid-out the row once the image
   decoded. Both box sizes are now fixed in CSS, which removes that shift and
   lifts the preview to a size where the hardware is recognisable. */
.okg-cart-page .wc-block-cart-item__image {
  width: 148px !important;
  padding-inline-end: 0;
}
.okg-cart-page .wc-block-cart-item__image a {
  display: block;
  inline-size: 120px;
  block-size: 120px;
  /* The border is drawn as an inset shadow: a real 1px border would shrink the
     box to 102px and leave the image 2px off the grid line. */
  border: 0;
  box-shadow: inset 0 0 0 1px var(--okg-cart-line);
  border-radius: var(--okg-cart-radius);
  background: #fff;
  overflow: hidden;
}
.okg-cart-page .wc-block-cart-item__image img {
  inline-size: 120px !important;
  block-size: 120px !important;
  object-fit: contain;
  display: block;
  border-radius: 0;
}

/* ------------------------------------------------- 4. name, model, specs
   The block prints the product description under the name. Shoppers in a B2B
   cart want the model number and two hard specs, not a paragraph, so the
   description is hidden and inc/cart.php supplies the facts. */
.okg-cart-page .wc-block-components-product-name:hover { color: var(--brand); }
.okg-cart-page .wc-block-components-product-details { display: flex; }
/* WooCommerce hides the whole metadata block under 600px, which takes the model
   and spec lines with it. Only the description should be hidden. */
.okg-cart-page .wc-block-components-product-metadata { display: block !important; }
.okg-cart-page .wc-block-components-product-metadata__description { display: none !important; }

.okg-cart-page .wc-block-components-product-details {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 8px;
  margin: 12px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-2);
}
/* Model line: own row, plain bold text. */
.okg-cart-page .wc-block-components-product-details > span:first-child {
  flex-basis: 100%;
  display: flex;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2);
}
/* Spec chips: every fact between the Model row and the availability row. */
.okg-cart-page .wc-block-components-product-details > span:not(:first-child):not(:last-child) {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--soft-2);
  font-weight: 500;
  color: var(--ink-2);
}
/* Availability: trailing meta row with a green stock dot. */
.okg-cart-page .wc-block-components-product-details > span:last-child {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-basis: 100%;
  color: var(--muted);
  font-size: 13.5px;
}
.okg-cart-page .wc-block-components-product-details > span:last-child::before {
  content: "";
  inline-size: 8px;
  block-size: 8px;
  border-radius: 50%;
  background: var(--ok);
  flex: 0 0 auto;
}
.okg-cart-page .wc-block-components-product-details > span:last-child .wc-block-components-product-details__name {
  display: none;
}
/* The block prints " / " between details; the flex gap already separates them. */
.okg-cart-page .wc-block-components-product-details span[aria-hidden="true"] { display: none; }
.okg-cart-page .wc-block-components-product-details__name {
  color: var(--ink-2);
  font-weight: 600;
}
.okg-cart-page .wc-block-components-product-details__value { color: var(--ink-2); }

.okg-cart-page .wc-block-cart-item__quantity { margin-block-start: 16px; }

.okg-cart-page .wc-block-cart-item__prices {
  font-size: 14px;
  color: var(--ink-2);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin-block-start: 2px;
}
/* Sale layout: struck regular price small and quiet, sale price bold. */
.okg-cart-page .wc-block-cart-item__prices del,
.okg-cart-page .wc-block-cart-item__prices .wc-block-components-product-price__regular {
  color: var(--muted);
  font-size: 14px;
  font-weight: 400;
}
.okg-cart-page .wc-block-cart-item__prices ins,
.okg-cart-page .wc-block-cart-item__prices .wc-block-components-product-price__value {
  text-decoration: none;
  font-weight: 700;
  font-size: 17px;
  color: var(--ink);
}

/* Sale badge under the line total: green text with a dot, matching the
   availability row. Only the badge itself — the wrapper's own class also
   contains the substring "sale-badge", so a [class*=] selector here paints
   the whole price green. */
.okg-cart-page .wc-block-components-sale-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ok);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.okg-cart-page .wc-block-components-sale-badge::before {
  content: "";
  inline-size: 7px;
  block-size: 7px;
  border-radius: 50%;
  background: var(--ok);
  flex: 0 0 auto;
}
.okg-cart-page .wc-block-cart-item__total-price-and-sale-badge-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
}

/* --------------------------------------------------------- 5. quantity
   27px tall in stock WooCommerce: below the 44px touch minimum and awkward to
   hit with a thumb. */
.okg-cart-page .wc-block-components-quantity-selector {
  block-size: 44px;
  inline-size: 132px;
  border: 1px solid var(--okg-cart-line);
  border-radius: 9px;
  background: #fff;
  overflow: hidden;
}
.okg-cart-page .wc-block-components-quantity-selector__button {
  min-inline-size: 44px;
  block-size: 44px;
  color: var(--ink-2);
  border-radius: 0;
}
.okg-cart-page .wc-block-components-quantity-selector__button:hover {
  background: var(--brand-soft);
  color: var(--brand-700);
}
.okg-cart-page .wc-block-components-quantity-selector__button:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -3px;
}
.okg-cart-page .wc-block-components-quantity-selector__input {
  block-size: 44px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
}
/* WooCommerce ships its own rule for this button —
   `table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity .wc-block-cart-item__remove-link`
   (0,4,2) — which forces `display:inline` (computes to block on a <button>,
   knocking the icon onto the text baseline) and `color:inherit` (killing the
   hover red). The second, longer selector below out-specifies it (0,5,2) so the
   flex layout, sizing and hover state actually apply. The short selector stays
   as a fallback in case WooCommerce changes the table markup. */
.okg-cart-page .wc-block-cart-item__remove-link,
.okg-cart-page table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity .wc-block-cart-item__remove-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  inline-size: auto; /* Woo pins the button at width:24px — the label would overflow it */
  min-block-size: 44px;
  padding: 0 12px;
  border-radius: 9px;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none !important; /* the plugin sheet keeps re-underlining it */
  transition: color .15s ease, background-color .15s ease;
}
/* The block ships an icon-only button, so the visible word is generated here.
   It comes from PHP through --okg-remove-label and follows the site language;
   the button's own aria-label already describes the full action for screen
   readers, and hover turns both the icon and the word red. */
.okg-cart-page .wc-block-cart-item__remove-link::after {
  content: var(--okg-remove-label, "Remove");
}
.okg-cart-page .wc-block-cart-item__remove-link svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}
.okg-cart-page .wc-block-cart-item__remove-link:hover,
.okg-cart-page table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity .wc-block-cart-item__remove-link:hover {
  color: var(--red);
  background: rgba(229, 53, 43, .08);
}

/* ------------------------------------------------------ 6. order summary */
.okg-cart-page .wc-block-components-totals-item {
  font-size: 14px;
  color: var(--ink-2);
  padding-block: 11px;
}
.okg-cart-page .wc-block-components-totals-item__value { font-weight: 600; color: var(--ink); }
.okg-cart-page .wc-block-components-totals-footer-item {
  border-block-start: 1px solid var(--okg-cart-line);
  margin-block-start: 6px;
  padding-block-start: 14px;
}
.okg-cart-page .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
  font-size: 15px;
  font-weight: 700;
}
.okg-cart-page .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-size: 21px;
  font-weight: 800;
  color: var(--ink);
}

/* Shipping / duties note injected under the shipping row. */
.okg-cart-note {
  margin: 2px 0 10px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--muted);
}
.okg-cart-note__tax { display: block; margin-block-start: 3px; }

/* ------------------------------------------------ 7. checkout button
   Stock colour is the WordPress admin grey (#32373c). Brand blue passes WCAG AA
   against white (5.1:1) and the focus ring uses the dark brand navy so it stays
   visible on both light and dark surroundings. */
.okg-cart-page .wc-block-cart__submit-button {
  background: var(--brand) !important;
  border: 1px solid var(--brand) !important;
  color: #fff !important;
  min-block-size: 52px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .01em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  box-shadow: 0 8px 20px rgba(22, 104, 227, .26);
  transition: background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.okg-cart-page .wc-block-cart__submit-button:hover {
  background: var(--brand-600) !important;
  border-color: var(--brand-600) !important;
  box-shadow: 0 10px 24px rgba(22, 104, 227, .34);
}
.okg-cart-page .wc-block-cart__submit-button:active { transform: translateY(1px); }
.okg-cart-page .wc-block-cart__submit-button:focus-visible {
  outline: 3px solid var(--okg-cart-dark);
  outline-offset: 3px;
}
/* Lock glyph drawn as a mask so it inherits the button's text colour. */
.okg-cart-page .wc-block-cart__submit-button::before {
  content: "";
  inline-size: 15px;
  block-size: 16px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='11' rx='2.5'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='11' rx='2.5'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / contain no-repeat;
  flex: 0 0 auto;
}
.okg-cart-page .wc-block-cart__submit-container { margin-block-start: 4px; }

/* ------------------------------------------------- 8. extras under button */
.okg-cart-extras { margin-block-start: 16px; }
.okg-cart-pay {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 14px;
}
.okg-cart-pay__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
  margin-inline-end: 2px;
}
.okg-cart-chip {
  display: inline-flex;
  align-items: center;
  block-size: 28px;
  padding-inline: 10px;
  border: 1px solid var(--okg-cart-line);
  border-radius: 7px;
  background: #fff;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
  white-space: nowrap;
}

.okg-cart-trust {
  list-style: none;
  margin: 0 0 16px;
  padding: 15px 17px;
  border: 1px solid var(--okg-cart-line);
  border-radius: var(--okg-cart-radius);
  background: var(--soft-2);
  display: grid;
  gap: 10px;
}
.okg-cart-trust li {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 2px 10px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--muted);
}
.okg-cart-trust li strong { color: var(--ink-2); font-weight: 600; }
.okg-cart-trust li > span:first-of-type:not(.okg-cart-lock):not(.okg-cart-tick) { grid-column: 2; }
.okg-cart-trust li > span:last-child { grid-column: 2; }
.okg-cart-trust__secure {
  font-size: 12.5px !important;
  font-weight: 600;
  color: var(--ink) !important;
  align-items: center;
}
.okg-cart-trust a { color: var(--brand-700); text-decoration: none; }
.okg-cart-trust a:hover { text-decoration: underline; }

.okg-cart-lock,
.okg-cart-tick {
  inline-size: 15px;
  block-size: 15px;
  margin-block-start: 2px;
  background-color: var(--brand);
  flex: 0 0 auto;
}
.okg-cart-lock {
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Crect x='4' y='10' width='16' height='11' rx='2.5'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Crect x='4' y='10' width='16' height='11' rx='2.5'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / contain no-repeat;
}
.okg-cart-tick {
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.okg-cart-b2b {
  padding: 14px 16px;
  border: 1px solid #cfe0ff;
  border-radius: var(--okg-cart-radius);
  background: var(--brand-soft);
}
.okg-cart-b2b__lead {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  font-size: 14px;
  color: var(--ink);
}
.okg-cart-b2b__cta {
  color: var(--brand-700);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.okg-cart-b2b__cta:hover { color: var(--brand); }
.okg-cart-b2b__note,
.okg-cart-b2b__login {
  margin: 5px 0 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink-2);
}
.okg-cart-b2b__login a { color: var(--brand-700); font-weight: 600; }

.okg-cart-continue { margin: 14px 0 0; font-size: 13px; }
.okg-cart-continue a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-2);
  text-decoration: none;
  border-block-end: 1px solid transparent;
  padding-block-end: 1px;
}
.okg-cart-continue a:hover { color: var(--brand); border-block-end-color: var(--brand); }

/* ------------------------------------------------------ 9. MOQ warning */
.okg-cart-moq {
  margin: 0 0 18px;
  padding: 13px 16px;
  border: 1px solid #f0c8c8;
  border-inline-start: 4px solid #b32d2e;
  border-radius: 0 var(--okg-cart-radius) var(--okg-cart-radius) 0;
  background: #fdf5f5;
  font-size: 13px;
  color: #7a1f20;
}
.okg-cart-moq strong { display: block; margin-block-end: 5px; font-size: 13.5px; }
.okg-cart-moq ul { margin: 0 0 6px; padding-inline-start: 18px; }
.okg-cart-moq li { margin-block-end: 3px; line-height: 1.6; }
.okg-cart-moq p { margin: 0; font-size: 12px; color: #8f3a3b; }

/* ------------------------------------------------------- 10. empty cart */
.okg-cart-empty {
  margin-block-start: 26px;
  padding: 20px 22px;
  border: 1px solid var(--okg-cart-line);
  border-radius: var(--okg-cart-radius);
  background: var(--soft-2);
  text-align: center;
}
.okg-cart-empty__lead { margin: 0 0 12px; font-size: 14px; line-height: 1.65; color: var(--ink-2); }
.okg-cart-empty__cats {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.okg-cart-empty__cats a {
  display: inline-flex;
  align-items: center;
  min-block-size: 40px;
  padding-inline: 15px;
  border: 1px solid var(--okg-cart-line);
  border-radius: 999px;
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  text-decoration: none;
}
.okg-cart-empty__cats a:hover { border-color: var(--brand); color: var(--brand-700); }
.okg-cart-empty__quote { margin: 0; font-size: 13px; color: var(--muted); }
.okg-cart-empty__quote a { color: var(--brand-700); font-weight: 600; }

/* ------------------------------------------------- 11. cross-sells strip */
.okg-cart-page .wp-block-woocommerce-cart-cross-sells-block {
  margin-block-start: 28px;
  padding-block-start: 22px;
  border-block-start: 1px solid var(--okg-cart-line);
}
.okg-cart-page .wp-block-woocommerce-cart-cross-sells-block > h2 {
  font-size: 18px !important;
  font-weight: 700;
  line-height: 1.35;
  margin: 0 0 18px;
  color: var(--ink);
  text-align: center;
}
/* The block prints one card per item in a plain flow; lay them out as a grid. */
.okg-cart-page .wp-block-woocommerce-cart-cross-sells-block > div {
  display: grid;
  /* auto-fit, not a fixed 3: two recommendations should fill the row instead of
     leaving a third of the width empty. */
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px;
}
/* WooCommerce's own cart.css ships
   `.wp-block-woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block
   .cross-sells-product { display:inline-block; width:30%; padding-right:5% }`
   — three classes, so a two-class rule loses. The extra `div` here lifts the
   specificity above it, and width stays !important because the 30% is what
   squeezes each card into an unreadable strip. */
.okg-cart-page .wp-block-woocommerce-cart-cross-sells-block div.cross-sells-product {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100% !important;
  margin: 0;
  padding: 14px 14px 16px;
  text-align: center;
  vertical-align: top;
  border: 1px solid var(--okg-cart-line);
  border-radius: var(--okg-cart-radius);
  background: #fff;
  gap: 9px;
  min-width: 0;
}
.okg-cart-page .wp-block-woocommerce-cart-cross-sells-block div.cross-sells-product img {
  box-sizing: border-box;
  width: 100%;
  height: auto;
  max-height: 160px;
  object-fit: contain;
  padding: 8px;
  border-radius: 8px;
  background: var(--soft-2);
}
.okg-cart-page .wp-block-woocommerce-cart-cross-sells-block div.cross-sells-product .wc-block-components-product-title {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.55;
  margin: 0;
}
.okg-cart-page .wp-block-woocommerce-cart-cross-sells-block div.cross-sells-product .wc-block-components-product-title a {
  color: var(--ink);
  text-decoration: none;
}
.okg-cart-page .wp-block-woocommerce-cart-cross-sells-block div.cross-sells-product .wc-block-components-product-price {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
}
.okg-cart-page .wp-block-woocommerce-cart-cross-sells-block div.cross-sells-product .wp-block-button__link,
.okg-cart-page .wp-block-woocommerce-cart-cross-sells-block div.cross-sells-product button {
  min-block-size: 42px;
  border-radius: 8px;
  background: var(--brand);
  border: 1px solid var(--brand);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  inline-size: 100%;
}
.okg-cart-page .wp-block-woocommerce-cart-cross-sells-block div.cross-sells-product .wp-block-button__link:hover,
.okg-cart-page .wp-block-woocommerce-cart-cross-sells-block div.cross-sells-product button:hover { background: var(--brand-600); }

/* ==========================================================================
   12. Tablet — narrower thumbnails; rows are cards at every width now
   ========================================================================== */
@media (max-width: 1024px) {
  .okg-cart-page .wc-block-cart-items__row {
    grid-template-columns: 120px minmax(0, 1fr) auto !important;
    gap: 4px 22px;
    padding: 20px 22px;
  }
  .okg-cart-page .wc-block-cart-item__image a,
  .okg-cart-page .wc-block-cart-item__image img {
    inline-size: 104px;
    block-size: 104px;
  }
}

/* ==========================================================================
   13. Mobile — cards, 44px targets, sticky checkout
   Breakpoint is 782px, not 767: WooCommerce itself switches the row to a grid
   at 782, so a 767 cut-off left 768px in a half-converted 4-column state.
   ========================================================================== */
@media (max-width: 782px) {
  .okg-cart-page .okg-content { padding-block: 18px 40px; }

  /* --- table becomes a card list ---
     WooCommerce styles the row through `table.wc-block-cart-items
     .wc-block-cart-items__row` (two classes + an element), so equal-specificity
     rules lose depending on load order. The layout properties are therefore
     declared !important here — nothing else in this block needs to fight. */
  .okg-cart-page .wc-block-cart-items,
  .okg-cart-page .wc-block-cart-items tbody { display: block !important; width: 100% !important; }
  .okg-cart-page .wc-block-cart-items thead { display: none !important; }

  .okg-cart-page .wc-block-cart-items tr.wc-block-cart-items__row {
    display: grid !important;
    /* Clear the desktop 3-track template-areas: with only two columns here the
       third named area would keep a phantom auto track alive. */
    grid-template-areas: none !important;
    grid-template-columns: 96px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    gap: 0 14px !important;
    padding: 16px;
    margin-block-end: 14px;
    border: 1px solid var(--okg-cart-line);
    border-radius: var(--okg-cart-radius);
    position: relative;
  }
  .okg-cart-page .wc-block-cart-items__row > td {
    border-block-end: 0;
    padding-block: 0;
  }

  .okg-cart-page .wc-block-cart-item__image {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    width: 96px !important;
    padding: 0 !important;
    align-self: start;
  }
  .okg-cart-page .wc-block-cart-item__image a,
  .okg-cart-page .wc-block-cart-item__image img {
    inline-size: 96px !important;
    block-size: 96px !important;
  }

  .okg-cart-page .wc-block-cart-item__product {
    grid-column: 2 !important;
    grid-row: 1 !important;
    padding: 0 !important;
    min-width: 0;
  }
  .okg-cart-page .wc-block-components-product-name {
    font-size: 15.5px !important;
    line-height: 1.55;
    display: block;
    padding-inline-end: 28px; /* room for the remove button */
  }
  .okg-cart-page .wc-block-components-product-details { gap: 6px; margin-top: 8px; }
  /* Chips wrap naturally; tighten them one notch and let the Model row and
     availability row keep full width from the desktop rules. */
  .okg-cart-page .wc-block-components-product-details > span:first-child { font-size: 12.5px; }
  .okg-cart-page .wc-block-components-product-details > span:not(:first-child):not(:last-child) {
    font-size: 11.5px;
    padding: 3px 10px;
  }
  .okg-cart-page .wc-block-components-product-details > span:last-child { font-size: 12px; }
  .okg-cart-page .wc-block-components-product-details__name { flex: 0 0 auto; }
  .okg-cart-page .wc-block-components-product-details__value { min-width: 0; }
  .okg-cart-page .wc-block-cart-item__quantity { margin-block-start: 8px; }
  .okg-cart-page .wc-block-components-quantity-selector { inline-size: 132px; }

  /* Total sits under the text, right-aligned, so the eye reads price last. */
  .okg-cart-page .wc-block-cart-item__total {
    grid-column: 2 !important;
    grid-row: 2 !important;
    width: auto !important;
    text-align: end;
    padding: 6px 0 0;
    font-size: 15.5px;
    justify-self: end;
    align-self: end;
  }

  /* Remove button: back in the flow next to the quantity selector. The old
     corner-absolutely-positioned icon-only variant hid behind the product
     name and read as "missing". The desktop rules above already supply the
     word + icon + hover-red treatment; only the tap target is set here. */
  .okg-cart-page .wc-block-cart-item__remove-link,
  .okg-cart-page table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity .wc-block-cart-item__remove-link {
    position: static;
    min-block-size: 44px;
    padding: 0 10px;
  }
  .okg-cart-page .wc-block-cart-item__quantity {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }

  /* Line total: keep it off the card edge — $3,250.00 sat flush against the
     border at 375px. */
  .okg-cart-page .wc-block-cart-item__total {
    padding-inline-end: 10px;
    padding-block-end: 2px;
  }

  /* --- sticky checkout, respecting the home indicator --- */
  .okg-cart-page .wc-block-cart__submit-container {
    position: sticky;
    inset-block-end: 0;
    z-index: 20;
    margin-inline: -16px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: #fff;
    border-block-start: 1px solid var(--okg-cart-line);
    box-shadow: 0 -8px 20px rgba(10, 21, 48, .07);
  }
  .okg-cart-page .wc-block-cart__submit-container .wc-block-cart__submit-button { inline-size: 100%; }
  .okg-cart-page .wc-block-cart { padding-block-end: 8px; }

  /* --- extras stay readable at 375px --- */
  .okg-cart-pay { gap: 5px; }
  .okg-cart-chip { block-size: 26px; font-size: 11.5px; padding-inline: 8px; }
  .okg-cart-trust { padding: 13px 14px; gap: 9px; }
  .okg-cart-trust li { font-size: 12.5px; }
  .okg-cart-b2b { padding: 13px 14px; }
  .okg-cart-b2b__lead { font-size: 13.5px; }

  .okg-cart-empty { padding: 18px 15px; }
  .okg-cart-empty__cats a { min-block-size: 44px; font-size: 12.5px; padding-inline: 13px; }
}

/* 375px: one more notch down on the thumbnail so the name column keeps width. */
@media (max-width: 400px) {
  .okg-cart-page .wc-block-cart-items__row { grid-template-columns: 84px minmax(0, 1fr); gap: 0 12px; }
  .okg-cart-page .wc-block-cart-item__image,
  .okg-cart-page .wc-block-cart-item__image a,
  .okg-cart-page .wc-block-cart-item__image img {
    inline-size: 84px !important;
    block-size: 84px !important;
  }
  .okg-cart-page .wc-block-components-quantity-selector { inline-size: 120px; }
}

/* ==========================================================================
   14. RTL — Arabic mirrors without a second stylesheet
   ========================================================================== */
[dir="rtl"] .okg-cart-page .wc-block-cart-item__total,
[dir="rtl"] .okg-cart-page .wc-block-cart-items__header-total { text-align: start; }
[dir="rtl"] .okg-cart-page .wc-block-cart__submit-button::before { transform: scaleX(1); }
[dir="rtl"] .okg-cart-continue a span[aria-hidden="true"] { display: inline-block; transform: scaleX(-1); }

/* Reduced motion: no transitions for people who ask for none. */
@media (prefers-reduced-motion: reduce) {
  .okg-cart-page .wc-block-cart__submit-button { transition: none; }
}

/* ==========================================================================
   15. VISUAL LAYER  —  added 2026-10-23
   Type effects, button sheen, card polish, scroll reveal, glass, marquee.

   Ground rules that keep this layer safe for an SEO-driven storefront:
   * Effects are pure CSS unless stated. No animation library is loaded, so
     nothing here moves LCP or adds a render-blocking request.
   * Text is never generated by JavaScript. Reveal/type effects wrap words in
     <span>s — the string stays one intact sentence for crawlers and screen
     readers, and everything is visible when JS does not run.
   * Only transform/opacity animate (compositor-only, no layout thrash, CLS 0).
   * Every motion is switched off under prefers-reduced-motion (see bottom).
   ========================================================================== */

:root {
  /* Red accent pulled from the new logo lock-up: used for emphasis only, never
     for body copy, so contrast ratios stay where they are. */
  --red: #e5352b;
  --red-600: #cc2b22;
  --grad-brand: linear-gradient(100deg, #1668e3 0%, #3b82f6 45%, #1668e3 100%);
  --grad-warm: linear-gradient(100deg, #1668e3 0%, #7c3aed 55%, #e5352b 100%);
  --grad-glass: linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.05));
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --ease-pop: cubic-bezier(.34, 1.56, .64, 1);
  --glass-bg: rgba(255, 255, 255, .72);
  --glass-line: rgba(255, 255, 255, .6);
}

/* ---------- 15.1 Gradient text ----------
   Fallback first: if background-clip:text is unsupported the element would be
   invisible, so the @supports guard restores a solid colour. */
.okg-t-grad {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--brand);
  -webkit-text-fill-color: transparent;
}
.okg-t-grad--warm { background-image: var(--grad-warm); }

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .okg-t-grad { background: none; color: var(--brand); -webkit-text-fill-color: currentColor; }
}

/* ---------- 15.2 Outlined / stroked type ----------
   Decoration only — never applied to headings that carry search intent, and
   every usage is inside an aria-hidden element so nothing is read twice. */
.okg-t-outline {
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, .55);
}
.okg-t-outline--ink { -webkit-text-stroke-color: rgba(16, 24, 40, .28); }

@supports not (-webkit-text-stroke: 1px #000) {
  .okg-t-outline { color: rgba(255, 255, 255, .35); }
  .okg-t-outline--ink { color: rgba(16, 24, 40, .22); }
}

/* Giant outlined watermark behind a section: sits behind content, cannot be
   selected, cannot be hovered, and is hidden from assistive tech. */
.okg-bgword {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  z-index: 0;
  translate: -50% -50%;
  font-size: clamp(90px, 17vw, 240px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: .04em;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  opacity: .16;
}
.okg-bgword--ink { opacity: .07; }

/* ---------- 15.3 Long-shadow 3D numerals ----------
   One per hero stat. -webkit-text-stroke keeps the glyph crisp on top of the
   stacked shadow so the number stays legible at any size. */
.okg-t-3d {
  color: #fff;
  -webkit-text-stroke: 1px rgba(10, 37, 64, .18);
  text-shadow:
    1px 1px 0 var(--brand-700),
    2px 2px 0 var(--brand-700),
    3px 3px 0 var(--brand-700),
    4px 4px 0 var(--brand-700),
    5px 5px 0 var(--brand-700),
    6px 6px 14px rgba(10, 37, 64, .35);
}
@supports not (-webkit-text-stroke: 1px #000) {
  .okg-t-3d { text-shadow: 0 6px 14px rgba(10, 37, 64, .35); }
}

/* ---------- 15.4 Soft glow — dark surfaces only ---------- */
.okg-t-glow { text-shadow: 0 0 18px rgba(59, 130, 246, .55), 0 0 44px rgba(59, 130, 246, .28); }
.okg-t-glow--red { text-shadow: 0 0 18px rgba(229, 53, 43, .5), 0 0 44px rgba(229, 53, 43, .25); }

/* ---------- 15.5 Per-word reveal (typewriter-ish) ----------
   main.js wraps each word in .okg-word; visibility is owned by CSS so a crawler
   or a no-JS visitor simply reads the sentence. */
.okg-type .okg-word { display: inline-block; will-change: transform, opacity; }
html.okg-motion .okg-type .okg-word {
  opacity: 0;
  transform: translateY(.45em);
  animation: okgWordIn .5s var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * 55ms);
}
@keyframes okgWordIn { to { opacity: 1; transform: none; } }

/* ---------- 15.6 Button sheen + lift ----------
   Sheen is a transform-only sweep inside an overflow-hidden box, so nothing
   reflows and the 44px tap target is untouched. */
.okg-btn,
.okg-hero2__btn,
.okg-card__actions .okg-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.okg-btn::after,
.okg-hero2__btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, .32) 50%, transparent 68%);
  transform: translate3d(-130%, 0, 0);
  transition: transform .65s var(--ease-out);
  pointer-events: none;
}
.okg-btn:hover::after,
.okg-hero2__btn:hover::after { transform: translate3d(130%, 0, 0); }
.okg-btn--primary,
.okg-hero2__btn--primary {
  background-image: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0));
  transition: transform .22s var(--ease-out), box-shadow .22s var(--ease-out), background-color .22s ease;
}
.okg-btn--primary:hover,
.okg-hero2__btn--primary:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(22, 104, 227, .34); }
.okg-btn--ghost:hover,
.okg-hero2__btn--ghost:hover { transform: translateY(-2px); }

/* Visible keyboard focus everywhere (a11y, also favours Google's UX signals). */
.okg-btn:focus-visible,
.okg-hero2__btn:focus-visible,
.okg-card a:focus-visible,
.okg-nav a:focus-visible,
.okg-socials a:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---------- 15.7 Card polish: lift, image zoom, gradient rim ---------- */
.okg-card {
  position: relative;
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s ease;
}
.okg-card__media { overflow: hidden; }
.okg-card__media img { transition: transform .5s var(--ease-out); }
.okg-card:hover { transform: translateY(-6px); box-shadow: 0 22px 44px rgba(16, 24, 40, .12); }
.okg-card:hover .okg-card__media img { transform: scale(1.045); }

/* Rim light: a 1px gradient frame drawn behind the card, revealed on hover. */
.okg-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--grad-brand);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.okg-card:hover::before { opacity: .85; }

/* Scene/spec chips already exist; give them the frosted treatment. */
.okg-chip {
  border: 1px solid rgba(22, 104, 227, .16);
  background: rgba(234, 241, 255, .7);
  backdrop-filter: blur(6px);
}

/* ---------- 15.8 Glass — only ever on top of artwork ----------
   backdrop-filter is expensive on low-end Android, so it stays optional and
   degrades to a solid translucent panel where unsupported. */
.okg-glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-line);
  box-shadow: 0 10px 30px rgba(16, 24, 40, .14);
}
/* Variant for the dark hero/bands, where a white panel would glare. */
.okg-glass--dark {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10);
}
@supports ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
  .okg-glass {
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
  }
}

/* ---------- 15.9 Section backdrop: gradient + faint grid ---------- */
.okg-bg-tech {
  position: relative;
  background-image:
    radial-gradient(90% 70% at 15% 0%, rgba(22, 104, 227, .10), transparent 60%),
    radial-gradient(70% 60% at 100% 100%, rgba(229, 53, 43, .07), transparent 62%);
}
.okg-bg-tech::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(22, 104, 227, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(22, 104, 227, .055) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent 78%);
  -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent 78%);
  pointer-events: none;
}
.okg-bg-tech > .okg-container { position: relative; z-index: 1; }

/* ---------- 15.10 Scroll reveal ----------
   html.okg-motion is set by main.js: without JS nothing is ever hidden, so the
   content is always indexable and never invisible to a crawler. */
html.okg-motion .okg-reveal {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
  transition-delay: var(--rd, 0ms);
}
html.okg-motion .okg-reveal.is-in { opacity: 1; transform: none; }

/* ---------- 15.11 Trust marquee ----------
   Duplicated track (second copy aria-hidden) for a seamless loop. Pure CSS
   transform animation: no resize, no scroll listeners, no main-thread work. */
.okg-marquee {
  position: relative;
  overflow: hidden;
  padding-block: 14px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.okg-marquee__row {
  display: flex;
  gap: 54px;
  width: max-content;
  align-items: center;
  animation: okgMarquee 34s linear infinite;
}
.okg-marquee__row[aria-hidden="true"] { position: absolute; inset-block-start: 14px; inset-inline-start: 0; }
.okg-marquee:hover .okg-marquee__row { animation-play-state: paused; }
.okg-marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-2);
  white-space: nowrap;
}
.okg-marquee__item .okg-ico { color: var(--ok); }
.okg-marquee--dark .okg-marquee__item { color: rgba(255, 255, 255, .82); }
a.okg-marquee__item {
  text-decoration: none;
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  transition: color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
a.okg-marquee__item:hover {
  color: var(--brand);
  border-color: rgba(22, 104, 227, .5);
  box-shadow: 0 6px 18px rgba(22, 104, 227, .18);
}
/* The looping clone is decoration: no pointer interaction, no tab stop. */
.okg-marquee__row[aria-hidden="true"] { pointer-events: none; }

/* Thin strip that hosts the category rail under the hero. */
.okg-rail {
  border-block: 1px solid var(--line-2);
  background: linear-gradient(180deg, #fff, var(--soft-2));
}

@keyframes okgMarquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }

/* ---------- 15.12 Section head accent bar ---------- */
.okg-section-head { position: relative; }
.okg-section-head .okg-eyebrow {
  display: inline-block;
  padding: 5px 13px;
  border: 1px solid rgba(22, 104, 227, .22);
  border-radius: 999px;
  background: rgba(234, 241, 255, .6);
  font-size: 11.5px;
  letter-spacing: .1em;
}

/* ---------- 15.13 Reduced motion: kill everything animated above ---------- */
@media (prefers-reduced-motion: reduce) {
  html.okg-motion .okg-reveal,
  html.okg-motion .okg-type .okg-word { opacity: 1 !important; transform: none !important; animation: none !important; }
  .okg-marquee__row { animation: none; }
  .okg-btn::after,
  .okg-hero2__btn::after { display: none; }
  .okg-card, .okg-card__media img, .okg-btn, .okg-hero2__btn { transition: none; }
  .okg-card:hover, .okg-btn--primary:hover, .okg-hero2__btn--primary:hover { transform: none; }
}

/* ------------------------------------------------------------------
   ASK-ABOUT-MODEL (2026-10-27)
   Product page: collapsed WPForms question block below the tabs.
   Native <details>, so it costs no JS. The submission is persisted by
   mu-plugins/06-oneking-forms.php, not by WPForms itself.
   ------------------------------------------------------------------ */
.okg-ask {
  /* 商品页外层是两列 grid（图 | 信息），这个钩子输出的是 grid 的直接子项，
     不声明跨列就只占左列 529px，表单挤成一团。1 / -1 让它横跨整行。 */
  grid-column: 1 / -1;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  margin: 32px 0 8px;
  padding: 0 22px;
}
.okg-ask > summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 0;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.okg-ask > summary::-webkit-details-marker { display: none; }
.okg-ask > summary::after {
  content: "+";
  font-size: 22px;
  line-height: 1;
  font-weight: 400;
  color: var(--muted);
}
.okg-ask[open] > summary::after { content: "\2013"; }
.okg-ask[open] > summary { border-bottom: 1px solid var(--line); }
.okg-ask__body { padding: 22px 0 24px; }
.okg-ask .wpforms-submit { width: 100%; }

/* ---------- single product: datasheet download (2026-10-30) ---------- */
.okg-datasheet-row { margin: 10px 0 0; }
.okg-datasheet {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--soft-2);
  color: var(--brand-dark);
  font-size: 13.5px;
  line-height: 1.35;
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease;
}
.okg-datasheet:hover { border-color: var(--brand); background: #fff; color: var(--brand-700); text-decoration: none; }
.okg-datasheet svg { flex: none; color: var(--brand); opacity: .85; }
.okg-datasheet__label { font-weight: 500; white-space: nowrap; }
.okg-datasheet__meta { color: var(--muted); font-size: 12.5px; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 480px) {
  .okg-datasheet { width: 100%; }
  .okg-datasheet__meta { white-space: normal; }
}

/* ---------- 卡片芯片：产品标签 ----------
   三代演进，记一下为什么最后长这样：
   1) "#12X" + 全圆角 + 品牌浅蓝 —— 像社交 hashtag，不像规格；
   2) 去掉 # 改中性灰 —— 白卡片上只有一道灰边，和旁边蓝色按钮、深蓝标题不在一个色系，
      显得脏；
   3) 现在：淡蓝底 + 深蓝字 + 6px 圆角、无边框。与品牌同色系但不与实心按钮抢，
      hover 才变成实底品牌蓝（它确实是链接）。 */
.okg-card__tags a.okg-chip { text-decoration: none; }
.okg-chip--tag {
  background: #eef3fe;
  border: 0;
  color: #14509f;
  border-radius: 6px;
  padding: 3px 10px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .012em;
  line-height: 1.55;
  backdrop-filter: none;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: background .16s ease, color .16s ease;
}
.okg-chip--tag::before { content: none; }
.okg-card__tags a.okg-chip--tag:hover {
  background: var(--brand);
  color: #fff;
}
.okg-card__tags a.okg-chip--tag:hover::before { content: none; }

/* "+N" 计数：只说明标签没显示完，不冒充标签本身，所以底更浅、字更小、不加前缀符号。
   它和标签一样是链接（进产品页看完整标签列表），但视觉重量低于标签。 */
.okg-chip--more {
  background: #f2f5fb;
  border: 0;
  color: #64748b;
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.55;
  backdrop-filter: none;
  text-decoration: none;
}
.okg-card__tags a.okg-chip--more:hover { background: var(--brand-soft); color: var(--brand-700); }
.okg-card__tags a.okg-chip--more::before { content: none; }

/* ---------- 商店筛选（2026-11-02） ----------
   左侧栏：分类导航 + 4 组复选筛选。默认全展开（无 JS 也能用），
   点标题可折叠；1024px 以下变成抽屉，由工具栏里的 Filters 按钮拉起。 */
.woocommerce .okg-wc-sidebar .okg-filters {
  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: 4px 18px 10px;
  position: sticky;
  top: calc(var(--header-h) + 16px);
}
.okg-filters__head { display: flex; align-items: center; gap: 10px; padding: 14px 0 12px; }
.okg-filters__title { font-size: 14px; font-weight: 500; color: var(--ink); letter-spacing: .01em; }
.okg-filters__clear { margin-left: auto; font-size: 12.5px; color: var(--brand); text-decoration: none; }
.okg-filters__clear:hover { color: var(--brand-600); text-decoration: underline; }
.okg-filters__close { display: none; margin-left: auto; border: 0; background: none; color: var(--muted); padding: 4px; cursor: pointer; }

.okg-filters__group { border-top: 1px solid var(--line-2); }
.okg-filters__toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 0; margin: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 13.5px; font-weight: 500; color: var(--ink); text-align: left;
}
.okg-filters__toggle:hover { color: var(--brand-600); }
.okg-filters__caret { color: var(--muted); transition: transform .18s ease; }
.okg-filters__group[data-collapsed="1"] .okg-filters__caret { transform: rotate(-90deg); }
.okg-filters__group[data-collapsed="1"] .okg-filters__list { display: none; }

/* 列表最多显示 6 项：每项 .okg-filters__opt 32px + li 的 6px 下边距 = 50px，
   6 项 = 5×50 + 44 = 294px。超出的不折叠、不加按钮，直接在框内滚动。
   （别照抄"6×32"——li 有 6px margin，第一版算成 196px 只露出 4 项。）
   scrollbar-gutter 让滚动条出现时不挤压文字，避免整栏左右跳一下。 */
.okg-filters__list {
  list-style: none;
  margin: 0 -8px 10px;
  padding: 0;
  max-height: 294px;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* 不要写 scrollbar-width: thin —— Chrome 121+ 会优先用它，结果渲染成系统
     overlay 滚动条（不滚就完全看不见），把下面的 ::-webkit-scrollbar 顶掉。
     只留 webkit 自绘，才能有一条常驻的细滚动条告诉客户"下面还有"。 */
  scrollbar-gutter: stable;
  /* 滚动提示：列表顶/底各一道 8px 阴影，滚到边自动消失（background local/scroll
     组合技巧）。只靠滚动条不够 —— Windows 的 overlay 滚动条静止时不显示，
     macOS 也是，客户根本不知道下面还有 10 个标签。 */
  background-color: #fff;
  background-image:
    linear-gradient(#fff 30%, rgba(255, 255, 255, 0)),
    linear-gradient(rgba(255, 255, 255, 0), #fff 70%),
    radial-gradient(farthest-side at 50% 0, rgba(16, 24, 40, .20), transparent),
    radial-gradient(farthest-side at 50% 100%, rgba(16, 24, 40, .20), transparent);
  background-position: center top, center bottom, center top, center bottom;
  background-size: 100% 16px, 100% 16px, 100% 10px, 100% 10px;
  background-repeat: no-repeat;
  background-attachment: local, local, scroll, scroll;
}
.okg-filters__list::-webkit-scrollbar { width: 6px; }
.okg-filters__list::-webkit-scrollbar-track { background: transparent; }
.okg-filters__list::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
.okg-filters__list::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
.okg-filters__opt {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 8px; border-radius: 8px;
  font-size: 13.5px; color: var(--ink-2); text-decoration: none; line-height: 1.35;
  transition: background .12s ease, color .12s ease;
}
.okg-filters__opt:hover { background: var(--soft-2); color: var(--ink); text-decoration: none; }
.okg-filters__box {
  flex: none; width: 16px; height: 16px; border: 1.5px solid #d0d5dd; border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center; color: #fff;
  transition: border-color .12s ease, background .12s ease;
}
.okg-filters__box svg { opacity: 0; transition: opacity .12s ease; }
.okg-filters__opt:hover .okg-filters__box { border-color: var(--brand); }
.okg-filters__opt.is-on { background: var(--brand-soft); color: var(--brand-700); font-weight: 500; }
.okg-filters__opt.is-on .okg-filters__box { background: var(--brand); border-color: var(--brand); }
.okg-filters__opt.is-on .okg-filters__box svg { opacity: 1; }
.okg-filters__label { flex: 1; min-width: 0; }
.okg-filters__count { flex: none; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.okg-filters__opt.is-on .okg-filters__count { color: var(--brand-600); }

.okg-fchips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 18px; }
.okg-fchips__label { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.okg-fchip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; border-radius: 999px;
  background: var(--brand-soft); color: var(--brand-700);
  font-size: 12.5px; font-weight: 500; text-decoration: none;
  transition: background .12s ease, color .12s ease;
}
.okg-fchip:hover { background: var(--brand); color: #fff; text-decoration: none; }
.okg-fchips__clear { font-size: 12.5px; color: var(--muted); text-decoration: underline; }
.okg-fchips__clear:hover { color: var(--red); }

.okg-filter-btn, .okg-filter-veil { display: none; }

@media (max-width: 1024px) {
  .okg-filter-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 14px; margin: 0 0 14px;
    border: 1px solid var(--line); border-radius: 999px; background: #fff;
    font: inherit; font-size: 13.5px; font-weight: 500; color: var(--ink); cursor: pointer;
  }
  .okg-filter-btn__n {
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
    background: var(--brand); color: #fff; font-size: 11.5px; line-height: 18px; text-align: center;
  }
  .woocommerce .okg-shop-layout .okg-wc-sidebar {
    position: fixed; inset: 0 auto 0 0; width: min(88vw, 340px); z-index: 121;
    background: #fff; padding: 12px 16px 24px; overflow-y: auto;
    transform: translateX(-102%); transition: transform .26s cubic-bezier(.22,.61,.36,1);
    box-shadow: 0 18px 48px rgba(16,24,40,.18);
  }
  body.okg-filters-open .okg-wc-sidebar { transform: none; }
  body.okg-filters-open { overflow: hidden; }
  .okg-filter-veil:not([hidden]) {
    display: block; position: fixed; inset: 0; z-index: 120; background: rgba(16,24,40,.45);
  }
  .okg-filters__close { display: inline-flex; }
  .woocommerce .okg-wc-sidebar .okg-filters { border: 0; border-radius: 0; padding: 0; position: static; }
  .okg-wc-sidebar .okg-wc-cats { display: none; }
}

/* 侧栏分类卡（与筛选卡同一套视觉，但用链接而非勾选：分类是导航不是筛选） */
.woocommerce .okg-wc-sidebar .okg-wc-cats {
  background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius);
  padding: 8px; margin-bottom: 16px;
}
.okg-wc-cats ul { list-style: none; margin: 0; padding: 0; }
.okg-wc-cats a {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 8px;
  font-size: 13.5px; color: var(--ink-2); text-decoration: none;
  transition: background .12s ease, color .12s ease;
}
.okg-wc-cats a:hover { background: var(--soft-2); color: var(--ink); text-decoration: none; }
.okg-wc-cats a.is-on { background: var(--brand-soft); color: var(--brand-700); font-weight: 500; }
.okg-wc-cats a span:last-child { margin-left: auto; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.okg-wc-cats a.is-on span:last-child { color: var(--brand-600); }

/* 移动端工具栏：Filters 按钮 + 排序不能挤出屏幕 */
@media (max-width: 640px) {
  .okg-shop-toolbar { gap: 10px 12px; }
  .okg-filter-btn { margin: 0; }
  .okg-shop-toolbar .woocommerce-ordering { margin-left: auto; flex: 0 1 46%; min-width: 0; }
  .okg-shop-toolbar .woocommerce-ordering select { width: 100%; max-width: 100%; }
  .okg-shop-toolbar .woocommerce-result-count { flex: 1 1 100%; order: 3; margin: 0; font-size: 12.5px; }
  .okg-fchips { margin: 0 0 14px; }
  .okg-fchips__label { display: none; }
}
.okg-fchips { margin-top: -4px; }

/* 商店页横向不溢出：grid 子项默认 min-width:auto，内容一宽就把整页撑开 */
.woocommerce .okg-shop-layout { max-width: 100%; }
.woocommerce .okg-shop-main { min-width: 0; }
.woocommerce ul.products { min-width: 0; }
.woocommerce .okg-card { min-width: 0; }
@media (max-width: 560px) {
  .woocommerce .okg-shop-layout { overflow-x: clip; }
  .okg-card__quick { flex-wrap: wrap; }
}

/* 移动端：页头/工具栏右侧图标被挤出屏幕的兜底（整站横向溢出的完整排查另开任务） */
@media (max-width: 640px) {
  html, body { overflow-x: hidden; }
  .okg-header, .okg-header .okg-container { max-width: 100vw; }
  .okg-header__inner { min-width: 0; }
  .okg-header__actions { flex: 0 0 auto; }
}

/* ---------- 购物车：不可购买商品（2026-11-03） ----------
   背景：WooCommerce 区块购物车对缺货商品只给一条顶部错误条，
   商品行本身不变灰、"Out of stock" 旁边还是绿色圆点（看起来像"有货"），
   结账按钮也不禁用。这套样式把这三处补上。 */
.wc-block-cart-items__row.okg-row-unavailable {
  background: #fffaf2;
}
.wc-block-cart-items__row.okg-row-unavailable .wc-block-cart-item__image,
.wc-block-cart-items__row.okg-row-unavailable .wc-block-components-product-name,
.wc-block-cart-items__row.okg-row-unavailable .wc-block-cart-item__prices {
  opacity: .45;
}
/* 缺货标签：绿点盖成琥珀色，文字加深 */
.wc-block-cart-items__row.okg-row-unavailable .okg-oos-tag,
.wc-block-cart-items__row.okg-row-unavailable .okg-oos-tag span {
  color: #b45309 !important;
  font-weight: 500;
}
.wc-block-cart-items__row.okg-row-unavailable .okg-oos-tag::before {
  background-color: #f59e0b !important;
}
/* 有些主题把圆点画在父级 ::before 上，一并覆盖 */
.wc-block-cart-items__row.okg-row-unavailable .wc-block-components-product-details::before {
  background-color: #f59e0b !important;
}

/* 结账按钮禁用态：变灰 + 不可点，鼠标提示"先处理购物车里的问题" */
.wc-block-cart__submit-button.okg-submit-blocked {
  opacity: .45 !important;
  filter: grayscale(1);
  pointer-events: none !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

/* 「因下架/删除被移出购物车」的提示条（HTML 由 JS 插入，位置在购物车卡片上方） */
.okg-cart-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0 0 16px;
  padding: 12px 16px;
  border: 1px solid #f5c26b;
  border-left: 3px solid #f59e0b;
  border-radius: 8px;
  background: #fffaf2;
  color: #7c4a03;
  font-size: 13.5px;
  line-height: 1.55;
}
.okg-cart-note svg { flex: none; margin-top: 2px; color: #d97706; }
.okg-cart-note a { color: #b45309; text-decoration: underline; }
.okg-cart-note a:hover { color: #92400e; }

/* 缺货错误条里的"联系销售"引导行 */
.okg-oos-help {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: #7c4a03;
}
.okg-oos-help a { color: #b45309; text-decoration: underline; font-weight: 500; }

/* 空购物车时的兜底说明（商品可能已下架/售罄） */
.okg-empty-hint {
  margin: 18px auto 0;
  max-width: 520px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
  text-align: center;
}
.okg-empty-hint a { color: var(--brand); text-decoration: underline; }

/* ==========================================================================
   评论（博客文章 / 页面）
   2026-11-05：主题此前**没有任何评论样式**，评论框是浏览器默认样式
   （方角细线框、默认灰按钮），和全站视觉完全脱节。本节按设计变量补齐。

   结构来自 WordPress 默认 comment_form()：
     #respond > h3.comment-reply-title + form.comment-form
       p.comment-notes / .okg-comment-note
       p.comment-form-comment  (label + textarea)
       p.comment-form-author   (label + input)
       p.comment-form-email    (label + input)
       p.comment-form-cookies-consent
       p.form-submit           (input[type=submit])
   Website 字段已由 mu-plugin 18 移除，所以这里不用管 .comment-form-url。
   ========================================================================== */

.comment-respond {
  position: relative;
  margin: 40px 0 0;
  padding: 28px 28px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-sm);
}

/* 顶部一条品牌色短线，作为视觉锚点（不占额外高度） */
.comment-respond::before {
  content: "";
  position: absolute;
  inset: -1px -1px auto;
  height: 3px;
  border-radius: var(--radius) var(--radius) 0 0;
  background: linear-gradient(90deg, var(--brand), #4d9bff 60%, var(--accent));
  opacity: .9;
}

.comment-reply-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  margin: 0 0 6px;
  font-size: 20px;
  line-height: 1.3;
}
.comment-reply-title small {
  font-size: 13px;
  font-weight: 500;
}
.comment-reply-title small a {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px dashed var(--line);
}
.comment-reply-title small a:hover { color: var(--brand); border-bottom-color: var(--brand); }

.okg-comment-note,
.comment-notes {
  margin: 0 0 20px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted);
}

/* ---------- 表单布局 ---------- */
.comment-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 18px;
  align-items: start;
}
.comment-form > p { margin: 0; }
.comment-form-comment,
.comment-notes,
.okg-comment-note,
.okg-comment-ts,
.comment-form-cookies-consent,
.form-submit { grid-column: 1 / -1; }

/* ---------- 标签 ---------- */
.comment-form label {
  display: block;
  margin: 0 0 7px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--ink-2);
}
.comment-form .required { color: var(--accent); font-weight: 700; }

/* ---------- 输入框 ---------- */
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  box-sizing: border-box;
  width: 100%;
  padding: 12px 14px;
  font: inherit;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
  -webkit-appearance: none;
  appearance: none;
}

.comment-form textarea {
  min-height: 150px;
  resize: vertical;
  display: block;
}

.comment-form input[type="text"]::placeholder,
.comment-form input[type="email"]::placeholder,
.comment-form textarea::placeholder { color: #98a2b3; }

.comment-form input[type="text"]:hover,
.comment-form input[type="email"]:hover,
.comment-form textarea:hover { border-color: #cfd6e0; }

.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(22, 104, 227, .16);
  background: #fff;
}

/* 浏览器原生校验未通过时（:invalid 且已交互）给出明确提示色 */
.comment-form input:not(:placeholder-shown):invalid,
.comment-form textarea:not(:placeholder-shown):invalid {
  border-color: #f04438;
  box-shadow: 0 0 0 3px rgba(240, 68, 56, .12);
}

/* ---------- 记住我 ---------- */
.comment-form-cookies-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 2px;
}
.comment-form-cookies-consent input[type="checkbox"] {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 3px 0 0;
  accent-color: var(--brand);
  cursor: pointer;
}
.comment-form-cookies-consent label {
  margin: 0;
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--muted);
  cursor: pointer;
}

/* ---------- 提交按钮 ---------- */
.form-submit { margin-top: 4px; }

.comment-form .submit,
.okg-comment-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 28px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .01em;
  color: #fff;
  background: var(--brand);
  border: 0;
  border-radius: 999px;
  box-shadow: 0 8px 20px rgba(22, 104, 227, .22);
  cursor: pointer;
  transition: background-color .16s ease, box-shadow .16s ease, transform .16s ease;
  -webkit-appearance: none;
  appearance: none;
}
.comment-form .submit:hover,
.okg-comment-submit:hover {
  background: var(--brand-600);
  box-shadow: 0 10px 24px rgba(22, 104, 227, .3);
  transform: translateY(-1px);
}
.comment-form .submit:active,
.okg-comment-submit:active { transform: translateY(0); box-shadow: 0 4px 12px rgba(22, 104, 227, .22); }
.comment-form .submit:focus-visible,
.okg-comment-submit:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}

/* ---------- Turnstile 占位 ---------- */
.okg-comment-ts:empty { display: none; }
.okg-comment-ts { margin-top: 2px; }
.okg-comment-ts .cf-turnstile { margin: 0 !important; }

/* ---------- 已发布评论列表（首条评论别显得没样式） ---------- */
.comment-list {
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
}
.comment-list .comment-body {
  position: relative;
  padding: 18px 20px;
  margin: 0 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--soft-2);
}
.comment-list .comment-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--muted);
}
.comment-list .comment-author img {
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
}
.comment-list .comment-author .fn {
  font-size: 14px;
  font-weight: 600;
  font-style: normal;
  color: var(--ink);
}
.comment-list .comment-metadata a {
  color: var(--muted);
  text-decoration: none;
  font-size: 12.5px;
}
.comment-list .comment-content { font-size: 15px; color: var(--ink-2); }
.comment-list .comment-content p:last-child { margin-bottom: 0; }
.comment-list .reply a {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  color: var(--brand);
}
.comment-list .children {
  margin: 0 0 0 28px;
  padding: 0;
  list-style: none;
}

.comments-title,
.comment-reply-title + .comment-list { margin-top: 8px; }

/* ---------- 区块结账的 Turnstile 容器 ---------- */
.okg-ts-checkout {
  margin: 0 0 16px;
  min-height: 0;
}
.okg-ts-checkout:empty { margin: 0; }

/* ---------- 移动端 ---------- */
@media (max-width: 640px) {
  .comment-respond { padding: 22px 18px 18px; margin-top: 32px; }
  .comment-form { grid-template-columns: 1fr; gap: 14px; }
  .comment-form .submit,
  .okg-comment-submit { width: 100%; }
  .comment-list .children { margin-left: 14px; }
}