/* ============================================================
   Just Stylin — inner page layout system
   Applies to every page except the homepage.
   ============================================================ */

/* ---------- Section rhythm ---------- */
#dm .elementor-top-section { position: relative; }
#dm .elementor-top-section:not(:has(h1)) {
  padding-top: clamp(40px, 5vw, 64px) !important;
  padding-bottom: clamp(40px, 5vw, 64px) !important;
}

/* ---------- Hero ---------- */
#dm .elementor-top-section:has(h1) h1,
#dm .elementor-top-section:has(h1) h1 span {
  font-size: clamp(34px, 4.4vw, 54px) !important;
  line-height: 1.06 !important;
  letter-spacing: 1.4px !important;
}
#dm .elementor-top-section:has(h1) .elementor-background-overlay {
  background-image: linear-gradient(90deg, rgba(18, 22, 26, .55) 0%, rgba(18, 22, 26, .12) 70%, rgba(18, 22, 26, 0) 100%) !important;
}

/* ---------- Typography ---------- */
#dm .elementor-top-section h2,
#dm .elementor-top-section h2 span {
  font-size: clamp(24px, 2.4vw, 32px) !important;
  line-height: 1.2 !important;
  letter-spacing: .3px !important;
}
#dm .elementor-top-section h3,
#dm .elementor-top-section h3 span {
  font-size: 22px !important;
  line-height: 1.3 !important;
  letter-spacing: .4px !important;
}
#dm .elementor-top-section h4,
#dm .elementor-top-section h4 span {
  font-size: 18px !important;
  line-height: 1.4 !important;
  letter-spacing: .3px !important;
}
#dm .elementor-top-section h5,
#dm .elementor-top-section h5 span {
  font-size: 13px !important;
  line-height: 1.5 !important;
  letter-spacing: 1.6px !important;
  text-transform: uppercase;
  font-weight: 600 !important;
}
#dm .elementor-top-section .elementor-widget-text-editor p {
  font-size: 16px !important;
  line-height: 1.75 !important;
}
#dm .elementor-top-section .elementor-widget-text-editor p span {
  line-height: inherit;
}

/* ---------- Buttons ---------- */
#dm .elementor-top-section .elementor-button,
#dm .elementor-top-section .dmButtonLink {
  background: #4db0de !important;
  background-image: none !important;
  color: #fff !important;
  border: 1px solid #4db0de !important;
  border-radius: 999px !important;
  padding: 12px 26px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 1.4px !important;
  text-transform: uppercase;
  text-decoration: none !important;
  box-shadow: 0 8px 20px rgba(77, 176, 222, .25);
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
#dm .elementor-top-section .elementor-button:hover,
#dm .elementor-top-section .dmButtonLink:hover {
  background: #2f93c4 !important;
  border-color: #2f93c4 !important;
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(77, 176, 222, .32);
}

/* ---------- Content images ---------- */
#dm .elementor-top-section .elementor-widget-image img:not([src$=".svg"]) {
  border-radius: 14px;
}

/* ---------- Social chips ---------- */
#dm .elementor-top-section .dmSocialHub .socialHubInnerDiv {
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-start !important;
}
#dm .elementor-top-section .dmSocialHub .socialHubInnerDiv a {
  font-size: 0 !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: #fff !important;
  border: 1px solid rgba(77, 176, 222, .35) !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  color: #2f93c4 !important;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(33, 34, 38, .05);
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
#dm .elementor-top-section .dmSocialHub .socialHubInnerDiv a:hover {
  background: #4db0de !important;
  border-color: #4db0de !important;
  color: #fff !important;
  transform: translateY(-2px);
}
#dm .elementor-top-section .dmSocialHub .socialHubIcon {
  font-size: 18px !important;
  width: auto !important;
  height: auto !important;
  line-height: 1 !important;
  color: inherit !important;
  background: none !important;
}

