@import url('https://fonts.googleapis.com/css2?family=Assistant:wght@400;500;600;700;800&family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,800&display=swap');

:root {
  --pk-pine: #0f3d2e;
  --pk-pine-deep: #0a2a1f;
  --pk-moss: #2a6b52;
  --pk-trail: #c45c26;
  --pk-trail-dark: #9a4318;
  --pk-sky: #3d7a8c;
  --pk-ink: #15201b;
  --pk-muted: #5a6b62;
  --pk-paper: #f4f7f5;
  --pk-card: #ffffff;
  --pk-line: rgba(15, 61, 46, 0.12);
  --pk-radius: 14px;
  --pk-shadow: 0 18px 40px rgba(15, 61, 46, 0.08);
  --pk-font-display: "Assistant", "Bricolage Grotesque", sans-serif;
  --pk-font-body: "Assistant", system-ui, sans-serif;
}

html[lang="he-IL"] .pk-hero,
html[lang="he-IL"] .pk-builder,
html[lang="he-IL"] .pk-strip,
html[lang="he-IL"] .pk-steps,
html[lang="he-IL"] .pk-catalog,
html[lang="he-IL"] .pk-ops,
body.rtl .pk-hero,
body.rtl .pk-builder,
body.rtl .pk-strip,
body.rtl .pk-steps,
body.rtl .pk-catalog,
body.rtl .pk-ops {
  direction: rtl;
  text-align: right;
}

body.rtl .pk-hero__cta,
html[lang="he-IL"] .pk-hero__cta {
  flex-direction: row;
}

body.rtl .pk-summary__list li,
html[lang="he-IL"] .pk-summary__list li {
  flex-direction: row;
}

body.rtl .pk-check,
html[lang="he-IL"] .pk-check {
  flex-direction: row;
}

body.rtl .pk-table th,
body.rtl .pk-table td,
html[lang="he-IL"] .pk-table th,
html[lang="he-IL"] .pk-table td {
  text-align: right;
}

.pk-hero,
.pk-builder,
.pk-strip,
.pk-steps,
.pk-catalog,
.pk-ops {
  font-family: var(--pk-font-body);
  color: var(--pk-ink);
}

.pk-hero {
  position: relative;
  min-height: min(92vh, 760px);
  display: grid;
  align-items: end;
  overflow: hidden;
  border-radius: 0;
  margin: 0 calc(50% - 50vw);
  width: 100vw;
}

.pk-hero__bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(105deg, rgba(10, 42, 31, 0.88) 0%, rgba(10, 42, 31, 0.45) 48%, rgba(61, 122, 140, 0.25) 100%),
    url('https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?auto=format&fit=crop&w=1800&q=80') center/cover no-repeat;
  transform: scale(1.02);
  animation: pk-pan 28s ease-in-out infinite alternate;
}

@keyframes pk-pan {
  from { transform: scale(1.02) translate3d(0, 0, 0); }
  to { transform: scale(1.08) translate3d(-1.5%, -1%, 0); }
}

.pk-hero__content {
  position: relative;
  z-index: 1;
  max-width: 720px;
  padding: clamp(2rem, 6vw, 4.5rem);
  color: #f7faf8;
}

.pk-brand {
  font-family: var(--pk-font-display);
  font-size: clamp(2.6rem, 7vw, 4.6rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 0.95;
  margin: 0 0 0.75rem;
  animation: pk-rise 0.9s ease both;
}

.pk-hero h1 {
  font-family: var(--pk-font-display);
  font-size: clamp(1.35rem, 3.2vw, 2rem);
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 0.85rem;
  max-width: 18ch;
  animation: pk-rise 0.9s ease 0.08s both;
}

.pk-lede {
  margin: 0 0 1.5rem;
  font-size: 1.05rem;
  line-height: 1.55;
  opacity: 0.92;
  max-width: 38ch;
  animation: pk-rise 0.9s ease 0.16s both;
}

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

.pk-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  animation: pk-rise 0.9s ease 0.24s both;
}

