/* Salt & Cypress — shop styles
   Two layers:
   1. `body.sc-page …`  page chrome for the new cart/checkout/account pages
      (nav, footer, buttons, forms). Only applies when <body class="sc-page">.
   2. `.sc-*`           namespaced components that are safe to inject into the
      existing site pages (cart drawer, nav links, product add-to-cart block).
   Fonts are linked by each page's <head>; nothing is imported here. */

:root{
  --ink:#101010; --paper:#FFFFFF; --warm:#F7F5F1; --line:rgba(16,16,16,.14);
  --gray:#6E6E6E; --light:#BDBDBD; --green:#0F6E56; --rust:#993C1D;
}

/* ------------------------------------------------------------------ */
/* 1. PAGE CHROME (new pages only)                                    */
/* ------------------------------------------------------------------ */
.sc-page,.sc-page *{margin:0;padding:0;box-sizing:border-box}
.sc-page{font-family:'Instrument Sans',sans-serif;color:var(--ink);background:var(--paper);line-height:1.7;font-size:17px;min-height:100vh;display:flex;flex-direction:column}
.sc-page main{flex:1 0 auto}
.sc-page h1,.sc-page h2,.sc-page h3{font-family:'Italiana',serif;font-weight:400;line-height:1.15}
.sc-page a{color:inherit;text-decoration:none}
.sc-page img{max-width:100%}
.sc-page input,.sc-page select,.sc-page textarea{font-family:inherit;font-size:inherit;color:inherit}
.sc-page button{font-family:inherit}
.sc-page .skip{position:absolute;left:-9999px;top:0;background:#101010;color:#fff;padding:12px 20px;z-index:99}
.sc-page .skip:focus{left:0}
.sc-page a:focus-visible,.sc-page button:focus-visible,.sc-page input:focus-visible,.sc-page select:focus-visible,.sc-page textarea:focus-visible,.sc-page [tabindex]:focus-visible{outline:2px solid #101010;outline-offset:3px}
.sc-page footer a:focus-visible{outline-color:#fff}
.sc-page .wrap{max-width:1180px;margin:0 auto;padding:0 24px;width:100%}
/* vertical rhythm for the page blocks that sit on a .wrap (same specificity as .sc-page .wrap) */
.sc-page .sc-head{padding:64px 24px 28px}
.sc-page .sc-section{padding:24px 24px 110px}
.sc-page .sc-co{padding:20px 24px 110px}
.sc-page .sc-acct{padding:20px 24px 110px}
.sc-page .sc-conf-head{padding:72px 24px 40px}
.sc-page .sc-404{padding:120px 24px 140px}
@media(max-width:900px){.sc-page .sc-co{padding-bottom:72px}}
@media(max-width:860px){.sc-page .sc-acct{padding-bottom:72px}}
@media(max-width:760px){.sc-page .sc-head{padding:44px 24px 20px}.sc-page .sc-section{padding-bottom:72px}.sc-page .sc-conf-head{padding:52px 24px 32px}.sc-page .sc-404{padding:80px 24px 100px}}
.sc-page .eyebrow{font-size:12px;letter-spacing:.35em;text-transform:uppercase;color:var(--gray)}
.sc-page .rule{width:64px;height:1px;background:var(--ink);opacity:.4;margin:26px 0}

/* nav (same markup as index.html) */
.sc-page nav{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);z-index:10}
.sc-page .nav-in{display:flex;align-items:center;justify-content:space-between;height:72px}
.sc-page .brand{display:flex;align-items:center;gap:14px}
.sc-page .brand img{height:40px;width:auto}
.sc-page .brand span{font-family:'Italiana',serif;font-size:19px;letter-spacing:.14em}
/* Contextual wordmark: SALT & CYPRESS over the service line you are in. */
.brand .wm{display:block;line-height:1.05}
.brand .wm-sub{display:block;font-family:'Instrument Sans',sans-serif;font-size:9px;letter-spacing:.42em;text-transform:uppercase;color:var(--gray);margin-top:5px}
.sc-page .nav-links{display:flex;gap:28px;font-size:13px;letter-spacing:.12em;text-transform:uppercase}
.sc-page .nav-links a{color:var(--gray)}
.sc-page .nav-links a:hover,.sc-page .nav-links a[aria-current]{color:var(--ink)}
.menu-btn{display:none;background:none;border:1px solid var(--line);padding:10px 14px;cursor:pointer;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.mobile-menu{display:none}
@media(max-width:960px){
  .sc-page .nav-links{display:none}
  .menu-btn{display:inline-block}
  .mobile-menu.open{display:block;position:absolute;top:72px;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 12px 24px rgba(0,0,0,.06)}
  .mobile-menu a{display:block;padding:18px 24px;font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);border-top:1px solid var(--line)}
}
@media(max-width:760px){
  .sc-page .brand span{font-size:13.5px;letter-spacing:.09em;white-space:nowrap}
  .brand .wm-sub{font-size:7.5px;letter-spacing:.3em;margin-top:3px}
  .sc-page .brand img{height:32px}
}

/* buttons */
.sc-page .btn,.sc-btn{display:inline-block;padding:15px 34px;font-size:13px;letter-spacing:.22em;text-transform:uppercase;border:1px solid var(--ink);background:none;color:var(--ink);cursor:pointer;transition:.25s;font-family:'Instrument Sans',sans-serif;line-height:1.4;text-align:center;border-radius:0}
.sc-page .btn.solid,.sc-btn.solid{background:var(--ink);color:#fff}
.sc-page .btn.solid:hover,.sc-btn.solid:hover{background:#2e2e2e}
.sc-page .btn.ghost:hover,.sc-btn.ghost:hover{background:var(--ink);color:#fff}
.sc-page .btn.quiet,.sc-btn.quiet{border-color:var(--line);color:var(--gray)}
.sc-page .btn.quiet:hover,.sc-btn.quiet:hover{border-color:var(--ink);color:var(--ink)}
.sc-page .btn.full,.sc-btn.full{display:block;width:100%}
.sc-page .btn.small,.sc-btn.small{padding:11px 20px;font-size:11.5px}
.sc-page .btn[disabled],.sc-btn[disabled],.sc-page .btn[aria-disabled="true"],.sc-btn[aria-disabled="true"]{opacity:.45;cursor:default;pointer-events:none}
.sc-page .btn.busy,.sc-btn.busy{position:relative;color:transparent!important;pointer-events:none}
.sc-page .btn.busy::after,.sc-btn.busy::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border:1px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:sc-spin .8s linear infinite}
.sc-page .btn.busy:not(.solid)::after,.sc-btn.busy:not(.solid)::after{border-color:var(--line);border-top-color:var(--ink)}
@keyframes sc-spin{to{transform:rotate(360deg)}}
.sc-link{border-bottom:1px solid var(--line);padding-bottom:1px;transition:border-color .2s;cursor:pointer;background:none;border-top:0;border-left:0;border-right:0;font:inherit;color:inherit}
.sc-link:hover{border-color:var(--ink)}
.sc-linkbtn{background:none;border:0;padding:0;font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gray);cursor:pointer;border-bottom:1px solid transparent;font-family:'Instrument Sans',sans-serif}
.sc-linkbtn:hover{color:var(--ink);border-bottom-color:var(--ink)}
.sc-linkbtn.danger:hover{color:var(--rust);border-bottom-color:var(--rust)}

/* page heads & sections */
.sc-head{padding:64px 0 28px}
.sc-head h1{font-size:clamp(36px,5vw,58px);margin-top:12px}
.sc-head .sub{font-family:'Instrument Serif',serif;font-style:italic;color:var(--gray);margin-top:14px;font-size:19px;max-width:560px}
.sc-head.center{text-align:center}
.sc-head.center .sub{margin-left:auto;margin-right:auto}
.sc-section{padding:24px 0 110px}
.sc-narrow{max-width:520px;margin:0 auto}
.sc-mid{max-width:760px;margin:0 auto}
@media(max-width:760px){.sc-head{padding:44px 0 20px}.sc-section{padding-bottom:72px}}

/* footer (same as index.html) */
.sc-page footer{background:var(--ink);color:#fff;padding:100px 0 56px;text-align:center;margin-top:auto}
.sc-page footer img{height:110px;filter:invert(1);opacity:.95}
.sc-page footer h2{font-size:clamp(34px,5vw,54px);margin:34px 0 10px}
.sc-page footer p.sub{font-family:'Instrument Serif',serif;font-style:italic;color:var(--light);margin-bottom:40px}
.sc-page .contact-row{display:flex;justify-content:center;gap:44px;flex-wrap:wrap;font-size:15px;letter-spacing:.04em}
.sc-page .contact-row a{border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:3px}
.sc-page .contact-row a:hover{border-color:#fff}
.sc-page footer .fine{margin-top:70px;font-size:11.5px;letter-spacing:.3em;text-transform:uppercase;color:#9a9a9a}
.sc-page .legal-row{margin-top:18px;font-size:12.5px;color:#9a9a9a;display:flex;justify-content:center;gap:18px;flex-wrap:wrap}
.sc-page .legal-row a{color:#9a9a9a;border-bottom:1px solid rgba(255,255,255,.25);padding-bottom:2px}
.sc-page .legal-row a:hover{color:#fff}
@media(max-width:760px){.sc-page .contact-row{flex-direction:column;gap:16px}.sc-page footer{padding:72px 0 44px}}

/* forms */
.sc-field{margin-bottom:22px}
.sc-label,.sc-field label,.sc-fieldset legend{display:block;font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gray);margin:0 0 8px}
.sc-label .opt{letter-spacing:.08em;text-transform:none;color:var(--light)}
.sc-input,.sc-page input[type="text"],.sc-page input[type="email"],.sc-page input[type="tel"],.sc-page input[type="password"],.sc-page input[type="number"],.sc-page select,.sc-page textarea{width:100%;border:1px solid var(--line);background:#fff;padding:13px 14px;font-family:'Instrument Sans',sans-serif;font-size:15.5px;color:var(--ink);border-radius:0;-webkit-appearance:none;appearance:none;transition:border-color .2s;line-height:1.4}
.sc-input:focus,.sc-page input:focus,.sc-page select:focus,.sc-page textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.sc-input[aria-invalid="true"],.sc-page input[aria-invalid="true"]{border-color:var(--rust)}
.sc-input::placeholder,.sc-page input::placeholder{color:var(--light)}
.sc-page input[readonly]{background:var(--warm);color:var(--gray)}
.sc-page textarea{min-height:110px;resize:vertical}
.sc-page select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23101010' stroke-width='1.2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
.sc-two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.sc-three{display:grid;grid-template-columns:2fr 1fr 1fr;gap:18px}
@media(max-width:600px){.sc-two,.sc-three{grid-template-columns:1fr}}
.sc-hint{font-size:12.5px;color:var(--gray);margin-top:8px;line-height:1.6}
.sc-fine{font-size:12.5px;color:#9a9a9a;line-height:1.6}
.sc-err{color:var(--rust);font-size:13.5px;line-height:1.55;margin-top:8px}
.sc-err:empty{display:none}
.sc-ok{color:var(--green);font-size:13.5px;margin-top:8px}
.sc-ok:empty{display:none}
.sc-check{display:flex;align-items:flex-start;gap:12px;font-size:14.5px;color:var(--ink);cursor:pointer;line-height:1.5}
.sc-check input{width:18px;height:18px;flex:none;margin-top:3px;-webkit-appearance:none;appearance:none;border:1px solid rgba(16,16,16,.4);background:#fff;border-radius:0;display:inline-grid;place-content:center;cursor:pointer;padding:0}
.sc-check input:checked{background:var(--ink);border-color:var(--ink)}
.sc-check input:checked::after{content:"";width:5px;height:9px;border:solid #fff;border-width:0 1.5px 1.5px 0;transform:translateY(-1px) rotate(45deg)}
.sc-check input:focus-visible{outline:2px solid var(--ink);outline-offset:2px;box-shadow:none}
.sc-radios{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.sc-radio{display:flex;gap:14px;align-items:flex-start;padding:18px 20px;background:#fff;cursor:pointer;font-size:14.5px;line-height:1.55}
.sc-radio input{width:16px;height:16px;flex:none;margin-top:4px;-webkit-appearance:none;appearance:none;border:1px solid rgba(16,16,16,.4);border-radius:50%;background:#fff;display:inline-grid;place-content:center;cursor:pointer;padding:0}
.sc-radio input:checked{border-color:var(--ink)}
.sc-radio input:checked::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--ink)}
.sc-radio input:focus-visible{outline:2px solid var(--ink);outline-offset:2px;box-shadow:none}
.sc-radio .tag{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gray);margin-left:8px}
.sc-radio .addr{color:var(--gray);font-size:14px}
.sc-radio .addr b{font-weight:500;color:var(--ink);display:block}
.sc-fieldset{border:0;padding:0;margin:0 0 22px;min-width:0}

/* segmented control */
.sc-seg{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--ink)}
.sc-seg button{background:#fff;border:0;padding:16px 14px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--gray);cursor:pointer;transition:.2s;line-height:1.4;font-family:'Instrument Sans',sans-serif}
.sc-seg button+button{border-left:1px solid var(--ink)}
.sc-seg button[aria-checked="true"]{background:var(--ink);color:#fff}
.sc-seg button:focus-visible{outline-offset:-4px;outline-color:#fff}
.sc-seg button[aria-checked="false"]:focus-visible{outline-color:var(--ink)}
.sc-seg small{display:block;font-size:10.5px;letter-spacing:.1em;text-transform:none;opacity:.75;margin-top:2px}
@media(max-width:480px){.sc-seg{grid-template-columns:1fr}.sc-seg button+button{border-left:0;border-top:1px solid var(--ink)}}

/* tabs */
.sc-tabs{display:flex;gap:26px;border-bottom:1px solid var(--line);margin-bottom:30px;overflow-x:auto}
.sc-tabs button{background:none;border:0;border-bottom:1px solid transparent;margin-bottom:-1px;padding:12px 0;font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gray);cursor:pointer;white-space:nowrap;font-family:'Instrument Sans',sans-serif}
.sc-tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--ink)}
.sc-tabs button:focus-visible{outline-offset:-2px}

/* panels, status */
.sc-panel{border:1px solid var(--line);padding:32px 30px;background:var(--warm)}
.sc-panel.white{background:#fff}
.sc-panel h2,.sc-panel h3{font-size:24px;margin-bottom:8px}
.sc-panel p{color:var(--gray);font-size:15px}
@media(max-width:600px){.sc-panel{padding:24px 20px}}
.sc-status{display:inline-block;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;padding:6px 12px;border:1px solid var(--line);color:var(--gray);line-height:1.5;max-width:100%}
.sc-status.good{color:var(--green);border-color:rgba(15,110,86,.35)}
.sc-status.bad{color:var(--rust);border-color:rgba(153,60,29,.35)}
.sc-status.dark{color:#fff;background:var(--ink);border-color:var(--ink)}
.sc-notice{border:1px solid var(--line);padding:18px 22px;font-size:14.5px;color:var(--gray);background:var(--warm);line-height:1.6}
.sc-notice.warn{border-color:rgba(153,60,29,.35);color:var(--rust);background:#fff}
.sc-notice a{border-bottom:1px solid var(--line)}
.sc-empty{text-align:center;padding:70px 20px}
.sc-empty h2{font-size:clamp(28px,3.4vw,40px);margin-bottom:12px}
.sc-empty p{color:var(--gray);margin-bottom:30px}
.sc-loading{color:var(--light);font-size:12px;letter-spacing:.24em;text-transform:uppercase;padding:40px 0;text-align:center}
.sc-loading.left{text-align:left;padding:20px 0}
.sc-toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,16px);background:var(--ink);color:#fff;font-size:12px;letter-spacing:.2em;text-transform:uppercase;padding:14px 22px;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;z-index:60;white-space:nowrap;max-width:calc(100vw - 32px);overflow:hidden;text-overflow:ellipsis}
.sc-toast.show{opacity:1;transform:translate(-50%,0)}

/* line items (cart page, order pages, summary) */
.sc-lines{border-top:1px solid var(--line)}
.sc-line{display:grid;grid-template-columns:96px 1fr auto;gap:22px;padding:24px 0;border-bottom:1px solid var(--line);align-items:start}
.sc-line .ph{width:96px;height:96px;background:var(--warm);display:block;overflow:hidden}
.sc-line .ph img{width:100%;height:100%;object-fit:contain;display:block}
.sc-line .brand{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--light)}
.sc-line .name{font-size:16px;line-height:1.45;margin:4px 0 2px}
.sc-line .name a:hover{border-bottom:1px solid var(--ink)}
.sc-line .variant{font-size:13px;color:var(--gray)}
.sc-line .unit{font-size:13px;color:var(--gray);margin-top:6px}
.sc-line .unavail{color:var(--rust);font-size:12.5px;margin-top:6px}
.sc-line .ctl{display:flex;align-items:center;gap:18px;margin-top:14px;flex-wrap:wrap}
.sc-line .total{font-size:16px;text-align:right;white-space:nowrap}
.sc-line.compact{grid-template-columns:64px 1fr auto;gap:16px;padding:16px 0}
.sc-line.compact .ph{width:64px;height:64px}
.sc-line.compact .name{font-size:14.5px}
.sc-line.compact .total{font-size:14.5px}
@media(max-width:600px){
  .sc-line{grid-template-columns:72px 1fr;gap:16px}
  .sc-line .ph{width:72px;height:72px}
  .sc-line .total{grid-column:2;text-align:left}
}

/* quantity stepper */
.sc-qty{display:inline-flex;border:1px solid var(--line);height:44px;background:#fff;vertical-align:middle}
.sc-qty button{width:42px;border:0;background:none;font-size:18px;color:var(--ink);cursor:pointer;line-height:1;font-family:'Instrument Sans',sans-serif}
.sc-qty button:hover{background:var(--warm)}
.sc-qty button:disabled{color:var(--light);cursor:default;background:none}
.sc-qty button:focus-visible{outline-offset:-3px}
.sc-qty input{width:44px;border:0;border-left:1px solid var(--line);border-right:1px solid var(--line);text-align:center;font-size:15px;padding:0;background:none;-moz-appearance:textfield;font-family:'Instrument Sans',sans-serif;color:var(--ink);box-shadow:none}
.sc-qty input:focus{outline:none;box-shadow:none;background:var(--warm)}
.sc-qty input::-webkit-outer-spin-button,.sc-qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.sc-qty.small{height:36px}.sc-qty.small button{width:34px;font-size:16px}.sc-qty.small input{width:36px;font-size:13.5px}

/* totals table */
.sc-totals{width:100%;border-collapse:collapse;font-size:15px}
.sc-totals th{text-align:left;font-weight:400;color:var(--gray);padding:9px 0;vertical-align:top}
.sc-totals td{text-align:right;padding:9px 0;white-space:nowrap}
.sc-totals .sub{display:block;font-size:12px;color:var(--light);letter-spacing:.02em}
.sc-totals tr.grand th,.sc-totals tr.grand td{border-top:1px solid var(--ink);padding-top:16px;font-size:18px;color:var(--ink)}
.sc-totals tr.grand td{font-family:'Italiana',serif;font-size:26px}
.sc-totals tr.disc td{color:var(--green)}

/* cart page layout */
.sc-cartgrid{display:grid;grid-template-columns:1.6fr 1fr;gap:64px;align-items:start}
.sc-summary{border:1px solid var(--line);padding:30px 28px;background:var(--warm);position:sticky;top:96px}
.sc-summary h2{font-size:24px;margin-bottom:18px}
.sc-summary .btn{margin-top:22px}
.sc-summary .fine{margin-top:16px}
@media(max-width:900px){.sc-cartgrid{grid-template-columns:1fr;gap:40px}.sc-summary{position:static}}

/* checkout layout */
.sc-co{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr);gap:64px;align-items:start;padding:20px 0 110px}
.sc-steps{display:grid;gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sc-step{background:#fff;padding:32px 0}
.sc-step-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px}
.sc-step-head h2{font-size:26px;display:flex;align-items:baseline;gap:16px}
.sc-step-head h2 .n{font-family:'Instrument Serif',serif;font-style:italic;font-size:15px;color:var(--light)}
.sc-step[data-state="locked"] .sc-step-head h2{color:var(--light)}
.sc-step[data-state="locked"] .sc-step-body,.sc-step[data-state="done"] .sc-step-body{display:none}
.sc-step-done{display:none;margin-top:12px;font-size:15px;color:var(--gray);line-height:1.6}
.sc-step[data-state="done"] .sc-step-done{display:block}
.sc-step-body{margin-top:24px}
.sc-step .edit{display:none}
.sc-step[data-state="done"] .edit{display:inline-block}
.sc-co-side{position:sticky;top:96px}
.sc-co-side .sc-summary{position:static}
.sc-co-side .sc-line.compact:first-child{border-top:0}
.sc-co-foot{margin-top:22px;font-size:12.5px;color:var(--gray);text-align:center}
.sc-co-foot a{border-bottom:1px solid var(--line)}
.sc-pay-note{font-size:14px;color:var(--gray);margin:10px 0 22px;line-height:1.6}
.sc-pay-note b{color:var(--ink)}
.sc-pay-offer{display:flex;align-items:baseline;gap:18px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0;margin:16px 0 0}
.sc-pay-offer .fig{font-family:'Italiana',serif;font-size:36px;line-height:.9;color:var(--ink);flex:none;letter-spacing:.01em}
.sc-pay-offer .txt{font-size:15px;line-height:1.65;color:var(--gray)}
.sc-pay-offer .txt b{display:block;color:var(--ink);font-weight:500;font-size:16px}
.sc-pay-offer .txt em{font-style:normal;color:var(--ink);font-weight:500}
@media (max-width:520px){.sc-pay-offer{gap:14px}.sc-pay-offer .fig{font-size:30px}}
.sc-elm{min-height:20px}
#addressElement.sc-elm{min-height:392px} /* Stripe Address Element renders in two passes; hold its height so the form does not jump */
#addressElement[hidden]{display:none}
.sc-elm-wrap{margin-top:10px}
.sc-msg{margin-top:18px}
.sc-hide{display:none!important}
.sc-place{margin-top:26px}
.sc-place .btn{padding-top:18px;padding-bottom:18px}
.sc-signed{font-size:14.5px;color:var(--gray);margin-bottom:20px}
.sc-signed b{color:var(--ink);font-weight:500}
@media(max-width:900px){
  .sc-co{grid-template-columns:1fr;gap:28px;padding-bottom:72px}
  .sc-co-side{position:static;order:-1}
  .sc-co-side details summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--gray)}
  .sc-co-side details summary::-webkit-details-marker{display:none}
  .sc-co-side details summary b{font-family:'Italiana',serif;font-weight:400;font-size:22px;letter-spacing:0;color:var(--ink)}
  .sc-co-side details[open] summary{border-bottom:0}
  .sc-co-side .sc-summary{border-top:0}
}
@media(min-width:901px){.sc-co-side details summary{display:none}.sc-co-side details>*{display:block}}

/* status timeline */
.sc-timeline{list-style:none;margin:0;padding:0;position:relative}
.sc-timeline li{position:relative;padding:0 0 26px 30px}
.sc-timeline li::before{content:"";position:absolute;left:5px;top:10px;width:9px;height:9px;border-radius:50%;background:#fff;border:1px solid var(--ink)}
.sc-timeline li::after{content:"";position:absolute;left:9px;top:22px;bottom:-4px;width:1px;background:var(--line)}
.sc-timeline li:last-child::after{display:none}
.sc-timeline li.current::before{background:var(--ink)}
.sc-timeline li.bad::before{border-color:var(--rust);background:var(--rust)}
.sc-timeline .t{font-size:15.5px}
.sc-timeline .when{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--light);margin-top:2px}
.sc-timeline .note{font-size:14px;color:var(--gray);margin-top:4px}

/* account layout */
.sc-acct{display:grid;grid-template-columns:220px 1fr;gap:64px;align-items:start;padding:20px 0 110px}
.sc-rail{position:sticky;top:96px}
/* The account rail is a <nav>, so the sticky/z-index header rule above caught it too and
   painted Orders/Addresses/Payment methods over the open mobile menu. Opt it out. */
.sc-rail nav{position:static;z-index:auto}
.sc-rail a{display:block;padding:12px 0;border-bottom:1px solid var(--line);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gray)}
.sc-rail a:first-child{border-top:1px solid var(--line)}
.sc-rail a:hover,.sc-rail a[aria-current="page"]{color:var(--ink)}
.sc-rail .who{font-size:13.5px;color:var(--gray);margin-bottom:22px;line-height:1.5;word-break:break-word}
.sc-rail .who b{display:block;font-family:'Italiana',serif;font-weight:400;font-size:22px;color:var(--ink)}
.sc-rail .out{margin-top:22px}
.sc-acct-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:30px;flex-wrap:wrap}
.sc-acct-head h1{font-size:clamp(30px,3.6vw,44px)}
.sc-acct>*,.sc-cartgrid>*,.sc-co>*{min-width:0}
@media(max-width:860px){
  .sc-acct{grid-template-columns:1fr;gap:30px;padding-bottom:72px}
  .sc-rail{position:static}
  .sc-rail .who{display:none}
  .sc-rail nav{display:flex;gap:22px;overflow-x:auto;border-bottom:1px solid var(--line);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .sc-rail nav::-webkit-scrollbar{display:none}
  .sc-rail a,.sc-rail a:first-child{border:0;border-bottom:1px solid transparent;margin-bottom:-1px;white-space:nowrap;padding:12px 0;flex:none}
  .sc-rail a[aria-current="page"]{border-bottom-color:var(--ink)}
  .sc-rail .out{margin-top:12px;text-align:right}
}
.sc-orders{border-top:1px solid var(--line)}
.sc-order-row{display:grid;grid-template-columns:72px 1fr auto;gap:20px;align-items:center;padding:20px 0;border-bottom:1px solid var(--line)}
.sc-order-row .ph{width:72px;height:72px;background:var(--warm);overflow:hidden}
.sc-order-row .ph img{width:100%;height:100%;object-fit:contain;display:block}
.sc-order-row .id{display:block;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gray)}
.sc-order-row .nm{display:block;font-size:16px;margin:2px 0;line-height:1.4}
.sc-order-row .nm .meta{display:inline}
.sc-order-row .meta{display:block;font-size:13px;color:var(--gray)}
.sc-order-row>span{min-width:0}
.sc-order-row .rt{text-align:right;display:grid;gap:8px;justify-items:end}
.sc-order-row .amt{font-size:17px}
.sc-order-row:hover .nm{text-decoration:underline;text-decoration-color:var(--line)}
@media(max-width:600px){.sc-order-row{grid-template-columns:56px 1fr;gap:14px}.sc-order-row .ph{width:56px;height:56px}.sc-order-row .rt{grid-column:1/-1;justify-items:start;grid-auto-flow:column;align-items:center;justify-content:start;text-align:left}}
.sc-kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:28px 40px;margin:28px 0}
.sc-kv h3{font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gray);font-family:'Instrument Sans',sans-serif;margin-bottom:8px}
.sc-kv p{font-size:15px;line-height:1.6}
.sc-cards{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.sc-card{background:#fff;padding:22px 24px;display:flex;justify-content:space-between;gap:20px;align-items:flex-start;flex-wrap:wrap}
.sc-card .body{font-size:15px;line-height:1.6;min-width:0}
.sc-card .body b{font-weight:500;display:block}
.sc-card .body .tag{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gray);margin-left:10px;font-weight:400}
.sc-card .acts{display:flex;gap:18px;flex:none;align-items:center;padding-top:4px}
.sc-add{margin-top:22px}
.sc-form-box{border:1px solid var(--line);padding:30px 28px;background:var(--warm);margin-top:22px}
@media(max-width:600px){.sc-form-box{padding:24px 18px}}
.sc-google{display:flex;align-items:center;justify-content:center;gap:14px}
.sc-google svg{width:18px;height:18px;flex:none}
.sc-or{display:flex;align-items:center;gap:16px;margin:26px 0;color:var(--light);font-size:11px;letter-spacing:.3em;text-transform:uppercase}
.sc-or::before,.sc-or::after{content:"";flex:1;height:1px;background:var(--line)}
.sc-code{letter-spacing:.4em;font-size:22px!important;text-align:center;font-family:'Instrument Sans',sans-serif}
.sc-actions{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:8px}
.sc-back{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gray)}
.sc-back:hover{color:var(--ink)}
.sc-conf-head{text-align:center;padding:72px 0 40px}
.sc-conf-head h1{font-size:clamp(34px,4.6vw,56px);margin-top:14px}
.sc-conf-head .sub{font-family:'Instrument Serif',serif;font-style:italic;color:var(--gray);margin-top:14px;font-size:19px;max-width:600px;margin-left:auto;margin-right:auto}
.sc-conf-head .sub b{font-weight:400;color:var(--ink);font-style:normal;letter-spacing:.1em}
.sc-404{text-align:center;padding:120px 0 140px}
.sc-404 .num{font-family:'Italiana',serif;font-size:clamp(90px,16vw,180px);line-height:1;color:var(--light)}
.sc-404 h1{font-size:clamp(30px,4vw,48px);margin:10px 0 14px}
.sc-404 p{color:var(--gray);margin-bottom:34px}
.sc-404 .btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.sc-quiet-list{display:grid;gap:8px;font-size:15px}

/* ------------------------------------------------------------------ */
/* 2. INJECTABLE COMPONENTS (safe on existing pages)                  */
/* ------------------------------------------------------------------ */

/* nav additions */
.sc-nav-cart{white-space:nowrap}
.sc-nav-cart .sc-count:empty{display:none}
/* Desktop: quiet line icons at the far right, set off from the text menu by a hairline. */
.sc-nav-icons{display:inline-flex;align-items:center;gap:18px;margin-left:8px;padding-left:24px;border-left:1px solid rgba(16,16,16,.14);height:22px;align-self:center}
.sc-nav-icon{display:inline-flex;align-items:center;justify-content:center;position:relative;width:24px;height:24px;color:var(--ink,#101010);opacity:1;transition:opacity .2s,color .2s;line-height:0}
.sc-nav-icon:hover,.sc-nav-icon:focus-visible{opacity:.6}
.sc-nav-icon svg{display:block}
.sc-nav-icon .sc-count{position:absolute;top:-6px;right:-8px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--ink,#101010);color:#fff;font:500 10px/16px 'Instrument Sans',sans-serif;letter-spacing:0;text-align:center;box-sizing:border-box}
.sc-nav-icon .sc-count:empty{display:none}
.mobile-menu .sc-nav-icons{display:none}
@media(max-width:860px){.nav-links .sc-nav-icons{display:none}}
/* The reference shop/product/contact pages use a plain `.navlinks` row with no
   mobile menu; at phone widths it already overflows the viewport, and the extra
   Cart link makes that worse. Let the row wrap under the brand instead. Remove
   this block if the existing pages gain a proper mobile menu. */
/* (mobile header rules live at the end of this file) */

/* screen-reader only */
.sc-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* cart drawer */
.sc-drawer-root{position:fixed;inset:0;z-index:80;visibility:hidden;font-family:'Instrument Sans',sans-serif;color:var(--ink);font-size:15px;line-height:1.6}
.sc-drawer-root *{box-sizing:border-box;margin:0;padding:0}
.sc-drawer-root.open{visibility:visible}
.sc-drawer-back{position:absolute;inset:0;background:rgba(16,16,16,.45);opacity:0;transition:opacity .35s ease}
.sc-drawer-root.open .sc-drawer-back{opacity:1}
.sc-drawer{position:absolute;top:0;right:0;bottom:0;width:min(440px,100%);background:#fff;border-left:1px solid var(--line);display:flex;flex-direction:column;transform:translateX(100%);transition:transform .45s cubic-bezier(.22,1,.36,1);outline:none}
.sc-drawer-root.open .sc-drawer{transform:none}
.sc-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:22px 26px;border-bottom:1px solid var(--line)}
.sc-drawer-head h2{font-family:'Italiana',serif;font-weight:400;font-size:26px;line-height:1.1;letter-spacing:.02em}
.sc-drawer-head .sc-drawer-eyebrow{display:block;font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--gray);margin-bottom:6px;font-family:'Instrument Sans',sans-serif}
.sc-drawer-x{background:none;border:1px solid var(--line);color:var(--ink);font-size:11px;letter-spacing:.2em;text-transform:uppercase;padding:10px 14px;cursor:pointer;font-family:'Instrument Sans',sans-serif}
.sc-drawer-x:hover{border-color:var(--ink)}
.sc-drawer-body{flex:1 1 auto;overflow-y:auto;padding:0 26px}
.sc-drawer-item{display:grid;grid-template-columns:76px 1fr;gap:18px;padding:20px 0;border-bottom:1px solid var(--line)}
.sc-drawer-item .ph{width:76px;height:76px;background:var(--warm);overflow:hidden}
.sc-drawer-item .ph img{width:100%;height:100%;object-fit:contain;display:block}
.sc-drawer-item .brand{font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--light)}
.sc-drawer-item .name{font-size:14.5px;line-height:1.4;margin:3px 0 2px}
.sc-drawer-item .name a:hover{border-bottom:1px solid var(--ink)}
.sc-drawer-item .variant{font-size:12.5px;color:var(--gray)}
.sc-drawer-item .row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:12px;flex-wrap:wrap}
.sc-drawer-item .price{font-size:14.5px;white-space:nowrap}
.sc-drawer-item .rm{background:none;border:0;padding:0;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gray);cursor:pointer;border-bottom:1px solid transparent;font-family:'Instrument Sans',sans-serif}
.sc-drawer-item .rm:hover{color:var(--ink);border-bottom-color:var(--ink)}
.sc-drawer-empty{text-align:center;padding:70px 10px}
.sc-drawer-empty p{font-family:'Instrument Serif',serif;font-style:italic;font-size:20px;color:var(--gray);margin-bottom:26px}
.sc-drawer-foot{border-top:1px solid var(--line);padding:22px 26px 26px;background:#fff}
.sc-drawer-foot .sub{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--gray)}
.sc-drawer-foot .sub b{font-family:'Italiana',serif;font-weight:400;font-size:26px;letter-spacing:0;color:var(--ink)}
.sc-drawer-foot .note{font-size:12.5px;color:#9a9a9a;margin:6px 0 18px;line-height:1.5}
.sc-drawer-foot .btns{display:grid;gap:10px}
.sc-drawer-foot .sc-btn{display:block;width:100%}
.sc-drawer-hint{font-size:12.5px;color:var(--rust);margin-top:10px}
.sc-drawer-hint:empty{display:none}
@media(prefers-reduced-motion:reduce){
  .sc-drawer,.sc-drawer-back,.sc-toast{transition:none}
  .sc-page .btn,.sc-btn,.sc-seg button{transition:none}
}

/* product page add-to-cart block */
.sc-buy{margin:28px 0 8px}
.sc-buy-row{display:flex;gap:12px;align-items:stretch;flex-wrap:wrap}
.sc-buy-row .sc-qty{height:50px;flex:none}
.sc-buy-row .sc-qty button{width:44px}
.sc-buy-row .sc-qty input{width:46px}
.sc-buy .btn.solid,.sc-buy .sc-btn.solid{flex:1 1 220px;background:var(--ink);color:#fff;border:1px solid var(--ink);cursor:pointer;margin:0;padding:15px 30px;letter-spacing:.22em;font-size:13px;text-transform:uppercase;font-family:'Instrument Sans',sans-serif;transition:.25s;line-height:1.4;border-radius:0}
.sc-buy .btn.solid:hover,.sc-buy .sc-btn.solid:hover{background:#2e2e2e}
.sc-buy .btn.solid[disabled],.sc-buy .sc-btn.solid[disabled]{background:none;color:var(--light);border-color:var(--line);cursor:default}
.sc-buy .btn.solid.added,.sc-buy .sc-btn.solid.added{background:var(--green);border-color:var(--green)}
.sc-buy-note{font-size:12.5px;color:var(--gray);margin-top:14px;letter-spacing:.02em}
.sc-buy-note b{font-weight:400;color:var(--ink)}
.sc-buy-note a{border-bottom:1px solid var(--line)}
.sc-buy-err{color:var(--rust);font-size:13px;margin-top:10px}
.sc-buy-err:empty{display:none}

/* data-shop-only links stay hidden until shop.js confirms the shop is reachable */
[hidden]{display:none!important}

.sc-minnote{margin-top:10px;color:var(--rust,#8a3b2a)}

/* One phone header for the whole site. Pages built on the plain .navlinks row used to get a
   bespoke two-row treatment here, which meant the shop navigated differently from every other
   page. They now collapse to the same brand + icons + MENU header; shop.js builds the menu. */
/* The MENU button appears at 960px, so the text links have to go at 960px too.
   They were held until 760px, which left every .navlinks page -- the shop, the
   product pages, contact -- showing the full link row AND a MENU button between
   761 and 960: an iPad in portrait got both, with "All furniture" wrapping onto
   a second line underneath the row. */
@media(max-width:960px){
  /* One header on every page: brand, cart/account icons, MENU. The text links move
     into the same mobile menu the rest of the site uses (built in shop.js). */
  nav .nav-in:has(.navlinks){flex-wrap:nowrap;row-gap:0}
  nav .nav-in:has(.navlinks) .brand{margin-right:auto}
  nav .navlinks{width:auto;order:0;gap:0;overflow:visible}
  nav .navlinks>a,nav .navlinks a.back{display:none}
  nav .navlinks .sc-nav-icons{display:inline-flex;margin-left:0;margin-right:14px;padding-left:0;border-left:0;height:20px}
}
@media(max-width:760px){
  nav .nav-in:has(.navlinks){height:72px;padding:0 20px}
  nav .nav-in:has(.navlinks) .brand span{font-size:13.5px;letter-spacing:.09em}
}

/* Phones: page headers read better centred than hard against the left margin. */
@media(max-width:600px){
  .sc-head,.sc-conf-head,.sc-404{text-align:center}
  .sc-head .sub,.sc-conf-head p{margin-left:auto;margin-right:auto}
  .sc-acct-head{justify-content:center;text-align:center}
}