/*
 * Shop: loaded on shop pages only (functions.php, "Shop (WooCommerce)").
 * WooCommerce's own CSS is off; everything here reuses the site's system:
 * 1px lines in the foreground colour, IBM Plex Mono for labels and data,
 * Riforma for text, the 12-column info row under the menu.
 */

/**** FLOW ROW ****/
/* The second row shows the way through the shop, Shop → Cart → Checkout →
   Done, in the cells of the menu above it. Every step is one link over its
   whole cell; the step you are on is filled, a step you cannot take yet is
   faint. */
.shop-flow-steps {
    display: grid;
    grid-template-columns: repeat(5, calc((100% - 1rem) / 6)) minmax(0, 1fr);
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: 'IBM Plex Mono', monospace;
    font-size: var(--xs-font-size);
}

.shop-flow-steps > li {
    border-right: 1px solid var(--fgcolor);
}

/* As high as a menu cell above it (0.75rem plus one line), the text centred
   on its capitals: IBM Plex Mono at line-height 1 has 0.177em above the
   capitals and 0.125em under the baseline, hence the 0.026em. */
.shop-step {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    box-sizing: border-box;
    height: 100%;
    padding: calc(0.375rem - 0.026em) 1rem calc(0.375rem + 0.026em);
    color: inherit;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

/* The arrow sits in a box as wide as the circle of the menu cell above
   (1rem plus its 1px border on both sides), so it stands right under it. */
.shop-step-arrow {
    flex: none;
    width: calc(1rem + 2px);
    text-align: center;
}

a.shop-step:hover,
.shop-step.is-current {
    background: var(--fgcolor);
    color: var(--bgcolor);
    text-decoration: none;
}

.shop-step.is-off {
    opacity: 0.4;
}

.shop-buy {
    margin: 0;
}

/**** BUTTONS ****/
/* One button for the whole shop: mono, uppercase, a 1px frame, inverts on hover. */
.ss-shop .shop-buy-button,
.ss-shop .shop-product-buy-button,
.ss-shop .button,
.ss-shop button[type="submit"],
.ss-shop input[type="submit"],
.ss-shop .checkout-button,
.ss-shop #place_order {
    display: inline-block;
    box-sizing: border-box;
    margin: 0;
    /* Capitals centred in the frame: IBM Plex Mono at line-height 1 has
       0.177em above the capitals and 0.113em under the baseline. */
    padding: calc(0.35rem - 0.032em) 0.75rem calc(0.35rem + 0.032em);
    border: 1px solid var(--fgcolor);
    border-radius: 0;
    background: transparent;
    color: var(--fgcolor);
    font-family: 'IBM Plex Mono', monospace;
    font-size: var(--xs-font-size);
    line-height: 1;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
}

.ss-shop .shop-buy-button:hover,
.ss-shop .shop-product-buy-button:hover,
.ss-shop .button:hover,
.ss-shop button[type="submit"]:hover,
.ss-shop input[type="submit"]:hover,
.ss-shop .checkout-button:hover,
.ss-shop #place_order:hover {
    background: var(--fgcolor);
    color: var(--bgcolor);
    text-decoration: none;
}

.ss-shop .button:disabled,
.ss-shop .button.disabled,
.ss-shop button[type="submit"]:disabled {
    opacity: 0.4;
    cursor: default;
}

/**** NOTICES ****/
.ss-shop .woocommerce-notices-wrapper:empty {
    display: none;
}

.ss-shop .woocommerce-message,
.ss-shop .woocommerce-info,
.ss-shop .woocommerce-error,
.ss-shop .woocommerce-notice {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin: 0;
    padding: 1rem;
    border-bottom: 1px solid var(--fgcolor);
    list-style: none;
    font-family: 'IBM Plex Mono', monospace;
    font-size: var(--xs-font-size);
    line-height: 1.3;
}

/* WooCommerce puts the button before the text; the text reads first. */
.ss-shop .woocommerce-message .button,
.ss-shop .woocommerce-info .button {
    order: 2;
}