.pk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  border: 0;
  border-radius: 999px;
  padding: 0.85rem 1.35rem;
  font: 600 0.95rem/1 var(--pk-font-body);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.pk-btn:hover { transform: translateY(-1px); }
.pk-btn--primary { background: var(--pk-trail); color: #fff; }
.pk-btn--primary:hover { background: var(--pk-trail-dark); color: #fff; }
.pk-btn--ghost { background: rgba(255,255,255,0.12); color: #fff; border: 1px solid rgba(255,255,255,0.35); }
.pk-btn--block { width: 100%; }

.pk-strip {
  background: var(--pk-pine);
  color: #e7f2ec;
  text-align: center;
  padding: 0.85rem 1.25rem;
  margin: 0 calc(50% - 50vw);
  width: 100vw;
  font-size: 0.95rem;
}

.pk-builder,
.pk-steps,
.pk-catalog,
.pk-ops {
  max-width: 1120px;
  margin: 0 auto;
  padding: 3.5rem 1.25rem;
}

.pk-section-head {
  margin-bottom: 1.75rem;
  max-width: 40rem;
}

.pk-section-head h2 {
  font-family: var(--pk-font-display);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  margin: 0 0 0.4rem;
  letter-spacing: -0.02em;
  color: var(--pk-pine);
}

.pk-section-head p {
  margin: 0;
  color: var(--pk-muted);
}

.pk-builder__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

@media (min-width: 960px) {
  .pk-builder__grid {
    grid-template-columns: 1.4fr 0.8fr;
    grid-template-rows: auto;
    align-items: start;
  }
  .pk-builder__grid > .pk-panel { grid-column: 1; }
  .pk-summary {
    grid-column: 2;
    grid-row: 1 / span 6;
    position: sticky;
    top: 1.25rem;
  }
}

.pk-panel,
.pk-summary,
.pk-card {
  background: var(--pk-card);
  border: 1px solid var(--pk-line);
  border-radius: var(--pk-radius);
  box-shadow: var(--pk-shadow);
}

.pk-panel,
.pk-summary {
  padding: 1.25rem 1.35rem 1.4rem;
}

.pk-panel h3,
.pk-summary h3 {
  font-family: var(--pk-font-display);
  font-size: 1.2rem;
  margin: 0 0 1rem;
  color: var(--pk-pine);
}

.pk-label {
  display: grid;
  gap: 0.35rem;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.85rem;
}

.pk-label input[type="date"],
.pk-label input[type="range"] {
  font: inherit;
  font-weight: 500;
}

.pk-label input[type="date"] {
  border: 1px solid var(--pk-line);
  border-radius: 10px;
  padding: 0.55rem 0.7rem;
  background: var(--pk-paper);
}

.pk-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.pk-cards {
  display: grid;
  gap: 0.75rem;
}

.pk-cards--catalog {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.pk-cards--duo {
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .pk-cards--duo {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
}

.pk-card {
  padding: 1rem 1.05rem;
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.2s ease;
  text-align: start;
  width: 100%;
  font: inherit;
  color: inherit;
}

.pk-card:hover { transform: translateY(-2px); }
.pk-card.is-selected {
  border-color: var(--pk-trail);
  box-shadow: 0 0 0 2px rgba(196, 92, 38, 0.25), var(--pk-shadow);
}

.pk-card--static { cursor: default; }
.pk-card--preset {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-height: 11.5rem;
  position: relative;
  padding-top: 1.15rem;
}
.pk-card--preset.is-recommended {
  border-color: color-mix(in srgb, var(--pk-moss) 55%, var(--pk-line));
}
.pk-card__badge {
  position: absolute;
  top: 0.65rem;
  inset-inline-end: 0.65rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--pk-pine);
  background: color-mix(in srgb, var(--pk-moss) 18%, var(--pk-paper));
  border: 1px solid color-mix(in srgb, var(--pk-moss) 35%, var(--pk-line));
  border-radius: 999px;
  padding: 0.2rem 0.55rem;
}
.pk-card__duration {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--pk-moss);
  margin: 0;
}
.pk-card h4 { margin: 0 0 0.35rem; font-size: 1.05rem; }
.pk-card__price {
  font-family: var(--pk-font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--pk-pine);
  margin: 0 0 0.25rem;
}
.pk-card__meta,
.pk-card__asins,
.pk-hint {
  color: var(--pk-muted);
  font-size: 0.85rem;
}
.pk-card p { margin: 0.35rem 0 0; font-size: 0.92rem; color: var(--pk-muted); }

.pk-kit-modes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
  margin: 0 0 1rem;
  padding: 0.3rem;
  border-radius: 14px;
  background: color-mix(in srgb, var(--pk-pine) 6%, var(--pk-paper));
  border: 1px solid var(--pk-line);
}

.pk-kit-mode {
  appearance: none;
  border: 0;
  background: transparent;
  border-radius: 10px;
  padding: 0.7rem 0.85rem;
  font: inherit;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--pk-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.pk-kit-mode.is-active {
  background: var(--pk-card);
  color: var(--pk-pine);
  box-shadow: var(--pk-shadow);
}

.pk-kit-pane { margin-top: 0.15rem; }

.pk-kit-addon {
  margin-top: 1.15rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--pk-line);
}

.pk-kit-addon__title {
  margin: 0 0 0.35rem;
  font-family: var(--pk-font-display);
  font-size: 1.05rem;
  color: var(--pk-pine);
}

.pk-cards--ebike {
  margin-top: 0.65rem;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .pk-cards--ebike {
    grid-template-columns: repeat(3, 1fr);
  }
}

.pk-custom-grid {
  display: grid;
  gap: 0.55rem;
  margin: 0.75rem 0 0.85rem;
}

@media (min-width: 640px) {
  .pk-custom-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.pk-custom-item {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  padding: 0.85rem 0.9rem;
  border: 1px solid var(--pk-line);
  border-radius: 12px;
  background: var(--pk-paper);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pk-custom-item:has(input:checked) {
  border-color: var(--pk-trail);
  box-shadow: 0 0 0 2px rgba(196, 92, 38, 0.18);
}

.pk-custom-item input {
  margin-top: 0.2rem;
  flex-shrink: 0;
}

.pk-custom-item strong {
  display: block;
  font-size: 0.95rem;
  color: var(--pk-pine);
}

.pk-custom-item .pk-custom-item__price {
  font-weight: 700;
  color: var(--pk-pine);
  font-size: 0.92rem;
}

.pk-custom-item span {
  display: block;
  color: var(--pk-muted);
  font-size: 0.8rem;
  margin-top: 0.15rem;
}

.pk-custom-total {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--pk-pine);
}

.pk-custom-total strong {
  font-family: var(--pk-font-display);
  font-size: 1.25rem;
}

.pk-checks {
  display: grid;
  gap: 0.55rem;
}

.pk-check {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--pk-line);
  border-radius: 12px;
  background: var(--pk-paper);
}

.pk-check strong { display: block; }
.pk-check span { color: var(--pk-muted); font-size: 0.85rem; }

.pk-summary__list {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}

.pk-summary__list li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.92rem;
  border-bottom: 1px dashed var(--pk-line);
  padding-bottom: 0.4rem;
}

.pk-summary__total {
  font-size: 1.05rem;
  margin: 0 0 1rem;
}

.pk-summary__total strong {
  font-family: var(--pk-font-display);
  font-size: 1.6rem;
  color: var(--pk-pine);
}

.pk-msg {
  margin-top: 0.75rem;
  color: var(--pk-trail-dark);
  font-size: 0.9rem;
}

.pk-included {
  margin: 0 0 0.85rem;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  background: color-mix(in srgb, var(--pk-moss) 12%, var(--pk-paper));
  border: 1px solid color-mix(in srgb, var(--pk-moss) 28%, var(--pk-line));
  color: var(--pk-pine);
  font-size: 0.95rem;
  font-weight: 600;
}

.pk-card--none {
  border-style: dashed;
  opacity: 0.92;
}
.pk-card--none .pk-card__price { display: none; }

.pk-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  max-width: 640px;
  position: relative;
}