/* ---------- Forms ---------- */
#dm .elementor-top-section .quform {
  background: #fff;
  border: 1px solid rgba(33, 34, 38, .06);
  border-radius: 20px;
  padding: 26px;
  box-shadow: 0 18px 44px rgba(33, 34, 38, .08);
}
#dm .elementor-top-section .quform-form-title-description { display: none !important; }
#dm .elementor-top-section .quform-element { margin-bottom: 16px !important; }
#dm .elementor-top-section .quform-label { margin-bottom: 6px !important; text-align: left !important; }
#dm .elementor-top-section .quform-label-text {
  display: block !important;
  font-size: 11px !important;
  letter-spacing: 1.4px !important;
  text-transform: uppercase;
  color: #6b7280 !important;
  font-weight: 600 !important;
  text-align: left !important;
}
#dm .elementor-top-section .quform-required { color: #e2574c; }
#dm .elementor-top-section .quform-input { margin: 0 !important; }
#dm .elementor-top-section .quform-field {
  width: 100% !important;
  box-sizing: border-box;
  background: #fbfcfd !important;
  border: 1px solid #e3e8ee !important;
  border-radius: 10px !important;
  padding: 13px 14px !important;
  font-size: 15px !important;
  color: #212226 !important;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
#dm .elementor-top-section .quform-field:focus {
  outline: none;
  background: #fff !important;
  border-color: #4db0de !important;
  box-shadow: 0 0 0 3px rgba(77, 176, 222, .15) !important;
}
#dm .elementor-top-section textarea.quform-field { min-height: 150px; resize: vertical; }
#dm .elementor-top-section .quform-button-submit .quform-submit {
  background: #4db0de !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 13px 32px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 1.6px !important;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(77, 176, 222, .28);
  transition: background .2s ease, transform .2s ease;
}
#dm .elementor-top-section .quform-button-submit .quform-submit:hover {
  background: #2f93c4 !important;
  transform: translateY(-1px);
}

/* ============================================================
   Contact page
   ============================================================ */
#dm .elementor-element-0e873be .elementor-container { align-items: center; }
#dm .elementor-element-0e873be .elementor-widget-image img {
  border-radius: 18px;
  box-shadow: 0 18px 44px rgba(33, 34, 38, .12);
}
#dm .elementor-element-0e873be h2 { margin-bottom: 10px; }

#dm .elementor-element-5b2caad { background: #f6f9fb; }
#dm .elementor-element-5b2caad .elementor-container { align-items: flex-start; }
#dm .elementor-element-8125433 h4,
#dm .elementor-element-b60c192 h4 {
  font-size: 12px !important;
  letter-spacing: 2.4px !important;
  color: #4db0de !important;
  text-transform: uppercase;
  margin: 0 0 12px !important;
}
#dm .elementor-element-5b2caad .quform { margin-top: 4px; }

/* Rebuild the contact list: hide the empty icon widgets, add icons to each row. */
#dm .elementor-element-e6eaea4,
#dm .elementor-element-c6dea53,
#dm .elementor-element-b4eae99 { display: none !important; }
#dm .elementor-element-083dd73,
#dm .elementor-element-cff6e13,
#dm .elementor-element-acb1e1c { margin: 0 0 14px !important; }
#dm .elementor-element-083dd73 h5,
#dm .elementor-element-cff6e13 h5,
#dm .elementor-element-acb1e1c h5 {
  display: flex !important;
  align-items: center;
  gap: 14px;
  font-size: 13px !important;
  letter-spacing: .8px !important;
  color: #212226 !important;
  margin: 0 !important;
}
#dm .elementor-element-083dd73 h5::before,
#dm .elementor-element-cff6e13 h5::before,
#dm .elementor-element-acb1e1c h5::before {
  content: "";
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #eaf5fb center / 18px no-repeat;
}
#dm .elementor-element-083dd73 h5::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234db0de' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}
#dm .elementor-element-cff6e13 h5::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234db0de' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E");
}
#dm .elementor-element-acb1e1c h5::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234db0de' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13S3 17 3 10a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}
#dm .elementor-element-aeb9d61 { margin-top: 18px !important; }