.ss-shop .woocommerce-error li {
    width: 100%;
}

/* Inside the page content the notices line up with the text, not the screen edge. */
.shop-page-content .woocommerce-message,
.shop-page-content .woocommerce-info,
.shop-page-content .woocommerce-error,
.ss-shop #payment .woocommerce-notice,
.ss-shop #payment .woocommerce-info {
    padding-left: 0;
    padding-right: 0;
}

.ss-shop #payment ul.payment_methods > li.woocommerce-notice {
    border-bottom: 0;
}

/**** OVERVIEW ****/
/* The grid view of /work/: three columns, 1px lines between the cells.
   Every product takes four rows of the grid (title, image, description,
   price) and shares them with its neighbours through subgrid: the image row
   is as tall as the tallest image, so descriptions and prices line up. */
/* The overview is laid on the cells of the menu (five of (100% - 1rem) / 6,
   the last one 1rem wider): a product takes two cells, so its lines run on
   from the lines of the menu and the steps above it. */
.shop-grid {
    display: grid;
    grid-template-columns: repeat(5, calc((100% - 1rem) / 6)) minmax(0, 1fr);
    row-gap: 0;
}

.shop-item {
    position: relative;
    display: grid;
    grid-column: span 2;
    grid-row: span 4;
    grid-template-rows: subgrid;
    row-gap: 0;
    padding: 1rem;
    border-right: 1px solid var(--fgcolor);
    border-bottom: 1px solid var(--fgcolor);
    font-family: 'IBM Plex Mono', monospace;
    font-size: var(--xs-font-size);
    line-height: 1.3;
}

.shop-item:nth-child(3n) {
    border-right: 0;
}

/* Title above the image, on the text line of the cell like in /work/. */
.shop-item-title {
    margin-top: -0.327em;
    margin-bottom: 0.5rem;
    font: inherit;
}

/* The title link covers the whole cell, so the cell opens the product. */
.shop-item-link {
    color: inherit;
    text-decoration: none;
}

.shop-item-link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.shop-item:hover .shop-item-link {
    text-decoration: underline;
}

/* The image is shown whole at its own proportions, right under the title,
   so there is no empty band around it. The availability label sits on the
   image's own corner. */
.shop-item-image {
    align-self: start;
}

.shop-item-figure {
    position: relative;
    display: block;
}

.shop-item-figure img {
    display: block;
    width: 100%;
    height: auto;
}

.shop-item-stock {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0.3rem 0.5rem 0.2rem;
    background: var(--bgcolor);
    color: var(--fgcolor);
    font-size: calc(var(--xs-font-size) / 1.25);
    line-height: 1.2;
    white-space: nowrap;
}

.shop-item.outofstock .shop-item-figure img {
    opacity: 0.4;
}

/* Description and price under the image. */
.shop-item-description {
    margin: 0.75rem 0 0;
    font: inherit; /* style.css sizes every p on tablets; here it stays mono */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

/* The price on the left, Add to cart on the right of the cell. */
.shop-item-price {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: center;
    margin-top: 0.25rem;
}

/* Add to cart lies above the cell link. */
.ss-shop .shop-item-buy {
    position: relative;
    z-index: 2;
    margin: 0;
}

.shop-item-price del {
    opacity: 0.5;
}

.shop-item-price ins {
    text-decoration: none;
}

.shop-empty {
    padding: 1rem;
    font-family: 'IBM Plex Mono', monospace;
    font-size: var(--xs-font-size);
}

.ss-shop .woocommerce-pagination ul {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    font-family: 'IBM Plex Mono', monospace;
    font-size: var(--xs-font-size);
}

/**** PRODUCT ****/
/* The slideshow on the left (8 columns); on the right (4 columns, from the
   fifth cell of the menu) title, price, stock, Add to cart and the text. */
.shop-product-layout {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--grid-gap);
    align-items: start;
    padding: var(--grid-gap);
}

