/*
 * Jacked — storefront theme for WooCommerce.
 *
 * Every colour and both typefaces come from custom properties printed by the
 * Customizer (inc/customizer.php). The values below are only the fallback for
 * a page rendered before those are printed; change the look in
 * Appearance → Customize → Jacked, not here.
 */

:root {
  --jk-accent: #fcd304;
  --jk-on-accent: #0b0b0b;
  --jk-bg: #090909;
  --jk-surface: #111111;
  --jk-line: #303030;
  --jk-text: #f3f3f3;
  --jk-muted: #aeaeae;
  --jk-display: Impact, "Haettenschweiler", "Anton", "Arial Narrow", Arial, sans-serif;
  --jk-body: Arial, Helvetica, sans-serif;
  --jk-columns: 4;

  /* Derived — so one accent choice colours hovers, fills and focus rings
     consistently without six more pickers. */
  --jk-accent-soft: color-mix(in srgb, var(--jk-accent) 14%, transparent);
  --jk-accent-line: color-mix(in srgb, var(--jk-accent) 55%, var(--jk-line));
  --jk-accent-ink: color-mix(in srgb, var(--jk-accent) 70%, #fff);
  --jk-danger: #e5484d;

  --jk-width: 1220px;
  --jk-gutter: clamp(16px, 4vw, 32px);
  --jk-radius: 2px;
}

/* ── Base ──────────────────────────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--jk-bg);
  color: var(--jk-text);
  font-family: var(--jk-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--jk-accent-ink);
  text-decoration: none;
}

a:hover {
  color: var(--jk-text);
}

:focus-visible {
  outline: 2px solid var(--jk-accent);
  outline-offset: 3px;
}

::selection {
  background: var(--jk-accent);
  color: var(--jk-on-accent);
}

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

.jk-skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 200;
  padding: 10px 16px;
  background: var(--jk-accent);
  color: var(--jk-on-accent);
}

.jk-skip-link:focus {
  top: 12px;
}

.jk-container {
  width: 100%;
  max-width: var(--jk-width);
  margin: 0 auto;
  padding: 0 var(--jk-gutter);
}

.jk-narrow {
  max-width: 820px;
}

.jk-main {
  padding: clamp(28px, 5vw, 56px) 0 clamp(48px, 8vw, 96px);
}

/* ── Type ──────────────────────────────────────────────────────────────── */

h1,
h2,
h3,
h4,
.jk-brand,
.jk-page-title,
.jk-section-title,
.jk-hero-title,
.product_title,
.woocommerce-loop-product__title {
  font-family: var(--jk-display);
  font-weight: 400;
  line-height: 1.02;
  color: var(--jk-text);
  margin: 0 0 0.5em;
}

/* The condensed faces are drawn for capitals; the switch lives in the
   Customizer for anyone who picks a wider face. */
.jk-caps h1,
.jk-caps h2,
.jk-caps .jk-page-title,
.jk-caps .jk-section-title,
.jk-caps .jk-hero-title,
.jk-caps .product_title {
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

h1 {
  font-size: clamp(36px, 6vw, 72px);
}

h2 {
  font-size: clamp(26px, 3.4vw, 40px);
}

h3 {
  font-size: 22px;
}

.jk-meta {
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--jk-muted);
}

.jk-link {
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.jk-prose {
  max-width: 72ch;
  color: var(--jk-muted);
  font-size: 17px;
  line-height: 1.75;
}

.jk-prose h2,
.jk-prose h3 {
  margin-top: 1.6em;
}

.jk-prose strong {
  color: var(--jk-text);
}

.jk-prose a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.jk-prose img {
  border: 1px solid var(--jk-line);
}

/* ── Buttons ───────────────────────────────────────────────────────────── */

.jk-button,
.button,
button.button,
input[type="submit"],
.wp-element-button,
.wc-block-components-button:not(.is-link),
/* WooCommerce paints its own grey buttons on shop, product, cart and account
   pages (".woocommerce a.button"); these match its weight so the theme's
   button is the one shown there too. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce-page a.button,
.woocommerce-page button.button,
.woocommerce-page input.button,
.woocommerce #respond input#submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 26px;
  border: 1px solid var(--jk-accent);
  border-radius: var(--jk-radius);
  background: var(--jk-accent);
  color: var(--jk-on-accent);
  font-family: var(--jk-body);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.jk-button:hover,
.button:hover,
button.button:hover,
input[type="submit"]:hover,
.wp-element-button:hover,
.wc-block-components-button:not(.is-link):hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce-page a.button:hover,
.woocommerce-page button.button:hover,
.woocommerce-page input.button:hover {
  background: color-mix(in srgb, var(--jk-accent) 82%, #000);
  border-color: color-mix(in srgb, var(--jk-accent) 82%, #000);
  color: var(--jk-on-accent);
}

/* WooCommerce's purple "alt" buttons: only the colour is taken back, so the
   theme's gradients on those buttons (set elsewhere) still show. */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce-page a.button.alt,
.woocommerce-page button.button.alt {
  background-color: var(--jk-accent);
  color: var(--jk-on-accent);
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce-page a.button.alt:hover,
.woocommerce-page button.button.alt:hover {
  background-color: color-mix(in srgb, var(--jk-accent) 82%, #000);
  color: var(--jk-on-accent);
}

.button.alt,
.button:disabled,
.button.disabled {
  opacity: 1;
}

.button:disabled,
.button.disabled {
  background: var(--jk-surface);
  border-color: var(--jk-line);
  color: var(--jk-muted);
  cursor: not-allowed;
}

/* ── Forms ─────────────────────────────────────────────────────────────── */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="url"],
textarea,
select,
.input-text,
.select2-container .select2-selection {
  width: 100%;
  min-height: 46px;
  padding: 11px 14px;
  border: 1px solid var(--jk-line);
  border-radius: var(--jk-radius);
  background: var(--jk-surface);
  color: var(--jk-text);
  font: inherit;
  font-size: 15px;
}

input:focus,
textarea:focus,
select:focus,
.input-text:focus {
  outline: none;
  border-color: var(--jk-accent);
  box-shadow: 0 0 0 3px var(--jk-accent-soft);
}

label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--jk-muted);
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--jk-accent);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--jk-text);
  line-height: 24px;
}

.select2-dropdown {
  background: var(--jk-surface);
  border-color: var(--jk-line);
  color: var(--jk-text);
}

/* ── Announcement bar ──────────────────────────────────────────────────── */

.jk-announcement {
  border-bottom: 1px solid var(--jk-line);
  background: #000;
  color: var(--jk-muted);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
}

.jk-announcement .jk-container {
  padding-top: 9px;
  padding-bottom: 9px;
}

.jk-announcement.is-empty {
  display: none;
}

/* ── Header ────────────────────────────────────────────────────────────── */

.jk-header {
  position: relative;
  z-index: 50;
  border-bottom: 1px solid var(--jk-line);
  background: var(--jk-bg);
}

.jk-sticky-header .jk-header {
  position: sticky;
  top: 0;
}

.admin-bar.jk-sticky-header .jk-header {
  top: 32px;
}

.jk-header-row {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 84px;
}

.jk-brand {
  font-size: 26px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--jk-text);
  margin: 0;
}

.custom-logo {
  display: block;
  max-height: 46px;
  width: auto;
}

.jk-nav {
  margin: 0 auto;
}

.jk-menu,
.jk-drawer-menu,
.jk-footer-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.jk-menu {
  display: flex;
  gap: 34px;
}

.jk-menu > li {
  position: relative;
}

.jk-menu a {
  display: block;
  padding: 10px 0;
  color: var(--jk-muted);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.jk-menu a:hover,
.jk-menu .current-menu-item > a,
.jk-menu .current-menu-ancestor > a {
  color: var(--jk-text);
}

/* The current page gets a line under it — the one piece of chrome in the
   header that carries information. */
.jk-menu .current-menu-item > a {
  box-shadow: inset 0 -2px 0 var(--jk-accent);
}

.jk-menu .sub-menu {
  position: absolute;
  top: 100%;
  left: -16px;
  min-width: 220px;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  border: 1px solid var(--jk-line);
  background: var(--jk-surface);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
}

.jk-menu li:hover > .sub-menu,
.jk-menu li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.jk-menu .sub-menu a {
  padding: 9px 16px;
  font-size: 12px;
}

.jk-header-tools {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.jk-nav + .jk-header-tools {
  margin-left: 0;
}


.jk-cart-count {
  position: absolute;
  top: 4px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--jk-accent);
  color: var(--jk-on-accent);
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

.jk-cart-count.is-empty {
  display: none;
}

.jk-menu-toggle {
  display: none;
}


@media (max-width: 960px) {
  .jk-nav {
    display: none;
  }

  .jk-menu-toggle {
    display: inline-grid;
  }

  .jk-header-row {
    min-height: 68px;
  }
}

/* ── Hero ──────────────────────────────────────────────────────────────── */

.jk-hero {
  border-bottom: 1px solid var(--jk-line);
  padding: clamp(40px, 7vw, 96px) 0;
}

.jk-hero-grid {
  display: grid;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}

.jk-hero.has-image .jk-hero-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
}

.jk-hero-title {
  font-size: clamp(44px, 7.4vw, 104px);
  line-height: 0.92;
  margin-bottom: 22px;
}

.jk-hero-text {
  max-width: 46ch;
  margin: 0 0 30px;
  color: var(--jk-muted);
  font-size: clamp(16px, 1.6vw, 19px);
}

.jk-hero-art img {
  display: block;
  width: 100%;
  border: 1px solid var(--jk-line);
}

@media (max-width: 860px) {
  .jk-hero.has-image .jk-hero-grid {
    grid-template-columns: 1fr;
  }

  /* Image first on a phone: the picture is what tells you what the shop
     sells, faster than a headline in a condensed face. */
  .jk-hero-art {
    order: -1;
  }
}

/* ── Sections ──────────────────────────────────────────────────────────── */

.jk-section {
  padding: clamp(40px, 6vw, 72px) 0 0;
}

.jk-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--jk-line);
}

.jk-section-title {
  margin: 0;
}

.jk-page-head {
  margin-bottom: clamp(24px, 4vw, 40px);
}

.jk-page-title {
  font-size: clamp(38px, 6vw, 72px);
}

.jk-page-lead {
  max-width: 64ch;
  color: var(--jk-muted);
}

.jk-empty {
  padding: 40px 0;
  color: var(--jk-muted);
}

/* ── Post cards ────────────────────────────────────────────────────────── */

.jk-post-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

@media (max-width: 900px) {
  .jk-post-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .jk-post-grid {
    grid-template-columns: 1fr;
  }
}

.jk-post-card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--jk-line);
  background: var(--jk-surface);
  color: var(--jk-text);
  transition: border-color 0.15s;
}

.jk-post-card-link:hover {
  border-color: var(--jk-accent-line);
  color: var(--jk-text);
}

.jk-post-card-media {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: #000;
}

.jk-post-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.jk-post-card-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px 20px;
}

.jk-post-card-title {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
}

.jk-post-card-excerpt {
  color: var(--jk-muted);
  font-size: 14px;
  line-height: 1.55;
}

.jk-post-hero {
  margin: 0 0 32px;
}

.jk-post-hero img {
  display: block;
  width: 100%;
  border: 1px solid var(--jk-line);
}

.pagination,
.woocommerce-pagination {
  margin-top: 40px;
}

.nav-links,
.woocommerce-pagination ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
  border: 0 !important;
}

.page-numbers {
  display: grid;
  place-items: center;
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--jk-line) !important;
  color: var(--jk-muted);
  font-size: 14px;
}

.page-numbers.current {
  border-color: var(--jk-accent) !important;
  background: var(--jk-accent-soft);
  color: var(--jk-text);
}

.post-navigation .nav-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 48px;
}

.post-navigation a {
  display: block;
  padding: 16px 18px;
  border: 1px solid var(--jk-line);
  color: var(--jk-text);
}

.post-navigation .nav-next {
  text-align: right;
}

/* ── WooCommerce: breadcrumb, notices, toolbar ─────────────────────────── */

.jk-breadcrumb {
  margin: 0 0 22px;
  color: var(--jk-muted);
  font-size: 12.5px;
  letter-spacing: 0.08em;
}

.jk-breadcrumb a {
  color: var(--jk-muted);
}

.jk-breadcrumb a:hover {
  color: var(--jk-text);
}

.jk-crumb-sep {
  margin: 0 10px;
  opacity: 0.5;
}

.woocommerce-products-header__title {
  font-size: clamp(38px, 6vw, 72px);
}

.woocommerce-result-count {
  color: var(--jk-muted);
  font-size: 13px;
}

.woocommerce-ordering select {
  width: auto;
  min-width: 220px;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.wc-block-components-notice-banner {
  margin: 0 0 22px;
  padding: 14px 18px 14px 48px;
  border: 1px solid var(--jk-line);
  border-top: 0;
  border-left: 3px solid var(--jk-accent);
  background: var(--jk-surface);
  color: var(--jk-text);
  list-style: none;
}

.woocommerce-error {
  border-left-color: var(--jk-danger);
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
  color: var(--jk-accent);
}

.woocommerce-error::before {
  color: var(--jk-danger);
}

.woocommerce-message .button,
.woocommerce-info .button {
  float: right;
  min-height: 0;
  padding: 6px 14px;
}

/* ── WooCommerce: single product ───────────────────────────────────────── */

.single-product div.product {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}

.single-product div.product .woocommerce-product-gallery,
.single-product div.product .summary {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
}

.single-product div.product > .woocommerce-tabs,
.single-product div.product > .related,
.single-product div.product > .upsells {
  grid-column: 1 / -1;
}

@media (max-width: 860px) {
  .single-product div.product {
    grid-template-columns: 1fr;
  }
}

.woocommerce-product-gallery__wrapper {
  margin: 0;
}

.woocommerce-product-gallery__image img {
  border: 1px solid var(--jk-line);
  background: #000;
}

.woocommerce-product-gallery .flex-control-thumbs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0 0 !important;
  padding: 0;
}

.woocommerce-product-gallery .flex-control-thumbs li {
  width: auto !important;
  margin: 0 !important;
}

.woocommerce-product-gallery .flex-control-thumbs img {
  border: 1px solid var(--jk-line);
  opacity: 0.55;
  transition: opacity 0.15s, border-color 0.15s;
}

.woocommerce-product-gallery .flex-control-thumbs img.flex-active,
.woocommerce-product-gallery .flex-control-thumbs img:hover {
  border-color: var(--jk-accent);
  opacity: 1;
}

.woocommerce-product-gallery__trigger {
  background: var(--jk-bg) !important;
  border: 1px solid var(--jk-line);
  border-radius: var(--jk-radius) !important;
}

.product_title {
  font-size: clamp(40px, 5vw, 68px);
  margin-bottom: 14px;
}

.summary .price {
  margin: 0 0 20px;
  color: var(--jk-text) !important;
  font-family: var(--jk-display);
  font-size: clamp(34px, 4vw, 48px) !important;
  line-height: 1;
}

.summary .price del {
  color: var(--jk-muted);
  font-size: 0.6em;
}

.summary .price ins {
  text-decoration: none;
}

.woocommerce-product-details__short-description {
  margin-bottom: 24px;
  color: var(--jk-muted);
  font-size: 16.5px;
}

.summary .stock {
  color: var(--jk-accent-ink) !important;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.summary .stock.out-of-stock {
  color: var(--jk-danger) !important;
}

form.cart {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 24px !important;
  padding: 20px 0;
  border-top: 1px solid var(--jk-line);
  border-bottom: 1px solid var(--jk-line);
}

form.cart::before,
form.cart::after {
  display: none !important;
}

form.cart .quantity {
  float: none !important;
  margin: 0 !important;
}

.quantity .qty {
  width: 86px;
  min-height: 52px;
  text-align: center;
}

form.cart .single_add_to_cart_button {
  flex: 1;
  float: none !important;
  min-height: 52px;
  font-size: 13px;
}

form.cart table.variations {
  width: 100%;
  margin-bottom: 10px;
  border: 0;
}

form.cart table.variations th,
form.cart table.variations td {
  padding: 6px 0;
  border: 0;
  background: none;
}

.reset_variations {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.jk-product-notice {
  margin: 0 0 24px;
  padding: 12px 14px;
  border: 1px solid var(--jk-line);
  border-left: 3px solid var(--jk-accent);
  color: var(--jk-muted);
  font-size: 13px;
  line-height: 1.55;
}

.product_meta {
  display: grid;
  gap: 6px;
  color: var(--jk-muted);
  font-size: 13px;
}

.product_meta > span {
  display: block;
}

/* Tabs */
.woocommerce-tabs {
  margin-top: clamp(32px, 5vw, 56px);
}

.woocommerce-tabs ul.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 30px;
  margin: 0 0 24px !important;
  padding: 0 !important;
  border-bottom: 1px solid var(--jk-line);
  list-style: none;
  overflow: visible !important;
}

.woocommerce-tabs ul.tabs::before,
.woocommerce-tabs ul.tabs::after,
.woocommerce-tabs ul.tabs li::before,
.woocommerce-tabs ul.tabs li::after {
  display: none !important;
}

.woocommerce-tabs ul.tabs li {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
}

.woocommerce-tabs ul.tabs li a {
  display: block;
  padding: 14px 0 !important;
  color: var(--jk-muted) !important;
  font-size: 13px;
  font-weight: 700 !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.woocommerce-tabs ul.tabs li.active a {
  color: var(--jk-text) !important;
  box-shadow: inset 0 -2px 0 var(--jk-accent);
}

.woocommerce-tabs .panel {
  max-width: 78ch;
  color: var(--jk-muted);
  font-size: 16.5px;
  line-height: 1.75;
}

.woocommerce-tabs .panel > h2:first-child {
  display: none;
}

.woocommerce-tabs .panel table.shop_attributes {
  width: 100%;
  border: 1px solid var(--jk-line);
  border-collapse: collapse;
}

.woocommerce-tabs .panel table.shop_attributes th,
.woocommerce-tabs .panel table.shop_attributes td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--jk-line);
  background: none;
  text-align: left;
  font-style: normal;
}

.woocommerce-tabs .panel table.shop_attributes th {
  width: 36%;
  color: var(--jk-muted);
  font-weight: 400;
}

.woocommerce-tabs .panel table.shop_attributes td {
  color: var(--jk-text);
}

.related.products > h2,
.upsells.products > h2,
.cross-sells > h2 {
  margin: clamp(40px, 6vw, 64px) 0 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--jk-line);
}

/* Reviews */
#reviews .commentlist {
  list-style: none;
  margin: 0;
  padding: 0;
}

#reviews .comment_container {
  padding: 16px 0;
  border-bottom: 1px solid var(--jk-line);
}

#reviews img.avatar {
  display: none;
}

#reviews .comment-text {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* ── WooCommerce: cart, checkout, account (classic) ────────────────────── */

table.shop_table {
  width: 100%;
  border: 1px solid var(--jk-line) !important;
  border-collapse: collapse !important;
  border-radius: 0 !important;
  background: var(--jk-surface);
}

table.shop_table th,
table.shop_table td {
  padding: 14px 16px !important;
  border-top: 1px solid var(--jk-line) !important;
  color: var(--jk-text);
}

table.shop_table th {
  color: var(--jk-muted);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

table.shop_table img {
  width: 64px;
  border: 1px solid var(--jk-line);
}

table.shop_table .product-remove a.remove {
  color: var(--jk-muted) !important;
}

table.shop_table .product-remove a.remove:hover {
  background: var(--jk-danger);
  color: #fff !important;
}

.cart_totals h2,
#order_review_heading,
.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3 {
  font-size: 26px;
}

.wc-proceed-to-checkout .checkout-button {
  width: 100%;
  min-height: 54px;
  font-size: 13px;
}

.woocommerce-checkout .form-row {
  margin: 0 0 16px;
  padding: 0;
}

.woocommerce-checkout #payment {
  border: 1px solid var(--jk-line);
  border-radius: 0;
  background: var(--jk-surface);
}

.woocommerce-checkout #payment ul.payment_methods {
  border-bottom: 1px solid var(--jk-line);
}

.woocommerce-checkout #payment div.payment_box {
  background: var(--jk-bg);
  color: var(--jk-muted);
}

.woocommerce-checkout #payment div.payment_box::before {
  border-bottom-color: var(--jk-bg);
}

#place_order {
  width: 100%;
  min-height: 56px;
  font-size: 13px;
}

.woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--jk-line);
}

.woocommerce-MyAccount-navigation a {
  display: block;
  padding: 12px 0;
  border-bottom: 1px solid var(--jk-line);
  color: var(--jk-muted);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.woocommerce-MyAccount-navigation .is-active a {
  color: var(--jk-text);
  box-shadow: inset 3px 0 0 var(--jk-accent);
  padding-left: 14px;
}

/* ── WooCommerce: block cart and checkout ──────────────────────────────── */

/*
 * New WooCommerce installs use the block-based cart and checkout. Those
 * blocks inherit text colour but hard-code light surfaces in places, which on
 * a dark theme leaves dark text on a dark page or white boxes in the middle of
 * it. The rules below bring their surfaces, borders and inputs onto the same
 * tokens as everything else.
 */
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout,
.wc-block-components-sidebar-layout {
  color: var(--jk-text);
}

.wc-block-components-sidebar,
.wc-block-components-totals-wrapper,
.wc-block-components-order-summary,
.wc-block-checkout__actions,
.wc-block-components-panel {
  border-color: var(--jk-line) !important;
}

.wc-block-components-text-input input,
.wc-block-components-combobox .wc-block-components-combobox-control input,
.wc-block-components-form .wc-block-components-text-input input,
.wc-blocks-components-select .wc-blocks-components-select__select {
  background: var(--jk-surface) !important;
  border-color: var(--jk-line) !important;
  color: var(--jk-text) !important;
  border-radius: var(--jk-radius) !important;
}

.wc-block-components-text-input label,
.wc-blocks-components-select .wc-blocks-components-select__label {
  color: var(--jk-muted) !important;
}

.wc-block-components-text-input.is-active input,
.wc-block-components-text-input input:focus {
  border-color: var(--jk-accent) !important;
  box-shadow: 0 0 0 1px var(--jk-accent) !important;
}

.wc-block-components-radio-control__option,
.wc-block-checkout__shipping-option .wc-block-components-radio-control__option {
  border-color: var(--jk-line) !important;
}

.wc-block-components-radio-control__input:checked {
  border-color: var(--jk-accent) !important;
}

.wc-block-components-radio-control__input:checked::before {
  background: var(--jk-accent) !important;
  color: var(--jk-on-accent);
}

.wc-block-components-product-name,
.wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item {
  color: var(--jk-text) !important;
}

.wc-block-components-formatted-money-amount,
.wc-block-components-product-price {
  color: var(--jk-text);
}

.wc-block-cart-item__image img,
.wc-block-components-order-summary-item__image img {
  border: 1px solid var(--jk-line);
}

.wc-block-components-quantity-selector {
  border-color: var(--jk-line) !important;
  border-radius: var(--jk-radius) !important;
}

.wc-block-components-quantity-selector input,
.wc-block-components-quantity-selector button {
  color: var(--jk-text) !important;
  background: transparent !important;
}

.wc-block-components-title,
.wc-block-cart__totals-title {
  font-family: var(--jk-display) !important;
  font-weight: 400 !important;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--jk-text) !important;
}

/* ── Footer ────────────────────────────────────────────────────────────── */

