/* Kidarun site header — multi-row e-commerce header, responsive */

.kdr-header,
.kdr-header * { box-sizing: border-box; }

.kdr-header {
  --kdr-red: #E0122B;
  --kdr-red-dark: #B00E22;
  --kdr-ink: #14110E;
  --kdr-ink-soft: #5C5648;
  --kdr-muted: #8A8272;
  --kdr-cream: #F7F4ED;
  --kdr-line: #E7DFCD;
  --kdr-white: #FFFFFF;
  position: relative;
  z-index: 900;
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  color: var(--kdr-ink);
  background: var(--kdr-white);
}

.kdr-wrap {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 20px;
  width: 100%;
}

.kdr-header a { text-decoration: none; color: inherit; }
.kdr-header ul { list-style: none; margin: 0; padding: 0; }
.kdr-header button { font: inherit; cursor: pointer; }
.kdr-header :focus-visible { outline: 2px solid var(--kdr-red); outline-offset: 2px; }

/* ---------------- top bar ---------------- */
.kdr-top {
  background: var(--kdr-ink);
  color: #E9E3D6;
  font-size: 13px;
}
.kdr-top__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 42px;
}
.kdr-top__note { display: flex; align-items: center; gap: 8px; }
.kdr-top__note b { color: #fff; font-weight: 600; }
.kdr-top__links { display: flex; align-items: center; gap: 22px; }
.kdr-top__links a { opacity: .85; transition: opacity .15s ease, color .15s ease; }
.kdr-top__links a:hover { opacity: 1; color: #fff; }
.kdr-top__phone { display: inline-flex; align-items: center; gap: 7px; color: #fff; font-weight: 600; }

/* ---------------- sticky shell ---------------- */
.kdr-sticky { background: var(--kdr-white); }
.kdr-header.is-stuck .kdr-sticky {
  position: fixed;
  top: 0; left: 0; right: 0;
  box-shadow: 0 6px 24px rgba(20,17,14,.10);
  z-index: 950;
  animation: kdrDrop .22s ease-out;
}
@keyframes kdrDrop { from { transform: translateY(-100%); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .kdr-header.is-stuck .kdr-sticky { animation: none; } }
.kdr-spacer { display: none; }
.kdr-header.is-stuck .kdr-spacer { display: block; }

/* admin bar offset */
.admin-bar .kdr-header.is-stuck .kdr-sticky { top: 32px; }
@media (max-width: 782px) { .admin-bar .kdr-header.is-stuck .kdr-sticky { top: 46px; } }

/* ---------------- main row ---------------- */
.kdr-main { border-bottom: 1px solid var(--kdr-line); }
.kdr-main__row {
  display: flex;
  align-items: center;
  gap: 30px;
  min-height: 94px;
  padding: 12px 0;
}
.kdr-header.is-stuck .kdr-main__row { min-height: 72px; padding: 8px 0; }

.kdr-logo { flex: 0 0 auto; display: block; }
.kdr-logo img { display: block; height: 56px; width: auto; max-width: 210px; transition: height .18s ease; }
.kdr-header.is-stuck .kdr-logo img { height: 44px; }

/* search */
.kdr-search { flex: 1 1 auto; min-width: 0; }
.kdr-search__form {
  display: flex;
  align-items: stretch;
  border: 2px solid var(--kdr-ink);
  border-radius: 0;
  background: #fff;
  overflow: hidden;
}
.kdr-search__cat {
  flex: 0 0 auto;
  border: 0;
  border-right: 1px solid var(--kdr-line);
  background: var(--kdr-cream);
  padding: 0 34px 0 14px;
  font-size: 13.5px;
  color: var(--kdr-ink-soft);
  max-width: 190px;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235C5648' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
}
.kdr-search__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  padding: 13px 16px;
  font-size: 15px;
  color: var(--kdr-ink);
  background: #fff;
}
.kdr-search__input::placeholder { color: #A79E8C; }
.kdr-search__input:focus { outline: none; }
.kdr-search__btn {
  flex: 0 0 auto;
  border: 0;
  background: var(--kdr-red);
  color: #fff;
  padding: 0 24px;
  font-size: 14.5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  transition: background .15s ease;
}
.kdr-search__btn:hover { background: var(--kdr-red-dark); }
.kdr-search__pop {
  margin-top: 7px;
  font-size: 12px;
  color: var(--kdr-muted);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.kdr-search__pop a { color: var(--kdr-ink-soft); }
.kdr-search__pop a:hover { color: var(--kdr-red); text-decoration: underline; }

/* action cluster */
.kdr-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 24px; }
.kdr-action { display: inline-flex; align-items: center; gap: 11px; }
.kdr-action__ico {
  width: 42px; height: 42px;
  flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: 0;
  background: var(--kdr-cream);
  color: var(--kdr-ink);
  position: relative;
  transition: background .15s ease, color .15s ease;
}
.kdr-action:hover .kdr-action__ico { background: var(--kdr-red); color: #fff; }
.kdr-action__txt { display: flex; flex-direction: column; line-height: 1.25; }
.kdr-action__label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--kdr-muted); }
.kdr-action__value { font-size: 14px; font-weight: 600; color: var(--kdr-ink); white-space: nowrap; }
.kdr-cart__count {
  position: absolute;
  top: -3px; right: -3px;
  min-width: 20px; height: 20px;
  padding: 0 5px;
  border-radius: 0;
  background: var(--kdr-red);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: grid; place-items: center;
  border: 2px solid #fff;
}
.kdr-action:hover .kdr-cart__count { background: var(--kdr-ink); }

/* ---------------- nav row ---------------- */
.kdr-nav { background: #fff; border-bottom: 1px solid var(--kdr-line); }
.kdr-nav__row { display: flex; align-items: center; gap: 28px; min-height: 56px; }

.kdr-cat { position: relative; flex: 0 0 auto; }
.kdr-cat__btn {
  display: inline-flex; align-items: center; gap: 11px;
  background: var(--kdr-red);
  color: #fff;
  border: 0;
  padding: 15px 22px;
  font-size: 14.5px;
  font-weight: 600;
  border-radius: 0;
  min-width: 260px;
}
.kdr-cat__btn .kdr-cat__caret { margin-left: auto; transition: transform .18s ease; }
.kdr-cat.is-open .kdr-cat__btn .kdr-cat__caret { transform: rotate(180deg); }
.kdr-cat__panel {
  position: absolute;
  top: 100%; left: 0;
  min-width: 260px;
  background: #fff;
  border: 1px solid var(--kdr-line);
  border-top: 0;
  border-radius: 0;
  box-shadow: 0 14px 34px rgba(20,17,14,.12);
  padding: 8px 0;
  display: none;
  z-index: 60;
}
.kdr-cat.is-open .kdr-cat__panel { display: block; }
.kdr-cat__panel a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 20px;
  font-size: 14.5px;
  color: var(--kdr-ink-soft);
  transition: background .12s ease, color .12s ease;
}
.kdr-cat__panel a:hover { background: var(--kdr-cream); color: var(--kdr-red); }
.kdr-cat__panel .kdr-cat__count { font-size: 12px; color: var(--kdr-muted); }

.kdr-menu { display: flex; align-items: center; gap: 30px; }
.kdr-menu > li { position: relative; }
.kdr-menu > li > a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 17px 0;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--kdr-ink);
  position: relative;
}
.kdr-menu > li > a::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 10px;
  height: 2px; background: var(--kdr-red);
  transform: scaleX(0); transform-origin: left;
  transition: transform .18s ease;
}
.kdr-menu > li:hover > a::after,
.kdr-menu > li.current-menu-item > a::after { transform: scaleX(1); }