.shop-product-media {
    grid-column: 1 / span 8;
}

/* The slideshow: a frame in the shape of the first image, no taller than the
   window under the header. Every image fits inside it, centred. */
.shop-slideshow {
    position: relative;
    width: 100%;
    max-height: calc(100vh - var(--header-height, 0px) - 2 * var(--grid-gap));
    overflow: hidden;
}

.shop-slide {
    position: absolute;
    inset: 0;
    margin: 0;
    visibility: hidden;
}

.shop-slide.is-active {
    visibility: visible;
}

.shop-product-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Left half back, right half on; the arrow cursors of the landing page. */
.shop-slide-prev,
.shop-slide-next {
    position: absolute;
    top: 0;
    z-index: 2;
    width: 50%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

.shop-slide-count {
    margin-top: 0.5rem;
    font-family: 'IBM Plex Mono', monospace;
    font-size: var(--xs-font-size);
    line-height: 1;
}

.shop-product-info {
    grid-column: 9 / span 4;
    position: sticky;
    top: calc(var(--header-height, 0px) + var(--grid-gap));
    font-family: 'IBM Plex Mono', monospace;
    font-size: var(--xs-font-size);
    line-height: 1.4;
}

/* The title large; price and stock in the mono of the data, as in the overview. */
.shop-product-title {
    margin: 0 0 0.75rem;
    font-family: 'Riforma', system-ui, sans-serif;
    font-size: var(--l-font-size);
    font-weight: normal;
    line-height: 1.1;
}

.shop-product-price {
    margin: 0;
}

.shop-product-price del {
    opacity: 0.5;
}

.shop-product-price ins {
    text-decoration: none;
}

.shop-product-stock {
    margin: 0.25rem 0 1rem;
}

.ss-shop .shop-product-info .shop-product-buy-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    padding: calc(0.8rem - 0.032em) 1rem calc(0.8rem + 0.032em);
    background: var(--fgcolor);
    color: var(--bgcolor);
}

.ss-shop .shop-product-info .shop-product-buy-button:hover {
    background: transparent;
    color: var(--fgcolor);
}

.ss-shop .shop-product-info .shop-product-text {
    margin-top: 2rem;
    font-size: inherit;
    line-height: inherit;
}

.shop-product-text p {
    font-size: inherit;
    line-height: inherit;
}

.shop-product-text > :last-child {
    margin-bottom: 0;
}

/* A product with choices: the WooCommerce form under the price. */
.shop-product-form form.cart {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
    margin: 0;
}

.shop-product-form form.variations_form {
    display: block;
}

.shop-product-form .quantity input.qty {
    width: 3.5rem;
    height: 100%;
    padding: 0;
    border: 1px solid var(--fgcolor);
    text-align: center;
    font-family: 'IBM Plex Mono', monospace;
    font-size: var(--xs-font-size);
}

.ss-shop .shop-product-form .single_add_to_cart_button {
    flex: 1 1 auto;
    padding: calc(0.8rem - 0.032em) 1rem calc(0.8rem + 0.032em);
    background: var(--fgcolor);
    color: var(--bgcolor);
}

.ss-shop .shop-product-form .single_add_to_cart_button:hover {
    background: transparent;
    color: var(--fgcolor);
}

.shop-product-form table.variations {
    width: 100%;
    margin-bottom: 1rem;
}

.shop-product-form table.variations th,
.shop-product-form table.variations td {
    display: block;
    padding: 0 0 0.5rem;
    text-align: left;
}

.shop-product-form .woocommerce-variation-add-to-cart {
    display: flex;
    gap: 0.5rem;
}

.shop-product-form .reset_variations {
    font-size: calc(var(--xs-font-size) / 1.25);
}

/* WooCommerce prints its own stock line ("10 in stock"); the page has it. */
.shop-product-form .stock {
    display: none;
}

/**** MINICART ****/
/* Slides in on the right after Add to cart or a click on the cart count,
   over the cart column of the header (the last two of its six cells). */
