/* Arco owns control behavior; these tokens align its surfaces with the website. */
.material-site {
  --primary-6: 3, 99, 233;
  --primary-5: 43, 124, 242;
  --primary-7: 0, 79, 196;
  --color-primary-light-1: var(--material-accent-soft);
  --color-primary-light-2: #dbeaff;
  --color-fill-2: var(--material-surface-soft);
  --color-fill-3: #e7ebf1;
  --border-radius-small: 4px;
  --border-radius-medium: 6px;
}
.material-site .arco-btn { letter-spacing:0; }
.material-site .arco-btn-size-large { height:40px; padding-inline:20px; }
.material-site .arco-btn-secondary { border-color:transparent; }
.material-site #material-account-root .arco-btn-secondary { color:var(--color-text-1); background:var(--material-surface-soft); height:36px; padding-inline:18px; border-radius:18px; }
.material-site #material-account-root .arco-btn-secondary:not(.arco-btn-disabled):hover { color:var(--color-text-1); background:var(--color-fill-3); }
/* Compound controls own their focus border; their inner input must not draw another ring. */
.material-site :is(.arco-input,.arco-textarea,.arco-select-view-input):focus-visible { outline:none; box-shadow:none; }
.material-site :is(.arco-input-inner-wrapper,.arco-textarea-wrapper,.arco-select-view) { background:var(--material-surface); border:1px solid transparent; box-shadow:none; transition:border-color 160ms ease,background 160ms ease; }
.material-site :is(.arco-input-inner-wrapper,.arco-textarea-wrapper,.arco-select-view):hover { border-color:var(--color-fill-3); background:var(--material-surface); }
.material-site :is(.arco-input-inner-wrapper-focus,.arco-textarea-wrapper:focus-within,.arco-select-focused .arco-select-view) { border-color:var(--color-primary); background:var(--material-surface); box-shadow:none; }
.material-site :is(.arco-input-inner-wrapper-error,.arco-textarea-wrapper-error) { border-color:rgb(var(--danger-6)); }
.material-site :is(.arco-input-inner-wrapper-disabled,.arco-select-disabled .arco-select-view) { background:var(--material-surface-soft); border-color:transparent; }
.material-site .arco-input-inner-wrapper .arco-input { background:transparent; }
.material-site .arco-form-item-control-children > .arco-input { background:var(--material-surface); border-radius:6px; }
.material-site .arco-textarea-wrapper .arco-textarea { background:transparent; border:0; box-shadow:none; }
.material-site .arco-textarea-wrapper .arco-textarea-word-limit { background:transparent; }
.material-site .arco-pagination-item { background:var(--material-surface); border-radius:4px; }
.material-site .arco-pagination-item-active { background:var(--color-primary); color:var(--material-surface); }
.material-catalog-tabs .arco-tabs-content { display:none; }
.material-site .material-catalog-tabs .arco-tabs-header-nav::before { display:block; background:var(--color-fill-3); }
.material-catalog-tabs .arco-tabs-header-title { margin:0 32px 0 0; padding:12px 0; font-size:15px; }
.material-catalog-tabs .arco-tabs-header-title-text { padding:0; }
.material-catalog-tabs .arco-tabs-header-title-text::before { display:none; }
.material-catalog-tabs .arco-tabs-header-ink { height:2px; }
.material-control-icon { display:inline-block; width:16px; height:16px; object-fit:contain; flex-shrink:0; vertical-align:middle; }
.material-backtop.arco-backtop { right:24px; bottom:24px; z-index:90; }
.material-site .material-backtop-button.arco-btn { display:grid; place-items:center; width:40px; height:40px; padding:0; border:0; background:var(--material-surface); box-shadow:0 3px 16px rgba(29,33,41,.12); transition:background 160ms ease,box-shadow 160ms ease; }
.material-backtop-button .material-control-icon { width:20px; height:20px; }
.material-site .footer > .auto { width:min(1440px,calc(100% - 96px)); margin-inline:auto; padding-inline:0; }
.material-site .footer .tit { letter-spacing:0; }
@media (hover:hover) and (pointer:fine) { .material-site .material-backtop-button.arco-btn:hover { background:var(--material-accent-soft); box-shadow:0 4px 18px rgba(29,33,41,.16); } }
@media (max-width:1200px) { .material-site .footer > .auto { width:calc(100% - 64px); } .material-site .footer_t { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; } }
@media (max-width:600px) { .material-backtop.arco-backtop { right:16px; bottom:calc(16px + env(safe-area-inset-bottom)); } .material-site .footer > .auto { width:calc(100% - 32px); } .material-site .footer_t { grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 20px; } .material-site .footer .ft_col1 { min-width:0; } .material-site .footer_b { line-height:1.8; } }
.material-search-control.arco-input-group-wrapper { width:360px; flex-shrink:0; }
.material-search-control .arco-input-inner-wrapper { padding-inline:12px 4px; border-radius:6px; }
.material-search-control .arco-btn { padding:0; width:30px; height:30px; }
.material-search-control .arco-btn .material-control-icon { width:20px; height:20px; }
.material-site .arco-input-inner-wrapper,.material-site .arco-textarea-wrapper { border-radius:6px; }
.material-site .arco-textarea { resize:none; }
.material-site .arco-select-view { border-radius:6px; }
.material-site .arco-select-size-large.arco-select-single .arco-select-view { padding-inline:12px; }
.material-sort .arco-select { width:172px; min-width:0; }
.material-site .arco-select-size-large.arco-select-single .arco-select-view { height:40px; line-height:38px; }
.material-site .arco-input-inner-wrapper-large { min-height:40px; }
.material-site .arco-select-popup { padding:6px; border:0; border-radius:6px; background:var(--material-surface); box-shadow:0 4px 20px rgba(29,33,41,.14); }
.material-site .arco-select-option { padding:0 10px; line-height:36px; border-radius:4px; }
.material-site .arco-select-option-selected { background:var(--material-accent-soft); font-weight:500; }
.material-site .arco-select-option-hover { background:var(--material-surface-soft); }
.material-site .arco-select-option-selected.arco-select-option-hover { background:var(--color-primary-light-2); }
.material-category-picker.arco-radio-group-type-button { display:flex; flex-wrap:wrap; gap:6px 14px; padding:0; height:auto; background:transparent; }
.material-category-picker .arco-radio-button { flex:0 0 auto; background:transparent; padding-inline:10px; border:0; height:30px; line-height:30px; border-radius:4px; }
.material-category-picker .arco-radio-button::before,.material-category-picker .arco-radio-button::after { display:none; }
.material-category-picker .arco-radio-button-inner { padding:0; }
.material-category-picker .arco-radio-button.arco-radio-checked { color:var(--color-primary); background:var(--material-accent-soft); box-shadow:none; }
.material-category-picker .arco-radio-button.arco-radio-checked .arco-radio-button-inner { background:transparent; box-shadow:none; }
.material-category-picker .arco-radio-button:not(.arco-radio-checked):hover { background:var(--color-fill-3); }
.material-license-picker { margin:18px 0; }
.material-license-picker > p { margin-bottom:10px; font-size:13px; color:var(--color-text-2); }
.material-license-picker .arco-radio-group-type-button { display:flex; width:100%; }
.material-license-picker .arco-radio-button { flex:1; text-align:center; }
.material-license-picker .arco-radio-button-inner { padding-inline:8px; }
.material-license-picker .arco-radio-group-type-button { background:var(--material-surface-soft); border-radius:6px; padding:4px; gap:4px; height:auto; }
.material-license-picker .arco-radio-button { border-radius:4px; }
.material-license-picker .arco-radio-button::before,.material-license-picker .arco-radio-button::after { display:none; }
.material-license-picker .arco-radio-checked .arco-radio-button-inner { color:var(--color-primary); background:var(--material-surface); box-shadow:0 1px 4px rgba(29,33,41,.06); border-radius:4px; }
.material-checkout.arco-form { display:grid; }
.material-checkout .arco-form-item { margin-bottom:22px; }
.material-checkout .arco-form-label-item { padding-bottom:8px; }
.material-summary .arco-checkbox { display:flex; align-items:flex-start; padding:0; }
.material-summary .arco-checkbox-icon-hover { flex-shrink:0; margin-top:4px; }
.material-summary .arco-checkbox-text { font-size:12px; line-height:1.8; }
.material-status-tabs { margin-bottom:24px; }
.material-status-tabs .arco-tabs-content { display:none; }
.material-site .arco-tabs-header-nav::before { display:none; }
.material-site .arco-collapse { background:transparent; }
.material-site .arco-collapse-item { border:0; }
.material-site .arco-collapse-item-header { padding-block:16px; background:transparent; border:0; }
.material-site .arco-collapse-item-content { background:var(--material-surface-soft); border-radius:4px; }
.material-purchase-notes .arco-collapse-content-box { font-size:13px; line-height:1.8; color:var(--color-text-2); }
.material-arco-modal { border-radius:8px; }
.material-arco-modal .arco-modal-header { text-align:left; padding:24px 28px 12px; height:auto; border:0; }
.material-arco-modal .arco-modal-title { text-align:left; font-size:20px; padding-right:24px; }
.material-arco-modal .arco-modal-content { padding:12px 28px 28px; max-height:75dvh; overflow:auto; }
.material-arco-modal .arco-modal-content > p { margin-bottom:20px; font-size:14px; color:var(--color-text-2); overflow-wrap:anywhere; }
.material-arco-modal .arco-btn-long + .arco-btn-long { margin-top:12px; }
.material-modal-actions { display:flex; justify-content:flex-end; gap:12px; }
.material-image-modal .arco-modal-content > img { width:100%; max-height:70dvh; object-fit:contain; }
.material-site .arco-select-view-input { outline:none; }
.material-site .arco-radio-button input:focus-visible + .arco-radio-button-inner { outline:2px solid var(--color-primary); outline-offset:2px; }
@media (max-width:960px) { .material-search-control.arco-input-group-wrapper { width:100%; } }
@media (max-width:600px) {
  .material-sort .arco-select { flex:1; width:auto; }
  .material-category-picker.arco-radio-group-type-button { gap:4px; }
  .material-category-picker .arco-radio-button { padding-inline:8px; font-size:12px; }
  .material-site .material-subnav .arco-btn { padding-inline:8px; font-size:12px; }
  .material-arco-modal .arco-modal-header { padding:20px 20px 10px; }
  .material-arco-modal .arco-modal-content { padding:10px 20px 20px; }
}