/* Policy band */
#dm .elementor-element-e82825f { background: #f6f9fb; }
#dm .elementor-element-e82825f h4 {
  font-size: 18px !important;
  color: #212226 !important;
  margin-bottom: 10px !important;
}
#dm .elementor-element-e82825f .elementor-widget-text-editor p { font-size: 15px !important; }

/* ============================================================
   Hair services page
   ============================================================ */
#dm .elementor-element-4c5f2d6 .elementor-container { align-items: center; }
#dm .elementor-element-4c5f2d6 .elementor-widget-image img {
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(33, 34, 38, .12);
}

/* The colour and extensions blocks have a completely empty right column. */
#dm .elementor-element-f7060d5 .elementor-column:nth-child(2),
#dm .elementor-element-4b629b9 .elementor-column:nth-child(2) { display: none !important; }
#dm .elementor-element-f7060d5 .elementor-column:first-child,
#dm .elementor-element-4b629b9 .elementor-column:first-child {
  width: 100% !important;
  max-width: 820px;
  margin: 0 auto;
  float: none !important;
}
#dm .elementor-element-f7060d5 .elementor-container,
#dm .elementor-element-4b629b9 .elementor-container { max-width: 860px; }

#dm :is(.elementor-element-f7060d5, .elementor-element-4b629b9,
  .elementor-element-4a7f182, .elementor-element-9363a97) .elementor-widget-spacer,
#dm :is(.elementor-element-f7060d5, .elementor-element-4b629b9,
  .elementor-element-4a7f182, .elementor-element-9363a97) .elementor-widget-html {
  display: none !important;
}
#dm :is(.elementor-element-f7060d5, .elementor-element-4b629b9,
  .elementor-element-4a7f182, .elementor-element-9363a97) .elementor-widget-text-editor {
  margin: 0 0 10px !important;
}
#dm :is(.elementor-element-f7060d5, .elementor-element-4b629b9,
  .elementor-element-4a7f182, .elementor-element-9363a97) .elementor-widget-text-editor ~ .elementor-widget-text-editor {
  background: #f7fafc;
  border-left: 3px solid #4db0de;
  border-radius: 10px;
  padding: 12px 16px !important;
  margin: 8px 0 !important;
}
#dm :is(.elementor-element-f7060d5, .elementor-element-4b629b9,
  .elementor-element-4a7f182, .elementor-element-9363a97) h5 {
  margin-bottom: 12px !important;
}
#dm :is(.elementor-element-f7060d5, .elementor-element-4b629b9,
  .elementor-element-4a7f182, .elementor-element-9363a97) h2 {
  margin-bottom: 6px !important;
}

/* ============================================================
   Gallery page
   ============================================================ */
#dm .dmPhotoGallery .photogallery-column { padding: 6px !important; box-sizing: border-box; }
#dm .dmPhotoGallery .image-container,
#dm .dmPhotoGallery .thumbnailInnerWrapper,
#dm .dmPhotoGallery .photoGalleryThumbs a {
  border-radius: 12px !important;
  overflow: hidden !important;
}
#dm .dmPhotoGallery .photoGalleryThumbs a {
  background-size: cover !important;
  background-position: center !important;
  transition: transform .35s ease;
}
#dm .dmPhotoGallery .photoGalleryThumbs a:hover { transform: scale(1.03); }
#dm .dmPhotoGallery img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
#dm .dmPhotoGallery { margin-top: 14px; }
#dm .dmRespRow[class*="u_"] h2 {
  font-size: 24px !important;
  line-height: 1.25 !important;
  letter-spacing: .5px !important;
  margin: 0 0 18px !important;
}

/* ============================================================
   Small screens
   ============================================================ */
@media (max-width: 767px) {
  #dm .elementor-top-section:not(:has(h1)) {
    padding-top: 44px !important;
    padding-bottom: 44px !important;
  }
  #dm .elementor-top-section .elementor-widget-text-editor p { font-size: 15px !important; }
  #dm .elementor-top-section .quform { padding: 18px; border-radius: 16px; }
  #dm .elementor-element-5b2caad .quform { margin-top: 0; }
  #dm .elementor-element-083dd73 h5,
  #dm .elementor-element-cff6e13 h5,
  #dm .elementor-element-acb1e1c h5 { font-size: 12px !important; letter-spacing: .4px !important; }
  #dm .elementor-element-083dd73 h5::before,
  #dm .elementor-element-cff6e13 h5::before,
  #dm .elementor-element-acb1e1c h5::before { flex-basis: 34px; width: 34px; height: 34px; background-size: 16px; }
  #dm .dmPhotoGallery .photogallery-column { padding: 4px !important; }
}