.kdr-menu .sub-menu {
  position: absolute;
  top: 100%; left: 0;
  min-width: 220px;
  background: #fff;
  border: 1px solid var(--kdr-line);
  border-radius: 0;
  box-shadow: 0 14px 34px rgba(20,17,14,.12);
  padding: 8px 0;
  opacity: 0; visibility: hidden;
  transform: translateY(6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
  z-index: 60;
}
.kdr-menu > li:hover > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.kdr-menu .sub-menu a { display: block; padding: 10px 18px; font-size: 14px; color: var(--kdr-ink-soft); }
.kdr-menu .sub-menu a:hover { background: var(--kdr-cream); color: var(--kdr-red); }
.kdr-menu .sub-menu .sub-menu { display: none; }

.kdr-nav__cod {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 13px; font-weight: 600;
  color: var(--kdr-red);
  white-space: nowrap;
}

/* ---------------- mobile bar ---------------- */
.kdr-burger,
.kdr-msearch { display: none; }

.kdr-burger {
  width: 44px; height: 44px;
  border: 1px solid var(--kdr-line);
  background: #fff;
  border-radius: 0;
  place-items: center;
  color: var(--kdr-ink);
}

/* ---------------- drawer ---------------- */
.kdr-backdrop {
  position: fixed; inset: 0;
  background: rgba(20,17,14,.5);
  opacity: 0; visibility: hidden;
  transition: opacity .22s ease, visibility .22s;
  z-index: 1000;
}
.kdr-backdrop.is-open { opacity: 1; visibility: visible; }

.kdr-drawer {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: 88%; max-width: 360px;
  background: #fff;
  transform: translateX(-100%);
  transition: transform .26s cubic-bezier(.22,.61,.36,1);
  z-index: 1001;
  display: flex; flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.kdr-drawer.is-open { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) { .kdr-drawer { transition: none; } }

.kdr-drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--kdr-line);
  position: sticky; top: 0; background: #fff; z-index: 2;
}
.kdr-drawer__head img { height: 42px; width: auto; }
.kdr-drawer__close {
  width: 38px; height: 38px;
  border: 1px solid var(--kdr-line);
  background: #fff; border-radius: 0;
  display: grid; place-items: center;
  color: var(--kdr-ink);
}
.kdr-drawer__sec { padding: 14px 18px; border-bottom: 1px solid var(--kdr-line); }
.kdr-drawer__title {
  font-size: 11px; text-transform: uppercase; letter-spacing: .09em;
  color: var(--kdr-muted); margin: 0 0 10px;
}
.kdr-drawer__list a {
  display: block;
  padding: 11px 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--kdr-ink);
  border-bottom: 1px solid #F2ECDF;
}
.kdr-drawer__list li:last-child a { border-bottom: 0; }
.kdr-drawer__list a:hover { color: var(--kdr-red); }
.kdr-drawer__foot { padding: 18px; margin-top: auto; background: var(--kdr-cream); }
.kdr-drawer__foot a { display: block; font-size: 14px; padding: 5px 0; color: var(--kdr-ink); }
.kdr-drawer__foot .kdr-drawer__phone { font-weight: 700; color: var(--kdr-red); font-size: 17px; }

/* ---------------- responsive ---------------- */
@media (max-width: 1200px) {
  .kdr-main__row { gap: 22px; }
  .kdr-actions { gap: 18px; }
  .kdr-action--phone { display: none; }
  .kdr-cat__btn { min-width: 220px; }
  .kdr-menu { gap: 22px; }
}

@media (max-width: 991px) {
  .kdr-top__note { display: none; }
  .kdr-top__row { justify-content: center; min-height: 38px; }
  .kdr-top__links { gap: 18px; }

  .kdr-nav { display: none; }
  .kdr-burger { display: grid; }

  .kdr-main__row { gap: 14px; min-height: 72px; flex-wrap: wrap; }
  .kdr-header.is-stuck .kdr-main__row { min-height: 64px; }
  .kdr-logo { margin-right: auto; }
  .kdr-logo img { height: 46px; }
  .kdr-header.is-stuck .kdr-logo img { height: 40px; }

  /* search drops to its own full-width row */
  .kdr-search { order: 10; flex: 1 0 100%; }
  .kdr-search__pop { display: none; }
  .kdr-action__txt { display: none; }
  .kdr-actions { gap: 12px; }
}

@media (max-width: 600px) {
  .kdr-wrap { padding: 0 14px; }
  .kdr-top__links { gap: 14px; font-size: 12px; }
  .kdr-search__cat { display: none; }
  .kdr-search__btn { padding: 0 16px; }
  .kdr-search__btn span { display: none; }
  .kdr-logo img { height: 40px; }
}

/* ---------------- instant search ---------------- */
.kdr-search { position: relative; }

.kdr-ac {
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  background: #fff;
  border: 1px solid var(--kdr-line);
  border-radius: 0;
  box-shadow: 0 18px 44px rgba(20,17,14,.16);
  z-index: 80;
  overflow: hidden;
  max-height: min(70vh, 520px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.kdr-ac[hidden] { display: none; }

.kdr-ac__state {
  padding: 18px 20px;
  font-size: 14px;
  color: var(--kdr-muted);
  display: flex; align-items: center; gap: 10px;
}
.kdr-ac__spin {
  width: 16px; height: 16px;
  border: 2px solid var(--kdr-line);
  border-top-color: var(--kdr-red);
  border-radius: 50%;
  animation: kdrSpin .7s linear infinite;
  flex: 0 0 auto;
}
@keyframes kdrSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .kdr-ac__spin { animation-duration: 2s; } }

.kdr-ac__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 16px;
  border-bottom: 1px solid #F4EEE1;
  color: var(--kdr-ink);
  transition: background .12s ease;
}
.kdr-ac__item:last-of-type { border-bottom: 0; }
.kdr-ac__item:hover,
.kdr-ac__item.is-active { background: var(--kdr-cream); }

