.fd-designer {
  width: 100%;
  color: #2e2e2e;
  font-family: Arial, Helvetica, sans-serif;
}

.fd-designer * {
  box-sizing: border-box;
}

.fd-designer__header {
  margin-bottom: 20px;
}

.fd-designer__title {
  margin: 0 0 10px;
  font-size: 34px;
  line-height: 1.15;
}

.fd-designer__intro {
  margin: 0;
  max-width: 920px;
  font-size: 17px;
  line-height: 1.65;
  color: #535353;
}

.fd-designer__controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 24px;
}

.fd-control {
  background: linear-gradient(180deg, #ffffff 0%, #fbfaf8 100%);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}

.fd-control--full {
  grid-column: 1 / -1;
}

.fd-control__label {
  display: block;
  margin-bottom: 12px;
  font-size: 15px;
  font-weight: 700;
  color: #222;
}

.fd-buttons,
.fd-cards,
.fd-color-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.fd-buttons button,
.fd-cards button,
.fd-color-presets button,
.fd-gradient-toggle button {
  cursor: pointer;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: #fff;
  color: #2a2a2a;
  border-radius: 14px;
  transition: .2s ease;
}

.fd-buttons button {
  padding: 11px 14px;
  font-size: 14px;
  font-weight: 700;
}

.fd-buttons button.is-active,
.fd-cards button.is-active,
.fd-color-presets button.is-active,
.fd-gradient-toggle button.is-active {
  border-color: var(--fd-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--fd-accent) 24%, transparent);
}

.fd-cards button {
  flex: 1 1 185px;
  text-align: left;
  padding: 14px;
}

.fd-cards strong {
  display: block;
  margin-bottom: 4px;
  font-size: 15px;
}

.fd-cards span {
  display: block;
  font-size: 13px;
  line-height: 1.4;
  color: #666;
}

.fd-color-presets button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 700;
}

.fd-swatch {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.15);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.45);
}

.fd-gradient-toggle {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}

.fd-gradient-toggle button {
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 700;
}

.fd-sliders {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.fd-slider-wrap {
  background: rgba(0,0,0,.025);
  border-radius: 14px;
  padding: 12px;
}

.fd-slider-wrap label {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 700;
}

.fd-slider-wrap input[type="range"] {
  width: 100%;
}

.fd-designer__preview-card {
  background: #faf7f2;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 16px 35px rgba(0,0,0,.08);
}

.fd-designer__preview {
  position: relative;
  height: var(--fd-preview-height, 640px);
}

.fd-scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(180deg, #dce9f2 0%, #eef4f7 42%, #e7e4d8 42.5%, #e6ddcf 100%);
}

.fd-scene__sky {
  position: absolute;
  inset: 0 0 45% 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.85) 0 8%, transparent 9%),
    radial-gradient(circle at 65% 12%, rgba(255,255,255,.75) 0 7%, transparent 8%),
    linear-gradient(180deg, rgba(255,255,255,.18), transparent 70%);
}

.fd-scene__trees {
  position: absolute;
  top: 18%;
  width: 28%;
  height: 42%;
  filter: blur(1px);
  opacity: .9;
}

