/* ==========================================================
   Scorched Earth Records — main.css
   Style guide v1.0
   ========================================================== */

/* ----------------------------------------------------------
   1. CSS Custom Properties
   ---------------------------------------------------------- */

:root {
    /* Palette */
    --ink:          #0d0d0d;
    --paper:        #ffffff;
    --mid:          #6b6b6b;
    --rule:         #d9d9d9;
    --blood:        #b01c1c;
    --blood-dark:   #8a1515;
    --stock-in:     #1a5e2a;
    --stock-out:    #b01c1c;
    --link:         #1a4fd6;
    --link-hover:   #12379a;

    /* Typography */
    --font-display: 'Barlow Condensed', sans-serif;
    --font-body:    'Inter', sans-serif;
    --font-mono:    'IBM Plex Mono', monospace;

    /* Type scale */
    --text-xs:   10px;
    --text-sm:   11px;
    --text-base: 15px;
    --text-md:   13px;
    --text-lg:   22px;
    --text-xl:   32px;
    --text-2xl:  48px;

    /* Spacing */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  24px;
    --space-6:  32px;
    --space-7:  48px;
    --space-8:  64px;

    /* Layout */
    --container-max:  1280px;
    --container-pad:  24px;
    --grid-gap:       20px;

    /* Borders */
    --radius:         1px;
    --border-rule:    1px solid var(--rule);
    --border-ink:     1px solid var(--ink);
    --border-blood:   1.5px solid var(--blood);

    /* Header */
    --header-height:  56px;
}

/* ----------------------------------------------------------
   2. Reset and base
   ---------------------------------------------------------- */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    background-color: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 400;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
    text-decoration: none;
}

/* Content links (product descriptions, notices, page/post body copy).
   Structural chrome (nav, cards, tags, buttons) is deliberately excluded
   so it keeps functioning as navigation rather than reading as body text. */
.ser-product-description a,
.ser-enquiry-notice a,
.entry-content a,
.woocommerce-info a,
.woocommerce-message a,
.woocommerce-error a {
    color: var(--link);
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 2px;
    transition: text-decoration-color 0.15s ease, color 0.15s ease;
}

.ser-product-description a:hover,
.ser-enquiry-notice a:hover,
.entry-content a:hover,
.woocommerce-info a:hover,
.woocommerce-message a:hover,
.woocommerce-error a:hover {
    color: var(--link-hover);
    text-decoration-color: currentColor;
}

ul,
ol {
    list-style: none;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
    background: none;
    border: none;
    outline: none;
    appearance: none;
}

button {
    cursor: pointer;
}

/* ----------------------------------------------------------
   3. Typography
   ---------------------------------------------------------- */

/* Display — Barlow Condensed 800 */
.t-display-xl {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--text-2xl);
    line-height: 0.92;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--ink);
}

.t-display-lg {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--text-xl);
    line-height: 1;
    text-transform: uppercase;
    color: var(--ink);
}

.t-display-md {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-lg);
    line-height: 1.1;
    text-transform: uppercase;
    color: var(--ink);
}

/* Body — Inter */
.t-body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 400;
    line-height: 1.65;
    color: var(--ink);
}

.t-body-sm {
    font-family: var(--font-body);
    font-size: var(--text-md);
    font-weight: 400;
    line-height: 1.5;
    color: var(--mid);
}

/* Mono — IBM Plex Mono */
.t-mono {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mid);
}

.t-mono-price {
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
}

/* ----------------------------------------------------------
   4. Layout
   ---------------------------------------------------------- */

.ser-container {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
}

.ser-main {
    padding-block: var(--space-7);
}

/* ----------------------------------------------------------
   5. Header and navigation
   ---------------------------------------------------------- */

.ser-header {
    background: var(--ink);
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid #1a1a1a;
}

.ser-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-height);
    gap: var(--space-5);
}

/* Logo */
.ser-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.ser-logo img {
    height: 28px;
    width: auto;
}

.ser-logo__text {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 20px;
    line-height: 1;
    text-transform: uppercase;
    color: var(--paper);
    letter-spacing: -0.01em;
}

/* Navigation */
.ser-nav {
    display: flex;
    align-items: center;
    flex: 1;
}

.ser-nav__list {
    display: flex;
    align-items: center;
    gap: var(--space-5);
}

.ser-nav__item {
    list-style: none;
}

.ser-nav__link {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--paper);
    transition: color 0.15s ease;
}

.ser-nav__link:hover {
    color: var(--rule);
}

.ser-nav__link--active {
    color: var(--paper);
    border-bottom: 1.5px solid var(--blood);
    padding-bottom: 2px;
}

/* Header right: cart and search */
.ser-header__actions {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-shrink: 0;
}

.ser-header__cart {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--paper);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.ser-header__cart-count {
    background: var(--blood);
    color: var(--paper);
    font-size: var(--text-xs);
    font-weight: 500;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
}

/* ----------------------------------------------------------
   6. Shop filters bar
   ---------------------------------------------------------- */

.ser-shop-filters {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-5);
    border-bottom: var(--border-rule);
    padding-block: var(--space-4);
    margin-bottom: var(--space-6);
    flex-wrap: wrap;
}

.ser-shop-filters__inner {
    display: flex;
    align-items: flex-end;
    gap: var(--space-5);
    flex-wrap: wrap;
    flex: 1;
}

.ser-filter-select-wrap {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 160px;
}

.ser-shop-filters__label {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mid);
    white-space: nowrap;
}

.ser-filter-select {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--ink);
    border: var(--border-rule);
    padding: var(--space-2) var(--space-6) var(--space-2) var(--space-3);
    border-radius: var(--radius);
    background-color: var(--paper);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%230d0d0d' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    appearance: none;
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.ser-filter-select:hover,
.ser-filter-select:focus {
    border-color: var(--ink);
}

.ser-filter-reset {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mid);
    border: var(--border-rule);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius);
    background: var(--paper);
    transition: border-color 0.15s ease, color 0.15s ease;
    white-space: nowrap;
    align-self: flex-end;
}

.ser-filter-reset:hover {
    color: var(--ink);
    border-color: var(--ink);
}

/* ----------------------------------------------------------
   7. Shop result count and ordering
   ---------------------------------------------------------- */

.ser-shop-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-5);
}