.pk-timeline::before {
  content: "";
  position: absolute;
  inset-inline-start: 1.15rem;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 2px;
  background: linear-gradient(to bottom, var(--pk-trail), color-mix(in srgb, var(--pk-pine) 40%, transparent));
  opacity: 0.45;
}

.pk-timeline li {
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  gap: 0.9rem 1.1rem;
  align-items: start;
  padding: 0.85rem 0 1.15rem;
  position: relative;
}

.pk-timeline__num {
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--pk-pine);
  color: #f4f7f5;
  font-family: var(--pk-font-display);
  font-weight: 800;
  font-size: 0.95rem;
  position: relative;
  z-index: 1;
  box-shadow: 0 0 0 4px var(--pk-paper);
}

.pk-timeline strong {
  display: block;
  margin: 0.15rem 0 0.3rem;
  color: var(--pk-pine);
  font-size: 1.05rem;
}

.pk-timeline p {
  margin: 0;
  color: var(--pk-muted);
  font-size: 0.95rem;
  line-height: 1.5;
  max-width: 36rem;
}

.pk-steps {
  background: var(--pk-paper);
  border-radius: calc(var(--pk-radius) + 4px);
  border: 1px solid var(--pk-line);
  padding: 2rem 1.35rem 2.25rem;
  margin-top: 1rem;
  margin-bottom: 2rem;
}

