/* =========================================================================
   Divekit components under a theme other than the divekit block theme.

   Trust pages, guides and the trade-in / price-match forms render their
   markup from divekit-core, but their CSS shipped with the divekit theme.
   These rules keep them readable under Ustone. Token values mirror the
   divekit theme.json palette.
   ========================================================================= */

:root {
  --dk-ink: #0A1620;
  --dk-graphite: #5B6B78;
  --dk-hairline: #DDE4E9;
  --dk-paper: #FFFFFF;
  --dk-mist: #F4F7F9;
  --dk-deep: #0D2436;
  --dk-signal-on-light: #007A63;
  --dk-alert-on-light: #C22E0D;
  --dk-r-card: 8px;
  --dk-font-display: Archivo, Inter, system-ui, sans-serif;
  --dk-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---------- Trust pages -------------------------------------------------- */
.dk-trust { padding-bottom: 56px; }

.dk-commitments {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  margin: 0 0 44px;
  background: var(--dk-hairline);
  border: 1px solid var(--dk-hairline);
  border-radius: var(--dk-r-card);
  overflow: hidden;
}
.dk-commitment {
  background: var(--dk-paper);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--dk-graphite);
}
.dk-commitment strong {
  font-family: var(--dk-font-display);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: -.02em;
  text-transform: none;
  color: var(--dk-ink);
}

.dk-trust__prose,
.dk-prose { max-width: 68ch; }
.dk-trust__prose h2 { margin: 40px 0 12px; font-size: 26px; line-height: 1.2; max-width: 26ch; text-wrap: balance; }
.dk-trust__prose h2:first-child { margin-top: 0; }
.dk-trust__prose p,
.dk-prose p { margin: 0 0 16px; }
.dk-trust__cta { margin-top: 28px; }

.dk-trust__form {
  padding: 28px;
  margin-top: 44px;
  max-width: 720px;
  background: var(--dk-paper);
  border: 1px solid var(--dk-hairline);
  border-radius: var(--dk-r-card);
}
.dk-trust__form h2 { font-size: 24px; margin: 4px 0 18px; }
.dk-trust__formrow { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.dk-trust__formrow .dk-input { flex: 1; min-width: 240px; }
.dk-trust__formresult { margin-top: 18px; }
.dk-trust__ok { color: var(--dk-signal-on-light); font-size: 15px; }
.dk-trust__prices,
.dk-trust__dealers { margin-top: 56px; }

/* ---------- Buttons, inputs, small parts ---------------------------------- */
.dk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 24px;
  border-radius: 999px;
  border: 1px solid var(--dk-ink);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  color: var(--dk-ink);
  background: transparent;
  cursor: pointer;
}
.dk-btn--primary { background: var(--dk-signal-on-light); border-color: var(--dk-signal-on-light); color: #fff; }
.dk-btn:hover { text-decoration: none; filter: brightness(.94); }
.dk-btn:focus-visible { outline: 2px solid var(--dk-signal-on-light); outline-offset: 2px; }

.dk-input {
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid var(--dk-hairline);
  border-radius: 6px;
  background: var(--dk-paper);
  color: var(--dk-ink);
  font: inherit;
}
.dk-input:focus,
.dk-select:focus { outline: 2px solid var(--dk-signal-on-light); outline-offset: 1px; border-color: transparent; }
.dk-select {
  width: 100%;
  min-height: 46px;
  padding: 0 12px;
  border: 1px solid var(--dk-hairline);
  border-radius: 6px;
  background: var(--dk-paper);
  color: var(--dk-ink);
  font: inherit;
}
.dk-label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--dk-ink); }
.dk-range { width: 100%; accent-color: var(--dk-signal-on-light); }
.dk-help,
.dk-meta { font-size: 13px; color: var(--dk-graphite); }
.dk-tradein__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 24px; }
.dk-brandwall { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.dk-brandwall__item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 72px;
  padding: 12px;
  border: 1px solid var(--dk-hairline);
  border-radius: var(--dk-r-card);
  background: var(--dk-paper);
  color: var(--dk-ink);
  text-decoration: none;
  font-weight: 600;
}

.dk-eyebrow {
  display: block;
  font-family: var(--dk-font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dk-graphite);
}
.dk-lede { font-size: 19px; line-height: 1.55; color: var(--dk-graphite); max-width: 62ch; }