.ss-minicart {
    position: fixed;
    inset: 0;
    z-index: 3000;
    pointer-events: none;
}

.ss-minicart.is-open {
    pointer-events: auto;
}

.ss-minicart-backdrop {
    position: absolute;
    inset: 0;
}

.ss-minicart-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    box-sizing: border-box;
    width: calc(100% - 4 * (100% - 1rem) / 6);
    display: flex;
    flex-direction: column;
    background: var(--bgcolor);
    color: var(--fgcolor);
    border-left: 1px solid var(--fgcolor);
    font-family: 'IBM Plex Mono', monospace;
    font-size: var(--xs-font-size);
    line-height: 1.3;
    outline: none;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.25s ease, visibility 0s linear 0.25s;
}

.ss-minicart.is-open .ss-minicart-panel {
    transform: none;
    visibility: visible;
    transition: transform 0.25s ease;
}

.ss-minicart-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.5rem 1rem 0.25rem;
    border-bottom: 1px solid var(--fgcolor);
}

.ss-minicart-title {
    margin: 0;
    font-family: 'Riforma', system-ui, sans-serif;
    font-size: var(--xs-font-size);
    font-weight: normal;
    line-height: 1;
    text-transform: uppercase;
}

.ss-minicart-close {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    line-height: 1;
    text-transform: uppercase;
    cursor: pointer;
}

.ss-minicart-close:hover {
    text-decoration: underline;
}

.ss-minicart-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0 1rem 1rem;
}

.ss-minicart-items {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ss-minicart-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 1rem;
    align-items: baseline;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--fgcolor);
}

.ss-minicart-name {
    color: inherit;
    text-decoration: none;
}

.ss-minicart-name:hover {
    text-decoration: underline;
}

.ss-minicart-subtotal {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 0 1.5rem;
}

.ss-minicart-subtotal small {
    font-size: inherit;
    opacity: 0.7;
}

.ss-minicart-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ss-minicart-checkout,
.ss-minicart-view {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 48px;
    padding: calc(0.8rem - 0.032em) 1rem calc(0.8rem + 0.032em);
    border: 1px solid var(--fgcolor);
    color: var(--fgcolor);
    line-height: 1;
    text-transform: uppercase;
    text-decoration: none;
}

.ss-minicart-checkout {
    background: var(--fgcolor);
    color: var(--bgcolor);
}

.ss-minicart-checkout:hover {
    background: transparent;
    color: var(--fgcolor);
    text-decoration: none;
}

.ss-minicart-view:hover {
    background: var(--fgcolor);
    color: var(--bgcolor);
    text-decoration: none;
}

.ss-minicart-empty {
    margin: 0;
    padding: 0.75rem 0;
    font-size: inherit;
    line-height: inherit;
}

/* While the product goes into the cart. */
.ss-shop [data-add-to-cart].is-busy {
    opacity: 0.5;
    cursor: progress;
}

@media (prefers-reduced-motion: reduce) {
    .ss-minicart-panel,
    .ss-minicart.is-open .ss-minicart-panel {
        transition: none;
    }
}

@media (max-width: 768px) {
    .ss-minicart-panel {
        width: 100%;
        border-left: 0;
    }
}

.ss-shop .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/**** FORMS ****/
/* Labels like the menu labels, fields as a single line to write on. */
.ss-shop label {
    display: block;
    margin-bottom: 0.25rem;
    font-family: 'IBM Plex Mono', monospace;
    font-size: calc(var(--xs-font-size) / 1.5);
    text-transform: lowercase;
}

.ss-shop label.checkbox,
.ss-shop label.woocommerce-form__label-for-checkbox {
    display: flex;
    gap: 0.5rem;
    align-items: baseline;
    font-size: var(--xs-font-size);
    text-transform: none;
}

.ss-shop .required {
    text-decoration: none;
    border: 0;
}

