/* ----------- LAYOUT WRAPPER ----------- */
.uxp-wrapper {
  max-width:1500px;
  margin:0 auto;
  display:flex;
  gap:45px;
  padding: 125px 0px 50px 0px;
  flex-wrap:wrap;
  justify-content:center;
}

/* LEFT COLUMN PLACEHOLDERS (DESKTOP ONLY) */
.uxp-left-column {
  width:30%;
  min-width: 300px;	
  display:flex;
  flex-direction:column;
  gap:20px;
}
.uxp-placeholder-wide {
  width:50%;
  height:220px;
  min-width:300px;
  background:#dcdcdc;
  border-radius:14px;
}

/* RIGHT COLUMN PLACEHOLDER */
.uxp-right-column {
  width:30%;
  display:flex;
  flex-direction:column;
  gap:20px;
}
.uxp-placeholder-copy {
  margin-top: -20px;	
  width:100%;
  min-width:300px;
  height:600px; /* twice as long */
  border-radius:14px;
  padding:0px;
  box-sizing:border-box;
  justify-content:center;
  background:transparent; /* removed grey background */
}
.uxp-placeholder-copy h3 {
  margin:0 0 10px 0;
  font-size:1.4em;
  color:#333;
}
.uxp-placeholder-copy p {
  margin:0;
  font-size:1em;
  color:#555;
  line-height:1.5;
}

/* PHONE COMPONENT */
.uxp-iphone-container { display:flex; justify-content:center; }
.uxp-iphone { width:300px; height:600px; background:#000; border-radius:35px; padding:5px; box-shadow:0 10px 30px rgba(0,0,0,.25); position:relative; }
.uxp-notch { display:none; width:100px; height:10px; background:#000; border-radius:50px; position:absolute; top:8px; left:50%; transform:translateX(-50%); z-index:25; }
.uxp-screen { width:100%; height:100%; background:#fff; border-radius:30px; overflow-y:hidden; position:relative; }

/* MENU + OVERLAY */
.uxp-overlay { position:absolute; inset:0; background:rgba(0,0,0,.8); opacity:0; pointer-events:none; transition:opacity .5s; z-index:50; }
.uxp-overlay.uxp-show { opacity:1; pointer-events:auto; }
.uxp-menu { width:90%; height:100%; background:#fff; position:absolute; top:0; left:-100%; transition:left .5s; padding:20px; box-sizing:border-box; z-index:9999; }
.uxp-menu.uxp-open { left:0; }
.uxp-menu-close { text-align:right; cursor:pointer; font-size:22px; margin-bottom:15px; }

/* HEADER */
.uxp-header { display:flex; justify-content:space-between; align-items:center; padding:12px 14px; border-bottom:1px solid #dddddd; background:#fff; position:relative; z-index:20; }
.uxp-hamburger { width:30px; cursor:pointer; display:flex; flex-direction:column; justify-content:space-between; height:20px; }
.uxp-hamburger div { height:3px; background:#b8c5d6; border-radius:3px; }
.uxp-logo { font-weight:bold; text-align:center; flex:1; margin-top: 5px; }
.uxp-cart { cursor:pointer; font-size:18px; width:30px; text-align:right; }

/* INNER CONTENT INSIDE IPHONE */
.uxp-content { user-select:none; height:calc(100% - 50px); overflow-y:auto; padding:0px; cursor:grab; margin-bottom: -40px}
.uxp-content:active { cursor:grabbing; }
.uxp-section {min-height:425px;}
.uxp-placeholder-inner { width:100%; min-height:425px; border-radius:10px; min-width:270px; }

/* Big Screens Over 1500 */
@media(min-width:1500px){
  .uxp-wrapper {
    gap:130px;
  }	
  .uxp-left-column {width: 40%; gap: 50px;}
  .uxp-right-column {width: 20%;}
  .uxp-iphone { width:325px; height:690px;}	
  .uxp-placeholder-copy {
	margin-left: -20px;	
	min-width:330px;  
  }
.uxp-placeholder-wide {
  width:100%;
  height:320px;
  min-width:320px;
 }	
}

/* RESPONSIVE STACKING */
@media(max-width:1080px){
  .uxp-iphone { 
	width:300px; 
	height:600px; 
  }	
  .uxp-left-column, .uxp-iphone-container, .uxp-right-column {
    flex:1 1 450px;
    display:flex;
    flex-direction:column;
    align-items:center;
  }
}
@media(max-width:1000px){
  .uxp-placeholder-copy {
    display:none;
	padding: 0px;  
  }
}
@media(min-width:1000px) {
    .uxp-left-column, .uxp-iphone-container, .uxp-right-column {
        flex: none;
		gap: 35px;
 }
}

.placeholder-image-1, .placeholder-image-2 {
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
	overflow:hidden;		
}

.uxp-placeholder-wide {border: 1.5px solid rgba(0, 0, 0, 0.05);}
.placeholder-image-1 {background-image: url("../prototype/farrah_dryer.jpg");}		
.placeholder-image-2 {background-image: url("../prototype/farrah_wireframes.jpg");}	

.uxp-menu p {
    font-family: Arial, sans-serif;
	border-bottom:.15rem solid #f1f1f1;	
	letter-spacing: 0.025em; 
	padding: 1em 0;
	color:#555;
	cursor:pointer;
}
	
/* Before / After Slider */

    .slider-container {
      position: relative;
      width: 100%;
      max-width: 300px;
      aspect-ratio: 3/4;			
      overflow: hidden;
      border-radius: 0px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
	  border: 1px solid #f8f8f8;			
      cursor: ew-resize;
      user-select: none;
	  margin: 20px 0px 20px 0px !important;
    }
    
    .slider-container img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      pointer-events: none;
    }
    
    .slider-container .after {
      clip-path: inset(0 50% 0 0);
    }
	
    .separator {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 2px;
      height: 100%;
      background: #ffffff90;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
      z-index: 10;
      pointer-events: none;
    }	
    
    .handle {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 20px;
      height: 20px;
      background: white;
      border-radius: 50%;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
      z-index: 11;
      pointer-events: none;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.2s ease;
    }
    
    .slider-container:active .handle {
      transform: translate(-50%, -50%) scale(1.1);
    }
    
    .handle::before,
    .handle::after {
      content: '';
      position: absolute;
      width: 0px;
      height: 0px;
      border: solid #888;
      border-width: 0 2px 2px 0;
    }
    
    .handle::before {
      left: 11px;
      transform: rotate(135deg);
    }
    
    .handle::after {
      right: 11px;
      transform: rotate(-45deg);
    }
    
    .labels {
      position: absolute;
      width: 100%;
      top: 10px;
      display: flex;
      justify-content: space-between;
      padding: 0px;
      z-index: 5;
      pointer-events: none;
    }
    
    .label {
      color: #555;
      padding: 5px 10px;
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 1px;
    }

   .bottom-section {
	background-image: url("../prototype/bottom-section.png");  
	margin: 0 !important;
	padding: 0 !important;	   
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
	overflow: hidden; 
	height: 1600px !important;	   
    width: 100% !important;
}

.uxp-content {
  overflow-x: hidden; /* prevent any horizontal scroll inside content */
}