@media (max-width: 768px) {
    .ser-shop-filters {
        flex-direction: column;
        align-items: stretch;
    }

    .ser-shop-filters__inner {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-3);
    }

    .ser-filter-select-wrap {
        min-width: 0;
        width: 100%;
    }

    .ser-filter-reset {
        align-self: flex-start;
        margin-top: var(--space-3);
    }

    /* Block cart product grid: 2 columns on mobile */
    /* The block sets columns via data-columns attribute and inline style — override both */
    .wc-block-grid ul.wc-block-grid__products,
    .wc-block-grid[data-columns="4"] ul.wc-block-grid__products,
    .wc-block-grid.has-4-columns ul.wc-block-grid__products {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

.ser-result-count {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mid);
}

/* Override WooCommerce ordering select */
.woocommerce-ordering .orderby {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink);
    border: var(--border-rule);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius);
    background: var(--paper);
    cursor: pointer;
}

/* ----------------------------------------------------------
   8. Product grid
   ---------------------------------------------------------- */

.ser-product-grid,
ul.products {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--grid-gap);
    list-style: none;
}

@media (max-width: 1100px) {
    .ser-product-grid,
    ul.products {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .ser-product-grid,
    ul.products {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .ser-product-grid,
    ul.products {
        grid-template-columns: 1fr;
    }
}

/* ----------------------------------------------------------
   9. Product card
   ---------------------------------------------------------- */

.ser-card,
li.product {
    background: var(--paper);
    border: var(--border-rule);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color 0.15s ease;
}

.ser-card:hover,
li.product:hover {
    border-color: var(--ink);
}

.ser-card__image,
.ser-card a.woocommerce-loop-product__link {
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #e5e5e5;
}

.ser-card__image img,
li.product a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.2s ease;
}

.ser-card:hover .ser-card__image img,
li.product:hover a img {
    opacity: 0.92;
}

.ser-card__body {
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.ser-card__artist {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 15px;
    text-transform: uppercase;
    color: var(--ink);
    line-height: 1.1;
}

.ser-card__title {
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--mid);
    margin-top: 2px;
    line-height: 1.35;
}

.ser-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
    padding-top: 8px;
    border-top: var(--border-rule);
    gap: var(--space-2);
}

/* ----------------------------------------------------------
   10. Format tags
   ---------------------------------------------------------- */

/* Standalone / listing size: 14px */
.ser-fmt-tag {
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--blood);
    border: var(--border-blood);
    padding: 5px 12px;
    border-radius: var(--radius);
    display: inline-block;
    background: var(--paper);
    white-space: nowrap;
}

/* Compact card footer size: 11px */
.ser-card__foot .ser-fmt-tag {
    font-size: 11px;
    padding: 2px 8px;
}

/* Dark background variant */
.ser-fmt-tag--dark {
    color: var(--paper);
    background: transparent;
}

/* ----------------------------------------------------------
   11. Price
   ---------------------------------------------------------- */

.ser-price,
.price {
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
    white-space: nowrap;
}

.ser-price del,
.price del {
    color: var(--mid);
    font-size: 12px;
    margin-right: var(--space-1);
}

/* ----------------------------------------------------------
   12. Stock status
   ---------------------------------------------------------- */

.ser-stock-in {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--stock-in);
}

.ser-stock-out {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--stock-out);
}

/* ----------------------------------------------------------
   13. Buttons
   ---------------------------------------------------------- */

/* Primary — Blood fill */
.ser-btn,
.btn,
.button,
input[type="submit"],
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.single_add_to_cart_button {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: var(--blood);
    color: var(--paper);
    border: none;
    padding: 10px 18px;
    border-radius: var(--radius);
    cursor: pointer;
    display: inline-block;
    transition: background 0.15s ease;
    white-space: nowrap;
}

.ser-btn:hover,
.single_add_to_cart_button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
    background: var(--blood-dark);
    color: var(--paper);
}

/* Secondary — Ink outline */
.ser-btn--secondary {
    background: var(--paper);
    color: var(--ink);
    border: var(--border-ink);
}

.ser-btn--secondary:hover {
    background: var(--ink);
    color: var(--paper);
}

/* Ghost — Blood outline */
.ser-btn--ghost {
    background: var(--paper);
    color: var(--blood);
    border: var(--border-blood);
}

.ser-btn--ghost:hover {
    background: var(--blood);
    color: var(--paper);
}

/* ----------------------------------------------------------
   14. Single product
   ---------------------------------------------------------- */

.ser-single-product {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
    align-items: start;
}

@media (max-width: 768px) {
    .ser-single-product {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }
}

/* Product image column */
.ser-product-image {
    position: sticky;
    top: calc(var(--header-height) + var(--space-5));
}

.ser-product-image img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border: var(--border-rule);
    border-radius: var(--radius);
}

/* Product summary column */
.ser-product-header {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.ser-product-artist {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--text-2xl);
    line-height: 0.92;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--ink);
}

.ser-product-title {
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 400;
    color: var(--mid);
    line-height: 1.3;
}

.ser-format-tags {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.ser-genre-tags {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-top: var(--space-1);
}

.ser-genre-tag {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mid);
    border: var(--border-rule);
    padding: 2px var(--space-2);
    border-radius: var(--radius);
    background: var(--paper);
    transition: border-color 0.15s ease, color 0.15s ease;
}

.ser-genre-tag:hover {
    color: var(--ink);
    border-color: var(--ink);
}

/* WooCommerce price on single product */
.ser-single-product .price {
    font-size: 22px;
    padding-block: var(--space-3);
    border-top: var(--border-rule);
    border-bottom: var(--border-rule);
    display: block;
}

/* Add to cart */
.ser-single-product form.cart {
    margin-top: var(--space-4);
}

.ser-single-product .single_add_to_cart_button {
    width: 100%;
    text-align: center;
    padding: 14px 18px;
    font-size: 12px;
}

/* ----------------------------------------------------------
   15. Discogs release block
   (Rendered by plugin below Add to Cart, above description)
   ---------------------------------------------------------- */

.ser-release-block {
    margin-top: var(--space-6);
    border-top: var(--border-rule);
    padding-top: var(--space-5);
}

.ser-release-block__label {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mid);
    margin-bottom: var(--space-4);
    display: block;
}

