/* YARNMATES_MOBILE_EXAMPLES_V1 */
.ym-phone-examples {
    max-width:1120px; margin:64px auto; padding:32px 20px;
    color:#342b32; text-align:center;
}
.ym-phone-intro {max-width:680px;margin:0 auto 32px}
.ym-phone-intro h2 {font-size:clamp(28px,4vw,42px);line-height:1.15}
.ym-phone-intro p {line-height:1.6}
.ym-phone-intro small {color:#746a72}
.ym-phone-eyebrow {font-size:11px;font-weight:700;letter-spacing:.12em}
.ym-phone-gallery {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.ym-phone-example {min-width:0}
.ym-phone-example > h3 {font-size:20px;margin:22px 0 8px}
.ym-phone-example > p {font-size:15px;line-height:1.6;margin:0}
.ym-demo-phone {
    max-width:300px;margin:auto;padding:10px;border:2px solid #342b32;
    border-radius:36px;background:#342b32;
    box-shadow:0 20px 40px rgba(52,43,50,.14);text-align:left;
}
.ym-demo-speaker {width:60px;height:5px;background:#a79aa4;border-radius:9px;margin:4px auto 10px}
.ym-demo-screen {
    min-height:470px;border-radius:24px;background:#f7f4ef;
    padding:18px 14px;display:flex;flex-direction:column;
    gap:12px;overflow:hidden;
}
.ym-demo-screen * {box-sizing:border-box}
.ym-demo-brand {font-size:16px;font-weight:800;color:#60354b}
.ym-demo-brand span {display:block;font-size:9px;letter-spacing:.1em;margin-top:3px}
.ym-demo-screen h3 {font-size:23px;line-height:1.2;margin:0}
.ym-demo-screen h4 {font-size:15px;line-height:1.3;margin:8px 0 4px}
.ym-demo-screen p {font-size:12px;line-height:1.5;margin:0}
.ym-demo-muted {color:#746a72}
.ym-demo-card {background:#fffdfa;border:1px solid #e5ddd6;border-radius:14px;padding:12px}
.ym-demo-photo {display:block;width:100%;height:115px;object-fit:cover;border-radius:9px;margin-bottom:10px}
.ym-demo-tag {display:inline-block;background:#eee4ea;color:#60354b;border-radius:20px;padding:4px 8px;font-size:10px}
.ym-demo-progress {height:6px;background:#eee7e2;border-radius:10px;margin:12px 0 7px}
.ym-demo-progress span {display:block;width:40%;height:100%;background:#60354b;border-radius:10px}
.ym-demo-stats {display:flex;justify-content:space-between;font-size:10px;gap:8px}
.ym-demo-screen .ym-demo-note {font-size:11px;color:#746a72;margin:12px 0}
.ym-demo-action {display:block;text-align:center;background:#60354b;color:white;padding:11px;border-radius:10px;font-size:12px;font-weight:700}
.ym-demo-search {background:white;border:1px solid #e5ddd6;padding:11px;border-radius:10px;color:#746a72;font-size:12px}
.ym-demo-smallbar {display:flex;justify-content:space-between;font-size:11px;color:#60354b}
.ym-demo-yarn {display:flex;align-items:center;gap:10px}
.ym-demo-yarn small {font-size:10px;color:#746a72}
.ym-demo-swatch {width:44px;height:44px;flex:0 0 44px;border-radius:50%;box-shadow:inset 0 0 0 5px rgba(255,255,255,.2)}
.ym-demo-swatch.sage {background:#91a38b}
.ym-demo-swatch.blush {background:#c87c9d}
.ym-demo-nav {margin-top:auto;display:flex;justify-content:space-between;padding-top:14px;border-top:1px solid #e5ddd6;font-size:10px;color:#746a72;gap:6px}
.ym-demo-nav b {color:#60354b}
.ym-phone-join {display:inline-block;margin-top:32px;padding:14px 22px;background:#60354b;color:white;border-radius:12px;text-decoration:none;font-weight:700}
.ym-mobile-filter summary {display:none}
@media(max-width:760px) {
    .ym-phone-gallery {grid-template-columns:1fr;gap:36px}
    .ym-phone-examples {margin:30px auto;padding:24px 16px}
    body.ym-ui .app-shell {grid-template-columns:minmax(0,1fr)}
    body.ym-ui .app-shell > main,
    body.ym-ui .ym-v2-content,
    body.ym-ui .ym-stash-content,
    body.ym-ui .ym13-page {min-width:0;max-width:100%;box-sizing:border-box}
    body.ym-ui .ym13-library-layout,
    body.ym-ui .ym13-yarn-layout {display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:16px}
    body.ym-ui .ym13-page-head {display:flex;flex-wrap:wrap;gap:12px;margin-bottom:18px}
    body.ym-ui .ym13-page-head h1 {font-size:28px;line-height:1.2;margin:0 0 8px}
    body.ym-ui .ym13-page-head p {font-size:15px;line-height:1.5;margin:0}
    body.ym-ui .ym13-filter-panel {padding:14px!important;min-width:0}
    body.ym-ui .ym13-form-grid {display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:16px}
    body.ym-ui .ym13-form-grid > * {grid-column:1!important;min-width:0}
    body.ym-ui input:not([type=radio]):not([type=checkbox]):not([type=hidden]),
    body.ym-ui select, body.ym-ui textarea {
        font-size:16px!important;max-width:100%;box-sizing:border-box;
    }
    body.ym-ui input[type=file] {width:100%;font-size:14px!important}
    body.ym-ui input[type=color] {width:100%;height:44px}
    body.ym-ui .ym13-form-grid label {font-size:15px;line-height:1.4}
    body.ym-ui .ym13-btn,
    body.ym-ui .ym13-tabs button {min-height:44px;padding:10px 14px;font-size:14px}
    body.ym-ui .ym13-tabs {display:flex;flex-wrap:wrap;gap:8px}
    body.ym-ui .ym13-pattern-grid {grid-template-columns:minmax(0,1fr)!important}
    body.ym-ui .ym13-pattern-image img {width:100%;object-fit:cover}
    body.ym-ui .ym13-library-main {min-width:0}
    body.ym-ui .ym13-library-toolbar {display:flex;flex-wrap:wrap;gap:12px}
    body.ym-ui .ym-mobile-filter summary {
        display:block;cursor:pointer;padding:12px 0;
        font-size:14px;font-weight:700;color:#60354b;
    }
    body.ym-ui .ym-mobile-filter summary::after {content:" +";float:right}
    body.ym-ui .ym-mobile-filter[open] summary::after {content:" −"}
    body.ym-ui .ym-mobile-filter .ym13-filter-group {margin-top:6px}
    body.ym-ui .ym-floating-feedback,
    body.ym-ui .ym-floating-admin {
        position:static!important;display:inline-flex;
        margin:8px 8px 16px;padding:11px 16px;
        box-shadow:none;min-height:44px;box-sizing:border-box;
    }
    body.ym-ui .ym-mobile-cards {width:100%;border-collapse:separate}
    body.ym-ui .ym-mobile-cards thead {display:none}
    body.ym-ui .ym-mobile-cards tbody {display:grid;gap:12px}
    body.ym-ui .ym-mobile-cards tr {
        display:grid;grid-template-columns:minmax(0,1fr);
        padding:14px;background:#fffdfa;border:1px solid #e5ddd6;border-radius:14px;
    }
    body.ym-ui .ym-mobile-cards td {
        display:flex;justify-content:space-between;align-items:flex-start;
        gap:12px;padding:7px 0;border:0;white-space:normal;
        overflow-wrap:anywhere;min-width:0;
    }
    body.ym-ui .ym-mobile-cards td[data-label]::before {
        content:attr(data-label);font-size:12px;color:#746a72;flex:0 0 68px;
    }
    body.ym-ui .ym-mobile-cards td[colspan] {display:block}
    body.ym-ui .ym-mobile-cards tr[hidden] {display:none!important}
    body.ym-ui .ym13-pattern-tile[hidden] {display:none!important}
}


/* YARNMATES_POLISHED_PHONES_V2 */
.ym-phone-examples .ym-phone-gallery {
    gap:40px;
    align-items:start;
    padding:24px 0;
}
.ym-phone-examples .ym-demo-phone {
    position:relative;
    max-width:292px;
    padding:8px;
    border:2px solid #77716f;
    border-radius:45px;
    background:linear-gradient(145deg,#44413f,#151414 45%,#514c49);
    box-shadow:
        0 0 0 1px #b6aea8,
        0 0 0 4px #e7dfd7,
        0 28px 48px -20px rgba(45,29,35,.42),
        0 8px 16px rgba(45,29,35,.10);
}
.ym-phone-examples .ym-demo-phone::before {
    content:"";
    position:absolute;
    left:-6px;
    top:105px;
    width:3px;
    height:48px;
    border-radius:3px;
    background:#706862;
    box-shadow:0 62px 0 #706862;
}
.ym-phone-examples .ym-demo-phone::after {
    content:"";
    position:absolute;
    right:-6px;
    top:146px;
    width:3px;
    height:68px;
    border-radius:3px;
    background:#706862;
}
.ym-phone-examples .ym-demo-speaker {
    position:absolute;
    z-index:2;
    top:19px;
    left:50%;
    transform:translateX(-50%);
    width:78px;
    height:22px;
    margin:0;
    border-radius:20px;
    background:#171616;
    box-shadow:inset -9px 0 0 #252323;
}
.ym-phone-examples .ym-demo-screen {
    position:relative;
    min-height:540px;
    border-radius:35px;
    padding:15px 16px 28px;
    gap:12px;
    background:linear-gradient(155deg,#fffdf9,#f6f0e9);
}
.ym-phone-examples .ym-demo-status {
    display:flex;
    justify-content:space-between;
    align-items:center;
    min-height:24px;
    padding:0 5px;
    margin-bottom:12px;
    font-size:10px;
    font-weight:800;
    color:#30292b;
}
.ym-phone-examples .ym-demo-status span:last-child {
    font-size:9px;
    letter-spacing:1px;
}
.ym-phone-examples .ym-demo-brand {
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:17px;
    letter-spacing:-.5px;
    color:#693f54;
}
.ym-phone-examples .ym-demo-brand span {
    font-size:8px;
    letter-spacing:.08em;
    background:#eee3e8;
    padding:5px 7px;
    border-radius:6px;
    margin:0;
}
.ym-phone-examples .ym-demo-screen h3 {
    font-family:"DM Sans",sans-serif;
    font-size:25px;
    font-weight:700;
    letter-spacing:-1px;
    margin-top:8px;
}
.ym-phone-examples .ym-demo-screen > .ym-demo-muted {
    margin-top:-6px;
    margin-bottom:4px;
    font-size:11px;
}
.ym-phone-examples .ym-demo-card {
    border:1px solid rgba(106,75,69,.09);
    border-radius:18px;
    background:#fffefd;
    padding:13px;
    box-shadow:0 5px 14px rgba(75,48,44,.045);
}
.ym-phone-examples .ym-demo-photo {
    height:134px;
    border-radius:11px;
    margin-bottom:12px;
}
.ym-phone-examples .ym-demo-tag {
    background:#eaf0e5;
    color:#51634b;
    font-size:9px;
    font-weight:700;
    padding:5px 8px;
}
.ym-phone-examples .ym-demo-screen h4 {
    font-family:"DM Sans",sans-serif;
    font-size:15px;
    font-weight:700;
    letter-spacing:-.3px;
    margin:9px 0 5px;
}
.ym-phone-examples .ym-demo-progress {
    height:7px;
    background:#f0e8eb;
    margin-top:15px;
}
.ym-phone-examples .ym-demo-progress span {
    background:linear-gradient(90deg,#a16c87,#63374d);
}
.ym-phone-examples .ym-demo-action {
    background:linear-gradient(135deg,#784b62,#563043);
    border:1px solid rgba(255,255,255,.12);
    border-radius:12px;
    padding:12px;
    box-shadow:0 5px 10px rgba(86,48,67,.15);
}
.ym-phone-examples .ym-demo-search {
    display:flex;
    align-items:center;
    gap:8px;
    border:1px solid #e8dfd8;
    border-radius:12px;
    background:rgba(255,255,255,.85);
    color:#91838c;
    padding:12px;
    font-size:11px;
}
.ym-phone-examples .ym-demo-search::before {
    content:"";
    width:10px;
    height:10px;
    border:1.5px solid #a99aa2;
    border-radius:50%;
    flex:0 0 10px;
}
.ym-phone-examples .ym-demo-smallbar {
    align-items:center;
    font-size:10px;
    padding:2px 0;
}
.ym-phone-examples .ym-demo-smallbar span:last-child {
    background:#ece4dc;
    border-radius:7px;
    padding:6px 8px;
}
.ym-phone-examples .ym-demo-yarn {
    gap:12px;
    padding:16px 12px;
}
.ym-phone-examples .ym-demo-yarn h4 {margin-top:0}
.ym-phone-examples .ym-demo-yarn p {font-size:11px}
.ym-phone-examples .ym-demo-swatch {
    width:48px;
    height:48px;
    flex-basis:48px;
    border:3px solid #fff;
    outline:1px solid #e7dfd7;
    box-shadow:inset 0 0 0 5px rgba(255,255,255,.15);
}
.ym-phone-examples .ym-demo-nav {
    position:relative;
    background:#fffcf8;
    margin: auto -16px -28px;
    padding:15px 12px 28px;
    border-top:1px solid #e8dfd8;
    gap:4px;
    font-size:9px;
}
.ym-phone-examples .ym-demo-nav > * {
    display:block;
    text-align:center;
    flex:1;
    padding:7px 4px;
    border-radius:9px;
}
.ym-phone-examples .ym-demo-nav b {
    background:#f0e4eb;
    color:#63374d;
}
.ym-phone-examples .ym-demo-nav::after {
    content:"";
    position:absolute;
    bottom:9px;
    left:50%;
    transform:translateX(-50%);
    width:78px;
    height:4px;
    border-radius:8px;
    background:#473c40;
}
.ym-phone-examples .ym-phone-example > h3 {
    font-size:19px;
    letter-spacing:-.4px;
    margin-top:28px;
}
.ym-phone-examples .ym-phone-example > p {
    max-width:280px;
    margin:auto;
    font-size:14px;
    color:#7c6c75;
}
@media(min-width:1000px) {
    .ym-phone-examples .ym-phone-example:nth-child(2) {
        padding-top:28px;
    }
}
@media(max-width:760px) {
    .ym-phone-examples .ym-phone-gallery {gap:40px;padding-top:16px}
    .ym-phone-examples .ym-demo-phone {width:100%;max-width:282px}
}


/* YARNMATES_PHONE_ALIGNMENT_V3 */
.ym-phone-examples .ym-phone-example:nth-child(2) {
    padding-top:0 !important;
}
.ym-phone-examples .ym-phone-gallery {
    align-items:start;
    gap:36px;
}
.ym-phone-examples .ym-demo-screen {
    font-family:"DM Sans",sans-serif;
}
.ym-phone-examples .ym-demo-nav > * {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    font-size:9px;
    line-height:1.2;
}
.ym-phone-examples .ym-demo-nav > *::before {
    content:"";
    width:16px;
    height:16px;
    background:currentColor;
    opacity:.8;
}
.ym-phone-examples .ym-demo-nav > :nth-child(1)::before {
    clip-path:polygon(50% 0,100% 40%,85% 40%,85% 100%,60% 100%,60% 65%,40% 65%,40% 100%,15% 100%,15% 40%,0 40%);
}
.ym-phone-examples .ym-demo-nav > :nth-child(2)::before {
    border-radius:3px;
    background:linear-gradient(currentColor,currentColor) 3px 4px/10px 2px no-repeat,
               linear-gradient(currentColor,currentColor) 3px 9px/7px 2px no-repeat;
    border:1.5px solid currentColor;
}
.ym-phone-examples .ym-demo-nav > :nth-child(3)::before {
    border-radius:50%;
    background:repeating-linear-gradient(135deg,currentColor 0 2px,transparent 2px 4px);
    border:1px solid currentColor;
}
.ym-phone-examples .ym-demo-nav > :nth-child(4)::before {
    background:transparent;
    border:1.5px solid currentColor;
    border-radius:2px;
    box-shadow:inset 6px 0 0 rgba(105,63,84,.18);
}
.ym-phone-examples .ym-demo-nav {
    flex-shrink:0;
}


/* YARNMATES_PHONE_PROPORTIONS_V4 */
.ym-phone-examples .ym-demo-phone {
    width:300px !important;
    max-width:100% !important;
    height:auto !important;
    aspect-ratio:6 / 13;
    box-sizing:border-box;
    padding:8px;
    border-radius:42px;
}
.ym-phone-examples .ym-demo-screen {
    height:100% !important;
    min-height:0 !important;
    box-sizing:border-box;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    padding:15px 16px 28px;
    border-radius:32px;
    gap:8px;
}
.ym-phone-examples .ym-demo-status {
    flex-shrink:0;
    margin-bottom:10px;
}
.ym-phone-examples .ym-demo-content {
    flex:1;
    min-height:0;
    overflow-y:auto;
    overflow-x:hidden;
    scrollbar-width:none;
    display:flex;
    flex-direction:column;
    gap:12px;
    padding-bottom:12px;
}
.ym-phone-examples .ym-demo-content::-webkit-scrollbar {
    display:none;
}
.ym-phone-examples .ym-demo-content > * {
    flex-shrink:0;
}
.ym-phone-examples .ym-demo-content > .ym-demo-muted {
    margin-top:-6px;
    margin-bottom:4px;
    font-size:11px;
}
.ym-phone-examples .ym-demo-nav {
    margin-top:0 !important;
    flex-shrink:0;
}
.ym-phone-examples .ym-phone-example:nth-child(2) {
    padding-top:0 !important;
}
@media(max-width:760px) {
    .ym-phone-examples .ym-demo-phone {
        width:280px !important;
    }
}