/* Page 12 — Garland Architect
   Restored horizontal garland model + priority controls + 3-row WOW depth */

body{
  background:repeating-linear-gradient(45deg,#fff 0 34px,#fff9f2 34px 68px);
}

/* Match Page 6 title/subtitle rhythm */
.garland-builder{padding:40px;overflow:visible}


/* Garland photo header: integrated into the EXISTING orange hero-builder frame.
   There is no second card/frame around the header. */
.builder-photo-header{
  position:relative;
  min-height:285px;
  margin:-40px -40px 30px -40px;
  overflow:hidden;
  border-radius:32px 32px 0 0;
  background:#fff;
}

.builder-photo-copy{
  position:relative;
  z-index:2;
  width:58%;
  padding:58px 24px 38px 58px;
}

.builder-photo-header h1{
  font-family:"Pacifico",cursive;
  font-size:3.5rem;
  margin:0 0 10px;
  color:#ff85a2;
  text-align:left;
  text-shadow:3px 3px 0 #fff,6px 6px 0 rgba(0,0,0,.03);
}

.builder-photo-subtitle{
  margin:0;
  max-width:620px;
  color:#7f8c8d;
  font-weight:500;
  font-size:1.1rem;
  line-height:1.55;
  text-align:left;
}

.builder-photo{
  position:absolute;
  z-index:1;
  top:0;
  right:0;
  width:62%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:right top;
  -webkit-mask-image:
    linear-gradient(to right,transparent 0%,rgba(0,0,0,.35) 18%,#000 42%),
    linear-gradient(to bottom,#000 0%,#000 58%,rgba(0,0,0,.55) 78%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to right,transparent 0%,rgba(0,0,0,.35) 18%,#000 42%),
    linear-gradient(to bottom,#000 0%,#000 58%,rgba(0,0,0,.55) 78%,transparent 100%);
  mask-composite:intersect;
}

.builder-photo-header::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(to right,rgba(255,255,255,1) 0%,rgba(255,255,255,.98) 34%,rgba(255,255,255,.72) 48%,rgba(255,255,255,0) 66%),
    linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 58%,rgba(255,255,255,.55) 78%,rgba(255,255,255,1) 100%);
}

@media(max-width:1024px){
  .builder-photo-header{
    min-height:250px;
    margin:-20px -20px 24px -20px;
    border-radius:24px 24px 0 0;
  }

  .builder-photo-copy{
    width:100%;
    padding:38px 20px 30px;
  }

  .builder-photo-header h1{
    max-width:68%;
    font-size:2.5rem;
  }

  .builder-photo-subtitle{
    max-width:66%;
    font-size:1rem;
  }

  .builder-photo{
    width:70%;
  }

  .builder-photo-header::after{
    background:
      linear-gradient(to right,rgba(255,255,255,1) 0%,rgba(255,255,255,.97) 40%,rgba(255,255,255,.50) 58%,rgba(255,255,255,0) 74%),
      linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 60%,rgba(255,255,255,.60) 80%,rgba(255,255,255,1) 100%);
  }
}

.garland-grid{
  display:grid;
  grid-template-columns:350px minmax(0,1fr);
  gap:30px;
  align-items:start;
}

.controls-panel{display:flex;flex-direction:column;gap:14px}
.control-card,.summary-card{
  background:#fff9f0;
  border:2px solid #ffe8cc;
  border-radius:25px;
  padding:20px;
  box-shadow:0 8px 22px rgba(45,52,54,.05)
}

.section-heading{display:flex;gap:10px;align-items:flex-start;margin-bottom:13px}
.step-dot{
  width:28px;height:28px;flex:0 0 28px;
  display:grid;place-items:center;border-radius:50%;
  background:var(--brand);color:#fff;font-weight:900
}
.section-heading strong{display:block;color:var(--dark);font-size:.9rem}
.section-heading small{display:block;color:#99a1a4;font-size:.62rem;font-weight:600;margin-top:2px;line-height:1.35}

.density-buttons button{font:inherit;cursor:pointer}
.length-presets button{
  border:1px solid #e5e6e7;border-radius:9px;background:#fff;
  padding:7px 2px;font-size:.61rem;font-weight:800
}
#garlandLength{
  appearance:none;
  -webkit-appearance:none;
  width:100%;
  height:8px;
  border-radius:4px;
  background:#f1f2f6;
  background-repeat:no-repeat;
  outline:none;
  cursor:pointer;
  accent-color:var(--brand)
}
#garlandLength::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:18px;height:18px;border-radius:50%;
  background:#fff;border:3px solid var(--brand);
  box-shadow:0 2px 4px rgba(0,0,0,.1)
}
.control-group{margin-bottom:0}
.control-group label{
  display:block;
  font-weight:700;
  margin-bottom:10px;
  font-size:.85rem;
  color:#57606f;
  text-transform:uppercase
}
.val-badge{
  background:var(--pink);
  color:#fff;
  padding:2px 8px;
  border-radius:8px;
  font-size:.8rem;
  float:right
}

