@import url('/static/fonts.css'); :root{color:#171717;background:#fff;font-synthesis:none;font-size:13px;line-height:1.45;--line:#ddd;--muted:#717171;--blue:#1762b0;--softblue:#eaf3ff} *{box-sizing:border-box}body{margin:0}button,input,textarea,select{font:inherit;color:inherit}button,a,input,select,textarea{touch-action:manipulation}button,.button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:34px;padding:7px 12px;border:1px solid #171717;background:#fff;border-radius:0;font-weight:500;cursor:pointer;text-decoration:none;color:#171717}button:hover,.button:hover{background:#f3f3f3}button:disabled{cursor:not-allowed;opacity:.4}button.primary,.button.primary{background:#171717;color:white}button.primary:hover{background:#333}button.small{min-height:28px;padding:4px 8px;font-size:12px}button.ghost{border-color:var(--line)}button.icon{padding:4px 8px;min-height:28px}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid #1f6fc7;outline-offset:3px}input,textarea,select{min-height:36px;padding:8px 10px;background:white;border:1px solid #bbb;border-radius:0;max-width:100%}textarea{resize:vertical;min-height:100px}h1,h2,h3,p{margin:0}h1{font-size:27px;font-weight:500;letter-spacing:-.8px}h2{font-size:19px;font-weight:500}h3{font-size:14px;font-weight:600}a{color:inherit}small,.muted{font-size:12px;color:var(--muted)}.shell{max-width:1680px;padding:0 32px 40px;margin:auto}.masthead{height:78px;display:flex;justify-content:space-between;align-items:center;gap:20px;border-bottom:1px solid var(--line)}.wordmark{font-size:23px;letter-spacing:-1.7px;font-weight:700;text-decoration:none}.wordmark span{font-weight:400;font-size:10px;letter-spacing:1.4px;text-transform:uppercase;margin-left:15px;vertical-align:middle;color:var(--muted)}.navigation{display:flex;align-items:center;gap:19px;font-size:12px}.navigation a{text-decoration:none}.navigation a[aria-current=page]{text-decoration:underline;text-underline-offset:5px}.page-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin:29px 0 22px}.eyebrow{text-transform:uppercase;letter-spacing:1.2px;font-size:10px;color:var(--muted);margin-bottom:6px}.subtitle{margin-top:7px;color:var(--muted);max-width:700px}.heading-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;padding-top:6px}.notice{padding:12px 14px;border:1px solid var(--line);margin:0 0 16px;font-size:12px;white-space:pre-line;overflow-wrap:anywhere}.notice.info{background:#f7faff;border-color:#c7dbf1}.notice.error{background:#fff7f5;border-color:#dcafa5;color:#872d1f}.notice.success{background:#f4faf7;border-color:#bbd7c6}.notice ul{padding-left:18px;margin:6px 0 0}.notice[hidden]{display:none}.toolbar{display:flex;gap:10px;align-items:flex-end;border:1px solid var(--line);padding:12px;margin-bottom:18px;background:#fafafa}.toolbar label{display:grid;gap:5px;font-size:11px;color:#555}.toolbar .search-field{flex:1;min-width:160px}.toolbar input[type=search]{width:100%;min-width:120px}.toolbar select{min-width:145px}.toolbar .checkbox-label{display:flex;gap:7px;align-items:center;min-height:36px;padding:0 3px;white-space:nowrap;font-size:12px}.checkbox-label input{min-height:auto;accent-color:#171717}.resultbar{display:flex;align-items:center;justify-content:space-between;gap:15px;margin:0 0 12px;font-size:12px;color:#666}.pagination{display:flex;align-items:center;gap:10px;justify-content:flex-end}.pagination span{min-width:70px;text-align:center}.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.product-card{border:1px solid var(--line);padding:12px;background:white;min-width:0;display:flex;flex-direction:column;position:relative}.product-card.drop-target{outline:2px solid var(--blue);outline-offset:-2px;background:#f6faff}.card-top{display:flex;gap:7px;justify-content:space-between;align-items:center;margin-bottom:10px}.sku{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}.card-parent{color:#777;font-size:11px;margin-top:2px}.card-position{display:flex;align-items:center;gap:5px;color:#777;font-size:11px}.card-position input{width:48px;min-height:28px;padding:3px 5px;text-align:center;font-size:12px}.drag-handle{border:0;color:#8a8a8a;cursor:grab;letter-spacing:-3px;font-size:19px;padding:0 5px;min-height:26px}.drag-handle:active{cursor:grabbing}.image-stage{width:100%;height:160px;display:flex;align-items:center;justify-content:center;background:#f8f8f8;position:relative;overflow:hidden;margin-bottom:8px}.image-stage img{width:100%;height:100%;object-fit:contain}.image-stage .no-image{color:#a1a1a1;font-size:12px}.image-count{position:absolute;right:6px;bottom:6px;background:rgba(255,255,255,.93);border:1px solid #e3e3e3;font-size:10px;padding:1px 5px}.thumb-strip{display:flex;gap:5px;overflow-x:auto;padding:0 0 6px;min-height:48px;margin-bottom:6px}.thumb{display:block;flex:0 0 42px;height:42px;min-height:42px;padding:2px;border:1px solid var(--line);position:relative;background:#fafafa;cursor:grab}.thumb.selected{border-color:#222}.thumb img{width:100%;height:100%;object-fit:contain;pointer-events:none}.thumb.drop-target{outline:2px solid var(--blue)}.thumb-index{position:absolute;bottom:0;right:0;background:#fff;font-size:8px;padding:0 2px;color:#555}.product-title{font-size:13px;line-height:1.5;font-weight:500;overflow-wrap:anywhere;margin:2px 0 6px;min-height:38px}.product-meta{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:11px;color:#777;margin-bottom:10px}.pill-row{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:11px}.pill{display:inline-block;border:1px solid #d3e4f7;color:var(--blue);background:var(--softblue);font-size:10px;padding:2px 6px;line-height:1.5}.pill.neutral{color:#666;background:#f7f7f7;border-color:#ddd}.pill.warning{color:#775525;background:#fff9ed;border-color:#e7d6b8}.card-bottom{margin-top:auto;display:flex;align-items:center;gap:7px;justify-content:space-between}.card-bottom .button,.card-bottom button{font-size:11px;min-height:30px;padding:5px 9px}.folder-link{font-size:11px;color:#666;text-decoration:none;white-space:nowrap}.image-controls{margin:0 0 11px;padding:8px;background:#fafafa;border:1px solid #e7e7e7;display:grid;gap:7px}.image-controls .control-row{display:flex;gap:5px;align-items:center;justify-content:space-between}.image-controls select{min-width:0;width:100%;font-size:11px;min-height:29px;padding:4px}.image-controls button{font-size:11px;min-height:26px;padding:3px 6px}.image-controls .muted{font-size:10px;overflow-wrap:anywhere}.empty-state{grid-column:1/-1;text-align:center;padding:75px 25px;border:1px solid var(--line);background:#fdfdfd}.empty-state p{max-width:500px;margin:8px auto 0;color:#777}.empty-marker{font-size:25px;font-weight:300;margin-bottom:15px;color:#999}.bottom-pagination{margin-top:20px}.footer{border-top:1px solid var(--line);margin-top:35px;padding-top:17px;display:flex;gap:20px;justify-content:space-between;color:#8a8a8a;font-size:11px}.auth-panel{max-width:480px;margin:70px auto;padding:28px;border:1px solid var(--line)}.auth-panel h1{font-size:23px}.auth-panel p{color:#777;margin:10px 0 20px}.auth-panel form{display:grid;gap:10px}.auth-panel input{width:100%}.loading-screen{padding:60px;color:#777;text-align:center}.review-banner{display:flex;gap:20px;align-items:flex-start;justify-content:space-between;border:1px solid #c7dbf1;background:#f7faff;padding:15px;margin-bottom:16px}.review-banner p{color:#546374;font-size:12px;margin-top:5px;max-width:900px}.review-banner .button{white-space:nowrap}.review-evidence{border-top:1px solid var(--line);padding-top:9px;margin-top:12px;font-size:10px;color:#777;overflow-wrap:anywhere}.review-images{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-bottom:10px}.review-image{min-width:0;border:1px solid #eee;padding:4px}.review-image img{width:100%;height:120px;object-fit:contain;background:#fafafa}.review-image p{font-size:9px;overflow-wrap:anywhere;color:#777;margin-top:4px}.modal{border:1px solid #bbb;padding:0;width:min(1040px,calc(100vw - 36px));max-height:calc(100dvh - 42px);background:white;color:#171717}.modal::backdrop{background:rgba(0,0,0,.4)}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:19px 24px;border-bottom:1px solid var(--line);gap:18px;background:#fafafa;position:sticky;top:0;z-index:2}.modal-header .muted{margin-top:3px}.modal-content{padding:22px 24px}.modal-layout{display:grid;grid-template-columns:190px minmax(0,1fr);gap:25px}.editor-image{width:100%;height:190px;object-fit:contain;background:#f8f8f8}.editor-source{font-size:11px;color:#777;overflow-wrap:anywhere;margin-top:10px}.editor-source div{margin-top:5px}.form-section{padding-bottom:22px;margin-bottom:21px;border-bottom:1px solid var(--line)}.form-section h3{margin-bottom:12px}.fields-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.field{display:grid;gap:5px;font-size:11px;min-width:0}.field.wide{grid-column:1/-1}.field input,.field select,.field textarea{width:100%;font-size:13px}.field .field-source{font-size:10px;color:#8a8a8a;overflow-wrap:anywhere}.field-label{display:flex;justify-content:space-between;gap:8px}.specifics-row{display:grid;grid-template-columns:1fr 1.3fr 28px;gap:7px;margin-bottom:8px;align-items:center}.specifics-row input{width:100%;min-width:0}.specifics-row button{padding:0}.required-label{color:#8e662a;font-size:10px}.workflow-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.workflow-box{border:1px solid var(--line);padding:10px;display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0}.workflow-box h3{font-size:12px;margin:0}.workflow-box ul{padding-left:16px;margin:0;color:#777;font-size:11px;flex:1;overflow-wrap:anywhere}.workflow-box .muted{font-size:11px}.workflow-box button{font-size:11px;min-height:29px;padding:5px 7px;margin-top:auto}.verify-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:13px 0}.verify-row label{font-size:11px;display:flex;align-items:center;gap:7px}.verify-row input{min-height:auto;accent-color:#171717}.modal-actions{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:16px 24px;border-top:1px solid var(--line);position:sticky;bottom:0;background:white;z-index:2}.modal-actions .actions-right{display:flex;gap:8px}.modal-actions .muted{font-size:11px}.response-panel{margin-top:16px;border:1px solid #c7dbf1;background:#f7faff;padding:12px}.response-panel h3{margin-bottom:8px}.response-panel pre,.packet pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:11px;max-height:340px;overflow:auto;margin:0}.packet{padding:24px}.packet p{margin:8px 0 15px;color:#777}.customer .product-title{min-height:0;margin-top:7px}.customer .card-top{margin-bottom:8px}.customer .card-parent{font-size:11px}.customer .product-meta{margin-bottom:13px}.customer-price{font-size:13px;font-weight:500;margin:1px 0 10px}.customer .thumb{cursor:pointer}.customer .thumb-strip{margin-bottom:0}.customer-description{font-size:12px;color:#666;line-height:1.7;white-space:pre-wrap}.customer-details{display:grid;grid-template-columns:1fr 1fr;gap:20px}.customer-details img{max-width:100%;width:100%;height:360px;object-fit:contain;background:#fafafa}.customer-details h2{margin:0 0 12px}.customer-details .product-meta{margin-top:12px}.customer-details .button{margin-top:18px}.customer .page-heading{margin-bottom:26px}.customer .grid{grid-template-columns:repeat(4,minmax(0,1fr))}.customer .card-bottom{margin-top:12px}.screen-reader{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.busy{cursor:progress} @media(min-width:1500px){.grid{grid-template-columns:repeat(5,minmax(0,1fr))}} @media(max-width:1120px){.grid,.customer .grid{grid-template-columns:repeat(3,minmax(0,1fr))}.shell{padding:0 22px 30px}.toolbar{flex-wrap:wrap}.toolbar .search-field{flex-basis:100%}.workflow-grid{grid-template-columns:1fr}.workflow-box{display:grid;grid-template-columns:1fr 1fr;align-items:start}.workflow-box ul{grid-column:1}.workflow-box button{grid-column:2;grid-row:1/3;align-self:center;justify-self:end}} @media(max-width:760px){.shell{padding:0 15px 24px}.masthead{height:66px}.wordmark span{display:none}.navigation{gap:12px}.page-heading{display:block;margin-top:22px}.heading-actions{justify-content:flex-start;margin-top:12px}.grid,.customer .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.toolbar{gap:8px;padding:10px}.toolbar label{flex:1}.toolbar select{min-width:0;width:100%}.toolbar .checkbox-label{flex-basis:100%}.product-card{padding:10px}.image-stage{height:160px}.card-bottom{flex-wrap:wrap}.card-position input{width:40px}.review-banner{display:block}.review-banner .button{margin-top:12px}.modal{width:calc(100vw - 18px);max-height:calc(100dvh - 20px)}.modal-header{padding:15px}.modal-content{padding:15px}.modal-layout{grid-template-columns:1fr}.editor-aside{display:none}.modal-actions{padding:13px 15px}.customer-details{grid-template-columns:1fr}.customer-details img{height:250px}.review-images{grid-template-columns:1fr}.resultbar{align-items:flex-start}.footer{display:block}.footer span{display:block;margin:5px 0}.review-image img{height:150px}} @media(max-width:400px){.grid,.customer .grid{grid-template-columns:1fr}.fields-grid{grid-template-columns:1fr}.field.wide{grid-column:auto}.navigation{font-size:11px}.card-bottom{flex-wrap:nowrap}.image-stage{height:200px}.modal-actions .muted{max-width:120px}.specifics-row{grid-template-columns:1fr 1fr 25px}} .customer-details .thumb-strip{margin-top:8px}.customer-details .thumb img{height:100%;width:100%}.specifics-row textarea,.specifics-row select{width:100%;min-width:0}.specifics-row textarea{min-height:58px;font-size:12px} .customer-selection{border:1px solid var(--line);padding:14px;margin-bottom:18px;background:#fafafa}.selection-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.selection-heading h2{font-size:15px}.selection-actions{display:flex;gap:8px;flex-wrap:wrap}.customer-selection>.muted{margin-top:8px}.selected-pieces{display:flex;gap:8px 18px;flex-wrap:wrap;padding:0;list-style:none;margin:12px 0 0}.selected-pieces li{display:flex;align-items:center;gap:8px;font-variant-numeric:tabular-nums}.customer-selection-control{display:flex;align-items:center;gap:5px;font-size:11px;white-space:nowrap}.customer-selection-control input{min-height:auto;accent-color:#171717}.inquiry-draft{display:grid;gap:14px}.inquiry-draft textarea{width:100%;white-space:pre;overflow-wrap:normal;font-variant-numeric:tabular-nums}.inquiry-draft .notice{margin:0} .content-source-review>button{margin-top:10px}.source-review-result{display:grid;gap:8px;margin-top:12px;overflow-wrap:anywhere}.source-review-result:empty{display:none}.source-review-summary,.source-review-links{display:flex;flex-wrap:wrap;gap:8px}.source-review-counts{font-size:12px}.source-review-values{border:1px solid var(--line);padding:10px;min-width:0}.source-review-values h4{margin:0 0 7px;font-size:12px;font-weight:600}.source-review-values ol{margin:0;padding-left:20px}.source-review-values li+li{margin-top:10px}.source-review-cell{font-size:11px;color:var(--muted)}.source-review-value{margin-top:4px;white-space:pre-wrap;overflow-wrap:anywhere}.source-review-candidates summary{font-size:12px;cursor:pointer}.source-review-candidates .source-review-values{margin-top:9px}.source-review-blockers{margin:0;padding-left:18px;font-size:11px;color:var(--muted)} /* Customer photo viewer: full image, usable controls, bounded viewport. */ .customer-product-view{--viewer-photo-height:clamp(240px,calc(100dvh - 370px),820px);width:min(1180px,calc(100vw - 32px),calc(var(--viewer-photo-height)*var(--photo-aspect,1) + 38px));min-width:min(280px,calc(100vw - 32px));max-height:calc(100dvh - 32px)} .customer-product-view .modal-header{padding:14px 20px} .customer-product-view .customer-details{grid-template-columns:minmax(0,1fr);padding:14px 18px;gap:12px;align-items:start} .customer-gallery{min-width:0;display:grid;grid-template-columns:minmax(0,1fr);gap:10px;align-items:start} .customer-details .detail-main-image{width:100%;height:auto;aspect-ratio:var(--photo-aspect,1);max-height:var(--viewer-photo-height);position:relative;display:grid;place-items:center;background:#f8f8f8;overflow:hidden} .customer-details .detail-main-image img{position:absolute;inset:0;width:100%;height:100%;min-width:0;min-height:0;max-width:100%;max-height:100%;object-fit:contain;object-position:center} .detail-main-image[aria-busy=true]::before{content:'Loading photo…';position:absolute;color:#777;font-size:13px} .detail-image-count{position:absolute;bottom:8px;right:8px;background:rgba(255,255,255,.95);border:1px solid #ddd;padding:3px 8px;font-size:12px} .customer-product-view .customer-gallery .thumb-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(62px,1fr));gap:6px;max-height:156px;overflow-y:auto;overflow-x:hidden;padding:2px;margin:0} .customer-product-view .thumb{width:100%;height:74px;min-height:74px;padding:4px;cursor:pointer} .customer-product-view .thumb img{width:100%;height:100%;object-fit:contain} .customer-product-view .thumb.selected{border:2px solid #171717;padding:3px} .customer-product-view .thumb-index{font-size:10px;padding:1px 4px} @media(max-width:760px){ .customer-product-view{width:calc(100vw - 16px);max-height:calc(100dvh - 16px)} .customer-product-view .modal-header{padding:12px 14px} .customer-product-view .customer-details{grid-template-columns:minmax(0,1fr);padding:14px;gap:18px} .customer-details .detail-main-image{height:auto;max-height:clamp(260px,48dvh,480px)} .customer-product-view .customer-gallery{grid-template-columns:minmax(0,1fr);gap:0}.customer-product-view .customer-gallery .thumb-strip{grid-template-columns:repeat(auto-fit,minmax(62px,1fr));max-height:172px;margin-top:12px} .customer-product-view .thumb{height:68px;min-height:68px} } .customer-product-summary{min-width:0} .customer-product-view .customer-product-summary h2{margin:0 0 8px;font-size:15px} .customer-summary-row{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap} .customer-summary-row .product-meta{margin:0;gap:5px 10px;font-size:12px} .customer-summary-actions{display:flex;gap:10px;align-items:center} .customer-summary-actions button{min-height:30px;padding:5px 10px;font-size:12px} .customer-extra-details{font-size:11px;color:#777;margin-top:7px} .customer-extra-details summary{cursor:pointer} .customer-extra-details p{margin-top:7px} /* Match customer card frames to the photo instead of letterboxing portraits. */ .customer .image-stage{height:auto;aspect-ratio:2/3;background:#fff} .customer .image-stage img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain} .customer .product-card{align-self:start} .customer .product-meta:empty{display:none} .customer .card-bottom{margin-top:8px} .customer-inquiry-view{width:min(600px,calc(100vw - 24px));max-height:calc(100dvh - 24px)} .customer-inquiry-view .modal-header{padding:16px 20px}.customer-inquiry-view .modal-header h2{font-size:19px} .customer-inquiry-view .modal-content{padding:18px 20px;gap:12px}.inquiry-pieces{list-style:none;padding:0;margin:0;max-height:240px;overflow:auto} .inquiry-pieces li{padding:10px 0;border-bottom:1px solid var(--line)}.inquiry-pieces li:first-child{padding-top:0}.inquiry-pieces strong{font-size:15px}.inquiry-pieces p{margin:5px 0;font-size:12px} .inquiry-product-link{font-size:12px;text-underline-offset:3px}.inquiry-recipient{font-size:12px}.inquiry-message{border-top:1px solid var(--line);padding-top:12px;font-size:12px}.inquiry-message summary{cursor:pointer}.inquiry-message .field{margin:12px 0}.inquiry-message textarea{white-space:pre-wrap;overflow-wrap:anywhere;max-height:220px;resize:vertical;font-size:12px}.inquiry-message .selection-actions button{font-size:12px;min-height:32px} .inquiry-form{display:grid;gap:12px}.inquiry-contact-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}.inquiry-form input,.inquiry-form textarea{width:100%;font-size:14px}.inquiry-form textarea{resize:vertical;min-height:88px;max-height:200px}.inquiry-form>.primary{justify-self:start}.inquiry-feedback{color:#a32727;font-size:12px;line-height:1.5}.inquiry-form .muted{font-size:12px;line-height:1.5}.customer-inquiry-view .inquiry-pieces{max-height:150px}@media(max-width:480px){.inquiry-contact-fields{grid-template-columns:1fr}.customer-inquiry-view .modal-content{padding:15px}.inquiry-form>.primary{width:100%}} .inquiry-record{padding:16px 0;border-bottom:1px solid var(--line)}.inquiry-record p{margin-top:6px;overflow-wrap:anywhere}.inquiry-record ul{margin:12px 0;padding-left:20px}.inquiry-record-message{white-space:pre-wrap;overflow-wrap:anywhere;font-family:inherit;font-size:13px;line-height:1.6} .customer-piece-name{font-size:14px;font-weight:600;line-height:1.4;overflow-wrap:anywhere}.customer .card-parent{font-size:10px}.customer .page-heading{margin-bottom:20px}.customer .subtitle{max-width:620px} .customer-inquiry-view{width:min(560px,calc(100vw - 24px));border-radius:8px}.customer-inquiry-view .modal-header{background:#fff;padding:18px 22px}.customer-inquiry-view .modal-content{padding:18px 22px;gap:16px}.inquiry-intro{font-size:14px;line-height:1.6;color:#555} .inquiry-pieces li{display:flex;gap:14px;align-items:center;padding:12px;background:#f7f7f5;border:0;border-radius:5px}.inquiry-pieces li+li{margin-top:8px}.inquiry-pieces li:first-child{padding:12px}.inquiry-pieces strong{font-size:15px}.inquiry-pieces p{font-size:12px;color:#666}.inquiry-photo{flex:0 0 68px;width:68px;height:84px;background:#eee;overflow:hidden;border-radius:3px}.inquiry-photo img{width:100%;height:100%;object-fit:contain}.inquiry-pieces{max-height:210px} .inquiry-form{gap:16px}.inquiry-form .field{font-size:13px;font-weight:500;gap:7px}.inquiry-form input,.inquiry-form textarea{font-size:16px;min-height:44px;border-radius:4px;border-color:#c8c8c8;font-weight:400}.inquiry-form input:focus,.inquiry-form textarea:focus{outline:2px solid #222;outline-offset:2px}.inquiry-form textarea{min-height:94px}.inquiry-form .primary{min-height:46px;border-radius:4px;width:100%;font-size:15px}.inquiry-form .muted{text-align:center;font-size:12px;line-height:1.5}.inquiry-success{display:grid;gap:12px;text-align:center;padding:12px 0}.inquiry-success-icon{display:grid;place-items:center;justify-self:center;width:48px;height:48px;background:#e8f1e7;color:#255b25;border-radius:50%;font-size:26px}.inquiry-success h3{font-size:21px}.inquiry-success p{font-size:14px;overflow-wrap:anywhere}.inquiry-receipt{font-size:11px;color:#777}.inquiry-receipt code{display:block;overflow-wrap:anywhere;margin-top:8px}.inquiry-receipt summary{cursor:pointer} @media(max-width:480px){.customer-inquiry-view .modal-header{padding:16px}.customer-inquiry-view .modal-content{padding:16px;gap:14px}.inquiry-form{gap:13px}.inquiry-pieces li{gap:12px}.inquiry-photo{width:60px;flex-basis:60px;height:76px}} .customer-piece-name{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}.customer .toolbar input,.customer .toolbar select{font-size:16px;min-height:44px} /* Keep preview boxes stable before their image arrives. */ .thumb img{display:block;max-height:100%;aspect-ratio:auto} /* Inherit the live storefront font; keep mobile controls comfortable to read and tap. */ body,h1,h2,h3,button,input,select,textarea{font-family:inherit} @media(max-width:760px){ .customer{font-size:16px} .customer .shell{padding-inline:12px} .customer .masthead{height:60px;gap:12px} .customer .page-heading{margin:18px 0 16px} .customer .toolbar{gap:10px;padding:10px;flex-wrap:wrap} .customer .toolbar .search-field{flex-basis:100%} .customer .toolbar label{font-size:14px} .customer .toolbar select{width:100%} .customer .product-card{padding:9px} .customer .customer-piece-name{font-size:16px;line-height:1.3} .customer .card-bottom{gap:8px;flex-wrap:wrap} .customer button.small,.customer .customer-summary-actions button{min-height:44px;font-size:14px;padding:8px} .customer .customer-selection-control{min-height:44px} .customer .product-meta{font-size:13px} .customer .thumb{cursor:pointer} } /* CANONICAL CUSTOMER COMPONENT PARITY 2026-10-15 */ .customer.phase3-shell { --phase3-motion-fast:120ms; --phase3-motion-standard:180ms; --phase3-motion-slow:240ms; --phase3-motion-ease:cubic-bezier(.2,0,0,1); --phase3-motion-linear:linear; --field--input-color:#000; --field--input-background-color:#fff; font-size:16px; font-weight:400; line-height:1.5; letter-spacing:.5px; } .customer.phase3-shell button { font-family:inherit; font-weight:400; } .customer.phase3-shell .archive-button { min-height:38px; padding:0 10px; border:0; line-height:normal; gap:0; font-weight:400; letter-spacing:normal; } .customer.phase3-shell .archive-checkbox > .input { appearance:none; min-height:0; padding:0; margin:0; border:0; flex-shrink:0; } .customer.phase3-shell { --icon--image-checkbox:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyNCAyNCI+CiAgPHBhdGggZmlsbD0iIzAwMCIgZD0iTTIwLjMzMjUgMkw4LjMzMjQyIDEzLjk5NzQgMy42Njc3NSA5LjMzNDE3IDAgMTMuMDAxOGw4LjMzMjQ5IDguMzMxNEwyNCA1LjY2Nzc1IDIwLjMzMjUgMnoiLz4KPC9zdmc+Cg=="); } /* Exact live component rules, selector-scoped to the public customer root. */ .customer.phase3-shell .archive-button{position:relative;z-index:0;display:block;width:var(--button--width);height:38px;border-radius:2px;cursor:var(--cursor);contain:strict;color:var(--background-color);background-color:var(--background-background-color);box-shadow:0 0 0 1px var(--background-box-shadow-color) inset;text-align:center;font-size:14px} .customer.phase3-shell .archive-button:not(.is-disabled,.is-loading){--cursor:pointer} .customer.phase3-shell .archive-button.is-disabled,.customer.phase3-shell .archive-button.is-loading{--cursor:not-allowed} .customer.phase3-shell .archive-button:not(.is-loading){--loader-visibility:hidden;--loader-opacity:0} .customer.phase3-shell .archive-button.is-loading{--loader-visibility:inherit;--loader-opacity:1} .customer.phase3-shell .archive-button.appearance--fill,.customer.phase3-shell .archive-button.appearance--outline{--background-background-color:#fff;--foreground-box-shadow-color:#0000} .customer.phase3-shell .archive-button.appearance--fill:not(.is-disabled),.customer.phase3-shell .archive-button.appearance--outline:not(.is-disabled){--loader-color:#0000;--background-color:#313131;--background-box-shadow-color:#313131;--foreground-color:#fff;--foreground-background-color:#1c1c1c} .customer.phase3-shell .archive-button.appearance--fill:not(.is-disabled):hover,.customer.phase3-shell .archive-button.appearance--fill:not(.is-disabled):not(:hover),.customer.phase3-shell .archive-button.appearance--outline:not(.is-disabled):hover,.customer.phase3-shell .archive-button.appearance--outline:not(.is-disabled):not(:hover){--foreground-clip-path-y:100%} .customer.phase3-shell .archive-button.appearance--fill.is-disabled,.customer.phase3-shell .archive-button.appearance--outline.is-disabled{--background-box-shadow-color:#989898;--foreground-clip-path-y:100%} .customer.phase3-shell .archive-button.appearance--fill.is-disabled:not(.is-loading),.customer.phase3-shell .archive-button.appearance--outline.is-disabled:not(.is-loading){--background-color:#989898;--loader-color:#0000} .customer.phase3-shell .archive-button.appearance--fill.is-disabled.is-loading,.customer.phase3-shell .archive-button.appearance--outline.is-disabled.is-loading{--background-color:#0000;--loader-color:#989898} .customer.phase3-shell .archive-button.width--narrow{--button--width:48px} .customer.phase3-shell .archive-button.width--regular{--button--width:220px} .customer.phase3-shell .archive-button.width--flex{--button--width:100%} .customer.phase3-shell .archive-button.has-icon>.background:not(:empty):before,.customer.phase3-shell .archive-button.has-icon>.foreground:not(:empty):before{margin-right:8px} .customer.phase3-shell .archive-button.has-icon>.background:before,.customer.phase3-shell .archive-button.has-icon>.foreground:before{content:"";display:block;width:14px;height:14px;background-color:currentColor;mask-image:var(--icon);mask-size:contain;mask-position:center;mask-repeat:no-repeat;transition-property:background-color;transition-duration:.2s;transition-timing-function:ease-in} .customer.phase3-shell .archive-button:after{content:"";visibility:var(--loader-visibility);position:absolute;z-index:3;left:0;right:0;top:0;bottom:0;background-color:var(--loader-color);mask-image:var(--icon--image-loading);mask-size:20px;mask-position:center;mask-repeat:no-repeat;border-radius:inherit;opacity:var(--loader-opacity);transition-property:visibility,opacity;transition-duration:.2s;transition-timing-function:ease-in;contain:strict} .customer.phase3-shell .archive-button>.background,.customer.phase3-shell .archive-button>.foreground{position:absolute;left:0;right:0;top:0;bottom:0;display:flex;align-items:center;justify-items:center;place-items:center;align-content:center;justify-content:center;place-content:center;padding-left:8px;padding-right:8px;line-height:14px;font-size:14px;text-align:center;letter-spacing:1px;border-radius:inherit;pointer-events:none;contain:strict} .customer.phase3-shell .archive-button>.background{z-index:1;color:var(--background-color);background-color:var(--background-background-color);box-shadow:0 0 0 1px var(--background-box-shadow-color) inset;transition-property:color,background-color,box-shadow;transition-duration:.2s;transition-timing-function:ease-in} .customer.phase3-shell .archive-button>.foreground{z-index:2;color:var(--foreground-color);background-color:var(--foreground-background-color);box-shadow:0 0 0 1px var(--foreground-box-shadow-color) inset;clip-path:inset(var(--foreground-clip-path-y) 0 0 0);transition-property:color,background-color,box-shadow,clip-path;transition-duration:.2s;transition-timing-function:ease-in} .customer.phase3-shell .archive-button>.underline{display:inline-block;position:relative;z-index:0;cursor:pointer} .customer.phase3-shell .archive-button>.underline:not(:hover){--before-clip-path-width:0%} .customer.phase3-shell .archive-button>.underline:hover{--before-clip-path-width:50%} .customer.phase3-shell .archive-button>.underline:not(.is-permanent){--before-transition-delay:0;--after-opacity:0} .customer.phase3-shell .archive-button>.underline.is-permanent{--before-transition-delay:0.2s} .customer.phase3-shell .archive-button>.underline.is-permanent:not(:hover){--after-opacity:1} .customer.phase3-shell .archive-button>.underline.is-permanent:hover{--after-opacity:0} .customer.phase3-shell .archive-button>.underline:after,.customer.phase3-shell .archive-button>.underline:before{content:"";position:absolute;left:0;right:0;top:100%;height:1px;background-color:currentColor;transition-duration:.2s;transition-timing-function:ease-in;pointer-events:none;contain:strict} .customer.phase3-shell .archive-button>.underline:before{clip-path:polygon(0 0,var(--before-clip-path-width) 0,var(--before-clip-path-width) 100%,0 100%,100% 100%,calc(100% - var(--before-clip-path-width)) 100%,calc(100% - var(--before-clip-path-width)) 0,100% 0,100% 100%,0 100%,0 0);transition-property:clip-path;transition-delay:var(--before-transition-delay)} .customer.phase3-shell .archive-button>.underline:after{opacity:var(--after-opacity);transition-property:opacity} .customer.phase3-shell .archive-button+.button{margin-left:-1px} .customer.phase3-shell .phase3-search-dialog{position:fixed;z-index:45;top:16px;left:50%;display:grid;width:min(720px,calc(100vw - 32px));max-height:min(680px,calc(100vh - 32px));overflow:hidden;border:1px solid #cfcfcf;border-radius:3px;background:#fff;box-shadow:0 18px 48px #00000029;color:#1c1c1c;transform:translateX(-50%);animation:archive-search-enter var(--phase3-motion-fast) var(--phase3-motion-ease) both} .customer.phase3-shell .phase3-search-dialog>.search-bar{display:grid;grid-template-columns:24px minmax(0,1fr) auto auto;align-items:center;min-height:58px;grid-gap:8px;gap:8px;padding:8px 10px 8px 16px;border-bottom:1px solid #dedede} .customer.phase3-shell .phase3-search-dialog>.search-bar:focus-within{box-shadow:inset 0 0 0 2px #1c1c1c} .customer.phase3-shell .phase3-search-dialog>.search-bar>.search-icon{color:#555} .customer.phase3-shell .phase3-search-dialog>.search-bar>input{min-width:0;height:40px;border:0;padding:0 4px;outline:0;background:#0000;color:#1c1c1c;font:18px/24px TNYAdobeCaslonPro,Times New Roman,serif;letter-spacing:.35px} .customer.phase3-shell .phase3-search-dialog>.search-bar>input::placeholder{color:#767676} .customer.phase3-shell .phase3-search-dialog>.search-bar>input::-webkit-search-cancel-button{display:none} .customer.phase3-shell .phase3-search-dialog>.search-bar>button{display:grid;align-items:center;justify-items:center;place-items:center;width:36px;height:36px;border:1px solid #0000;border-radius:2px;background:#0000;color:#4c4c4c;cursor:pointer} .customer.phase3-shell .phase3-search-dialog>.search-bar>button:focus-visible,.customer.phase3-shell .phase3-search-dialog>.search-bar>button:hover{border-color:#767676;background:#ececec;outline:2px solid #1c1c1c;outline-offset:1px} .customer.phase3-shell .phase3-search-dialog>.results{min-height:166px;overflow:auto;padding:12px} .customer.phase3-shell .phase3-search-dialog>.results>.message{display:grid;align-content:center;min-height:138px;grid-gap:8px;gap:8px;padding:20px} .customer.phase3-shell .phase3-search-dialog>.results>.message>.eyebrow{color:#555;font:12px/16px Arial,sans-serif;letter-spacing:1.1px} .customer.phase3-shell .phase3-search-dialog>.results>.message>p{max-width:480px;color:#333;font:17px/23px TNYAdobeCaslonPro,Times New Roman,serif} .customer.phase3-shell .phase3-search-dialog>.results>.message>button{justify-self:start;border:0;border-bottom:1px solid;padding:4px 0 2px;background:#0000;color:#1c1c1c;cursor:pointer;font:inherit} .customer.phase3-shell .phase3-search-dialog>.results>.message>button:focus-visible{outline:2px solid #1c1c1c;outline-offset:3px} .customer.phase3-shell .phase3-search-dialog>.results>.skeleton{display:grid;grid-gap:8px;gap:8px} .customer.phase3-shell .phase3-search-dialog>.results>.skeleton>span{display:block;height:72px;background:linear-gradient(90deg,#f2f2f2,#fafafa 50%,#f2f2f2);background-size:200% 100%;animation:archive-search-loading 1s linear infinite} .customer.phase3-shell .phase3-search-dialog>.results>.product-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:1px;gap:1px;background:#dedede} .customer.phase3-shell .phase3-search-dialog>.results>.product-list>li{min-width:0;background:#fff} .customer.phase3-shell .phase3-search-dialog{.SearchDialog_product__qTgyA{display:grid;grid-template-columns:72px minmax(0,1fr);align-items:center;min-height:96px;grid-gap:14px;gap:14px;padding:12px;color:#1c1c1c;text-decoration:none}.SearchDialog_product__qTgyA:focus-visible,.SearchDialog_product__qTgyA:hover{background:#f4f4f4;outline:1px solid grey;outline-offset:-1px}.SearchDialog_product__qTgyA>.SearchDialog_image__K8dpB{display:grid;align-items:center;justify-items:center;place-items:center;width:72px;height:72px;overflow:hidden;background:#f6f6f6}.SearchDialog_product__qTgyA>.SearchDialog_image__K8dpB>img{width:100%;height:100%;object-fit:contain}.SearchDialog_product__qTgyA>.SearchDialog_product-copy__lpaar{display:grid;min-width:0;grid-gap:3px;gap:3px}.SearchDialog_product__qTgyA>.SearchDialog_product-copy__lpaar>.SearchDialog_price__lhZCx,.SearchDialog_product__qTgyA>.SearchDialog_product-copy__lpaar>.SearchDialog_vendor__1mG0b{color:#626262;font-size:12px;line-height:16px}.SearchDialog_product__qTgyA>.SearchDialog_product-copy__lpaar>strong{overflow:hidden;font-size:14px;font-weight:400;line-height:18px;text-overflow:ellipsis}.SearchDialog_visually-hidden__YzXmZ{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;clip-path:inset(50%)}} @media (max-width:767px){ .customer.phase3-shell .phase3-search-dialog{top:8px;width:calc(100vw - 16px);max-height:calc(100vh - 16px)} .customer.phase3-shell .phase3-search-dialog>.results>.product-list{grid-template-columns:minmax(0,1fr)} } .customer.phase3-shell{--phase3-sidebar-collapsed:57px;--phase3-sidebar-expanded:216px;--phase3-sidebar-width:var(--phase3-sidebar-collapsed);--phase3-leading-track:36px;--phase3-brand-width:0px;--phase3-brand-gap:0px;min-height:100vh;color:#1c1c1c;background:#fff} .customer.phase3-shell.is-expanded{--phase3-sidebar-width:var(--phase3-sidebar-expanded);--phase3-brand-width:141px;--phase3-brand-gap:8px} .customer.phase3-shell:not(.is-ready)>.page,.customer.phase3-shell:not(.is-ready)>.sidebar{transition:none} @media (min-width:1024px){ .customer.phase3-shell:not(.is-ready){--phase3-sidebar-width:var(--phase3-sidebar-expanded);--phase3-brand-width:141px;--phase3-brand-gap:8px} .customer.phase3-shell:not(.is-ready)>.sidebar .account-button>.account-copy,.customer.phase3-shell:not(.is-ready)>.sidebar .brand-row>.brand,.customer.phase3-shell:not(.is-ready)>.sidebar .expanded-navigation,.customer.phase3-shell:not(.is-ready)>.sidebar .navigation-item>span{opacity:1} .customer.phase3-shell:not(.is-ready)>.sidebar .navigation-item>span{display:block} .customer.phase3-shell:not(.is-ready)>.sidebar .account-button>.account-copy{display:grid} } .customer.phase3-shell>.sidebar{position:fixed;z-index:1;inset:0 auto 0 0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;box-sizing:border-box;width:var(--phase3-sidebar-width);border-right:1px solid #dedede;padding:12px 10px;background:#fff;transition:width var(--phase3-motion-standard) var(--phase3-motion-ease)} .customer.phase3-shell>.sidebar .brand-row{display:grid;grid-template-columns:var(--phase3-leading-track) minmax(0,1fr);grid-column-gap:var(--phase3-brand-gap);column-gap:var(--phase3-brand-gap);align-items:center;min-height:48px} .customer.phase3-shell>.sidebar .brand-row>:first-child{width:var(--phase3-leading-track);min-width:0} .customer.phase3-shell>.sidebar .brand-row>.brand{overflow:hidden;width:var(--phase3-brand-width);max-width:100%;opacity:0;transition:width var(--phase3-motion-standard) var(--phase3-motion-ease),opacity var(--phase3-motion-fast) linear} .customer.phase3-shell>.sidebar .brand-row>.brand img{display:block;width:141px;max-width:100%;height:38px;object-fit:contain} .customer.phase3-shell>.sidebar .account-button,.customer.phase3-shell>.sidebar .icon-button,.customer.phase3-shell>.sidebar .navigation-item{border:0;color:inherit;background:#0000;cursor:pointer;font-family:inherit} .customer.phase3-shell>.sidebar .icon-button{position:relative;display:grid;flex-shrink:0;align-items:center;justify-items:center;place-items:center;width:36px;height:36px;border-radius:0} .customer.phase3-shell>.sidebar .icon-button:before{position:absolute;top:50%;left:50%;width:36px;height:36px;content:"";transform:translate(-50%,-50%);background:#0000;transition:background-color var(--phase3-motion-fast) linear;pointer-events:none} .customer.phase3-shell>.sidebar .icon-button>svg{position:relative} .customer.phase3-shell>.sidebar .icon-button:focus-visible:before,.customer.phase3-shell>.sidebar .icon-button:hover:before{background:#f1f1f1} .customer.phase3-shell>.sidebar .account-button:focus-visible,.customer.phase3-shell>.sidebar .icon-button:focus-visible,.customer.phase3-shell>.sidebar .navigation-item:focus-visible{outline:2px solid #1c1c1c;outline-offset:-2px} .customer.phase3-shell>.sidebar .sidebar-content{min-height:0;min-width:0;overflow:hidden auto;overscroll-behavior:contain;scrollbar-width:thin} .customer.phase3-shell>.sidebar .primary-navigation{display:grid;align-content:start;grid-gap:2px;gap:2px;margin-top:14px} .customer.phase3-shell>.sidebar .navigation-item{display:grid;grid-template-columns:var(--phase3-leading-track) minmax(0,1fr);align-items:center;width:100%;min-width:0;min-height:36px;padding:0;font-size:14px;line-height:18px;letter-spacing:1px;text-align:left;text-decoration:none;border-radius:0} .customer.phase3-shell>.sidebar .navigation-item:focus-visible,.customer.phase3-shell>.sidebar .navigation-item:hover{background:#f1f1f1} .customer.phase3-shell>.sidebar .navigation-item>svg{justify-self:center} .customer.phase3-shell>.sidebar .navigation-item>span{display:none;min-width:0;overflow-wrap:anywhere;opacity:0;transition:opacity var(--phase3-motion-fast) linear} .customer.phase3-shell>.sidebar .expanded-navigation{display:block;min-height:0;overflow:hidden;margin:14px 0 0;opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--phase3-motion-fast) linear} .customer.phase3-shell>.sidebar .expanded-navigation:empty{display:none} .customer.phase3-shell>.sidebar .catalogue-filter-form{display:block;width:100%;height:auto;min-height:0} .customer.phase3-shell>.sidebar .catalogue-filter-form>.wrapper{display:block;height:auto;min-height:0} .customer.phase3-shell>.sidebar .catalogue-filter-form>.wrapper>.scroll{display:grid;align-content:start;grid-row-gap:12px;row-gap:12px;overflow:visible;min-height:0;max-height:none;padding:0 8px 16px 0} .customer.phase3-shell>.sidebar .catalogue-filter-form label.field{grid-template-columns:var(--phase3-leading-track) minmax(0,1fr);grid-column-gap:0;column-gap:0;min-width:0;min-height:24px} .customer.phase3-shell>.sidebar .catalogue-filter-form label.field>.input{justify-self:center} .customer.phase3-shell>.sidebar .catalogue-filter-form label.field>.caption{min-width:0;overflow-wrap:anywhere;white-space:normal} .customer.phase3-shell>.sidebar .catalogue-filter-form .section>.header{grid-template-columns:minmax(0,1fr) auto auto;height:auto;min-height:24px} .customer.phase3-shell>.sidebar .catalogue-filter-form .section>.header>.title-button{min-width:0;overflow-wrap:anywhere;text-align:left} .customer.phase3-shell>.sidebar .catalogue-filter-form .divider{display:block;height:1px;margin:0;border:0;background:#e5e5e5} .customer.phase3-shell>.sidebar .catalogue-filter-form .applied-filters:not(.is-shown){display:none} .customer.phase3-shell>.sidebar .catalogue-filter-form .section>.list>.link{display:grid;justify-items:start;align-content:center;min-height:18px;line-height:1.2;font-size:14px;font-weight:300;letter-spacing:1px;color:#1c1c1c;cursor:pointer} .customer.phase3-shell>.sidebar .catalogue-filter-form .section>.list>.link.is-selected{font-weight:700;pointer-events:none} .customer.phase3-shell>.sidebar .catalogue-filter-form .section-department>.list.is-shown{overflow:visible;max-height:none} .customer.phase3-shell>.sidebar .sidebar-footer{display:grid;grid-gap:6px;gap:6px;align-self:end} .customer.phase3-shell>.sidebar .account-button{display:grid;grid-template-columns:var(--phase3-leading-track) minmax(0,1fr);align-items:center;width:100%;min-width:0;min-height:38px;padding:0;font-size:14px;text-align:left;text-decoration:none;border-radius:0} .customer.phase3-shell>.sidebar .account-button:focus-visible,.customer.phase3-shell>.sidebar .account-button:hover,.customer.phase3-shell>.sidebar .account-button[aria-expanded=true]{background:#f1f1f1} .customer.phase3-shell>.sidebar .account-button>.account-icon{display:grid;align-items:center;justify-items:center;place-items:center;width:var(--phase3-leading-track);height:36px;margin:0;border:0;border-radius:0} .customer.phase3-shell>.sidebar .account-button>.account-copy{display:none;grid-gap:2px;gap:2px;min-width:0;opacity:0} .customer.phase3-shell>.sidebar .account-button>.account-copy>small,.customer.phase3-shell>.sidebar .account-button>.account-copy>strong{min-width:0;overflow-wrap:anywhere} .customer.phase3-shell>.sidebar .account-button>.account-copy>strong{font-size:14px;font-weight:400;line-height:16px;letter-spacing:1px} .customer.phase3-shell>.sidebar .account-button>.account-copy>small{font-size:11px;line-height:14px;color:#6d6d6d} .customer.phase3-shell>.page{display:block;width:auto;min-width:0;min-height:100vh;margin-left:var(--phase3-sidebar-width);transition:margin-left var(--phase3-motion-standard) var(--phase3-motion-ease)} .customer.phase3-shell>.page .suggestions{min-width:min(100%,calc(100vw - 60px));max-width:100%} .customer.phase3-shell>.mobile-dismiss,.customer.phase3-shell>.page>.mobile-bar{display:none} .customer.phase3-shell>.sidebar .account-menu,.customer.phase3-shell>.sidebar .help-menu,.customer.phase3-shell>.sidebar .settings-menu{position:fixed;z-index:24;left:14px;bottom:78px;width:244px} .customer.phase3-shell>.sidebar .anonymous-account-copy{display:grid;grid-gap:8px;gap:8px;padding:12px} .customer.phase3-shell>.sidebar .anonymous-account-copy>strong{font-size:15px} .customer.phase3-shell>.sidebar .anonymous-account-copy>button,.customer.phase3-shell>.sidebar .anonymous-account-copy>p{font-size:13px} .customer.phase3-shell>.sidebar .anonymous-account-copy>p{line-height:18px;color:#666} .customer.phase3-shell>.sidebar .anonymous-account-copy>button{min-height:38px;border:1px solid #1c1c1c;background:#fff;cursor:pointer} .customer.phase3-shell>.sidebar .anonymous-account-copy>button:focus-visible:not(:disabled),.customer.phase3-shell>.sidebar .anonymous-account-copy>button:hover:not(:disabled){color:#fff;background:#1c1c1c} .customer.phase3-shell>.sidebar .anonymous-account-copy>button:focus-visible{outline:2px solid #1c1c1c;outline-offset:2px} .customer.phase3-shell>.sidebar .anonymous-account-copy>button:disabled{cursor:not-allowed;opacity:.45} .customer.phase3-shell>.sidebar .menu-error,.customer.phase3-shell>.sidebar .menu-heading,.customer.phase3-shell>.sidebar .menu-note{padding:8px 12px} .customer.phase3-shell>.sidebar .menu-heading{font-weight:700;letter-spacing:.04em;text-transform:uppercase} .customer.phase3-shell>.sidebar .menu-note{line-height:17px;color:#666} .customer.phase3-shell>.sidebar .menu-error{line-height:17px;color:#8d1d15} .customer.phase3-shell.is-expanded>.sidebar .brand-row>.brand{opacity:1} .customer.phase3-shell.is-expanded>.sidebar .navigation-item>span{display:block} .customer.phase3-shell.is-expanded>.sidebar .account-button>.account-copy{display:grid} .customer.phase3-shell.is-expanded>.sidebar .account-button>.account-copy,.customer.phase3-shell.is-expanded>.sidebar .expanded-navigation,.customer.phase3-shell.is-expanded>.sidebar .navigation-item>span{opacity:1} .customer.phase3-shell.is-expanded>.sidebar .expanded-navigation{visibility:visible;pointer-events:auto} @media (min-width:1024px){ .customer.phase3-shell>.page .breadcrumbs{padding-right:60px;overflow-wrap:anywhere} .customer.phase3-shell>.page main>.page-intro:first-child{min-width:0;padding-right:60px;overflow-wrap:anywhere} } @media (pointer:coarse){ .customer.phase3-shell>.sidebar .account-button,.customer.phase3-shell>.sidebar .navigation-item{min-height:44px} .customer.phase3-shell>.sidebar .icon-button{width:44px;height:44px;margin-left:-4px} } @media (max-width:1023px){ .customer.phase3-shell>.sidebar{z-index:31;width:min(86vw,340px);border-right-color:#c8c8c8;padding:14px;transform:translateX(-102%);transition:transform var(--phase3-motion-standard) var(--phase3-motion-ease);--phase3-brand-width:141px;--phase3-brand-gap:8px} .customer.phase3-shell>.sidebar .brand-row>.brand{opacity:1} .customer.phase3-shell>.sidebar .navigation-item>span{display:block;opacity:1} .customer.phase3-shell>.sidebar .account-button>.account-copy{display:grid;opacity:1} .customer.phase3-shell>.sidebar .account-button,.customer.phase3-shell>.sidebar .navigation-item{min-height:44px} .customer.phase3-shell>.sidebar .icon-button{width:44px;height:44px;margin-left:-4px} .customer.phase3-shell>.sidebar .expanded-navigation{opacity:1} .customer.phase3-shell.is-expanded>.page,.customer.phase3-shell>.page{margin-left:0} .customer.phase3-shell>.page>.mobile-bar{position:sticky;z-index:1;top:0;display:grid;grid-template-columns:44px minmax(0,1fr) 44px 44px;grid-column-gap:8px;column-gap:8px;align-items:center;box-sizing:border-box;min-height:calc(69px + env(safe-area-inset-top, 0px));border-bottom:1px solid #e1e1e1;padding:calc(6px + env(safe-area-inset-top, 0px)) calc(12px + env(safe-area-inset-right, 0px)) 6px calc(10px + env(safe-area-inset-left, 0px));background:#fffffff5;backdrop-filter:blur(12px)} .customer.phase3-shell>.page>.mobile-bar>a{justify-self:center;min-width:0;max-width:100%} .customer.phase3-shell>.page>.mobile-bar>a>img{display:block;width:141px;max-width:100%;height:38px;object-fit:contain} .customer.phase3-shell>.page>.mobile-bar>.icon-button{display:grid;align-items:center;justify-items:center;place-items:center;width:44px;height:44px;border:0;background:#0000} .customer.phase3-shell>.mobile-dismiss{position:fixed;z-index:29;inset:0;display:block;border:0;pointer-events:none;background:#00000038;opacity:0;transition:opacity var(--phase3-motion-standard) var(--phase3-motion-ease)} .customer.phase3-shell.is-expanded>.sidebar{width:min(86vw,340px);transform:translateX(0)} .customer.phase3-shell.is-expanded>.mobile-dismiss{pointer-events:auto;opacity:1} .customer.phase3-shell>.sidebar .account-menu,.customer.phase3-shell>.sidebar .help-menu,.customer.phase3-shell>.sidebar .settings-menu{z-index:35;right:18px;left:18px;bottom:78px;width:auto;max-height:calc(100vh - 120px);overflow:auto} } @media (prefers-reduced-motion:reduce){ .customer.phase3-shell>.page,.customer.phase3-shell>.sidebar,.customer.phase3-shell>.sidebar .brand-row>.brand,.customer.phase3-shell>.sidebar .expanded-navigation,.customer.phase3-shell>.sidebar .navigation-item>span{transition-duration:.01ms!important} } .customer.phase3-shell .page-intro{display:grid;grid-row-gap:8px;row-gap:8px} .customer.phase3-shell .page-intro>.title{line-height:1.15;font-size:24px;font-weight:400;letter-spacing:1px} .customer.phase3-shell .page-intro>.subtitle{max-width:760px;line-height:1.5;font-size:14px} .customer.phase3-shell .archive-checkbox{display:grid;grid-column-gap:8px;column-gap:8px;grid-template-columns:auto 1fr;align-items:center;cursor:pointer} .customer.phase3-shell .archive-checkbox:not(:focus-within){--input-box-shadow-color:#e5e5e5} .customer.phase3-shell .archive-checkbox:focus-within{--input-box-shadow-color:#4b4b4b} .customer.phase3-shell .archive-checkbox>.input{--size:12px;display:grid;align-content:center;justify-content:center;place-content:center;width:var(--size);height:var(--size);background-color:var(--field--input-background-color);border-radius:1px;box-shadow:0 0 0 1px var(--input-box-shadow-color) inset;transition-property:background-color,box-shadow;transition-duration:.2s;transition-timing-function:ease-in;cursor:pointer} .customer.phase3-shell .archive-checkbox>.input:not(:checked){--pseudo-opacity:0} .customer.phase3-shell .archive-checkbox>.input:checked{--pseudo-opacity:1} .customer.phase3-shell .archive-checkbox>.input:after,.customer.phase3-shell .archive-checkbox>.input:before{content:"";grid-area:1/1/-1/-1;width:inherit;height:inherit;border-radius:inherit;opacity:var(--pseudo-opacity);transition-property:opacity;transition-duration:.2s;transition-timing-function:ease-in;pointer-events:none} .customer.phase3-shell .archive-checkbox>.input:before{background-color:#1c1c1c} .customer.phase3-shell .archive-checkbox>.input:after{background-color:#fff;mask-image:var(--icon--image-checkbox);mask-size:6px;mask-position:center;mask-repeat:no-repeat} .customer.phase3-shell .archive-checkbox>.caption{line-height:16px;font-size:14px;letter-spacing:1px;text-transform:none!important;color:var(--field--input-color)} .customer.phase3-shell .facet-section{display:grid;grid-row-gap:var(--row-gap);row-gap:var(--row-gap);transition-property:row-gap;transition-duration:.2s;transition-timing-function:ease-in} .customer.phase3-shell .facet-section:not(.is-collapsed){margin-bottom:6px;--row-gap:12px;--header-icons-chevron-rotate:180deg} .customer.phase3-shell .facet-section.is-collapsed{--row-gap:0;--header-icons-chevron-rotate:0deg} .customer.phase3-shell .facet-section>.header{position:relative;display:grid;grid-column-gap:8px;column-gap:8px;grid-template-columns:1fr auto auto;align-items:center;width:100%;height:24px} .customer.phase3-shell .facet-section>.header>.title-button{line-height:1.2;font-size:14px;font-weight:500;letter-spacing:1px;color:#1c1c1c;cursor:pointer} .customer.phase3-shell .facet-section>.header>.title-button:before{content:"";position:absolute;left:0;right:0;top:0;bottom:0} .customer.phase3-shell .facet-section>.header>.title-button>.counter{display:inline-block;width:16px;height:14px;margin-left:8px;line-height:14px;text-align:center;background-color:#e5e5e5;border-radius:1px;transform:translateY(var(--translate-y));opacity:var(--opacity);transition-property:transform,opacity;transition-duration:.2s;transition-timing-function:ease-in;pointer-events:var(--pointer-events)} .customer.phase3-shell .facet-section>.header>.title-button>.counter:not(.is-shown){--translate-y:4px;--opacity:0;--pointer-events:none} .customer.phase3-shell .facet-section>.header>.title-button>.counter.is-shown{--translate-y:0;--opacity:1;--pointer-events:inherit} .customer.phase3-shell .facet-section>.header>.clear-button{z-index:1;transform:translateY(var(--translate-y));opacity:var(--opacity);transition-property:transform,opacity;transition-duration:.2s;transition-timing-function:ease-in;pointer-events:var(--pointer-events)} .customer.phase3-shell .facet-section>.header>.clear-button:not(.is-shown){--translate-y:4px;--opacity:0;--pointer-events:none} .customer.phase3-shell .facet-section>.header>.clear-button.is-shown{--translate-y:0;--opacity:1;--pointer-events:inherit} .customer.phase3-shell .facet-section>.header>.clear-button>.button{appearance:none;display:block;line-height:16px;font-size:14px;letter-spacing:1px;color:var(--color);transition-property:color;transition-duration:.2s;transition-timing-function:ease-in} .customer.phase3-shell .facet-section>.header>.clear-button>.button:not(:hover){--color:#777} .customer.phase3-shell .facet-section>.header>.clear-button>.button:hover{--color:#000} .customer.phase3-shell .facet-section>.header>.icons{display:grid} .customer.phase3-shell .facet-section>.header>.icons>.icon{--icon--color:#777;--icon--size:9px;transform:rotate(var(--header-icons-chevron-rotate));transition-property:transform} .customer.phase3-shell .facet-section>.list{overflow:hidden;display:grid;grid-row-gap:12px;row-gap:12px;max-height:var(--max-height);transition-property:max-height;transition-duration:.2s;transition-timing-function:ease-in} .customer.phase3-shell .facet-section>.list:not(.is-shown){--max-height:0} .customer.phase3-shell .facet-section>.list.is-shown{--max-height:none} /* Self-hosted, open-source typography; no third-party runtime font requests. */ @font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:400 600; font-display:swap; src:url('/archive/fonts/JetBrainsMono-Latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:400 600; font-display:swap; src:url('/archive/fonts/JetBrainsMono-LatinExt.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Archive card schema follows ProductCard/section/form. Archive-specific differences: retained detail strip, visible Inquire, and native photo aspect. Typography is unified to JetBrains Mono throughout the archive. */ body:has(> #app.customer.phase3-shell) { font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Consolas,monospace; font-size:12px; font-weight:400; line-height:1.5; letter-spacing:0; } .customer.phase3-shell .visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } .customer.phase3-shell { --archive-body-font:'JetBrains Mono',ui-monospace,SFMono-Regular,Consolas,monospace; --archive-heading-font:var(--archive-body-font); font-family:var(--archive-body-font); font-size:12px; font-weight:400; line-height:1.5; letter-spacing:0; } /* Explicit archive-wide override: every text component uses the same family. */ .customer.phase3-shell, .customer.phase3-shell * { font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Consolas,monospace!important; } .customer.phase3-shell :is(button,input,textarea,select,small,summary) { font-family:var(--archive-body-font); letter-spacing:0; } .customer.phase3-shell :is(h1,h2,h3,h4,.page-intro>.title,.facet-heading,.facet-section>.header>.title-button) { font-family:var(--archive-heading-font); letter-spacing:0; } .customer.phase3-shell > .sidebar .icon-button, .customer.phase3-shell > .page > .mobile-bar .icon-button { min-height:36px; padding:0; } .customer.phase3-shell > .sidebar .navigation-item { justify-content:initial; gap:0; min-height:34px; font-size:12px; letter-spacing:0; } .customer.phase3-shell > .sidebar .primary-navigation { gap:0; margin-top:8px; } .customer.phase3-shell > .sidebar .brand-row { min-height:42px; } .customer.phase3-shell .phase3-icon { display:block; width:18px; height:18px; flex-shrink:0; justify-self:center; } .customer.phase3-shell > .sidebar .brand-row > .brand { display:block; } .customer.phase3-shell > .sidebar .expanded-navigation { overflow:hidden; margin-top:12px; } .customer.phase3-shell .archive-filters { display:grid; grid-template-rows:auto auto; height:auto; min-height:0; gap:10px; } .customer.phase3-shell .archive-filters > .facets { min-height:0; min-width:0; overflow:visible; display:grid; grid-auto-rows:max-content; align-content:start; row-gap:10px; padding:0 4px 12px 0; } .customer.phase3-shell .archive-filters > .facet-section { min-height:0; } .customer.phase3-shell .facet-section:not(.is-collapsed) { --row-gap:6px; margin-bottom:0; } .customer.phase3-shell .facet-section > .header { min-height:30px; height:auto; } .customer.phase3-shell .facet-section > .header > .title-button { position:relative; display:block; border:0; padding:0; min-height:30px; width:100%; background:transparent; text-align:left; font-size:12px; font-weight:500; letter-spacing:0; } .customer.phase3-shell .facet-section > .header > .title-button::before { pointer-events:none; } .customer.phase3-shell .facet-section > .header > .clear-button { position:relative; min-height:30px; padding:0; border:0; background:transparent; font-size:11px; color:#666; } .customer.phase3-shell .facet-section > .header > .icons { width:9px; height:9px; color:#777; pointer-events:none; transform:rotate(180deg); transition:transform 180ms ease-in; } .customer.phase3-shell .facet-section.is-collapsed > .header > .icons { transform:rotate(0deg); } /* Wrapped names determine their own row height inside the shared sidebar. Grid auto tracks previously compressed labels to their 24px minimum. */ .customer.phase3-shell .facet-section > .list { display:flex; flex-direction:column; align-items:stretch; gap:0; min-height:0; min-width:0; max-width:100%; overflow:hidden; } .customer.phase3-shell .facet-section > .list.is-shown { --max-height:none; overflow:visible; } .customer.phase3-shell > .sidebar .catalogue-filter-form .facet-section > .list > label.field.archive-checkbox { display:grid; flex:0 0 auto; grid-template-columns:28px minmax(0,1fr); gap:0; align-items:start; align-content:start; width:100%; height:auto; min-height:auto; max-height:none; margin:0; padding:6px 0; } .customer.phase3-shell > .sidebar .catalogue-filter-form .facet-section > .list > label.field.archive-checkbox > .input { justify-self:center; align-self:start; margin-block-start:2px; } .customer.phase3-shell > .sidebar .catalogue-filter-form .facet-section > .list > label.field.archive-checkbox > .caption { display:block; min-width:0; height:auto; min-height:0; max-height:none; margin:0; padding:0; line-height:1.45; white-space:normal; overflow-wrap:anywhere; word-break:normal; } .customer.phase3-shell .archive-checkbox > .input { --size:14px; border-radius:0; } .customer.phase3-shell .archive-checkbox > .caption { min-width:0; overflow-wrap:anywhere; white-space:normal; font-size:12px; line-height:1.45; letter-spacing:0; } .customer.phase3-shell .facet-count { display:inline-block; white-space:nowrap; color:#777; font-size:11px; margin-left:5px; } .customer.phase3-shell .applied-filters { display:flex; gap:4px; flex-wrap:wrap; } .customer.phase3-shell .applied-filters:empty { display:none; } .customer.phase3-shell .applied-filters > .wrapper { --gap:4px; display:flex; flex-wrap:wrap; align-items:center; margin:-2px; } .customer.phase3-shell .applied-filters > .wrapper > .item { margin:2px; } .customer.phase3-shell .applied-filters .clear-all { contain:layout paint style; display:block; width:auto; min-height:28px; height:28px; margin:2px; padding:0 4px; border:0; box-shadow:none; background:transparent; color:#666; font-size:11px; line-height:16px; letter-spacing:0; } .customer.phase3-shell .applied-filters .clear-all:hover { color:#000; } .customer.phase3-shell .filter-chip { overflow:hidden; position:relative; z-index:0; display:inline-grid; grid-auto-flow:column; align-items:center; gap:6px; min-height:28px; height:28px; padding:0 7px; border:0; box-shadow:0 0 0 1px #ddd inset; border-radius:0; background:#fff; color:#1c1c1c; font-size:11px; line-height:16px; letter-spacing:0; } .customer.phase3-shell .filter-chip > .filter-remove { display:block; width:10px; height:10px; min-height:0; padding:0; border:0; box-shadow:none; background:transparent; } .customer.phase3-shell .filter-chip > .filter-remove::before { content:''; position:absolute; inset:0; } .customer.phase3-shell .filter-chip > .filter-remove .phase3-icon { width:10px; height:10px; } .customer.phase3-shell .facet-heading { margin:0 0 6px; font-size:12px; font-weight:500; line-height:1.4; letter-spacing:0; } .customer.phase3-shell .section-department > .list { display:flex; gap:16px; padding-bottom:8px; } .customer.phase3-shell > .sidebar .catalogue-filter-form .section-department > .list > .link { display:inline-block; min-height:28px; font-size:12px; line-height:28px; letter-spacing:0; text-decoration:none; } .customer.phase3-shell > .sidebar .catalogue-filter-form .section-department > .list > .link.is-selected { font-weight:500; text-decoration:underline; text-underline-offset:4px; } .customer.phase3-shell .facet-empty { font-size:11px; line-height:1.5; color:#777; } .customer.phase3-shell .archive-checkbox:has(> .input:disabled) { --field--input-background-color:#eee; color:#777; cursor:not-allowed; } .customer.phase3-shell .sidebar-footer { border-top:1px solid #e5e5e5; padding-top:8px; } .customer.phase3-shell .sidebar-footer a { color:#1c1c1c; font-size:11px; line-height:16px; letter-spacing:0; text-decoration:none; } .customer.phase3-shell > .page > .shell { max-width:none; width:100%; padding:20px 24px 28px; margin:0; } .customer.phase3-shell .page-intro { gap:5px; margin:0 0 16px; } .customer.phase3-shell .page-intro > .title { font-size:22px; font-weight:500; line-height:1.2; letter-spacing:-.025em; } .customer.phase3-shell .page-intro > .subtitle { margin:0; color:#555; font-size:12px; line-height:1.5; } .customer.phase3-shell .resultbar { min-height:34px; margin-bottom:12px; font-size:11px; line-height:16px; letter-spacing:0; color:#666; } /* The admin .pagination span rule must not impose 70px on Button layers. */ .customer.phase3-shell .pagination { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:3px; } .customer.phase3-shell .pagination span { min-width:0; width:auto; } .customer.phase3-shell .pagination > .page-status { margin:0 8px; font-size:11px; white-space:nowrap; } .customer.phase3-shell .pagination :is(.archive-button,.page-control) { contain:layout paint style; display:inline-flex; align-items:center; justify-content:center; width:32px; min-width:32px; height:32px; min-height:32px; margin:0; padding:0; border:1px solid transparent; border-radius:0; box-shadow:none; background:transparent; color:#333; font-size:12px; line-height:1; } .customer.phase3-shell .pagination :is(.archive-button,.page-control):hover:not(:disabled) { background:#f4f4f4; border-color:#ddd; } .customer.phase3-shell .pagination :is(.archive-button,.page-control)[aria-current=page] { border-color:#1c1c1c; color:#fff; background:#1c1c1c; } .customer.phase3-shell .pagination :is(.archive-button,.page-control):disabled { opacity:.3; } .customer.phase3-shell .pagination .archive-button > :is(.background,.foreground) { min-width:0; width:auto; padding:0; font-size:12px; letter-spacing:0; } .customer.phase3-shell .pagination :is(.page-ellipsis,.page-gap) { display:grid; place-items:center; width:20px; min-width:0; font-size:11px; } .customer.phase3-shell .pagination .phase3-icon { width:14px; height:14px; } .customer.phase3-shell .pagination .previous svg { transform:rotate(180deg); } .customer.phase3-shell .bottom-pagination { justify-content:center; margin:20px 0 0; } .customer.phase3-shell .grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px 14px; align-items:start; } .customer.phase3-shell .grid[aria-busy=true] { opacity:.5; transition:opacity 150ms ease-in; } .customer.phase3-shell .archive-product-card { display:block; position:relative; min-width:0; border:0; padding:0; border-radius:1px; background:#fff; } .customer.phase3-shell .archive-product-card::before { content:''; position:absolute; inset:0; border-radius:inherit; box-shadow:0 0 0 1px #d8d8d8,0 2px 6px rgb(0 0 0 / 18%); opacity:0; transition:opacity 150ms ease-in; pointer-events:none; } .customer.phase3-shell .archive-product-card .image-stage { display:block; position:relative; width:100%; height:auto; aspect-ratio:var(--card-photo-aspect,2/3); margin:0; padding:0; background:#fff; overflow:hidden; } .customer.phase3-shell .archive-product-card .image-stage img { position:absolute; inset:0; width:100%; height:100%; max-width:100%; max-height:100%; margin:0; padding:0; object-fit:contain; object-position:center; background:#fff; } .customer.phase3-shell .archive-product-card .image-count { font-size:9px; line-height:1.4; padding:1px 4px; bottom:5px; right:5px; } .customer.phase3-shell .archive-product-card .thumb-strip { margin:6px 0 0; padding:0 0 3px; min-height:34px; gap:3px; scrollbar-width:thin; } .customer.phase3-shell .archive-product-card .thumb { cursor:pointer; min-height:32px; height:32px; flex:0 0 32px; padding:0; border:1px solid #e5e5e5; border-radius:0; background:#fff; } .customer.phase3-shell .archive-product-card .thumb.selected { border-color:#1c1c1c; } .customer.phase3-shell .archive-product-card .thumb img { object-fit:contain; } .customer.phase3-shell .archive-product-card .thumb-index { font-size:7px; line-height:1.3; padding:0 1px; } .customer.phase3-shell .archive-product-card .card-section { display:grid; row-gap:2px; justify-items:start; margin:8px 0 0; padding:8px 0; border-top:1px solid #e5e5e5; } .customer.phase3-shell .archive-product-card .card-section::before { content:none; } .customer.phase3-shell .archive-product-card .card-section > .vendor, .customer.phase3-shell .archive-product-card .card-section > .title { max-width:100%; overflow:hidden; font-size:12px; line-height:1.45; letter-spacing:0; font-weight:400; margin:0; } .customer.phase3-shell .archive-product-card .card-section > .vendor { color:#1c1c1c; } .customer.phase3-shell .archive-product-card .card-section > .title { color:#333; } .customer.phase3-shell .archive-product-card .card-section > .title::before { content:none; } .customer.phase3-shell .archive-product-card .card-section > .price { margin:2px 0 0; font-size:12px; line-height:16px; font-weight:400; color:#1c1c1c; } .customer.phase3-shell .archive-product-card .reference { font-size:10px; line-height:15px; color:#777; font-weight:400; } .customer.phase3-shell .archive-product-card .product-meta { gap:2px 8px; margin:0; font-size:10px; line-height:15px; } .customer.phase3-shell .archive-product-card .card-actions { display:grid; gap:6px; margin:0; padding:0; } .customer.phase3-shell .archive-product-card .card-actions .purchase-row { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:6px; min-height:28px; margin:0; padding:0; } .customer.phase3-shell .archive-product-card .card-actions .purchase-row .size { border:1px solid #ddd; padding:2px 7px; font-size:11px; } .customer.phase3-shell .archive-product-card .card-actions > .archive-button { contain:layout paint style; display:block; width:100%; min-height:34px; height:34px; padding:0; font-size:12px; } .customer.phase3-shell .archive-product-card .card-actions .archive-button > :is(.background,.foreground) { min-width:0; font-size:12px; line-height:16px; letter-spacing:0; } .customer.phase3-shell .archive-product-card .customer-selection-control { grid-template-columns:14px auto; justify-content:start; column-gap:6px; min-height:28px; font-size:11px; } .customer.phase3-shell .archive-product-card .customer-selection-control > .caption { font-size:11px; } .customer.phase3-shell .customer-selection { position:sticky; top:0; z-index:4; padding:6px 0; margin:0 0 16px; background:#fff; border:0; border-block:1px solid #e5e5e5; } .customer.phase3-shell .customer-selection .selection-actions { gap:6px; width:auto; } .customer.phase3-shell .customer-selection .selection-actions > .archive-button { contain:layout paint style; flex:0 0 auto; width:110px; min-height:34px; height:34px; font-size:12px; } .customer.phase3-shell .customer-selection .selection-actions > .archive-button > :is(.background,.foreground) { min-width:0; font-size:12px; letter-spacing:0; } .customer.phase3-shell .customer-selection h2 { margin:0; font-size:13px; line-height:18px; font-weight:500; white-space:nowrap; } .customer.phase3-shell .customer-selection .muted { font-size:11px; } .customer.phase3-shell .selected-pieces { gap:6px 12px; font-size:11px; } .customer.phase3-shell .selected-pieces .archive-button { min-height:28px; height:28px; font-size:11px; } .customer.phase3-shell .empty-state { display:grid; align-content:center; justify-items:center; min-height:min(360px,60vh); border:0; background:#fff; padding:24px 16px; color:#777; font-size:12px; line-height:1.5; letter-spacing:0; } .customer.phase3-shell .empty-state p { color:#777; max-width:480px; line-height:1.5; } .customer.phase3-shell .notice { padding:10px; margin:0 0 12px; font-size:12px; border-color:#e5e5e5; border-radius:0; } .customer.phase3-shell .notice.info { color:#1c1c1c; background:#fff; border-color:#e5e5e5; } .customer.phase3-shell .footer { margin-top:24px; border-color:#e5e5e5; font-size:11px; line-height:16px; letter-spacing:0; } .customer.phase3-shell .modal { color:#1c1c1c; border:1px solid #cfcfcf; border-radius:1px; font:inherit; } .customer.phase3-shell .modal::backdrop { background:rgb(0 0 0 / 22%); } .customer.phase3-shell .phase3-search-dialog { margin:0; right:auto; bottom:auto; padding:0; } .customer.phase3-shell .phase3-search-dialog:not([open]) { display:none; } .customer.phase3-shell .phase3-search-dialog::backdrop { background:rgb(0 0 0 / 22%); } .customer.phase3-shell .phase3-search-dialog > .search-bar > input { font:14px/1.5 var(--archive-body-font); letter-spacing:0; } .customer.phase3-shell .phase3-search-dialog > .results > .message > p { font:13px/1.6 var(--archive-body-font); } .customer.phase3-shell .phase3-search-dialog > .results > .message > .eyebrow { font:11px/1.5 var(--archive-body-font); letter-spacing:0; } .customer.phase3-shell .modal-header { padding:12px 16px; background:#fff; border-color:#e5e5e5; } .customer.phase3-shell .modal-header h2 { min-width:0; flex:1 1 auto; overflow-wrap:anywhere; font-size:18px; font-weight:500; line-height:1.2; letter-spacing:-.02em; } .customer.phase3-shell .modal-header .archive-button { contain:layout paint style; flex:0 0 auto; width:max-content; min-width:max-content; height:34px; min-height:34px; padding-inline:12px; white-space:nowrap; } .customer.phase3-shell .modal-header .archive-button > :is(.background,.foreground) { position:static; font-size:12px; line-height:16px; letter-spacing:0; } .customer.phase3-shell .modal-header .archive-button > .foreground { display:none; } .customer.phase3-shell .customer-product-view { --viewer-photo-height:clamp(240px,calc(100dvh - 250px),1000px); } .customer.phase3-shell .customer-product-view .customer-details { gap:10px; padding:12px; } .customer.phase3-shell .customer-product-view .customer-product-summary h2 { margin:0; font-size:16px; font-weight:500; line-height:1.4; letter-spacing:0; } .customer.phase3-shell .customer-summary-row .product-meta { color:#6e6e6e; font-size:11px; letter-spacing:0; } .customer.phase3-shell .customer-summary-actions .archive-button { min-height:34px; height:34px; padding-inline:10px; font-size:12px; } .customer.phase3-shell .customer-product-view .detail-main-image { background:#fff; } .customer.phase3-shell .customer-product-view .detail-main-image img { object-fit:contain; } .customer.phase3-shell .customer-product-view .customer-gallery { gap:8px; } .customer.phase3-shell .customer-product-view .customer-gallery .thumb-strip { display:flex; gap:4px; overflow:auto hidden; max-height:72px; margin:0; padding:0 0 4px; scrollbar-width:thin; } .customer.phase3-shell .customer-product-view .thumb { flex:0 0 54px; width:54px; height:64px; min-height:64px; padding:0; border-radius:0; background:#fff; } .customer.phase3-shell .customer-product-view .thumb.selected { padding:0; border-width:2px; } .customer.phase3-shell .original-image-link { position:absolute; left:8px; bottom:8px; z-index:2; display:inline-flex; align-items:center; width:max-content; max-width:calc(100% - 72px); min-height:32px; padding:6px 8px; background:rgba(255,255,255,.94); color:#1c1c1c; font-size:11px; line-height:1.5; text-underline-offset:3px; } .customer.phase3-shell .original-image-status { position:absolute; left:8px; top:8px; z-index:2; max-width:calc(100% - 16px); min-height:16px; padding:3px 6px; background:rgba(255,255,255,.94); font-size:10px; line-height:1.5; color:#555; } /* Viewport presentation is independent of native-original hydration. */ .customer.phase3-shell .customer-product-view { --viewer-photo-height:clamp(220px,calc(100dvh - 290px),1000px); max-width:min(calc(100vw - 24px),calc(var(--view-pixel-limit,2048px) + 28px)); } .customer.phase3-shell .customer-product-view .detail-main-image:not(.is-native-zoom) { width:min(100%,var(--view-pixel-limit,2048px)); max-height:min(var(--viewer-photo-height),var(--view-pixel-limit,2048px)); margin-inline:auto; } .customer.phase3-shell .customer-product-view .detail-main-image[aria-busy=true]::before { content:none; } .customer.phase3-shell .customer-gallery-controls { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 12px; min-height:32px; } .customer.phase3-shell .customer-gallery-controls .image-retry-message { flex:1 1 160px; font-size:11px; } .customer.phase3-shell .customer-gallery-controls .image-retry { flex:0 0 auto; width:auto; min-height:32px; height:32px; padding:4px 10px; font-size:11px; } .customer.phase3-shell .customer-gallery-controls .original-image-link { position:static; z-index:auto; min-height:32px; max-width:100%; padding:4px 0; background:transparent; } .customer.phase3-shell .customer-gallery-controls .detail-zoom { contain:layout paint style; display:inline-flex; flex:0 0 auto; width:max-content; min-width:76px; min-height:32px; height:32px; padding:4px 10px; font-size:11px; line-height:1.5; } .customer.phase3-shell .customer-product-view .detail-main-image.is-native-zoom { display:block; overflow:auto; overscroll-behavior:contain; cursor:grab; scrollbar-width:thin; } .customer.phase3-shell .customer-product-view .detail-main-image.is-native-zoom > img { position:relative; inset:auto; display:block; width:auto; height:auto; min-width:0; min-height:0; max-width:none; max-height:none; object-fit:none; margin:0; } /* Keep inquiry controls visible while the photo and strip fit the viewport. */ .customer.phase3-shell .customer-product-view[open] { display:flex; flex-direction:column; height:calc(100dvh - 32px); min-width:min(420px,calc(100vw - 24px)); overflow:hidden; } .customer.phase3-shell .customer-product-view > .modal-header { position:static; flex:0 0 auto; } .customer.phase3-shell .customer-product-view .customer-details { display:flex; flex-direction:column; flex:1 1 auto; min-height:0; overflow:hidden; align-items:stretch; } .customer.phase3-shell .customer-product-view .customer-product-summary { flex:0 0 auto; max-height:35dvh; overflow:auto; } .customer.phase3-shell .customer-product-view .customer-gallery { flex:1 1 auto; min-height:0; grid-template-rows:minmax(0,1fr) auto auto; align-items:stretch; } .customer.phase3-shell .customer-product-view .detail-main-image { height:100%; min-height:0; max-height:100%; aspect-ratio:auto; } .customer.phase3-shell .customer-product-view .detail-main-image:not(.is-native-zoom) { max-height:min(100%,var(--view-pixel-limit,2048px)); } .customer.phase3-shell .customer-extra-details { font-size:11px; line-height:1.5; color:#6e6e6e; } .customer.phase3-shell .customer-inquiry-view { width:min(560px,calc(100vw - 24px)); } .customer.phase3-shell .customer-inquiry-view .modal-content { padding:16px; } .customer.phase3-shell .inquiry-pieces li { gap:12px; border-radius:0; background:#fff; padding:10px 0; border-bottom:1px solid #e5e5e5; } .customer.phase3-shell .inquiry-photo { border-radius:0; background:#fff; } .customer.phase3-shell .inquiry-pieces strong { font-family:var(--archive-heading-font); font-size:13px; font-weight:500; letter-spacing:0; } .customer.phase3-shell .inquiry-form .field { color:#1c1c1c; font-size:12px; font-weight:400; letter-spacing:0; } .customer.phase3-shell .inquiry-form input, .customer.phase3-shell .inquiry-form textarea { border:0; border-radius:0; box-shadow:0 -1px #ddd inset; padding:8px 0; background:#fff; color:#000; font-size:16px; font-weight:400; transition:box-shadow 150ms ease-in; } .customer.phase3-shell .inquiry-form input:focus, .customer.phase3-shell .inquiry-form textarea:focus { outline:none; box-shadow:0 -2px #4b4b4b inset; } .customer.phase3-shell .inquiry-form .archive-button { width:100%; min-height:38px; height:38px; border-radius:0; font-size:12px; } .customer.phase3-shell .inquiry-success-icon { background:#fff; border:1px solid #e5e5e5; border-radius:0; color:#1c1c1c; } .customer.phase3-shell .inquiry-success h3 { font-size:22px; line-height:1.15; font-weight:500; letter-spacing:-.02em; } .customer.phase3-shell :is(button,a,input,textarea,summary):focus-visible { outline:2px solid #1c1c1c; outline-offset:2px; } .customer.phase3-shell [hidden] { display:none!important; } @media(pointer:fine) { .customer.phase3-shell .archive-product-card:hover::before,.customer.phase3-shell .archive-product-card:focus-within::before { opacity:1; } } @media(min-width:1200px) { .customer.phase3-shell .grid { grid-template-columns:repeat(4,minmax(0,1fr)); } } @media(min-width:1400px) { .customer.phase3-shell .grid { grid-template-columns:repeat(5,minmax(0,1fr)); } } @media(max-width:1023px) { .customer.phase3-shell > .page > .shell { padding:16px 12px 24px; } .customer.phase3-shell > .page > .mobile-bar .icon-button { min-height:44px; padding:0; } .customer.phase3-shell > .sidebar .navigation-item { min-height:40px; } .customer.phase3-shell .grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 10px; } .customer.phase3-shell .resultbar { align-items:center; flex-wrap:wrap; gap:8px; } .customer.phase3-shell .pagination { gap:2px; } .customer.phase3-shell .pagination :is(.archive-button,.page-control) { min-width:36px; width:36px; min-height:40px; height:40px; } .customer.phase3-shell .archive-button { min-height:40px; height:40px; } .customer.phase3-shell .archive-product-card .card-actions > .archive-button { min-height:40px; height:40px; width:100%; } .customer.phase3-shell .archive-product-card .customer-selection-control { min-height:36px; } .customer.phase3-shell .selection-actions { width:100%; } .customer.phase3-shell .selection-actions > .archive-button { flex:1 1 100%; width:100%; } .customer.phase3-shell .customer-product-view .modal-header { padding:12px; } .customer.phase3-shell .page-intro > .title { font-size:22px; } .customer.phase3-shell .customer-selection { top:69px; padding-block:4px; } .customer.phase3-shell .customer-selection .selection-heading { flex-wrap:nowrap; } .customer.phase3-shell .customer-selection .selection-actions { width:auto; flex-wrap:nowrap; } .customer.phase3-shell .customer-selection .selection-actions > .archive-button { flex:0 0 auto; width:84px; min-height:40px; height:40px; } } @media(pointer:coarse) { .customer.phase3-shell > .sidebar .catalogue-filter-form .facet-section > .list > label.field.archive-checkbox { padding-block:12px; } .customer.phase3-shell .facet-section > .header > .title-button { min-height:40px; } .customer.phase3-shell .customer-selection-control { min-height:40px; } } @media(prefers-reduced-motion:reduce) { .customer.phase3-shell { --phase3-motion-fast:1ms; --phase3-motion-standard:1ms; --phase3-motion-slow:1ms; } .customer.phase3-shell *, .customer.phase3-shell *::before, .customer.phase3-shell *::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; } } /* Canonical UnderlineWrapper for product titles. */ .customer.phase3-shell .card-section .underline{position:relative;z-index:0;display:inline-block;width:-moz-fit-content;width:fit-content;max-width:100%;cursor:pointer} .customer.phase3-shell .card-section .underline:not(:hover){--before-clip-path-width:0%} .customer.phase3-shell .card-section .underline:hover{--before-clip-path-width:50%} .customer.phase3-shell .card-section .underline:not(.is-permanent){--before-transition-delay:0;--after-opacity:0} .customer.phase3-shell .card-section .underline.is-permanent{--before-transition-delay:0.2s} .customer.phase3-shell .card-section .underline.is-permanent:not(:hover){--after-opacity:1} .customer.phase3-shell .card-section .underline.is-permanent:hover{--after-opacity:0} .customer.phase3-shell .card-section .underline:after,.customer.phase3-shell .card-section .underline:before{content:"";position:absolute;left:0;right:0;top:100%;height:1px;background-color:currentColor;transition-duration:.2s;transition-timing-function:ease-in;pointer-events:none;contain:strict} .customer.phase3-shell .card-section .underline:before{clip-path:polygon(0 0,var(--before-clip-path-width) 0,var(--before-clip-path-width) 100%,0 100%,100% 100%,calc(100% - var(--before-clip-path-width)) 100%,calc(100% - var(--before-clip-path-width)) 0,100% 0,100% 100%,0 100%,0 0);transition-property:clip-path;transition-delay:var(--before-transition-delay)} .customer.phase3-shell .card-section .underline:after{opacity:var(--after-opacity);transition-property:opacity} .customer.phase3-shell .archive-product-card .card-section > .title { text-decoration:none; } .customer.phase3-shell .facet-section > .header > .icons .phase3-icon { width:9px; height:9px; }