.ser-release-meta {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-1) var(--space-5);
    margin-bottom: var(--space-5);
}

.ser-release-meta__key {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mid);
    white-space: nowrap;
    padding-block: 2px;
}

.ser-release-meta__val {
    font-family: var(--font-body);
    font-size: var(--text-md);
    color: var(--ink);
    padding-block: 2px;
}

/* Tracklist */
.ser-tracklist {
    border-top: var(--border-rule);
    padding-top: var(--space-4);
}

.ser-tracklist__label {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mid);
    margin-bottom: var(--space-3);
    display: block;
}

.ser-tracklist__list {
    list-style: none;
}

.ser-tracklist__item {
    display: grid;
    grid-template-columns: 24px 1fr auto;
    gap: var(--space-3);
    align-items: baseline;
    padding-block: 5px;
    border-bottom: var(--border-rule);
}

.ser-tracklist__item:last-child {
    border-bottom: none;
}

.ser-tracklist__num {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--mid);
    letter-spacing: 0.06em;
}

.ser-tracklist__name {
    font-family: var(--font-body);
    font-size: var(--text-md);
    color: var(--ink);
    line-height: 1.4;
}

.ser-tracklist__dur {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--mid);
    letter-spacing: 0.06em;
    white-space: nowrap;
}

/* ----------------------------------------------------------
   15a. Condition grading
   Rendered by the ser-discogs plugin, SER_Condition class.
   ---------------------------------------------------------- */

.ser-condition-new {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-top: 10px;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--stock-in);
    border: 1px solid var(--stock-in);
    padding: 2px var(--space-2);
    border-radius: var(--radius);
}

.ser-condition-block {
    margin-top: var(--space-5);
    border-top: var(--border-rule);
    padding-top: var(--space-4);
}

.ser-condition-block__notes {
    font-family: var(--font-body);
    font-size: var(--text-md);
    color: var(--mid);
    line-height: 1.5;
    margin-top: var(--space-3);
}

/* Card footer badge, ink outline to stay distinct from the red format tag */
.ser-condition-badge {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mid);
    border: var(--border-rule);
    padding: 2px 8px;
    border-radius: var(--radius);
    white-space: nowrap;
}

/* ----------------------------------------------------------
   16. Product description (long)
   ---------------------------------------------------------- */

.ser-product-description {
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: var(--border-rule);
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.65;
    color: var(--ink);
}

.ser-product-description p + p {
    margin-top: var(--space-4);
}

/* ----------------------------------------------------------
   17. Enquiry form (rendered by plugin on all product pages)
   ---------------------------------------------------------- */

.ser-enquiry {
    margin-top: var(--space-7);
    padding-top: var(--space-6);
    border-top: 2px solid var(--blood);
}

.ser-enquiry__heading {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--text-xl);
    line-height: 1;
    text-transform: uppercase;
    color: var(--ink);
    margin-bottom: var(--space-5);
}

.ser-enquiry__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.ser-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.ser-field__label {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mid);
}

.ser-field__input,
.ser-field__select,
.ser-field__textarea {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--ink);
    background: var(--paper);
    border: var(--border-rule);
    border-radius: var(--radius);
    padding: var(--space-3) var(--space-4);
    transition: border-color 0.15s ease;
    width: 100%;
}

.ser-field__input:focus,
.ser-field__select:focus,
.ser-field__textarea:focus {
    border-color: var(--ink);
    outline: none;
}

.ser-field__textarea {
    resize: vertical;
    min-height: 100px;
}

.ser-field__select {
    cursor: pointer;
}

/* ----------------------------------------------------------
   18. Pagination
   ---------------------------------------------------------- */

.ser-pagination,
.woocommerce-pagination {
    margin-top: var(--space-7);
    display: flex;
    justify-content: center;
}

.woocommerce-pagination ul {
    display: flex;
    gap: var(--space-2);
    list-style: none;
}

.woocommerce-pagination ul li a,
.woocommerce-pagination ul li span {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: 0.08em;
    color: var(--ink);
    border: var(--border-rule);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius);
    display: block;
    min-width: 36px;
    text-align: center;
    transition: border-color 0.15s ease;
}

.woocommerce-pagination ul li a:hover {
    border-color: var(--ink);
}

.woocommerce-pagination ul li span.current {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
}

/* ----------------------------------------------------------
   19. Breadcrumbs
   ---------------------------------------------------------- */

.ser-breadcrumb {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mid);
    margin-bottom: var(--space-5);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.ser-breadcrumb-item a {
    color: var(--mid);
    transition: color 0.15s ease;
}

.ser-breadcrumb-item a:hover {
    color: var(--ink);
}

.ser-breadcrumb-sep {
    color: var(--rule);
}

/* ----------------------------------------------------------
   20. Cart and checkout (WooCommerce overrides)
   ---------------------------------------------------------- */

.woocommerce-cart table.cart,
.woocommerce-checkout table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-base);
}

.woocommerce-cart table.cart th,
.woocommerce-checkout table th {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mid);
    border-bottom: var(--border-ink);
    padding: var(--space-3) var(--space-4);
    text-align: left;
}

.woocommerce-cart table.cart td {
    padding: var(--space-4);
    border-bottom: var(--border-rule);
    vertical-align: middle;
}

.woocommerce-cart .cart_totals,
.woocommerce-checkout .order-review {
    border: var(--border-rule);
    border-radius: var(--radius);
    padding: var(--space-5);
}

.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-shipping-fields h3,
.woocommerce-checkout #order_review_heading {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--text-xl);
    text-transform: uppercase;
    color: var(--ink);
    margin-bottom: var(--space-4);
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
    border: var(--border-rule);
    border-radius: var(--radius);
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-base);
    background: var(--paper);
    color: var(--ink);
    width: 100%;
    transition: border-color 0.15s ease;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
    border-color: var(--ink);
    outline: none;
}

.woocommerce form .form-row label {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mid);
    margin-bottom: var(--space-1);
    display: block;
}

/* ----------------------------------------------------------
   21. Notices
   ---------------------------------------------------------- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    font-family: var(--font-body);
    font-size: var(--text-md);
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius);
    margin-bottom: var(--space-5);
    border-left: 3px solid var(--blood);
    background: var(--paper);
    color: var(--ink);
    list-style: none;
}

.woocommerce-message::before,
.woocommerce-info::before {
    display: none;
}

/* ----------------------------------------------------------
   22. Footer
   ---------------------------------------------------------- */