.pk-card__unit {
  font-size: 0.75em;
  font-weight: 500;
  color: var(--pk-muted);
}

.pk-ops__cols {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-bottom: 1.5rem;
}

.pk-check-list {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--pk-muted);
}

.pk-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: var(--pk-radius);
  overflow: hidden;
  border: 1px solid var(--pk-line);
}

.pk-table th,
.pk-table td {
  text-align: left;
  padding: 0.75rem 0.85rem;
  border-bottom: 1px solid var(--pk-line);
  font-size: 0.92rem;
}

.pk-table th {
  background: var(--pk-pine);
  color: #fff;
  font-weight: 600;
}

.pk-catalog__group { margin-bottom: 2rem; }
.pk-catalog__group h3 {
  font-family: var(--pk-font-display);
  color: var(--pk-pine);
  margin: 0 0 0.85rem;
}

/* Soften default theme chrome on Packit pages */
.home .entry-header,
.page-template-default .entry-title {
  display: none;
}

/* —— Chrome: language + theme —— */
.pk-chrome {
  position: fixed;
  z-index: 1000;
  pointer-events: none;
}

/* Desktop: top-end, opposite typical logo/start edge */
@media (min-width: 922px) {
  .pk-chrome {
    top: 0.85rem;
    inset-inline-end: 0.85rem;
    inset-inline-start: auto;
  }
}

/*
 * Mobile: bottom-center floating pill.
 * Astra RTL puts the hamburger on the left; top-left chrome was covering it.
 */