.ss-shop input[type="text"],
.ss-shop input[type="email"],
.ss-shop input[type="tel"],
.ss-shop input[type="number"],
.ss-shop input[type="password"],
.ss-shop select,
.ss-shop textarea,
.ss-shop .select2-container .select2-selection--single {
    box-sizing: border-box;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0.25rem 0;
    border: 0;
    border-bottom: 1px solid var(--fgcolor);
    border-radius: 0;
    background: transparent;
    color: var(--fgcolor);
    font-family: 'Riforma', system-ui, sans-serif;
    font-size: var(--s-font-size);
    line-height: 1.3;
}

.ss-shop textarea {
    min-height: 6rem;
}

.ss-shop input::placeholder,
.ss-shop textarea::placeholder {
    color: var(--fgcolor);
    opacity: 0.35;
}

.ss-shop input:focus,
.ss-shop select:focus,
.ss-shop textarea:focus {
    outline: none;
    border-bottom-width: 2px;
}

.ss-shop input.qty {
    width: 4rem;
    text-align: left;
}

.ss-shop .select2-container .select2-selection--single .select2-selection__rendered {
    padding: 0;
    color: var(--fgcolor);
    line-height: 1.3;
}

.ss-shop .select2-container .select2-selection--single .select2-selection__arrow {
    height: 100%;
}

.ss-shop .select2-dropdown {
    border: 1px solid var(--fgcolor);
    border-radius: 0;
    background: var(--bgcolor);
    color: var(--fgcolor);
    font-family: 'IBM Plex Mono', monospace;
    font-size: var(--xs-font-size);
}

.ss-shop .select2-search__field {
    border: 0;
    border-bottom: 1px solid var(--fgcolor);
    background: transparent;
    color: var(--fgcolor);
}

.ss-shop .select2-results__option--highlighted[aria-selected],
.ss-shop .select2-results__option--highlighted[data-selected] {
    background: var(--fgcolor);
    color: var(--bgcolor);
}

.ss-shop .form-row {
    margin: 0 0 1.25rem;
}

.ss-shop .woocommerce-invalid input,
.ss-shop .woocommerce-invalid select {
    border-bottom-style: dashed;
}

/**** CART AND CHECKOUT ****/
.shop-page-content {
    padding: 1rem 1rem 4rem;
    font-size: var(--s-font-size);
}

/* Tables: rows separated by 1px lines, data in mono. */
.ss-shop table.shop_table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'IBM Plex Mono', monospace;
    font-size: var(--xs-font-size);
    line-height: 1.3;
}

.ss-shop table.shop_table th,
.ss-shop table.shop_table td {
    padding: 0.75rem 1rem 0.75rem 0;
    border-bottom: 1px solid var(--fgcolor);
    text-align: left;
    vertical-align: top;
}

.ss-shop table.shop_table thead th {
    padding-top: 0;
    font-size: calc(var(--xs-font-size) / 1.5);
    text-transform: lowercase;
}

.ss-shop table.shop_table th:last-child,
.ss-shop table.shop_table td:last-child {
    padding-right: 0;
}

/**** CART ****/
/* The cart lies on the cells of the menu, edge to edge like the rows of the
   header: the image in the first cell, the name in the second and third,
   price, quantity and subtotal in the fourth, fifth and sixth, the × at the
   far right. Quantities update by themselves (assets/js/shop-cart.js), so the
   Update cart row is gone. */
body.woocommerce-cart .shop-page-content {
    padding: 0 0 4rem;
}

body.woocommerce-cart .shop-page-content .woocommerce-message,
body.woocommerce-cart .shop-page-content .woocommerce-info,
body.woocommerce-cart .shop-page-content .woocommerce-error {
    padding: 0.75rem 1rem;
}

.ss-shop table.cart,
.ss-shop table.cart thead,
.ss-shop table.cart tbody {
    display: block;
    width: 100%;
}

.ss-shop table.cart tr {
    display: grid;
    grid-template-columns: repeat(5, calc((100% - 1rem) / 6)) minmax(0, 1fr);
    align-items: start;
    border-bottom: 1px solid var(--fgcolor);
}

