:is(.letter-card, .template-art, .material-swatch)[data-material="none"] { background-image: none; }
:is(.letter-card, .template-art, .material-swatch)[data-material="linen"] { background-image: repeating-linear-gradient(0deg,#806f4c0d 0,#806f4c0d 1px,transparent 1px,transparent 4px),repeating-linear-gradient(90deg,#ffffff16 0,#ffffff16 1px,transparent 1px,transparent 3px); }
:is(.letter-card, .template-art, .material-swatch)[data-material="cotton"] { background-image: radial-gradient(ellipse at 15% 20%,#ffffff16 0,transparent 70%),repeating-radial-gradient(circle at 0 0,#8477550d 0,#8477550d .7px,transparent 1.3px,transparent 5px); }
:is(.letter-card, .template-art, .material-swatch)[data-material="vellum"] { background-image: linear-gradient(125deg,#ffffff2b,transparent 55%,#ffffff12); }
:is(.letter-card, .template-art, .material-swatch)[data-material="kraft"] { background-image: repeating-linear-gradient(27deg,transparent 0,transparent 8px,#75592e12 9px,transparent 10px,transparent 17px),repeating-linear-gradient(151deg,#ffffff1c 0,#ffffff1c 1px,transparent 1px,transparent 13px); }
:is(.letter-card, .template-art, .material-swatch)[data-material="handmade"] { background-image: radial-gradient(ellipse 1.5px 1px at 3px 8px,#59472f20 70%,transparent 75%),radial-gradient(ellipse 1px 2px at 14px 3px,#ffffff38 70%,transparent 75%); background-size: 23px 21px,29px 25px; }
:is(.letter-card, .template-art, .material-swatch)[data-material="laid"] { background-image: repeating-linear-gradient(0deg,transparent 0,transparent 3px,#705b3616 3px,#705b3616 4px,transparent 4px,transparent 7px),repeating-linear-gradient(90deg,transparent 0,transparent 28px,#ffffff1c 28px,#ffffff1c 29px); }
:is(.letter-card, .template-art, .material-swatch)[data-material="silk"] { background-image: repeating-linear-gradient(125deg,transparent 0,transparent 11px,#ffffff09 11px,#ffffff09 11.6px,transparent 12px),linear-gradient(115deg,transparent 20%,#ffffff05 48%,transparent 75%); }
:is(.letter-card, .template-art, .material-swatch)[data-material="canvas"] { background-image: repeating-linear-gradient(0deg,#2c382118 0,#2c382118 1px,#ffffff12 1px,#ffffff12 2px,transparent 2px,transparent 7px),repeating-linear-gradient(90deg,#2c382118 0,#2c382118 1px,#ffffff12 1px,#ffffff12 2px,transparent 2px,transparent 7px); }
:is(.letter-card, .template-art, .material-swatch)[data-material="watercolor"] { background-image: radial-gradient(ellipse at 0 0,#ffffff32,transparent 46%),radial-gradient(ellipse at 95% 35%,#6f784d10,transparent 50%),radial-gradient(ellipse at 10% 95%,#b7846817,transparent 46%); }
.texture-picker { position: relative; min-width: 0; }
.texture-picker > summary { display: flex; align-items: center; gap: 10px; padding: 7px 10px; min-height: 48px; border: 1px solid var(--input-border); border-radius: 7px; background: var(--surface); cursor: pointer; list-style: none; }
.texture-picker > summary::-webkit-details-marker { display: none; }
.texture-picker > summary::marker { content: ''; }
.texture-picker > summary .icon { margin-left: auto; width: 14px; height: 14px; transform: rotate(90deg); transition: transform .2s; }
.texture-picker[open] > summary .icon { transform: rotate(-90deg); }
.texture-picker > summary:hover { border-color: var(--gold-dark); }
.texture-picker > summary:focus-visible { outline: 2px solid var(--gold-dark); outline-offset: 3px; }
.texture-selected-copy { min-width: 0; display: grid; gap: 1px; }
.texture-selected-copy strong { font-size: .75rem; font-weight: 500; line-height: 1.5; }
.texture-selected-copy small { font-size: .625rem; color: var(--muted); line-height: 1.5; }
.material-swatch { display: block; background-color: var(--texture-paper,#f7f0e4); border: 1px solid #806b4b30; border-radius: 4px; }
.texture-picker > summary > .material-swatch { flex: 0 0 32px; width: 32px; height: 32px; }
.texture-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; max-height: 350px; overflow-y: auto; padding: 5px; margin: 10px -5px 0; border: 0; min-width: 0; overscroll-behavior: contain; }
.texture-option { cursor: pointer; min-width: 0; position: relative; }
.texture-choice { display: flex; flex-direction: column; gap: 5px; padding: 6px 6px 8px; min-height: 87px; border: 1px solid var(--input-border); border-radius: 7px; background: var(--surface); }
.texture-choice .material-swatch { width: 100%; height: 43px; }
.texture-choice strong { font-size: .6875rem; font-weight: 500; line-height: 1.5; }
.texture-option input:checked + .texture-choice { border-color: var(--gold-dark); box-shadow: inset 0 0 0 1px var(--gold-dark); }
.texture-option:hover .texture-choice { border-color: var(--gold-dark); }
.texture-option input:focus-visible + .texture-choice { outline: 2px solid var(--gold-dark); outline-offset: 2px; }
.texture-option:has(input:disabled) { opacity: .65; cursor: not-allowed; }
.texture-option .choice-check { top: 10px; right: 10px; width: 16px; height: 16px; }
.texture-option input:checked + .texture-choice > .choice-check { display: block; }
.texture-note { font-size: .625rem; color: var(--muted); line-height: 1.7; }
.design-field-label { font-size: .71rem; font-weight: 600; line-height: 1.5; }
.studio-app .design-control-grid select, .studio-app .design-control-grid .texture-picker > summary { min-height: 60px; height: 60px; }
@media (prefers-reduced-motion: reduce) { .texture-picker > summary .icon { transition: none; } }