.elementor-kit-7{--e-global-color-primary:#E4A33B;--e-global-color-secondary:#1A0F14;--e-global-color-text:#5C4A4F;--e-global-color-accent:#C07C1C;--e-global-color-kplum:#2B1620;--e-global-color-kplumsoft:#3A1E2B;--e-global-color-kcream:#F7EFE4;--e-global-color-kcreamdim:#E7DACA;--e-global-color-ktint:#F1E5D6;--e-global-color-kcard:#FBF5EC;--e-global-color-kjade:#2C6B5B;--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:#F7EFE4;color:#1A0F14;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: 72px; }
.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(228,163,59,.30), transparent 55%),
    repeating-linear-gradient(115deg, rgba(247,239,228,.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. */
.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-chips .elementor-icon-list-item {
  font-size: .78rem; color: #4A3A3F;
  border: 1px solid rgba(26,15,20,.14);
  border-radius: 999px; padding: .3rem .68rem;
}
.koko-tags .elementor-icon-list-item {
  font-size: .79rem; font-weight: 600; letter-spacing: .02em;
  background: rgba(26,15,20,.06);
  border-radius: 999px; padding: .32rem .7rem;
}

/* --- 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: #E4A33B;
  color: #1A0F14 !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: #F0B252;
  color: #1A0F14 !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(26,15,20,.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(228,163,59,.5);
  transition: border-color .18s ease;
}
.koko-contact-link a:hover { border-color: #C07C1C; }

/* --- 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; }/* End custom CSS */