/* Make your website page, Matt job 1101-164347: the DAH Websites preview-site try-on widget in the main site's look.
   Rules copied from the DAH Websites preview site (assets/style.css); shop colour names mapped to the main palette below. */
.mw{--muted:#4d5b6a;--white:#fff;--accent-ink:#b54519;--radius:5px}
.mw .tryon-copy h2{font-size:clamp(32px,4vw,48px);line-height:1.04;letter-spacing:-.05em;margin:10px 0 14px}
.mw .tryon-form input{width:100%;min-height:52px;border:1px solid #8d9bab;background:#fff;border-radius:5px;padding:12px 15px;color:#0e1b2c;font:inherit;font-size:16px}
.mw .tryon-form .field{margin:0}
.mw .tryon-form select{border-color:#8d9bab}
.mw .style-chips button{border-radius:5px;font:inherit;font-weight:650}
.mw .tryon-open{gap:10px}
.mw-next{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;border-top:1px solid var(--line);margin-top:70px;padding-top:34px}
.mw-next h2{font-size:clamp(24px,3vw,32px);letter-spacing:-.04em;margin:0}
.mw-next p{margin:6px 0 0;color:#4d5b6a}
.mw-next .actions{display:flex;flex-wrap:wrap;gap:10px}
@media(prefers-reduced-motion:reduce){.tp-in,.tp-in>*,.style-chips button{transition:none!important}}
.field-hint{font-size:13px;color:var(--muted);margin-top:8px}
.style-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px}
.style-chips button{min-height:46px;padding:10px 20px;border-radius:100px;border:1px solid var(--line);background:var(--white);color:var(--ink);font-weight:600;font-size:15px;transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease)}
.style-chips button:hover{border-color:var(--ink);transform:translateY(-2px)}
.style-chips button[aria-pressed=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.style-chips button:focus-visible{outline:3px solid var(--accent-ink);outline-offset:3px}
.version-status{margin-top:18px;font-size:14px;color:var(--ink);min-height:1.6em}
.version-note{margin-top:6px;font-size:13px;color:var(--muted)}
.tryon{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:64px;align-items:center}
.tryon .intro{color:var(--muted)}
.tryon-form{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:30px}
.tryon-form label{display:block;font-size:14px;font-weight:600;margin-bottom:6px}
.tryon-form label span{font-weight:400;color:var(--muted)}
.tryon-form select{display:block;width:100%;min-height:52px;padding:12px 40px 12px 15px;border:1px solid #858c7c;border-radius:5px;background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%2320231f' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 12px center/18px;color:var(--ink);font:inherit;font-size:16px;appearance:none}
.tryon-form select:focus{outline:2px solid var(--ink);outline-offset:2px}
.tryon .style-chips{margin-top:22px}
.tryon-stage{display:grid;justify-items:center;gap:14px}
.tp-phone{width:min(330px,86vw);aspect-ratio:.5;background:#242925;border-radius:42px;padding:10px;box-shadow:0 40px 70px -40px #2f3a3090,0 0 0 1px #3a403b inset}
.tp{height:100%;border-radius:33px;overflow:hidden;container-type:inline-size;--acc:#b5532a;--acc-fg:#fff;--face-bg:#f3e3cf}
.tp-in{height:100%;display:flex;flex-direction:column;gap:5cqw;padding:12cqw 7cqw 7cqw;background:var(--bg);color:var(--fg);font:400 4.2cqw/1.4 Display,system-ui,sans-serif;transition:background .6s var(--ease),color .6s var(--ease)}
.tp-bar{display:flex;justify-content:space-between;align-items:center;gap:3cqw}
.tp-logo{display:flex;align-items:center;gap:2.4cqw;min-width:0;font:800 4.6cqw/1.1 Display,system-ui,sans-serif;letter-spacing:-.03em}
.tp-logo b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:inherit}
.tp-logo i{flex:none;width:6cqw;height:6cqw;border-radius:var(--rad);background:var(--acc)}
.tp-call{flex:none;display:flex;align-items:center;gap:1.6cqw;padding:2cqw 3.6cqw;border-radius:var(--rad);border:1px solid var(--line);font-size:3.8cqw;font-weight:600}
.tp-call .ico{width:4cqw;height:4cqw}
.tp-hero{display:flex;flex-direction:column;align-items:flex-start;gap:3.6cqw;padding:3cqw 0}
.tp-kicker{font-size:3.3cqw;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--kick,var(--fg))}
.tp-kicker::before{content:'';display:inline-block;width:1.9cqw;height:1.9cqw;margin-right:1.6cqw;border-radius:50%;background:var(--acc);vertical-align:.12em}
.tp-title{font:var(--tw,700) var(--ts,10.4cqw)/1 var(--tf,Display),sans-serif;letter-spacing:var(--tr,-.045em);text-transform:var(--tc,none);overflow-wrap:anywhere}
.tp-hello{display:flex;gap:3.4cqw;align-items:center;font-size:3.9cqw;line-height:1.35;color:var(--mut)}
.tp-hello b{color:var(--fg);font-weight:700}
.tp-face{flex:none;width:14cqw;height:14cqw;border-radius:50%;overflow:hidden;box-shadow:0 0 0 2px var(--bg),0 0 0 3px var(--line)}
.tp-face svg{width:100%;height:100%}
.tp-cta{padding:3.4cqw 6cqw;border-radius:var(--rad);background:var(--acc);color:var(--acc-fg);font-weight:700;font-size:4.2cqw}
.tp-list{display:grid;gap:2.4cqw}
.tp-list span{display:block;padding:3.4cqw 4cqw;border-radius:var(--rad);background:var(--card);font-weight:600;font-size:3.9cqw}
.tp-foot{margin-top:auto;display:flex;justify-content:space-between;gap:3cqw;padding-top:3.4cqw;border-top:1px solid var(--line);font-size:3.4cqw;color:var(--mut)}
.tp-foot b{color:var(--fg)}
.tp[data-look=bold] .tp-in{--bg:#151816;--fg:#f6f1e7;--mut:#bdb8ad;--card:#232724;--line:#3a3f3b;--rad:0px;--tw:800;--tc:uppercase;--tr:-.02em;--ts:10.8cqw;--face-bg:#2b302c}
.tp[data-look=clean] .tp-in{--bg:#ffffff;--fg:#17212b;--mut:#5b6672;--card:#f2f5f9;--line:#e3e8ee;--rad:2.6cqw;--tw:700;--ts:9.6cqw;text-align:center}
.tp[data-look=clean] .tp-hero{align-items:center}
.tp[data-look=clean] .tp-hello{text-align:left}
.tp[data-look=warm] .tp-in{--bg:#fff3e4;--fg:#4b2617;--mut:#80533f;--card:#ffe3c6;--line:#f0d2b2;--rad:6cqw;--tw:700;--tr:-.035em;--ts:10.6cqw}
.tp-in>*{transition:transform .5s var(--ease),opacity .5s var(--ease)}
.tp.is-swapping .tp-in>*{opacity:0;transform:translateY(3cqw)}
.tryon-tag{font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--muted);text-transform:uppercase}
@media(max-width:999px){.tryon{grid-template-columns:1fr;gap:40px}}
@media(max-width:767px){.tryon-form{grid-template-columns:1fr 1fr;gap:12px}.tryon-form label{font-size:13px}}
@media(max-width:420px){.tryon-form{grid-template-columns:1fr}}
.tp-face{display:grid;place-items:center;background:var(--acc);color:var(--acc-fg,#fff)}
.tp-face b{font:700 6.4cqw/1 Display,system-ui,sans-serif;color:inherit}
.tryon-actions{display:grid;gap:8px;justify-items:start;margin-top:16px}
.tryon-actions .field-hint{max-width:54ch;margin:0}
.tryon-open[aria-disabled="true"]{opacity:.62;cursor:not-allowed;filter:saturate(.55)}
.tryon-open[aria-disabled="false"]{transition:transform .25s ease,background-color .25s ease}
.tryon-open[aria-disabled="false"]:hover{transform:translateY(-2px)}
@media(prefers-reduced-motion:reduce){.tryon-open[aria-disabled="false"]{transition:none}.tryon-open[aria-disabled="false"]:hover{transform:none}}