/* Gallery page: the imported block already contains its own banner and intro. */
#dm .elementor-element-841d263,
#dm .elementor-element-dcd1988,
#dm .elementor-element-a520a6b,
#dm .elementor-element-68d1c3d { display: none !important; }
#dm .elementor-element-4efadc7 h2,
#dm .elementor-element-4efadc7 h2 span {
  font-size: clamp(24px, 2.4vw, 32px) !important;
  line-height: 1.25 !important;
  letter-spacing: .5px !important;
}
#dm .elementor-element-4efadc7 p {
  font-size: 16px !important;
  line-height: 1.75 !important;
}

/* Gallery banner: the imported row uses a white texture; use the salon photo. */
#dm .u_1761832829 {
  background-image: url("https://juststylinsalon.com/wp-content/uploads/duda-import/juststylinsalon.com/Hair-BG-04-686523e9-2880w.jpg") !important;
  background-size: cover !important;
  background-position: center !important;
}
#dm .u_1761832829::before { background: rgba(18, 22, 26, .42) !important; }
#dm .u_1761832829 h2,
#dm .u_1761832829 h2 span { color: #fff !important; }

/* Quform theme borders need a stronger selector on some pages. */
#dm .elementor-top-section .quform .quform-field {
  border: 1px solid #e3e8ee !important;
}
#dm .elementor-top-section .quform .quform-field:focus {
  border-color: #4db0de !important;
}
#dm .elementor-top-section .quform .quform-submit {
  background: #4db0de !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 13px 32px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 1.6px !important;
  text-transform: uppercase;
}

/* Extensions page: the Duda slider never initialised, so show the
   before/after photos as a static split card. */
#dm .elementor-element-3c06efa {
  position: relative;
  min-height: 430px;
  border-radius: 18px;
  overflow: hidden;
  background-color: #eef3f6;
  background-image:
    url("https://juststylinsalon.com/wp-content/uploads/duda-import/juststylinsalon.com/Extensions-Before-01-21a74624-1920w.png"),
    url("https://juststylinsalon.com/wp-content/uploads/duda-import/juststylinsalon.com/Extensions-After-01-883f0587-1920w.png");
  background-position: left center, right center;
  background-size: 50% 100%;
  background-repeat: no-repeat;
  box-shadow: 0 18px 40px rgba(33, 34, 38, .12);
}
#dm .elementor-element-3c06efa > * { display: none !important; }
#dm .elementor-element-3c06efa::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background: rgba(255, 255, 255, .9);
}
#dm .elementor-element-3c06efa::before {
  content: "BEFORE  /  AFTER";
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 2;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(15, 23, 42, .6);
  border: 1px solid rgba(255, 255, 255, .4);
  color: #fff;
  font: 600 10px/1 'Montserrat', sans-serif;
  letter-spacing: 1.6px;
  white-space: nowrap;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}
@media (max-width: 767px) {
  #dm .elementor-element-3c06efa { min-height: 340px; }
}

/* Employment form: Duda's widget rule forces dark 2px borders. */
#dm .dmBody div.u_1550284291 input:not([type="submit"]),
#dm .dmBody div.u_1550284291 textarea {
  border: 1px solid #e3e8ee !important;
  border-width: 1px !important;
  border-color: #e3e8ee !important;
  background-color: #fbfcfd !important;
  border-radius: 10px !important;
  padding: 13px 14px !important;
  font-size: 15px !important;
  color: #212226 !important;
}
#dm .dmBody div.u_1550284291 input:focus,
#dm .dmBody div.u_1550284291 textarea:focus {
  border-color: #4db0de !important;
  box-shadow: 0 0 0 3px rgba(77, 176, 222, .15);
  outline: none;
}