.dk-chip {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--dk-hairline);
  border-radius: 999px;
  font-size: 14px;
  color: var(--dk-ink);
  text-decoration: none;
  background: var(--dk-paper);
}
.dk-chip:hover { border-color: var(--dk-deep); }

/* ---------- Guides: spec tables and FAQs ---------------------------------- */
.dk-table-scroll { overflow-x: auto; margin: 0 0 24px; }
.dk-spec-table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.dk-spec-table caption { text-align: left; font-size: 13px; color: var(--dk-graphite); padding-bottom: 8px; }
.dk-spec-table th,
.dk-spec-table td { padding: 10px 12px; border-bottom: 1px solid var(--dk-hairline); text-align: left; vertical-align: top; }
.dk-spec-table thead th { font-weight: 600; color: var(--dk-ink); background: var(--dk-mist); }
.dk-spec-table tbody th { color: var(--dk-graphite); font-weight: 400; }
.dk-spec-table tbody tr:last-child th,
.dk-spec-table tbody tr:last-child td { border-bottom: 0; }

.dk-faq { border-bottom: 1px solid var(--dk-hairline); max-width: 78ch; }
.dk-faq summary {
  padding: 18px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--dk-font-display);
  font-weight: 600;
  font-size: 17px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.dk-faq summary::-webkit-details-marker { display: none; }
.dk-faq summary::after { content: "+"; color: var(--dk-graphite); font-family: var(--dk-font-mono); flex: none; }
.dk-faq[open] summary::after { content: "\2013"; }
.dk-faq summary:focus-visible { outline: 2px solid var(--dk-signal-on-light); outline-offset: 2px; }
.dk-faq__a { padding-bottom: 18px; color: var(--dk-graphite); }
.dk-faq__a p { margin: 0; }

