/*@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700;800&display=swap');*/
/*@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@600;700;800&display=swap');*/
#configurator button:disabled {
    opacity:.45;
    cursor:not-allowed
}
#configurator .builder>#products {
    margin-top:0;
    margin-bottom:28px
}
#configurator #diameter {
    margin-top:12px
}
:root {
    --ink:#333;
    --muted:#65717a;
    --blue:#e2ebf0;
    --green:#3dcc24;
    --pink:#c60b79;
    --line:#e1e6e9
}
#configurator,
#configurator * {
    box-sizing:border-box
}
#configurator {
    scroll-behavior:smooth;
    scroll-padding-top:20px;
    padding: 30px 40px 65px;
}
main {
    margin:0;
    color:var(--ink);
    font:16px/1.5 'Open Sans',Arial,sans-serif;
    background:var(--blue);
    padding: 30px 40px 65px;
    max-width: 100%;
    padding: 0;
}
#configurator a {
    color:inherit;
    text-decoration:none
}
#configurator button,
#configurator input,
#configurator select,
#configurator textarea {
    font:inherit;
    color:inherit
}
#configurator button {
    cursor:pointer;
    border:0
}
#configurator button:focus-visible,
#configurator a:focus-visible,
#configurator input:focus-visible,
#configurator select:focus-visible,
#configurator textarea:focus-visible {
    outline:3px solid #008fbc;
    outline-offset:3px
}
#configurator select {
    -webkit-appearance: auto !important;
    -moz-appearance: auto !important;
    appearance: auto !important;
}
#configurator .header-main {
    max-width:1340px;
    padding:25px 32px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin:auto;
    font-size:14px
}
#configurator .brand img {
    display:block;
    width:230px;
    height:48px
}
#configurator nav {
    max-width:1250px;
    display:flex;
    justify-content:space-between;
    gap:24px;
    margin:auto;
    padding:17px 30px 22px
}
#configurator nav a {
    text-transform:uppercase;
    font-size:14px;
    font-weight:600
}
#configurator .color-stripe {
    height:5px;
    background:repeating-linear-gradient(90deg,#f493cf 0 39px,#fff 39px 42px,#ffc440 42px 81px,#fff 81px 84px,#dff654 84px 123px,#fff 123px 126px,#02cce0 126px 165px,#fff 165px 168px,#fc729b 168px 207px,#fff 207px 210px,#c7acd8 210px 249px,#fff 249px 252px)
}
.bread_crumbs_container {
    width: 100%;
    background: #FFF;
}
#bread_crumbs {
    max-width:1360px;
    margin:auto;
    padding:17px 30px;
    font-size:13px;
    /*! margin-top: -30px; */
    /*! background: #FFF; */
}
#configurator main {
    background:var(--blue);
    padding:35px 30px 65px
}
#configurator .heading {
    text-align:center
}
#configurator .heading h1 {
    font-size:40px;
    line-height:1.15;
    font-weight:800;
    margin:0 0 10px;
    letter-spacing:-1.3px
}
#configurator .heading p {
    font-size:19px;
    font-weight:600;
    margin:0
}
#configurator .steps {
    max-width:1060px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
    margin:28px auto 36px
}
#configurator .steps a {
    display:flex;
    align-items:center;
    gap:13px;
    padding:12px 17px;
    border-radius:16px;
    background:#fff;
    font-size:14px;
    font-weight:700
}
#configurator .steps b,
#configurator .section-heading>b {
    display:grid;
    place-items:center;
    background:#333;
    color:#fff;
    border-radius:10px;
    min-width:33px;
    height:33px;
    font-size:20px;
    line-height:1
}
#configurator .workspace {
    max-width:1320px;
    margin:auto;
    display:grid;
    grid-template-columns:minmax(0,1fr) 340px;
    gap:28px;
    align-items:start
}
#configurator .builder {
    min-width:0
}
#configurator .section-heading {
    display:flex;
    gap:14px;
    align-items:flex-start;
    margin-bottom:23px
}
#configurator .section-heading h2 {
    font-size:22px;
    line-height:1.25;
    margin:2px 0 5px;
    font-weight:700;
    letter-spacing:-.5px
}
#configurator .section-heading p {
    margin:0;
    color:var(--muted);
    font-size:14px
}
#configurator .section-heading>b {
    background:var(--green)
}
#configurator .machines {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:15px
}
#configurator .machine {
    padding:19px 14px 16px;
    border:2px solid transparent;
    background:#fff;
    border-radius:28px;
    text-align:left;
    display:flex;
    flex-direction:column;
    position:relative;
    min-width:0
}
#configurator .machine:hover {
    border-color:#97b7c6
}
#configurator .machine[aria-pressed=true] {
    border-color:var(--green);
    box-shadow:0 0 0 1px var(--green)
}
#configurator .machine .check {
    position:absolute;
    top:14px;
    left:14px;
    width:22px;
    height:22px;
    border-radius:50%;
    border:1px solid #ced6db;
    background:white
}
#configurator .machine[aria-pressed=true] .check {
    background:var(--green);
    border-color:var(--green)
}
#configurator .machine[aria-pressed=true] .check:after {
    content:'✓';
    display:block;
    text-align:center;
    color:white;
    font-size:14px;
    font-weight:700
}
#configurator .material {
    font-size:12px;
    text-align:right;
    color:var(--muted);
    min-height:20px
}
#configurator .machine img {
    width:100%;
    height:208px;
    object-fit:contain;
    margin:10px 0 12px
}
#configurator .machine h3 {
    font-size:17px;
    line-height:1.3;
    margin:0 0 5px
}
#configurator .dimensions {
    font-size:13px;
    color:var(--muted)
}
#configurator .card-capacity {
    font-size:13px;
    margin:10px 0 12px
}
#configurator .card-price {
    margin-top:auto;
    font-size:13px
}
#configurator .card-price b {
    font-size:18px;
    color:#333;
    display:block
}
#configurator .source-note {
    font-size:12px;
    color:var(--muted);
    margin:15px 5px 25px
}
#configurator .source-note a,
#configurator .product-source {
    text-decoration:underline;
    text-underline-offset:3px
}
#configurator .white-panel {
    background:#fff;
    border-radius:28px;
    padding:27px;
    margin-top:24px
}
#configurator .product-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px
}
#configurator .product,
#configurator .pill {
    border:1px solid #ccd5da;
    border-radius:10px;
    background:#fff;
    padding:13px 16px;
    text-align:left;
    font-weight:600;
    font-size:14px
}
#configurator .product small {
    display:block;
    font-weight:400;
    color:var(--muted);
    font-size:12px;
    margin-top:3px
}
#configurator .product[aria-pressed=true],
#configurator .pill[aria-pressed=true] {
    border-color:var(--green);
    background:#f0fced;
    box-shadow:inset 0 0 0 1px var(--green)
}
#configurator .diameter-field {
    margin-top:20px
}
#configurator .diameter-field select {
    max-width:260px
}
#configurator .capacity-banner {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:15px;
    background:#f1f7f9;
    padding:14px 18px;
    border-radius:12px;
    margin-top:17px;
    font-size:14px
}
#configurator .capacity-banner strong {
    font-size:20px;
    white-space:nowrap
}
#configurator .helper {
    color:var(--muted);
    font-size:12px;
    line-height:1.6;
    margin:12px 0
}
#configurator .swatches {
    display:flex;
    gap:13px;
    flex-wrap:wrap
}
#configurator .swatch {
    width:35px;
    height:35px;
    border-radius:50%;
    background:var(--swatch);
    border:3px solid #fff;
    box-shadow:0 0 0 1px #b8c3ca
}
#configurator .swatch[aria-pressed=true] {
    box-shadow:0 0 0 3px var(--green)
}
#configurator fieldset {
    border:0;
    padding:0;
    margin:0 0 24px
}
#configurator legend,
#configurator label {
    font-size:14px;
    font-weight:600;
    margin:0 0 11px;
    display:block
}
#configurator legend span {
    font-weight:400;
    color:var(--muted);
    margin-left:9px
}
#configurator .pills {
    display:flex;
    flex-wrap:wrap;
    gap:8px
}
#configurator .pill {
    padding:10px 13px
}
#configurator .order-fields {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px
}
#configurator .wide {
    grid-column:1/-1
}
#configurator input,
#configurator textarea,
#configurator select {
    padding:11px 12px;
    border:1px solid #cbd4d9;
    border-radius:8px;
    width:100%;
    background:white
}
#configurator #logoTextField {
    margin-top:15px
}
#configurator .summary {
    position:sticky;
    top:20px;
    background:#fff;
    border-radius:28px;
    padding:25px
}
#configurator .summary-label {
    font-size:12px;
    letter-spacing:1.3px;
    color:var(--pink);
    font-weight:700
}
#configurator .summary h2 {
    font-size:25px;
    line-height:1.2;
    margin:7px 0 12px
}
#configurator .preview {
    height:210px;
    text-align:center
}
#configurator .preview img {
    height:100%;
    max-width:100%;
    object-fit:contain
}
#configurator .specs {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    text-align:center;
    gap:7px;
    margin:20px 0 12px
}
#configurator .specs span {
    font-size:12px;
    color:var(--muted);
    display:block
}
#configurator .specs strong {
    font-size:15px;
    font-weight:600
}
#configurator .product-source {
    font-size:12px;
    display:block;
    text-align:center;
    color:#65717a
}
#configurator dl {
    margin:20px 0 0
}
#configurator dl div {
    display:flex;
    justify-content:space-between;
    gap:18px;
    border-top:1px solid var(--line);
    padding:10px 0;
    font-size:13px
}
#configurator dt {
    color:var(--muted)
}
#configurator dd {
    margin:0;
    text-align:right;
    font-weight:600;
    overflow-wrap:anywhere
}
#configurator .starting-price {
    border-top:1px solid var(--line);
    padding-top:15px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:13px
}
#configurator .starting-price strong {
    font-size:26px;
    font-weight:800;
    letter-spacing:-1px
}
#configurator .lead-time {
    font-size:12px;
    color:#556069;
    margin:14px 0
}
#configurator .primary,
#configurator .secondary {
    display:block;
    width:100%;
    text-align:center;
    border-radius:9px;
    padding:13px 12px;
    font-size:14px;
    font-weight:700
}
#configurator .primary {
    color:#fff;
    background:var(--green)
}
#configurator .primary:hover {
    background:#30b41c
}
#configurator .secondary {
    border:1px solid #cbd5da;
    background:#fff;
    margin-top:10px
}
#configurator .center {
    text-align:center;
    margin-bottom:0
}
#configurator footer {
    max-width:1250px;
    padding:35px 30px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin:auto;
    font-size:13px;
    gap:25px
}
#configurator footer img {
    width:165px
}
#configurator footer a {
    display:block
}
#configurator footer p {
    font-weight:700
}
#configurator dialog {
    border:0;
    border-radius:20px;
    max-width:620px;
    width:calc(100% - 32px);
    padding:30px;
    color:var(--ink);
    max-height:90vh
}
#configurator dialog::backdrop {
    background:#18303988
}
#configurator dialog h2 {
    margin:0 30px 12px 0
}
#configurator dialog p {
    font-size:14px;
    color:var(--muted)
}
#configurator dialog pre {
    white-space:pre-wrap;
    overflow-wrap:anywhere;
    background:#f1f6f8;
    padding:18px;
    border-radius:10px;
    font:13px/1.6 'Open Sans',sans-serif;
    max-height:45vh;
    overflow:auto
}
#configurator .close {
    position:absolute;
    right:18px;
    top:12px;
    background:none;
    font-size:30px
}
#configurator [hidden] {
    display:none!important
}
@media(min-width:1450px) {
    #configurator .machine img {
        height:245px
    }
}
@media(max-width:1100px) {
    #configurator .workspace {
        grid-template-columns:minmax(0,1fr) 300px;
        gap:20px
    }
    #configurator .machines {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
    #configurator .summary {
        padding:21px
    }
    #configurator .white-panel {
        padding:22px
    }
    #configurator .steps {
        gap:10px
    }
    #configurator .steps a {
        padding:12px
    }
}
@media(max-width:760px) {
    #configurator .header-main {
        padding:18px
    }
    #configurator .brand img {
        width:182px;
        height:36px
    }
    #configurator .header-main>a:first-child {
        display:none
    }
    #configurator nav {
        overflow-x:auto;
        justify-content:flex-start;
        padding:10px 18px 15px;
        gap:24px;
        white-space:nowrap
    }
    #configurator nav a {
        font-size:12px
    }
    #bread_crumbs {
        padding:13px 18px;
        font-size:12px
    }
    #configurator main {
        padding:26px 16px 40px
    }
    #configurator .heading h1 {
        font-size:31px
    }
    #configurator .heading p {
        font-size:16px
    }
    #configurator .steps {
        margin:22px 0 27px;
        gap:7px
    }
    #configurator .steps a {
        flex-direction:column;
        align-items:flex-start;
        font-size:12px;
        padding:10px;
        gap:7px
    }
    #configurator .steps b {
        min-width:27px;
        height:27px;
        font-size:17px
    }
    #configurator .workspace {
        grid-template-columns:1fr
    }
    #configurator .summary {
        position:static;
        margin-top:4px
    }
    #configurator .summary .preview {
        height:260px
    }
    #configurator .section-heading h2 {
        font-size:20px
    }
    #configurator .machine {
        border-radius:22px;
        padding:17px 13px
    }
    #configurator .machine img {
        height:195px
    }
    #configurator .machine h3 {
        font-size:16px
    }
    #configurator .white-panel {
        padding:21px;
        border-radius:22px
    }
    #configurator .order-fields {
        grid-template-columns:1fr
    }
    #configurator .product-grid {
        gap:8px
    }
    #configurator .product {
        padding:12px
    }
    #configurator .summary {
        border-radius:22px
    }
    #configurator .capacity-banner {
        padding:12px;
        font-size:12px
    }
    #configurator .capacity-banner strong {
        font-size:18px
    }
    #configurator footer {
        flex-wrap:wrap;
        padding:28px 20px
    }
    #configurator footer p {
        width:100%;
        margin:0
    }
}
@media print {
    #configurator header,
    #configurator nav,
    #configurator .breadcrumb,
    #configurator .steps,
    #configurator .builder,
    #configurator footer,
    #configurator button,
    #configurator .primary,
    #configurator .secondary,
    #configurator dialog {
        display:none!important
    }
    #configurator main {
        padding:0;
        background:white
    }
    #configurator .workspace {
        display:block
    }
    #configurator .summary {
        position:static;
        max-width:600px;
        margin:auto
    }
    #configurator .preview {
        height:170px
    }
}
#configurator .header-main {
    display:grid;
    grid-template-columns:1fr auto 1fr;
    min-height:96px
}
#configurator .header-main .brand {
    justify-self:center
}
#configurator .header-search {
    display:flex;
    align-items:center;
    width:165px;
    background:#f5f7f7;
    border-radius:25px;
    height:42px
}
#configurator .header-search input {
    border:0;
    background:transparent;
    min-width:0;
    font-size:13px;
    padding:10px 0 10px 18px;
    outline-offset:0
}
#configurator .header-search button {
    background:none;
    padding:10px 15px 10px 7px
}
#configurator .header-search svg {
    width:17px;
    height:17px
}
#configurator .header-actions {
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:28px
}
#configurator .header-actions svg {
    width:25px;
    height:25px;
    display:block
}
#configurator .cart-link {
    color:#c60b79
}
#configurator .supplies-menu {
    position:relative;
    font-size:14px;
    text-transform:uppercase;
    font-weight:600
}
#configurator .supplies-menu summary {
    list-style:none;
    cursor:pointer
}
#configurator .supplies-menu>div {
    position:absolute;
    z-index:10;
    top:30px;
    left:-15px;
    min-width:210px;
    background:#fff;
    padding:15px;
    box-shadow:0 8px 20px #0002;
    border-radius:8px
}
#configurator .supplies-menu>div a {
    display:block;
    padding:8px 0
}
#configurator .color-picker-layout {
    display:grid;
    grid-template-columns:155px 1fr;
    align-items:center;
    gap:25px
}
#configurator .color-photo {
    display:flex;
    flex-direction:column;
    align-items:center;
    border:1px solid #e0e7eb;
    border-radius:16px;
    padding:12px
}
#configurator .color-photo img {
    height:185px;
    max-width:100%;
    object-fit:contain
}
#configurator .color-photo span {
    font-size:12px;
    text-align:center;
    margin-top:8px;
    color:#65717a
}
#configurator .swatches {
    align-content:center
}
#configurator .enter-footer {
    background:#353535;
    color:#eee;
    max-width:none;
    margin:0;
    padding:55px 30px 38px;
    display:block;
    font-size:14px
}
#configurator .footer-columns {
    max-width:1340px;
    margin:auto;
    display:grid;
    grid-template-columns:1fr .8fr 1.25fr 1.65fr 1fr;
    gap:30px
}
#configurator .footer-columns a {
    margin-bottom:5px
}
#configurator .footer-contact>span {
    display:block
}
#configurator .footer-contact>span a {
    display:inline
}
#configurator .social-links {
    display:flex;
    gap:18px;
    align-items:center;
    margin-top:4px
}
#configurator .social-links a {
    font-size:24px;
    font-weight:700;
    line-height:1
}
#configurator .newsletter-link {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    background:#fff;
    color:#555;
    border-radius:2px;
    padding:11px 14px;
    margin-top:4px;
    font-size:13px;
    min-height:40px
}
#configurator .newsletter-link span {
    font-size:23px;
    line-height:1
}
#configurator .payments img {
    width:190px;
    max-width:100%;
    height:auto
}
#configurator .payments p {
    font-size:14px;
    font-weight:400;
    line-height:1.4;
    margin:10px 0
}
#configurator .payments p span {
    color:#d5ec58
}
#configurator .enter-footer .footer-tagline {
    color:#ff789b;
    text-align:center;
    font-size:24px;
    font-weight:400;
    margin:38px 0 15px
}
#configurator .copyright {
    text-align:center;
    font-size:12px;
    color:#ccc
}
#configurator .footer-columns a:hover {
    text-decoration:underline
}
#configurator .header-actions a:hover {
    opacity:.7
}
@media(max-width:1000px) {
    #configurator .footer-columns {
        grid-template-columns:1fr 1fr 1.5fr;
        gap:25px
    }
    #configurator .newsletter {
        grid-column:1/3
    }
    #configurator .payments {
        grid-column:3
    }
    #configurator .header-main .brand img {
        width:210px
    }
}
@media(max-width:760px) {
    #configurator .header-main {
        grid-template-columns:1fr auto;
        padding:20px 18px;
        gap:17px
    }
    #configurator .header-main .header-search {
        display:flex;
        grid-row:2;
        grid-column:1/-1;
        width:100%;
        height:38px
    }
    #configurator .header-main .brand {
        grid-row:1;
        grid-column:1;
        justify-self:start
    }
    #configurator .header-main .brand img {
        width:182px
    }
    #configurator .header-actions {
        grid-column:2;
        grid-row:1;
        gap:20px
    }
    #configurator .supplies-menu {
        font-size:12px
    }
    #configurator .supplies-menu>div {
        position:fixed;
        top:175px;
        left:20px;
        right:20px
    }
    #configurator .color-picker-layout {
        grid-template-columns:120px 1fr;
        gap:18px
    }
    #configurator .color-photo img {
        height:155px
    }
    #configurator .swatches {
        gap:14px
    }
    #configurator .footer-columns {
        grid-template-columns:1fr 1fr
    }
    #configurator .footer-contact {
        grid-column:1/-1
    }
    #configurator .newsletter {
        grid-column:1/-1
    }
    #configurator .payments {
        grid-column:1/-1
    }
    #configurator .enter-footer {
        padding:32px 22px
    }
    #configurator .enter-footer .footer-tagline {
        font-size:21px;
        margin-top:25px
    }
    #configurator .header-main .header-search button {
        margin-left:auto
    }
}
#configurator .price-breakdown {
    border-top:1px solid #e1e6e9;
    padding-top:10px;
    margin-top:15px
}
#configurator .price-breakdown:empty {
    display:none
}
#configurator .price-breakdown>div {
    display:flex;
    justify-content:space-between;
    gap:14px;
    margin:8px 0;
    font-size:12px
}
#configurator .price-breakdown b {
    white-space:nowrap;
    font-weight:600
}
#configurator .upgrade-check {
    display:flex;
    gap:10px;
    align-items:center;
    font-weight:400;
    margin:15px 0
}
#configurator .upgrade-check input {
    width:18px;
    height:18px;
    accent-color:#3dcc24
}
#configurator #mechanismOptions>div,
#configurator #upgradeOptions>div {
    margin-bottom:15px
}
#configurator .starting-price {
    flex-wrap:wrap
}
#configurator .starting-price strong {
    font-size:25px
}