.kdr-ac__thumb {
  width: 52px; height: 52px;
  flex: 0 0 auto;
  border-radius: 0;
  overflow: hidden;
  background: var(--kdr-cream);
  display: grid; place-items: center;
}
.kdr-ac__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.kdr-ac__body { min-width: 0; flex: 1 1 auto; }
.kdr-ac__name {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  margin: 0 0 3px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.kdr-ac__name mark { background: #FFE9C9; color: inherit; padding: 0 1px; border-radius: 0; }
.kdr-ac__meta { font-size: 12.5px; color: var(--kdr-muted); display: flex; gap: 10px; flex-wrap: wrap; }
.kdr-ac__price { color: var(--kdr-red); font-weight: 700; font-size: 13.5px; }
.kdr-ac__price del { color: var(--kdr-muted); font-weight: 500; margin-right: 5px; }
.kdr-ac__price ins { text-decoration: none; }

.kdr-ac__all {
  display: block;
  padding: 13px 16px;
  text-align: center;
  font-size: 13.5px;
  font-weight: 700;
  color: #fff !important;
  background: var(--kdr-ink);
  position: sticky; bottom: 0;
}
.kdr-ac__all:hover { background: var(--kdr-red); color: #fff !important; }

@media (max-width: 991px) {
  .kdr-ac { max-height: min(60vh, 420px); }
  .kdr-ac__thumb { width: 46px; height: 46px; }
}

/* ------------------------------------------------------------------
 * Site-wide: square form controls.
 * Hello Elementor's reset.css sets border-radius:3px on every input,
 * select and textarea. Overriding here rather than editing the theme
 * file, which a theme update would overwrite.
 * ------------------------------------------------------------------ */
input[type=date],
input[type=email],
input[type=number],
input[type=password],
input[type=search],
input[type=tel],
input[type=text],
input[type=time],
input[type=url],
select,
textarea {
  border-radius: 0 !important;
}

/* ------------------------------------------------------------------
 * KIDARUN-SQUARE-BUTTONS
 * Hello Elementor's reset.css rounds every button (border-radius:3px)
 * and WooCommerce rounds its own .button family. Overridden here
 * rather than in the theme/plugin, which an update would overwrite.
 * ------------------------------------------------------------------ */
[type=button],
[type=submit],
[type=reset],
button,
.button,
a.button,
button.button,
input.button,
#respond input#submit,
.wp-element-button,
.wp-block-button__link {
  border-radius: 0 !important;
}

/* ------------------------------------------------------------------
 * KIDARUN-ROW-ALIGN
 * The "Popular:" hint line lives inside .kdr-search, so it counted
 * toward that flex item's height. With align-items:center the row
 * centred form+hints as one block, lifting the search form above the
 * logo / action-cluster centreline and pushing the hints past the row
 * border into the nav. Taking the hints out of flow makes .kdr-search
 * exactly as tall as its form, so all three columns share one
 * centreline; the row's extra bottom padding reserves the hint space.
 * ------------------------------------------------------------------ */
@media (min-width: 992px) {
  .kdr-main__row {
    min-height: 104px;
    padding: 14px 0 30px;
    align-items: center;
  }
  .kdr-search__pop {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 7px;
    flex-wrap: nowrap;
    overflow: hidden;
  }
  /* No room for the hint line in the condensed sticky row. */
  .kdr-header.is-stuck .kdr-main__row { min-height: 72px; padding: 8px 0; }
  .kdr-header.is-stuck .kdr-search__pop { display: none; }
}

/* ------------------------------------------------------------------
 * KIDARUN-SR-TEXT
 * The header's own visually-hidden labels were relying on
 * .screen-reader-text being defined by WooCommerce / Elementor /
 * wp-block-library. If any of those is dequeued on a page, the label
 * "Search products" renders as visible text in the header. Define it
 * locally so the header is self-contained.
 * ------------------------------------------------------------------ */
.kdr-header .screen-reader-text,
.kdr-drawer .screen-reader-text {
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
}

/* ------------------------------------------------------------------
 * KIDARUN-MOBILE-CENTRE
 * On mobile the row was flex with .kdr-logo { margin-right: auto },
 * which pushed every spare pixel to the logo's right and pinned the
 * logo against the burger (logo centre 132px vs row centre 195px).
 * A three-column grid with equal 1fr side rails centres the logo
 * against the ROW, not against the leftover space. Explicit grid
 * areas because the search sits before .kdr-actions in the DOM.
 * ------------------------------------------------------------------ */
@media (max-width: 991px) {
  .kdr-main__row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }
  .kdr-burger  { grid-area: 1 / 1 / 2 / 2; justify-self: start; }
  .kdr-logo    { grid-area: 1 / 2 / 2 / 3; justify-self: center; margin-right: 0; }
  .kdr-actions { grid-area: 1 / 3 / 2 / 4; justify-self: end; }
  .kdr-search  { grid-area: 2 / 1 / 3 / 4; }
}

/* ------------------------------------------------------------------
 * KIDARUN-NARROW-RAILS
 * The 1fr side rails only centre the logo while each rail is wide
 * enough to hold the action cluster. Below ~390px the cluster
 * (2 x 42px + gap) outgrew its rail and shoved the logo left
 * (-4.4px at 360, -24.4px at 320). Tighten the cluster and the
 * column gap so the rails stay equal down to 320px.
 * ------------------------------------------------------------------ */
@media (max-width: 991px) {
  .kdr-actions { gap: 6px; }
}
@media (max-width: 420px) {
  .kdr-main__row { column-gap: 10px; }
}
@media (max-width: 360px) {
  .kdr-logo img { height: 34px; }
  .kdr-action__ico { width: 38px; height: 38px; }
}

/* ------------------------------------------------------------------
 * KIDARUN-ROW-PADDING
 * Requested 10px padding on .kdr-wrap.kdr-main__row. Vertical padding
 * was 0, so the burger sat flush against the row's top edge.
 * Scoped to mobile on purpose: .kdr-wrap.kdr-main__row (0,2,0) beats
 * the .kdr-main__row (0,1,0) rule that carries the desktop
 * "padding: 14px 0 30px" reserving space for the Popular hint line,
 * so an unscoped rule here would silently undo that.
 * ------------------------------------------------------------------ */
@media (max-width: 991px) {
  .kdr-wrap.kdr-main__row { padding: 10px; }
}

/* ------------------------------------------------------------------
 * KIDARUN-STUCK-PADDING
 * Two padding shorthands were wiping .kdr-wrap's horizontal padding:
 *   .kdr-main__row            { padding: 14px 0 30px }   (mine)
 *   .kdr-header.is-stuck ...  { padding: 8px 0 }         (original)
 * Result: main row sat at left:0 while the top bar and nav sat at
 * left:20 - flush to the screen edge on any viewport under 1320px,
 * and in the stuck state at EVERY width, mobile included.
 * Set the axes separately so the side padding can't be clobbered.
 * ------------------------------------------------------------------ */
.kdr-header .kdr-wrap.kdr-main__row {
  padding-left: 20px;
  padding-right: 20px;
}
.kdr-header.is-stuck .kdr-wrap.kdr-main__row {
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 20px;
  padding-right: 20px;
}

/* Mobile keeps the requested 10px on all four sides, stuck or not. */
@media (max-width: 991px) {
  .kdr-header .kdr-wrap.kdr-main__row,
  .kdr-header.is-stuck .kdr-wrap.kdr-main__row {
    padding: 10px;
  }
}

/* ------------------------------------------------------------------
 * KIDARUN-ICON-BTN-CENTRE
 * Hello Elementor's reset puts padding:.5rem 1rem on every button.
 * These are fixed-size square icon buttons (border-box), so that
 * padding collapses the content box - 44px burger left only 10px of
 * usable width for a 22px icon, 38px close button only 4px for a
 * 20px icon - and place-items:center could no longer centre it.
 * The burger icon sat 6px right of centre. Zero the padding so the
 * content box matches the button box and the icon truly centres.
 * ------------------------------------------------------------------ */
.kdr-burger,
.kdr-drawer__close,
.kdr-msearch {
  padding: 0;
  line-height: 0;
}

/* ------------------------------------------------------------------
 * KIDARUN-ICON-BTN-HOVER
 * Hover/focus treatment for the burger and the drawer close button,
 * matching the action cluster (.kdr-action:hover .kdr-action__ico):
 * red fill, white icon. The icons are stroke="currentColor", so
 * setting `color` repaints them.
 *
 * This also overrides Hello Elementor's reset, which turns every
 * button #c36 on hover - an off-brand pink, not --kdr-red.
 *
 * Focus ring is deliberately ink, not the header's usual red: the
 * red ring would be invisible against the red hover fill. The drawer
 * close also had no ring at all, since .kdr-header :focus-visible
 * does not reach .kdr-drawer.
 * ------------------------------------------------------------------ */
.kdr-burger,
.kdr-drawer__close {
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.kdr-burger:hover,
.kdr-burger:focus-visible,
.kdr-drawer__close:hover,
.kdr-drawer__close:focus-visible {
  background-color: var(--kdr-red);
  border-color: var(--kdr-red);
  color: #fff;
}

.kdr-burger:focus-visible,
.kdr-drawer__close:focus-visible {
  outline: 2px solid var(--kdr-ink);
  outline-offset: 2px;
}

.kdr-burger:active,
.kdr-drawer__close:active {
  background-color: var(--kdr-red-dark);
  border-color: var(--kdr-red-dark);
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .kdr-burger,
  .kdr-drawer__close { transition: none; }
}

/* ------------------------------------------------------------------
 * KIDARUN-TOKEN-SCOPE
 * The --kdr-* tokens were declared on .kdr-header only, but the
 * mobile drawer and backdrop render OUTSIDE that element (siblings
 * under div.hfeed.site), so all 15 var(--kdr-*) uses in the drawer
 * resolved to nothing:
 *   - .kdr-drawer__close  border + icon fell back to currentColor,
 *     rendering a WHITE close button on a WHITE drawer (invisible)
 *   - .kdr-drawer__sec    dividers fell back to near-black instead
 *     of the pale --kdr-line
 *   - .kdr-drawer__title  lost --kdr-muted
 * Promote the tokens to :root so anything can resolve them. The
 * .kdr-header block still declares them; this is the fallback.
 * ------------------------------------------------------------------ */
:root {
  --kdr-red: #E0122B;
  --kdr-red-dark: #B00E22;
  --kdr-ink: #14110E;
  --kdr-ink-soft: #5C5648;
  --kdr-muted: #8A8272;
  --kdr-cream: #F7F4ED;
  --kdr-line: #E7DFCD;
  --kdr-white: #FFFFFF;
}

/* The theme reset forces background-color:transparent on every
 * button; restore the drawer close button's own white fill. */
.kdr-drawer__close { background-color: var(--kdr-white); }

/* ------------------------------------------------------------------
 * KIDARUN-ICON-BTN-ROTATE
 * Spin the burger / drawer-close icons on hover and keyboard focus.
 *
 * 180deg is deliberate. Both glyphs are rotationally symmetric - the
 * burger's three evenly spaced lines map onto themselves at 180deg,
 * and the X maps onto itself at 90deg - so the icon spins through the
 * transition and lands identical, with no half-rotated end state.
 * (90deg on the burger would leave the lines vertical, which reads as
 * broken rather than as a hover effect.)
 *
 * display:block avoids the inline baseline gap; the button is a grid
 * with place-items:center, so it stays centred.
 * ------------------------------------------------------------------ */
.kdr-burger svg,
.kdr-drawer__close svg {
  display: block;
  transform-origin: 50% 50%;
  transition: transform .35s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}

.kdr-burger:hover svg,
.kdr-burger:focus-visible svg,
.kdr-drawer__close:hover svg,
.kdr-drawer__close:focus-visible svg {
  transform: rotate(180deg);
}

/* No spin for users who ask for reduced motion - the colour change
 * still signals the hover. */
@media (prefers-reduced-motion: reduce) {
  .kdr-burger svg,
  .kdr-drawer__close svg {
    transition: none;
  }
  .kdr-burger:hover svg,
  .kdr-burger:focus-visible svg,
  .kdr-drawer__close:hover svg,
  .kdr-drawer__close:focus-visible svg {
    transform: none;
  }
}

/* ------------------------------------------------------------------
 * KIDARUN-ICON-BTN-TOUCH
 * .kdr-burger is display:none by default and only becomes visible in
 * @media (max-width: 991px). The drawer close is only reachable via
 * that burger. So BOTH are mobile-only controls - and real phones
 * report (hover: none), where :hover never fires. A hover-only spin
 * is therefore invisible on the exact devices these buttons exist on.
 *
 * Drive the same rotation from states that do fire on touch.
 * :active covers the press itself; aria-expanded is set by the header
 * JS when the drawer opens.
 * ------------------------------------------------------------------ */
.kdr-burger:active svg,
.kdr-drawer__close:active svg,
.kdr-burger[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.kdr-burger[aria-expanded="true"] {
  background-color: var(--kdr-red);
  border-color: var(--kdr-red);
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .kdr-burger:active svg,
  .kdr-drawer__close:active svg,
  .kdr-burger[aria-expanded="true"] svg {
    transform: none;
  }
}

/* ------------------------------------------------------------------
 * KIDARUN-HERO
 * Replaces the old .ffe-hero layout. New markup uses .kdr-hero*
 * classes so it does not inherit any of the old .ffe-hero rules and
 * there is no cascade fight with them.
 *
 * Slides stack in a single CSS grid cell (grid-area: 1/1) rather than
 * position:absolute, so the section height is driven by the tallest
 * slide and never collapses.
 *
 * Buttons are square on purpose: the site-wide rule set earlier
 * (border-radius: 0 !important on every button) is the house style,
 * so the reference's pill CTA and round arrows are squared to match.
 * ------------------------------------------------------------------ */
.kdr-hero {
  position: relative;
  overflow: hidden;
  background: var(--kdr-red);
}

.kdr-hero__slides {
  display: grid;
}

.kdr-hero__slide {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  min-height: clamp(340px, 32vw, 500px);
  background: var(--kdr-hero-bg, var(--kdr-red));
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s ease, visibility .45s ease;
}
.kdr-hero__slide.is-active {
  opacity: 1;
  visibility: visible;
}

/* ---- copy side ---- */
.kdr-hero__copy {
  display: flex;
  align-items: center;
  padding: clamp(28px, 4.5vw, 72px);
}
.kdr-hero__copyinner { max-width: 32rem; }

.kdr-hero__badge {
  display: inline-block;
  margin: 0 0 18px;
  padding: 7px 13px;
  background: var(--kdr-cream);
  color: var(--kdr-ink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1;
}

.kdr-hero__title {
  margin: 0 0 20px;
  color: #fff;
  line-height: 1.1;
  font-size: clamp(1.9rem, 3.4vw, 3.25rem);
}
.kdr-hero__tl,
.kdr-hero__tb { display: block; }
.kdr-hero__tl { font-weight: 300; }
.kdr-hero__tb { font-weight: 800; }

.kdr-hero__price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 28px;
  color: #fff;
}
.kdr-hero__pricepre { font-size: 1rem; opacity: .85; }
.kdr-hero__priceval {
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -.01em;
}

.kdr-hero__cta {
  display: inline-block;
  padding: 15px 34px;
  background: #fff;
  color: var(--kdr-ink);
  border: 2px solid #fff;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  transition: background .18s ease, color .18s ease;
}
.kdr-hero__cta:hover,
.kdr-hero__cta:focus-visible {
  background: transparent;
  color: #fff;
  text-decoration: none;
}

/* ---- media side ---- */
.kdr-hero__media {
  position: relative;
  overflow: hidden;
}
.kdr-hero__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
}

/* ---- arrows ---- */
.kdr-hero__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 44px;
  height: 44px;
  padding: 0;
  line-height: 0;
  display: grid;
  place-items: center;
  border: 0;
  background: #fff;
  color: var(--kdr-ink);
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.kdr-hero__arrow--prev { left: 14px; }
.kdr-hero__arrow--next { right: 14px; }
.kdr-hero__arrow:hover,
.kdr-hero__arrow:focus-visible {
  background: var(--kdr-ink);
  color: #fff;
}

/* ---- dots ---- */
.kdr-hero__dots {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: 8px;
}
.kdr-hero__dot {
  width: 24px;
  height: 4px;
  padding: 0;
  border: 0;
  background: rgba(255, 255, 255, .45);
  cursor: pointer;
  transition: background .18s ease;
}
.kdr-hero__dot.is-active { background: #fff; }

/* ---- responsive ---- */
@media (max-width: 860px) {
  .kdr-hero__slide {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .kdr-hero__copy {
    order: 1;
    padding: 30px 20px 26px;
  }
  .kdr-hero__media {
    order: 2;
    height: clamp(220px, 52vw, 320px);
  }
  .kdr-hero__arrow { width: 38px; height: 38px; }
  .kdr-hero__arrow--prev { left: 8px; }
  .kdr-hero__arrow--next { right: 8px; }
  .kdr-hero__dots { bottom: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .kdr-hero__slide { transition: none; }
}

/* ------------------------------------------------------------------
 * KIDARUN-HERO-HEIGHT
 * .kdr-hero__media img had width/height:100% + object-fit:cover, but
 * the percentage height resolved against an auto-height parent and so
 * fell back to the image's intrinsic ratio. A portrait 712x1024 slide
 * image then drove the whole section to 863px instead of the intended
 * clamp(340px, 32vw, 500px).
 * Taking the image out of flow lets the row height come from the
 * min-height and the copy, with the image covering whatever results.
 * ------------------------------------------------------------------ */
.kdr-hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ------------------------------------------------------------------
 * KIDARUN-HERO-ARROWS-MOBILE
 * On mobile the slide stacks (copy above image), so arrows centred on
 * the whole section landed over the copy - the prev arrow sat on top
 * of the CTA button. Anchor them to the middle of the image instead,
 * using the same clamp that sets the image height so the two stay in
 * step. 19px is half the 38px mobile arrow.
 * ------------------------------------------------------------------ */
@media (max-width: 860px) {
  .kdr-hero__arrow {
    top: auto;
    bottom: calc(clamp(220px, 52vw, 320px) / 2 - 19px);
    transform: none;
  }
}

/* ------------------------------------------------------------------
 * KIDARUN-HERO-ALIGN
 * Desktop alignment is handled by the widget's own 20px side
 * padding (set in Elementor), which lands the hero on the same
 * edge as the logo and the Shop by Category bar.
 * On mobile the Elementor container contributes a fixed 20px
 * gutter, but the header wrap uses 10px, so the hero sat 10px
 * inside the burger. Elementor's padding_mobile control did not
 * take effect, so pull the hero back by 10px here instead - this
 * targets our own class rather than a generated element id.
 * ------------------------------------------------------------------ */
@media (max-width: 767px) {
  .kdr-hero {
    margin-left: -10px;
    margin-right: -10px;
  }
}

/* ------------------------------------------------------------------
 * KIDARUN-HERO-ALIGN-2
 * Elementor's breakpoints (767 / 1024) do not line up with the
 * header's (991), so per-breakpoint Elementor padding could never
 * match the logo edge at every width. All Elementor padding on the
 * hero widget is now zero and the inset lives here, on the same
 * breakpoint the header wrap uses.
 * Measured Elementor gutter at the hero, per range:
 *   >=992  boxed inner, gutter 0   -> +20 matches wrap padding 20
 *   768-991 inner full, gutter 0   -> +10 matches wrap padding 10
 *   <=767  container padding 20    -> -10 lands back on 10
 * Margin (not padding) so the coloured panel itself moves.
 * ------------------------------------------------------------------ */
@media (min-width: 992px) {
  .kdr-hero { margin-left: 20px; margin-right: 20px; }
}
@media (min-width: 768px) and (max-width: 991px) {
  .kdr-hero { margin-left: 10px; margin-right: 10px; }
}

/* ------------------------------------------------------------------
 * KIDARUN-HERO-LIGHT
 * The hero copy is white, which only works on dark backgrounds. Light
 * slide colours (e.g. #F77777, where white text scores just 2.67 and
 * fails WCAG AA) need ink copy instead.
 * The widget measures each slide's relative luminance and adds
 * .kdr-hero__slide--light when white text would drop below AA, so any
 * colour picked in Elementor later stays readable automatically.
 * ------------------------------------------------------------------ */
.kdr-hero__slide--light .kdr-hero__title,
.kdr-hero__slide--light .kdr-hero__price {
  color: var(--kdr-ink);
}

.kdr-hero__slide--light .kdr-hero__badge {
  background: var(--kdr-ink);
  color: #fff;
}

.kdr-hero__slide--light .kdr-hero__cta {
  background: var(--kdr-ink);
  border-color: var(--kdr-ink);
  color: #fff;
}
.kdr-hero__slide--light .kdr-hero__cta:hover,
.kdr-hero__slide--light .kdr-hero__cta:focus-visible {
  background: transparent;
  color: var(--kdr-ink);
}

/* ------------------------------------------------------------------
 * KIDARUN-HERO-ALIGN-3
 * The Elementor kit box is now 1280, matching the header's
 * 1320-minus-20px-padding content width, so page sections and the
 * header share an edge on their own. The hero's desktop +20px
 * margin was compensating for the old 20px gap and would now push
 * it 20px past everything else, so it is cancelled here.
 * The tablet (+10) and mobile (-10) rules still stand: Elementor's
 * gutters differ from the header's at those widths.
 * ------------------------------------------------------------------ */
@media (min-width: 992px) {
  .kdr-hero { margin-left: 0; margin-right: 0; }
}

/* ------------------------------------------------------------------
 * KIDARUN-CONTACT
 * Contact page: map + enquiry form, then a row of info tiles.
 * Uses the site tokens (--kdr-*) so it tracks the brand palette, and
 * square corners to match the house style set site-wide.
 * ------------------------------------------------------------------ */
.kdr-contact {
  --kdr-cf-label: 140px;
}

.kdr-contact__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: stretch;
}

/* ---- map ---- */
.kdr-contact__map {
  position: relative;
  min-height: 520px;
  background: var(--kdr-cream);
  border: 1px solid var(--kdr-line);
}
.kdr-contact__map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ---- form panel ---- */
.kdr-contact__panel {
  background: var(--kdr-cream);
  border: 1px solid var(--kdr-line);
  padding: clamp(24px, 3vw, 44px);
}
.kdr-contact__title {
  margin: 0 0 8px;
  font-size: clamp(1.5rem, 2.3vw, 2rem);
  font-weight: 800;
  color: var(--kdr-ink);
}
.kdr-contact__sub {
  margin: 0 0 26px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--kdr-ink-soft);
}

/* ---- status notice ---- */
.kdr-contact__notice {
  margin: 0 0 22px;
  padding: 12px 16px;
  font-size: 14px;
  line-height: 1.55;
  border-left: 3px solid;
}
.kdr-contact__notice--ok {
  background: #EAF6EC;
  border-color: #2E7D42;
  color: #1E5C30;
}
.kdr-contact__notice--err {
  background: #FDECEE;
  border-color: var(--kdr-red);
  color: #8E1020;
}

/* ---- rows ---- */
.kdr-cform__row {
  display: grid;
  grid-template-columns: var(--kdr-cf-label) 1fr;
  gap: 14px;
  align-items: start;
  margin-bottom: 16px;
}
.kdr-cform__label {
  padding-top: 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--kdr-ink);
  text-align: right;
}
.kdr-cform__field { min-width: 0; }

.kdr-cform__input {
  width: 100%;
  padding: 12px 14px;
  font-size: 14.5px;
  font-family: inherit;
  color: var(--kdr-ink);
  background: #fff;
  border: 1px solid var(--kdr-line);
  border-radius: 0;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.kdr-cform__input::placeholder { color: var(--kdr-muted); }
.kdr-cform__input:focus {
  outline: none;
  border-color: var(--kdr-ink);
  box-shadow: 0 0 0 3px rgba(20, 17, 14, .08);
}
.kdr-cform__input:user-invalid {
  border-color: var(--kdr-red);
  box-shadow: 0 0 0 3px rgba(224, 18, 43, .10);
}

.kdr-cform__textarea {
  resize: vertical;
  min-height: 180px;
  line-height: 1.6;
}
.kdr-cform__count {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--kdr-muted);
  text-align: right;
}

/* ---- file input: native control hidden, label acts as the button ---- */
.kdr-cform__file {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0;
  align-items: stretch;
}
.kdr-cform__filename {
  border-right: 0;
  cursor: default;
  grid-column: 1;
}
.kdr-cform__filebtn {
  grid-column: 2;
  display: inline-flex;
  align-items: center;
  padding: 0 20px;
  background: var(--kdr-ink);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease;
}
.kdr-cform__filebtn:hover { background: var(--kdr-red); }
.kdr-cform__file input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* keyboard focus has to be visible on the proxy label */
.kdr-cform__file input[type="file"]:focus-visible + .kdr-cform__filebtn,
.kdr-cform__filebtn:focus-visible {
  outline: 2px solid var(--kdr-ink);
  outline-offset: 2px;
}
.kdr-cform__hint {
  grid-column: 1 / -1;
  margin-top: 6px;
  font-size: 12px;
  color: var(--kdr-muted);
}

/* ---- honeypot: off-screen, never display:none (bots skip hidden fields) ---- */
.kdr-cform__hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---- consent + send ---- */
.kdr-cform__consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 6px 0 22px;
  padding-left: calc(var(--kdr-cf-label) + 14px);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--kdr-ink-soft);
}
.kdr-cform__consent input[type="checkbox"] {
  width: 17px;
  height: 17px;
  margin: 2px 0 0;
  accent-color: var(--kdr-red);
  flex: 0 0 auto;
}
.kdr-cform__consent a {
  color: var(--kdr-ink);
  text-decoration: underline;
}
.kdr-cform__consent a:hover { color: var(--kdr-red); }

.kdr-cform__actions {
  display: flex;
  justify-content: flex-end;
}
.kdr-cform__send {
  padding: 14px 42px;
  border: 0;
  background: var(--kdr-red);
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s ease;
}
.kdr-cform__send:hover { background: var(--kdr-red-dark); }
.kdr-cform__send:disabled { opacity: .55; cursor: not-allowed; }

/* ---- info tiles ---- */
.kdr-contact__tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
  background: var(--kdr-line);
  border: 1px solid var(--kdr-line);
}
.kdr-contact__tile {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 26px 24px;
  background: var(--kdr-cream);
}
.kdr-contact__ico {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid var(--kdr-ink);
  border-radius: 50%;
  color: var(--kdr-ink);
}
.kdr-contact__ico svg { width: 21px; height: 21px; display: block; }
.kdr-contact__tiletxt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.kdr-contact__tilelabel {
  font-size: 12px;
  color: var(--kdr-muted);
  letter-spacing: .04em;
}
.kdr-contact__tileval {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--kdr-ink);
  line-height: 1.4;
  word-break: break-word;
}
a.kdr-contact__tileval:hover { color: var(--kdr-red); }