.jk-footer {
  margin-top: 0;
  border-top: 1px solid var(--jk-line);
  background: #000;
  color: var(--jk-muted);
  font-size: 14px;
}

.jk-footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: 32px;
  padding-top: clamp(40px, 6vw, 64px);
  padding-bottom: 40px;
}

@media (max-width: 860px) {
  .jk-footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .jk-footer-brand {
    grid-column: 1 / -1;
  }
}

.jk-footer-text {
  max-width: 38ch;
  margin: 14px 0 0;
  line-height: 1.6;
}

.jk-footer .widget-title {
  margin: 0 0 14px;
  font-family: var(--jk-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--jk-text);
}

.jk-footer .widget ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.jk-footer .widget li {
  margin: 0 0 9px;
}

.jk-footer a {
  color: var(--jk-muted);
}

.jk-footer a:hover {
  color: var(--jk-text);
}

.jk-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  justify-content: space-between;
  padding-top: 20px;
  padding-bottom: 28px;
  border-top: 1px solid var(--jk-line);
  font-size: 12.5px;
}

.jk-footer-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
}

/* ── Reduced motion ────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ── Search: the form and the live results ─────────────────────────────── */


/*
 * The product search form is WooCommerce's, with a bare <button>. The rules
 * for .button do not reach it, which is why it rendered as the browser's grey
 * default next to a styled field.
 */
.jk-search-panel .woocommerce-product-search,
.jk-search-panel .search-form {
  display: flex;
  gap: 0;
}

.jk-search-panel input[type="search"] {
  min-height: 58px;
  padding: 0 18px;
  border-right: 0;
  font-size: 18px;
}

.jk-search-panel input[type="search"]::placeholder {
  color: var(--jk-muted);
  opacity: 0.7;
}

.woocommerce-product-search button,
.search-form .search-submit {
  flex: none;
  min-height: 46px;
  padding: 0 26px;
  border: 1px solid var(--jk-accent);
  border-radius: var(--jk-radius);
  background: var(--jk-accent);
  color: var(--jk-on-accent);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
}

.jk-search-panel .woocommerce-product-search button,
.jk-search-panel .search-form .search-submit {
  min-height: 58px;
}

.woocommerce-product-search button:hover,
.search-form .search-submit:hover {
  background: color-mix(in srgb, var(--jk-accent) 82%, #000);
  color: var(--jk-on-accent);
}


/* Products on the left, articles on the right; one column on a phone. */
.jk-search-cols {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
}

.jk-search-group:only-child {
  grid-column: 1 / -1;
}

.jk-search-group + .jk-search-group {
  border-left: 1px solid var(--jk-line);
}

@media (max-width: 760px) {
  .jk-search-cols {
    grid-template-columns: 1fr;
  }

  .jk-search-group + .jk-search-group {
    border-left: 0;
    border-top: 1px solid var(--jk-line);
  }
}

.jk-search-group-title {
  margin: 0;
  padding: 14px 18px 6px;
  color: var(--jk-muted);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.jk-search-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 18px;
  color: var(--jk-text);
}

.jk-search-item:hover,
.jk-search-item:focus {
  background: var(--jk-accent-soft);
  color: var(--jk-text);
  outline: none;
}

.jk-search-thumb {
  flex: none;
  width: 52px;
  height: 52px;
  border: 1px solid var(--jk-line);
  background: #000;
}

.jk-search-item--post .jk-search-thumb {
  width: 64px;
  height: 44px;
}

.jk-search-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.jk-search-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.jk-search-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
  font-size: 15px;
}

.jk-search-meta {
  color: var(--jk-accent-ink);
  font-size: 13px;
}

.jk-search-item--post .jk-search-meta {
  color: var(--jk-muted);
}

.jk-search-all,
.jk-search-empty {
  display: block;
  margin: 0;
  padding: 14px 18px;
  border-top: 1px solid var(--jk-line);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.jk-search-empty {
  border-top: 0;
  color: var(--jk-muted);
}

/* ── Side cart ─────────────────────────────────────────────────────────── */


.jk-cart-drawer .jk-drawer-head {
  margin: 0;
  padding: 16px 20px;
  border-bottom: 1px solid var(--jk-line);
}

.jk-cart-title {
  font-family: var(--jk-display);
  font-weight: 400;
  font-size: 24px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* The contents scroll; the total and the buttons stay at the bottom of the
   panel where a thumb can reach them. */
.jk-cart-drawer .widget_shopping_cart_content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.jk-cart-drawer .woocommerce-mini-cart {
  flex: 1;
  overflow-y: auto;
  margin: 0;
  padding: 6px 20px;
  list-style: none;
}

.jk-cart-drawer .woocommerce-mini-cart-item {
  position: relative;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 4px 14px;
  padding: 14px 28px 14px 0;
  border-bottom: 1px solid var(--jk-line);
  font-size: 14px;
}

.jk-cart-drawer .woocommerce-mini-cart-item a:not(.remove) {
  display: contents;
  color: var(--jk-text);
  font-weight: 700;
}

.jk-cart-drawer .woocommerce-mini-cart-item img {
  grid-row: span 2;
  width: 64px !important;
  height: 64px;
  object-fit: cover;
  margin: 0 !important;
  border: 1px solid var(--jk-line);
  background: #000;
}

.jk-cart-drawer .woocommerce-mini-cart-item .quantity {
  grid-column: 2;
  color: var(--jk-muted);
  font-size: 13px;
}

.jk-cart-drawer .woocommerce-mini-cart-item .quantity .amount {
  color: var(--jk-accent-ink);
}

.jk-cart-drawer a.remove {
  position: absolute;
  top: 12px;
  right: 0;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  color: var(--jk-muted) !important;
  font-size: 18px;
  line-height: 1;
}

.jk-cart-drawer a.remove:hover {
  background: var(--jk-danger);
  color: #fff !important;
}

.jk-cart-drawer .woocommerce-mini-cart__total {
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 16px 20px;
  border-top: 1px solid var(--jk-line);
  font-size: 15px;
}

.jk-cart-drawer .woocommerce-mini-cart__total .amount {
  font-family: var(--jk-display);
  font-size: 24px;
  font-weight: 400;
}

.jk-cart-drawer .woocommerce-mini-cart__buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0;
  padding: 0 20px 20px;
}

.jk-cart-drawer .woocommerce-mini-cart__buttons .button {
  width: 100%;
  margin: 0;
}

/* View cart is the secondary action; checkout is the one that matters. */
.jk-cart-drawer .woocommerce-mini-cart__buttons .button:not(.checkout) {
  background: transparent;
  color: var(--jk-text);
  border-color: var(--jk-line);
}

.jk-cart-drawer .woocommerce-mini-cart__empty-message {
  margin: 0;
  padding: 40px 20px;
  color: var(--jk-muted);
  text-align: center;
}

/* The "adding…" state on any add-to-cart button. */
.button.loading,
.single_add_to_cart_button.loading {
  opacity: 0.6;
  pointer-events: none;
}

/* ── Classic cart table on small screens ───────────────────────────────── */

@media (max-width: 768px) {
  table.shop_table_responsive tr td::before {
    color: var(--jk-muted);
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 11px;
  }

  table.shop_table_responsive tr:nth-child(2n) td {
    background: transparent;
  }
}

/* ── Add-to-cart feedback ──────────────────────────────────────────────── */

/* The side cart opens on every add, so WooCommerce's own "View cart" link
   that it slips in after the button is a second way to the same place. */
ul.products li.product .added_to_cart {
  display: none !important;
}

.button.jk-added,
.single_add_to_cart_button.jk-added {
  background: color-mix(in srgb, var(--jk-accent) 22%, transparent) !important;
  border-color: var(--jk-accent) !important;
  color: var(--jk-text) !important;
}

/* WooCommerce draws its own spinner after .loading buttons in the grid; the
   label change says the same thing, so the spinner is dropped. */
.button.loading::after,
.button.added::after {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   Motion

   Timings are the storefront's own: panels slide in .3s on a quick-out,
   soft-in curve, the shade behind them fades in .25s, small things like
   dropdowns take .18s. Everything here is switched off for readers who have
   asked their system for reduced motion (see the end of the file).
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --jk-ease: cubic-bezier(0.22, 0.7, 0.2, 1);
  --jk-slide: 0.3s;
  --jk-fade: 0.25s;
  --jk-quick: 0.18s;
}

body.jk-locked {
  overflow: hidden;
}

/* ── Header ────────────────────────────────────────────────────────────── */

.jk-header {
  transition: box-shadow var(--jk-fade) ease, background var(--jk-fade) ease;
}

/* Once the page has moved, the sticky header lifts off it slightly. */
.jk-header.is-scrolled {
  box-shadow: 0 14px 30px -18px rgb(0 0 0 / 0.9);
}

.jk-icon-button,
.jk-user-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 44px;
  height: 44px;
  padding: 0 6px;
  border: 1px solid transparent;
  border-radius: var(--jk-radius);
  background: none;
  color: var(--jk-text);
  font: inherit;
  cursor: pointer;
  transition: color var(--jk-quick) ease, border-color var(--jk-quick) ease, background var(--jk-quick) ease;
}

.jk-icon-button:hover,
.jk-user-trigger:hover,
.jk-icon-button.is-active,
.jk-user-trigger.is-active {
  color: var(--jk-accent-ink);
}

.jk-icon {
  display: block;
  flex: none;
  transition: transform var(--jk-quick) var(--jk-ease);
}

.jk-icon-button:hover .jk-icon {
  transform: translateY(-1px);
}

/* The cart icon hops when something lands in it. */
@keyframes jk-bump {
  0% { transform: scale(1); }
  30% { transform: scale(1.22) rotate(-6deg); }
  55% { transform: scale(0.94) rotate(3deg); }
  100% { transform: scale(1); }
}

.jk-cart-link.is-bumped .jk-icon {
  animation: jk-bump 0.55s var(--jk-ease);
}

.jk-cart-count {
  transition: transform var(--jk-quick) var(--jk-ease);
}

.jk-cart-link.is-bumped .jk-cart-count {
  animation: jk-bump 0.55s var(--jk-ease) 0.05s;
}

/* ── Account menu ──────────────────────────────────────────────────────── */

.jk-user {
  position: relative;
}

.jk-user-name {
  max-width: 11ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.jk-user-trigger .jk-icon--chevron {
  width: 14px;
  height: 14px;
  opacity: 0.6;
  transition: transform var(--jk-quick) var(--jk-ease);
}

.jk-user-trigger.is-active .jk-icon--chevron {
  transform: rotate(180deg);
}

.jk-user-trigger.is-active {
  border-color: var(--jk-line);
}

.jk-user-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 70;
  min-width: 240px;
  padding: 4px 0;
  border: 1px solid var(--jk-line);
  background: var(--jk-surface);
  box-shadow: 0 24px 48px -18px rgb(0 0 0 / 0.9);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transform-origin: top right;
  transition:
    opacity var(--jk-quick) ease,
    transform var(--jk-quick) var(--jk-ease),
    visibility 0s linear var(--jk-quick);
}

.jk-user-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity var(--jk-quick) ease,
    transform var(--jk-quick) var(--jk-ease),
    visibility 0s;
}

.jk-user-head {
  display: grid;
  gap: 2px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--jk-line);
}

.jk-user-head strong {
  color: var(--jk-text);
  font-size: 14px;
}

.jk-user-head span {
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--jk-muted);
  font-size: 12px;
}

.jk-user-link {
  display: block;
  padding: 11px 16px;
  color: var(--jk-muted);
  font-size: 13px;
  transition: background var(--jk-quick) ease, color var(--jk-quick) ease, padding-left var(--jk-quick) var(--jk-ease);
}

.jk-user-link:hover {
  padding-left: 20px;
  background: var(--jk-accent-soft);
  color: var(--jk-text);
}

.jk-user-link.is-admin {
  color: var(--jk-accent-ink);
}

.jk-user-link.is-out {
  border-top: 1px solid var(--jk-line);
  color: var(--jk-danger);
}

@media (max-width: 1100px) {
  .jk-user-name,
  .jk-user-trigger .jk-icon--chevron {
    display: none;
  }
}

/* The phone menu button is an icon button too, and the rule above gives
   every icon button display: inline-flex. Said again here, after it, or the
   hamburger would show on desktops as well. */
.jk-menu-toggle {
  display: none;
}

@media (max-width: 960px) {
  .jk-menu-toggle {
    display: inline-flex;
  }
}

/* ── Shade behind open panels ──────────────────────────────────────────── */

.jk-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgb(7 7 7 / 0.72);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--jk-fade) ease;
}

.jk-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* Side panels sit above the header, so their shade has to as well. */
body.jk-locked .jk-overlay {
  z-index: 85;
}

/* ── Search panel ──────────────────────────────────────────────────────── */

/*
 * Drops down from under the header over the page, rather than pushing the
 * page down: nothing jumps, and closing it puts everything back where it was.
 */
.jk-search-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 55;
  padding: 22px 0 26px;
  border-top: 1px solid var(--jk-line);
  border-bottom: 1px solid var(--jk-line);
  background: var(--jk-surface);
  box-shadow: 0 30px 50px -30px rgb(0 0 0 / 0.95);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition:
    opacity var(--jk-fade) ease,
    transform var(--jk-slide) var(--jk-ease),
    visibility 0s linear var(--jk-slide);
}

.jk-search-panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity var(--jk-fade) ease,
    transform var(--jk-slide) var(--jk-ease),
    visibility 0s;
}

.jk-search-panel .jk-container {
  position: relative;
}

.jk-search-panel label {
  margin: 0;
}

/* A thin line runs along the bottom of the field while a query is out. */
.jk-search-panel .jk-container::after {
  content: "";
  position: absolute;
  left: var(--jk-gutter);
  right: var(--jk-gutter);
  top: 56px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--jk-accent), transparent);
  background-size: 40% 100%;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity var(--jk-quick) ease;
  pointer-events: none;
}

.jk-search-panel.is-loading .jk-container::after {
  opacity: 1;
  animation: jk-scan 0.9s linear infinite;
}

@keyframes jk-scan {
  from { background-position: -40% 0; }
  to { background-position: 140% 0; }
}

.jk-search-results {
  margin-top: 0;
  max-height: 0;
  overflow: hidden;
  border: 1px solid transparent;
  background: var(--jk-bg);
  opacity: 0;
  transition:
    max-height var(--jk-slide) var(--jk-ease),
    opacity var(--jk-quick) ease,
    margin-top var(--jk-quick) ease,
    border-color var(--jk-quick) ease;
}

.jk-search-results.is-open {
  max-height: 70vh;
  overflow-y: auto;
  margin-top: 12px;
  border-color: var(--jk-line);
  opacity: 1;
}

@keyframes jk-rise {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.jk-search-item {
  animation: jk-rise 0.28s var(--jk-ease) both;
  transition: background var(--jk-quick) ease, padding-left var(--jk-quick) var(--jk-ease);
}

.jk-search-item:hover,
.jk-search-item:focus {
  padding-left: 22px;
}

/* ── Phone drawer and side cart ────────────────────────────────────────── */

.jk-drawer,
.jk-cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--jk-line);
  background: var(--jk-bg);
  box-shadow: -30px 0 60px -30px rgb(0 0 0 / 0.9);
  transform: translateX(100%);
  visibility: hidden;
  transition:
    transform var(--jk-slide) var(--jk-ease),
    visibility 0s linear var(--jk-slide);
}

.jk-drawer.is-open,
.jk-cart-drawer.is-open {
  transform: none;
  visibility: visible;
  transition:
    transform var(--jk-slide) var(--jk-ease),
    visibility 0s;
}

.jk-drawer {
  width: min(360px, 88vw);
  overflow-y: auto;
  padding: 18px 22px 32px;
}

.jk-cart-drawer {
  width: min(420px, 92vw);
}

/* The drawer's contents follow it in, a step behind. */
.jk-drawer .jk-drawer-menu > li,
.jk-drawer .jk-drawer-links > * {
  opacity: 0;
  transform: translateX(14px);
  transition: opacity var(--jk-fade) ease, transform var(--jk-slide) var(--jk-ease);
}

.jk-drawer.is-open .jk-drawer-menu > li,
.jk-drawer.is-open .jk-drawer-links > * {
  opacity: 1;
  transform: none;
}

.jk-drawer.is-open .jk-drawer-menu > li:nth-child(1) { transition-delay: 0.06s; }
.jk-drawer.is-open .jk-drawer-menu > li:nth-child(2) { transition-delay: 0.09s; }
.jk-drawer.is-open .jk-drawer-menu > li:nth-child(3) { transition-delay: 0.12s; }
.jk-drawer.is-open .jk-drawer-menu > li:nth-child(4) { transition-delay: 0.15s; }
.jk-drawer.is-open .jk-drawer-menu > li:nth-child(5) { transition-delay: 0.18s; }
.jk-drawer.is-open .jk-drawer-menu > li:nth-child(n + 6),
.jk-drawer.is-open .jk-drawer-links > * { transition-delay: 0.2s; }

.jk-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.jk-drawer-menu a,
.jk-drawer-links a {
  display: block;
  padding: 14px 0;
  border-bottom: 1px solid var(--jk-line);
  color: var(--jk-text);
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: color var(--jk-quick) ease, padding-left var(--jk-quick) var(--jk-ease);
}

.jk-drawer-menu a:hover,
.jk-drawer-links a:hover {
  padding-left: 6px;
  color: var(--jk-accent-ink);
}

.jk-drawer-menu .sub-menu {
  list-style: none;
  margin: 0;
  padding: 0 0 0 14px;
}

.jk-drawer-menu .sub-menu a {
  color: var(--jk-muted);
  font-size: 13px;
}

.jk-drawer-links {
  margin-top: 26px;
}

.jk-drawer-links a {
  color: var(--jk-muted);
}

.jk-drawer-links .is-out {
  color: var(--jk-danger);
}

.jk-drawer-who {
  margin: 0 0 4px;
  color: var(--jk-muted);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Items in the side cart settle in after the panel has arrived. */
.jk-cart-drawer.is-open .woocommerce-mini-cart-item {
  animation: jk-rise 0.32s var(--jk-ease) both;
}

.jk-cart-drawer.is-open .woocommerce-mini-cart-item:nth-child(2) { animation-delay: 0.04s; }
.jk-cart-drawer.is-open .woocommerce-mini-cart-item:nth-child(3) { animation-delay: 0.08s; }
.jk-cart-drawer.is-open .woocommerce-mini-cart-item:nth-child(n + 4) { animation-delay: 0.12s; }

/* ── Buttons ───────────────────────────────────────────────────────────── */

.jk-button,
.button,
button.button,
.wp-element-button {
  position: relative;
  overflow: hidden;
  transition:
    background var(--jk-quick) ease,
    border-color var(--jk-quick) ease,
    color var(--jk-quick) ease,
    transform var(--jk-quick) var(--jk-ease);
}

/* A slow sheen across the primary buttons on hover. */
.jk-button::before,
.single_add_to_cart_button::before,
.checkout-button::before,
#place_order::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgb(255 255 255 / 0.22), transparent);
  transform: skewX(-18deg);
  transition: left 0.6s var(--jk-ease);
  pointer-events: none;
}

.jk-button:hover::before,
.single_add_to_cart_button:hover::before,
.checkout-button:hover::before,
#place_order:hover::before {
  left: 120%;
}

.button:active,
.jk-button:active {
  transform: translateY(1px);
}

/* ── Quantity stepper ──────────────────────────────────────────────────── */

.quantity.jk-stepper {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--jk-line);
  border-radius: var(--jk-radius);
  background: var(--jk-surface);
  transition: border-color var(--jk-quick) ease;
}

.quantity.jk-stepper:focus-within {
  border-color: var(--jk-accent);
}

.quantity.jk-stepper .qty {
  width: 52px;
  min-height: 50px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none !important;
  text-align: center;
  font-weight: 700;
  -moz-appearance: textfield;
}

.quantity.jk-stepper .qty::-webkit-inner-spin-button,
.quantity.jk-stepper .qty::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.jk-step {
  width: 42px;
  border: 0;
  background: none;
  color: var(--jk-muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: color var(--jk-quick) ease, background var(--jk-quick) ease;
}

.jk-step:hover {
  background: var(--jk-accent-soft);
  color: var(--jk-text);
}

/* ── Product page ──────────────────────────────────────────────────────── */

/* The summary settles in on arrival, a little after the picture. */
.single-product div.product .woocommerce-product-gallery {
  animation: jk-rise 0.5s var(--jk-ease) both;
}

.single-product div.product .summary > * {
  animation: jk-rise 0.5s var(--jk-ease) both;
}

.single-product div.product .summary > *:nth-child(1) { animation-delay: 0.05s; }
.single-product div.product .summary > *:nth-child(2) { animation-delay: 0.1s; }
.single-product div.product .summary > *:nth-child(3) { animation-delay: 0.15s; }
.single-product div.product .summary > *:nth-child(n + 4) { animation-delay: 0.2s; }

.woocommerce-product-gallery__image img {
  transition: transform 0.6s var(--jk-ease);
}

.woocommerce-product-gallery .flex-control-thumbs img {
  transition: opacity var(--jk-quick) ease, border-color var(--jk-quick) ease, transform var(--jk-quick) var(--jk-ease);
}

.woocommerce-product-gallery .flex-control-thumbs img:hover {
  transform: translateY(-2px);
}

/* Stock: a pulsing dot, as on the storefront. */
.summary .stock.in-stock {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.summary .stock.in-stock::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--jk-accent);
  box-shadow: 0 0 0 0 var(--jk-accent);
  animation: jk-pulse 2.2s ease-out infinite;
  color: var(--jk-on-accent);
}

@keyframes jk-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--jk-accent) 60%, transparent); }
  70% { box-shadow: 0 0 0 9px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* Assurances under the add-to-cart button. */
.jk-assurances {
  display: grid;
  gap: 16px;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
}

.jk-assurances li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.jk-assurances .jk-icon {
  width: 22px;
  height: 22px;
  margin-top: 1px;
  color: var(--jk-accent-ink);
}

.jk-assurances span {
  display: grid;
  gap: 2px;
}

.jk-assurances strong {
  color: var(--jk-text);
  font-size: 15px;
}

.jk-assurances small {
  color: var(--jk-muted);
  font-size: 13.5px;
}

/* Tabs: the underline slides to the active one. */
.woocommerce-tabs ul.tabs li a {
  position: relative;
  box-shadow: none !important;
  transition: color var(--jk-quick) ease;
}

.woocommerce-tabs ul.tabs li a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--jk-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--jk-slide) var(--jk-ease);
  color: var(--jk-on-accent);
}

.woocommerce-tabs ul.tabs li a:hover {
  color: var(--jk-text) !important;
}

.woocommerce-tabs ul.tabs li.active a::after {
  transform: scaleX(1);
}

.woocommerce-tabs .panel {
  animation: jk-rise 0.35s var(--jk-ease) both;
}

/* ── Reduced motion ────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .jk-drawer,
  .jk-cart-drawer,
  .jk-search-panel,
  .jk-user-menu {
    transform: none !important;
  }

  .jk-button::before,
  .single_add_to_cart_button::before,
  .checkout-button::before,
  #place_order::before {
    display: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   Checkout — steps on the left, the order on the right
   ═══════════════════════════════════════════════════════════════════════ */

.woocommerce-checkout .jk-page-head,
.woocommerce-cart .jk-page-head {
  margin-bottom: 18px;
}

form.woocommerce-checkout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 32px;
  align-items: start;
}