.ser-footer {
    background: var(--ink);
    border-top: 1px solid #1a1a1a;
    padding-block: var(--space-6);
    margin-top: var(--space-8);
}

.ser-footer__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    flex-wrap: wrap;
    padding-bottom: var(--space-5);
    border-bottom: 1px solid #1a1a1a;
    margin-bottom: var(--space-4);
}

.ser-footer__links,
.ser-footer__social {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    list-style: none;
    margin: 0;
    padding: 0;
}

.ser-footer__link,
.ser-footer__links a {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8a8a8a;
    transition: color 0.15s ease;
}

.ser-footer__link:hover,
.ser-footer__links a:hover {
    color: var(--paper);
}

.ser-footer__copy {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: 0.04em;
    color: #6b6b6b;
}

.ser-footer__copy .ser-footer__link {
    color: #8a8a8a;
    text-decoration: underline;
    text-decoration-color: transparent;
    transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.ser-footer__copy .ser-footer__link:hover {
    color: var(--paper);
    text-decoration-color: currentColor;
}

@media (max-width: 768px) {
    .ser-footer__inner {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-4);
    }
}

/* ----------------------------------------------------------
   23. Accessibility
   ---------------------------------------------------------- */

:focus-visible {
    outline: 2px solid var(--blood);
    outline-offset: 2px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ----------------------------------------------------------
   24. Skip link
   ---------------------------------------------------------- */

.ser-skip-link {
    position: absolute;
    top: -100px;
    left: var(--space-4);
    background: var(--blood);
    color: var(--paper);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius);
    z-index: 200;
    transition: top 0.15s ease;
}

.ser-skip-link:focus {
    top: var(--space-3);
}

/* ----------------------------------------------------------
   24a. Search bar
   Light styled everywhere: white background, dark defined
   border, readable mid grey placeholder. Same component reused
   on the shop archive (80% width), the homepage hero (larger),
   and compact in the header on every page.
   ---------------------------------------------------------- */

.ser-shop-search {
    width: 80%;
    margin: 0 auto var(--space-5);
}

.ser-shop-search--hero {
    margin-block: var(--space-7) var(--space-6);
}

.ser-shop-search--hero .ser-search-form {
    padding: var(--space-3) var(--space-5);
}

.ser-shop-search--hero .ser-search-form__input {
    font-size: var(--text-md);
}

.ser-search-form {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    border: 1.5px solid var(--ink);
    border-radius: var(--radius);
    padding: var(--space-2) var(--space-4);
    background: var(--paper);
    transition: border-color 0.15s ease;
}

.ser-search-form:focus-within {
    border-color: var(--blood);
}

.ser-search-form__input {
    flex: 1;
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--ink);
    background: none;
    border: none;
    outline: none;
    min-width: 0;
}

.ser-search-form__input::placeholder {
    color: var(--mid);
    font-size: var(--text-md);
}

.ser-search-form__input::-webkit-search-cancel-button {
    display: none;
}

.ser-search-form__submit {
    display: flex;
    align-items: center;
    color: var(--mid);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: color 0.15s ease;
}

.ser-search-form__submit:hover {
    color: var(--blood);
}

/* Compact header version, sits against the black header, white
   box gives it strong contrast so it reads as obvious there too */
.ser-header__search {
    display: flex;
    align-items: center;
    flex-shrink: 1;
    min-width: 0;
    width: 280px;
}

.ser-header__search .ser-search-form {
    width: 100%;
    padding: var(--space-1) var(--space-3);
}

.ser-header__search .ser-search-form__input {
    font-size: var(--text-sm);
}

/* ----------------------------------------------------------
   24b. Mobile navigation
   ---------------------------------------------------------- */

.ser-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-1);
    width: 28px;
    height: 28px;
}

.ser-menu-toggle__bar {
    display: block;
    width: 100%;
    height: 1.5px;
    background: var(--paper);
    transition: transform 0.2s ease, opacity 0.2s ease;
    transform-origin: center;
}

.ser-menu-toggle--open .ser-menu-toggle__bar:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
}

.ser-menu-toggle--open .ser-menu-toggle__bar:nth-child(2) {
    opacity: 0;
}

.ser-menu-toggle--open .ser-menu-toggle__bar:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
}

/* Mobile nav dropdown */
.ser-mobile-nav {
    display: none;
    background: var(--ink);
    border-top: 1px solid #2a2a2a;
    position: absolute;
    top: var(--header-height);
    left: 0;
    right: 0;
    z-index: 99;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
}

.ser-mobile-nav--open {
    max-height: 500px;
}

.ser-mobile-nav__list {
    padding: var(--space-3) 0;
    list-style: none;
}

.ser-mobile-nav__list .ser-nav__item {
    border-bottom: 1px solid #1a1a1a;
}

.ser-mobile-nav__list .ser-nav__item:last-child {
    border-bottom: none;
}

.ser-mobile-nav__list .ser-nav__link {
    display: block;
    padding: var(--space-3) var(--container-pad);
}

.ser-mobile-nav__list .ser-nav__link--active {
    border-bottom: none;
    color: var(--blood);
    padding-bottom: var(--space-3);
}

@media (max-width: 768px) {
    .ser-menu-toggle {
        display: flex;
    }

    .ser-nav--desktop {
        display: none;
    }

    .ser-mobile-nav {
        display: block;
    }

    .ser-header__search {
        width: auto;
        flex: 1;
    }

    .ser-header__search .ser-search-form__input::placeholder {
        font-size: var(--text-sm);
    }
}

/* ----------------------------------------------------------
   25. Product gallery — custom SER implementation
   No flexslider. Plain JS class switcher.
   ---------------------------------------------------------- */

.ser-gallery {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    width: 100%;
}

/* Main slide — hidden by default, shown when active */
.ser-gallery__slide {
    display: none;
    width: 100%;
}

.ser-gallery__slide--active {
    display: block;
}

.ser-gallery__slide img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    border: var(--border-rule);
    border-radius: var(--radius);
}

