/* ==========================================================================
   Old 2 New — blocks (compare slider, studio theming, portfolio, project, forms)
   Developed by Stark Create
   ========================================================================== */

/* ---------- Compare slider ---------- */
.o2n-cmp{position:relative;aspect-ratio:var(--ar,4/3);border-radius:var(--o2n-radius);overflow:hidden;background:#ddd;box-shadow:var(--o2n-shadow);user-select:none;-webkit-user-select:none;--pos:50%}
.o2n-cmp__after,.o2n-cmp__before{position:absolute;inset:0}
.o2n-cmp__after > *,.o2n-cmp__before > *{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.o2n-cmp__after picture img,.o2n-cmp__before picture img{width:100%;height:100%;object-fit:cover}
.o2n-cmp__before{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.o2n-cmp__handle{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:#fff;pointer-events:none;box-shadow:0 0 8px rgba(0,0,0,.35)}
.o2n-cmp__knob{position:absolute;top:50%;left:50%;width:42px;height:42px;margin:-21px 0 0 -21px;border-radius:50%;background:#fff;box-shadow:0 4px 14px rgba(0,0,0,.3)}
.o2n-cmp__knob::before,.o2n-cmp__knob::after{content:"";position:absolute;top:50%;margin-top:-6px;border:6px solid transparent}
.o2n-cmp__knob::before{left:7px;border-right:7px solid #222}
.o2n-cmp__knob::after{right:7px;border-left:7px solid #222}
.o2n-cmp__tag{position:absolute;top:12px;padding:.25em .7em;border-radius:999px;font-size:.68rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;background:rgba(17,17,17,.72);color:#fff;pointer-events:none}
.o2n-cmp__tag--l{left:12px}
.o2n-cmp__tag--r{right:12px;background:rgba(184,135,62,.95);color:var(--o2n-ink)}
.o2n-cmp__range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none;touch-action:pan-y}
.o2n-cmp__range:focus-visible ~ .o2n-cmp__handle .o2n-cmp__knob{outline:3px solid var(--o2n-brass);outline-offset:2px}
.o2n-cmp-hint{font-size:.8rem;color:#9d9384;margin-top:10px;text-align:center}
.o2n-cmp--sm .o2n-cmp__knob{width:34px;height:34px;margin:-17px 0 0 -17px}
.o2n-cmp--sm .o2n-cmp__tag{top:10px;font-size:.6rem}

/* ---------- Project cards + filter ---------- */
.o2n-filter{margin-bottom:28px}
.o2n-pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px 22px;list-style:none;margin:0;padding:0}
@media (max-width:960px){.o2n-pgrid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.o2n-pgrid{grid-template-columns:1fr}}
.o2n-pcard{margin:0}
.o2n-pcard[hidden]{display:none}
.o2n-pcard__body{margin-top:12px;font-size:.92rem}
.o2n-pcard__title{display:block;font:600 1.08rem var(--o2n-font-display);margin-bottom:2px;text-decoration:none}
.o2n-pcard__title:hover{text-decoration:underline}
.o2n-pcard__meta{color:var(--o2n-muted)}
.o2n-pcard__cat{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--o2n-brass-text);font-weight:600}
.o2n-empty{padding:40px;text-align:center;color:var(--o2n-muted);border:1.5px dashed var(--o2n-line);border-radius:var(--o2n-radius)}

/* ---------- Single project ---------- */
.o2n-proj{display:grid;grid-template-columns:1.5fr 1fr;gap:40px;align-items:start}
@media (max-width:960px){.o2n-proj{grid-template-columns:1fr}}
.o2n-proj__aside{position:sticky;top:calc(var(--o2n-header-h) + 20px)}
.o2n-swatch-list{list-style:none;padding:0;margin:0 0 1.2em;display:grid;gap:10px}
.o2n-swatch-list li{display:flex;align-items:center;gap:12px;font-size:.93rem}
.o2n-swatch-list i{width:28px;height:28px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.o2n-swatch-list small{display:block;color:var(--o2n-muted);font-size:.78rem}
.o2n-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px}
.o2n-gallery figure{margin:0}
.o2n-gallery figcaption{font-size:.8rem;color:var(--o2n-muted);margin-top:6px}
@media (max-width:600px){.o2n-gallery{grid-template-columns:1fr 1fr}}
.o2n-prose{max-width:42em}
.o2n-prose p{color:#3d3832}

/* ---------- Design studio (Refinish Studio plugin): map its tokens onto ours ---------- */
.o2n-panel{background:#fff;border:1px solid var(--o2n-line);border-radius:var(--o2n-radius);padding:22px}
.o2n-section--dark .o2n-panel{background:var(--o2n-char-2);border-color:var(--o2n-char-line)}
.o2n-panel h2,.o2n-panel h3{font-size:1.2rem;margin-bottom:.7em}
.o2n-link-row{display:flex;align-items:center;gap:8px;font-size:.85rem;color:var(--o2n-muted);margin-top:12px}
.rfs{--rfs-ink:var(--o2n-ink);--rfs-muted:var(--o2n-muted);--rfs-line:var(--o2n-line);--rfs-soft:var(--o2n-cream);--rfs-card:#fff;
  --rfs-accent:var(--o2n-brass);--rfs-accent-hi:var(--o2n-brass-hi);--rfs-accent-text:var(--o2n-brass-text);--rfs-on-accent:var(--o2n-ink);
  --rfs-ok:var(--o2n-ok);--rfs-danger:var(--o2n-danger);--rfs-radius:var(--o2n-radius);--rfs-shadow:var(--o2n-shadow);
  --rfs-font:var(--o2n-font-body);--rfs-font-display:var(--o2n-font-display);--rfs-sticky-top:calc(var(--o2n-header-h) + 16px)}
.rfs.rfs--dark{--rfs-ink:var(--o2n-on-dark);--rfs-muted:#a99f90;--rfs-line:var(--o2n-char-line);--rfs-soft:var(--o2n-char);--rfs-card:var(--o2n-char-2);--rfs-accent-text:var(--o2n-brass-on-dark)}
.o2n-studio-fallback{display:grid;grid-template-columns:1.35fr 1fr;gap:28px;align-items:center}
@media (max-width:960px){.o2n-studio-fallback{grid-template-columns:1fr}}

/* ---------- Forms (quote) ---------- */
.o2n-form{display:grid;gap:16px}
.o2n-field label,.o2n-legend{display:block;font-size:.82rem;font-weight:600;margin-bottom:6px}
.o2n-field input,.o2n-field select,.o2n-field textarea{width:100%;font:inherit;padding:.65em .8em;border:1.5px solid var(--o2n-line);border-radius:var(--o2n-radius-sm);background:#fff;color:var(--o2n-ink)}
.o2n-field input:focus,.o2n-field select:focus,.o2n-field textarea:focus{outline:none;border-color:var(--o2n-brass);box-shadow:0 0 0 3px rgba(184,135,62,.2)}
.o2n-field textarea{min-height:110px;resize:vertical}
.o2n-field small{display:block;color:var(--o2n-muted);font-size:.78rem;margin-top:4px}
.o2n-field [aria-invalid="true"]{border-color:var(--o2n-danger)}
.o2n-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:560px){.o2n-row{grid-template-columns:1fr}}
.o2n-req{color:var(--o2n-danger)}
.o2n-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
fieldset.o2n-fs{border:0;margin:0;padding:0;min-width:0}
.o2n-choice-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.o2n-choice{position:relative}
.o2n-choice input{position:absolute;opacity:0;inset:0;cursor:pointer}
.o2n-choice span{display:flex;flex-direction:column;gap:4px;height:100%;border:1.5px solid var(--o2n-line);border-radius:12px;padding:14px;background:#fff;font-weight:600;font-size:.92rem;cursor:pointer}
.o2n-choice small{font-weight:400;color:var(--o2n-muted);font-size:.78rem}
.o2n-choice input:checked + span{border-color:var(--o2n-ink);box-shadow:inset 0 0 0 1px var(--o2n-ink);background:#fffaf1}
.o2n-choice input:focus-visible + span{outline:3px solid var(--o2n-brass);outline-offset:2px}
.o2n-choice--inline{display:inline-block}
.o2n-choice--inline span{padding:.5em 1em;border-radius:999px;flex-direction:row}
.o2n-progress{display:flex;gap:6px;margin-bottom:22px;list-style:none;padding:0}
.o2n-progress li{flex:1;font-size:.74rem;color:var(--o2n-muted);border-top:3px solid var(--o2n-line);padding-top:8px}
.o2n-progress li.is-on{border-top-color:var(--o2n-brass);color:var(--o2n-ink);font-weight:600}
.o2n-qstep[hidden]{display:none}
.o2n-qnav{display:flex;justify-content:space-between;gap:10px;margin-top:6px}
.o2n-thumbs{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.o2n-thumbs img{width:72px;height:72px;object-fit:cover;border-radius:8px}
.o2n-form__status{font-size:.9rem;margin:0;min-height:1.2em}
.o2n-form__status.is-err{color:var(--o2n-danger)}
.o2n-success{text-align:center;padding:30px 10px}
.o2n-success__ref{font:600 1.1rem ui-monospace,Menlo,Consolas,monospace;background:var(--o2n-cream);display:inline-block;padding:.3em .8em;border-radius:8px;margin:6px 0 14px}
.o2n-sheet-chip{display:flex;gap:10px;align-items:center;background:#fffaf1;border:1.5px solid var(--o2n-brass);border-radius:12px;padding:12px 14px;font-size:.9rem}

/* ---------- Shop ---------- */
.o2n-shop-card{position:relative}
.o2n-shop-card__media{position:relative;display:block;border-radius:var(--o2n-radius);overflow:hidden;aspect-ratio:4/3;background:#e9e1d3;box-shadow:var(--o2n-shadow)}
.o2n-shop-card__media canvas,.o2n-shop-card__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s}
.o2n-shop-card__media:hover canvas,.o2n-shop-card__media:hover img{transform:scale(1.03)}
.o2n-status{position:absolute;top:12px;left:12px;padding:.25em .7em;border-radius:999px;font-size:.66rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;background:var(--o2n-ok);color:#fff}
.o2n-status--reserved{background:var(--o2n-brass);color:var(--o2n-ink)}
.o2n-status--sold{background:#111;color:#fff}
.o2n-shop-card[data-status="sold"] .o2n-shop-card__media canvas,.o2n-shop-card[data-status="sold"] .o2n-shop-card__media img{filter:grayscale(.55) brightness(.92)}
.o2n-price{font:600 1.15rem var(--o2n-font-display)}
.o2n-price s{color:var(--o2n-muted);font-weight:400;font-size:.9em;margin-left:6px}
.o2n-shop-card__row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-top:12px}
.o2n-filter-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:28px}
.o2n-filter-bar .o2n-filter{margin:0}

/* single piece */
.o2n-piece{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:start}
@media (max-width:960px){.o2n-piece{grid-template-columns:1fr}}
.o2n-piece__buy{position:sticky;top:calc(var(--o2n-header-h) + 20px)}
.o2n-piece__buy .o2n-price{font-size:2rem;display:block;margin:4px 0 14px}
.o2n-dims{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 18px;padding:0;list-style:none;text-align:center}
.o2n-dims li{background:var(--o2n-cream);border-radius:10px;padding:10px 6px;font-size:.78rem;color:var(--o2n-muted)}
.o2n-dims b{display:block;font:600 1.05rem var(--o2n-font-display);color:var(--o2n-ink)}
.o2n-reserve{border-top:1px solid var(--o2n-line);margin-top:18px;padding-top:18px}

/* ---------- FAQ ---------- */
.o2n-faq{display:grid;grid-template-columns:240px 1fr;gap:48px;align-items:start}
@media (max-width:860px){.o2n-faq{grid-template-columns:1fr;gap:20px}}
.o2n-faq__nav{position:sticky;top:calc(var(--o2n-header-h) + 20px)}
.o2n-faq__nav ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.o2n-faq__nav a{display:block;padding:.45em .8em;border-radius:8px;text-decoration:none;color:var(--o2n-muted);font-size:.92rem}
.o2n-faq__nav a:hover{background:var(--o2n-cream);color:var(--o2n-ink)}
@media (max-width:860px){.o2n-faq__nav{position:static}.o2n-faq__nav ul{display:flex;flex-wrap:wrap;gap:8px}.o2n-faq__nav a{border:1.5px solid var(--o2n-line);border-radius:999px}}
.o2n-faq__group{margin-bottom:44px;scroll-margin-top:calc(var(--o2n-header-h) + 16px)}
.o2n-faq__group h2{font-size:1.5rem;margin-bottom:14px}
.o2n-qa{border-bottom:1px solid var(--o2n-line)}
.o2n-qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;align-items:center;padding:16px 0;font-weight:600}
.o2n-qa summary::-webkit-details-marker{display:none}
.o2n-qa summary::after{content:"";width:12px;height:12px;flex:none;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-3px,-3px);transition:transform .2s}
.o2n-qa[open] summary::after{transform:rotate(-135deg) translate(-3px,-3px)}
.o2n-qa__a{padding:0 0 18px;color:#3d3832;max-width:46em}
.o2n-qa__a p:last-child{margin-bottom:0}

/* ---------- Compare table (cabinets) ---------- */
.o2n-table-wrap{overflow-x:auto;border:1px solid var(--o2n-line);border-radius:var(--o2n-radius);background:#fff}
.o2n-table{width:100%;border-collapse:collapse;font-size:.93rem;min-width:560px}
.o2n-table th,.o2n-table td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--o2n-line);vertical-align:top}
.o2n-table thead th{font:600 .72rem var(--o2n-font-body);letter-spacing:.18em;text-transform:uppercase;color:var(--o2n-muted);background:var(--o2n-cream)}
.o2n-table tbody th{font-weight:600;width:24%}
.o2n-table td.is-win{background:#fffaf1;font-weight:500}
.o2n-table tr:last-child th,.o2n-table tr:last-child td{border-bottom:0}
.o2n-palette{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:14px;list-style:none;margin:0;padding:0}
.o2n-palette li{background:#fff;border:1px solid var(--o2n-line);border-radius:12px;overflow:hidden;font-size:.85rem}
.o2n-palette i{display:block;height:70px}
.o2n-palette span{display:block;padding:8px 10px}

/* ---------- Legal prose ---------- */
.o2n-legal{display:grid;grid-template-columns:220px 1fr;gap:48px;align-items:start}
@media (max-width:860px){.o2n-legal{grid-template-columns:1fr;gap:16px}}
.o2n-legal__toc{position:sticky;top:calc(var(--o2n-header-h) + 20px);font-size:.88rem}
.o2n-legal__toc ol{margin:0;padding-left:1.2em;display:grid;gap:6px;color:var(--o2n-muted)}
.o2n-legal__toc a{text-decoration:none}
.o2n-legal__toc a:hover{text-decoration:underline}
@media (max-width:860px){.o2n-legal__toc{position:static}}
.o2n-legal__body{max-width:46em}
.o2n-legal__body h2{font-size:1.35rem;margin:1.8em 0 .5em;scroll-margin-top:calc(var(--o2n-header-h) + 16px)}
.o2n-legal__body h2:first-child{margin-top:0}
.o2n-legal__body p,.o2n-legal__body li{color:#3d3832}
.o2n-legal__body ul{padding-left:1.2em;margin:0 0 1em}
.o2n-draft{background:#fff4e0;border:1.5px solid #e5c17a;border-radius:12px;padding:14px 16px;font-size:.9rem;margin-bottom:28px}
.o2n-hide-sold .o2n-pcard[data-status="sold"]{display:none}

/* ---------- Areas ---------- */
.o2n-areas{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.o2n-area{display:block;border:1.5px solid var(--o2n-line);border-radius:12px;padding:12px 14px;background:#fff;text-decoration:none;transition:border-color .15s}
.o2n-area:hover{border-color:var(--o2n-brass)}
.o2n-area b{display:block;font-family:var(--o2n-font-display);font-size:1.05rem}
.o2n-area span{font-size:.8rem;color:var(--o2n-muted)}

/* ---------- Reviews ---------- */
.o2n-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media (max-width:860px){.o2n-grid-2{grid-template-columns:1fr}}
.o2n-rev-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.o2n-rev-head h2{margin:0}
.o2n-rev-score{font-size:.9rem;color:var(--o2n-muted)}
.o2n-rev{border-top:1px solid var(--o2n-line);padding:16px 0}
.o2n-rev--empty{color:var(--o2n-muted);font-size:.92rem;border:1.5px dashed var(--o2n-line);border-radius:12px;padding:20px;margin-bottom:16px}
.o2n-rev--empty p{margin:0}
.o2n-rev__who{display:flex;gap:10px;align-items:center;font-weight:600;font-size:.92rem}
.o2n-rev__who img{width:32px;height:32px;border-radius:50%}
.o2n-rev__meta{font-size:.78rem;color:var(--o2n-muted)}
.o2n-rev__stars{color:var(--o2n-brass);letter-spacing:2px}
.o2n-rev__src{font-size:.78rem}