.density-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.density-buttons button{
  border:1px solid #e6e6e6;border-radius:11px;background:#fff;
  padding:10px 5px;font-weight:900;font-size:.67rem
}
.density-buttons button small{display:block;color:#a1a8aa;font-size:.5rem;margin-top:3px}
.density-buttons button.active{border-color:var(--pink);background:#fff5f7;color:var(--pink)}

.colour-count-row{
  display:grid;grid-template-columns:1fr 90px;gap:9px;
  align-items:center;margin-bottom:10px;font-size:.62rem;font-weight:800;color:#697174
}
.palette-row{
  display:grid;
  grid-template-columns:28px minmax(0,1fr) 94px;
  gap:7px;
  align-items:center;
  margin-bottom:8px
}
.colour-swatch{
  width:28px;height:28px;border-radius:50%;
  border:2px solid #fff;outline:1px solid #dfe2e3
}
select{
  width:100%;
  border:2px solid #eee;
  border-radius:12px;
  background:#fff;
  padding:10px;
  color:#525a5d;
  font:inherit;
  font-size:.68rem;
  font-weight:700;
  outline:none
}
.priority-select{font-weight:900;color:var(--brand-dark)}

.btn-remix{
  width:100%;margin-top:8px;border:1px solid #ffd1a0;border-radius:9px;
  background:#fff7ed;color:var(--brand-dark);padding:8px;
  font:inherit;font-size:.61rem;font-weight:900;cursor:pointer
}

.summary-card>span{
  display:block;color:var(--brand-dark);font-size:.55rem;font-weight:900;letter-spacing:.11em
}
.summary-card>strong{display:block;color:#465053;margin:4px 0 10px;font-size:.82rem}
.summary-price{font-size:1.45rem;color:var(--brand);font-weight:900;margin-bottom:9px}
.btn-add{width:100%;display:flex;justify-content:space-between}

.preview-panel{
  background:#f8f9fa;border:2px solid #eee;border-radius:30px;
  padding:20px;box-shadow:0 10px 28px rgba(45,52,54,.05);
  min-width:0
}
.preview-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}
.preview-head span{display:block;color:#a1a8aa;font-size:.54rem;font-weight:900;letter-spacing:.11em}
.preview-head strong{color:#4e575a;font-size:.86rem}
.preview-head button{
  border:1px solid #e4e5e6;background:#fff;border-radius:8px;padding:6px 9px;
  font:inherit;font-size:.56rem;font-weight:800;cursor:pointer
}

.viewport-section{margin-bottom:16px}
.viewport-label{
  font-size:.58rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;
  color:#a0a7aa;margin-bottom:7px
}
.garland-viewport{
  position:relative;
  height:250px;
  overflow:hidden;
  border-radius:17px;
  background:linear-gradient(180deg,#fbf9f8,#eee7e5);
  border:1px solid #eee
}
.detail-viewport{height:250px}

.garland-stage{
  position:absolute;
  left:50%;
  top:50%;
  height:180px;
  transform-origin:center center;
  pointer-events:none;
}

.garland-balloon{
  position:absolute;
  border-radius:50%;
  box-shadow:inset -8px -8px 20px rgba(0,0,0,.22),0 10px 15px rgba(0,0,0,.09);
  background-image:radial-gradient(circle at 35% 35%,rgba(255,255,255,.45),rgba(255,255,255,0) 60%)
}
.garland-balloon::after{
  content:"";position:absolute;top:10%;left:15%;width:20%;height:15%;
  border-radius:50%;background:rgba(255,255,255,.48);filter:blur(1.5px)
}

/* WOW depth rows sit behind the unchanged Normal row */
.garland-balloon.depth-row{
  filter:brightness(.88);
  opacity:.96;
  box-shadow:inset -8px -8px 20px rgba(0,0,0,.27),0 7px 12px rgba(0,0,0,.08)
}
.garland-balloon.row--1{filter:brightness(.84)}
.garland-balloon.row-1{filter:brightness(.91)}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:8px}
.stats div{border:1px solid #eee;border-radius:10px;padding:8px 9px}
.stats span{display:block;color:#a0a7aa;font-size:.5rem;font-weight:800;text-transform:uppercase}
.stats b{color:#50595c;font-size:.7rem}

@media(max-width:1024px){
  .garland-builder{width:95%;padding:20px;margin:20px auto}
  .garland-grid{grid-template-columns:1fr}
  .preview-panel{order:2}
}
@media(max-width:600px){
  .garland-builder{padding:12px}
  .garland-grid{gap:14px}
    .palette-row{grid-template-columns:26px minmax(0,1fr) 88px}
  .garland-viewport,.detail-viewport{height:210px}
  .stats{grid-template-columns:1fr 1fr}
}

/* Page-6 inspired MPB action styling */
.summary-card{
  background:#fff9f0;
}
.summary-price{
  font-size:1.7rem;
  color:var(--pink);
}
.btn-add{
  width:100%;
  background:var(--success);
  color:#fff;
  border:none;
  padding:18px;
  border-radius:20px;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 5px 0 var(--success-dark);
  display:flex;
  justify-content:space-between;
  font-size:1.05rem;
  transition:.2s;
}
.btn-add:hover{
  transform:translateY(2px);
  box-shadow:0 3px 0 var(--success-dark);
}
.preview-panel .viewport-section{
  background:#fff;
  border:2px solid #f1f2f6;
  border-radius:22px;
  padding:12px;
}



/* ===== Garland style chooser ===== */
.style-buttons{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px
}
.style-buttons button{
  border:2px solid #eee;
  border-radius:14px;
  background:#fff;
  padding:12px 8px;
  font:inherit;
  font-size:.72rem;
  font-weight:900;
  color:#566064;
  cursor:pointer;
  transition:.2s
}
.style-buttons button small{
  display:block;
  margin-top:3px;
  color:#a1a8aa;
  font-size:.52rem;
  font-weight:700
}
.style-buttons button.active{
  border-color:var(--pink);
  background:#fff5f7;
  color:var(--pink)
}

.hidden-mode{display:none!important}

/* ===== Structured controls ===== */
.structured-colour-row{
  display:grid;
  grid-template-columns:28px 70px minmax(0,1fr);
  align-items:center;
  gap:8px;
  margin-bottom:9px
}
.structured-colour-row label{
  margin:0;
  font-size:.65rem;
  font-weight:800;
  color:#697174
}
.pattern-buttons{
  display:flex;
  flex-direction:column;
  gap:7px
}
.pattern-option{
  display:grid;
  grid-template-columns:18px minmax(0,1fr);
  gap:9px;
  align-items:center;
  border:2px solid #eee;
  background:#fff;
  border-radius:12px;
  padding:10px 11px;
  cursor:pointer;
  transition:.2s
}
.pattern-option input{
  position:absolute;
  opacity:0;
  pointer-events:none
}
.pattern-option .checkmark{
  width:16px;
  height:16px;
  border:2px solid #ddd;
  border-radius:50%
}
.pattern-option strong{
  display:block;
  font-size:.7rem;
  color:#566064
}
.pattern-option small{
  display:block;
  margin-top:2px;
  font-size:.51rem;
  color:#a1a8aa;
  font-weight:700
}
.pattern-option.active{
  border-color:var(--pink);
  background:#fff5f7
}
.pattern-option.active .checkmark{
  border-color:var(--pink);
  background:var(--pink);
  box-shadow:inset 0 0 0 3px #fff
}

/* Structured balloons are the same glossy latex objects,
   but organised into repeated horizontal 4-balloon quads. */
.structured-balloon{
  box-shadow:
    inset -8px -8px 20px rgba(0,0,0,.23),
    0 8px 14px rgba(0,0,0,.09)
}


/* Structured v2: true horizontal Stack geometry */
.garland-stage{
  height:220px;
}
.structured-balloon{
  box-shadow:
    inset -9px -9px 22px rgba(0,0,0,.23),
    0 9px 14px rgba(0,0,0,.09);
}


/* Structured refinement: tighter interlock + centred previews */
.garland-stage{
  top:50%;
}
.overview-section .garland-viewport,
.detail-section .garland-viewport{
  display:block;
}


/* Mobile flow: configure first, preview second */
@media(max-width:1024px){
  .controls-panel{order:1}
  .preview-panel{order:2}
}




/* ===== Conditional control groups: desktop + mobile =====
   Steps inside Freedom / Structured are nested in wrappers, so those wrappers
   must carry their own vertical spacing on every viewport size. */
#freedomControls,
#structuredControls{
  display:flex;
  flex-direction:column;
  gap:14px;
}

#freedomControls.hidden-mode,
#structuredControls.hidden-mode{
  display:none!important;
}

@media(max-width:1024px){
  .controls-panel{
    gap:16px;
  }

  #freedomControls,
  #structuredControls{
    gap:16px;
  }
}

/* =========================================================
   STANDARDISED PHOTO HEADER — MOBILE PORTRAIT
   Shared MPB proportions: same text/image balance site-wide.
   ========================================================= */
@media (max-width:600px) and (orientation:portrait){

  .builder-photo-header{
    min-height:285px !important;
  }

  .builder-photo-copy{
    position:relative !important;
    z-index:3 !important;
    width:76% !important;
    box-sizing:border-box !important;
    padding:24px 18px 24px !important;
  }

  .builder-photo-header h1{
    max-width:80% !important;
    margin:0 0 12px 0 !important;
    font-size:2.05rem !important;
    line-height:1.08 !important;
    text-align:left !important;
  }

  .builder-photo-subtitle,
  .builder-photo-header .subtitle,
  .builder-photo-copy .subtitle,
  .builder-photo-copy p{
    max-width:68% !important;
    margin:0 !important;
    font-size:.86rem !important;
    line-height:1.45 !important;
    text-align:left !important;
  }

  .builder-photo{
    width:62% !important;
    height:100% !important;
    top:0 !important;
    right:0 !important;
    object-fit:cover !important;
    object-position:right top !important;
  }

  .builder-photo-header::after{
    background:
      linear-gradient(to right,
        #fff 0%,
        #fff 38%,
        rgba(255,255,255,.97) 48%,
        rgba(255,255,255,.72) 60%,
        rgba(255,255,255,.26) 74%,
        rgba(255,255,255,0) 88%),
      linear-gradient(to bottom,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0) 60%,
        rgba(255,255,255,.55) 80%,
        #fff 100%) !important;
  }
}

@media (max-width:390px) and (orientation:portrait){
  .builder-photo-header h1{
    font-size:1.82rem !important;
  }

  .builder-photo-subtitle,
  .builder-photo-header .subtitle,
  .builder-photo-copy .subtitle,
  .builder-photo-copy p{
    font-size:.82rem !important;
  }
}

/* =========================================================
   STANDARDISED PHOTO HEADER — HOW/ABOUT VISUAL WEIGHT
   Same mobile geometry, stronger image presence site-wide.
   ========================================================= */
@media (max-width:600px) and (orientation:portrait){

  .builder-photo-header{
    min-height:285px !important;
  }

  .builder-photo-copy{
    width:76% !important;
    padding:24px 18px 24px !important;
  }

  .builder-photo-header h1{
    max-width:80% !important;
    font-size:2.05rem !important;
    line-height:1.08 !important;
  }

  .builder-photo-subtitle,
  .builder-photo-header .subtitle,
  .builder-photo-copy .subtitle,
  .builder-photo-copy p{
    max-width:68% !important;
    font-size:.86rem !important;
    line-height:1.45 !important;
  }

  .builder-photo{
    width:62% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:right top !important;

    -webkit-mask-image:
      linear-gradient(to right,
        transparent 0%,
        rgba(0,0,0,.35) 18%,
        #000 42%),
      linear-gradient(to bottom,
        #000 0%,
        #000 68%,
        rgba(0,0,0,.55) 86%,
        transparent 100%) !important;
    -webkit-mask-composite:source-in !important;

    mask-image:
      linear-gradient(to right,
        transparent 0%,
        rgba(0,0,0,.35) 18%,
        #000 42%),
      linear-gradient(to bottom,
        #000 0%,
        #000 68%,
        rgba(0,0,0,.55) 86%,
        transparent 100%) !important;
    mask-composite:intersect !important;
  }

  .builder-photo-header::after{
    background:
      linear-gradient(to right,
        #fff 0%,
        rgba(255,255,255,.98) 38%,
        rgba(255,255,255,.68) 52%,
        rgba(255,255,255,0) 70%),
      linear-gradient(to bottom,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0) 70%,
        rgba(255,255,255,.55) 88%,
        #fff 100%) !important;
  }
}

@media (max-width:390px) and (orientation:portrait){
  .builder-photo-header h1{
    font-size:1.82rem !important;
  }

  .builder-photo-subtitle,
  .builder-photo-header .subtitle,
  .builder-photo-copy .subtitle,
  .builder-photo-copy p{
    font-size:.82rem !important;
  }
}

/* Canonical MPB photographic-header typography */
.builder-photo-header h1{
  font-family:"Pacifico",cursive !important;
  color:var(--mpb-header-pink,#ff4f86) !important;
  font-weight:400 !important;
  line-height:1.08 !important;
  text-shadow:var(--mpb-header-shadow,
    3px 3px 0 #fff,-2px -2px 0 #fff,2px -2px 0 #fff,-2px 2px 0 #fff,7px 7px 0 rgba(0,0,0,.065)) !important;
}
.builder-photo-subtitle,
.builder-photo-header .subtitle,
.builder-photo-copy .subtitle,
.builder-photo-copy p{
  font-family:"Quicksand",sans-serif !important;
  color:var(--mpb-header-copy,#56667b) !important;
  font-weight:500 !important;
}

@media(max-width:600px) and (orientation:portrait){
  .builder-photo-header{min-height:285px !important}
  .builder-photo-copy{
    position:relative !important;
    z-index:3 !important;
    width:76% !important;
    padding:24px 18px !important;
    box-sizing:border-box !important;
  }
  .builder-photo-header h1{
    font-size:2.05rem !important;
    max-width:80% !important;
    margin:0 0 12px !important;
    text-align:left !important;
  }
  .builder-photo-subtitle,
  .builder-photo-header .subtitle,
  .builder-photo-copy .subtitle,
  .builder-photo-copy p{
    font-size:.86rem !important;
    line-height:1.45 !important;
    max-width:68% !important;
    margin:0 !important;
    text-align:left !important;
  }
  .builder-photo{
    width:62% !important;
    object-position:right top !important;
    -webkit-mask-image:
      linear-gradient(to right,transparent 0%,rgba(0,0,0,.35) 18%,#000 42%),
      linear-gradient(to bottom,#000 0%,#000 68%,rgba(0,0,0,.55) 86%,transparent 100%) !important;
    -webkit-mask-composite:source-in !important;
    mask-image:
      linear-gradient(to right,transparent 0%,rgba(0,0,0,.35) 18%,#000 42%),
      linear-gradient(to bottom,#000 0%,#000 68%,rgba(0,0,0,.55) 86%,transparent 100%) !important;
    mask-composite:intersect !important;
  }
  .builder-photo-header::after{
    background:
      linear-gradient(to right,#fff 0%,rgba(255,255,255,.98) 38%,rgba(255,255,255,.68) 52%,rgba(255,255,255,0) 70%),
      linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 70%,rgba(255,255,255,.55) 88%,#fff 100%) !important;
  }
}