form.woocommerce-checkout > .woocommerce-NoticeGroup,
form.woocommerce-checkout > .woocommerce-error,
form.woocommerce-checkout > .woocommerce-message {
  grid-column: 1 / -1;
}

@media (max-width: 1000px) {
  form.woocommerce-checkout {
    grid-template-columns: 1fr;
  }
}

.jk-checkout-main {
  display: grid;
  gap: 22px;
  min-width: 0;
}

/* WooCommerce lays billing and shipping side by side in two floats; here
   they stack, each a card of its own. */
.jk-checkout-main #customer_details {
  display: grid;
  gap: 22px;
}

.jk-checkout-main #customer_details::before,
.jk-checkout-main #customer_details::after {
  display: none;
}

.jk-checkout-main #customer_details .col-1,
.jk-checkout-main #customer_details .col-2,
.jk-step-panel {
  float: none;
  width: auto;
  padding: 24px;
  border: 1px solid var(--jk-line);
  background: var(--jk-surface);
}

.jk-checkout-main h3,
.jk-step-title {
  margin: 0 0 18px;
  font-family: var(--jk-display);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.jk-checkout-main .form-row {
  margin: 0 0 14px;
}

.jk-checkout-main .form-row-first,
.jk-checkout-main .form-row-last {
  width: calc(50% - 7px);
}

@media (max-width: 560px) {
  .jk-checkout-main .form-row-first,
  .jk-checkout-main .form-row-last {
    float: none;
    width: 100%;
  }
}

.jk-checkout-main .form-row .required {
  color: var(--jk-accent-ink);
  text-decoration: none;
}

.form-row.woocommerce-invalid input.input-text,
.form-row.woocommerce-invalid select,
.form-row.woocommerce-invalid .select2-selection {
  border-color: var(--jk-danger) !important;
}

.form-row.woocommerce-validated input.input-text {
  border-color: color-mix(in srgb, var(--jk-accent) 45%, var(--jk-line));
}

/* The step rail. */
.jk-steps {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--jk-line);
  border-bottom: 1px solid var(--jk-line);
}

.jk-steps li {
  flex: 1;
}

.jk-steps li[hidden] {
  display: none;
}

.jk-steps button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 16px 4px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--jk-muted);
  font: inherit;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--jk-quick) ease, border-color var(--jk-slide) var(--jk-ease);
}

.jk-steps button:disabled {
  cursor: default;
  opacity: 0.55;
}

.jk-steps button > span {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border: 1px solid var(--jk-line);
  border-radius: 50%;
  font-size: 12px;
  letter-spacing: 0;
  transition: background var(--jk-fade) ease, border-color var(--jk-fade) ease, color var(--jk-fade) ease;
}

.jk-steps [data-state="current"] button {
  color: var(--jk-text);
  border-bottom-color: var(--jk-accent);
}

.jk-steps [data-state="current"] button > span {
  border-color: var(--jk-accent);
  color: var(--jk-text);
}

.jk-steps [data-state="done"] button {
  color: var(--jk-text);
}

.jk-steps [data-state="done"] button > span {
  border-color: var(--jk-accent);
  background: var(--jk-accent);
  color: var(--jk-on-accent);
}

@media (max-width: 560px) {
  .jk-steps button {
    flex-direction: column;
    gap: 6px;
    font-size: 10.5px;
    letter-spacing: 0.08em;
  }
}

/* Only the step on screen shows — and only once the script is running, so
   without it the whole form is there to fill in. */
.jk-checkout-main.js-steps [data-jk-panel]:not(.is-current) {
  display: none;
}

.jk-checkout-main.js-steps [data-jk-panel].is-current {
  animation: jk-rise 0.35s var(--jk-ease) both;
}

.jk-step-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 8px;
  padding-top: 18px;
  border-top: 1px solid var(--jk-line);
  clear: both;
}

.jk-step-error {
  flex-basis: 100%;
  margin: 0;
  color: var(--jk-danger);
  font-size: 13.5px;
}

.jk-step-back {
  background: transparent !important;
  border-color: var(--jk-line) !important;
  color: var(--jk-text) !important;
}

.jk-step-next {
  min-width: 200px;
}

.jk-step-back--pay {
  margin-top: 14px;
}

/* Payment box. */
.jk-step-panel--payment #payment {
  border: 0;
  background: none;
}

.jk-step-panel--payment #payment ul.payment_methods {
  display: grid;
  gap: 10px;
  margin: 0 0 18px;
  padding: 0;
  border: 0;
}

.jk-step-panel--payment #payment ul.payment_methods > li {
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--jk-line);
  background: var(--jk-bg);
  transition: border-color var(--jk-quick) ease;
}

.jk-step-panel--payment #payment ul.payment_methods > li:has(input:checked) {
  border-color: var(--jk-accent);
}

.jk-step-panel--payment #payment ul.payment_methods > li > label {
  display: inline;
  margin: 0 0 0 6px;
  color: var(--jk-text);
  font-size: 15px;
  letter-spacing: 0;
  text-transform: none;
}

.jk-step-panel--payment #payment div.payment_box {
  margin: 12px 0 0;
  padding: 12px 14px;
  background: var(--jk-surface);
  color: var(--jk-muted);
  font-size: 14px;
}

.jk-step-panel--payment #payment .place-order {
  margin: 0;
  padding: 0;
}

.jk-step-panel--payment .woocommerce-terms-and-conditions-wrapper {
  margin-bottom: 16px;
  color: var(--jk-muted);
  font-size: 13.5px;
}

.jk-step-panel--payment #place_order {
  float: none;
  width: 100%;
  min-height: 58px;
  font-size: 14px;
}

/* The summary column. */
.jk-checkout-summary {
  position: sticky;
  top: 24px;
  padding: 24px;
  border: 1px solid var(--jk-line);
  background: var(--jk-surface);
}

.jk-sticky-header .jk-checkout-summary {
  top: 110px;
}

@media (max-width: 1000px) {
  .jk-checkout-summary {
    position: static;
    order: -1;
  }
}

.jk-checkout-summary #order_review_heading {
  margin: 0 0 16px;
  font-family: var(--jk-display);
  font-size: 24px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.jk-checkout-summary table.shop_table {
  border: 0 !important;
  background: none;
}

.jk-checkout-summary table.shop_table thead {
  display: none;
}

.jk-checkout-summary table.shop_table th,
.jk-checkout-summary table.shop_table td {
  padding: 12px 0 !important;
  border-top: 1px solid var(--jk-line) !important;
  vertical-align: middle;
}

.jk-checkout-summary .cart_item .product-name {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--jk-text);
  font-size: 14px;
}

.jk-review-thumb {
  position: relative;
  flex: none;
  width: 56px;
  height: 56px;
  border: 1px solid var(--jk-line);
  background: #000;
}

.jk-review-thumb img {
  display: block;
  width: 100% !important;
  height: 100%;
  object-fit: cover;
  border: 0 !important;
}

.jk-review-name {
  min-width: 0;
}

.jk-checkout-summary .product-quantity {
  color: var(--jk-muted);
  font-weight: 400;
}

.jk-checkout-summary .product-total,
.jk-checkout-summary tfoot td {
  text-align: right;
  white-space: nowrap;
}

.jk-checkout-summary tfoot th {
  color: var(--jk-muted);
  font-weight: 400;
  text-align: left;
}

.jk-checkout-summary tfoot .order-total th,
.jk-checkout-summary tfoot .order-total td {
  padding-top: 18px !important;
  color: var(--jk-text);
}

.jk-checkout-summary tfoot .order-total .amount {
  font-family: var(--jk-display);
  font-size: 30px;
  font-weight: 400;
}

.jk-checkout-summary #shipping_method {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.jk-checkout-summary #shipping_method li {
  margin: 0 0 6px;
}

.jk-checkout-summary #shipping_method label {
  display: inline;
  color: var(--jk-text);
  font-size: 13.5px;
  letter-spacing: 0;
  text-transform: none;
}

.woocommerce-form-coupon-toggle .woocommerce-info,
.woocommerce-form-login-toggle .woocommerce-info {
  margin-bottom: 16px;
}

form.checkout_coupon,
form.woocommerce-form-login {
  margin: 0 0 22px;
  padding: 18px;
  border: 1px solid var(--jk-line);
  background: var(--jk-surface);
}

/* ═══════════════════════════════════════════════════════════════════════
   Cart — items as cards on the left, totals on the right
   ═══════════════════════════════════════════════════════════════════════ */

.woocommerce-cart .jk-wc-page .woocommerce {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 32px;
  align-items: start;
}

.woocommerce-cart .jk-wc-page .woocommerce > .woocommerce-notices-wrapper,
.woocommerce-cart .jk-wc-page .woocommerce > .cross-sells,
.woocommerce-cart .jk-wc-page .woocommerce > .cart-empty,
.woocommerce-cart .jk-wc-page .woocommerce > .return-to-shop,
.woocommerce-cart .jk-wc-page .woocommerce > .woocommerce-message,
.woocommerce-cart .jk-wc-page .woocommerce > .woocommerce-info {
  grid-column: 1 / -1;
}

@media (max-width: 1000px) {
  .woocommerce-cart .jk-wc-page .woocommerce {
    grid-template-columns: 1fr;
  }
}

.woocommerce-cart-form table.shop_table.cart {
  border: 0 !important;
  background: none;
}

.woocommerce-cart-form table.shop_table.cart thead {
  display: none;
}

.woocommerce-cart-form table.shop_table.cart tbody {
  display: grid;
  gap: 12px;
}

/* Each line of the cart, a card: picture, name and price, quantity,
   line total, remove. */
.woocommerce-cart-form table.shop_table.cart tr.cart_item {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) auto auto 32px;
  grid-template-areas: "thumb name qty total remove";
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid var(--jk-line);
  background: var(--jk-surface);
  animation: jk-rise 0.35s var(--jk-ease) both;
}

.woocommerce-cart-form table.shop_table.cart tr.cart_item td {
  display: block;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  text-align: left;
}

.woocommerce-cart-form table.shop_table.cart tr.cart_item td::before {
  display: none !important;
}

.woocommerce-cart-form .cart_item .product-thumbnail { grid-area: thumb; }
.woocommerce-cart-form .cart_item .product-name { grid-area: name; }
.woocommerce-cart-form .cart_item .product-price { display: none !important; }
.woocommerce-cart-form .cart_item .product-quantity { grid-area: qty; }
.woocommerce-cart-form .cart_item .product-subtotal { grid-area: total; }
.woocommerce-cart-form .cart_item .product-remove { grid-area: remove; }

.woocommerce-cart-form .cart_item .product-thumbnail img {
  display: block;
  width: 88px;
  height: 88px;
  object-fit: cover;
  border: 1px solid var(--jk-line);
  background: #000;
}

.woocommerce-cart-form .cart_item .product-name a {
  color: var(--jk-text);
  font-size: 16px;
  font-weight: 700;
}

.woocommerce-cart-form .cart_item .product-subtotal {
  min-width: 90px;
  text-align: right !important;
  font-family: var(--jk-display);
  font-size: 22px;
}

.woocommerce-cart-form .cart_item .product-remove a.remove {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 20px;
  transition: background var(--jk-quick) ease, color var(--jk-quick) ease;
}

@media (max-width: 640px) {
  .woocommerce-cart-form table.shop_table.cart tr.cart_item {
    grid-template-columns: 72px minmax(0, 1fr) 30px;
    grid-template-areas:
      "thumb name remove"
      "thumb qty total";
    gap: 10px 12px;
  }

  .woocommerce-cart-form .cart_item .product-thumbnail img {
    width: 72px;
    height: 72px;
  }
}

/* Coupon and update row. */
.woocommerce-cart-form table.shop_table.cart tr:not(.cart_item) {
  display: block;
}

.woocommerce-cart-form table.shop_table.cart td.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  padding: 16px 0 0 !important;
  border: 0 !important;
}

.woocommerce-cart-form td.actions .coupon {
  display: flex;
  gap: 8px;
  flex: 1 1 320px;
}

.woocommerce-cart-form td.actions .coupon .input-text {
  width: auto;
  flex: 1;
  min-height: 48px;
}

.woocommerce-cart-form td.actions button[name="update_cart"] {
  background: transparent;
  color: var(--jk-text);
  border-color: var(--jk-line);
}

.woocommerce-cart-form td.actions button[name="update_cart"]:disabled {
  opacity: 0.5;
}

/* Totals card. */
.woocommerce-cart .cart-collaterals {
  width: auto;
}

.woocommerce-cart .cart-collaterals .cart_totals {
  position: sticky;
  top: 24px;
  float: none;
  width: auto;
  padding: 24px;
  border: 1px solid var(--jk-line);
  background: var(--jk-surface);
}

.jk-sticky-header.woocommerce-cart .cart-collaterals .cart_totals {
  top: 110px;
}

.woocommerce-cart .cart_totals h2 {
  margin: 0 0 14px;
  font-size: 24px;
}

.woocommerce-cart .cart_totals table.shop_table {
  border: 0 !important;
  background: none;
}

.woocommerce-cart .cart_totals table.shop_table th,
.woocommerce-cart .cart_totals table.shop_table td {
  padding: 12px 0 !important;
  border-top: 1px solid var(--jk-line) !important;
  background: none !important;
}

.woocommerce-cart .cart_totals table.shop_table td {
  text-align: right;
}

.woocommerce-cart .cart_totals .order-total .amount {
  font-family: var(--jk-display);
  font-size: 30px;
  font-weight: 400;
}

.woocommerce-cart .cart_totals #shipping_method {
  margin: 0;
  padding: 0;
  list-style: none;
}

.woocommerce-cart .wc-proceed-to-checkout {
  padding: 16px 0 0;
}

.woocommerce-cart .cross-sells > h2 {
  margin-top: 24px;
}

/* ═══════════════════════════════════════════════════════════════════════
   Product page — as on the storefront
   ═══════════════════════════════════════════════════════════════════════ */

.jk-eyebrow {
  display: inline-block;
  margin-bottom: 14px;
  color: var(--jk-muted);
  font-size: 13px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

.jk-eyebrow:hover {
  color: var(--jk-accent-ink);
}

.single-product .product_title {
  margin-bottom: 10px;
  font-size: clamp(44px, 5.4vw, 76px);
  line-height: 0.95;
}

.jk-tagline {
  margin: 0 0 16px;
  color: var(--jk-muted);
  font-size: clamp(19px, 1.9vw, 25px);
  line-height: 1.3;
}

.jk-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}

.jk-pills li {
  padding: 6px 16px;
  border: 1px solid var(--jk-line);
  border-radius: 999px;
  background: var(--jk-surface);
  color: var(--jk-text);
  font-size: 14px;
}

.single-product .woocommerce-product-details__short-description {
  margin-bottom: 26px;
  color: var(--jk-text);
  font-size: 17px;
  line-height: 1.6;
}

.single-product .jk-assurances {
  padding-bottom: 24px;
  border-bottom: 1px solid var(--jk-line);
}

.single-product .jk-assurances .jk-icon {
  width: 30px;
  height: 30px;
}

.single-product .summary .price {
  margin: 24px 0 8px;
  font-size: clamp(44px, 4.6vw, 60px) !important;
}

.single-product form.cart {
  border: 0;
  padding: 12px 0 0;
  gap: 14px;
}

/* The quantity pill and the wide button, as on the storefront. */
.single-product form.cart .quantity.jk-stepper {
  border-radius: 999px;
  padding: 0 4px;
}

.single-product form.cart .single_add_to_cart_button {
  min-height: 60px;
  font-size: 13.5px;
  letter-spacing: 0.22em;
  background: linear-gradient(180deg, color-mix(in srgb, var(--jk-accent) 88%, #fff), var(--jk-accent));
  color: var(--jk-on-accent);
}

.single-product .summary .stock {
  margin: 0;
}

/* Gallery: a large frame and a rail of thumbnails. */
.single-product .woocommerce-product-gallery {
  position: sticky;
  top: 24px;
}

.jk-sticky-header.single-product .woocommerce-product-gallery {
  top: 110px;
}

@media (max-width: 860px) {
  .single-product .woocommerce-product-gallery {
    position: static;
  }
}

.single-product .woocommerce-product-gallery .flex-viewport {
  border: 1px solid var(--jk-line);
  background: #000;
}

.single-product .woocommerce-product-gallery__image img {
  border: 0;
}

.woocommerce-product-gallery__trigger {
  top: 14px !important;
  right: 14px !important;
  width: 42px !important;
  height: 42px !important;
  z-index: 5;
}

/* Description tab: text beside the specification card. */
.jk-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}

.jk-detail-grid.is-single {
  grid-template-columns: 1fr;
}

@media (max-width: 860px) {
  .jk-detail-grid {
    grid-template-columns: 1fr;
  }
}

.jk-detail-title {
  margin: 0 0 16px;
  font-size: clamp(26px, 2.8vw, 36px);
}

.jk-detail-text {
  max-width: 68ch;
}

.jk-spec-card {
  padding: 8px 20px;
  border: 1px solid var(--jk-line);
  background: var(--jk-surface);
}

.jk-spec-card table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.jk-spec-card th,
.jk-spec-card td {
  padding: 11px 0;
  border-bottom: 1px solid var(--jk-line);
  text-align: left;
  vertical-align: top;
}

.jk-spec-card tr:last-child th,
.jk-spec-card tr:last-child td {
  border-bottom: 0;
}

.jk-spec-card th {
  width: 44%;
  padding-right: 16px;
  color: var(--jk-muted);
  font-weight: 400;
}

.jk-spec-card td {
  color: var(--jk-text);
  font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════════════
   Landing-page blocks
   ═══════════════════════════════════════════════════════════════════════ */

/* A page built from blocks runs edge to edge; each block brings its own
   width and spacing. */
.jk-blocks.jk-main {
  padding-top: 0;
}

.jk-blocks > .jk-section:last-child {
  padding-bottom: clamp(48px, 8vw, 96px);
}

/* ── Image and text ────────────────────────────────────────────────────── */

.jk-feature-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}

.jk-feature.is-image-right .jk-feature-art {
  order: 2;
}

.jk-feature-art {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--jk-line);
  background: var(--jk-surface);
}

.jk-feature-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--jk-ease);
}

.jk-feature:hover .jk-feature-art img {
  transform: scale(1.03);
}

.jk-feature-copy .jk-eyebrow {
  margin-bottom: 14px;
  color: var(--jk-accent-ink);
}

.jk-feature-title {
  font-size: clamp(34px, 4.4vw, 58px);
  margin-bottom: 18px;
}

.jk-feature-text {
  color: var(--jk-muted);
  font-size: 17px;
  line-height: 1.7;
}

.jk-feature-text p {
  margin: 0 0 14px;
}

.jk-feature-copy .jk-assurances {
  margin: 24px 0 28px;
}

@media (max-width: 860px) {
  .jk-feature-grid {
    grid-template-columns: 1fr;
  }

  .jk-feature.is-image-right .jk-feature-art {
    order: 0;
  }
}

/* ── Reduced motion ────────────────────────────────────────────────────── */



/* ═══════════════════════════════════════════════════════════════════════
   Bridge: the storefront template on WordPress and WooCommerce

   template.css is the template's stylesheet as it was. These rules fit it
   to markup the template never had to deal with — WooCommerce's product
   list, its add-to-cart links, WordPress widgets — and add the motion the
   template's pages switch between without.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── WooCommerce's product list is the template's catalogue grid ───────── */

.jk-tpl ul.products {
  display: grid !important;
  grid-template-columns: repeat(var(--jk-columns, 4), minmax(0, 1fr));
  gap: 18px;
  margin: 0 0 32px !important;
  padding: 0;
  list-style: none;
}

.jk-tpl ul.products::before,
.jk-tpl ul.products::after {
  display: none !important;
}

.jk-tpl ul.products li.product {
  display: block;
  min-width: 0;
  align-self: stretch;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0;
  background: none;
  text-align: left;
}

@media (max-width: 1100px) {
  .jk-tpl ul.products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 13px;
  }
}

@media (max-width: 760px) {
  .jk-tpl ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}

/* The card: the template's, with a real product photograph. */
.jk-tpl .catalog-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.jk-tpl .catalog-photo img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  object-fit: contain;
  transition: transform 0.6s var(--jk-ease);
}

.jk-tpl .catalog-card:hover .catalog-photo img {
  transform: scale(1.04);
}