/* Thumbnail strip */
.ser-gallery__thumbs {
    display: flex;
    flex-direction: row;
    gap: var(--space-2);
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ser-gallery__thumbs li {
    margin: 0;
}

.ser-gallery__thumb {
    display: block;
    padding: 0;
    background: none;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.15s ease;
}

.ser-gallery__thumb img {
    display: block;
    width: 72px;
    height: 72px;
    object-fit: cover;
    opacity: 0.6;
    transition: opacity 0.15s ease;
}

.ser-gallery__thumb:hover img,
.ser-gallery__thumb--active img {
    opacity: 1;
}

.ser-gallery__thumb--active {
    border-color: var(--ink);
}

/* ----------------------------------------------------------
   26. Cart page product cards (WooCommerce block-based cart)
   ---------------------------------------------------------- */

/* The block sets ul to flex with column widths — override entirely */
.wc-block-grid ul.wc-block-grid__products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: var(--grid-gap) !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    flex-wrap: unset !important;
}

/* Kill the inline width the block JS sets on each li */
.wc-block-grid ul.wc-block-grid__products .wc-block-grid__product {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex-basis: unset !important;
    margin: 0 !important;
    padding: 0 !important;
    background: var(--paper) !important;
    border: var(--border-rule) !important;
    border-radius: var(--radius) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    transition: border-color 0.15s ease !important;
}

.wc-block-grid ul.wc-block-grid__products .wc-block-grid__product:hover {
    border-color: var(--ink) !important;
}

/* Product image */
.wc-block-grid ul.wc-block-grid__products .wc-block-grid__product-image {
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
    background: #e5e5e5 !important;
    width: 100% !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
}

.wc-block-grid ul.wc-block-grid__products .wc-block-grid__product-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* Product link wrapper */
.wc-block-grid ul.wc-block-grid__products a.wc-block-grid__product-link {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    padding: 10px 12px !important;
}

/* Product title */
.wc-block-grid ul.wc-block-grid__products .wc-block-grid__product-title {
    font-family: var(--font-display) !important;
    font-weight: 800 !important;
    font-size: 15px !important;
    text-transform: uppercase !important;
    color: var(--ink) !important;
    line-height: 1.1 !important;
    margin: 0 !important;
}

/* Product price */
.wc-block-grid ul.wc-block-grid__products .wc-block-grid__product-price.price {
    font-family: var(--font-mono) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--ink) !important;
    padding: 8px 12px !important;
    border-top: var(--border-rule) !important;
    margin-top: auto !important;
}

/* Add to cart button */
.wc-block-grid ul.wc-block-grid__products .wc-block-grid__product-add-to-cart .wp-block-button__link,
.wc-block-grid ul.wc-block-grid__products .wc-block-grid__product-add-to-cart a {
    font-family: var(--font-mono) !important;
    font-size: var(--text-sm) !important;
    font-weight: 500 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    background: var(--blood) !important;
    color: var(--paper) !important;
    border: none !important;
    border-radius: var(--radius) !important;
    padding: 10px 18px !important;
    width: 100% !important;
    text-align: center !important;
    display: block !important;
    transition: background 0.15s ease !important;
}

.wc-block-grid ul.wc-block-grid__products .wc-block-grid__product-add-to-cart .wp-block-button__link:hover,
.wc-block-grid ul.wc-block-grid__products .wc-block-grid__product-add-to-cart a:hover {
    background: var(--blood-dark) !important;
}

/* Classic cart table rows (retained in case classic cart is used) */
.woocommerce-cart table.cart td.product-thumbnail img {
    border: var(--border-rule);
    border-radius: var(--radius);
    width: 80px;
    height: 80px;
    object-fit: cover;
}

.woocommerce-cart table.cart td.product-name a {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 15px;
    text-transform: uppercase;
    color: var(--ink);
}

.woocommerce-cart table.cart td.product-price,
.woocommerce-cart table.cart td.product-subtotal {
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
}

/* ----------------------------------------------------------
   27. Single product format tag gap
   ---------------------------------------------------------- */

.ser-single-product .price {
    margin-top: var(--space-3);
}

.ser-divider {
    border: none;
    border-top: var(--border-rule);
    margin-block: var(--space-5);
}

.ser-divider--ink {
    border-top-color: var(--ink);
}

.ser-divider--blood {
    border-top: 2px solid var(--blood);
    width: 60px;
}

/* ----------------------------------------------------------
   28. Utility
   ---------------------------------------------------------- */

.ser-divider {
    border: none;
    border-top: var(--border-rule);
    margin-block: var(--space-5);
}

.ser-divider--ink {
    border-top-color: var(--ink);
}

.ser-divider--blood {
    border-top: 2px solid var(--blood);
    width: 60px;
}

/* ----------------------------------------------------------
   Enquiry form notices (output by plugin)
   ---------------------------------------------------------- */

.ser-enquiry-notice {
    font-family: var(--font-body);
    font-size: var(--text-md);
    padding: var(--space-3) var(--space-4);
    border-left: 3px solid var(--rule);
    margin-bottom: var(--space-4);
    line-height: 1.5;
}

.ser-enquiry-notice--success {
    border-left-color: var(--stock-in);
    color: #1a4a22;
    background: #f0faf2;
}

.ser-enquiry-notice--error {
    border-left-color: var(--blood);
    color: #7a1010;
    background: #fdf2f2;
}

/* Footer socials moved into section 22, Footer, consolidated
   into the .ser-footer* classes to match the rest of the theme */

/* ----------------------------------------------------------
   26. Homepage
   ---------------------------------------------------------- */

.ser-banner {
    width: 100%;
    max-height: 650px;
    overflow: hidden;
    margin-bottom: var(--space-6);
}

.ser-banner__img {
    display: block;
    width: 100%;
    height: 650px;
    object-fit: cover;
}

.ser-home-intro {
    max-width: 720px;
    margin: 0 auto var(--space-7);
    text-align: center;
    font-family: var(--font-body);
    font-size: var(--text-md);
    line-height: 1.6;
    color: var(--ink);
}

.ser-home-intro p:not(:last-child) {
    margin-bottom: var(--space-4);
}

.ser-home-section {
    margin-bottom: var(--space-7);
}

.ser-home-section__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    border-bottom: var(--border-rule);
    padding-bottom: var(--space-3);
    margin-bottom: var(--space-5);
}