/* Catalog reference: /category/vending-machines. Step badges: /page/discount. */

#configurator .header-main {
    max-width:1400px;
    padding:25px 20px;
    min-height:96px
}
#configurator .header-main .brand img {
    width:215px;
    height:40px
}
#configurator nav {
    max-width:1400px;
    padding:12px 20px 17px;
    gap:25px
}
#configurator nav a,
#configurator .supplies-menu {
    font-size:14px;
    font-weight:600
}
#configurator .breadcrumb {
    max-width:1400px;
    padding:17px 20px;
    font-size:13px
}
#configurator main {
    background:var(--blue);
    padding:30px 40px 65px
}
#configurator .heading {
    max-width:1400px;
    margin:auto;
    text-align:center
}
#configurator .heading h1 {
    font:800 46px/1.2 'Figtree','Open Sans',sans-serif;
    letter-spacing:0;
    text-transform:uppercase;
    margin:0 0 5px;
    padding: 0;
}
#configurator .heading p {
    font:700 20px/1.4 'Open Sans',sans-serif;
    margin:0
}
#configurator .steps {
    max-width:1400px;
    margin:32px auto 38px;
    gap:28px;
    border:0
}
#configurator .steps a {
    background:transparent;
    border-radius:0;
    padding:0;
    font-size:16px;
    font-weight:700;
    gap:16px;
    align-items:center
}
#configurator .steps b,
#configurator .section-heading>b {
    display:grid;
    place-items:center;
    background:#ff93c6;
    color:white;
    flex:0 0 45px;
    min-width:45px;
    width:45px;
    height:45px;
    border-radius:50%;
    font:700 16px/24px 'Open Sans',sans-serif
}
#configurator .steps a:nth-child(2) b,
#configurator #machines .section-heading>b {
    background:#04dbf4
}
#configurator .steps a:nth-child(3) b,
#configurator #finish .section-heading>b {
    background:#febf3c
}
#configurator .workspace {
    max-width:1400px;
    gap:32px;
    grid-template-columns:minmax(0,1fr) 340px
}
#configurator .white-panel {
    background:#fff;
    border-radius:40px;
    padding:30px;
    margin-top:28px
}
#configurator .section-heading {
    gap:16px;
    margin-bottom:25px;
    align-items:center
}
#configurator .section-heading h2 {
    font:700 25px/1.25 'Figtree','Open Sans',sans-serif;
    letter-spacing:0;
    margin:0 0 6px
}
#configurator .section-heading h2:after {
    display:none
}
#configurator .section-heading p {
    font-size:14px;
    line-height:1.5;
    color:var(--muted);
    margin:0
}
#configurator .product,
#configurator .pill {
    border:1px solid #b7c5cf;
    background:#fff;
    border-radius:8px;
    padding:14px 16px;
    font-size:16px;
    font-weight:600;
    text-align:left;
    width:auto;
}
#configurator .product small {
    font-size:13px;
    font-weight:400;
    color:var(--muted);
    margin-top:4px
}
#configurator .product:hover,
#configurator .pill:hover {
    border-color:#9aaab5;
    background:#f5f8fa
}
#configurator .product[aria-pressed=true],
#configurator .pill[aria-pressed=true] {
    background:#fff6cf;
    border-color:#e1b400;
    box-shadow:inset 0 0 0 1px #e1b400
}
#configurator .pill {
    font-size:14px;
    padding:11px 15px
}
#configurator .capacity-banner {
    border-radius:12px;
    background:#e2ebf2
}
#configurator .capacity-banner strong {
    font-size:20px;
    font-weight:700
}
#configurator .machines {
    gap:28px 18px;
    grid-template-columns:repeat(3,minmax(0,1fr))
}
#configurator .machine {
    background:transparent;
    border:0;
    border-radius:0;
    padding:0 0 8px;
    box-shadow:none!important
}
#configurator .machine:hover {
    border:0
}
#configurator .machine img {
    display:block;
    width:100%;
    height:285px;
    margin:0 0 16px;
    background:white;
    border:2px solid transparent;
    border-radius:40px;
    object-fit:contain;
    padding:18px;
    transition:border-color .15s
}
#configurator .machine:hover img {
    border-color:#b5c6d2
}
#configurator .machine[aria-pressed=true] img {
    border-color:#e1b400;
    box-shadow:0 0 0 1px #e1b400
}
#configurator .machine .check {
    top:17px;
    left:18px;
    z-index:1;
    border-color:#a9b8c2;
    margin: 0;
}
#configurator .machine[aria-pressed=true] .check {
    background:#ffcc00;
    border-color:#e1b400
}
#configurator .machine[aria-pressed=true] .check:after {
    color:#363636
}
#configurator .machine h3 {
    font:700 24px/1.4 'Open Sans',sans-serif;
    margin:0 14px 4px
}
#configurator .dimensions {
    font-size:13px;
    color:var(--muted);
    margin:0 14px
}
#configurator .card-capacity {
    font:600 14px/1.4 'Open Sans',sans-serif;
    margin:12px 14px 16px;
    color:#363636
}
#configurator .card-price {
    font:600 16px/1.4 'Open Sans',sans-serif;
    margin: auto 14px 15px
}
#configurator .card-price b {
    display:block;
    font:700 24px/1.4 'Open Sans',sans-serif;
    color:#363636
}
#configurator .machine-cta {
    display:block;
    align-self:flex-start;
    margin:0 14px;
    background:#ffcc00;
    border-radius:2px;
    padding:15px 24px;
    font:700 13px/13px 'Open Sans',sans-serif;
    text-transform:uppercase;
    color:#363636
}
#configurator .machine:hover .machine-cta {
    background:#f2bf00
}
#configurator .machine[aria-pressed=true] .machine-cta {
    background:#363636;
    color:white
}
#configurator legend,
#configurator label {
    font-size:15px;
    font-weight:600;
    margin-bottom:10px
}
#configurator fieldset {
    margin-bottom:28px
}
#configurator input,
#configurator select,
#configurator textarea {
    border:1px solid #adbcc6;
    border-radius:6px;
    padding:11px 14px;
    font-size:15px;
    min-height:42px;
    background:white
}
#configurator textarea {
    resize:vertical
}
#configurator .upgrade-check {
    font-size:15px;
    font-weight:400
}
#configurator .upgrade-check input {
    min-height:0;
    accent-color:#e0b300
}
#configurator .helper,
#configurator .source-note {
    font-size:12px;
    color:var(--muted)
}
#configurator .swatch[aria-pressed=true] {
    box-shadow:0 0 0 3px #e0b300
}
#configurator .color-photo {
    border-radius:22px
}
#configurator .summary {
    background:#fff;
    border-radius:40px;
    padding:28px
}
#configurator .summary-label {
    font:700 14px/1.4 'Open Sans',sans-serif;
    letter-spacing:0;
    color:#363636;
    border:0;
    padding:0
}
#configurator .summary h2 {
    font:700 27px/1.2 'Figtree','Open Sans',sans-serif;
    margin:10px 0 18px
}
#configurator .summary .preview {
    height:230px;
    background:#fff
}
#configurator .starting-price {
    font-size:14px
}
#configurator .starting-price strong {
    font:700 26px/1.3 'Open Sans',sans-serif;
    letter-spacing:0
}
#configurator .price-breakdown>div {
    font-size:13px
}
#configurator .primary,
#configurator .secondary {
    border-radius:2px;
    padding:15px 20px;
    font:700 13px/1.3 'Open Sans',sans-serif;
    text-transform:uppercase;
    letter-spacing:0
}
#configurator .primary {
    background:#ffcc00;
    color:#363636
}
#configurator .primary:hover {
    background:#f2bf00
}
#configurator .secondary {
    background:white;
    border:1px solid #9eafb9;
    color:#363636
}
#configurator .secondary:hover {
    background:#edf3f7
}
#configurator .primary:disabled {
    background:#e3e8eb;
    color:#687680;
    opacity:1
}
#configurator .secondary:disabled {
    opacity:.6
}
#configurator dialog {
    border-radius:28px;
    margin: auto;
}
#configurator dialog h2 {
    font:700 27px/1.25 'Figtree','Open Sans',sans-serif
}
#configurator .enter-footer {
    font-size:14px
}
#configurator .enter-footer .footer-tagline {
    font-weight:400
}
#configurator .newsletter-link {
    border-radius:2px
}
@media(min-width:1500px) {
    #configurator .machine img {
        height:320px
    }
}
@media(max-width:1200px) {
    #configurator main {
        padding-left:24px;
        padding-right:24px
    }
    #configurator .workspace {
        grid-template-columns:minmax(0,1fr) 310px;
        gap:24px
    }
    #configurator .machines {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
    #configurator .machine h3 {
        font-size:22px
    }
    #configurator .summary {
        padding:24px
    }
    #configurator .heading h1 {
        font-size:40px
    }
}
@media(max-width:760px) {
    #configurator .header-main {
        padding:20px 18px
    }
    #configurator .header-main .brand img {
        width:182px;
        height:36px
    }
    #configurator nav {
        padding:10px 18px 15px
    }
    #configurator nav a,
    #configurator .supplies-menu {
        font-size:12px
    }
    #configurator main {
        padding:26px 16px 40px
    }
    #configurator .heading h1 {
        font-size:32px
    }
    #configurator .heading p {
        font-size:16px
    }
    #configurator .steps {
        gap:12px;
        margin:25px 0 30px
    }
    #configurator .steps a {
        flex-direction:column;
        align-items:flex-start;
        gap:10px;
        font-size:12px
    }
    #configurator .steps b {
        flex-basis:40px;
        min-width:40px;
        width:40px;
        height:40px
    }
    #configurator .workspace {
        grid-template-columns:1fr;
        gap:24px
    }
    #configurator .white-panel,
    #configurator .summary {
        padding:22px;
        border-radius:28px
    }
    #configurator .section-heading h2 {
        font-size:23px
    }
    #configurator .section-heading p {
        font-size:13px
    }
    #configurator .section-heading {
        gap:12px
    }
    #configurator .machines {
        gap:24px 12px
    }
    #configurator .machine img {
        height:220px;
        border-radius:28px;
        padding:12px
    }
    #configurator .machine h3 {
        font-size:18px;
        line-height:1.3;
        margin-left:5px;
        margin-right:5px
    }
    #configurator .dimensions,
    #configurator .card-capacity,
    #configurator .card-price {
        margin-left:5px;
        margin-right:5px
    }
    #configurator .dimensions {
        font-size:12px
    }
    #configurator .card-capacity {
        font-size:13px
    }
    #configurator .card-price {
        font-size:13px
    }
    #configurator .card-price b {
        font-size:21px
    }
    #configurator .machine-cta {
        font-size:11px;
        padding:13px 16px;
        margin:0 5px
    }
    #configurator .product {
        font-size:14px;
        padding:12px
    }
    #configurator .product small {
        font-size:12px
    }
    #configurator .summary h2 {
        font-size:27px
    }
}
@media(max-width:380px) {
    #configurator .product-grid {
        grid-template-columns:1fr
    }
    #configurator .machine img {
        height:190px
    }
    #configurator .machine h3 {
        font-size:16px
    }
    #configurator .machine-cta {
        padding:12px
    }
    #configurator .card-price b {
        font-size:19px
    }
}
@media print {
    #configurator main,
    #configurator .summary {
        background:#fff
    }
    #configurator .heading h1 {
        font-size:28px
    }
    #configurator .machine-cta {
        display:none
    }
}
#configurator .quantity-discounts {
    margin-top:12px
}
#configurator .quantity-discounts .discount-status {
    margin:0 0 8px;
    font-size:14px;
    font-weight:600;
    line-height:1.5
}
#configurator .quantity-discounts summary {
    display:list-item;
    cursor:pointer;
    color:#007c9f;
    font-size:14px;
    text-decoration:underline;
    text-underline-offset:3px;
    color: var(--color-link);
}
#configurator .quantity-discounts summary:focus-visible {
    outline:2px solid #009bc4;
    outline-offset:4px
}
#configurator .discount-table {
    width:100%;
    border-collapse:collapse;
    margin-top:12px;
    font-size:14px
}
#configurator .discount-table th,
#configurator .discount-table td {
    padding:8px 12px;
    border-bottom:1px solid #d8e2e9;
    text-align:left
}
#configurator .discount-table thead {
    background:#f0f5f8
}
#configurator .discount-table tbody th {
    font-weight:400
}
#configurator .discount-table td {
    text-align:right
}
#configurator .discount-table tr.active {
    background:#fff4bf
}
#configurator .discount-table tr.active th,
#configurator .discount-table tr.active td {
    font-weight:700
}
#configurator #finish .contact-fields {
    margin-top:32px;
    padding-top:0
}
/* Consistent form rhythm and catalog-aligned cards. */
#configurator .steps {
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:24px
}
#configurator .steps a:nth-child(4) b {
    background:#c7acd8
}
#configurator #finish fieldset {
    margin-bottom:32px
}
#configurator #finish .section-heading {
    margin-bottom:24px
}
#configurator .helper,
#configurator .source-note,
#configurator .section-heading p,
#configurator .product small,
#configurator .dimensions,
#configurator .color-photo span,
#configurator .product-source,
#configurator .lead-time,
#configurator .specs span,
#configurator .price-breakdown>div,
#configurator dl div {
    font-size:14px
}
#configurator .helper {
    line-height:1.6
}
#configurator .machine {
    text-align:center;
    align-items:stretch
}
#configurator button.machine * {
    cursor:pointer;
}
#configurator .machine img {
    height:350px
}
#configurator .machine h3 {
    min-height:2.8em
}
#configurator .machine .dimensions {
    min-height:3em
}
#configurator .machine .card-capacity {
    min-height:2.8em
}
#configurator .machine .machine-cta {
    align-self:center;
    min-width:150px;
    margin-top:0
}
#configurator .summary .preview {
    height:145px
}
#configurator .summary-key {
    display:grid;
    gap:8px;
    margin:16px 0
}
#configurator .summary-key>div {
    display:flex;
    justify-content:space-between;
    gap:16px;
    font-size:14px
}
#configurator .summary-key strong {
    text-align:right
}
#configurator .configuration-details {
    margin:16px 0
}
#configurator .configuration-details>summary {
    font-size:14px;
    color:#007c9f;
    cursor:pointer;
    text-decoration:underline;
    text-underline-offset:3px;
    color: var(--color-link);
}
#configurator .configuration-details>summary:focus-visible {
    outline:2px solid #008fbc;
    outline-offset:4px
}
#configurator .summary .price-note {
    margin:12px 0;
    font-size:14px
}
#configurator .summary .lead-time {
    font-size:14px
}
#configurator .summary:has(.configuration-details[open]) {
    position:static
}
@media(min-width:1500px) {
    #configurator .machine img {
        height:380px
    }
}
@media(max-width:1100px) {
    #configurator .workspace {
        grid-template-columns:minmax(0,1fr)
    }
    #configurator .summary {
        position:static;
        max-width:720px;
        width:100%;
        justify-self:center
    }
    #configurator .machines {
        grid-template-columns:repeat(3,minmax(0,1fr))
    }
    #configurator .machine img {
        height:300px
    }
    #configurator .steps {
        gap:16px
    }
    #configurator .steps a {
        font-size:14px;
        gap:10px
    }
}
@media(max-width:760px) {
    #configurator .steps {
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:18px
    }
    #configurator .steps a {
        flex-direction:row;
        align-items:center;
        font-size:14px;
        padding:0
    }
    #configurator .machines {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
    #configurator .machine img {
        height:260px
    }
    #configurator .machine h3 {
        font-size:20px;
        min-height:2.6em
    }
    #configurator .machine .machine-cta {
        min-width:0;
        width:calc(100% - 10px);
        font-size:12px;
        padding:14px 8px
    }
    #configurator .summary .preview {
        height:145px
    }
}
@media(max-width:380px) {
    #configurator .machines {
        grid-template-columns:1fr
    }
    #configurator .machine img {
        height:320px
    }
    #configurator .machine h3,
    #configurator .machine .dimensions,
    #configurator .machine .card-capacity {
        min-height:0
    }
    #configurator .steps a {
        font-size:13px;
        gap:8px
    }
}
/* Compact card text without reserved empty rows. */
#configurator .machine h3 {
    min-height:0;
    margin-bottom:6px
}
#configurator .machine .dimensions {
    min-height:0;
    line-height:1.5
}
#configurator .machine .card-capacity {
    min-height:0;
    margin-top:10px;
    margin-bottom:12px
}
#configurator .machine .card-price {
    margin-top:auto;
    margin-bottom:12px
}
/* Unified vertical rhythm for configuration controls. */
#configurator #finish fieldset {
    margin-bottom:24px
}
#configurator #coinMechanismStep {
    margin-bottom:24px
}
#configurator #coinMechanismStep .helper {
    margin:7px 0 0
}
#configurator #upgradeOptions .upgrade-check {
    margin:12px 0 4px
}
#configurator #upgradeOptions .helper {
    margin:4px 0 12px
}
#configurator .lighting-option {
    margin-top:18px
}
#configurator .lighting-option>p:first-child {
    margin-bottom:8px!important
}
#configurator .lighting-option .helper {
    margin:7px 0 0
}
#configurator #logoTextField {
    margin-top:12px
}
#configurator #refillHelp {
    margin:7px 0 0
}
#configurator .quantity-discounts {
    margin-top:8px
}
#configurator #finish .contact-fields {
    margin-top:32px;
    margin-bottom:24px
}
#configurator #finish .contact-fields .helper {
    margin:7px 0 0
}
#configurator #finish>.order-fields {
    gap:16px
}
/* Enter typography and homepage CTA interaction. */
#configurator .heading h1 {
    color:#363636;
    float: none;
}
#configurator .section-heading h2,
#configurator .summary h2,
#configurator dialog h2 {
    font-family:'Figtree','Open Sans',sans-serif;
    font-weight:800;
    color:#363636
}
#configurator button,
#configurator input,
#configurator select,
#configurator textarea {
    font-family:'Open Sans',Arial,sans-serif
}
#configurator .machine h3,
#configurator .card-price b {
    font-family:'Open Sans',Arial,sans-serif;
    font-weight:700;
    color:#363636
}
#configurator .primary,
#configurator .secondary,
#configurator .machine-cta,
#configurator .newsletter-link {
    font-family:'Open Sans',Arial,sans-serif;
    font-size:13px;
    font-weight:700;
    line-height:1;
    text-transform:uppercase;
    letter-spacing:0;
    border-radius:2px;
    transition:none
}
#configurator .primary,
#configurator .machine-cta {
    background:#ffcc00;
    color:#363636
}
#configurator .primary:not(:disabled):hover,
#configurator .primary:not(:disabled):active,
#configurator .machine:not(:disabled):hover .machine-cta,
#configurator .machine:not(:disabled):active .machine-cta {
    background:#ffcc00;
    color:#cd1575;
    transform:none
}
#configurator .primary:not(:disabled):hover,
#configurator .secondary:not(:disabled):hover,
#configurator .machine:not(:disabled):hover .machine-cta,
#configurator .newsletter-link:hover {
    animation:enter-button-blur .2s linear forwards
}
#configurator .secondary:not(:disabled):hover,
#configurator .secondary:not(:disabled):active {
    background:#fff;
    color:#cd1575
}
#configurator .machine[aria-pressed=true] .machine-cta {
    background:#363636;
    color:#fff
}
#configurator .primary:focus-visible,
#configurator .secondary:focus-visible,
#configurator .newsletter-link:focus-visible {
    outline:3px solid #cd1575;
    outline-offset:3px
}
@keyframes enter-button-blur {
    0% {
        filter:blur(0)
    }
    50% {
        filter:blur(2px)
    }
    100% {
        filter:blur(0)
    }
}
@media(prefers-reduced-motion:reduce) {
    #configurator .primary:not(:disabled):hover,
    #configurator .secondary:not(:disabled):hover,
    #configurator .machine:not(:disabled):hover .machine-cta,
    #configurator .newsletter-link:hover {
        animation:none
    }
}

@media screen and (max-width: 600px) {
    #configurator * {
        font-size: 107% !important;
    }
}