.jk-tpl .catalog-body {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.jk-tpl .catalog-body .product-name {
  color: var(--jk-text);
}

/* The button keeps its place at the foot of every card in a row. */
.jk-tpl .catalog-body .primary {
  margin-top: auto;
}

.jk-tpl .catalog-price .amount {
  color: var(--jk-text);
}

.jk-tpl .catalog-price del {
  margin-right: 6px;
  color: var(--jk-muted);
  font-size: 0.8em;
  font-weight: 400;
}

.jk-tpl .catalog-price ins {
  text-decoration: none;
}

/* WooCommerce's add-to-cart link wearing the template's button. */
.jk-tpl .catalog-body a.primary.button {
  width: 100%;
  min-height: 39px;
  padding: 8px 5px;
  border-radius: 3px;
  font-size: 10px;
  letter-spacing: 0.8px;
  gap: 8px;
  color: var(--jk-on-accent);
  background: linear-gradient(100deg, var(--jk-accent), color-mix(in srgb, var(--jk-accent) 72%, #000));
  border: 1px solid color-mix(in srgb, var(--jk-accent) 82%, #fff);
  text-transform: uppercase;
  overflow: visible;
}

.jk-tpl .catalog-body a.primary.button:hover {
  filter: brightness(1.15);
  background: linear-gradient(100deg, var(--jk-accent), color-mix(in srgb, var(--jk-accent) 72%, #000));
  color: var(--jk-on-accent);
}

.jk-tpl .catalog-body a.primary.button svg {
  width: 20px;
  height: 20px;
}

.jk-tpl .catalog-body .added_to_cart {
  display: none !important;
}

@media (max-width: 760px) {
  .jk-tpl .catalog-body a.primary.button {
    font-size: 9px;
    letter-spacing: 0;
    gap: 5px;
  }

  .jk-tpl .catalog-body a.primary.button svg {
    width: 16px;
    height: 16px;
  }
}

/* ── Shop and category pages ───────────────────────────────────────────── */

/* The hero and strip run edge to edge above the shop wrapper; the wrapper
   then needs less room at the top. */
.jk-archive .jk-main.jk-shop {
  padding-top: 32px;
}

.jk-tpl .catalog-toolbar {
  margin-bottom: 4px;
}

.jk-tpl .sort-control .woocommerce-ordering {
  margin: 0;
  float: none;
}

.jk-tpl .sort-control select {
  width: auto;
  min-height: 0;
}

.jk-tpl .catalog-search input[type="search"] {
  min-height: 0;
  border: 0;
  background: transparent;
  box-shadow: none !important;
}

/* The category nav as links: the same look as the template's buttons. */
.jk-tpl .category-nav a {
  text-align: center;
  color: var(--jk-text);
  transition: background var(--jk-quick) ease, border-color var(--jk-quick) ease;
}

.jk-tpl .category-nav a:hover {
  color: var(--jk-text);
}

/* On a category page the grid's WooCommerce pagination follows the template. */
.jk-archive .woocommerce-pagination {
  margin-top: 28px;
}

/* ── Hero slider: crossfade instead of the template's cut ──────────────── */

.jk-tpl .home-hero .hero-slide {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease, visibility 0s linear 0.8s;
}

.jk-tpl .home-hero .hero-slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.8s ease, visibility 0s;
}

/* A slow push-in on the picture while its slide is on screen. */
.jk-tpl .home-hero .hero-art {
  transform: scale(1.05);
  transition: transform 8s linear;
}

.jk-tpl .home-hero .hero-slide.is-active .hero-art {
  transform: scale(1);
}

/* The copy of the arriving slide rises into place, line by line. */
.jk-tpl .home-hero .hero-content > *,
.jk-tpl .home-hero .hero-caption {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.7s var(--jk-ease);
}

.jk-tpl .home-hero .hero-slide.is-active .hero-content > *,
.jk-tpl .home-hero .hero-slide.is-active .hero-caption {
  opacity: 1;
  transform: none;
}

.jk-tpl .home-hero .hero-slide.is-active .hero-content > :nth-child(1) { transition-delay: 0.15s; }
.jk-tpl .home-hero .hero-slide.is-active .hero-content > :nth-child(2) { transition-delay: 0.25s; }
.jk-tpl .home-hero .hero-slide.is-active .hero-content > :nth-child(3) { transition-delay: 0.35s; }
.jk-tpl .home-hero .hero-slide.is-active .hero-content > :nth-child(4) { transition-delay: 0.45s; }
.jk-tpl .home-hero .hero-slide.is-active .hero-caption { transition-delay: 0.5s; }

/* Slides after the first carry an h2 (one h1 per page), drawn like the h1. */
.jk-tpl .hero-content .jk-hero-title {
  font-family: var(--jk-display);
  font-size: clamp(56px, 6.9vw, 103px);
  line-height: 0.99;
  letter-spacing: -0.4px;
  font-weight: 900;
  margin-bottom: 28px;
  text-transform: uppercase;
}

.jk-tpl .hero-content .jk-hero-title span {
  color: color-mix(in srgb, var(--jk-accent) 55%, #fff);
}

/* The active dash fills over the slide's time while autoplay runs. */
.jk-tpl .slider-dots button::after {
  content: "";
  position: absolute;
  height: 2px;
  top: 14px;
  left: 0;
  right: 0;
  background: color-mix(in srgb, var(--jk-accent) 60%, #fff);
  transform: scaleX(0);
  transform-origin: left;
  color: var(--jk-on-accent);
}

.jk-tpl .slider-dots [aria-pressed="true"]::after {
  animation: jk-fill var(--jk-hero-dur, 7s) linear both;
}

.jk-tpl .home-hero.is-paused .slider-dots [aria-pressed="true"]::after {
  animation: none;
  transform: scaleX(1);
}

@keyframes jk-fill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* Heights the block offers besides the template's full screen. */
.jk-tpl .home-hero.is-tall {
  height: 72vh;
  min-height: 520px;
}

.jk-tpl .home-hero.is-medium {
  height: 56vh;
  min-height: 420px;
}

/* A sticky header covers part of a full-screen hero; take it off the height. */
.jk-sticky-header .jk-tpl .home-hero.is-full,
.jk-sticky-header.jk-tpl .home-hero.is-full {
  height: calc(100svh - 88px);
}

/* Phones: the three layouts the block offers. The template's own phone rule
   is "background"; the other two are the block's. */
@media (max-width: 760px) {
  .jk-tpl .home-hero[data-mobile="stack"] {
    height: auto;
    min-height: 0;
  }

  .jk-tpl .home-hero[data-mobile="stack"] .hero-slide {
    position: relative;
    display: none;
  }

  .jk-tpl .home-hero[data-mobile="stack"] .hero-slide.is-active {
    display: block;
  }

  .jk-tpl .home-hero[data-mobile="stack"] .hero-art {
    position: relative;
    inset: auto;
    height: 46vw;
    opacity: 1;
    background-size: cover;
    background-position: center;
  }

  .jk-tpl .home-hero[data-mobile="stack"] .hero-slide::after {
    display: none;
  }

  .jk-tpl .home-hero[data-mobile="stack"] .hero-content {
    height: auto;
    padding-top: 26px;
    padding-bottom: 96px;
  }

  .jk-tpl .home-hero[data-mobile="hide"] .hero-art {
    display: none;
  }

  .jk-tpl .hero-content .jk-hero-title {
    font-size: clamp(52px, 10.5vw, 78px);
    margin-bottom: 20px;
  }
}

/* The editor shows the first slide, without autoplay. */
.jk-ed-preview .home-hero .hero-slide:first-of-type {
  opacity: 1;
  visibility: visible;
}

.jk-ed-preview .home-hero .hero-slide:first-of-type .hero-content > *,
.jk-ed-preview .home-hero .hero-slide:first-of-type .hero-caption {
  opacity: 1;
  transform: none;
}

.jk-ed-preview .home-hero {
  height: 640px;
}

/* ── Buttons from the template used outside its forms ──────────────────── */

.jk-tpl a.primary.jk-inline-primary {
  display: inline-flex;
  margin-top: 8px;
}

.jk-tpl .jk-subscribe-form {
  margin-top: 10px;
}

/* ── Header: the template's lock-up and motto ──────────────────────────── */

.jk-brand.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--jk-text);
  text-transform: none;
  letter-spacing: 0;
}

.jk-brand.brand strong {
  display: block;
  font-family: var(--jk-display);
  font-size: 26px;
  font-weight: 400;
  letter-spacing: -0.5px;
  line-height: 1.1;
  text-transform: uppercase;
}

.jk-brand.brand small {
  display: block;
  margin-top: 6px;
  color: var(--jk-muted);
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.jk-motto {
  margin-left: 12px;
  padding-left: 20px;
  border-left: 1px solid var(--jk-line);
  font-size: 10px;
  letter-spacing: 2px;
  line-height: 1.5;
  text-transform: uppercase;
}

@media (max-width: 1100px) {
  .jk-motto {
    display: none;
  }
}

/* ── Footer: the template's band ───────────────────────────────────────── */

.jk-footer.tpl {
  border-top: 1px solid var(--jk-line);
  background: linear-gradient(140deg, #121212, #060606);
  font-size: 14px;
}

.jk-footer .footer-grid {
  grid-template-columns: 1.35fr 0.8fr 0.8fr 1.1fr;
}

.jk-footer-col:empty {
  display: none;
}

/* WordPress widgets inside the template's columns. */
.jk-footer .widget-title,
.jk-footer .wp-block-heading {
  margin: 0 0 13px;
  font-family: var(--jk-body);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--jk-text);
}

.jk-footer .widget ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.jk-footer .widget li {
  margin: 0;
}

.jk-footer .widget a,
.jk-footer .widget p,
.jk-footer .widget li {
  display: block;
  margin-top: 10px;
  color: var(--jk-muted);
  font-size: 12px;
}

.jk-footer .widget a:hover {
  color: var(--jk-text);
}

.jk-footer .footer-bottom {
  flex-wrap: wrap;
  gap: 10px 24px;
}

.jk-footer .jk-footer-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.jk-footer .jk-footer-menu a {
  color: #9b9b9b;
}

.jk-footer-motto {
  font-size: 9px;
  letter-spacing: 2.7px;
  text-transform: uppercase;
}

@media (max-width: 860px) {
  .jk-footer .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .jk-footer .jk-footer-brand {
    grid-column: 1 / -1;
  }
}

/* ── Reduced motion ────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .jk-tpl .home-hero .hero-art,
  .jk-tpl .home-hero .hero-slide.is-active .hero-art {
    transform: none;
  }
}

/* 1.6: isolate WooCommerce layouts from the reference template's generic classes. */
.jk-tpl ul.products.columns-1 { --jk-loop-columns: 1; }
.jk-tpl ul.products.columns-2 { --jk-loop-columns: 2; }
.jk-tpl ul.products.columns-3 { --jk-loop-columns: 3; }
.jk-tpl ul.products.columns-4 { --jk-loop-columns: 4; }
.jk-tpl ul.products.columns-5 { --jk-loop-columns: 5; }
.jk-tpl ul.products.columns-6 { --jk-loop-columns: 6; }
.jk-tpl ul.products { grid-template-columns: repeat(var(--jk-loop-columns, var(--jk-columns, 4)), minmax(0, 1fr)); }
.jk-tpl ul.products li.product .catalog-photo { flex: none; aspect-ratio: 218 / 160; }
.jk-tpl ul.products li.product .catalog-photo img { position: absolute; inset: 0; object-fit: contain; }
.jk-tpl ul.products li.product .catalog-body { min-width: 0; }
.jk-tpl ul.products li.product .product-name { font-family: var(--jk-body); font-size: 17px; line-height: 1.3; overflow-wrap: anywhere; }
.jk-tpl ul.products li.product .catalog-price { margin-bottom: 12px; }
.jk-tpl ul.products li.product .primary { flex: none; white-space: normal; text-align: center; }
.jk-tpl.single-product div.product { gap: 38px 42px; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
/* WooCommerce clearfix pseudo-elements would otherwise become grid items. */
.jk-tpl.single-product div.product::before,
.jk-tpl.single-product div.product::after { display: none; }
.jk-tpl.single-product div.product > * { min-width: 0; }
.jk-tpl.single-product .product_title { font-family: var(--jk-body); font-weight: 700; text-transform: none; font-size: clamp(30px, 3.2vw, 43px); line-height: 1.15; letter-spacing: -1.2px; }
.jk-tpl.single-product .jk-eyebrow { margin: 10px 0 4px; font-size: 13px; }
.jk-tpl.single-product .jk-tagline { font-size: 18px; }
.jk-tpl.single-product .jk-pills li { font-size: 13px; padding: 4px 14px; }
.jk-tpl.single-product .woocommerce-product-details__short-description { font-size: 15px; line-height: 1.65; }
.jk-tpl.single-product .summary .price { font-size: 30px !important; margin-top: 16px; }
.jk-tpl.single-product .jk-assurances { margin: 20px 0 0; padding-bottom: 20px; }
.jk-tpl.single-product form.cart .quantity.jk-stepper { border-radius: 4px; }
.jk-tpl.single-product form.cart .single_add_to_cart_button { min-height: 48px; letter-spacing: 1.2px; }
.jk-tpl.single-product div.product > .onsale { position: absolute; z-index: 6; top: 12px; left: 12px; margin: 0; }
.jk-tpl.single-product .woocommerce-product-gallery__image:not(.woocommerce-product-gallery__image--placeholder) > a { display: block; aspect-ratio: 1.07; background: #0a0a0a; }
.jk-tpl.single-product .woocommerce-product-gallery__image > a > img { display: block; width: 100%; height: 100%; object-fit: contain; }
.jk-tpl.single-product .woocommerce-product-gallery .flex-control-thumbs { display: grid; gap: 12px; padding: 0; margin-top: 14px !important; }
.jk-tpl.single-product .woocommerce-product-gallery .flex-control-thumbs li { float: none; width: auto; }
.jk-tpl.single-product .woocommerce-product-gallery .flex-control-thumbs img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; background: #0a0a0a; border-radius: 4px; }
.jk-tpl.single-product div.product .woocommerce-tabs { width: 100%; padding-top: 0; border-top: 1px solid var(--jk-line); }
.jk-tpl.single-product div.product .woocommerce-tabs .panel { max-width: none; margin: 0; font-size: 15px; }
.jk-tpl.single-product div.product .woocommerce-tabs ul.tabs { flex-wrap: wrap; gap: 0 28px; overflow: visible !important; margin: 0 0 26px !important; }
.jk-tpl.single-product div.product .woocommerce-tabs ul.tabs li { flex: 0 0 auto; }
.jk-tpl.single-product div.product .woocommerce-tabs ul.tabs li a { padding: 18px 3px !important; font-size: 12px; }
.jk-tpl.single-product .jk-detail-title { font-family: var(--jk-body); font-size: 26px; text-transform: none; font-weight: 700; }
.jk-tpl.jk-has-side-specs div.product .woocommerce-tabs { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); column-gap: 55px; align-items: start; }
.jk-tpl.jk-has-side-specs div.product .woocommerce-tabs > ul.tabs { grid-column: 1 / -1; }
.jk-tpl.jk-has-side-specs div.product .woocommerce-tabs > .panel { grid-column: 1; grid-row: 2; min-width: 0; }
.jk-tpl.jk-has-side-specs div.product .woocommerce-tabs > .jk-spec-card { grid-column: 2; grid-row: 2; }
.jk-tpl.single-product .jk-specs-below { grid-column: 1 / -1; }
.jk-tpl .jk-spec-card { min-width: 0; border-radius: 4px; background: transparent; }
.jk-tpl .jk-spec-card table { table-layout: fixed; }
.jk-tpl .jk-spec-card caption { position: static; clip-path: none; width: auto; height: auto; overflow: visible; text-align: left; font-weight: 600; padding: 8px 0 12px; color: var(--jk-text); }
.jk-tpl .jk-spec-card th, .jk-tpl .jk-spec-card td { overflow-wrap: anywhere; font-size: 13px; font-weight: 400; padding-top: 10px; padding-bottom: 10px; }
.jk-tpl.single-product .related.products > h2,
.jk-tpl.single-product .upsells.products > h2 { font-family: var(--jk-body); font-size: 20px; font-weight: 700; margin: 0 0 22px; padding: 0; border: 0; }
.jk-blocks > :where(.wp-block-heading, .wp-block-paragraph, p, h1, h2, h3, ul, ol, .wp-block-table, .wp-block-buttons, .wp-block-image, .wp-block-columns, .wp-block-group:not(.alignfull)) { max-width: var(--jk-width); width: calc(100% - 2 * var(--jk-gutter)); margin-left: auto; margin-right: auto; }
@media (max-width: 1100px) {
  .jk-tpl ul.products { grid-template-columns: repeat(min(var(--jk-loop-columns, var(--jk-columns, 4)), 3), minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .jk-tpl.single-product div.product { grid-template-columns: minmax(0, 1fr); }
  .jk-tpl.jk-has-side-specs div.product .woocommerce-tabs { grid-template-columns: minmax(0, 1fr); }
  .jk-tpl.jk-has-side-specs div.product .woocommerce-tabs > .jk-spec-card { grid-column: 1; grid-row: 3; margin-top: 24px; }
}
@media (max-width: 760px) {
  .jk-tpl ul.products { grid-template-columns: repeat(min(var(--jk-loop-columns, var(--jk-columns, 4)), 2), minmax(0, 1fr)); }
  .jk-tpl ul.products li.product .product-name { font-size: 15px; }
  .jk-tpl.single-product .woocommerce-product-gallery .flex-control-thumbs { gap: 7px; }
}
@media (max-width: 359px) {
  .jk-tpl ul.products { grid-template-columns: minmax(0, 1fr); }
}
/* A specs-only product uses the full description panel, without an empty column. */
.jk-tpl.jk-no-description div.product .woocommerce-tabs:has(#tab-description:not([style*="display: none"])) > .jk-spec-card { grid-column: 1 / -1; }
.jk-tpl.single-product form.variations_form .single_variation_wrap { width: 100%; }
.jk-tpl.single-product .woocommerce-variation-add-to-cart { display: flex; flex-wrap: wrap; gap: 14px; align-items: stretch; }

/* ── 1.6.1 fixes ──────────────────────────────────────────────────────── */

/* Long unbroken text (a pasted code, a URL, a test string) wraps instead of
   running out of the column or the card. */
.single-product div.product .summary,
.single-product .woocommerce-product-details__short-description,
.single-product .jk-tagline,
.single-product .woocommerce-tabs .panel,
.jk-tpl .catalog-body,
.jk-tpl .catalog-body p {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.jk-tpl .catalog-card,
.jk-tpl .catalog-body {
  min-width: 0;
}

/* The card's one line stays one or two lines, whatever is in it. */
.jk-tpl .catalog-body p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* The sheen on the product page's button stays inside the button — it was
   showing as a white haze over the quantity field and the photo. */
.single_add_to_cart_button,
.checkout-button,
#place_order,
.jk-button {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate;
  clip-path: inset(0 round var(--jk-radius, 3px));
}

/* The quantity field: no inherited glow or gradient, the same surface as
   the rest of the form. */
.quantity.jk-stepper,
.jk-tpl .quantity.jk-stepper {
  width: auto;
  background: var(--jk-surface) !important;
  box-shadow: none !important;
  background-image: none !important;
  overflow: hidden;
}

.quantity.jk-stepper .qty,
.quantity.jk-stepper .jk-step {
  box-shadow: none !important;
  background-image: none !important;
  text-shadow: none !important;
}

.quantity.jk-stepper .qty {
  background: transparent !important;
  color: var(--jk-text) !important;
}

.quantity.jk-stepper .jk-step {
  display: grid;
  place-items: center;
  padding: 0;
  background: transparent;
}

.quantity.jk-stepper .jk-step:hover {
  background: var(--jk-accent-soft);
}

/* ── Card: stepper + button ── */

.jk-tpl .catalog-buy {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin-top: auto;
}

.jk-tpl .catalog-body .catalog-buy .primary {
  margin-top: 0;
}

.jk-tpl .catalog-buy .quantity.jk-stepper {
  flex: none;
  width: auto;
  height: 39px;
  margin: 0 !important;
  border: 1px solid #474747;
  border-radius: 3px;
}

.jk-tpl .catalog-buy .quantity.jk-stepper .qty {
  width: 34px;
  min-height: 0;
  height: 100%;
  font-size: 13px;
}

.jk-tpl .catalog-buy .jk-step {
  width: 28px;
  font-size: 16px;
}

/* WooCommerce's own ".woocommerce a.button" (inline-block, its padding) was
   winning over the template button, which put the icon on one line and the
   words on the next. */
.jk-tpl .catalog-body a.primary.button,
.woocommerce .jk-tpl .catalog-body a.primary.button,
.jk-tpl .woocommerce .catalog-body a.primary.button {
  display: flex !important;
  flex: 1 1 auto;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  min-width: 0;
  min-height: 39px;
  margin: 0 !important;
  padding: 8px 10px !important;
  line-height: 1.1 !important;
  white-space: nowrap;
  text-align: center;
  overflow: hidden;
}

.jk-tpl .catalog-buy:not(.has-qty) a.primary.button {
  width: 100%;
}

.jk-tpl .catalog-body a.primary.button svg {
  flex: none;
  width: 18px !important;
  height: 18px !important;
  margin: 0;
}

.jk-tpl .catalog-body a.primary.button span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Narrow cards: the stepper takes its own row above the button. */
@media (max-width: 520px) {
  .jk-tpl .catalog-buy.has-qty {
    flex-direction: column;
  }

  .jk-tpl .catalog-buy .quantity.jk-stepper {
    width: 100%;
  }

  .jk-tpl .catalog-buy .quantity.jk-stepper .qty {
    flex: 1;
    width: auto;
  }

  .jk-tpl .catalog-buy .jk-step {
    width: 40px;
  }
}

.single_add_to_cart_button:focus-visible,
.checkout-button:focus-visible,
#place_order:focus-visible,
.jk-button:focus-visible {
  outline-offset: -4px;
}

/* ── 1.6.1: long text never runs out of its box, anywhere ─────────────────
   A word longer than its column (a test string, a batch code, a URL) wraps
   instead of pushing past the page. "break-word" on the whole page keeps
   normal text as it was; the boxes that sit in tables, flex rows or grid
   columns — which size themselves by their longest word — get "anywhere",
   so they cannot be widened by one either. */
/* (break-word on the whole page removed in 2.0.1 — plugins' floating widgets
   measure their text and must not be affected.) */

/* Only inside the theme's own areas: widgets that plugins float over the
   page (language switchers, chat bubbles) keep their own shapes. */
:is(.jk-main, .jk-footer, #jk-cart, .jk-search-panel, .jk-auth-modal) :is(
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  li,
  dd,
  dt,
  td,
  th,
  label,
  blockquote,
  figcaption,
  .product_title,
  .product-name,
  .jk-tagline,
  .woocommerce-product-details__short-description,
  .woocommerce-tabs .panel,
  .entry-content,
  .jk-post-card,
  .jk-search-results,
  .jk-cart-drawer .woocommerce-mini-cart-item,
  .woocommerce-mini-cart-item,
  .woocommerce-cart-form .product-name,
  .shop_table td,
  .shop_table th,
  .woocommerce-order-details,
  .woocommerce-customer-details,
  .woocommerce-MyAccount-content,
  .woocommerce-notices-wrapper,
  .woocommerce-message,
  .woocommerce-info,
  .woocommerce-error,
  .breadcrumbs,
  .woocommerce-breadcrumb,
  .wc-block-cart-item__product,
  .wc-block-cart-item__wrap,
  .wc-block-components-product-name,
  .wc-block-components-product-metadata,
  .wc-block-components-product-metadata__description,
  .wc-block-components-product-details,
  .wc-block-components-order-summary-item__description,
  .wc-block-components-totals-item__label,
  .wc-block-components-totals-item__description,
  .wc-block-components-address-card,
  .wc-block-components-notice-banner,
  .wc-block-mini-cart__drawer .wc-block-cart-item__product
) {
  overflow-wrap: anywhere;
}

/* Grid and flex children default to "never narrower than my longest word";
   these may be narrower, so the wrapping above can happen. */
.wc-block-components-sidebar-layout > *,
.wc-block-components-main,
.wc-block-components-sidebar,
.wc-block-cart-items,
.wc-block-cart-item__product,
.wc-block-cart-item__wrap,
.wc-block-components-order-summary-item,
.wc-block-components-order-summary-item__description,
.woocommerce-cart-form,
.cart-collaterals,
.jk-checkout-main,
.jk-checkout-summary,
.woocommerce-mini-cart-item,
.single-product div.product > *,
.single-product div.product .summary > * {
  min-width: 0;
}

/* Money never splits across lines, even in a squeezed column. */
.woocommerce-Price-amount,
.wc-block-formatted-money-amount,
.wc-block-components-formatted-money-amount {
  white-space: nowrap;
  overflow-wrap: normal;
}

/* Cart and checkout show the short description under each item: two lines
   there are plenty — the full text is on the product page. */
.wc-block-cart-item__product .wc-block-components-product-metadata__description,
.wc-block-components-order-summary-item .wc-block-components-product-metadata__description,
.wc-block-mini-cart__drawer .wc-block-components-product-metadata__description {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  color: var(--jk-muted);
  font-size: 13px;
  line-height: 1.5;
}

.wc-block-components-product-metadata__description > p {
  display: inline;
  margin: 0;
}

/* ── 1.6.1: side cart looks the same on every page ─────────────────────────
   On shop, product and cart pages WooCommerce's widget styles apply to the
   side cart's list too: their clearfix ::before/::after became extra grid
   cells (name and picture swapped places), and its grey button replaced the
   blue Checkout. Scoped to the panel's id, so they always win here. */
#jk-cart .woocommerce-mini-cart {
  margin: 0;
  padding: 6px 20px;
  list-style: none;
}

#jk-cart .woocommerce-mini-cart-item {
  position: relative;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 4px 14px;
  align-items: start;
  margin: 0;
  padding: 14px 28px 14px 0;
  list-style: none;
}

#jk-cart .woocommerce-mini-cart-item::before,
#jk-cart .woocommerce-mini-cart-item::after,
#jk-cart .woocommerce-mini-cart::before,
#jk-cart .woocommerce-mini-cart::after,
#jk-cart .woocommerce-mini-cart__buttons::before,
#jk-cart .woocommerce-mini-cart__buttons::after {
  content: none;
  display: none;
}

#jk-cart .woocommerce-mini-cart-item a:not(.remove) {
  display: contents;
  font-weight: 700;
}

#jk-cart .woocommerce-mini-cart-item img {
  float: none;
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 64px !important;
  height: 64px !important;
  margin: 0 !important;
  object-fit: cover;
  box-shadow: none;
}

#jk-cart .woocommerce-mini-cart-item .quantity {
  grid-column: 2;
  display: block;
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

#jk-cart .woocommerce-mini-cart-item dl.variation {
  grid-column: 2;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 12px;
  color: var(--jk-muted);
}

#jk-cart a.remove {
  position: absolute;
  top: 12px;
  right: 0;
  left: auto;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin: 0;
  border-radius: 999px;
  font-size: 18px;
  line-height: 1;
  text-align: center;
}

#jk-cart .woocommerce-mini-cart__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 0;
  padding: 16px 20px;
  border-top: 1px solid var(--jk-line);
  border-bottom: 0;
}

#jk-cart .woocommerce-mini-cart__buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0;
  padding: 0 20px 20px;
}

#jk-cart .woocommerce-mini-cart__buttons .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 12px 16px;
  float: none;
  border: 1px solid var(--jk-accent);
  border-radius: var(--jk-radius);
  background: var(--jk-accent);
  color: var(--jk-on-accent);
  font-family: var(--jk-body);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
}

#jk-cart .woocommerce-mini-cart__buttons .button:hover {
  background: color-mix(in srgb, var(--jk-accent) 82%, #000);
  border-color: color-mix(in srgb, var(--jk-accent) 82%, #000);
  color: var(--jk-on-accent);
}

#jk-cart .woocommerce-mini-cart__buttons .button:not(.checkout) {
  background: transparent;
  border-color: var(--jk-line);
  color: var(--jk-text);
}

#jk-cart .woocommerce-mini-cart__buttons .button:not(.checkout):hover {
  border-color: var(--jk-text);
}