.ser-home-section__title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--text-xl);
    text-transform: uppercase;
    letter-spacing: -0.01em;
    color: var(--ink);
}

.ser-home-section__link {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mid);
    white-space: nowrap;
    transition: color 0.15s ease;
}

.ser-home-section__link:hover {
    color: var(--blood);
}

@media (max-width: 768px) {
    .ser-banner {
        max-height: 280px;
    }

    .ser-banner__img {
        height: 280px;
    }

    .ser-shop-search--hero {
        margin-block: var(--space-5) var(--space-4);
    }

    .ser-shop-search,
    .ser-shop-search--hero {
        width: 100%;
    }
}

/* ----------------------------------------------------------
   27. Cassette landing page
   ---------------------------------------------------------- */

.ser-landing__hero {
    background: var(--ink);
    padding-block: var(--space-8);
}

.ser-landing__hero-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-4);
    max-width: 640px;
    margin-inline: auto;
}

.ser-landing__hero-inner--with-media {
    max-width: var(--container-max);
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: var(--space-8);
}

.ser-landing__hero-media {
    flex: 1;
    min-width: 0;
}

.ser-landing__hero-image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius);
}

.ser-landing__hero-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-4);
}

.ser-landing__hero-inner--with-media .ser-landing__hero-content {
    align-items: flex-start;
    text-align: left;
}

.ser-landing__title {
    color: var(--paper);
    margin: 0;
}

.ser-landing__subtitle {
    color: #b8b8b8;
    margin: 0;
}

.ser-landing__subhead {
    font-family: var(--font-body);
    font-size: var(--text-md);
    color: #b8b8b8;
    max-width: 480px;
}

.ser-landing__price {
    font-family: var(--font-mono);
    font-size: var(--text-lg);
    font-weight: 500;
    color: var(--paper);
    margin: 0;
}

.ser-landing__cta-repeat .ser-landing__price {
    color: var(--ink);
    margin-bottom: var(--space-2);
}

.ser-landing__cta {
    font-size: var(--text-base);
    padding: var(--space-3) var(--space-6);
    margin-top: var(--space-2);
}

.ser-landing__ship-note {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    letter-spacing: 0.04em;
    color: #8a8a8a;
    margin-top: var(--space-1);
}

.ser-landing__section {
    padding-block: var(--space-7);
    border-bottom: var(--border-rule);
}

.ser-landing__player-inner,
.ser-landing__included-inner,
.ser-landing__cta-repeat-inner,
.ser-landing__about-inner {
    max-width: 640px;
    margin-inline: auto;
    text-align: center;
}

.ser-landing__player-inner iframe {
    max-width: 100%;
}

.ser-landing__quotes-inner {
    display: flex;
    gap: var(--space-6);
    max-width: 960px;
    margin-inline: auto;
}

.ser-landing__quote {
    flex: 1;
    text-align: center;
    margin: 0;
}

.ser-landing__quote-text {
    font-family: var(--font-body);
    font-size: var(--text-lg);
    line-height: 1.4;
    color: var(--ink);
    margin-bottom: var(--space-3);
}

.ser-landing__quote-source {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-style: normal;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mid);
}

.ser-landing__included-list {
    list-style: none;
    margin: var(--space-4) 0 0;
    padding: 0;
    display: inline-flex;
    flex-direction: column;
    gap: var(--space-2);
    text-align: left;
}

.ser-landing__included-list li {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--ink);
    padding-left: var(--space-4);
    position: relative;
}

.ser-landing__included-list li::before {
    content: '\2022';
    position: absolute;
    left: 0;
    color: var(--blood);
}

.ser-landing__threshold {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--blood);
    margin-top: var(--space-3);
}

.ser-landing__about-inner p {
    font-family: var(--font-body);
    font-size: var(--text-md);
    line-height: 1.6;
    color: var(--mid);
    margin: 0;
}

@media (max-width: 768px) {
    .ser-landing__hero {
        padding-block: var(--space-7);
    }

    .ser-landing__hero-inner--with-media {
        flex-direction: column;
        text-align: center;
    }

    .ser-landing__hero-inner--with-media .ser-landing__hero-content {
        align-items: center;
        text-align: center;
    }

    .ser-landing__quotes-inner {
        flex-direction: column;
        gap: var(--space-5);
    }

    .ser-landing__section {
        padding-block: var(--space-6);
    }
}
/* ----------------------------------------------------------
   Contact page
   Append to the end of assets/css/main.css.
   Assumes the Forminator form Design style is set to None, so
   the theme controls the look and Forminator's own CSS stays out.
   ---------------------------------------------------------- */

.ser-contact {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-7);
}

@media (min-width: 860px) {
    .ser-contact {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
        gap: var(--space-8);
        align-items: start;
    }
}

.ser-contact__title {
    margin-bottom: var(--space-6);
}

.ser-contact__form {
    max-width: 640px;
}

.ser-contact__form > p {
    font-size: var(--text-base);
    margin-bottom: var(--space-4);
}

/* Side column */

.ser-contact__aside {
    border-top: var(--border-ink);
    padding-top: var(--space-5);
}

@media (min-width: 860px) {
    .ser-contact__aside {
        border-top: 0;
        border-left: var(--border-rule);
        padding-top: 0;
        padding-left: var(--space-6);
    }
}

.ser-contact__route + .ser-contact__route {
    margin-top: var(--space-6);
}

.ser-contact__route-title {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mid);
    margin-bottom: var(--space-2);
}

.ser-contact__route p {
    margin-bottom: var(--space-3);
}

.ser-contact__whatsapp {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: var(--text-md);
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--ink);
    background: var(--paper);
    border: var(--border-ink);
    border-radius: var(--radius);
    padding: var(--space-3) var(--space-5);
    text-decoration: none;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.ser-contact__whatsapp:hover {
    color: var(--blood);
    border-color: var(--blood);
}

.ser-contact__whatsapp:focus-visible,
.ser-contact__form .forminator-button-submit:focus-visible {
    outline: 2px solid var(--blood);
    outline-offset: 2px;
}

/* Forminator fields */

.ser-contact__form .forminator-ui .forminator-row {
    margin-bottom: var(--space-4);
}

.ser-contact__form .forminator-ui .forminator-label {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mid);
    margin-bottom: var(--space-2);
}