.fd-scene__trees--left {
  left: -2%;
  background:
    radial-gradient(circle at 15% 70%, #71895b 0 18%, transparent 19%),
    radial-gradient(circle at 42% 46%, #7e9863 0 22%, transparent 23%),
    radial-gradient(circle at 65% 65%, #547047 0 20%, transparent 21%),
    radial-gradient(circle at 80% 38%, #62804d 0 18%, transparent 19%);
}

.fd-scene__trees--right {
  right: -2%;
  background:
    radial-gradient(circle at 22% 38%, #64834d 0 20%, transparent 21%),
    radial-gradient(circle at 48% 64%, #809b67 0 24%, transparent 25%),
    radial-gradient(circle at 68% 40%, #577147 0 18%, transparent 19%),
    radial-gradient(circle at 88% 68%, #6f8b59 0 19%, transparent 20%);
}

.fd-scene__ground {
  position: absolute;
  left: -5%;
  right: -5%;
  bottom: 0;
  height: 42%;
  background:
    radial-gradient(ellipse at top, rgba(255,255,255,.65), transparent 55%),
    linear-gradient(180deg, #c3b59f 0%, #c6bba8 28%, #b6b18a 28.5%, #8fab73 100%);
}

.fd-scene__deck {
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: 12%;
  height: 10%;
  background: linear-gradient(180deg, #d7c1a2 0%, #b99064 100%);
  border-radius: 6px;
  box-shadow: 0 20px 30px rgba(0,0,0,.12);
}

.fd-shed {
  --body-h: 8;
  --body-s: 55;
  --body-l: 44;
  --trim-h: 42;
  --trim-s: 24;
  --trim-l: 92;
  --roof-h: 16;
  --roof-s: 14;
  --roof-l: 24;
  --glass: rgba(35, 60, 70, .22);
  --scale: 1;
  position: absolute;
  left: 50%;
  bottom: 17%;
  width: 46%;
  height: 55%;
  transform: translateX(-50%) scale(var(--scale));
  transform-origin: center bottom;
}

.fd-shed__wall,
.fd-shed__door,
.fd-shed__double-door,
.fd-shed__window,
.fd-shed__roof,
.fd-shed__roof-flat,
.fd-shed__roof-barn,
.fd-shed__fascia,
.fd-shed__step,
.fd-shed__shadow,
.fd-shed__corner {
  position: absolute;
}

.fd-shed__wall {
  left: 12%;
  right: 12%;
  bottom: 0;
  top: 24%;
  border-radius: 6px 6px 2px 2px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.25), rgba(255,255,255,0) 10%, rgba(0,0,0,.08) 100%),
    repeating-linear-gradient(90deg,
      hsla(var(--body-h), var(--body-s), calc(var(--body-l) + 3%), 1) 0 12px,
      hsla(var(--body-h), var(--body-s), calc(var(--body-l) + 1%), 1) 12px 20px,
      hsla(var(--body-h), var(--body-s), calc(var(--body-l) - 5%), 1) 20px 21px,
      hsla(var(--body-h), var(--body-s), calc(var(--body-l) + 1%), 1) 21px 34px),
    linear-gradient(180deg,
      hsl(var(--body-h), var(--body-s), calc(var(--body-l) + 10%)) 0%,
      hsl(var(--body-h), var(--body-s), var(--body-l)) 42%,
      hsl(var(--body-h), var(--body-s), calc(var(--body-l) - 8%)) 100%);
  box-shadow: 0 18px 35px rgba(0,0,0,.16);
}

.fd-shed__corner {
  top: 24%;
  bottom: 0;
  width: 12px;
  background: linear-gradient(180deg, hsl(var(--trim-h), var(--trim-s), 96%), hsl(var(--trim-h), var(--trim-s), 78%));
}

.fd-shed__corner--left { left: 12%; }
.fd-shed__corner--right { right: 12%; }

.fd-shed__roof {
  top: 5%;
  width: 48%;
  height: 24%;
  background:
    linear-gradient(180deg, hsla(var(--roof-h), var(--roof-s), calc(var(--roof-l) + 14%), 1), hsla(var(--roof-h), var(--roof-s), calc(var(--roof-l) - 2%), 1)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 12px, rgba(0,0,0,.06) 12px 24px);
  box-shadow: 0 6px 10px rgba(0,0,0,.15);
}

.fd-shed__roof--left {
  left: 10%;
  transform: skewY(-18deg);
  border-radius: 12px 0 0 2px;
}

.fd-shed__roof--right {
  right: 10%;
  transform: skewY(18deg);
  border-radius: 0 12px 2px 0;
}

.fd-shed__roof-flat {
  left: 10%;
  right: 10%;
  top: 16%;
  height: 7%;
  border-radius: 6px 10px 2px 2px;
  background: linear-gradient(180deg, hsla(var(--roof-h), var(--roof-s), calc(var(--roof-l) + 14%), 1), hsla(var(--roof-h), var(--roof-s), calc(var(--roof-l) - 3%), 1));
  box-shadow: 0 6px 10px rgba(0,0,0,.15);
  display: none;
}

.fd-shed__roof-barn {
  top: 8%;
  width: 28%;
  height: 20%;
  background: linear-gradient(180deg, hsla(var(--roof-h), var(--roof-s), calc(var(--roof-l) + 12%), 1), hsla(var(--roof-h), var(--roof-s), calc(var(--roof-l) - 2%), 1));
  display: none;
}

.fd-shed__roof-barn--left {
  left: 20%;
  transform: skewY(-22deg);
}

.fd-shed__roof-barn--right {
  right: 20%;
  transform: skewY(22deg);
}

.fd-shed__fascia {
  left: 10%;
  right: 10%;
  top: 20.5%;
  height: 3%;
  background: linear-gradient(180deg, hsl(var(--trim-h), var(--trim-s), 96%), hsl(var(--trim-h), var(--trim-s), 84%));
  border-radius: 2px;
}

.fd-shed__door,
.fd-shed__double-door {
  bottom: 0;
  left: 40%;
  width: 20%;
  height: 46%;
  border-radius: 3px 3px 0 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.12), rgba(0,0,0,.12)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.12) 0 10px, rgba(0,0,0,.06) 10px 19px),
    linear-gradient(180deg, hsl(var(--trim-h), var(--trim-s), 94%), hsl(var(--trim-h), var(--trim-s), 76%));
  border: 5px solid hsl(var(--trim-h), var(--trim-s), 92%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}

.fd-shed__door-window {
  position: absolute;
  top: 12%;
  left: 19%;
  right: 19%;
  height: 30%;
  background:
    linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,.06)),
    linear-gradient(180deg, rgba(37,55,62,.42), rgba(98,130,145,.18));
  border: 3px solid hsl(var(--trim-h), var(--trim-s), 95%);
}

.fd-shed__door-handle {
  position: absolute;
  right: 9%;
  top: 56%;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #5a5a5a;
}

.fd-shed__double-door {
  display: none;
  width: 27%;
  left: 36.5%;
  background: none;
  border: none;
  box-shadow: none;
}

.fd-shed__double-door span {
  position: absolute;
  top: 0;
  bottom: 0;
  width: calc(50% - 2px);
  border: 5px solid hsl(var(--trim-h), var(--trim-s), 92%);
  background:
    linear-gradient(90deg, rgba(255,255,255,.12), rgba(0,0,0,.12)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.12) 0 10px, rgba(0,0,0,.06) 10px 19px),
    linear-gradient(180deg, hsl(var(--trim-h), var(--trim-s), 94%), hsl(var(--trim-h), var(--trim-s), 76%));
}

.fd-shed__double-door .left { left: 0; }
.fd-shed__double-door .right { right: 0; }

.fd-shed__window {
  bottom: 24%;
  width: 14%;
  height: 20%;
  border-radius: 2px;
  border: 5px solid hsl(var(--trim-h), var(--trim-s), 92%);
  background:
    linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,.06)),
    linear-gradient(180deg, rgba(41,59,69,.44), rgba(120,150,160,.24));
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.04);
}