/* ---- responsive ---- */
@media (max-width: 1024px) {
  .kdr-contact__tiles { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .kdr-contact__grid { grid-template-columns: 1fr; }
  .kdr-contact__map { min-height: 320px; }
}
@media (max-width: 640px) {
  .kdr-contact { --kdr-cf-label: 0px; }
  .kdr-cform__row { grid-template-columns: 1fr; gap: 6px; }
  .kdr-cform__label { text-align: left; padding-top: 0; }
  .kdr-cform__consent { padding-left: 0; }
  .kdr-cform__actions { justify-content: stretch; }
  .kdr-cform__send { width: 100%; }
  .kdr-contact__tiles { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------
 * KIDARUN-CONTACT-ALIGN
 * .kdr-contact sits inside Elementor's own container box model,
 * which does not track the header's breakpoints (991/767).
 * Measured against the header's real edges rather than guessed:
 *   <=~650px   Elementor box sits 30px further in than the header
 *   700-991px  already matches
 *   992-1365px Elementor box sits 10px short of the header
 *   >=1366px   already matches (kit's boxed width takes over)
 * ------------------------------------------------------------------ */
@media (max-width: 649px) {
  .kdr-contact { margin-left: -30px; margin-right: -30px; }
}
@media (min-width: 992px) and (max-width: 1299px) {
  .kdr-contact { margin-left: 10px; margin-right: 10px; }
}

/* ------------------------------------------------------------------
 * KIDARUN-CONTACT-TILES-MOBILE-ORDER
 * On mobile the map+form stack via .kdr-contact__grid's own
 * responsive rule (max-width:900px). At that same breakpoint,
 * make .kdr-contact a flex column and reorder its two direct
 * children so the info tiles render above the grid, without
 * touching the DOM/HTML order (source order stays map/form then
 * tiles, which is the sensible reading order for screen readers).
 * ------------------------------------------------------------------ */
@media (max-width: 900px) {
  .kdr-contact { display: flex; flex-direction: column; }
  .kdr-contact__tiles { order: -1; margin: 0 0 28px; }
}

/* ------------------------------------------------------------------
 * KIDARUN-NEWSLETTER
 * Full-bleed bar (background spans edge to edge); the inner content
 * copies the HEADER's own literal box model (max-width 1320 + padding
 * 20/10px at the header's own 991 breakpoint) rather than depending on
 * Elementor's per-tier container width, which does not track the
 * header at several ranges (found and fixed twice already on this
 * site, for the hero and the contact page).
 * ------------------------------------------------------------------ */
.kdr-newsletter {
  background: var(--kdr-nl-bg, #E8C9A8);
}

.kdr-newsletter__inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 22px 20px;
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

@media (max-width: 991px) {
  .kdr-newsletter__inner { padding: 22px 10px; }
}

/* ---- heading ---- */
.kdr-newsletter__head {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 0 0 auto;
}
.kdr-newsletter__ico {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  color: var(--kdr-ink);
}
.kdr-newsletter__ico svg { width: 100%; height: 100%; display: block; }
.kdr-newsletter__title {
  margin: 0;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  font-weight: 700;
  color: var(--kdr-ink);
  white-space: nowrap;
}

/* ---- form ---- */
.kdr-nform {
  flex: 1 1 340px;
  min-width: 0;
}
.kdr-nform__row {
  display: flex;
  gap: 0;
}
.kdr-nform__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 13px 18px;
  font-size: 14px;
  font-family: inherit;
  color: var(--kdr-ink);
  background: #fff;
  border: 1px solid transparent;
  border-radius: 0;
}
.kdr-nform__input::placeholder { color: var(--kdr-muted); }
.kdr-nform__input:focus {
  outline: none;
  border-color: var(--kdr-ink);
}
.kdr-nform__input:user-invalid {
  border-color: var(--kdr-red);
}
.kdr-nform__btn {
  flex: 0 0 auto;
  padding: 0 26px;
  border: 0;
  background: var(--kdr-ink);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s ease;
}
.kdr-nform__btn:hover { background: var(--kdr-red); }
.kdr-nform__btn:disabled { opacity: .6; cursor: not-allowed; }

/* honeypot: off-screen, never display:none (bots skip hidden fields) */
.kdr-nform__hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.kdr-nform__consent {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 9px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--kdr-ink-soft);
}
.kdr-nform__consent input[type="checkbox"] {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--kdr-ink);
  flex: 0 0 auto;
}
.kdr-nform__consent a { color: var(--kdr-ink); text-decoration: underline; }
.kdr-nform__consent a:hover { color: var(--kdr-red); }
.kdr-nform__consent input:user-invalid ~ label { color: var(--kdr-red); }

.kdr-nform__notice {
  margin: 10px 0 0;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.5;
  padding: 10px 14px;
  border-radius: 3px;
}
.kdr-nform__notice--ok  { color: #1E5C30; background: #E3F3E6; }
.kdr-nform__notice--err { color: #8E1020; background: #FBE7E9; }

/* ---- social icons ----
 * Same circular ink-bordered language as the contact page's info
 * tiles, for one consistent icon-button style site-wide. */
.kdr-newsletter__social {
  display: flex;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  flex: 0 0 auto;
}
.kdr-newsletter__social a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--kdr-ink);
  border-radius: 50%;
  color: var(--kdr-ink);
  background: #fff;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.kdr-newsletter__social a svg { width: 17px; height: 17px; }
.kdr-newsletter__social a:hover {
  background: var(--kdr-ink);
  border-color: var(--kdr-ink);
  color: #fff;
}

/* ---- responsive ---- */
@media (max-width: 900px) {
  .kdr-newsletter__inner { flex-direction: column; align-items: stretch; text-align: center; }
  .kdr-newsletter__head { justify-content: center; }
  .kdr-nform__consent { justify-content: center; text-align: left; }
  .kdr-newsletter__social { justify-content: center; }
}
@media (max-width: 480px) {
  .kdr-nform__row { flex-direction: column; }
  .kdr-nform__input { border-bottom: 1px solid var(--kdr-line); }
  .kdr-nform__btn { padding: 13px; }
}

/* ------------------------------------------------------------------
 * KIDARUN-NEWSLETTER-THEME-FIX
 * Two corrections against real feedback:
 *  1. Background was a one-off tan not in the site's own token set.
 *     Swapped for --kdr-line, the palette's own pale warm neutral,
 *     which gives a gentle strip rather than a foreign colour.
 *  2. The heading fell back to Firefly's Archivo (same as the
 *     contact page title), but its direct visual neighbours in
 *     THIS footer (SHOP / COLLECTIONS labels) render in Roboto.
 *     Matching that immediate context rather than the site's
 *     other, unrelated heading font.
 * Button and social-icon hover switched from ink to red, matching
 * the burger/drawer-close hover language already used site-wide
 * for interactive icon buttons.
 * ------------------------------------------------------------------ */
.kdr-newsletter {
  background: var(--kdr-nl-bg, var(--kdr-line));
}
.kdr-newsletter, .kdr-newsletter * {
  font-family: 'Roboto', sans-serif;
}
.kdr-nform__input {
  border-color: var(--kdr-line);
}
.kdr-nform__btn {
  background: var(--kdr-red);
}
.kdr-nform__btn:hover {
  background: var(--kdr-red-dark);
}
.kdr-newsletter__social a:hover {
  background: var(--kdr-red);
  border-color: var(--kdr-red);
  color: #fff;
}

/* ------------------------------------------------------------------
 * KIDARUN-NEWSLETTER-MOBILE-HEIGHT
 * .kdr-nform used flex: 1 1 340px to set a minimum WIDTH in the
 * desktop row layout. Once .kdr-newsletter__inner switches to
 * flex-direction: column below 900px, that same 340px value
 * becomes a flex-basis on the main (now vertical) axis, forcing
 * the form to reserve 340px of HEIGHT regardless of its actual
 * content - the large empty gap under the checkbox on mobile.
 * Reset to auto height, no grow, once stacked.
 * ------------------------------------------------------------------ */
@media (max-width: 900px) {
  .kdr-nform { flex: 0 0 auto; width: 100%; }
}

/* ------------------------------------------------------------------
 * KIDARUN-WOO-PAGE-CONTENT
 * my-account, cart, and any other plain (non-Elementor) WooCommerce
 * page uses Hello Elementor's bare default template - .page-content
 * had no width constraint at all, so login/cart/table content spanned
 * the full raw viewport edge to edge.
 * .page-header (the 'My account' / 'Cart' title bar) is close but
 * itself drifts from the header at narrower widths (flush at 768,
 * off by 10px at 390), so rather than copy an inconsistent
 * reference, this uses the header's own real box values directly -
 * plain CSS, no Elementor container involved, so it resolves
 * predictably at every width with no per-tier correction needed.
 * ------------------------------------------------------------------ */
.woocommerce-page .page-content,
.woocommerce-account .page-content,
.ffe-policy-page .page-content {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}
@media (max-width: 991px) {
  .woocommerce-page .page-content,
  .woocommerce-account .page-content,
  .ffe-policy-page .page-content {
    padding: 0 10px;
  }
}

/* ------------------------------------------------------------------
 * KIDARUN-POLICY-PAGE-WIDTH
 * .ffe-policy-wrap used var(--ffe-max)/var(--ffe-gutter), Firefly's
 * original 1200px box from before the site was widened to match
 * the header's real 1320px box (already fixed once for the hero
 * and the contact page - this is the same stale box on a third
 * template). Overriding just the OUTER wrapper here; the inner
 * .ffe-policy's 720px reading column is a deliberate typography
 * choice (comfortable line length for long paragraphs) and is
 * left untouched.
 * ------------------------------------------------------------------ */
.ffe-policy-wrap {
  max-width: 1320px;
  padding: 48px 20px 90px;
}
@media (max-width: 991px) {
  .ffe-policy-wrap { padding: 32px 10px 60px; }
}

/* ------------------------------------------------------------------
 * KIDARUN-POLICY-PAGE-MAIN-WIDTH
 * On .ffe-policy-page templates, main.site-main itself carries an
 * unrelated max-width (~1140px, source not one of the site's own
 * box systems) that caps .page-content before its own 1320px rule
 * can take effect. Neutralised here, scoped to policy pages only -
 * my-account/cart already resolve correctly without this.
 * ------------------------------------------------------------------ */
.ffe-policy-page main.site-main {
  max-width: none;
  margin: 0;
  padding: 0;
}

/* ------------------------------------------------------------------
 * KIDARUN-POLICY-WRAP-PADDING-DEDUPE
 * .page-content now supplies the site's own 20/10px horizontal
 * inset (KIDARUN-WOO-PAGE-CONTENT). .ffe-policy-wrap's own side
 * padding is now redundant on top of that - invisible at desktop
 * (the 720px reading column recenters regardless), but a real,
 * visible 30px-vs-10px over-indent on mobile, where nothing narrows
 * the column. Keeping the vertical padding (spacing from the
 * page-header/footer); zeroing only the horizontal component.
 * ------------------------------------------------------------------ */
.ffe-policy-wrap {
  padding-left: 0;
  padding-right: 0;
}