.ser-contact__form .forminator-ui .forminator-input,
.ser-contact__form .forminator-ui .forminator-textarea,
.ser-contact__form .forminator-ui .forminator-select2 + .select2 .select2-selection {
    width: 100%;
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--ink);
    background: var(--paper);
    border: var(--border-ink);
    border-radius: var(--radius);
    padding: var(--space-3) var(--space-4);
    box-shadow: none;
}

.ser-contact__form .forminator-ui .forminator-textarea {
    min-height: 160px;
}

.ser-contact__form .forminator-ui .forminator-input:focus,
.ser-contact__form .forminator-ui .forminator-textarea:focus {
    outline: 2px solid var(--blood);
    outline-offset: 0;
}

.ser-contact__form .forminator-ui .forminator-error-message {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--stock-out);
    margin-top: var(--space-2);
}

/* Submit button: Blood is the one loud element on the page */

.ser-contact__form .forminator-button-submit {
    font-family: var(--font-mono);
    font-size: var(--text-md);
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--paper);
    background: var(--blood);
    border: 0;
    border-radius: var(--radius);
    padding: var(--space-3) var(--space-6);
    cursor: pointer;
    transition: background 0.15s ease;
}

.ser-contact__form .forminator-button-submit:hover {
    background: var(--blood-dark);
}

.ser-contact__form .forminator-response-message {
    font-size: var(--text-base);
    margin-bottom: var(--space-4);
}
/* Newest Release section. Paste into the theme stylesheet.
   The section reuses .ser-home-section, .ser-home-section__head and
   .ser-home-section__title, so spacing and the heading match Latest Additions.
   Colours are the locked design system: Ink, Mid, Rule, Blood, Blood Dark.
   Barlow Condensed for headings, Inter for body, IBM Plex Mono for metadata.
   Weights match what the theme loads: Barlow 600 and 800, Inter 400, Plex Mono 500.
   Border radius stays at 1px. */

.ser-newest-release .ser-newest-release__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
}

.ser-newest-release .ser-newest-release__image-link {
  display: block;
  border: 1px solid #d9d9d9;
  line-height: 0;
}

.ser-newest-release .ser-newest-release__image {
  display: block;
  width: 100%;
  height: auto;
}

.ser-newest-release .ser-newest-release__artist {
  margin: 0 0 0.35rem;
  font-family: "Barlow Condensed", sans-serif;
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  font-weight: 800;
  line-height: 1;
  color: #0d0d0d;
}

.ser-newest-release .ser-newest-release__title {
  margin: 0 0 1rem;
  font-family: "Inter", sans-serif;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.3;
  color: #0d0d0d;
}

.ser-newest-release .ser-newest-release__date {
  margin: 0 0 1.5rem;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.4;
  color: #6b6b6b;
}

.ser-newest-release a.ser-newest-release__button {
  display: inline-block;
  padding: 0.75rem 1.75rem;
  border: 0;
  border-radius: 1px;
  background: #b01c1c;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.2;
  color: #ffffff;
  text-decoration: none;
}

.ser-newest-release a.ser-newest-release__button:hover {
  background: #8a1515;
  color: #ffffff;
}

.ser-newest-release a.ser-newest-release__button:focus-visible {
  outline: 2px solid #0d0d0d;
  outline-offset: 3px;
}

@media (min-width: 720px) {
  .ser-newest-release .ser-newest-release__inner {
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    gap: 2.5rem;
    align-items: center;
  }
}
/* Single product page additions. Append to assets/css/main.css.
   Colours are the locked design system: Ink, Rule, Blood.
   Weights match what the theme loads: Inter 400, Plex Mono 500. */

/* Short description, e.g. a pre order note. Blood is used as a border only. */
.ser-product-summary .ser-product-short-description {
  margin: 0 0 1.25rem;
  padding: 0.25rem 0 0.25rem 0.875rem;
  border-left: 3px solid #b01c1c;
  font-family: "Inter", sans-serif;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.5;
  color: #0d0d0d;
}

.ser-product-summary .ser-product-short-description > :first-child {
  margin-top: 0;
}

.ser-product-summary .ser-product-short-description > :last-child {
  margin-bottom: 0;
}

/* Quantity box beside the add to cart button. WooCommerce only outputs a
   visible one when stock is above 1, so single copy used items are unaffected. */
.ser-product-summary form.cart {
  display: flex;
  align-items: stretch;
}

.ser-product-summary form.cart .quantity:not(.hidden) {
  display: flex;
  flex: 0 0 auto;
  margin: 0 0.75rem 0 0;
}

.ser-product-summary form.cart .quantity .qty {
  width: 4.5rem;
  height: 100%;
  padding: 0 0.5rem;
  border: 1px solid #d9d9d9;
  border-radius: 1px;
  background: #ffffff;
  font-family: "IBM Plex Mono", monospace;
  font-size: 1rem;
  font-weight: 500;
  text-align: center;
  color: #0d0d0d;
}

.ser-product-summary form.cart .quantity .qty:focus-visible {
  outline: 2px solid #0d0d0d;
  outline-offset: 2px;
}

.ser-product-summary form.cart .single_add_to_cart_button {
  flex: 1 1 auto;
  width: auto;
}
/* ----------------------------------------------------------
   24c. FiboSearch
   Append to assets/css/main.css after section 24a.
   Restyles the plugin's search bar and suggestions dropdown to the
   design system. Only colours, borders, radius and type are set. Icon
   and spinner positions are left to the plugin on purpose, because
   its JavaScript writes inline styles that CSS cannot hold against.
   The plain .ser-search-form rules above stay as the fallback form.
   ---------------------------------------------------------- */

/* Let the bar fill its container (the plugin caps it at 600px) */
:is(.ser-header__search, .ser-shop-search) .dgwt-wcas-search-wrapp {
    width: 100%;
    max-width: none;
    margin: 0;
}

/* Input: white box, dark defined border, 1px radius, blood on focus */
:is(.ser-header__search, .ser-shop-search) .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input {
    height: 34px;
    border: 1.5px solid var(--ink);
    border-radius: var(--radius);
    background: var(--paper);
    box-shadow: none;
    font-family: var(--font-body);
    font-size: var(--text-md);
    color: var(--ink);
    transition: border-color 0.15s ease;
}

.ser-shop-search--hero .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input {
    height: 48px;
    font-size: var(--text-base);
}