.fd-shed__window span {
  position: absolute;
  background: rgba(255,255,255,.6);
}

.fd-shed__window span:first-child {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
}

.fd-shed__window span:last-child {
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
}

.fd-shed__window--left { left: 20%; }
.fd-shed__window--right { right: 20%; }
.fd-shed__window--center {
  left: 20%;
  right: 20%;
  width: auto;
  display: none;
}

.fd-shed__step {
  left: 33%;
  right: 33%;
  bottom: -5.5%;
  height: 6%;
  background: linear-gradient(180deg, #cfa675, #aa7c4d);
  border-radius: 2px;
}

.fd-shed__shadow {
  left: 20%;
  right: 16%;
  bottom: -11%;
  height: 10%;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.28), rgba(0,0,0,0) 70%);
}

.fd-style-modern .fd-shed__wall,
.fd-style-funkis .fd-shed__wall,
.fd-style-studio .fd-shed__wall {
  border-radius: 4px 4px 2px 2px;
}

.fd-roof-pulpettak .fd-shed__roof--left,
.fd-roof-pulpettak .fd-shed__roof--right,
.fd-roof-platt_lutande .fd-shed__roof--left,
.fd-roof-platt_lutande .fd-shed__roof--right {
  display: none;
}

.fd-roof-pulpettak .fd-shed__roof-flat,
.fd-roof-platt_lutande .fd-shed__roof-flat {
  display: block;
}

.fd-roof-brutet_tak .fd-shed__roof--left,
.fd-roof-brutet_tak .fd-shed__roof--right,
.fd-roof-brutet_tak .fd-shed__roof-flat {
  display: none;
}

.fd-roof-brutet_tak .fd-shed__roof-barn {
  display: block;
}

.fd-door-pardorr .fd-shed__door {
  display: none;
}

.fd-door-pardorr .fd-shed__double-door {
  display: block;
}

.fd-door-slat .fd-shed__door-window,
.fd-door-modern .fd-shed__door-window {
  display: none;
}

.fd-door-modern .fd-shed__door {
  background:
    linear-gradient(90deg, rgba(255,255,255,.12), rgba(0,0,0,.12)),
    linear-gradient(180deg, hsl(var(--trim-h), var(--trim-s), 92%), hsl(var(--trim-h), var(--trim-s), 72%));
}

.fd-window-enkelt .fd-shed__window--right,
.fd-window-enkelt .fd-shed__window--center,
.fd-window-dubbel .fd-shed__window--center,
.fd-window-tre .fd-shed__window--center,
.fd-window-panorama .fd-shed__window--left,
.fd-window-panorama .fd-shed__window--right {
  display: none;
}