.ss-shop table.cart th,
.ss-shop table.cart td {
    display: block;
    padding: 0.75rem 1rem;
    border: 0;
}

.ss-shop table.cart thead th {
    padding: 0.5rem 1rem 0.35rem;
}

.ss-shop table.cart .product-thumbnail {
    grid-column: 1;
    grid-row: 1;
}

.ss-shop table.cart .product-thumbnail img {
    display: block;
    width: 6rem;
    height: auto;
}

.ss-shop table.cart .product-name {
    grid-column: 2 / span 2;
    grid-row: 1;
}

.ss-shop table.cart .product-price {
    grid-column: 4;
    grid-row: 1;
}

.ss-shop table.cart .product-quantity {
    grid-column: 5;
    grid-row: 1;
}

.ss-shop table.cart .product-subtotal {
    grid-column: 6;
    grid-row: 1;
}

.ss-shop table.cart .product-remove {
    grid-column: 6;
    grid-row: 1;
    justify-self: end;
}

.ss-shop table.cart a.remove {
    color: inherit;
    text-decoration: none;
}

.ss-shop table.cart a.remove:hover {
    text-decoration: underline;
}

/* The quantity on the text line of its cell: no frame, a line underneath. */
.ss-shop table.cart .quantity input.qty {
    box-sizing: border-box;
    width: 4rem;
    margin: 0;
    padding: 0 0 0.25rem;
    border: 0;
    border-bottom: 1px solid var(--fgcolor);
    border-radius: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    line-height: inherit;
}

.ss-shop table.cart tr:has(td.actions) {
    display: none;
}

/* The totals take the last three cells: the labels under the price, the
   amounts under quantity and subtotal, Proceed to checkout under those. */
.ss-shop .cart-collaterals {
    display: grid;
    grid-template-columns: repeat(5, calc((100% - 1rem) / 6)) minmax(0, 1fr);
    margin-top: 3rem;
}

.ss-shop .cart_totals {
    grid-column: 4 / -1;
    display: grid;
    grid-template-columns: subgrid;
}

.ss-shop .cart_totals > h2 {
    grid-column: 1 / -1;
    padding: 0 1rem;
}

.ss-shop .cart_totals table,
.ss-shop .cart_totals tbody {
    display: contents;
}

.ss-shop .cart_totals tr {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    border-top: 1px solid var(--fgcolor);
}

.ss-shop .cart_totals tr:last-child {
    border-bottom: 1px solid var(--fgcolor);
}

.ss-shop .cart_totals .shop_table th,
.ss-shop .cart_totals .shop_table td {
    padding: 0.75rem 1rem;
    border: 0;
}

.ss-shop .cart_totals th {
    grid-column: 1;
}

.ss-shop .cart_totals td {
    grid-column: 2 / -1;
}

.ss-shop .cart_totals h2,
.ss-shop #order_review_heading,
.ss-shop .woocommerce-billing-fields h3,
.ss-shop .woocommerce-shipping-fields h3,
.ss-shop .woocommerce-additional-fields h3,
.ss-shop .woocommerce-order h2,
.ss-shop .woocommerce-customer-details h2 {
    margin: 0 0 1rem;
    font-family: 'IBM Plex Mono', monospace;
    font-size: calc(var(--xs-font-size) / 1.5);
    text-transform: lowercase;
}

.ss-shop .wc-proceed-to-checkout {
    grid-column: 2 / -1;
    padding: 1.5rem 1rem 0;
}

.ss-shop .wc-proceed-to-checkout .checkout-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    padding: calc(0.8rem - 0.032em) 1rem calc(0.8rem + 0.032em);
    background: var(--fgcolor);
    color: var(--bgcolor);
}

.ss-shop .wc-proceed-to-checkout .checkout-button:hover {
    background: transparent;
    color: var(--fgcolor);
}