/* ═══════════════════════════════════════════════════════════════════════
   1.6.1 — Cart and checkout as the storefront template draws them
   heading · 4 steps · step card left · "Your order" card right
   ═══════════════════════════════════════════════════════════════════════ */

.jk-order-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  padding-top: 17px;
}

.jk-order-heading .jk-eyebrow {
  margin: 0;
  color: #9b9b9b;
  font-size: 13px;
  letter-spacing: 4px;
  text-transform: uppercase;
}

.jk-order-heading h1 {
  margin: 8px 0 0;
  font-family: var(--jk-body);
  font-size: clamp(28px, 3.2vw, 38px);
  font-weight: 700;
  letter-spacing: -0.5px;
  line-height: 1.15;
  text-transform: uppercase;
}

.jk-secure-label {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #aeaeae;
  font-size: 13px;
  white-space: nowrap;
}

.jk-secure-label svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
}

/* The four steps. */
.jk-order-steps {
  margin: 30px 0;
  border-top: 1px solid var(--jk-line);
  border-bottom: 1px solid var(--jk-line);
}

.jk-order-steps ol.jk-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
}

.jk-order-steps li {
  margin: 0;
  padding: 0;
}

.jk-order-steps li > a,
.jk-order-steps li > button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 19px 8px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: none !important;
  color: #9f9f9f;
  font-family: var(--jk-body);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  box-shadow: none;
  opacity: 1;
}

.jk-order-steps li > button:disabled {
  cursor: default;
  color: #6e6e6e;
}

.jk-order-steps li > * > span {
  display: grid;
  flex: none;
  place-items: center;
  width: 31px;
  height: 31px;
  border: 1px solid #545454;
  border-radius: 50%;
  background: none;
  color: inherit;
  font-size: 12px;
}

.jk-order-steps li[data-state="current"] > * {
  border-bottom-color: var(--jk-accent);
  color: var(--jk-accent-ink);
}

.jk-order-steps li[data-state="current"] > * > span {
  border-color: var(--jk-accent);
  background: var(--jk-accent);
  color: var(--jk-on-accent);
}

.jk-order-steps li[data-state="done"] > * {
  color: #c6c6c6;
}

.jk-order-steps li[data-state="done"] > * > span {
  border-color: var(--jk-accent-line);
  color: var(--jk-accent);
}

.jk-order-steps li > a:hover,
.jk-order-steps li > button:not(:disabled):hover {
  color: #fff;
}

/* The two columns. */
.woocommerce:has(> .jk-cart-layout),
.woocommerce-cart .jk-wc-page .woocommerce:has(> .jk-cart-layout) {
  display: block;
}

.jk-order-layout,
body.woocommerce-checkout form.woocommerce-checkout {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(280px, 1fr);
  gap: 35px;
  align-items: start;
}

.jk-panel {
  min-width: 0;
  margin: 0;
  padding: 28px;
  border: 1px solid var(--jk-line);
  border-radius: 4px;
  background: #101010;
}

.jk-panel-title {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}

.jk-panel-title > span {
  padding-right: 15px;
  border-right: 1px solid #4a4a4a;
  color: var(--jk-accent-line);
  font-size: 12px;
}

.jk-panel-title h2 {
  margin: 0;
  font-family: var(--jk-body);
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -0.3px;
  text-transform: none;
}

/* The "Your order" card. */
.jk-checkout-summary,
body.woocommerce-cart .cart-collaterals {
  position: sticky;
  top: 24px;
  min-width: 0;
  width: auto;
  margin: 0;
  padding: 26px;
  border: 1px solid #454545;
  border-radius: 4px;
  background: linear-gradient(145deg, #222222, #121212);
}

.jk-sticky-header .jk-checkout-summary,
.jk-sticky-header.woocommerce-cart .cart-collaterals {
  top: 110px;
}

.jk-checkout-summary .jk-eyebrow,
.cart-collaterals .jk-eyebrow {
  margin: 0 0 8px;
  color: #9b9b9b;
  font-size: 12px;
  letter-spacing: 4px;
  text-transform: uppercase;
}

.jk-checkout-summary #order_review_heading,
.cart-collaterals .jk-summary-title {
  margin: 0 0 25px;
  padding: 0;
  border: 0;
  font-family: var(--jk-body);
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -0.3px;
  text-transform: none;
}

.jk-summary-product {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid #383838;
  font-size: 13px;
}

.jk-summary-product small {
  display: block;
  margin-top: 3px;
  color: #a8a8a8;
  font-size: 12px;
}

.jk-summary-product strong {
  font-weight: 500;
  white-space: nowrap;
}

.jk-summary-items {
  margin-bottom: 14px;
}

.jk-summary-assurance {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid #3c3c3c;
  color: #b2b2b2;
  font-size: 11px;
  line-height: 1.6;
}

.jk-summary-assurance svg {
  flex: none;
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
}

/* Summary tables (checkout review and cart totals) as the template's lines. */
.jk-checkout-summary table.shop_table,
.cart-collaterals .cart_totals table.shop_table {
  display: block;
  width: 100%;
  margin: 0;
  border: 0 !important;
  background: none;
}

.jk-checkout-summary table.shop_table thead {
  display: none;
}

.jk-checkout-summary table.shop_table tbody,
.jk-checkout-summary table.shop_table tfoot,
.cart-collaterals .cart_totals table.shop_table tbody {
  display: block;
}

.jk-checkout-summary table.shop_table tr,
.cart-collaterals .cart_totals table.shop_table tr {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.jk-checkout-summary table.shop_table th,
.jk-checkout-summary table.shop_table td,
.cart-collaterals .cart_totals table.shop_table th,
.cart-collaterals .cart_totals table.shop_table td {
  display: block;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  color: #c6c6c6;
  font-family: var(--jk-body);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.jk-checkout-summary table.shop_table td:last-child,
.cart-collaterals .cart_totals table.shop_table td {
  text-align: right;
}

.cart-collaterals .cart_totals table.shop_table td::before {
  display: none !important;
}

/* Product lines. */
.jk-checkout-summary tr.cart_item {
  padding: 11px 0;
  border-bottom: 1px solid #383838;
}

.jk-checkout-summary tr.cart_item td {
  color: var(--jk-text) !important;
}

.jk-checkout-summary .product-name {
  min-width: 0;
  overflow-wrap: anywhere;
}

.jk-checkout-summary .jk-line-meta {
  display: block;
  margin-top: 3px;
  color: #a8a8a8;
  font-size: 12px;
  font-weight: 400;
}

.jk-checkout-summary .product-total {
  font-weight: 500 !important;
  white-space: nowrap;
}

/* Subtotal, shipping, discounts, fees, taxes. */
.jk-checkout-summary tfoot tr,
.cart-collaterals .cart_totals tr {
  margin: 11px 0;
}

.jk-checkout-summary tfoot tr:first-child {
  margin-top: 24px;
}

.jk-checkout-summary tr.woocommerce-shipping-totals td,
.cart-collaterals tr.woocommerce-shipping-totals td {
  font-size: 12px !important;
}

/* Only the chosen shipping method in the card; it is picked on step 03. */
.jk-checkout-summary #shipping_method,
.cart-collaterals #shipping_method {
  margin: 0;
  padding: 0;
  list-style: none;
}

.jk-checkout-summary #shipping_method li,
.cart-collaterals #shipping_method li {
  margin: 0;
  padding: 0;
  text-indent: 0;
}

.jk-checkout-summary #shipping_method li:has(input[type="radio"]):not(:has(input:checked)),
.cart-collaterals #shipping_method li:has(input[type="radio"]):not(:has(input:checked)) {
  display: none;
}

.jk-checkout-summary #shipping_method input,
.cart-collaterals #shipping_method input {
  display: none;
}

.jk-checkout-summary #shipping_method label,
.cart-collaterals #shipping_method label {
  display: inline;
  margin: 0;
  color: #c6c6c6;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.cart-collaterals .woocommerce-shipping-destination,
.cart-collaterals .woocommerce-shipping-calculator,
.cart-collaterals .woocommerce-shipping-contents {
  display: none;
}

/* The total. */
.jk-checkout-summary tr.order-total,
.cart-collaterals tr.order-total {
  align-items: center;
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--jk-accent-line);
}

.jk-checkout-summary tr.order-total th,
.cart-collaterals tr.order-total th {
  color: var(--jk-text) !important;
  font-size: 16px !important;
}

.jk-checkout-summary tr.order-total td,
.cart-collaterals tr.order-total td,
.jk-checkout-summary tr.order-total td strong,
.cart-collaterals tr.order-total td strong {
  color: var(--jk-text) !important;
  font-family: var(--jk-body) !important;
  font-size: 27px !important;
  font-weight: 700 !important;
  line-height: 1.2;
}

.jk-checkout-summary tr.order-total small,
.cart-collaterals tr.order-total small {
  display: block;
  color: #a3a3a3;
  font-size: 11px !important;
  font-weight: 400 !important;
}

/* ── Cart page ── */

body.woocommerce-cart .cart-collaterals {
  float: none;
}

body.woocommerce-cart .cart-collaterals .cart_totals {
  float: none;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

body.woocommerce-cart .cart_totals > h2:not(.jk-summary-title) {
  display: none;
}

body.woocommerce-cart .wc-proceed-to-checkout {
  padding: 0;
}

/* The big button lives in the left card, as in the template; anything a
   payment plugin adds here (express buttons) stays. */
body.woocommerce-cart .jk-cart-layout .wc-proceed-to-checkout .checkout-button {
  display: none;
}

.jk-cart-panel .woocommerce-cart-form {
  margin: 0 0 24px;
}

.jk-cart-panel .woocommerce-cart-form table.shop_table.cart tbody {
  gap: 0;
}

.jk-cart-panel .woocommerce-cart-form table.shop_table.cart tr.cart_item {
  grid-template-columns: 75px minmax(90px, 1fr) 105px auto;
  grid-template-areas: "thumb name qty total";
  gap: 13px;
  padding: 18px 0;
  border: 0;
  border-bottom: 1px solid var(--jk-line);
  border-radius: 0;
  background: none;
}

.jk-cart-panel .woocommerce-cart-form tr.cart_item:first-child {
  padding-top: 0;
}

.jk-cart-panel .woocommerce-cart-form .cart_item .product-remove {
  display: none !important;
}

.jk-cart-panel .woocommerce-cart-form .cart_item .product-thumbnail img {
  width: 75px;
  height: auto;
  aspect-ratio: 218 / 123;
  object-fit: cover;
  border: 1px solid #343434;
  background: #0c0c0c;
}

.jk-cart-panel .woocommerce-cart-form .cart_item .product-name {
  min-width: 0;
}

.jk-cart-panel .jk-cart-name,
.jk-cart-panel .jk-cart-name a {
  display: block;
  color: var(--jk-text);
  font-size: 14px;
  font-weight: 600;
}

.jk-cart-panel .jk-cart-dose {
  display: block;
  color: #b2b2b2;
  font-size: 12px;
}

.jk-cart-panel .product-name dl.variation {
  margin: 2px 0 0;
  color: #b2b2b2;
  font-size: 12px;
}

.jk-cart-panel a.jk-cart-remove {
  display: inline-block;
  margin-top: 8px;
  color: var(--jk-accent-line);
  font-size: 11px;
  font-weight: 400;
}

.jk-cart-panel a.jk-cart-remove:hover {
  color: #fff;
}

.jk-cart-panel .cart_item .product-quantity .quantity.jk-stepper {
  width: 105px;
  height: 36px;
  border-color: #525252;
  border-radius: 4px;
}

.jk-cart-panel .cart_item .product-quantity .quantity.jk-stepper .qty {
  width: 37px;
  min-height: 0;
  height: 100%;
  font-size: 13px;
}

.jk-cart-panel .cart_item .product-quantity .jk-step {
  width: 34px;
  font-size: 16px;
}

.jk-cart-panel .woocommerce-cart-form .cart_item .product-subtotal {
  min-width: 0;
  font-family: var(--jk-body);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

/* Coupon row, quietly under the items. */
.jk-cart-panel .woocommerce-cart-form table.shop_table.cart td.actions {
  padding: 18px 0 0 !important;
}

.jk-cart-panel td.actions .coupon .input-text,
.jk-cart-panel td.actions .coupon .button {
  min-height: 42px;
}

.jk-cart-panel td.actions .coupon .button {
  padding: 10px 18px;
  border: 1px solid #525252;
  background: transparent;
  color: var(--jk-text);
  font-size: 11px;
  letter-spacing: 1px;
}

.jk-cart-panel td.actions .coupon .button:hover {
  border-color: var(--jk-accent-line);
  background: #232323;
}

/* Quantities update by themselves; the button stays for the form. */
body.jk-cart-auto .jk-cart-panel button[name="update_cart"] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0);
  border: 0 !important;
}

.jk-underlined-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid #767676;
  color: var(--jk-text);
  font-size: 14px;
}

.jk-underlined-link:hover {
  color: #fff;
  border-color: #fff;
}

.jk-panel .jk-step-next {
  display: flex !important;
  gap: 16px;
  width: 100%;
  min-height: 54px;
  margin: 25px 0 0;
  background-image: linear-gradient(100deg, var(--jk-accent), color-mix(in srgb, var(--jk-accent) 72%, #000));
  border-color: color-mix(in srgb, var(--jk-accent) 82%, #fff);
  border-radius: 3px;
  font-size: 12px;
  letter-spacing: 1.8px;
  color: var(--jk-on-accent);
}

.jk-panel .jk-step-next svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.35;
}

.jk-panel .jk-step-next:hover {
  filter: brightness(1.15);
}

/* ── Checkout ── */

body.woocommerce-checkout form.woocommerce-checkout > .woocommerce-NoticeGroup {
  grid-column: 1 / -1;
}

.jk-checkout-main {
  display: grid;
  gap: 22px;
  min-width: 0;
}

.jk-checkout-main .jk-panel #customer_details,
.jk-checkout-main #customer_details {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

.jk-checkout-main #customer_details .col-1,
.jk-checkout-main #customer_details .col-2 {
  float: none;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

.jk-checkout-main #customer_details .col-2 {
  margin-top: 10px;
}

/* The card already says "Your details". */
.jk-checkout-main .woocommerce-billing-fields > h3 {
  display: none;
}

.jk-checkout-main #customer_details h3,
.jk-legend,
.jk-ship-fieldset legend {
  margin: 10px 0 14px;
  padding: 0;
  font-family: var(--jk-body);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.jk-checkout-main #ship-to-different-address label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

/* Fields as in the template: plain labels, dark inputs. */
.jk-checkout-main .form-row {
  margin: 0 0 18px !important;
  padding: 0 !important;
}

.jk-checkout-main .form-row label {
  display: block;
  margin: 0 0 8px;
  color: #cdcdcd;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.4;
  text-transform: none;
}

.jk-checkout-main .form-row label.checkbox,
.jk-checkout-main .form-row label.woocommerce-form__label-for-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
}

body .jk-checkout-main .form-row .input-text,
body .jk-checkout-main .form-row input[type="text"],
body .jk-checkout-main .form-row input[type="email"],
body .jk-checkout-main .form-row input[type="tel"],
body .jk-checkout-main .form-row textarea,
body .jk-checkout-main .form-row select,
body .jk-checkout-main .select2-container .select2-selection--single {
  width: 100%;
  min-height: 46px;
  padding: 12px 13px;
  border: 1px solid #484848 !important;
  border-radius: 3px !important;
  background: #0c0c0c !important;
  color: #fff !important;
  font-family: var(--jk-body);
  font-size: 14px;
  line-height: 1.4;
  box-shadow: none !important;
}

body .jk-checkout-main .form-row textarea {
  min-height: 90px;
}

body .jk-checkout-main .select2-container .select2-selection--single {
  display: flex;
  align-items: center;
  height: 46px;
  padding: 0 13px;
}

body .jk-checkout-main .select2-container .select2-selection__rendered {
  padding: 0 !important;
  color: #fff !important;
  line-height: 1.4 !important;
}

body .jk-checkout-main .select2-container .select2-selection__arrow {
  top: 50% !important;
  transform: translateY(-50%);
}

body .jk-checkout-main .form-row .input-text:focus,
body .jk-checkout-main .form-row select:focus,
body .jk-checkout-main .select2-container--focus .select2-selection--single,
body .jk-checkout-main .select2-container--open .select2-selection--single {
  border-color: var(--jk-accent-line) !important;
  outline: none;
}

body .jk-checkout-main .form-row.woocommerce-invalid .input-text,
body .jk-checkout-main .form-row.woocommerce-invalid select,
body .jk-checkout-main .form-row.woocommerce-invalid .select2-selection--single {
  border-color: #d98e8e !important;
}

.jk-checkout-main .form-row input::placeholder,
.jk-checkout-main .form-row textarea::placeholder {
  color: #828282;
}

/* Two fields in a row where WooCommerce pairs them. */
.jk-checkout-main .woocommerce-billing-fields__field-wrapper,
.jk-checkout-main .woocommerce-shipping-fields__field-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 18px;
}

.jk-checkout-main .woocommerce-billing-fields__field-wrapper > *,
.jk-checkout-main .woocommerce-shipping-fields__field-wrapper > * {
  grid-column: 1 / -1;
  float: none !important;
  width: auto !important;
}

.jk-checkout-main .woocommerce-billing-fields__field-wrapper > .form-row-first,
.jk-checkout-main .woocommerce-shipping-fields__field-wrapper > .form-row-first {
  grid-column: 1;
}

.jk-checkout-main .woocommerce-billing-fields__field-wrapper > .form-row-last,
.jk-checkout-main .woocommerce-shipping-fields__field-wrapper > .form-row-last {
  grid-column: 2;
}

.jk-checkout-main .woocommerce-billing-fields__field-wrapper::before,
.jk-checkout-main .woocommerce-billing-fields__field-wrapper::after,
.jk-checkout-main .woocommerce-shipping-fields__field-wrapper::before,
.jk-checkout-main .woocommerce-shipping-fields__field-wrapper::after {
  display: none;
}

/* Steps: only the one on screen. */
.jk-checkout-main.js-steps [data-jk-panel]:not(.is-current) {
  display: none !important;
}

.jk-checkout-main.js-steps[data-jk-step="1"] .jk-pay-panel {
  display: none;
}

/* Step 03 chooses the payment method; step 04 shows the chosen one again
   (its fields, if the gateway has any, stay where it put them) with the
   terms and Place order. */
.jk-checkout-main.js-steps[data-jk-step="2"] #payment .place-order {
  display: none !important;
}

.jk-checkout-main.js-steps[data-jk-step="3"] #payment .wc_payment_methods > li:not(:has(> input:checked)) {
  display: none;
}

.jk-checkout-main.js-steps[data-jk-step="3"] #payment .wc_payment_methods > li:has(> input[type="hidden"]) {
  display: block;
}

.jk-ship-fieldset {
  min-width: 0;
  margin: 0 0 27px;
  padding: 0;
  border: 0;
}

.jk-choice,
.jk-pay-panel #payment ul.payment_methods > li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 13px;
  margin: 0 0 10px;
  padding: 17px 14px;
  border: 1px solid #3c3c3c;
  border-radius: 3px;
  background: #0e0e0e;
  cursor: pointer;
  list-style: none;
}

.jk-choice:has(input:checked),
.jk-pay-panel #payment ul.payment_methods > li:has(> input:checked) {
  border-color: var(--jk-accent-line);
  background: #222222;
}

.jk-choice input,
.jk-pay-panel #payment ul.payment_methods > li > input {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: var(--jk-accent);
}

.jk-choice > span {
  flex: 1;
  min-width: 0;
}

.jk-choice strong {
  display: block;
  font-size: 14px;
  font-weight: 500;
}

.jk-choice b {
  font-size: 14px;
  font-weight: 400;
  white-space: nowrap;
}

.jk-pay-panel #payment {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

.jk-pay-panel #payment ul.payment_methods {
  margin: 0;
  padding: 0;
  border: 0;
}

.jk-pay-panel #payment ul.payment_methods > li > label {
  flex: 1;
  margin: 0;
  color: var(--jk-text);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
}

.jk-pay-panel #payment ul.payment_methods > li > label img {
  max-height: 22px;
  margin: 0 0 0 8px;
  vertical-align: middle;
}

.jk-pay-panel #payment div.payment_box {
  flex-basis: 100%;
  margin: 4px 0 0;
  padding: 12px 0 0 30px;
  border: 0;
  background: none;
  color: #acacac;
  font-size: 12px;
}

.jk-pay-panel #payment div.payment_box::before {
  display: none;
}

.jk-pay-panel #payment div.payment_box p {
  margin: 0;
}

.jk-pay-panel #payment .place-order {
  margin: 0;
  padding: 10px 0 0;
  border: 0;
  background: none;
}

.jk-pay-panel #payment .woocommerce-privacy-policy-text,
.jk-pay-panel #payment .woocommerce-terms-and-conditions-wrapper {
  color: #b1b1b1;
  font-size: 13px;
}