@media (max-width: 921px) {
  .pk-chrome {
    top: auto;
    bottom: calc(0.85rem + env(safe-area-inset-bottom, 0px));
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
  .ast-mobile-menu-buttons,
  .menu-toggle,
  .ast-mobile-menu-trigger-minimal,
  button.menu-toggle,
  .ast-button-wrap {
    z-index: 10050 !important;
    position: relative;
  }
}
.pk-chrome__inner {
  pointer-events: auto;
  display: flex;
  gap: 0.4rem;
  align-items: center;
  padding: 0.35rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--pk-card) 88%, transparent);
  border: 1px solid var(--pk-line);
  box-shadow: var(--pk-shadow);
  backdrop-filter: blur(10px);
}
.pk-lang { display: inline-flex; gap: 0.2rem; }
.pk-chip {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--pk-ink);
  font: 600 0.8rem/1 var(--pk-font-body);
  padding: 0.45rem 0.7rem;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
}
.pk-chip.is-active,
.pk-chip[aria-pressed="true"] {
  background: var(--pk-pine);
  color: #f4f7f5;
}
.pk-chip:hover { background: color-mix(in srgb, var(--pk-pine) 12%, transparent); }
.pk-chip.is-active:hover,
.pk-chip[aria-pressed="true"]:hover { background: var(--pk-moss); color: #fff; }

.pk-how { max-width: 720px; margin: 0 auto; padding: 3rem 1.25rem; font-family: var(--pk-font-body); color: var(--pk-ink); }
.pk-how__list { margin: 0; padding-inline-start: 1.2rem; display: grid; gap: 0.75rem; line-height: 1.55; color: var(--pk-muted); }
.pk-how__list strong { color: var(--pk-pine); }

html[dir="ltr"] .pk-hero,
html[dir="ltr"] .pk-builder,
html[dir="ltr"] .pk-strip,
html[dir="ltr"] .pk-steps,
html[dir="ltr"] .pk-catalog,
html[dir="ltr"] .pk-ops,
html[dir="ltr"] .pk-how,
body.ltr .pk-hero,
body.ltr .pk-builder {
  direction: ltr;
  text-align: left;
}

/* —— Dark mode —— */
html[data-theme="dark"] {
  --pk-pine: #7dcea0;
  --pk-pine-deep: #0b1612;
  --pk-moss: #3f8f6b;
  --pk-trail: #e07a3d;
  --pk-trail-dark: #f0a06a;
  --pk-sky: #6eb3c4;
  --pk-ink: #e8f0eb;
  --pk-muted: #9bb0a4;
  --pk-paper: #121a17;
  --pk-card: #1a2420;
  --pk-line: rgba(232, 240, 235, 0.12);
  --pk-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  color-scheme: dark;
}
html[data-theme="dark"] body {
  background: #0d1411 !important;
  color: var(--pk-ink);
}
html[data-theme="dark"] .site-header,
html[data-theme="dark"] .main-header-bar,
html[data-theme="dark"] .ast-primary-header-bar {
  background: rgba(13, 20, 17, 0.92) !important;
}
html[data-theme="dark"] .main-header-menu a,
html[data-theme="dark"] .site-title a,
html[data-theme="dark"] .ast-builder-menu a {
  color: var(--pk-ink) !important;
}
html[data-theme="dark"] .pk-strip {
  background: #0a1210;
  color: #d7e8df;
}
html[data-theme="dark"] .pk-panel,
html[data-theme="dark"] .pk-summary,
html[data-theme="dark"] .pk-card,
html[data-theme="dark"] .pk-check,
html[data-theme="dark"] .pk-steps__list li {
  background: var(--pk-card);
  border-color: var(--pk-line);
}
html[data-theme="dark"] .pk-label input[type="date"] {
  background: #101816;
  color: var(--pk-ink);
  border-color: var(--pk-line);
}
html[data-theme="dark"] .pk-table th {
  background: #0f1c17;
}
html[data-theme="dark"] .pk-table {
  background: var(--pk-card);
}
html[data-theme="dark"] .woocommerce,
html[data-theme="dark"] .woocommerce-page,
html[data-theme="dark"] .entry-content,
html[data-theme="dark"] .ast-woocommerce-container,
html[data-theme="dark"] .woocommerce-cart-form,
html[data-theme="dark"] .cart-collaterals,
html[data-theme="dark"] .woocommerce-checkout,
html[data-theme="dark"] .woocommerce-MyAccount-content,
html[data-theme="dark"] .woocommerce-info,
html[data-theme="dark"] .woocommerce-message {
  color: var(--pk-ink);
}
html[data-theme="dark"] .woocommerce table.shop_table,
html[data-theme="dark"] .woocommerce-cart-form__contents,
html[data-theme="dark"] .cart_totals,
html[data-theme="dark"] .woocommerce-checkout-review-order,
html[data-theme="dark"] form.checkout,
html[data-theme="dark"] .woocommerce-billing-fields,
html[data-theme="dark"] .select2-container--default .select2-selection--single {
  background: var(--pk-card) !important;
  color: var(--pk-ink) !important;
  border-color: var(--pk-line) !important;
}
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  background: #101816;
  color: var(--pk-ink);
  border-color: var(--pk-line);
}
html[data-theme="dark"] .pk-btn--ghost {
  background: rgba(255,255,255,0.08);
}