#product {position: relative; padding-left: calc(50% + 6rem); aspect-ratio: 2.5;}
#product .grid {
    left: 0; 
    top: 0;
    position: absolute; 
    display: flex;
    width: 50%;
    aspect-ratio: 1.25;
    background: #FAF7F5;
    justify-content: center;
}
#product .grid li {background: none;}
#product .grid li a {aspect-ratio: 1.25;}
#product .grid li a span.book {transform: translate(-50%,-50%); height: 65%}
#product .grid li a.twoimages > span.book:nth-child(1) {transform: translate(-80%,calc(-65% - 0.5rem)) scale(0.8); z-index: 2;}
#product .grid li a.twoimages > span.book:nth-child(2) {transform: translate(-20%,calc(-35% - 0.5rem)) scale(0.8); z-index: 1;}
#product .grid li a.nohover:hover {background: transparent!important;}
#product > *:not(.grid) {padding-right: 6rem;}
#product > h1 {color: var(--black); margin-bottom: 2.4rem;}
#product > .author, #product > .price {font-weight: 300; font-size: 1.6rem; margin-bottom: 2.4rem;}
#product > .price {color: var(--blue); font-weight: 400;}
#product h1 + h2 {font-size: 2rem; margin-top: -1.75rem; margin-bottom: 2.6rem;}


@media only screen and (max-width: 60rem) {
    #product {padding-left: 0;} 
    #product h1 {margin-bottom: 1.2rem;}
    #product h1 + h2  {margin-top: 0;}
    #product > :not(.grid) {padding-right: 0;}
    #product .grid {position: relative; width: 100%; margin-bottom: 2.4rem!important;}
    #buybutton > div > input {display: none;}
}

.description {
    font-family: 'Inter';
    font-size: 1.2rem;
    line-height: 1.7;
    font-weight: 400;
}
.description ul.imagegrid {display: flex; gap: 5rem; flex-wrap: wrap; margin: 4.5rem 0!important;}
.description ul.imagegrid li {display: none;}
.description ul.imagegrid li a {display: block;}
.description ul.imagegrid li a img {display: block;}
.description ul.imagegrid li.half {width: calc(50% - 2.5rem); display: block;}
.description ul.imagegrid li.full {width: 100%; display: block;}

@media only screen and (max-width: 60rem) {
    .description ul.imagegrid {gap: 7vw;}
    .description ul.imagegrid li {width: 100%!important;}
}

.delivery_and_stock {font-family: "IBM Plex Serif"; font-weight: 400; font-size: 1.66rem; margin-top: 3rem;}
.delivery_and_stock.error {color: red;}
section.sample {font-size: 2.33rem; padding-block: 8rem!important; font-family: "IBM Plex Serif";}
section.sample a {color: var(--black); text-decoration-color: var(--blue); position: relative; line-height: 1.3; display: inline-block;}
section.sample a::after {
    position: absolute;
    content: "";
    right: 0;
    top: 50%;
    margin-right: -2.5rem;
    width: 2rem;
    height: 2rem;
    background: url(/p/img/arrowdown.svg) center bottom / auto 1.35rem no-repeat;
    transform: translateY(-50%);
}
@media only screen and (max-width: 600px) {
    section.sample a {font-size: 1.66rem;}
    section.sample a::after {content: none;}
}

section.author {background: var(--blue)!important; color: white; line-height: 1.3!important; padding-block: 5rem 6rem!important;}
section.author .container {display: flex;}
section.author .container > h2 {color: white; flex: 3;}
section.author .container > div {flex: 4;}
section.author .container > div p {font-size: 1.6rem!important; font-family: 'Inter'!important; font-weight: 300;}
section.author .container > div p + p {margin-top: 2.08rem;}
section.author .container > div strong {font-weight: 600;}

@media only screen and (max-width: 600px) {
    section.author .container {flex-direction: column;}
}

section.description {padding-block: 7rem 8rem!important;}
section.description .description > * {margin-top: 0; margin-bottom: 2.08rem;}

a.anchor {position: absolute; pointer-events: none;}
a.blue {color: var(--blue); text-decoration: none;}
a.blue:hover {
    text-decoration: underline;
    text-decoration-color: var(--blue);
    text-underline-offset: 0.25em;
    text-decoration-thickness: 0.1rem;
}

#filters {max-width: 100%;}
#filters > div > fieldset:first-child {max-width: 43rem; margin-inline: auto; width: 100%;}

