.cup-personalization-grid{font-family:inherit;background-color:transparent;color:inherit;padding:1rem 0 2rem;text-align:center;width:100%;max-width:100%;box-sizing:border-box}.cup-personalization-grid .header-container{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.cup-personalization-grid .grid-heading{margin:0;font-family:var(--header-font-family, inherit);font-size:var(--header-font-size, 19px);color:var(--header-color, inherit);text-align:left}.cup-personalization-grid .grid-heading p,.cup-personalization-grid .grid-heading h1,.cup-personalization-grid .grid-heading h2,.cup-personalization-grid .grid-heading h3{margin:0}.cup-personalization-grid .clear-grid-btn,.cup-personalization-grid .center-grid-btn,.cup-personalization-grid .undo-grid-btn,.cup-personalization-grid .redo-grid-btn{background:transparent;border:none;font-family:var(--controls-font-family, inherit);color:var(--controls-color, rgba(var(--color-foreground), .6));font-size:var(--controls-font-size, 14px);text-decoration:underline;cursor:pointer;padding:0;margin:0;transition:opacity .2s ease;white-space:nowrap}.cup-personalization-grid .clear-grid-btn{margin-left:auto}.cup-personalization-grid .center-grid-btn:hover:not(:disabled),.cup-personalization-grid .clear-grid-btn:hover:not(:disabled),.cup-personalization-grid .undo-grid-btn:hover:not(:disabled),.cup-personalization-grid .redo-grid-btn:hover:not(:disabled){opacity:.7}.cup-personalization-grid button:disabled{opacity:.3;cursor:not-allowed}.cup-personalization-grid .grid-wrapper{width:100%;container-type:inline-size}.cup-personalization-grid .grid-container{display:flex;flex-direction:column;width:100%;gap:clamp(2px,1cqi,6px);background:rgb(var(--color-background));padding:0;border-radius:12px;border:none;transition:all .3s ease;margin:0 auto}.cup-personalization-grid .grid-row{flex:1 1 auto;display:grid;grid-template-columns:repeat(var(--symbols-per-line, 10),minmax(0,1fr));gap:clamp(2px,1cqi,6px);transition:transform .3s cubic-bezier(.4,0,.2,1)}.cup-personalization-grid .grid-row[data-offset="1"]{transform:translate(calc((100% + clamp(2px,1cqi,6px)) / (var(--symbols-per-line, 10) * 2)))}.cup-personalization-grid .grid-row[data-offset="1"] .cell:last-child{opacity:0;pointer-events:none}.cup-personalization-grid .grid-container:focus-within{border-color:rgba(var(--color-foreground),.3)}.cup-personalization-grid .cell{flex:0 0 auto;width:100%;aspect-ratio:3/4;background:#ffffff80;border:1px solid rgba(var(--color-foreground),.1);border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:calc((100cqi / var(--symbols-per-line, 10)) * .6);font-family:var(--grid-font-family, inherit);font-weight:var(--grid-font-weight, 600);font-style:var(--grid-font-style, normal);text-transform:uppercase;color:rgb(var(--color-foreground));transition:border-color .2s ease,background-color .2s ease,box-shadow .2s ease;text-align:center;padding:0;outline:none;caret-color:transparent}.cup-personalization-grid .cell:focus{border-color:rgba(var(--color-foreground),.5);background:rgb(var(--color-background));box-shadow:0 0 0 2px rgba(var(--color-foreground),.2)}.cup-personalization-grid .instructions{font-family:var(--instructions-font-family, inherit);color:var(--instructions-color, rgba(var(--color-foreground), .75));font-size:var(--instructions-font-size, 14px);line-height:1.5;margin-top:1rem;text-align:left}.cup-personalization-grid .grid-error{font-family:var(--error-font-family, inherit);color:var(--error-color, #cc0000);font-size:var(--error-font-size, 14px);margin-top:1rem;text-align:left;display:none}.cup-personalization-grid .color-custom-dropdown{position:relative;width:max-content;margin-bottom:.5rem;display:flex;align-items:center}.cup-personalization-grid .dropdown-toggle{display:flex;justify-content:space-between;align-items:center;width:auto;background:transparent;border:none;padding:0;gap:4px;cursor:pointer}.cup-personalization-grid .color-swatch{display:inline-block;width:48px;height:16px;border-radius:4px;background-size:100% 100%}.cup-personalization-grid .dropdown-icon{display:flex;align-items:center;color:rgba(var(--color-foreground, 0, 0, 0),.6);transition:transform .2s ease}.cup-personalization-grid .dropdown-toggle[aria-expanded=true] .dropdown-icon{transform:rotate(180deg)}.cup-personalization-grid .dropdown-menu{position:absolute;top:calc(100% + 4px);left:0;width:100%;background:rgba(var(--color-background, 255, 255, 255),1);border:1px solid rgba(var(--color-foreground, 0, 0, 0),.1);border-radius:6px;box-shadow:0 4px 12px #0000001a;z-index:10;display:none;flex-direction:column;gap:4px;padding:4px}.cup-personalization-grid .dropdown-menu.show{display:flex}.cup-personalization-grid .dropdown-option{display:flex;align-items:center;justify-content:center;width:100%;background:transparent;border:none;padding:6px;border-radius:4px;cursor:pointer;transition:background .2s ease}.cup-personalization-grid .dropdown-option:hover,.cup-personalization-grid .dropdown-option.selected{background:rgba(var(--color-foreground, 0, 0, 0),.05)}
/*# sourceMappingURL=/cdn/shop/t/7/assets/cup-personalization-grid.css.map */