.jk-pay-panel #place_order {
  float: none;
  width: 100%;
  min-height: 54px;
  margin-top: 18px;
  background-image: linear-gradient(100deg, var(--jk-accent), color-mix(in srgb, var(--jk-accent) 72%, #000));
  border-color: color-mix(in srgb, var(--jk-accent) 82%, #fff);
  border-radius: 3px;
  font-size: 12px;
  letter-spacing: 1.8px;
  color: var(--jk-on-accent);
}

/* Back and next under each step. */
.jk-checkout-main .jk-step-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-top: 28px;
  padding: 0;
  border: 0;
}

.jk-checkout-main .jk-step-nav .jk-step-error {
  flex-basis: 100%;
  margin: 0;
  color: #f0a3a3;
  font-size: 13px;
}

.jk-checkout-main .jk-step-nav .jk-step-back {
  flex: none;
  min-height: 54px;
  padding: 13px 20px;
  border: 1px solid #525252 !important;
  border-radius: 3px;
  background: transparent !important;
  color: var(--jk-text) !important;
  font-size: 12px;
  letter-spacing: 1px;
}

.jk-checkout-main .jk-step-nav .jk-step-back:hover {
  border-color: var(--jk-accent-line) !important;
  background: #232323 !important;
}

.jk-checkout-main .jk-step-nav .jk-step-next {
  flex: 1;
  width: auto;
  margin: 0;
}

/* Details step: the first card has only "Back to cart"… */
.jk-checkout-main .jk-step-panel[data-jk-panel="1"] .jk-step-nav .jk-step-back {
  display: none;
}

/* …and on the last step Back sits above Place order's terms. */
.jk-checkout-main .jk-step-nav[data-jk-panel="3"] {
  margin-top: 16px;
}

/* Review. */
.jk-review-block {
  margin-bottom: 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid #3b3b3b;
}

.jk-review-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.jk-review-block h3 {
  margin: 0 0 10px;
  font-family: var(--jk-body);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.jk-text-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--jk-accent);
  font-size: 12px;
  cursor: pointer;
}

.jk-text-button:hover {
  color: var(--jk-accent-ink);
}

.jk-review-text {
  margin: 0;
  color: #bcbcbc;
  font-size: 14px;
  line-height: 1.8;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* The coupon and log-in prompts above the form, quieter. */
body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info,
body.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info {
  margin: 0 0 18px;
  font-size: 13px;
}

/* ── Smaller screens ── */

@media (max-width: 1100px) {
  .jk-order-layout,
  body.woocommerce-checkout form.woocommerce-checkout {
    grid-template-columns: minmax(0, 1.5fr) minmax(270px, 1fr);
    gap: 20px;
  }

  .jk-panel {
    padding: 22px;
  }

  .jk-checkout-summary,
  body.woocommerce-cart .cart-collaterals {
    padding: 20px;
  }
}

@media (max-width: 900px) {
  .jk-order-layout,
  body.woocommerce-checkout form.woocommerce-checkout {
    grid-template-columns: 1fr;
  }

  .jk-checkout-summary,
  body.woocommerce-cart .cart-collaterals {
    position: static;
  }

  .jk-order-steps li > * {
    flex-direction: column;
    gap: 6px;
    padding: 14px 4px;
    font-size: 11px;
    text-align: center;
  }
}

@media (max-width: 560px) {
  .jk-order-heading {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .jk-panel {
    padding: 18px;
  }

  .jk-panel-title h2 {
    font-size: 21px;
  }

  .jk-cart-panel .woocommerce-cart-form table.shop_table.cart tr.cart_item {
    grid-template-columns: 64px minmax(0, 1fr) auto;
    grid-template-areas:
      "thumb name total"
      "thumb qty qty";
    gap: 10px 12px;
  }

  .jk-cart-panel .woocommerce-cart-form .cart_item .product-thumbnail img {
    width: 64px;
  }

  .jk-checkout-main .woocommerce-billing-fields__field-wrapper,
  .jk-checkout-main .woocommerce-shipping-fields__field-wrapper {
    grid-template-columns: 1fr;
  }

  .jk-checkout-main .woocommerce-billing-fields__field-wrapper > .form-row-last,
  .jk-checkout-main .woocommerce-shipping-fields__field-wrapper > .form-row-last {
    grid-column: 1;
  }
}

/* 1.6.1 polish */
.jk-order-steps li[data-state="current"] > button:disabled {
  color: var(--jk-accent-ink);
}

.woocommerce-cart-form .cart_item .product-name .jk-cart-name a {
  color: var(--jk-text);
  font-size: 14px;
  font-weight: 600;
}

.woocommerce-cart-form .cart_item .product-name a.jk-cart-remove {
  display: inline-block;
  margin-top: 8px;
  color: var(--jk-accent-line);
  font-size: 11px;
  font-weight: 400;
}

.woocommerce-cart-form .cart_item .product-name a.jk-cart-remove:hover {
  color: #fff;
}

.jk-checkout-summary .product-name .jk-line-meta,
.jk-checkout-summary .product-name .product-quantity {
  display: block !important;
  margin-top: 3px;
  color: #a8a8a8 !important;
  font-size: 12px !important;
  font-weight: 400 !important;
}

.jk-checkout-summary table.shop_table th,
.jk-checkout-summary table.shop_table td,
.cart-collaterals .cart_totals table.shop_table th {
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.jk-checkout-summary tfoot td,
.jk-checkout-summary tfoot td strong,
.cart-collaterals .cart_totals td strong {
  font-weight: 400;
}

.jk-choice,
.jk-choice * {
  letter-spacing: 0;
  text-transform: none;
}

.jk-choice strong {
  color: var(--jk-text);
}

.jk-checkout-main .jk-step-nav[data-jk-panel="3"] {
  justify-content: flex-start;
}

.jk-review-block .jk-summary-product:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.jk-checkout-summary table.shop_table td.product-name {
  display: block !important;
}

@media (max-width: 900px) {
  body.woocommerce-checkout form.woocommerce-checkout > .jk-checkout-summary,
  .jk-checkout-summary {
    order: 2 !important;
  }

  body.woocommerce-checkout form.woocommerce-checkout > .jk-checkout-main {
    order: 1 !important;
  }
}

@media (max-width: 768px) {
  .jk-cart-panel .woocommerce-cart-form table.shop_table.cart tr.cart_item td {
    text-align: left !important;
  }

  .jk-cart-panel .woocommerce-cart-form table.shop_table.cart tr.cart_item {
    align-items: start;
  }

  .jk-cart-panel .woocommerce-cart-form .cart_item .product-subtotal {
    text-align: right !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   1.7.0 — Search: a compact card over a darkened page (header included)
   ═══════════════════════════════════════════════════════════════════════ */

.jk-overlay {
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

body:has(.jk-search-panel.is-open) .jk-overlay {
  background: rgb(6 6 6 / 0.8);
}

/* The header darkens with the page; only the card stays lit. */
.jk-header::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 54;
  background: rgb(6 6 6 / 0.8);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--jk-fade) ease;
}

body:has(.jk-search-panel.is-open) .jk-header::after {
  opacity: 1;
}

.jk-search-panel {
  left: 50%;
  right: auto;
  width: min(680px, calc(100% - 32px));
  margin-top: 14px;
  padding: 0;
  border: 1px solid #454545;
  border-radius: 8px;
  background: linear-gradient(145deg, #222222, #121212);
  box-shadow:
    0 40px 90px -20px rgb(0 0 0 / 0.9),
    0 0 0 1px rgb(255 255 255 / 0.02) inset;
  transform: translate(-50%, -10px) scale(0.98);
  overflow: hidden;
}

.jk-search-panel.is-open {
  transform: translate(-50%, 0) scale(1);
}

.jk-search-panel .jk-container {
  width: auto;
  max-width: none;
  margin: 0;
  padding: 16px 18px 0;
}

/* Loading line: along the top edge of the card. */
.jk-search-panel .jk-container::after {
  top: 0;
  left: 0;
  right: 0;
}

.jk-search-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.jk-search-kicker {
  color: #9b9b9b;
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.jk-search-close {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin: -6px -8px -6px 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: #aeaeae;
  cursor: pointer;
}

.jk-search-close:hover {
  background: rgb(255 255 255 / 0.06);
  color: #fff;
}

.jk-search-close svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

/* The field: one line, magnifier on the left, a small button on the right. */
.jk-search-panel .woocommerce-product-search,
.jk-search-panel .search-form {
  position: relative;
  align-items: center;
  gap: 10px;
  padding: 0 0 14px;
  border-bottom: 1px solid #3d3d3d;
}

.jk-search-panel .woocommerce-product-search::before,
.jk-search-panel .search-form::before {
  content: "";
  position: absolute;
  left: 14px;
  top: calc(50% - 7px);
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  background: currentColor;
  color: #a3a3a3;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='10' cy='10' r='6.5'/%3E%3Cpath d='m15 15 6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='10' cy='10' r='6.5'/%3E%3Cpath d='m15 15 6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  pointer-events: none;
}

.jk-search-panel .woocommerce-product-search label,
.jk-search-panel .search-form label {
  flex: 1;
  min-width: 0;
}

.jk-search-panel input[type="search"] {
  flex: 1;
  width: 100%;
  min-width: 0;
  min-height: 50px;
  padding: 0 14px 0 46px;
  border: 1px solid #484848;
  border-radius: 6px;
  background: #0c0c0c;
  color: #fff;
  font-size: 17px;
  box-shadow: none;
  transition: border-color var(--jk-quick) ease, box-shadow var(--jk-quick) ease;
}

.jk-search-panel input[type="search"]:focus {
  border-color: var(--jk-accent-line);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--jk-accent) 15%, transparent);
}

.jk-search-panel input[type="search"]::-webkit-search-cancel-button {
  filter: invert(0.7);
}

.jk-search-panel .woocommerce-product-search button,
.jk-search-panel .search-form .search-submit {
  min-height: 50px;
  padding: 0 20px;
  border-radius: 6px;
  font-size: 11px;
  letter-spacing: 0.14em;
}

/* Results: a tidy list inside the card, one column. */
.jk-search-panel .jk-search-results {
  margin: 0 -18px;
  border: 0;
  background: none;
}

.jk-search-panel .jk-search-results.is-open {
  max-height: min(60vh, 520px);
  margin-top: 0;
  border: 0;
}

.jk-search-panel .jk-search-cols {
  grid-template-columns: 1fr;
}

.jk-search-panel .jk-search-group + .jk-search-group {
  border-left: 0;
  border-top: 1px solid #303030;
}

.jk-search-panel .jk-search-group-title {
  padding: 14px 18px 6px;
  color: #929292;
  font-size: 10.5px;
  letter-spacing: 3px;
}

.jk-search-panel .jk-search-item {
  gap: 14px;
  margin: 0 8px;
  padding: 9px 10px;
  border-radius: 6px;
}

.jk-search-panel .jk-search-item:hover,
.jk-search-panel .jk-search-item:focus {
  padding-left: 10px;
  background: color-mix(in srgb, var(--jk-accent) 12%, transparent);
  outline: none;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--jk-accent-line) 45%, transparent);
}

.jk-search-panel .jk-search-item::after {
  content: "→";
  margin-left: auto;
  color: #898989;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--jk-quick) ease, transform var(--jk-quick) ease;
}

.jk-search-panel .jk-search-item:hover::after,
.jk-search-panel .jk-search-item:focus::after {
  opacity: 1;
  transform: none;
}

.jk-search-panel .jk-search-thumb {
  width: 46px;
  height: 46px;
  overflow: hidden;
  border: 1px solid #343434;
  border-radius: 5px;
  background: #0c0c0c;
}

.jk-search-panel .jk-search-item--post .jk-search-thumb {
  width: 60px;
  height: 42px;
}

.jk-search-panel .jk-search-title {
  font-size: 14px;
  font-weight: 600;
}

.jk-search-panel .jk-search-meta {
  color: var(--jk-accent);
  font-size: 12.5px;
}

.jk-search-panel .jk-search-all,
.jk-search-panel .jk-search-empty {
  margin-top: 8px;
  padding: 13px 18px;
  border-top: 1px solid #303030;
  color: var(--jk-accent);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-align: right;
}

.jk-search-panel .jk-search-empty {
  color: #b1b1b1;
  letter-spacing: 0;
  font-size: 13px;
  text-transform: none;
  text-align: center;
}

.jk-search-panel .jk-search-all:hover {
  color: #fff;
}

/* Keyboard hints along the bottom of the card (hidden on touch screens). */
.jk-search-hints {
  display: flex;
  gap: 18px;
  margin: 0 -18px;
  padding: 11px 18px;
  border-top: 1px solid #303030;
  background: rgb(0 0 0 / 0.18);
  color: #929292;
  font-size: 11.5px;
}

.jk-search-hints kbd {
  display: inline-block;
  min-width: 20px;
  margin-right: 3px;
  padding: 1px 6px;
  border: 1px solid #474747;
  border-bottom-width: 2px;
  border-radius: 4px;
  background: #171717;
  color: #cdcdcd;
  font-family: inherit;
  font-size: 10.5px;
  text-align: center;
}

@media (hover: none), (max-width: 640px) {
  .jk-search-hints {
    display: none;
  }

  .jk-search-panel .jk-container {
    padding-bottom: 4px;
  }
}

@media (max-width: 640px) {
  .jk-search-panel {
    width: calc(100% - 20px);
    margin-top: 10px;
  }

  .jk-search-panel .jk-container {
    padding: 14px 14px 4px;
  }

  .jk-search-panel .jk-search-results {
    margin: 0 -14px;
  }

  .jk-search-panel .woocommerce-product-search button,
  .jk-search-panel .search-form .search-submit {
    display: none;
  }

  .jk-search-panel input[type="search"] {
    font-size: 16px;
  }

  .jk-search-panel .jk-search-results.is-open {
    max-height: 65vh;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   1.7.0 — Specification table in the Description tab, text flowing round it
   ═══════════════════════════════════════════════════════════════════════ */

.jk-detail {
  display: flow-root;
}

.jk-detail .jk-detail-text {
  max-width: none;
}

.jk-tpl.single-product .jk-detail .jk-detail-title {
  margin-top: 0;
}

.jk-spec-card--float {
  float: right;
  width: min(440px, 44%);
  margin: 0 0 28px 48px;
}

.jk-spec-card--full {
  width: 100%;
}

/* Lists and tables in the text keep clear of the card instead of running
   their bullets or borders underneath it. */
.jk-detail.has-specs .jk-detail-text :is(ul, ol, table, pre, blockquote, figure) {
  overflow: auto;
}

.jk-spec-card {
  border-radius: 4px;
}

.jk-tpl .jk-spec-card caption {
  font-size: 16px;
}

@media (max-width: 860px) {
  /* On a phone the text comes first and the card follows, full width. */
  .jk-detail.has-specs {
    display: flex;
    flex-direction: column;
  }

  .jk-spec-card--float {
    order: 2;
    float: none;
    width: 100%;
    margin: 24px 0 0;
  }
}

/* 1.7.2: product tabs never scroll — they wrap onto a second line if they
   do not fit (the template's generic .tabs rule had overflow: auto, which
   showed a scrollbar beside the tab names). */
.jk-tpl .woocommerce-tabs ul.tabs,
.jk-tpl.single-product div.product .woocommerce-tabs ul.tabs {
  flex-wrap: wrap;
  overflow: visible !important;
  scrollbar-width: none;
}

.jk-tpl .woocommerce-tabs ul.tabs::-webkit-scrollbar {
  display: none;
}

@media (max-width: 560px) {
  .jk-tpl.single-product div.product .woocommerce-tabs ul.tabs {
    gap: 0 18px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   1.7.3 — Dropdown menus
   ═══════════════════════════════════════════════════════════════════════ */

/* A small chevron beside every top item that has a dropdown. */
.jk-menu > .menu-item-has-children > a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.jk-menu > .menu-item-has-children > a::after,
.jk-sub-toggle::before {
  content: "";
  width: 9px;
  height: 9px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2 4 4 4 4-4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2 4 4 4 4-4'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--jk-quick) ease;
}

.jk-menu > .menu-item-has-children:hover > a::after,
.jk-menu > .menu-item-has-children:focus-within > a::after {
  transform: rotate(180deg);
}

/* The dropdown: a card like the search and order cards. */
.jk-menu .sub-menu {
  top: calc(100% + 8px);
  left: -18px;
  z-index: 60;
  min-width: 250px;
  padding: 8px;
  border: 1px solid #454545;
  border-radius: 8px;
  background: linear-gradient(145deg, #222222, #121212);
  box-shadow: 0 30px 60px -20px rgb(0 0 0 / 0.9);
  transform: translateY(8px);
  transition: opacity var(--jk-quick) ease, transform var(--jk-quick) var(--jk-ease), visibility var(--jk-quick);
}

/* An invisible bridge over the gap, so the pointer can travel down to the
   card without it closing. */
.jk-menu .sub-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -12px;
  height: 12px;
}

.jk-menu .sub-menu li {
  position: relative;
}

.jk-menu .sub-menu a {
  padding: 10px 12px;
  border-radius: 5px;
  color: #c6c6c6;
  font-size: 12px;
  letter-spacing: 0.1em;
  white-space: nowrap;
  box-shadow: none !important;
  transition: background var(--jk-quick) ease, color var(--jk-quick) ease;
}

.jk-menu .sub-menu a:hover,
.jk-menu .sub-menu a:focus-visible,
.jk-menu .sub-menu .current-menu-item > a {
  background: color-mix(in srgb, var(--jk-accent) 12%, transparent);
  color: #fff;
}

.jk-menu .sub-menu .current-menu-item > a {
  box-shadow: inset 2px 0 0 var(--jk-accent) !important;
}

/* A dropdown near the right edge opens leftwards. */
.jk-menu > li:last-child > .sub-menu,
.jk-menu > li:nth-last-child(2) > .sub-menu {
  left: auto;
  right: -18px;
}

/* ── Phone drawer: dropdowns fold open with an arrow button ── */

.jk-drawer-menu .menu-item-has-children {
  position: relative;
}

.jk-drawer-menu .menu-item-has-children > a {
  padding-right: 52px;
}

.jk-sub-toggle {
  position: absolute;
  top: 0;
  right: 0;
  display: grid;
  place-items: center;
  width: 46px;
  height: 50px;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--jk-line);
  background: none;
  color: var(--jk-muted);
  cursor: pointer;
}

.jk-sub-toggle::before {
  width: 12px;
  height: 12px;
}

.jk-sub-toggle[aria-expanded="true"] {
  color: var(--jk-text);
}

.jk-sub-toggle[aria-expanded="true"]::before {
  transform: rotate(180deg);
}

.jk-drawer-menu.js-subs .sub-menu {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--jk-slide) var(--jk-ease);
}

.jk-drawer-menu.js-subs .is-open > .sub-menu {
  /* No cap: long lists (all subcategories) must show in full. */
  max-height: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   1.8.0 — Sign in / Create account (My account page and pop-up)
   ═══════════════════════════════════════════════════════════════════════ */

.jk-auth-card {
  padding: 30px;
  border: 1px solid #454545;
  border-radius: 8px;
  background: linear-gradient(145deg, #222222, #121212);
  box-shadow: 0 40px 90px -30px rgb(0 0 0 / 0.9);
}

/* Tabs. */
.jk-auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin: 0 0 24px;
  padding: 4px;
  border: 1px solid #3d3d3d;
  border-radius: 6px;
  background: #0c0c0c;
}

.jk-auth-tabs button {
  min-height: 42px;
  padding: 8px 12px;
  border: 0;
  border-radius: 4px;
  background: none;
  color: #9f9f9f;
  font-family: var(--jk-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--jk-quick) ease, color var(--jk-quick) ease;
}

.jk-auth-tabs button:hover {
  color: #fff;
}

.jk-auth-tabs button[aria-selected="true"] {
  background: linear-gradient(100deg, var(--jk-accent), color-mix(in srgb, var(--jk-accent) 72%, #000));
  color: var(--jk-on-accent);
}

.jk-auth-lead {
  margin: 0 0 20px;
  color: #b1b1b1;
  font-size: 14px;
}

/* Fields, as on the checkout. */
.jk-auth .form-row {
  margin: 0 0 16px !important;
  padding: 0 !important;
}

.jk-auth .form-row label {
  display: block;
  margin: 0 0 8px;
  color: #cdcdcd;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.jk-auth .required {
  color: #e98f8f;
}

body .jk-auth input.input-text {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid #484848 !important;
  border-radius: 6px !important;
  background: #0c0c0c !important;
  color: #fff !important;
  font-family: var(--jk-body);
  font-size: 15px;
  box-shadow: none !important;
  transition: border-color var(--jk-quick) ease, box-shadow var(--jk-quick) ease;
}

body .jk-auth input.input-text:focus {
  border-color: var(--jk-accent-line) !important;
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--jk-accent) 15%, transparent) !important;
}

.jk-password,
.jk-auth .password-input {
  position: relative;
  display: block;
  width: 100%;
}

.jk-auth .jk-password input,
.jk-auth .password-input input {
  padding-right: 48px !important;
}

.jk-pass-toggle,
.jk-auth .show-password-input {
  position: absolute !important;
  top: 50% !important;
  right: 6px !important;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin: 0 !important;
  padding: 0 !important;
  border: 0;
  border-radius: 4px;
  background: none;
  color: #a3a3a3;
  transform: translateY(-50%);
  cursor: pointer;
}

.jk-pass-toggle::before {
  content: "";
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
}

.jk-pass-toggle.is-on,
.jk-pass-toggle:hover,
.jk-auth .show-password-input:hover {
  color: #fff;
}

.jk-auth .show-password-input::after {
  filter: invert(0.75);
}

.jk-auth-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 4px 0 22px;
  font-size: 13px;
}

.jk-auth-row label {
  display: inline-flex !important;
  align-items: center;
  gap: 9px;
  margin: 0 !important;
  color: #cdcdcd;
  font-size: 13px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  cursor: pointer;
}

.jk-auth-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--jk-accent);
}

.jk-auth-lost {
  color: var(--jk-accent);
  font-size: 13px;
}

.jk-auth-lost:hover {
  color: #fff;
}

.jk-auth-note {
  margin: 0 0 16px;
  color: #b1b1b1;
  font-size: 13px;
}

.jk-auth .woocommerce-privacy-policy-text {
  margin: 0 0 18px;
  color: #a3a3a3;
  font-size: 12px;
  line-height: 1.6;
}

.jk-auth .woocommerce-privacy-policy-text p {
  margin: 0;
}

.jk-auth .jk-auth-submit {
  display: flex !important;
  gap: 14px;
  width: 100%;
  min-height: 52px;
  margin: 0;
  border-color: color-mix(in srgb, var(--jk-accent) 82%, #fff);
  border-radius: 6px;
  background-image: linear-gradient(100deg, var(--jk-accent), color-mix(in srgb, var(--jk-accent) 72%, #000));
  font-size: 12px;
  letter-spacing: 1.8px;
  color: var(--jk-on-accent);
}

.jk-auth .jk-auth-submit svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
}

.jk-auth .jk-auth-submit:hover {
  filter: brightness(1.15);
}

.jk-auth .jk-auth-submit.loading {
  opacity: 0.7;
}

.jk-auth-switch {
  margin: 18px 0 0;
  color: #a3a3a3;
  font-size: 13px;
  text-align: center;
}

.jk-auth-switch .jk-text-button {
  font-size: 13px;
}

.jk-auth-errors {
  margin: 0 0 18px;
  padding: 12px 14px;
  border: 1px solid rgb(217 142 142 / 0.45);
  border-radius: 6px;
  background: rgb(217 142 142 / 0.08);
  color: #f0b4b4;
  font-size: 13px;
}

.jk-auth-errors ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.jk-auth-errors li + li {
  margin-top: 4px;
}

/* ── The My account page (signed out) ── */

.jk-auth-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
  gap: clamp(32px, 6vw, 90px);
  align-items: center;
  max-width: 1080px;
  margin: 30px auto 60px;
}

.jk-auth-intro .jk-eyebrow {
  margin: 0 0 10px;
  color: #9b9b9b;
  font-size: 13px;
  letter-spacing: 4px;
  text-transform: uppercase;
}

.jk-auth-intro h1 {
  margin: 0 0 14px;
  font-family: var(--jk-body);
  font-size: clamp(30px, 3.4vw, 44px);
  font-weight: 700;
  letter-spacing: -0.8px;
  line-height: 1.12;
  text-transform: none;
}

.jk-auth-intro > p {
  max-width: 44ch;
  margin: 0 0 30px;
  color: #b8b8b8;
  font-size: 16px;
}

.jk-auth-perks {
  display: grid;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.jk-auth-perks li {
  display: flex;
  align-items: center;
  gap: 18px;
}

.jk-auth-perks svg {
  flex: none;
  width: 40px;
  height: 40px;
  padding: 8px;
  border: 1px solid #3d3d3d;
  border-radius: 8px;
  background: #121212;
  color: var(--jk-accent-ink);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.35;
}

.jk-auth-perks strong {
  display: block;
  color: var(--jk-text);
  font-size: 15px;
  font-weight: 600;
}

.jk-auth-perks span {
  color: #a8a8a8;
  font-size: 13.5px;
}

/* WooCommerce's usual two columns are not used here. */
.jk-auth-page.col2-set::before,
.jk-auth-page.col2-set::after {
  display: none;
}

@media (max-width: 860px) {
  .jk-auth-page {
    grid-template-columns: 1fr;
    margin-top: 10px;
  }

  .jk-auth-page .jk-auth-card {
    order: -1;
  }

  .jk-auth-intro {
    order: 1;
  }

  .jk-auth-intro h1,
  .jk-auth-intro > p,
  .jk-auth-intro .jk-eyebrow {
    display: none;
  }
}

@media (max-width: 480px) {
  .jk-auth-card {
    padding: 22px 18px;
  }
}

/* ── The pop-up ── */

.jk-auth-modal {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: grid;
  place-items: center;
  padding: 20px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--jk-fade) ease, visibility 0s linear var(--jk-fade);
}

.jk-auth-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity var(--jk-fade) ease, visibility 0s;
}

.jk-auth-modal .jk-auth-card {
  position: relative;
  width: min(440px, 100%);
  transform: translateY(14px) scale(0.98);
  transition: transform var(--jk-slide) var(--jk-ease);
}

.jk-auth-modal.is-open .jk-auth-card {
  transform: none;
}

.jk-auth-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}

.jk-auth-head .jk-eyebrow {
  margin: 0 0 6px;
  color: #9b9b9b;
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.jk-auth-head h2 {
  margin: 0;
  font-family: var(--jk-body);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.3px;
  text-transform: none;
}

/* The shade: clicking beside the card closes it (the page's own shade sits
   under the card's layer, so the modal lets clicks through to it). */
.jk-auth-modal {
  pointer-events: none;
}

.jk-auth-modal.is-open .jk-auth-card {
  pointer-events: auto;
}

body:has(.jk-auth-modal.is-open) .jk-overlay {
  z-index: 90;
  background: rgb(6 6 6 / 0.8);
}

.jk-auth-modal.is-open {
  pointer-events: none;
}

.jk-auth-modal .jk-auth-card {
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
}

.jk-auth form.jk-auth-panel,
.woocommerce .jk-auth form.login,
.woocommerce .jk-auth form.register {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  text-align: left;
}

.jk-auth form.jk-auth-panel[hidden] {
  display: none !important;
}

.jk-auth .jk-auth-switch {
  margin-top: 18px !important;
}

@media (max-width: 420px) {
  .jk-auth-tabs button {
    font-size: 11px;
    letter-spacing: 0.08em;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   1.9.0 — Blog cards
   ═══════════════════════════════════════════════════════════════════════ */

.jk-post-grid {
  gap: 24px;
}

.jk-post-card {
  min-width: 0;
}

.jk-post-card-link {
  overflow: hidden;
  border: 1px solid #363636;
  border-radius: 6px;
  background: linear-gradient(135deg, #101010, #0b0b0b);
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.jk-post-card-link:hover {
  border-color: var(--jk-accent-line);
  transform: translateY(-3px);
  box-shadow: 0 24px 40px -24px rgb(0 0 0 / 0.9);
}

.jk-post-card-media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: #0a0a0a;
}

.jk-post-card-media img {
  transition: transform 0.6s var(--jk-ease);
}

.jk-post-card-link:hover .jk-post-card-media img {
  transform: scale(1.05);
}

/* No picture: a quiet panel with the brand's flask. */
.jk-post-card-media.is-empty {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 70% 30%, color-mix(in srgb, var(--jk-accent) 18%, transparent), transparent 60%),
    linear-gradient(145deg, #222222, #121212);
}

.jk-post-card-media.is-empty svg {
  width: 44px;
  height: 44px;
  color: var(--jk-accent-line);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
}

.jk-post-card-cat {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 4px 10px;
  border: 1px solid var(--jk-accent-line);
  border-radius: 999px;
  background: rgb(12 12 12 / 0.82);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  color: var(--jk-accent-ink);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.jk-post-card-body {
  flex: 1;
  gap: 8px;
  padding: 18px 20px 20px;
}

.jk-post-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: #929292;
  font-size: 12px;
}

.jk-post-card-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.2px;
}

.jk-post-card-excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  color: #b1b1b1;
}

.jk-post-card-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
  color: var(--jk-accent);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.jk-post-card-more svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  transition: transform var(--jk-quick) ease;
}

.jk-post-card-link:hover .jk-post-card-more {
  color: #fff;
}

.jk-post-card-link:hover .jk-post-card-more svg {
  transform: translateX(4px);
}

/* "More from the blog" under a post. */
.jk-more-posts {
  margin-top: 70px;
  padding: 60px 0 10px;
  border-top: 1px solid var(--jk-line);
}

/* ═══════════════════════════════════════════════════════════════════════
   1.9.0 — Newsletter
   ═══════════════════════════════════════════════════════════════════════ */

.jk-newsletter {
  position: relative;
  max-width: 520px;
}

.jk-nl-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.jk-nl-row {
  display: flex;
  border: 1px solid var(--jk-accent-line);
  border-radius: 4px;
  background: rgb(16 16 16 / 0.9);
  overflow: hidden;
  transition: border-color var(--jk-quick) ease, box-shadow var(--jk-quick) ease;
}

.jk-nl-row:focus-within {
  border-color: var(--jk-accent-line);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--jk-accent) 15%, transparent);
}