/* ---------- Product page ------------------------------------------------- */
.dk-pdp-brand { margin: 0 0 6px; font-family: var(--dk-font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.dk-pdp-brand a { color: var(--dk-signal-on-light); text-decoration: none; }
.dk-pdp-brand a:hover { text-decoration: underline; }

.dk-keyfacts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 18px 0;
  background: var(--dk-hairline);
  border: 1px solid var(--dk-hairline);
  border-radius: var(--dk-r-card);
  overflow: hidden;
}
.dk-keyfacts > div { background: var(--dk-paper); padding: 12px 14px; min-width: 0; }
.dk-keyfacts dt { margin: 0 0 2px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--dk-graphite); }
.dk-keyfacts dd { margin: 0; font-weight: 600; color: var(--dk-ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

.dk-dealer { margin: 0 0 16px; padding-left: 22px; position: relative; font-size: 14px; color: var(--dk-signal-on-light); font-weight: 600; }
.dk-dealer::before { content: "\2713"; position: absolute; left: 0; top: 0; }

.dk-mpn { display: block; }
.dk-mpn span { color: var(--dk-ink); }

.dk-spec-table__group th {
  padding-top: 18px;
  font-family: var(--dk-font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dk-ink) !important;
  font-weight: 600 !important;
  background: transparent;
}
.dk-size-table td,
.dk-size-table thead th { text-align: center; }
.dk-tab-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

/* ---------- Shop filters and empty state ---------------------------------- */
.dk-facet { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.dk-facet__opt {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  padding: 4px 0;
  color: var(--dk-ink);
  text-decoration: none;
  font-size: 14px;
}
.dk-facet__box {
  flex: none;
  width: 18px;
  height: 18px;
  border: 1.5px solid #9AA7B1;
  border-radius: 4px;
  background: var(--dk-paper);
}
.dk-facet__opt.is-active .dk-facet__box {
  border-color: var(--dk-signal-on-light);
  background: var(--dk-signal-on-light) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.dk-facet__name { flex: 1; }
.dk-facet__count { font-size: 12px; color: var(--dk-graphite); font-variant-numeric: tabular-nums; }
.dk-facet__opt:hover .dk-facet__name { text-decoration: underline; }
.dk-facet__opt:focus-visible { outline: 2px solid var(--dk-signal-on-light); outline-offset: 2px; }
.dk-facet__clear { margin: 8px 0 0; font-size: 13px; }
.dk-facet__clear a { color: var(--dk-signal-on-light); }

.dk-empty-shop { margin: 8px 0 32px; }
.dk-empty-shop p { margin: 0 0 14px; color: var(--dk-graphite); }

@media (max-width: 781px) {
  .dk-commitment strong { font-size: 22px; }
  .dk-trust__prose h2 { font-size: 22px; }
}

/* ── Ustone mobile header ────────────────────────────────────────────────────
   Below Ustone's lg breakpoint the header-main row is a fixed 56px, but its
   .header-inner is flex-wrap:wrap with a 24px gap. The text wordmark (no logo
   file yet) is ~330px at 34px, so hamburger + wordmark + "Cart $0.00" wrap
   onto three rows that spill over the hero. Keep everything on one row:
   no wrap, a phone-sized wordmark, and an icon-only cart. ─────────────────── */
@media (max-width: 1023px) {
  .header .header-main .header-inner { flex-wrap: nowrap !important; gap: 12px; }
  .header .header-main .header-inner > .column { min-width: 0; }
  .header .header-main .brand { min-width: 0; overflow: hidden; }
  .header .header-main .brand a {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .header .header-main .brand-text {
    font-size: 18px !important;
    letter-spacing: .08em !important;
    line-height: 1.2;
  }
  .header .header-main .action-button-mobile .action-cart .action-link > :not(.action-icon) {
    display: none;
  }
}
@media (max-width: 380px) {
  .header .header-main .brand-text { font-size: 16px !important; }
}

/* ── Ustone cookie bar on phones ─────────────────────────────────────────────
   Ustone sets `.gdpr-inner p { line-height: 0 }` for its single-line style-1
   bar; on a 375px screen the sentence wraps to two lines that then overprint
   each other. Give the copy a real line-height and let the bar grow. ─────── */
@media (max-width: 1023px) {
  .gdpr.style-1 .gdpr-inner { height: auto; padding: 12px 16px; }
  .gdpr.style-1 .gdpr-inner p { line-height: 1.4; font-size: 13px; }
}

/* Phone header action row: search toggle (injected by mu-plugins/dk-mobile-search.php)
   sits beside the cart; Ustone gives this row no gap of its own. */
@media (max-width: 1023px) {
  .header .header-main .action-button-mobile { gap: 14px; }
  .header .header-main .action-button-mobile .dk-mobile-search .action-link { display: block; line-height: 0; }
}

/* Search field cloned into the top of the hamburger drawer (dk-mobile-search.php). */
.drawer.menu-drawer .dk-drawer-search { margin: 0 0 22px; }
.drawer.menu-drawer .dk-drawer-search .search-input { width: 100%; }

/* ── Premium home trust bar (USP strip #60777bd) ──────────────────────────── */
.elementor-element-60777bd{
  background:#F7FAFB;
  border-top:1px solid #E4EDF2;
  border-bottom:1px solid #E4EDF2;
}
.elementor-element-60777bd .iconbox{ align-items:center !important; }
.elementor-element-60777bd .iconbox-icon{
  width:54px;height:54px;flex:0 0 54px;border-radius:50%;
  background-color:rgba(31,156,144,.10);
  background-repeat:no-repeat;background-position:center;background-size:26px 26px;
  transition:background-color .2s ease;
}
.elementor-element-60777bd .iconbox:hover .iconbox-icon{ background-color:rgba(31,156,144,.18); }
.elementor-element-60777bd .entry-title{ font-size:16px !important;color:#0C1F32 !important;margin-bottom:3px; }
.elementor-element-60777bd .iconbox-detail p{ color:#5B7385 !important;line-height:1.45; }
.elementor-element-c39940a .iconbox-icon{ background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F9C90' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M3 6.5h10.5v9H3z'/><path d='M13.5 9.5h4l3 3v3h-7z'/><circle cx='7.5' cy='18' r='1.5'/><circle cx='17' cy='18' r='1.5'/></svg>"); }
.elementor-element-61e13ff .iconbox-icon{ background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F9C90' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M20 12a8 8 0 1 1-2.34-5.66'/><polyline points='20 4 20 8.5 15.5 8.5'/></svg>"); }
.elementor-element-b3adcc5 .iconbox-icon{ background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F9C90' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l7 2.6v5.4c0 4.4-3 7.4-7 8.9-4-1.5-7-4.5-7-8.9V5.6z'/><polyline points='9 12 11.3 14.3 15.3 10'/></svg>"); }
@media (min-width:1025px){
  .elementor-element-61e13ff,.elementor-element-b3adcc5{ border-left:1px solid #E4EDF2;padding-left:40px; }
}