fieldset {border: 0; margin-bottom: 2.66rem;}
fieldset + fieldset {margin-top: 2.66rem;}
fieldset legend {display: none;}
fieldset ul {display: flex; justify-content: center; gap: 1rem 3rem; margin: 0!important; flex-wrap: wrap;}
fieldset ul li {list-style: none;}
fieldset ul li label {font-weight: 600; color: var(--black); cursor: pointer;}
fieldset ul li label:hover {color: var(--blue);}
fieldset ul li input[type="radio"] {display: none;}
fieldset ul li input[type="radio"]:checked + label {color: var(--blue); text-decoration: underline; text-underline-offset: 0.25em;}
fieldset ul li span.count {display: none;}
@media only screen and (max-width: 600px) {
    fieldset ul {flex-direction: column; align-items: flex-start;}
}


.card {
    background: #FAF7F5;
    padding: 4rem;
}
form.card > div textarea, form.card > div input:not([type="submit"]),
form.boxes > div textarea, form.boxes > div input:not([type="submit"]) {
    background: white;
    border: 0.1333rem solid #F2EFED;
    padding-inline: 1rem;
}
form.boxes > div textarea {min-height: 30rem; padding-block: 1rem;}
form.boxes > div textarea, form.boxes > div input:not([type="submit"]), form.boxes > div select {background-color: #F2EFED;}
form.boxes > div label {margin-bottom: 0.2rem;}
form.boxes > div label.well {margin-bottom: 1rem;}
form.boxes {max-width: 100%;}
form.boxes > div select,
form.boxes > div .fakeselect,
form.boxes > div input:not([type="submit"]) {
    max-width: 50rem;
}
form.boxes > div select {background-position: calc(100% - 1rem) center; width: 100%;}

li[draggable="true"] {font-weight: 300;}

#filterbuttons .label {font-weight: 700;}
#filterbuttons .buttons {margin-block: 0.25rem 2.66rem;}
#filterbuttons .buttons > a {display: inline-block; border: 0.1rem solid gray; text-decoration: none; padding-inline: 0.8rem; color: var(--black); margin-right: 0.2rem;}
#filterbuttons .buttons > a:not(.selected):hover {color: var(--blue); border-color: var(--blue);}
#filterbuttons .buttons > a.selected {color: white; background: var(--blue); border-color: var(--blue); opacity: 1;}

.accountpage {display: flex; flex-direction: row-reverse;}
.accountpage .accountcontent {flex-grow: 1; padding-right: 10rem; width: 100%;}
.accountpage .accountcontent h2 {margin-top: 0;}
.accountpage .accountmenu {padding-top: 0.85rem; position: relative; width: 30rem; border-left: 1px solid rgba(0,0,0,0.15); padding-left: 2.25rem;}
.accountpage .accountmenu ul {margin-left: 0;}
.accountpage .accountmenu ul li {list-style: none; font-weight: 600;}
.accountpage .accountmenu ul li a {text-decoration: none; display: inline-block; padding-bottom: 0.25rem;}
.accountpage .accountmenu ul li.selected a {color: var(--blue); text-decoration: underline; padding-bottom: 0.4rem;}

.error {color: red;}
.hr {height: 1px; background: silver; position: relative; margin-block: 3rem; max-width: 35rem;}
.hr > span {position: absolute; transform: translate(-50%,-50%); left: 50%; background: white; padding: 0.5rem; color: #999;}

.delen {margin-block: 2.4rem 0;}
@media only screen and (max-width: 60rem) {
    .delen {display: none;}
}

#buybutton {margin-top: 2.8rem;}
#buybutton > div {display: flex; gap: 2.25rem;}
#buybutton > div input {
    height: 3rem;
    line-height: 3rem;
    width: 3rem;
    text-align: center;
    -webkit-appearance: none;
    appearance: textfield;
    border: 0.2rem solid #F2EFED;
    font-weight: 300;
    font-size: 1.2rem;
}
#buybutton > div .button {margin-top: 0;}

table.cart {width: 100%; border-collapse: collapse;}
table.cart tr.cartline {border-top: 0.1333rem solid #F2EFED;}
table.cart tr.cartline:last-child {border-bottom: 0.1333rem solid #F2EFED;}
table.cart tr.cartline td {padding-block: 1.3rem; padding-inline: 2rem; white-space: nowrap; line-height: 1.4;}
table.cart tr.cartline td > *:not(img) {padding-block: 0.25rem;}
table.cart tr.cartline td:first-child {padding-inline: 0;}
table.cart tr.cartline td:nth-child(2) {white-space: normal;}
table.cart tr.cartline td:last-child {padding-right: 0; white-space: nowrap; text-align: right;}
table.cart tr.cartline img {height: 8.66rem; width: auto; max-width: none; display: block; border: 1px solid #F2EFED;}
table.cart tr.cartline .ean {color: silver;}
table.cart tr.cartline input[type="number"] {
    background: white;
    border: 0.1333rem solid #F2EFED;
    padding-inline: 1rem;
    padding-block: 0.4rem;
    font-family: 'Inter';
    font-weight: 300;
    font-size: 1.2rem;
    line-height: 1.7;
    width: 3.5rem;
    text-align: center;
    appearance: textfield;
    -webkit-appearance: none;
    -moz-appearance: textfield;
}
table.cart tr.cartline input[type="number"] + a {margin-left: 1rem;}

table.cart tr.cart_total td {text-align: right;}
table.cart:not(.minimal) tr.cart_total td {padding-block: 1.3rem;}
table.cart tr.cart_total td:last-child {padding-right: 0; white-space: nowrap; text-align: right; width: 7rem; color: var(--blue);}
table.cart.minimal + table.cart.minimal {margin-top: 1rem;}
table.cart.minimal + table.cart.minimal td {padding-top: 0.2rem;}

@media only screen and (max-width: 60rem) {
    table.cart tr.cartline input[type="number"] + a,
    table.cart tr.cartline td:last-child {display: none;}
    table.cart tr.cartline td:nth-last-child(2) {padding-right: 0;}
}

.cartbuttons {display: flex; justify-content: space-between; align-items: flex-end; margin-top: 1rem;}
@media only screen and (max-width: 600px) {
    .cartbuttons {justify-content: flex-start;}
}

form#discount {max-width: 22rem; margin-top: 2rem; display: flex; align-items: center;}
form#discount > div {flex-direction: row; line-height: 2.75;}
form#discount label {display: none;}
form#discount input[type="text"] {background: white; margin-right: 1.25rem;}
form#discount input[type="text"]:placeholder-shown + div a {opacity: 0;}

.hidden {opacity: 0; pointer-events: none; position: absolute;}

form > div.checkbox > label {position: relative; line-height: 2.1;}
form input[type="checkbox"] {position: absolute; opacity: 0;}
form input[type="checkbox"] + span {margin-left: 2.25rem;}
form input[type="checkbox"] + span::before {
    content: "";
    width: 1.5rem;
    height: 1.5rem;
    position: absolute;
    background: white;
    left: 0rem;
    top: 0.5rem;
    border: 1px solid silver;
    cursor: pointer;
}
form input[type="checkbox"]:checked + span::after {
    content: "";
    width: calc(1.5rem - 6px);
    height: calc(1.5rem - 6px);
    position: absolute;
    background: var(--blue) url(/img/check.svg) 55% center / 65% auto no-repeat;
    left: calc(0rem + 3px);
    top: calc(0.5rem + 3px);
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  display: none;
}
input, input[type] { -webkit-appearance: none; -webkit-border-radius: 0; border-radius: 0;}


#checkout_steps {display: block; text-align: center; color: rgba(0,0,0,0.25); font-size: 1.1rem; margin-left: 0!important;}
#checkout_steps li {width: 110px; text-align: left; display: inline-block; border-top: 1px solid rgba(0,0,0,0.15); padding-top: 10px;}
#checkout_steps li.past {border-color: var(--blue);}
#checkout_steps li:last-child {border: 0; width: 0px;}
#checkout_steps li > span > * {
    white-space: nowrap;
    display: inline-block;
    -ms-transform: translateX(-50%); /* IE 9 */
    -webkit-transform: translateX(-50%); /* Chrome, Safari, Opera */
    transform: translateX(-50%);
}
#checkout_steps li > span > a {color: var(--blue); text-decoration: none;}
#checkout_steps li > span > a:before {content: ""; position: absolute; bottom: 0; width: 100%; height: 3.5rem;}
#checkout_steps li > *:before {position: absolute; margin: -16px 0 0 -5px; width: 11px; height: 11px; content: ""; 
    border-radius: 99px; border: 2px solid white; 
    box-shadow: 0px 0px 0.1px 1px #bbb; background: white;
}
#checkout_steps li.past > span:before,
#checkout_steps li.current > span:before {box-shadow: 0px 0px 0.1px 1px var(--blue); background: var(--blue);}

@media only screen and (max-width: 600px) {
    #checkout_steps {margin: 0 auto; width: 9rem;}
    #checkout_steps li {display: block; width: auto; border-top: none; border-left: 1px solid rgba(0,0,0,0.15); margin-left: 8px;}
    #checkout_steps li > ::before {margin: -16px 0 0 -8px;}
    #checkout_steps li > span > * {transform: translate(17px, -20px);}
    #checkout_steps li > span > a:before {height: 100%; left: 0; width: 2rem; margin-left: -2rem;}
}



label.well {padding: 1rem 1.5rem 1.2rem 3.6rem; margin-bottom: 0.75rem; cursor: pointer; position: relative; line-height: 1.5; background: #FAF7F5; border: 2px solid transparent; font-weight: 400;}
label.well > span:first-child {position: absolute; right: 1.5rem; color:  var(--blue); display: block;}
label.well > span:first-child span {display: block; text-align: right;}
label.well > span:first-child span:nth-child(2) {color: var(--black);}
label.well > span:last-child {padding-right: 6rem;}
label.well.blue {border-color: var(--blue);}
label.well .floatlink {top: 1rem;}
label.well input {position: absolute;}
label.well select {font-weight: 400; font-size: 1.2rem; padding-left: 0;}
label.well img {vertical-align: middle; display: inline-block; height: 1.5rem; margin-right: 0.3rem; position: relative; bottom: 0.15rem;}
label.well input[type="radio"] {position: absolute; opacity: 0;}
label.well input[type="radio"] + span::before {
    content: "";
    width: 1.5rem;
    height: 1.5rem;
    position: absolute;
    background: white;
    left: 1.2rem;
    top: 1.1rem;
    border: 1px solid silver;
    cursor: pointer;
    border-radius: 100%;
}
label.well input[type="radio"]:checked + span::after {
    content: "";
    width: calc(1.5rem - 8px);
    height: calc(1.5rem - 8px);
    position: absolute;
    background: var(--blue);
    left: calc(1.2rem + 4px);
    top: calc(1.1rem + 4px);
    border-radius: 100%;
}

.overview_columns {display: flex; gap: 10rem;}
.overview_columns > div {flex: 1;}

.well.medium {
    padding: 1.5rem 1.75rem 1.65rem 1.75rem;
    position: relative;
    background: #FAF7F5;
    margin-bottom: 1rem;
}
.floatlink {
    position: absolute;
    top: 0;
    right: 0;
}
.well .floatlink {
    top: 1.5rem;
    right: 1.75rem;
}

@media only screen and (max-width: 60rem) {
    .overview_columns {flex-direction: column; gap: 5rem; padding-bottom: 2.5rem;}
    .well.medium {border-top: 0.1333rem solid #F2EFED; background: none; padding-inline: 0;}
    .well.medium:first-child {border-top: 0; margin-top: -1.5rem;}
    .well .floatlink {right: 0;}
}


.admintable {border-spacing: 0; padding: 0; margin: 3rem 0; width: 100%; font-weight: 300;}
.admintable tr td, .admintable tr th {padding: 0.25rem 0.75rem; text-align: left;}
.admintable tr td:last-child, .admintable tr th:last-child {text-align: right;}
.admintable tr td span {
    display: -webkit-box;
    line-clamp: 1;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    height: auto !important;
    overflow: hidden;
}
.admintable tr td:not(:last-child) a,
.admintable tr th a {text-decoration: none;}
.admintable tr.inactive td:not(:last-child), .admintable tr.inactive td:not(:last-child) a {
    color: silver!important; 
    text-decoration: line-through;
    text-decoration-color: silver;
}
.admintable tr:nth-child(odd) td {background: #FAF7F5;}
.admintable tr.deleted td:not(.actions) {text-decoration: line-through;}
.admintable tr td:last-child {text-align: right;}
.admintable tr td:last-child a {color: var(--blue); text-decoration: none; font-weight: 400;}
.admintable tr td:last-child a:hover {text-decoration: underline;}

.desktoponly {display: none;}
@media only screen and (min-width: 60rem) {
    .desktoponly {display: block;}
}


dl {position: relative; display: flex; flex-wrap: wrap; font-weight: 300;}
dl dt {clear: left; width: 40%; max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
dl dd {width: 60%;}