.jk-nl-row input[type="email"] {
  flex: 1;
  min-width: 0;
  min-height: 48px;
  margin: 0;
  padding: 0 14px;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #fff !important;
  font-size: 14px;
  box-shadow: none !important;
  outline: none;
}

.jk-nl-row input[type="email"]::placeholder {
  color: #929292;
}

.jk-nl-submit {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  margin: 0;
  padding: 0 18px;
  border: 0;
  border-radius: 0;
  background: linear-gradient(100deg, var(--jk-accent), color-mix(in srgb, var(--jk-accent) 72%, #000));
  color: var(--jk-on-accent);
  font-family: var(--jk-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
}

.jk-nl-submit:hover {
  filter: brightness(1.15);
}

.jk-nl-submit svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

.jk-newsletter.is-sending .jk-nl-submit {
  opacity: 0.7;
}

.jk-nl-consent {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 12px 0 0;
  color: #a3a3a3;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
}

.jk-nl-consent input {
  flex: none;
  width: 15px;
  height: 15px;
  margin: 1px 0 0;
  accent-color: var(--jk-accent);
}

.jk-nl-consent a {
  color: var(--jk-accent);
}

.jk-nl-message {
  margin: 10px 0 0;
  padding: 9px 12px;
  border: 1px solid rgb(82 180 130 / 0.45);
  border-radius: 4px;
  background: rgb(82 180 130 / 0.08);
  color: #a6e3c3;
  font-size: 13px;
}

.jk-nl-message.is-error {
  border-color: rgb(217 142 142 / 0.45);
  background: rgb(217 142 142 / 0.08);
  color: #f0b4b4;
}

/* Footer column: the button is just the arrow, as in the template. */
.jk-footer-newsletter .jk-nl-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.jk-footer-newsletter .jk-nl-row {
  border-color: #505050;
  background: transparent;
}

.jk-footer-newsletter .jk-nl-submit {
  padding: 0 16px;
  border-left: 1px solid #505050;
  background: transparent;
}

.jk-footer-newsletter .jk-nl-submit:hover {
  background: color-mix(in srgb, var(--jk-accent) 15%, transparent);
  filter: none;
}

.jk-footer-nl-text {
  margin: 0 0 14px;
  color: #b2b2b2;
  font-size: 13px;
}

/* Footer widget headings, small and spaced, as in the template. */
.jk-footer-col h2,
.jk-footer-col h3,
.jk-footer-col .widget-title,
.jk-footer-col .wp-block-heading {
  margin: 0 0 16px;
  font-family: var(--jk-body);
  font-size: 12px !important;
  font-weight: 600;
  letter-spacing: 3px;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--jk-text);
}

.jk-footer-col ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.jk-footer-col li {
  margin: 0 0 8px;
  font-size: 14px;
}

.jk-footer-col a {
  color: #c6c6c6;
}

.jk-footer-col a:hover {
  color: #fff;
}

/* Subscribe panel (landing block). */
.subscribe-section .jk-newsletter {
  margin-top: 22px;
}

/* Under a blog post. */
.jk-post-newsletter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 28px;
  align-items: center;
  margin: 50px 0 0;
  padding: 30px;
  border: 1px solid #454545;
  border-radius: 8px;
  background: linear-gradient(145deg, #222222, #121212);
}

.jk-post-newsletter .jk-eyebrow {
  margin: 0 0 6px;
  color: #9b9b9b;
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.jk-post-newsletter h2 {
  margin: 0 0 8px;
  font-family: var(--jk-body);
  font-size: 23px;
  font-weight: 700;
  text-transform: none;
}

.jk-post-newsletter p:not(.jk-eyebrow):not(.jk-nl-message) {
  margin: 0;
  color: #b1b1b1;
  font-size: 14px;
}

@media (max-width: 700px) {
  .jk-post-newsletter {
    grid-template-columns: 1fr;
    padding: 22px;
  }
}

/* The note after a sign-up without the script. */
.jk-nl-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 99;
  max-width: calc(100% - 32px);
  padding: 12px 18px;
  border: 1px solid rgb(82 180 130 / 0.5);
  border-radius: 6px;
  background: #0b1f18;
  color: #a6e3c3;
  font-size: 14px;
  transform: translateX(-50%);
  animation: jk-toast 5s ease forwards;
}

.jk-nl-toast.is-error {
  border-color: rgb(217 142 142 / 0.5);
  background: #241212;
  color: #f0b4b4;
}

@keyframes jk-toast {
  0%, 85% { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}

/* The template's generic ".tpl button" reset must not reach these. */
.jk-tpl form.jk-newsletter .jk-nl-submit,
form.jk-newsletter .jk-nl-submit {
  min-height: 48px;
  padding: 0 18px;
  background: linear-gradient(100deg, var(--jk-accent), color-mix(in srgb, var(--jk-accent) 72%, #000));
  color: var(--jk-on-accent);
  font-family: var(--jk-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.jk-tpl .jk-footer-newsletter form.jk-newsletter .jk-nl-submit,
.jk-footer-newsletter form.jk-newsletter .jk-nl-submit {
  padding: 0 16px;
  border-left: 1px solid #505050;
  background: transparent;
}

.jk-footer .jk-footer-col h2,
.jk-footer .jk-footer-col h3,
.jk-footer .jk-footer-col .widget-title,
.jk-footer .jk-footer-col .wp-block-heading,
.jk-footer .jk-footer-col .wp-block-search__label {
  margin: 0 0 16px;
  font-family: var(--jk-body);
  font-size: 12px !important;
  font-weight: 600;
  letter-spacing: 3px;
  line-height: 1.4;
  text-transform: uppercase;
}

.jk-footer .jk-footer-col .widget + .widget,
.jk-footer .jk-footer-col .wp-block-group + .wp-block-group {
  margin-top: 26px;
}

/* ═══════════════════════════════════════════════════════════════════════
   1.9.1 — Subscribe panel: half the height, full width, envelope behind
   ═══════════════════════════════════════════════════════════════════════ */

.jk-tpl .subscribe-section {
  position: relative;
  min-height: 0;
  margin-top: 56px;
  margin-bottom: 56px;
  border: 1px solid #484848;
  border-radius: 8px;
  background:
    radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--jk-accent) 22%, transparent), transparent 55%),
    linear-gradient(120deg, #212121, #141414 60%, #1c1c1c);
}

.jk-tpl .subscribe-section .subscribe-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px 48px;
  align-items: center;
  width: 100%;
  max-width: none;
  padding: 34px 44px;
}

.jk-tpl .subscribe-section .subscribe-text {
  display: flex;
  align-items: center;
  gap: 22px;
  min-width: 0;
}

.jk-tpl .subscribe-section .subscribe-content .eyebrow {
  margin: 0 0 6px;
}

.jk-tpl .subscribe-section .subscribe-content h2 {
  margin: 0 0 6px;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.15;
}

.jk-tpl .subscribe-section .subscribe-content h2 br {
  display: none;
}

.jk-tpl .subscribe-section .subscribe-content .subscribe-text p:not(.eyebrow) {
  margin: 0;
  font-size: 14px;
}

.jk-tpl .subscribe-section .jk-subscribe-form {
  margin: 0;
}

.jk-tpl .subscribe-section .jk-newsletter {
  max-width: none;
  margin: 0;
}

/* The round white badge with an envelope. */
.subscribe-badge {
  display: grid;
  flex: none;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #fff;
  color: var(--jk-accent);
  box-shadow: 0 0 0 8px rgb(255 255 255 / 0.06), 0 18px 40px -12px color-mix(in srgb, var(--jk-accent) 60%, transparent);
}

.jk-tpl .subscribe-badge svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

/* The big line envelope in white, faint, behind the right side. */
.subscribe-envelope {
  position: absolute;
  right: -20px;
  top: 50%;
  width: 360px;
  height: auto;
  transform: translateY(-50%) rotate(-8deg);
  fill: none;
  stroke: #fff;
  stroke-width: 1.4;
  stroke-linejoin: round;
  opacity: 0.08;
  pointer-events: none;
}

.jk-tpl .subscribe-section.has-envelope .subscribe-art {
  display: none;
}

@media (max-width: 900px) {
  .jk-tpl .subscribe-section .subscribe-content {
    grid-template-columns: 1fr;
    padding: 26px 22px;
  }

  .subscribe-badge {
    width: 52px;
    height: 52px;
  }

  .jk-tpl .subscribe-badge svg {
    width: 24px;
    height: 24px;
  }

  .subscribe-envelope {
    width: 240px;
    top: 30px;
    transform: rotate(-8deg);
  }
}

@media (max-width: 480px) {
  .jk-tpl .subscribe-section .subscribe-text {
    align-items: flex-start;
    gap: 16px;
  }

  .jk-tpl .subscribe-section .jk-nl-label {
    display: none;
  }
}

.jk-tpl .subscribe-section svg.subscribe-envelope {
  position: absolute;
  z-index: 0;
  right: 4%;
  top: 50%;
  width: 300px;
  height: 200px;
  transform: translateY(-50%) rotate(-8deg);
  fill: none;
  stroke: #fff;
  stroke-width: 1.3;
  opacity: 0.1;
}

.jk-tpl .subscribe-section .subscribe-content {
  position: relative;
  z-index: 1;
}

@media (max-width: 900px) {
  .jk-tpl .subscribe-section svg.subscribe-envelope {
    right: -40px;
    top: auto;
    bottom: -30px;
    width: 220px;
    height: 150px;
    transform: rotate(-10deg);
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   2.0.0 — JackedZone: logo and the yellow
   ═══════════════════════════════════════════════════════════════════════ */

.jk-brand--logo {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

.jk-brand--logo img {
  display: block;
  width: auto;
  height: 62px;
  transition: transform var(--jk-quick) ease, filter var(--jk-quick) ease;
}

.jk-brand--logo:hover img {
  transform: scale(1.03);
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--jk-accent) 35%, transparent));
}

.jk-brand--footer img {
  height: 96px;
}

.jk-brand--drawer img {
  height: 48px;
}

@media (max-width: 760px) {
  .jk-brand--header img {
    height: 48px;
  }
}

/* A custom logo from Site Identity at the same sizes. */
.jk-header .custom-logo {
  max-height: 62px;
}

.jk-footer .custom-logo {
  max-height: 96px;
}

/* Sign-in pop-up and account page. */
.jk-auth-brand {
  display: flex;
  align-items: center;
  gap: 16px;
}

.jk-auth-logo {
  flex: none;
  width: auto;
  height: 54px;
}

.jk-auth-intro-logo {
  display: block;
  width: auto;
  height: 110px;
  margin: 0 0 22px;
}

@media (max-width: 860px) {
  .jk-auth-intro-logo {
    display: none;
  }
}

/* White as the second colour: headings of cards, secondary buttons and the
   "done" states, so yellow stays for what should be pressed. */
.jk-order-steps li[data-state="done"] > * > span {
  border-color: #f5f5f5;
  color: #f5f5f5;
}

.jk-checkout-main .jk-step-nav .jk-step-back:hover,
.jk-cart-drawer .woocommerce-mini-cart__buttons .button:not(.checkout):hover,
#jk-cart .woocommerce-mini-cart__buttons .button:not(.checkout):hover {
  border-color: #f5f5f5 !important;
  background: rgb(255 255 255 / 0.06) !important;
}

/* Focus rings in yellow read well on black. */
:focus-visible {
  outline-color: var(--jk-accent);
}

/* Footer sign-up: a white arrow on black, yellow on hover. */
.jk-tpl .jk-footer-newsletter form.jk-newsletter .jk-nl-submit,
.jk-footer-newsletter form.jk-newsletter .jk-nl-submit {
  color: var(--jk-text);
}

.jk-tpl .jk-footer-newsletter form.jk-newsletter .jk-nl-submit:hover,
.jk-footer-newsletter form.jk-newsletter .jk-nl-submit:hover {
  background: var(--jk-accent);
  color: var(--jk-on-accent);
}

/* With the logo in the pop-up, the site name is for screen readers only. */
.jk-auth-brand:has(.jk-auth-logo) h2 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.jk-tpl .jk-header .jk-brand--logo img,
.jk-brand--header img {
  height: 64px;
}

@media (max-width: 760px) {
  .jk-tpl .jk-header .jk-brand--logo img,
  .jk-brand--header img {
    height: 46px;
  }
}

/* ── 2.0.1: sale badge — a round yellow sticker, whatever wraps it ── */
.woocommerce span.onsale,
.jk-tpl.single-product div.product > .onsale,
.single-product div.product .onsale {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 58px;
  height: 58px;
  min-width: 58px !important;
  min-height: 58px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--jk-accent);
  color: var(--jk-on-accent);
  font-family: var(--jk-body);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--jk-accent) 60%, transparent);
}

/* ═══════════════════════════════════════════════════════════════════════
   2.1.0 — Product page details
   ═══════════════════════════════════════════════════════════════════════ */

/* Prices: the old one as large as the new, struck through in grey; the
   new one in the accent. Same on the cards. */
.single-product .summary .price,
.jk-tpl.single-product .summary .price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
}

.single-product .summary .price del,
.jk-tpl .catalog-price del {
  margin: 0;
  color: var(--jk-muted) !important;
  font-size: 1em !important;
  font-weight: inherit;
  opacity: 0.7;
  text-decoration-thickness: 2px;
}

.single-product .summary .price del .amount,
.jk-tpl .catalog-price del .amount {
  color: inherit !important;
}

.single-product .summary .price ins,
.single-product .summary .price ins .amount,
.jk-tpl .catalog-price ins,
.jk-tpl .catalog-price ins .amount {
  color: var(--jk-accent) !important;
  text-decoration: none;
  font-weight: inherit;
}

/* Zoom button on the photo: a round glass with a white magnifier; yellow
   on hover. (WooCommerce draws the magnifier in black by default.) */
.woocommerce div.product div.images .woocommerce-product-gallery__trigger,
.woocommerce-product-gallery__trigger {
  top: 14px !important;
  right: 14px !important;
  width: 44px !important;
  height: 44px !important;
  border: 1px solid rgb(255 255 255 / 0.18) !important;
  border-radius: 50% !important;
  background: rgb(9 9 9 / 0.62) !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 8px 22px -8px rgb(0 0 0 / 0.7);
  transition: background var(--jk-quick) ease, transform var(--jk-quick) ease;
}

.woocommerce div.product div.images .woocommerce-product-gallery__trigger::before {
  top: 12px;
  left: 12px;
  width: 11px;
  height: 11px;
  border: 2px solid #fff;
}

.woocommerce div.product div.images .woocommerce-product-gallery__trigger::after {
  top: 24px;
  left: 26px;
  height: 9px;
  background: #fff;
}

.woocommerce div.product div.images .woocommerce-product-gallery__trigger:hover,
.woocommerce div.product div.images .woocommerce-product-gallery__trigger:focus-visible {
  background: var(--jk-accent) !important;
  transform: scale(1.06);
}

.woocommerce div.product div.images .woocommerce-product-gallery__trigger:hover::before {
  border-color: var(--jk-on-accent);
}

.woocommerce div.product div.images .woocommerce-product-gallery__trigger:hover::after {
  background: var(--jk-on-accent);
}

/* One left / sold one at a time: the box shows a fixed 1. */
.quantity.jk-stepper.is-single {
  display: inline-flex;
  align-items: stretch;
}

.jk-qty-single {
  display: grid;
  place-items: center;
  min-width: 52px;
  font-weight: 700;
  color: var(--jk-text);
}

.quantity.jk-stepper.is-single .jk-step {
  opacity: 0.3;
  cursor: not-allowed;
}

/* ── Related products and upsells: a sliding row ── */

.jk-carousel .jk-carousel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 22px;
}

.jk-carousel .jk-carousel-head > h2 {
  margin: 0 !important;
}

.jk-carousel-nav {
  display: flex;
  gap: 8px;
}

.jk-carousel-nav[hidden] {
  display: none;
}

.jk-carousel-btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--jk-line);
  border-radius: 50%;
  background: transparent;
  color: var(--jk-text);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--jk-quick) ease, border-color var(--jk-quick) ease, color var(--jk-quick) ease;
}

.jk-carousel-btn:hover,
.jk-carousel-btn:focus-visible {
  border-color: var(--jk-accent);
  background: var(--jk-accent);
  color: var(--jk-on-accent);
}

