form .flex-gap-wrapper {
    margin-top: calc((-1) * var(--gap));
    margin-left: calc((-1) * var(--gap));
}

form .flex-gap-item {
    margin-top: var(--gap);
    margin-left: var(--gap);
}

form .flex-span {
    flex: 1 0 calc(100% - var(--gap));
}

form .entity {
    margin-top: 0;
    display: flex;
    flex-flow: wrap;
}

form .entity-name {
    flex: 0 0 10em;
    padding: var(--half-gap) 0;
    white-space: nowrap;
}

form .entity-value {
    padding: var(--half-gap);
    flex: 1 0 10em;
}

form .patterns {
    display: flex;
    flex-flow: wrap;
}

form .patterns .pattern-radio-button {
    display: none;
}

/* edit here, add line with increasing numerical index */
form .patterns input:nth-of-type(1):checked ~ div:not(:nth-of-type(1)),
form .patterns input:nth-of-type(2):checked ~ div:not(:nth-of-type(2)),
form .patterns input:nth-of-type(3):checked ~ div:not(:nth-of-type(3)),
form .patterns input:nth-of-type(4):checked ~ div:not(:nth-of-type(4)),
form .patterns input:nth-of-type(5):checked ~ div:not(:nth-of-type(5)),
form .patterns input:nth-of-type(6):checked ~ div:not(:nth-of-type(6)) {
    display: none;
}
/* edit end */

form .patterns input:last-of-type:checked ~ div:last-of-type {
    display: none;
}

form .patterns input:not(:last-of-type):checked ~ div:last-of-type {
    display: initial;
}    

.pattern-tile {
    margin: 0;
}

form .patterns input:not(:last-of-type):checked ~ .pattern {
    margin-left: auto;
    margin-right: auto;
}

form .patterns input:not(:last-of-type):checked ~ .pattern .pattern-tile {
    border-color: var(--border-color);
    background-color: inherit;
}

form .pattern .pattern-tile .thumbnail {
    border-radius: var(--half-gap);
    width: 100%;
    height: calc(10em - var(--gap));
    object-fit: contain;
    background: #fff;
}

form .pattern-tile .pattern-name {
    height: 2.5em;
}

form .pattern .popup .permanent-box {
    max-height: calc(100% - 2 * var(--zigzag-border-width));
    overflow-y: auto;
}

form .pattern .popup .permanent-box .gallery {
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    align-items: flex-start;
}

form .pattern .popup .permanent-box .gallery .thumbnail {
    width: 15em;
    height: 15em;
    object-fit: contain;
    border: 1px solid var(--border-color);
    background: var(--background-color);
    transition: transform var(--transition-duration);
}

form .pattern .popup .permanent-box .gallery .thumbnail:hover {
    transform: scale(1.5);
}

form .pattern .popup .price {
    font-weight: bold;
}

form .measurements,
form .delivery-types {
    display: none;
}

form input:not(:last-of-type):checked ~ .measurements,
form input:not(:last-of-type):checked ~ .delivery-types {
    display: block;
}

form .measurements .entity {
    display: none;
}

/* edit here, sort pattern IDs alphabetically */
/* #haka-template:checked ~ .measurements .haka-template */
#haka-hemd:checked ~ .measurements .haka-hemd,
#haka-hose:checked ~ .measurements .haka-hose,
#haka-jeanshose:checked ~ .measurements .haka-jeanshose,
#haka-panty:checked ~ .measurements .haka-panty,
#haka-sakko:checked ~ .measurements .haka-sakko,
#haka-weste:checked ~ .measurements .haka-weste {
    display: flex;
}
/* edit end */

form .measurements .entity {
    align-items: center;
}

form .measurements .entity-value {
    flex-grow: 0;
}

form .measurements .information {
    flex: 1 0 10em;
    font-size: var(--size-s);
}

form .delivery-type {
    margin: var(--half-gap) 0;
}

form .contact {
    display: block;
    width: 100%;
    columns: 30em 2;
    column-gap: var(--gap);
}

form textarea {
    min-height: 11.5em;
    box-sizing: border-box;
    resize: none;
}