.fd-window-enkelt .fd-shed__window--left,
.fd-window-dubbel .fd-shed__window--left,
.fd-window-dubbel .fd-shed__window--right,
.fd-window-tre .fd-shed__window--left,
.fd-window-tre .fd-shed__window--right,
.fd-window-panorama .fd-shed__window--center {
  display: block;
}

.fd-window-tre .fd-shed__window--center {
  display: block;
  left: calc(50% - 7%);
  right: auto;
  width: 14%;
}

.fd-window-panorama .fd-shed__window--center {
  bottom: 22%;
  height: 25%;
}

.fd-style-modern .fd-shed__window,
.fd-style-funkis .fd-shed__window,
.fd-style-studio .fd-shed__window,
.fd-style-modern .fd-shed__door,
.fd-style-funkis .fd-shed__door,
.fd-style-studio .fd-shed__door,
.fd-style-modern .fd-shed__double-door span,
.fd-style-funkis .fd-shed__double-door span,
.fd-style-studio .fd-shed__double-door span {
  border-radius: 0;
}

.fd-style-modern .fd-shed__wall,
.fd-style-funkis .fd-shed__wall,
.fd-style-studio .fd-shed__wall {
  left: 9%;
  right: 9%;
}

.fd-style-modern .fd-shed__corner--left,
.fd-style-modern .fd-shed__corner--right,
.fd-style-funkis .fd-shed__corner--left,
.fd-style-funkis .fd-shed__corner--right,
.fd-style-studio .fd-shed__corner--left,
.fd-style-studio .fd-shed__corner--right {
  top: 22%;
}

.fd-style-funkis .fd-shed__roof-flat,
.fd-style-studio .fd-shed__roof-flat,
.fd-style-modern .fd-shed__roof-flat {
  display: block;
}

.fd-style-funkis .fd-shed__roof--left,
.fd-style-funkis .fd-shed__roof--right,
.fd-style-studio .fd-shed__roof--left,
.fd-style-studio .fd-shed__roof--right,
.fd-style-modern .fd-shed__roof--left,
.fd-style-modern .fd-shed__roof--right {
  display: none;
}

.fd-style-studio .fd-shed__window--center {
  display: block;
  bottom: 18%;
  height: 30%;
  left: 17%;
  right: 17%;
}

.fd-style-studio .fd-shed__window--left,
.fd-style-studio .fd-shed__window--right {
  display: none !important;
}

.fd-style-barn .fd-shed__roof-barn,
.fd-style-barn.fd-roof-sadeltak .fd-shed__roof-barn {
  display: block;
}

.fd-style-barn .fd-shed__roof--left,
.fd-style-barn .fd-shed__roof--right,
.fd-style-barn .fd-shed__roof-flat {
  display: none;
}

.fd-style-classic.fd-roof-sadeltak .fd-shed__roof--left,
.fd-style-classic.fd-roof-sadeltak .fd-shed__roof--right {
  display: block;
}

.fd-style-modern .fd-shed__window--left,
.fd-style-modern .fd-shed__window--right {
  bottom: 26%;
}

.fd-designer__badge {
  position: absolute;
  left: 20px;
  bottom: 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
  font-size: 14px;
  font-weight: 700;
}

.fd-designer__footer {
  margin-top: 20px;
}

.fd-designer__summary-card {
  background: linear-gradient(180deg, #ffffff 0%, #faf8f3 100%);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 10px 25px rgba(0,0,0,.05);
}

.fd-designer__price {
  margin-bottom: 10px;
  font-size: 28px;
  font-weight: 800;
  color: #1f1f1f;
}

.fd-designer__summary {
  font-size: 15px;
  line-height: 1.7;
  color: #444;
}

.fd-designer__summary strong {
  color: #1e1e1e;
}

.fd-designer__cta {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.65;
  color: #666;
}

.fd-designer__copy-btn {
  margin-top: 16px;
  border: 0;
  border-radius: 14px;
  background: var(--fd-accent);
  color: #fff;
  padding: 12px 16px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
}

.fd-hidden {
  display: none !important;
}

@media (max-width: 920px) {
  .fd-designer__controls {
    grid-template-columns: 1fr;
  }

  .fd-sliders {
    grid-template-columns: 1fr;
  }

  .fd-designer__title {
    font-size: 28px;
  }

  .fd-designer__preview {
    height: min(78vw, var(--fd-preview-height, 640px));
    min-height: 460px;
  }
}