.ss-shop .includes_tax,
.ss-shop .woocommerce-shipping-destination {
    display: block;
    opacity: 0.6;
    font-size: calc(var(--xs-font-size) / 1.25);
}

.ss-shop ul#shipping_method {
    list-style: none;
}

.ss-shop ul#shipping_method li {
    display: flex;
    gap: 0.5rem;
    align-items: baseline;
}

.ss-shop ul#shipping_method label {
    display: inline;
    font-size: var(--xs-font-size);
    text-transform: none;
}

.ss-shop .cart-empty {
    font-family: 'IBM Plex Mono', monospace;
    font-size: var(--xs-font-size);
}

.ss-shop .return-to-shop {
    margin-top: 1.5rem;
}

/* Checkout: customer details left (7 columns), order right (5 columns). */
.ss-shop form.checkout {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    /* Row 1: error notices (only after a failed order). Left: the details.
       Right: the order, then the ways to pay. */
    grid-template-rows: auto auto 1fr;
    column-gap: var(--grid-gap);
    align-items: start;
}

.ss-shop form.checkout > .woocommerce-NoticeGroup {
    grid-column: 1 / -1;
    grid-row: 1;
}

.ss-shop #customer_details {
    grid-column: 1 / span 6;
    grid-row: 2 / span 2;
}

.ss-shop #order_review_heading {
    grid-column: 8 / span 5;
    grid-row: 2;
}

.ss-shop #order_review {
    grid-column: 8 / span 5;
    grid-row: 3;
}

/* Apple Pay / Google Pay (functions.php moves it here): the first of the ways
   to pay, the other options follow under "or". */
.ss-shop #order_review #wc-stripe-express-checkout-element {
    margin-top: 2rem !important;
}

.ss-shop #order_review wc-order-attribution-inputs {
    display: none;
}

/* The plugin writes "— OR —" here; a line and a label replace it. */
.ss-shop #wc-stripe-express-checkout-button-separator {
    margin: 1rem 0 0 !important;
    padding-top: 0.35rem;
    border-top: 1px solid var(--fgcolor);
    font-size: 0;
    text-align: left !important;
}

.ss-shop #wc-stripe-express-checkout-button-separator::after {
    content: "or";
    font-family: 'IBM Plex Mono', monospace;
    font-size: calc(var(--xs-font-size) / 1.5);
}

/* With Apple Pay / Google Pay above, the payment list follows the "or" line. */
.ss-shop #wc-stripe-express-checkout-button-separator + .woocommerce-checkout-payment,
.ss-shop #wc-stripe-express-checkout-button-separator ~ #payment {
    margin-top: 0.75rem;
}

.ss-shop #customer_details .col-2 {
    margin-top: 2rem;
}

.ss-shop #ship-to-different-address {
    margin: 0 0 1rem;
}

.ss-shop #payment {
    margin-top: 2rem;
    font-family: 'IBM Plex Mono', monospace;
    font-size: var(--xs-font-size);
}

.ss-shop #payment ul.payment_methods {
    list-style: none;
    border-bottom: 1px solid var(--fgcolor);
}

.ss-shop #payment ul.payment_methods > li {
    padding: 0.75rem 0;
}

.ss-shop #payment ul.payment_methods > li > label {
    display: inline;
    font-size: var(--xs-font-size);
    text-transform: none;
}

.ss-shop #payment ul.payment_methods > li img {
    display: none;
}

.ss-shop #payment .payment_box {
    padding: 0.75rem 0 0;
}

.ss-shop #payment .place-order {
    margin-top: 1.5rem;
}

.ss-shop .woocommerce-terms-and-conditions-wrapper {
    margin-bottom: 1.5rem;
    line-height: 1.3;
}

.ss-shop .woocommerce-privacy-policy-text p {
    font-size: calc(var(--xs-font-size) / 1.25);
    line-height: 1.3;
}

.ss-shop #place_order {
    width: 100%;
    padding: 0.75rem;
}