@media (max-width: 767px) {
  #dm .elementor-element-cff6e13 h5,
  #dm .elementor-element-cff6e13 h5 span,
  #dm .elementor-element-cff6e13 h5 a {
    font-size: 11px !important;
    letter-spacing: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }
  #dm .dmRespRow[class*="u_"] h2 { font-size: 20px !important; }
}

/* Extensions page: tighten the length list into cards. */
#dm .elementor-element-f2ac017 .elementor-widget-text-editor { margin: 0 0 10px !important; }
#dm .elementor-element-f2ac017 .elementor-widget-text-editor ~ .elementor-widget-text-editor {
  background: #f7fafc;
  border-left: 3px solid #4db0de;
  border-radius: 10px;
  padding: 12px 16px !important;
  margin: 8px 0 !important;
}

/* Gallery category chips */
#dm .elementor-element-4efadc7 a[href*="#"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 16px;
  margin: 4px;
  border-radius: 999px;
  border: 1px solid rgba(77, 176, 222, .4);
  background: #fff;
  color: #2f93c4 !important;
  text-decoration: none !important;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(33, 34, 38, .04);
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
#dm .elementor-element-4efadc7 a[href*="#"]:hover {
  background: #4db0de;
  border-color: #4db0de;
  color: #fff !important;
  transform: translateY(-1px);
}

/* Center rows that have fewer than four images. */
#dm .photogallery-row { justify-content: center; }

/* Gallery lightbox */
.juststylin-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(8, 12, 16, .94);
  padding: 30px;
}
.juststylin-lightbox.is-open { display: flex; }
.juststylin-lightbox__figure {
  position: relative;
  max-width: 92vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 0;
}
.juststylin-lightbox__img {
  max-width: 92vw;
  max-height: 80vh;
  width: auto;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
  display: block;
}
.juststylin-lightbox__caption {
  color: rgba(255, 255, 255, .8);
  font: 400 12px/1.5 'Montserrat', sans-serif;
  letter-spacing: .4px;
  text-align: center;
  max-width: 700px;
}
.juststylin-lightbox__close,
.juststylin-lightbox__prev,
.juststylin-lightbox__next {
  position: fixed;
  z-index: 2;
  border: 1px solid rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.juststylin-lightbox__close { top: 22px; right: 22px; }
.juststylin-lightbox__prev { left: 22px; top: 50%; transform: translateY(-50%); }
.juststylin-lightbox__next { right: 22px; top: 50%; transform: translateY(-50%); }
.juststylin-lightbox__close:hover,
.juststylin-lightbox__prev:hover,
.juststylin-lightbox__next:hover { background: #4db0de; border-color: #4db0de; }
@media (max-width: 640px) {
  .juststylin-lightbox { padding: 14px; }
  .juststylin-lightbox__close,
  .juststylin-lightbox__prev,
  .juststylin-lightbox__next { width: 40px; height: 40px; font-size: 20px; }
  .juststylin-lightbox__prev { left: 8px; }
  .juststylin-lightbox__next { right: 8px; }
  .juststylin-lightbox__close { top: 10px; right: 10px; }
}

/* Keep the gallery category chips in neat rows. */
#dm .elementor-element-4efadc7 .text-align-center:has(a[href*="#"]) {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  line-height: 1 !important;
}
#dm .elementor-element-4efadc7 a[href*="#"] { margin: 0 !important; }

/* Vitamin C article: let the copy wrap around the product photo. */
#dm .js-blog-post__content img[src*="IMG_1220"] {
  float: right;
  width: 460px;
  max-width: 52%;
  height: auto;
  margin: 0 0 22px 30px;
  border-radius: 16px;
  box-shadow: 0 18px 44px rgba(33, 34, 38, .14);
  display: block;
}
@media (max-width: 767px) {
  #dm .js-blog-post__content img[src*="IMG_1220"] {
    float: right;
    width: 52%;
    max-width: 210px;
    margin: 4px 0 12px 14px;
  }
}