.elementor-kit-7{--e-global-color-primary:#E2489B;--e-global-color-secondary:#1C0711;--e-global-color-text:#6D4C5B;--e-global-color-accent:#A9105E;--e-global-color-kplum:#2E0A1D;--e-global-color-kplumsoft:#48122E;--e-global-color-kcream:#FDF6F8;--e-global-color-kcreamdim:#F2D9E5;--e-global-color-ktint:#FAE7F0;--e-global-color-kcard:#FFFFFF;--e-global-color-kjade:#C61F79;--e-global-typography-primary-font-family:"Playfair Display";--e-global-typography-primary-font-weight:700;--e-global-typography-primary-line-height:1.06em;--e-global-typography-primary-letter-spacing:-0.012em;--e-global-typography-secondary-font-family:"Inter";--e-global-typography-secondary-font-weight:600;--e-global-typography-text-font-family:"Inter";--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.65em;--e-global-typography-accent-font-family:"Inter";--e-global-typography-accent-font-size:0.72rem;--e-global-typography-accent-font-weight:700;--e-global-typography-accent-text-transform:uppercase;--e-global-typography-accent-letter-spacing:0.22em;background-color:#FDF6F8;color:#1C0711;font-family:"Inter", Sans-serif;font-size:17px;font-weight:400;line-height:1.65em;}.elementor-kit-7 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1200px;}.e-con{--container-max-width:1200px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* ===== Koko's African Hair Braiding — global helpers =====
   Only the visual details Elementor's native controls cannot express.
   Everything else is set on the containers/widgets themselves. */

html { scroll-behavior: smooth; }

/* Keep anchor targets clear of the sticky header (72px bar + 12px) */
:root { --koko-nav-h: 104px; }
.elementor-element[id] { scroll-margin-top: calc(var(--koko-nav-h) + 12px); }

/* --- Braid-weave placeholder texture --------------------------------
   Used by the hero tiles and gallery cards while there are no photos.
   To use a real photo instead: select the container > Style > Background
   > Image. The texture sits behind it, so nothing needs removing. */
.koko-tex { position: relative; isolation: isolate; }
.koko-tex::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    radial-gradient(circle at 30% 20%, rgba(226,72,155,.30), transparent 55%),
    repeating-linear-gradient(115deg, rgba(253,246,248,.10) 0 3px, transparent 3px 13px);
}

/* Portrait card ratio (Elementor has no aspect-ratio control) */
.koko-ratio-4x5 { aspect-ratio: 4 / 5; }

/* --- Pill lists ------------------------------------------------------
   Applied to an Icon List widget set to Layout: Inline.
   Add / remove / reorder pills in the widget's Items repeater.

   Elementor spaces inline items with horizontal margins only, so wrapped
   rows collide. Switch the list to a real flex gap and zero the margins,
   which gives even spacing in both directions. */
.koko-chips .elementor-icon-list-items.elementor-inline-items,
.koko-tags  .elementor-icon-list-items.elementor-inline-items {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 8px;          /* row gap, column gap */
  margin: 0;
}
.koko-chips .elementor-icon-list-items.elementor-inline-items > li,
.koko-tags  .elementor-icon-list-items.elementor-inline-items > li { margin: 0; }

.koko-chips .elementor-icon-list-icon,
.koko-tags  .elementor-icon-list-icon { display: none; }
.koko-chips .elementor-icon-list-item,
.koko-tags  .elementor-icon-list-item { line-height: 1.5; }

.koko-tags .elementor-icon-list-item {
  font-size: .79rem; font-weight: 600; letter-spacing: .02em;
  background: rgba(28,7,17,.06);
  border-radius: 999px; padding: .32rem .7rem;
  transition: background-color .18s ease, color .18s ease;
}
.koko-tags .elementor-icon-list-item:hover {
  background: rgba(226,72,155,.22);
  color: #1C0711;
}

/* --- "Everything we offer" chips: interactive ------------------------
   Each chip lifts, fills gold and casts a soft shadow on hover/focus,
   so the list reads as something you can scan and touch rather than a
   flat block of text. */
