@import url('/fonts.css');
:root{--color-foreground:18,18,18;--color-background:255,255,255;--color-button:18,18,18;--color-button-text:255,255,255;--color-link:18,18,18;--font-body-family:Outfit,"Smallsmore CN",sans-serif;--font-heading-family:Comfortaa,"Smallsmore CN",sans-serif;--font-body-weight:400;--font-body-weight-bold:700;--font-body-style:normal;--font-heading-weight:400;--font-heading-style:normal;--font-heading-scale:1;--font-body-scale:1;--page-width:120rem;--buttons-radius:0;--buttons-radius-outset:0;--buttons-border-width:1px;--buttons-border-opacity:1;--buttons-shadow-opacity:0;--inputs-radius:0;--inputs-border-width:1px;--inputs-border-opacity:.2;--inputs-shadow-opacity:0}
*{box-sizing:border-box}html{font-size:62.5%}body{margin:0;color:#121212;background:white;font:400 1.4rem/1.7 var(--font-body-family);letter-spacing:0}button,input,select,textarea{font-family:var(--font-body-family)}[hidden]{display:none!important}button{cursor:pointer}button:disabled{cursor:wait;opacity:.55}a{color:inherit}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid #121212;outline-offset:3px}.site-header{max-width:120rem;margin:auto;padding:2.4rem 5rem;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #eee}.wordmark{font:800 2.7rem/1 Outfit;letter-spacing:-.12rem;text-decoration:none}.site-header>span{font-size:1.2rem;color:#686868;letter-spacing:.08rem}.site-footer{border-top:1px solid #eee;padding:2.4rem;text-align:center;color:#777;font-size:1.2rem}.smallsmore-patch-customizer__panel{min-width:0}.smallsmore-patch-customizer__title{font-family:Comfortaa,"Smallsmore CN",sans-serif}.smallsmore-patch-customizer__mode-tab,.smallsmore-patch-customizer__standard-combo-title{font-family:var(--font-heading-family)}.smallsmore-patch-customizer__step-marker{font-family:Outfit,sans-serif}.smallsmore-patch-customizer__hardware-colors button{font-family:var(--font-body-family)}.smallsmore-patch-customizer__standard-combo-title{letter-spacing:0}.smallsmore-patch-customizer__textarea,.smallsmore-patch-customizer__select{font-family:var(--font-body-family)}.smallsmore-standard-photo-image{max-width:100%}.smallsmore-patch-customizer__subtitle{max-width:65rem}.smallsmore-patch-customizer__preview-wrap{align-self:start}
.order-form{border-top:1px solid var(--sm-color-border-default);margin-top:2.4rem;padding-top:2.4rem}.order-form h2{font:600 1.6rem var(--font-body-family);margin:0 0 1.6rem}.order-form label:not(.confirm-design),.admin-form label{display:block;font-size:1.2rem;font-weight:600;margin-bottom:.6rem}.order-form input:not([type=checkbox]),.admin-form input{width:100%;min-height:4.8rem;border:1px solid #ccc;border-radius:0;background:#fff;padding:1.1rem 1.2rem;color:#121212;font-size:1.6rem}.order-form input[readonly]{background:#f6f6f6}.help{font-size:1.2rem;color:#686868;margin:.8rem 0 1.6rem;line-height:1.7}.order-fields{min-width:0}.confirm-design{display:flex;align-items:center;gap:.8rem;margin:1.8rem 0;font-size:1.2rem;cursor:pointer}.confirm-design input{margin:0;accent-color:#121212;width:1.5rem;height:1.5rem;flex-shrink:0}.order-form .button{width:100%;min-height:4.8rem;color:white;background:#121212;border:1px solid #121212;font:400 1.5rem/1.4 var(--font-body-family);letter-spacing:.1rem}.order-form .button:after,.order-form .button:before{display:none}.notice{border:1px solid #ddd;padding:1.2rem 1.6rem;background:#fafafa;margin-bottom:2rem}.error,#submit-status[data-error=true]{color:#b3261e}.receipt{max-width:100rem;margin:0 auto 5rem;padding:3rem 5rem}.receipt-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:3rem}.receipt img{width:100%;display:block}.receipt h2,.admin-main h1{font:400 2.6rem/1.5 var(--font-heading-family)}.summary{margin:1.8rem 0}.summary div{display:grid;grid-template-columns:8rem minmax(0,1fr);gap:1rem;padding:.5rem 0}.summary dt{color:#777}.summary dd{margin:0;overflow-wrap:anywhere;white-space:pre-wrap}.plain-button,.admin-button{display:inline-flex;align-items:center;justify-content:center;min-height:4.2rem;padding:.9rem 1.6rem;border:1px solid #ccc;background:white;font-size:1.4rem;text-decoration:none;line-height:1.5}.admin-button.primary{background:#121212;color:white;border-color:#121212}.action-row{display:flex;flex-wrap:wrap;gap:.8rem}.saved-list{display:flex;gap:.8rem;flex-wrap:wrap;margin-bottom:2rem}.saved-list button{border:1px solid #ccc;background:white;padding:.8rem 1.2rem;font-size:1.2rem}.saved-list .selected{border-color:#121212;box-shadow:inset 0 0 0 1px #121212}
.admin-main{max-width:120rem;padding:3.2rem 5rem 6rem;margin:auto}.admin-main h1{margin:0 0 2.4rem}.admin-form{max-width:42rem}.admin-form .admin-button{margin-top:1.6rem}.admin-toolbar{display:grid;grid-template-columns:1fr 1fr;gap:3rem;margin-bottom:3rem}.admin-toolbar .admin-form{max-width:none}.admin-toolbar h2{font:600 1.6rem var(--font-body-family);margin:0 0 1.6rem}.generated-link{display:block;overflow-wrap:anywhere;padding:1rem 0}.admin-card{border:1px solid #ddd;margin-bottom:2rem;padding:2rem}.admin-card-header{display:flex;justify-content:space-between;gap:2rem;align-items:start;flex-wrap:wrap}.admin-card h2{font:600 1.6rem var(--font-body-family);margin:0 0 .8rem}.status-tag{border:1px solid #ddd;padding:.3rem .8rem;white-space:nowrap;font-size:1.2rem}.status-tag.pending{color:#8b5c12;background:#fffaf0}.admin-design{display:grid;grid-template-columns:23rem minmax(0,1fr);gap:2rem;margin-top:1.6rem}.admin-design img{width:100%;aspect-ratio:1;object-fit:contain;background:#fafafa}.version-select{font-size:1.4rem;padding:.8rem;border:1px solid #ccc;background:white;max-width:100%}.admin-hint{color:#777;font-size:1.2rem}.empty-state{border:1px solid #ddd;padding:3rem;text-align:center;color:#666}.admin-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.6rem}.admin-top h1{margin:0}.admin-login{max-width:42rem;margin:6rem auto}.page-error{max-width:70rem;margin:4rem auto;padding:2rem}.local-password-hint{font-size:1.2rem;color:#777}
@media(max-width:749px){.site-header{padding:2rem 2.2rem}.wordmark{font-size:2.4rem}.site-header>span{font-size:1.1rem}.smallsmore-patch-customizer{padding-top:3rem}.smallsmore-patch-customizer__subtitle{font-size:1.3rem}.receipt{padding:2rem 2.2rem}.receipt-grid,.admin-design,.admin-toolbar{grid-template-columns:1fr}.receipt-grid{gap:1rem}.admin-main{padding:2.4rem 2.2rem 5rem}.admin-card{padding:1.6rem}.admin-design img{max-width:30rem;margin:auto}.order-form .button{font-size:1.4rem}.summary div{grid-template-columns:7rem minmax(0,1fr)}.admin-top{align-items:start;gap:1rem}.admin-top h1{font-size:2.2rem}.smallsmore-patch-customizer__standard-combo-title{font-size:1.1rem;letter-spacing:0}}
/* The drawing's white left margin holds the real-photo references. */
.ocase-preview-gallery{--ocase-left-tool-offset:.6rem;--ocase-photo-tool-size:5.6rem;position:relative;max-width:44rem;margin:0 auto}
.ocase-photo-references{position:absolute;left:var(--ocase-left-tool-offset);top:24%;width:var(--ocase-photo-tool-size);z-index:8}
.ocase-preview-gallery .smallsmore-patch-customizer__history-tools{left:var(--ocase-left-tool-offset);width:var(--ocase-photo-tool-size);justify-items:center;grid-template-rows:repeat(2,var(--sm-patch-preview-tool-size))}
.ocase-preview-gallery [data-patch-undo]{grid-row:1}
.ocase-preview-gallery [data-patch-redo]{grid-row:2}
.ocase-preview-gallery .smallsmore-patch-customizer__history-button:disabled{display:none}
.ocase-photo-orb{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:1;padding:.5rem;border:0;border-radius:50%;background:rgba(255,255,255,.98);box-shadow:0 0 0 1px #00000008,0 .3rem 1.2rem #00000012;transition:transform 160ms ease}
.ocase-photo-orb img{display:block;width:100%;height:100%;object-fit:contain;border-radius:50%}
.ocase-photo-orb-label{position:absolute;top:calc(100% + .4rem);left:0;width:100%;color:#707070;font-size:1.05rem;line-height:1.2;text-align:center}
.ocase-photo-orb-return{display:none;justify-items:center;gap:.2rem;color:#707070;font-size:1rem;line-height:1.2}
.ocase-photo-orb-return svg{width:1.6rem;height:1.6rem;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ocase-photo-orb[aria-expanded="true"]>img,
.ocase-photo-orb[aria-expanded="true"] .ocase-photo-orb-label{display:none}
.ocase-photo-orb[aria-expanded="true"] .ocase-photo-orb-return{display:grid}
.ocase-photo-menu{position:absolute;top:calc(100% + .8rem);left:0;width:100%;max-height:var(--ocase-photo-menu-height,24rem);padding:.4rem;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;border-radius:2.4rem;background:rgba(255,255,255,.98);box-shadow:0 0 0 1px #00000008,0 .3rem 1.2rem #00000012;scroll-padding:.4rem}
.ocase-photo-reference-list{display:grid;gap:.4rem;list-style:none;margin:0;padding:0}
.ocase-photo-reference{position:relative;display:grid;width:100%;min-height:4.4rem;padding:.2rem .2rem .6rem;border:0;border-radius:1.4rem;background:transparent;color:#686868;font-size:1.05rem;line-height:1.2}
.ocase-photo-reference img{display:block;width:100%;height:4rem;object-fit:contain}
.ocase-photo-reference span{display:none}
.ocase-photo-reference:hover img{opacity:.75}
.ocase-photo-reference::after{content:"";position:absolute;bottom:.1rem;left:50%;transform:translateX(-50%);width:.4rem;height:.4rem;border-radius:50%;background:#121212;opacity:0}
.ocase-photo-reference.is-active::after{opacity:1}
@media(hover:hover) and (pointer:fine){.ocase-photo-orb:hover{transform:scale(1.06)}}
.ocase-main-photo{position:absolute;inset:0;overflow:hidden;background:#fff;z-index:5}
.ocase-main-photo img{display:block;width:100%;height:100%;object-fit:contain;transform:translateX(-.7%) scale(1.14)}
.smallsmore-patch-customizer[data-ocase-preview-view="photo"] .smallsmore-patch-customizer__stage,
.smallsmore-patch-customizer[data-ocase-preview-view="photo"] .smallsmore-patch-customizer__history-tools,
.smallsmore-patch-customizer[data-ocase-preview-view="photo"] .smallsmore-patch-customizer__preview-actions{visibility:hidden;pointer-events:none}
@media(max-width:749px){
  .ocase-preview-gallery{--ocase-left-tool-offset:.2rem;--ocase-photo-tool-size:4.4rem;max-width:36rem}
  .ocase-photo-menu{width:4.8rem;left:-.2rem;padding:.4rem .2rem;border-radius:2rem}
  .ocase-photo-reference-list{gap:.4rem}
  .ocase-photo-reference{font-size:1rem}
}
.order-progress{display:flex;gap:2.4rem;list-style:none;margin:0 0 1.2rem;padding:0;scroll-margin-top:2rem;font-size:1.3rem;color:#777}
.order-progress li{display:flex}
.order-progress button{display:flex;align-items:center;gap:.8rem;min-height:4.4rem;padding:.4rem 0;border:0;background:transparent;color:inherit;font:inherit}
.order-progress button[aria-current=step]{color:#121212;font-weight:600}
.order-progress button:hover{color:#121212}
.smallsmore-patch-customizer .smallsmore-patch-customizer__header{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:2.4rem;row-gap:.8rem;align-items:start}
.smallsmore-patch-customizer__header>.smallsmore-patch-customizer__title{grid-column:1;grid-row:1}
.smallsmore-patch-customizer__header>.smallsmore-patch-customizer__subtitle{grid-column:1;grid-row:2;margin:0}
.smallsmore-patch-customizer__header>.order-progress{grid-column:2;grid-row:1 / span 2;align-self:start;justify-self:end;margin:0}
@media(max-width:599px){
  .smallsmore-patch-customizer .smallsmore-patch-customizer__header{grid-template-columns:minmax(0,1fr)}
  .smallsmore-patch-customizer__header>.order-progress{grid-column:1;grid-row:3}
}
.smallsmore-patch-customizer{--sm-product-hero-gap:1.6rem;--sm-product-title-subtitle-gap:.8rem;padding:2.4rem 0 3.2rem}
.smallsmore-patch-customizer .smallsmore-patch-customizer__preview{min-height:0;padding-top:.8rem;padding-bottom:0}
.smallsmore-patch-customizer .smallsmore-standard-preview-note{position:static;transform:none;width:auto;max-width:min(42rem,100%);margin:0 auto .6rem}
.smallsmore-patch-customizer .smallsmore-patch-customizer__stage,
.smallsmore-patch-customizer .smallsmore-standard-photo-preview{max-width:min(100%,44rem);min-height:0}
.smallsmore-patch-customizer .smallsmore-patch-customizer__preview-actions{padding-top:.8rem;margin-bottom:1.2rem}
.smallsmore-patch-customizer .smallsmore-patch-customizer__preview-button{margin-top:0}
@media(max-width:749px){
  .smallsmore-patch-customizer .smallsmore-patch-customizer__stage,
  .smallsmore-patch-customizer .smallsmore-standard-photo-preview{max-width:min(100%,calc(100vw - 9rem),32rem)}
}
.order-progress-number{display:inline-flex;align-items:center;justify-content:center;width:2.4rem;height:2.4rem;border:1px solid #ccc;border-radius:50%;font-family:Outfit,sans-serif;font-weight:400}
.order-progress [aria-current=step] .order-progress-number{border-color:#121212;background:#121212;color:#fff}
.design-actions{order:6;margin-top:1.6rem}
.design-help{max-width:52rem;margin:0 auto 1.2rem;color:#707070;font-size:1.2rem;line-height:1.7;text-align:center}
.order-primary-button{width:100%;min-height:4.8rem;border:1px solid #121212;background:#121212;color:#fff;font:400 1.5rem/1.4 var(--font-body-family);letter-spacing:.1rem}
.order-primary-button:before,.order-primary-button:after{display:none}
#design-status[data-error=true]{color:#b3261e}
#design-status:empty,#submit-status:empty{display:none}
fieldset.order-form{min-width:0;width:100%;margin:0;padding:0;border:0}
.order-step-actions{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.2rem}
.smallsmore-patch-customizer[data-order-step=order] .smallsmore-patch-customizer__history-tools,
.smallsmore-patch-customizer[data-order-step=order] .smallsmore-standard-preview-tabs{display:none!important}
@media(max-width:749px){.design-step{display:contents}.design-actions{width:100%;margin-top:1.2rem}.order-progress{gap:2rem;margin-bottom:.8rem}.order-primary-button{font-size:1.4rem}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
.confirmation-dialog{border:1px solid #ddd;max-width:48rem;width:calc(100% - 4rem);padding:2.4rem;font:400 1.4rem/1.8 var(--font-body-family)}.confirmation-dialog::backdrop{background:rgba(0,0,0,.3)}.confirmation-dialog h2{font-size:2rem;margin-top:0}.confirmation-dialog .action-row{justify-content:flex-end;margin-top:2.4rem}
@media(max-width:749px){#custom-form{display:contents}.order-form{order:6}.smallsmore-patch-customizer__hardware-colors[data-patch-button-colors]{display:grid;grid-template-columns:repeat(5,auto);justify-content:space-between;row-gap:1rem}.smallsmore-patch-customizer__standard-button-colors{flex-wrap:wrap}}
/* Give phone-sized screens a compact header and the full preview width. */
@media(max-width:749px){
  .smallsmore-patch-customizer .smallsmore-patch-customizer__stage,
  .smallsmore-patch-customizer .smallsmore-standard-photo-preview{max-width:min(100%,36rem)}
  .smallsmore-patch-customizer .smallsmore-patch-customizer__preview-actions{padding-top:.4rem;margin-bottom:.8rem}
  .smallsmore-patch-customizer[data-patch-mode-state] .smallsmore-patch-customizer__mode-panel{margin:1rem 0 0;padding:0;gap:1.2rem}
}
@media(max-width:599px){
  .site-header{padding:1.6rem}.wordmark{font-size:2.2rem}
  .smallsmore-patch-customizer{--sm-product-hero-gap:1.2rem;padding-top:1.6rem}
  .smallsmore-patch-customizer .smallsmore-patch-customizer__header{row-gap:.6rem}
  .smallsmore-patch-customizer .smallsmore-patch-customizer__title{font-size:clamp(2.4rem,7.2vw,3rem);line-height:1.2}
  .smallsmore-patch-customizer .smallsmore-patch-customizer__subtitle{font-size:1.2rem;line-height:1.5}
  .smallsmore-patch-customizer__header>.order-progress{justify-self:stretch;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6rem;width:100%;margin:.2rem 0 0;font-size:1.2rem}
  .order-progress button{min-height:3.6rem;gap:.6rem}
  .order-progress-number{width:2rem;height:2rem;font-size:1.1rem}
  .smallsmore-patch-customizer .smallsmore-standard-preview-tabs{margin-bottom:.2rem;gap:1.8rem}
  .smallsmore-patch-customizer .smallsmore-standard-preview-tab{font-size:1.15rem;min-height:3rem}
  .smallsmore-patch-customizer .smallsmore-standard-preview-note{font-size:1.05rem;line-height:1.5;max-width:100%;margin-bottom:.2rem}
  .smallsmore-patch-customizer .smallsmore-patch-customizer__preview{padding:.4rem 1.2rem 0}
  .smallsmore-patch-customizer .smallsmore-patch-customizer__standard-combo{min-height:7.8rem}
}
/* Center the design workspace and its next action on larger screens. */
@media(min-width:750px){
  .smallsmore-patch-customizer[data-order-step=design] .smallsmore-patch-customizer__layout{
    grid-template-columns:minmax(0,1fr);
    gap:1.2rem;
  }
  .smallsmore-patch-customizer[data-order-step=design] .smallsmore-patch-customizer__preview-wrap{
    position:static;
    width:100%;
    max-width:56rem;
    justify-self:center;
  }
  .smallsmore-patch-customizer[data-order-step=design] .smallsmore-patch-customizer__panel{
    max-width:52rem;
    justify-self:center;
    padding:0;
  }
  .smallsmore-patch-customizer[data-order-step=design] .design-actions{
    margin-top:0;
    text-align:center;
  }
  .smallsmore-patch-customizer[data-order-step=design] #next-step{
    display:flex;
    width:min(100%,32rem);
    margin:0 auto;
  }
}