/* Thank you page */
.ss-shop .woocommerce-order {
    font-family: 'IBM Plex Mono', monospace;
    font-size: var(--xs-font-size);
    line-height: 1.3;
}

.ss-shop ul.woocommerce-order-overview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 1rem;
    margin: 1rem 0 3rem;
    list-style: none;
}

.ss-shop .woocommerce-order-overview strong {
    display: block;
    font-size: var(--s-font-size);
    font-family: 'Riforma', system-ui, sans-serif;
}

.ss-shop .woocommerce-order section {
    margin-bottom: 3rem;
}

.ss-shop address {
    font-style: normal;
}

/**** MOBILE ****/
@media (max-width: 1100px) {
    /* Two a row: three cells each. */
    .shop-item {
        grid-column: span 3;
    }

    .shop-item:nth-child(3n) {
        border-right: 1px solid var(--fgcolor);
    }

    .shop-item:nth-child(2n) {
        border-right: 0;
    }
}

@media (max-width: 768px) {
    /* The menu has four equal columns here: two products a row, two each. */
    .shop-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .shop-item {
        grid-column: span 2;
    }

    /* The four steps share the width of the screen. */
    .shop-flow-steps {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        font-size: min(var(--xs-font-size), 3.2vw);
    }

    .shop-flow-steps > li:last-child {
        border-right: 0;
    }

    /* Centred, like the menu items above (they have no circles here). */
    .shop-step {
        justify-content: center;
        min-height: var(--ss-mobile-row-height);
        padding: 0 0.5rem;
    }

    .shop-step-arrow {
        width: auto;
    }

    .shop-buy-button {
        white-space: nowrap;
    }

    /* Product: one column, the slideshow then title, price, Add to cart, text. */
    .shop-product-layout {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 2rem;
        padding: 0.75rem;
    }

    .shop-slideshow {
        max-height: none;
    }

    .shop-product-info {
        position: static;
    }

    .ss-shop form.checkout {
        display: block;
    }

    .ss-shop #order_review_heading {
        margin-top: 2rem;
    }

    /* The cart on the four columns of the mobile menu: the image in the
       first, name, price, quantity and subtotal under each other in the
       other three, the × at the far right. */
    .ss-shop table.cart thead {
        display: none;
    }

    .ss-shop table.cart tr,
    .ss-shop .cart-collaterals {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .ss-shop table.cart tr.cart_item {
        padding: 0.4rem 0;
    }

    .ss-shop table.cart tr.cart_item td {
        padding: 0.35rem 0.75rem;
    }

    .ss-shop table.cart .product-thumbnail {
        grid-row: 1 / span 4;
    }

    .ss-shop table.cart .product-thumbnail img {
        width: 100%;
    }

    .ss-shop table.cart .product-name {
        grid-column: 2 / -1;
        padding-right: 2.5rem;
    }

    .ss-shop table.cart .product-price,
    .ss-shop table.cart .product-quantity,
    .ss-shop table.cart .product-subtotal {
        grid-column: 2 / -1;
        grid-row: auto;
    }

    .ss-shop table.cart .product-remove {
        grid-column: 4;
    }

    .ss-shop table.cart .product-quantity .quantity {
        display: inline-block;
    }

    .ss-shop table.cart tr.cart_item td[data-title]:not(.product-name)::before {
        content: attr(data-title) " ";
        font-size: calc(var(--xs-font-size) / 1.5);
        text-transform: lowercase;
    }

    .ss-shop .cart_totals {
        grid-column: 1 / -1;
    }

    .ss-shop .cart_totals > h2,
    .ss-shop .cart_totals .shop_table th,
    .ss-shop .cart_totals .shop_table td,
    .ss-shop .wc-proceed-to-checkout {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .ss-shop .wc-proceed-to-checkout {
        grid-column: 1 / -1;
    }
}

@media (max-width: 700px) {
    .shop-item {
        grid-column: 1 / -1;
    }

    .shop-item,
    .shop-item:nth-child(3n) {
        border-right: 0;
    }
}