.jk-tpl .jk-carousel ul.products.jk-carousel-track,
.jk-carousel ul.products.jk-carousel-track {
  --jk-per-view: var(--jk-loop-columns, var(--jk-columns, 4));
  display: flex !important;
  grid-template-columns: none !important;
  gap: 18px !important;
  margin: 0 !important;
  padding: 4px 2px 8px !important;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.jk-carousel ul.products.jk-carousel-track::-webkit-scrollbar {
  display: none;
}

.jk-carousel ul.products.jk-carousel-track > li.product {
  flex: 0 0 calc((100% - (var(--jk-per-view) - 1) * 18px) / var(--jk-per-view)) !important;
  width: auto !important;
  margin: 0 !important;
  scroll-snap-align: start;
}

@media (max-width: 1100px) {
  .jk-carousel ul.products.jk-carousel-track {
    --jk-per-view: 3;
  }
}

@media (max-width: 760px) {
  .jk-carousel ul.products.jk-carousel-track {
    --jk-per-view: 2;
    gap: 12px !important;
  }

  .jk-carousel ul.products.jk-carousel-track > li.product {
    flex-basis: calc((100% - 12px) / 2) !important;
  }
}

.jk-tpl.single-product .jk-carousel .jk-carousel-head > h2,
.jk-carousel .jk-carousel-head > h2 {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: var(--jk-body);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.3;
  text-transform: none;
}

/* Narrow cards: the number field may shrink so − and + both fit. */
.jk-tpl .catalog-buy .quantity.jk-stepper {
  min-width: 0;
  max-width: 100%;
}

.jk-tpl .catalog-buy .quantity.jk-stepper .qty {
  min-width: 0;
  flex: 1 1 auto;
}

.jk-tpl .catalog-buy .jk-step {
  flex: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   2.2.0 — Phone and tablet header: logo · search field · icons
   ═══════════════════════════════════════════════════════════════════════ */

.jk-search-field {
  display: none;
}

@media (max-width: 960px) {
  .jk-header-row {
    gap: 12px;
  }

  /* The desktop menu is hidden here, so nothing may cancel the push to the
     right any more (".jk-nav + .jk-header-tools" did). */
  .jk-nav + .jk-header-tools,
  .jk-header-tools {
    margin-left: auto;
    gap: 2px;
  }

  .jk-search-field {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 10px;
    min-width: 0;
    max-width: 460px;
    height: 42px;
    margin: 0 auto;
    padding: 0 16px;
    border: 1px solid var(--jk-line);
    border-radius: 999px;
    background: var(--jk-surface);
    color: var(--jk-muted);
    font-family: var(--jk-body);
    font-size: 14px;
    text-align: left;
    cursor: text;
    transition: border-color var(--jk-quick) ease, background var(--jk-quick) ease;
  }

  .jk-search-field + .jk-header-tools {
    margin-left: 0;
  }

  .jk-search-field:hover,
  .jk-search-field.is-active,
  .jk-search-field:focus-visible {
    border-color: var(--jk-accent);
    color: var(--jk-text);
  }

  .jk-search-field svg {
    flex: none;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
  }

  .jk-search-field span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* The search icon would repeat the field. */
  .jk-header-tools > [data-jk-open="search"] {
    display: none;
  }

  .jk-header-tools .jk-user-name,
  .jk-header-tools .jk-user-trigger > svg:last-child:not(:first-child),
  .jk-header-tools .jk-motto {
    display: none;
  }
}

@media (max-width: 420px) {
  .jk-header-row {
    gap: 8px;
  }

  .jk-search-field {
    height: 38px;
    padding: 0 12px;
    font-size: 13px;
  }

  .jk-header-tools .jk-icon-button,
  .jk-header-tools .jk-user-trigger {
    width: 38px;
    padding: 0;
    justify-content: center;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   2.2.3 — Pagination (shop, categories, search, blog, manufacturer pages)
   ═══════════════════════════════════════════════════════════════════════ */

.woocommerce nav.woocommerce-pagination,
.navigation.pagination,
.bacola-mfr-pagination {
  margin: 44px 0 10px;
  text-align: center;
}

.woocommerce nav.woocommerce-pagination ul,
.navigation.pagination .nav-links {
  display: inline-flex !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  list-style: none;
  white-space: normal;
}

.woocommerce nav.woocommerce-pagination ul li {
  float: none !important;
  display: block;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: visible !important;
}

.woocommerce nav.woocommerce-pagination ul li .page-numbers,
.navigation.pagination .page-numbers,
.bacola-mfr-pagination a,
.bacola-mfr-pagination span {
  display: inline-grid !important;
  place-items: center;
  box-sizing: border-box;
  min-width: 44px !important;
  height: 44px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  border: 1px solid var(--jk-line) !important;
  border-radius: 999px !important;
  background: var(--jk-surface) !important;
  color: var(--jk-text) !important;
  font-family: var(--jk-body);
  font-size: 14px !important;
  font-weight: 600;
  line-height: 1 !important;
  text-decoration: none;
  transition: border-color var(--jk-quick) ease, background var(--jk-quick) ease, color var(--jk-quick) ease, transform var(--jk-quick) ease;
}

.woocommerce nav.woocommerce-pagination ul li a.page-numbers:hover,
.woocommerce nav.woocommerce-pagination ul li a.page-numbers:focus-visible,
.navigation.pagination a.page-numbers:hover,
.navigation.pagination a.page-numbers:focus-visible,
.bacola-mfr-pagination a:hover {
  border-color: var(--jk-accent) !important;
  background: var(--jk-surface) !important;
  color: var(--jk-accent) !important;
  transform: translateY(-1px);
}

.woocommerce nav.woocommerce-pagination ul li span.current,
.navigation.pagination .page-numbers.current,
.bacola-mfr-pagination .current {
  border-color: var(--jk-accent) !important;
  background: var(--jk-accent) !important;
  color: var(--jk-on-accent) !important;
  box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--jk-accent) 70%, transparent);
}

/* The "…" gap: no box, just the dots. */
.woocommerce nav.woocommerce-pagination ul li span.dots,
.navigation.pagination .page-numbers.dots {
  min-width: 24px !important;
  padding: 0 !important;
  border-color: transparent !important;
  background: transparent !important;
  color: var(--jk-muted) !important;
}

/* Previous / next arrows: a little wider. */
.woocommerce nav.woocommerce-pagination ul li .page-numbers.prev,
.woocommerce nav.woocommerce-pagination ul li .page-numbers.next,
.navigation.pagination .page-numbers.prev,
.navigation.pagination .page-numbers.next {
  min-width: 52px !important;
  font-size: 17px !important;
}

@media (max-width: 480px) {
  .woocommerce nav.woocommerce-pagination ul,
  .navigation.pagination .nav-links {
    gap: 6px;
  }

  .woocommerce nav.woocommerce-pagination ul li .page-numbers,
  .navigation.pagination .page-numbers {
    min-width: 38px !important;
    height: 38px !important;
    padding: 0 10px !important;
    font-size: 13px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   2.3.1 — Optional product tabs (FAQ, documentation…) use the full width
   ═══════════════════════════════════════════════════════════════════════ */

.woocommerce-tabs .panel .jk-extra-tab {
  max-width: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   2.4.0 — Blog post with a side column
   ═══════════════════════════════════════════════════════════════════════ */

.jk-post-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: clamp(32px, 4vw, 56px);
  align-items: start;
}

.jk-post-layout .jk-post-main {
  min-width: 0;
}

.jk-post-layout .jk-prose {
  max-width: 78ch;
}

.jk-post-aside {
  align-self: stretch;
}

/* Taller than the screen: scroll with the page instead of sticking. */
.jk-post-aside-inner.is-tall {
  position: static;
}

.jk-post-aside-inner {
  position: sticky;
  top: 24px;
  display: grid;
  gap: 28px;
}

/* 2.5.6: always below the sticky menu; a column taller than the screen
   scrolls inside itself instead of slipping under the menu. */
.jk-post-aside-inner.is-capped {
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--jk-line) transparent;
  padding-right: 4px;
}

.jk-sticky-header .jk-post-aside-inner {
  top: 108px;
}

.admin-bar .jk-post-aside-inner {
  top: 56px;
}

.admin-bar.jk-sticky-header .jk-post-aside-inner {
  top: 140px;
}

.jk-aside-block {
  padding: 18px;
  border: 1px solid var(--jk-line);
  border-radius: var(--jk-radius);
  background: var(--jk-surface);
}

.jk-aside-title {
  margin: 0 0 14px;
  color: var(--jk-text);
  font-size: 13px;
  letter-spacing: 0.1em;
  line-height: 1.3;
  text-transform: uppercase;
}

.jk-mini-posts,
.jk-mini-products {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.jk-mini-post {
  display: grid;
  gap: 8px;
  color: var(--jk-text);
  text-decoration: none;
}

.jk-mini-post-media {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--jk-line);
  border-radius: var(--jk-radius);
  background: var(--jk-bg);
}

.jk-mini-post-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s var(--jk-ease, ease);
}

.jk-mini-post-media.is-empty {
  display: grid;
  place-items: center;
  color: var(--jk-muted);
}

.jk-mini-post-media.is-empty svg {
  width: 28px;
  height: 28px;
}

.jk-mini-post-title,
.jk-mini-product-name {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  font-family: var(--jk-body);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
  text-overflow: ellipsis;
}

.jk-mini-post:hover .jk-mini-post-title,
.jk-mini-product:hover .jk-mini-product-name {
  color: var(--jk-accent);
}

.jk-mini-post:hover .jk-mini-post-media img {
  transform: scale(1.04);
}

.jk-mini-product {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  color: var(--jk-text);
  text-decoration: none;
}

.jk-mini-product-media {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  overflow: hidden;
  border: 1px solid var(--jk-line);
  border-radius: var(--jk-radius);
  background: var(--jk-bg);
  color: var(--jk-muted);
}

.jk-mini-product-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.jk-mini-product-media svg {
  width: 22px;
  height: 22px;
}

.jk-mini-product-body {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.jk-mini-product-price {
  color: var(--jk-accent);
  font-size: 13px;
  font-weight: 700;
}

.jk-mini-product-price del {
  color: var(--jk-muted);
  font-weight: 400;
}

/* Tags under the article */
.jk-post-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 36px;
  padding-top: 22px;
  border-top: 1px solid var(--jk-line);
}

.jk-post-tags-label {
  margin-right: 4px;
  color: var(--jk-muted);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.jk-tag {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid var(--jk-line);
  border-radius: 999px;
  color: var(--jk-text);
  font-size: 13px;
  line-height: 1.2;
  text-decoration: none;
  transition: border-color var(--jk-quick, 0.18s) ease, color var(--jk-quick, 0.18s) ease;
}

.jk-tag:hover {
  border-color: var(--jk-accent-line);
  color: var(--jk-accent);
}

@media (max-width: 960px) {
  .jk-post-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .jk-post-aside-inner {
    position: static;
  }

  .jk-mini-posts {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   2.4.0 — Add-to-cart bar at the bottom of a product page
   ═══════════════════════════════════════════════════════════════════════ */

.jk-sticky-cart {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 45;
  border-top: 1px solid var(--jk-accent-line);
  background: color-mix(in srgb, var(--jk-surface) 94%, transparent);
  box-shadow: 0 -12px 30px rgb(0 0 0 / 0.45);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transform: translateY(110%);
  transition: transform var(--jk-slide, 0.3s) var(--jk-ease, ease);
}

.jk-sticky-cart.is-visible {
  transform: translateY(0);
}

.jk-sc-row {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 72px;
  padding-top: 10px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
}

.jk-sticky-cart .jk-sc-img {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  object-fit: contain;
  border: 1px solid var(--jk-line);
  border-radius: var(--jk-radius);
  background: var(--jk-bg);
}

.jk-sc-info {
  display: grid;
  flex: 1 1 auto;
  gap: 2px;
  min-width: 0;
}

.jk-sc-name {
  overflow: hidden;
  color: var(--jk-text);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.jk-sc-price {
  color: var(--jk-accent);
  font-size: 14px;
  font-weight: 700;
}

.jk-sc-price del {
  color: var(--jk-muted);
  font-weight: 400;
}

.jk-sticky-cart .quantity.jk-sc-qty {
  flex: 0 0 auto;
  margin: 0;
}

.jk-sticky-cart .jk-sc-buy {
  flex: 0 0 auto;
  min-height: 46px;
  margin: 0;
  padding: 0 26px;
  border: 0;
  border-radius: 4px;
  background: var(--jk-accent);
  color: var(--jk-on-accent);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

.jk-sticky-cart .jk-sc-buy:hover {
  filter: brightness(1.08);
}

/* Room at the end of the page so the bar never covers the footer. */
body.jk-sc-on {
  padding-bottom: 76px;
}

.jk-sticky-cart .quantity.jk-stepper .qty {
  width: 40px;
  min-height: 44px;
}

.jk-sticky-cart .jk-step {
  width: 34px;
}

@media (max-width: 600px) {
  .jk-sc-row {
    gap: 10px;
  }

  .jk-sc-name {
    display: none;
  }

  .jk-sc-price {
    white-space: nowrap;
  }

  .jk-sticky-cart .quantity.jk-stepper .qty {
    width: 32px;
  }

  .jk-sticky-cart .jk-step {
    width: 28px;
  }

  .jk-sticky-cart .jk-sc-img {
    width: 42px;
    height: 42px;
  }

  .jk-sc-name {
    font-size: 13px;
  }

  .jk-sticky-cart .jk-sc-buy {
    padding: 0 12px;
    font-size: 11px;
    letter-spacing: 0.03em;
  }

  .jk-sc-info {
    flex: 0 0 auto;
    min-width: 0;
  }

  .jk-sc-price {
    font-size: 13px;
  }
}

@media (max-width: 360px) {
  .jk-sc-info {
    display: none;
  }

  .jk-sticky-cart .jk-sc-buy {
    flex: 1 1 auto;
  }
}

/* 2.4.3 — products in the search results: price instead of date / reading time */
.jk-post-card-price {
  color: var(--jk-accent);
  font-weight: 700;
  letter-spacing: 0;
}

.jk-post-card-price del {
  color: var(--jk-muted);
  font-weight: 400;
}

/* ── Article thumbnails block ─────────────────────────────────────────── */
.jk-pthumbs { margin-block: clamp(36px, 6vw, 72px); }
.jk-pthumbs-list { display: grid; gap: 18px; grid-template-columns: repeat(var(--jk-pt-cols, 4), minmax(0, 1fr)); }
.jk-pthumb { display: flex; flex-direction: column; gap: 10px; color: var(--jk-text); text-decoration: none; min-width: 0; }
.jk-pthumb-img { display: block; position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--jk-radius, 14px); background: var(--jk-surface); border: 1px solid var(--jk-line); }
.jk-pthumb-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s ease; }
.jk-pthumb-img.is-empty { display: grid; place-items: center; color: var(--jk-muted); }
.jk-pthumb-img.is-empty svg { width: 34px; height: 34px; }
.jk-pthumb:hover .jk-pthumb-img img { transform: scale(1.05); }
.jk-pthumb-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.jk-pthumb-meta { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; color: var(--jk-muted); text-transform: uppercase; letter-spacing: .04em; }
.jk-pthumb-cat { color: var(--jk-accent); font-weight: 700; }
.jk-pthumb-title { font-weight: 700; font-size: 15px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.jk-pthumb:hover .jk-pthumb-title { color: var(--jk-accent); }
/* strip: horizontal swipe */
.jk-pthumbs--strip .jk-pthumbs-list { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: thin; }
.jk-pthumbs--strip .jk-pthumb { flex: 0 0 calc((100% - (var(--jk-pt-cols, 4) - 1) * 18px) / var(--jk-pt-cols, 4)); scroll-snap-align: start; }
/* list: small square + text */
.jk-pthumbs--list .jk-pthumbs-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 28px; }
.jk-pthumbs--list .jk-pthumb { flex-direction: row; align-items: center; gap: 14px; }
.jk-pthumbs--list .jk-pthumb-img { flex: 0 0 84px; width: 84px; aspect-ratio: 1; }
@media (max-width: 900px) {
  .jk-pthumbs--grid .jk-pthumbs-list { grid-template-columns: repeat(min(var(--jk-pt-cols, 4), 3), minmax(0, 1fr)); }
  .jk-pthumbs--strip .jk-pthumb { flex-basis: 42%; }
}
@media (max-width: 600px) {
  .jk-pthumbs--grid .jk-pthumbs-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .jk-pthumbs--strip .jk-pthumb { flex-basis: 70%; }
  .jk-pthumbs--list .jk-pthumbs-list { grid-template-columns: minmax(0, 1fr); }
  .jk-pthumb-title { font-size: 14px; }
}

/* ── 2.5.4: category strip – even cards on a desktop, one scrolling row of
   chips on a phone ─────────────────────────────────────────────────────── */

.jk-tpl .jk-catstrip {
  background: linear-gradient(180deg, #0f0f0f, #0b0b0b);
}

.jk-catnav {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(144px, 1fr));
  gap: 10px;
  padding-top: 18px;
  padding-bottom: 18px;
}

/* Even rows: the number of columns comes from the theme (see
   jacked_category_strip), so no row ends with a lone card. */
@media (min-width: 1101px) {
  .jk-catnav--cards {
    grid-template-columns: repeat(var(--jk-cols-d, 7), minmax(0, 1fr));
  }
}

.jk-catnav .jk-cat {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 118px;
  padding: 16px 10px 14px;
  border: 1px solid #222;
  border-radius: 12px;
  background: linear-gradient(160deg, #161616, #101010);
  color: var(--jk-text);
  text-align: center;
  text-decoration: none;
  transition: border-color var(--jk-quick) ease, transform var(--jk-quick) ease, background var(--jk-quick) ease;
}

.jk-catnav .jk-cat:hover,
.jk-catnav .jk-cat:focus-visible {
  border-color: var(--jk-accent-line);
  color: var(--jk-text);
  transform: translateY(-2px);
}

.jk-catnav .jk-cat:focus-visible {
  outline: 2px solid var(--jk-accent);
  outline-offset: 2px;
}

.jk-cat-ic {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  border: 1px solid #2c2c2c;
  border-radius: 50%;
  background: #1a1a1a;
  color: #d9d9d9;
  transition: background var(--jk-quick) ease, color var(--jk-quick) ease, border-color var(--jk-quick) ease;
}

.jk-cat-ic svg {
  width: 24px;
  height: 24px;
}

.jk-catnav .jk-cat:hover .jk-cat-ic {
  border-color: var(--jk-accent-line);
  color: var(--jk-accent);
}

.jk-cat-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 0;
}

.jk-cat-name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  line-height: 1.35;
  text-transform: uppercase;
}

.jk-cat-count {
  font-size: 11px;
  color: var(--jk-muted);
  letter-spacing: 0.02em;
}

/* The current category. */
.jk-catnav .jk-cat[aria-current="page"] {
  border-color: var(--jk-accent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--jk-accent) 12%, #161616), #111);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--jk-accent) 25%, transparent), 0 10px 24px -14px color-mix(in srgb, var(--jk-accent) 60%, transparent);
}

.jk-catnav .jk-cat[aria-current="page"] .jk-cat-ic {
  border-color: var(--jk-accent);
  background: var(--jk-accent);
  color: var(--jk-on-accent);
}

.jk-catnav .jk-cat[aria-current="page"] .jk-cat-count {
  color: var(--jk-accent-ink);
}

/* Chips on a desktop: compact pills, centred and wrapping evenly. */
@media (min-width: 901px) {
  .jk-catnav--chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }

  .jk-catnav--chips .jk-cat {
    flex-direction: row;
    min-height: 0;
    gap: 10px;
    padding: 7px 16px 7px 7px;
    border-radius: 999px;
  }

  .jk-catnav--chips .jk-cat:hover {
    transform: none;
  }

  .jk-catnav--chips .jk-cat-ic {
    width: 34px;
    height: 34px;
  }

  .jk-catnav--chips .jk-cat-ic svg {
    width: 18px;
    height: 18px;
  }

  .jk-catnav--chips .jk-cat-text {
    flex-direction: row;
    align-items: baseline;
    gap: 7px;
  }

  .jk-catnav--chips .jk-cat-name {
    white-space: nowrap;
  }
}

/* Tablet: smaller cards. */
@media (max-width: 1100px) and (min-width: 901px) {
  .jk-catnav--cards {
    grid-template-columns: repeat(var(--jk-cols-t, 5), minmax(0, 1fr));
  }

  .jk-catnav--cards .jk-cat {
    min-height: 104px;
  }
}

/* Phone and small tablet: one row of chips that scrolls sideways (the
   current one is scrolled into view by main.js), faded at the edges. */
@media (max-width: 900px) {
  .jk-tpl .jk-catnav,
  .jk-catnav {
    display: flex;
    gap: 8px;
    width: 100%;
    max-width: none;
    padding: 12px var(--jk-gutter);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--jk-gutter);
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 28px), transparent 100%);
  }

  .jk-catnav::-webkit-scrollbar {
    display: none;
  }

  .jk-catnav .jk-cat {
    flex: 0 0 auto;
    flex-direction: row;
    min-height: 0;
    gap: 8px;
    padding: 6px 14px 6px 6px;
    border-radius: 999px;
    scroll-snap-align: start;
  }

  .jk-catnav .jk-cat:hover {
    transform: none;
  }

  .jk-cat-ic {
    width: 32px;
    height: 32px;
  }

  .jk-cat-ic svg {
    width: 17px;
    height: 17px;
  }

  .jk-cat-text {
    flex-direction: row;
    align-items: baseline;
    gap: 6px;
  }

  .jk-cat-name {
    display: block;
    white-space: nowrap;
    font-size: 11px;
    letter-spacing: 0.06em;
  }

  .jk-cat-count {
    font-size: 10.5px;
  }
}

/* 2.5.5: "one row" on every screen, like the phone. On a desktop the chips
   are a little larger and centred while they fit; when they do not, the row
   scrolls (and slowly moves by itself, see main.js). */

.jk-tpl .jk-catnav--row,
.jk-catnav--row {
  display: flex;
  gap: 8px;
  width: 100%;
  max-width: none;
  padding: 12px var(--jk-gutter);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--jk-gutter);
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 28px), transparent 100%);
}

.jk-catnav--row::-webkit-scrollbar {
  display: none;
}

.jk-catnav--row .jk-cat {
  flex: 0 0 auto;
  flex-direction: row;
  min-height: 0;
  gap: 8px;
  padding: 6px 14px 6px 6px;
  border-radius: 999px;
  scroll-snap-align: start;
}

.jk-catnav--row .jk-cat:hover {
  transform: none;
}

.jk-catnav--row .jk-cat-ic {
  width: 32px;
  height: 32px;
}

.jk-catnav--row .jk-cat-ic svg {
  width: 17px;
  height: 17px;
}

.jk-catnav--row .jk-cat-text {
  flex-direction: row;
  align-items: baseline;
  gap: 6px;
}

.jk-catnav--row .jk-cat-name {
  display: block;
  white-space: nowrap;
  font-size: 11px;
  letter-spacing: 0.06em;
}

.jk-catnav--row .jk-cat-count {
  font-size: 10.5px;
}

@media (min-width: 901px) {
  /* Boxed like the rest of the theme, not edge to edge. */
  .jk-tpl .jk-catnav--row,
  .jk-catnav--row {
    width: min(1220px, calc(100% - 80px));
    gap: 10px;
    padding: 16px 14px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
  }

  .jk-catnav--row .jk-cat {
    padding: 7px 18px 7px 7px;
  }

  .jk-catnav--row .jk-cat-ic {
    width: 38px;
    height: 38px;
  }

  .jk-catnav--row .jk-cat-ic svg {
    width: 20px;
    height: 20px;
  }

  .jk-catnav--row .jk-cat-name {
    font-size: 12px;
  }

  .jk-catnav--row > .jk-cat:first-child {
    margin-left: auto;
  }

  .jk-catnav--row > .jk-cat:last-child {
    margin-right: auto;
  }
}

/* While it moves by itself: no snapping (it would fight the movement), and
   the copies that make the loop seamless are shown. */
.jk-catnav .jk-cat--clone {
  display: none;
}

.jk-catnav.is-moving {
  scroll-snap-type: none;
}

.jk-catnav.is-moving .jk-cat--clone {
  display: flex;
}

.jk-catnav.is-moving > .jk-cat:first-child,
.jk-catnav.is-moving > .jk-cat:last-child {
  margin-left: 0;
  margin-right: 0;
}

.jk-catnav.is-dragging {
  cursor: grabbing;
  user-select: none;
}

.jk-catnav.is-dragging .jk-cat {
  pointer-events: none;
}


@media (prefers-reduced-motion: reduce) {
  .jk-catnav .jk-cat {
    transition: none;
  }
}