.koko-chips .elementor-icon-list-item {
  font-size: .78rem; color: #5C3444;
  border: 1px solid rgba(28,7,17,.14);
  border-radius: 999px; padding: .34rem .78rem;
  background: rgba(255,255,255,.45);
  cursor: default;
  transition: transform .2s cubic-bezier(.2,.7,.3,1),
              background-color .2s ease,
              border-color .2s ease,
              color .2s ease,
              box-shadow .2s ease;
}
.koko-chips .elementor-icon-list-item:hover {
  transform: translateY(-3px);
  background: #E2489B;
  border-color: #A9105E;
  color: #1C0711;
  box-shadow: 0 10px 20px -12px rgba(28,7,17,.55);
}
.koko-chips .elementor-icon-list-item:hover .elementor-icon-list-text { color: #1C0711; }

/* Staggered entrance so the block animates in as it scrolls into view.
   Falls back to fully visible when the browser has no animation support. */
@media (prefers-reduced-motion: no-preference) {
  .koko-chips .elementor-icon-list-item {
    opacity: 0;
    transform: translateY(8px);
    animation: koko-chip-in .5s ease forwards;
  }
  .koko-chips .elementor-icon-list-item:nth-child(n+1)  { animation-delay: .02s; }
  .koko-chips .elementor-icon-list-item:nth-child(n+10) { animation-delay: .08s; }
  .koko-chips .elementor-icon-list-item:nth-child(n+20) { animation-delay: .14s; }
  .koko-chips .elementor-icon-list-item:nth-child(n+30) { animation-delay: .20s; }
  .koko-chips .elementor-icon-list-item:nth-child(n+40) { animation-delay: .26s; }
  .koko-chips .elementor-icon-list-item:hover { animation: none; opacity: 1; }
}
@keyframes koko-chip-in { to { opacity: 1; transform: translateY(0); } }

/* --- Photo cards -----------------------------------------------------
   Slow zoom on hover for the hero tiles and gallery slides. */
.koko-shot { background-color: #48122E; transition: background-size .6s ease; }
.koko-shot:hover { background-size: 108% auto; }

/* --- Gallery carousel ------------------------------------------------
   Arrows sit outside the track on desktop. On phones that 30px side
   margin costs too much width, so overlay the arrows on the slide
   instead and let the track run the full column. */
@media (max-width: 767px) {
  /* Elementor reserves the arrow gutters with width: calc(100% - 60px) */
  #gallery .elementor-element.elementor-arrows-position-outside .swiper {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
  #gallery .elementor-swiper-button { z-index: 5; }
  #gallery .elementor-swiper-button-prev { left: 8px; }
  #gallery .elementor-swiper-button-next { right: 8px; }
}

/* --- Google reviews (Trustindex) ------------------------------------
   NOTE: do not style .ti-widget directly — the plugin ships the markup
   inside <pre class="ti-widget" style="display:none"> and its loader
   hydrates that template at runtime. Target .ti-widget-container or the
   wrapper instead. */
.koko-reviews { width: 100%; }

/* --- Facts strip: small gold dot before each item -------------------- */
.koko-facts .elementor-icon-list-item { position: relative; }

/* --- Sticky header glass -------------------------------------------- */
.koko-header {
  -webkit-backdrop-filter: saturate(140%) blur(10px);
          backdrop-filter: saturate(140%) blur(10px);
}

/* --- "Call" item inside the mobile menu ------------------------------
   The header already shows a gold call button on desktop, so this menu
   item is desktop-hidden and appears only in the burger dropdown, where
   it is styled as the gold pill from the reference design.
   Edit its label/link under Appearance > Menus ("Koko's Main Menu"). */
.elementor-nav-menu--main .elementor-nav-menu > li.koko-nav-call { display: none !important; }

/* Full-bleed mobile dropdown, pinned under the 72px header bar.
   The nav widget's own ancestors are position:relative, so the panel is
   fixed to the viewport instead of absolutely placed inside the widget. */
@media (max-width: 1024px) {
  /* Elementor's nav-menu JS writes top/width inline, so these need !important.
     left+right (rather than 100vw) keeps the panel clear of the scrollbar. */
  .koko-header .elementor-nav-menu__container.elementor-nav-menu--dropdown {
    position: fixed !important;
    top: var(--koko-nav-h) !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    max-height: calc(100vh - var(--koko-nav-h));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: 1.4rem;
  }
}

.elementor-nav-menu--dropdown .koko-nav-call { margin-top: 1rem; }
.elementor-nav-menu--dropdown .koko-nav-call a.elementor-item {
  background: #E2489B;
  color: #1C0711 !important;
  border-radius: 999px;
  justify-content: center;
  text-align: center;
  font-weight: 700;
  border-bottom: 0;
}
.elementor-nav-menu--dropdown .koko-nav-call a.elementor-item:hover {
  background: #C61F79;
  color: #1C0711 !important;
}

/* --- Opening-hours table (inside a Text Editor widget) --------------- */
.koko-hours table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.koko-hours th, .koko-hours td {
  text-align: left; padding: .42rem 0; font-weight: 500;
  border-bottom: 1px dashed rgba(28,7,17,.14);
}
.koko-hours th { font-weight: 700; }

/* --- Underlined contact links --------------------------------------- */
.koko-contact-link a {
  text-decoration: none; font-weight: 700;
  border-bottom: 2px solid rgba(226,72,155,.5);
  transition: border-color .18s ease;
}
.koko-contact-link a:hover { border-color: #A9105E; }

/* --- Braid rule: stretches edge to edge ------------------------------ */
.koko-braid img { width: 100%; height: 26px; display: block; }

/* --- Reviews: quote text -------------------------------------------- */
.koko-quote blockquote { margin: 0; font-size: 1rem; line-height: 1.6; }

/* --- Never allow a sideways scrollbar -------------------------------- */
body { overflow-x: hidden; }


/* --- Showcase band ---------------------------------------------------
   Photo band between About and Services. The scrim keeps the copy
   readable over any photo; swap the photo on the container's
   Style > Background > Image control. */
.koko-showcase { position: relative; isolation: isolate; }
.koko-showcase::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(100deg,
    rgba(28,7,17,.92) 0%,
    rgba(28,7,17,.78) 34%,
    rgba(46,10,29,.42) 66%,
    rgba(169,16,94,.20) 100%);
}
.koko-showcase > * { position: relative; z-index: 1; }/* End custom CSS */