:is(.ser-header__search, .ser-shop-search) .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input:focus {
    border-color: var(--blood);
    box-shadow: none;
    outline: none;
}

:is(.ser-header__search, .ser-shop-search) .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input::placeholder {
    color: var(--mid);
    opacity: 1;
}

:is(.ser-header__search, .ser-shop-search) .dgwt-wcas-ico-magnifier,
:is(.ser-header__search, .ser-shop-search) .dgwt-wcas-ico-magnifier path,
:is(.ser-header__search, .ser-shop-search) .dgwt-wcas-close path {
    fill: var(--mid);
}

/* Suggestions dropdown. The plugin appends it to the body, so it is
   styled by its own class, not from inside the header. */
body .dgwt-wcas-suggestions-wrapp {
    border: 1.5px solid var(--ink);
    border-radius: var(--radius);
    background: var(--paper);
    box-shadow: none;
    font-family: var(--font-body);
}

body .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion {
    padding: var(--space-2) var(--space-3) var(--space-2) calc(var(--space-3) - 3px);
    border-left: 3px solid transparent;
    border-bottom: 1px solid var(--rule);
    background: var(--paper);
    font-size: var(--text-base);
    color: var(--ink);
}

body .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion:last-child {
    border-bottom: 0;
}

/* Hover and keyboard selection: a blood rule down the left edge */
body .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion:hover,
body .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion.dgwt-wcas-suggestion-selected {
    background: var(--paper);
    border-left-color: var(--blood);
}

/* Matched text: underlined in blood. Inter is only loaded at 400,
   so bold would be a faked weight. */
body .dgwt-wcas-suggestions-wrapp .dgwt-wcas-st strong {
    font-weight: 400;
    text-decoration: underline;
    text-decoration-color: var(--blood);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
}

body .dgwt-wcas-suggestions-wrapp .dgwt-wcas-sp {
    font-family: var(--font-mono);
    font-size: var(--text-md);
    font-weight: 500;
    color: var(--ink);
}

body .dgwt-wcas-suggestions-wrapp .dgwt-wcas-si img {
    border: 1px solid var(--rule);
    border-radius: var(--radius);
}

/* "See all products" row and group headings */
body .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-more,
body .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-headline {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mid);
}

body .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-more:hover {
    color: var(--ink);
}

body .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-nores {
    color: var(--mid);
}
/* ----------------------------------------------------------
   24d. FiboSearch bar fixes
   Append after section 24c.
   The Pirx layout wraps the bar in a padded white pill and positions
   the magnifier for that padding. This removes the pill, lets the
   input carry the look, and centres the icon on the input itself.
   ---------------------------------------------------------- */

/* Remove the white pill. Important is needed because the plugin also
   writes its own settings driven CSS for the wrapper. */
:is(.ser-header__search, .ser-shop-search) .dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp {
    padding: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
}

/* Magnifier: pinned to the left edge of the input, centred vertically */
:is(.ser-header__search, .ser-shop-search) .dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit {
    top: 0;
    bottom: auto;
    left: 0;
    width: 40px;
    height: 100%;
    margin: 0;
    padding: 0;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
}

/* Room for the icon on the left and the clear button on the right.
   The ellipsis stops long placeholder text being cut off mid letter. */
:is(.ser-header__search, .ser-shop-search) .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input {
    padding: 0 36px 0 40px;
    text-overflow: ellipsis;
}
/* ----------------------------------------------------------
   Mobile and product page fixes. Append to assets/css/main.css.
   ---------------------------------------------------------- */

/* 1. Product gallery. It was sticky at every width, so on a phone it
   stayed pinned to the top of the screen and the whole summary scrolled
   behind it. Sticky is now desktop only, where the columns sit side by side. */
@media (max-width: 768px) {
    .ser-product-image {
        position: static;
    }
}

/* 2. Quantity wrapper. WooCommerce outputs an empty wrapper around a hidden
   input for single copy items, and the flex layout gave it a 12px margin,
   which pushed Add to Cart off the left edge. Only show the wrapper when
   there is a visible number box. */
.ser-product-summary form.cart .quantity:not(:has(input[type="number"])) {
    display: none;
}

/* 3. Header on phones. */
@media (max-width: 768px) {
    .ser-header__inner {
        gap: var(--space-3);
    }

    .ser-header__actions {
        gap: var(--space-3);
    }

    /* When FiboSearch shows just an icon, stop the wrapper stretching */
    .ser-header__search:has(.dgwt-wcas-search-wrapp) {
        flex: 0 0 auto;
        width: auto;
    }
}

/* The icon FiboSearch shows on small screens is dark by default,
   which vanishes against the black header */
.ser-header__search .dgwt-wcas-search-wrapp > .dgwt-wcas-search-icon svg,
.ser-header__search .dgwt-wcas-search-wrapp > .dgwt-wcas-search-icon svg path {
    fill: var(--paper);
}

.ser-header__search .dgwt-wcas-search-wrapp > .dgwt-wcas-search-icon:hover svg path {
    fill: var(--rule);
}

@media (max-width: 480px) {
    .ser-logo img {
        height: 22px;
    }
}

/* Cart and checkout buttons in Blood, matching Add to Cart.
   Important is needed because the block styles set their own dark background.
   Append to assets/css/main.css. */
 
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
    background: var(--blood) !important;
    color: var(--paper) !important;
    border-radius: var(--radius) !important;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: background 0.15s ease;
}
 
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
    background: var(--blood-dark) !important;
    color: var(--paper) !important;
}
 
.wc-block-cart__submit-button .wc-block-components-button__text,
.wc-block-components-checkout-place-order-button .wc-block-components-button__text {
    color: var(--paper) !important;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
}
.wc-block-formatted-money-amount::after,
.wc-block-components-formatted-money-amount::after {
    content: "\0000a0AUD";
}
/* Footer currency note. Append to assets/css/main.css after the .ser-footer__copy rules. */
 
.ser-footer__currency {
    margin: 0 0 var(--space-3);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: 0.04em;
    color: #8a8a8a;
}
 
.ser-footer__currency .ser-footer__link {
    text-transform: none;
    letter-spacing: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}
 
.ser-footer__currency .ser-footer__link:hover {
    color: var(--paper);
}