.template-demo .cimplet-footer { overflow-x: clip; }
.template-demo .cimplet-footer .contact-icon:nth-last-child(-n+2) .icon-tooltip { left: auto; right: 0; transform: none; }
.demo-page { max-width: 1100px; padding-bottom: 56px; }
.demo-crumb { display: flex; flex-wrap: wrap; gap: 8px 12px; margin: 18px 0 22px; font-size: .82rem; color: var(--muted); }
.demo-crumb a { color: var(--wine); font-weight: 700; }
.demo-crumb a:hover { text-decoration: underline; }
.demo-layout {
  display: grid;
  grid-template: "preview intro" auto "preview settings" auto "preview enquiry" 1fr / minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: start;
  gap: 18px clamp(24px, 4vw, 48px);
}
.demo-intro { grid-area: intro; position: relative; padding: 6px 49px 0 0; }
.demo-intro h1 { font-size: clamp(2.45rem, 5.2vw, 4.65rem); line-height: .98; margin: 8px 0 13px; overflow-wrap: anywhere; }
.demo-intro .catalogue-save { top: 26px; right: 0; }
.demo-description { margin: 0; color: var(--muted); }
.demo-settings { grid-area: settings; display: grid; align-content: start; gap: 9px; padding: 8px 0 0; border: 0; background: transparent; }
.demo-control-label { font-weight: 700; font-size: .83rem; color: var(--ink); }
.demo-wording-label { margin-top: 12px; }
.demo-package-tabs, .demo-wording { display: grid; grid-template-columns: repeat(auto-fit,minmax(100px,1fr)); gap: 4px; padding: 4px; border: 1px solid #dccbb2; border-radius: 13px; background: #f1e8dc; }
.demo-package-tabs button, .demo-wording button { min-height: 48px; padding: 8px 6px; border: 0; border-radius: 9px; background: transparent; color: var(--ink); font: 700 .8rem/1.35 Manrope,Arial,sans-serif; transition: background .15s,color .15s; }
.demo-package-tabs button { display: grid; align-content:center; justify-items:center; gap:2px; }
.demo-package-tabs button small { font: 500 .68rem/1.4 Manrope,Arial,sans-serif; white-space:nowrap; opacity:.85; }
.demo-package-tabs button[aria-pressed="true"],.demo-wording button[aria-pressed="true"] { background: var(--wine); color: #fff; box-shadow: 0 2px 8px #8000201c; }
.demo-package-tabs button:focus-visible,.demo-wording button:focus-visible { outline:2px solid var(--wine); outline-offset:2px; }
.demo-wording { grid-template-columns: repeat(3,minmax(0,1fr)); }
.demo-settings p, .demo-preview p, .demo-enquiry > p { color: var(--muted); margin: 6px 0 0; font-size: .78rem; }
.demo-preview { grid-area: preview; display: grid; justify-items: center; align-content:start; padding: 9px 4px 0; border:0; background:transparent; text-align:center; }
.demo-preview-head { display:grid;gap:3px;justify-items:center;margin:0 0 14px; }
.demo-preview-head h2 { margin:0; font:700 16px/1.4 Manrope,Arial,sans-serif; color:var(--wine); }
.demo-preview-head p { margin:0!important; font-size:12px!important; }
.demo-phone { position:relative; width:min(100%,330px); aspect-ratio:1 / 2.06; padding:5px; overflow:hidden; border-radius:30px; background:#272421; box-shadow:0 15px 35px #2d2a2630; }
.demo-phone::after { content: ""; position: absolute; top: 12px; left: 50%; width: 52px; height: 8px; border-radius: 8px; background: #272421; transform: translateX(-50%); pointer-events: none; }
.demo-phone iframe { display: block; width: 100%; height: 100%; border: 0; border-radius: 25px; background: var(--paper); }
.demo-phone .preview-load-status { inset: 5px; border-radius: 25px; }
.demo-phone .demo-exit-fullscreen { display: none; }
.demo-phone:fullscreen { display: flex; justify-content: center; width: 100%; height: 100%; min-height: 0; padding: 0; border-radius: 0; }
.demo-phone:fullscreen::after { display: none; }
.demo-phone:fullscreen iframe { width: min(100%, 440px); border-radius: 0; }
.demo-phone:fullscreen .demo-exit-fullscreen { display: inline-flex; position: absolute; z-index: 3; right: 8px; bottom: 8px; }
.demo-preview-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 9px; }
.demo-preview-actions .btn { min-height: 44px; padding: 6px 10px; font-size: .75rem; }
.demo-enquiry { grid-area: enquiry; }
.demo-enquire { width: 100%; min-height: 48px; gap: 8px; }
.demo-enquire svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.demo-enquiry > p { margin-bottom: 15px; text-align: center; }
.demo-enquiry details { padding: 12px 0; border-top: 1px solid var(--line); font-size:.9rem; }
.demo-enquiry details p { margin: 8px 0; }
.demo-included { padding: 20px 0 12px; border-top:1px solid var(--line); }
.demo-included h2 { font:700 19px/1.35 Manrope,Arial,sans-serif; color:var(--wine); margin:0; }
.demo-included > p { margin:5px 0 12px; color:var(--muted); font-size:12px; }
.demo-included ul { list-style:none; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 15px; margin:0; padding:0; }
.demo-included li { display:flex; align-items:flex-start; gap:9px; padding:9px 0; border-bottom:1px solid #e7dcc87a; color:var(--ink); font-size:12px; line-height:1.55; overflow-wrap:anywhere; }
.demo-feature-icon { display:inline-grid; place-items:center; flex:0 0 20px; width:20px; height:20px; margin-top:0; border-radius:999px; background:#eae1d0; color:var(--wine); font-size:12px; font-weight:800; }
.demo-included .text-link { margin-top:8px; font-size:12px; }
.demo-enquiry summary { display: flex; justify-content: space-between; align-items: center; min-height: 32px; font-weight: 700; cursor: pointer; list-style: none; }
.demo-enquiry summary::-webkit-details-marker { display: none; }
.demo-enquiry summary::after { content: '+'; color: var(--wine); font-size: 1.2rem; }
.demo-enquiry details[open] summary::after { content: '−'; }
.demo-carousel { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); }
.demo-carousel header { display: flex; align-items: end; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.demo-carousel header p, .demo-carousel h2 { margin: 0; }
.demo-carousel h2 { font-size: clamp(1.9rem, 3.4vw, 2.75rem); line-height: 1.1; }
.demo-carousel-controls { display: flex; gap: 5px; }
.demo-carousel-controls[hidden] { display: none; }
.demo-carousel-controls .btn { min-width: 44px; min-height: 44px; padding: 0; }
.demo-carousel-controls .btn:disabled { opacity: .45; cursor: default; }
.demo-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 42px) / 4); gap: 14px; overflow-x: auto; padding: 4px 4px 12px; scroll-snap-type: x mandatory; }
.demo-track .catalogue-card { min-width: 0; scroll-snap-align: start; }
@media (max-width: 940px) {
  .demo-track { grid-auto-columns: calc((100% - 28px) / 3); }
}
@media (max-width: 740px) {
  .demo-page { width: calc(100% - 28px); max-width: 520px; padding-bottom: 36px; }
  .demo-layout { grid-template: "intro" "settings" "preview" "enquiry" / minmax(0, 1fr); gap: 12px; }
  .demo-intro { padding-top: 0; }
  .demo-intro .catalogue-save { top: 14px; }
  .demo-crumb { margin: 12px 0 15px; }
  .demo-settings { padding: 0; }
  .demo-preview { padding: 12px 0 0; }
  .demo-carousel { margin-top: 32px; }
  .demo-track { grid-auto-columns: minmax(142px, 46%); gap: 10px; }
}

@media (max-width: 600px) {
  .demo-preview { padding-inline: 0; }
  .demo-included ul { grid-template-columns:minmax(0,1fr); }
  .demo-package-tabs button small { font-size:.64rem; }
  .demo-phone {
    width: 100%;
    height: 570px;
    height: clamp(550px, 73svh, 720px);
    aspect-ratio: auto;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: none;
  }
  .demo-phone::after { display: none; }
  .demo-phone iframe { border-radius: 11px; }
  .demo-phone .preview-load-status { inset: 0; border-radius: 11px; }
  .demo-phone:fullscreen { border: 0; }
}

/* Live preview personalisation is a plain form section, not a card nested in a card. */
.template-demo .demo-order-personalise{width:100%;max-width:440px;margin:18px auto 0;padding:15px 0 0;background:transparent;border:0;border-top:1px solid #e0d2be;text-align:left}
.template-demo .demo-personalise-head{margin-bottom:10px}
.template-demo .demo-personalise-head h3{font:700 15px/1.35 Manrope,Arial,sans-serif;margin:0;color:#800020}
.template-demo .demo-personalise-head p{font-size:12px;margin:3px 0 0;color:#756b60}
.template-demo .demo-order-personalise .order-fields{gap:10px}
.template-demo .demo-order-personalise .order-fields label{font:600 12px/1.5 Manrope,Arial,sans-serif;color:#64574e}
.template-demo .demo-order-personalise .order-fields input{min-height:43px;margin-top:5px;padding:9px 12px;border-radius:11px;border:1px solid #d9cbb7;background:#fff;color:#2d2a26;font:400 14px/1.4 Manrope,Arial,sans-serif;box-shadow:none}
.template-demo .demo-order-personalise .order-fields input:focus-visible{border-color:#800020;outline:2px solid #800020;outline-offset:1px}
.template-demo .demo-preview-actions{margin-top:12px;gap:8px}
.template-demo .demo-preview-actions .btn{border-radius:10px}
.template-demo .demo-enquiry .demo-enquire{border-radius:11px}
@media(max-width:400px){.template-demo .demo-order-personalise .order-fields{grid-template-columns:minmax(0,1fr)}}

/* Demo refinement: feature education without nested feature cards. */
.template-demo .demo-cta-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:stretch}
.template-demo .demo-cta-row .demo-enquire{width:100%;min-width:0;min-height:50px;box-sizing:border-box;border-radius:12px!important;display:inline-flex;align-items:center;justify-content:center;text-align:center;gap:7px;padding:9px 12px;font-size:12px;line-height:1.35;white-space:normal}
.template-demo .demo-cta-row .demo-whatsapp-cta{background:#128c51;border:1px solid #128c51;color:#fff}
.template-demo .demo-cta-row .demo-whatsapp-cta:hover{background:#087540;border-color:#087540;color:#fff}
.template-demo .demo-cta-row .demo-whatsapp-cta:focus-visible{outline:3px solid #128c51;outline-offset:2px}
.template-demo .demo-included ul{gap:0 12px}
.template-demo .demo-included li{display:block;padding:0;margin:0;border-bottom:1px solid #e7dcc87a}
.template-demo .demo-feature-toggle{display:flex;align-items:center;gap:9px;box-sizing:border-box;width:100%;min-height:51px;padding:8px 3px;border:0;border-radius:8px;text-align:left;background:transparent;color:#2d2a26;cursor:pointer;font:500 12px/1.4 Manrope,Arial,sans-serif}
.template-demo .demo-feature-toggle:hover{background:#f2e9de}
.template-demo .demo-feature-toggle:focus-visible{outline:2px solid #800020;outline-offset:1px}
.template-demo .demo-feature-toggle strong{flex:1;min-width:0;font-weight:600}
.template-demo .demo-feature-icon{display:inline-grid;place-items:center;flex:0 0 32px;width:32px;height:32px;border-radius:10px;background:#f0e4d2;color:#800020}
.template-demo .demo-feature-icon svg{width:19px;height:19px}
.template-demo .demo-feature-chevron{flex:0 0 15px;font-size:18px;line-height:1;text-align:center;color:#800020}
.template-demo .demo-feature-description{margin:0 0 12px 43px!important;color:#685c50!important;font:400 12px/1.55 Manrope,Arial,sans-serif!important}
.template-demo .demo-feature-description[hidden]{display:none!important}
.template-demo .demo-included li:has(.demo-feature-toggle[aria-expanded="true"]){background:#fbf6ef}
.template-demo .demo-personalise-footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-top:11px}
.template-demo .demo-personalise-footer .btn{min-height:39px;padding:8px 18px;font-size:12px;border-radius:10px}
.template-demo #demo-name-status{font:400 11px/1.4 Manrope,Arial,sans-serif;color:#756b60}
.template-demo .demo-preview-actions{width:min(100%,330px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:9px 0 0}
.template-demo .demo-preview-actions .btn{box-sizing:border-box;display:flex;min-width:0;justify-content:center;align-items:center;min-height:38px;padding:7px 9px;font-size:11px;border-radius:10px!important;background:transparent;border:1px solid #e2d3bd;color:#800020}
.template-demo .demo-preview-actions .btn:hover{border-color:#800020;background:#f6eee3}
@media(max-width:740px){ .template-demo .demo-cta-row{gap:8px}
 .template-demo .demo-cta-row .demo-enquire{font-size:11px;padding:9px 6px}
}
@media(max-width:365px){.template-demo .demo-cta-row .demo-enquire{font-size:10px}}

/* Preview actions belong to the phone, while name editing has a separate Apply action. */
.template-demo .demo-preview-actions { margin: 11px auto 0; width: min(100%, 330px); }
.template-demo .demo-preview-actions .btn {
  min-height: 38px; gap: 6px; font-weight: 600;
  background: transparent; border-color: #ded2c2;
}
.template-demo .demo-preview-actions .btn svg {
  width: 15px; height: 15px; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.template-demo .demo-order-personalise { margin-top: 18px; }
.template-demo .demo-personalise-footer { justify-content: flex-end; }
.template-demo #demo-name-status { flex: 1 1 140px; }
@media(max-width:400px) {
  .template-demo .demo-preview-actions { margin-top: 9px; gap: 6px; }
  .template-demo .demo-preview-actions .btn { font-size: 11px; min-height: 38px; }
}

/* The two demo actions have exactly the same dimensions. */
.template-demo .demo-cta-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:stretch}
.template-demo .demo-cta-row>.demo-enquire{display:inline-flex;align-items:center;justify-content:center;align-self:stretch;box-sizing:border-box;min-width:0;width:100%;height:48px;min-height:48px;max-height:48px;margin:0;padding:0 9px!important;border-radius:11px!important;font:600 12px/1.3 Manrope,Arial,sans-serif;gap:7px;text-align:center;white-space:normal}
.template-demo .demo-cta-row .demo-whatsapp-cta .whatsapp-brand-icon{width:18px;height:18px;flex:0 0 18px;stroke:none}
@media(max-width:380px){.template-demo .demo-cta-row{gap:7px}.template-demo .demo-cta-row>.demo-enquire{font-size:11px;padding:0 5px!important}}