/*
Theme Name:  PageTurner
Description: bookstore
Version:     2.4.0
Author:      Fixit E.E.
Author URI:  https://www.fixit.gr
Text Domain: page-turner
*/

:root {
    --color-content-primary:   #2a2520;
    --color-content-secondary: #7a5c3e;
    --color-content-accent:    #c49a5c;
    --color-content-bg:        #f5efe3;
    --fx-hero-gradient: linear-gradient(148deg, #2a2520 0%, #100d0a 100%);
    --color-content-text:      #1a1612;
    --fx-font-heading-override: Cormorant Garamond, serif;
    --fx-font-body-override: Inter, sans-serif;
}

/* The live cascade overrides :root from an inline block at wp_head priority 99, so the
   design tokens are declared on body where the child stylesheet still wins. */
body {
    --pt-ink:        #2a2520;
    --pt-ink-soft:   #55493c;
    --pt-brass:      #c49a5c;
    --pt-brass-dark: #9a7434;
    --pt-walnut:     #7a5c3e;
    --pt-paper:      #f5efe3;
    --pt-paper-2:    #efe6d5;
    --pt-card:       #fbf7ee;
    --pt-rule:       #d9cdb6;
    --pt-rule-soft:  #e7ddc9;

    --pt-serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
    --pt-sans:  Inter, -apple-system, "Segoe UI", Roboto, sans-serif;

    --pt-measure: 1180px;
    --pt-search-w: 392px;
}

/* Each category gets a whole cover, not just a spine, so a shelf of books reads as six
   distinct colours at a glance. Saturated enough to carry cream type at small sizes. */
body {
    --pt-cat-fiction:              #8c2f2a;
    --pt-cat-philosophy:           #24493c;
    --pt-cat-poetry:               #543268;
    --pt-cat-essay-non-fiction:    #1d5468;
    --pt-cat-classics:             #a06a1c;
    --pt-cat-children-young-adult: #c2551c;
}


/* ===========================================================================
   Typography
   The theme options force Barlow-family stacks through --font-h1 and load no
   webfonts at all, so every rule here names its family outright.
   =========================================================================== */

html body {
    font-family: var(--pt-sans);
    color: var(--pt-ink);
    background: var(--pt-paper);
    font-size: 16px;
    line-height: 1.62;
}

html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body h6,
html body .t-section-title,
html body .t-hero-title {
    font-family: var(--pt-serif);
    font-weight: 500;
    color: var(--pt-ink);
    letter-spacing: 0.004em;
    line-height: 1.12;
}

html body h1,
html body .t-hero-title {
    font-size: clamp(2.6rem, 5.2vw, 4.1rem);
}

html body h2,
html body .t-section-title {
    font-size: clamp(1.9rem, 3.4vw, 2.75rem);
}

html body h3 {
    font-size: clamp(1.35rem, 2.2vw, 1.7rem);
}

html body p,
html body li {
    font-family: var(--pt-sans);
}

html body a {
    color: var(--pt-ink);
    text-decoration-color: var(--pt-rule);
    text-underline-offset: 3px;
}

html body a:hover {
    color: var(--pt-brass-dark);
}

.pt-eyebrow {
    display: block;
    font-family: var(--pt-sans);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.19em;
    text-transform: uppercase;
    color: var(--pt-walnut);
}


/* ===========================================================================
   Header — two rows: wordmark + search + actions, then the menu
   =========================================================================== */

html body .fx-header {
    background: var(--pt-paper);
    border-bottom: 1px solid var(--pt-rule);
    box-shadow: none;
}

html body .fx-header-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    max-width: var(--pt-measure);
    margin: 0 auto;
    padding: 14px 24px 0;
    position: relative;
}

html body .fx-logo {
    order: 1;
    flex: 0 0 auto;
}

html body .fx-logo-text,
html body .fx-logo-wordmark {
    font-family: var(--pt-serif);
    font-size: 1.7rem;
    font-weight: 600;
    letter-spacing: 0.055em;
    color: var(--pt-ink);
}

/* the generated logo mark is a gradient square that fights the paper; drop it */
html body .fx-logo .fx-logo-svg svg {
    display: none;
}

html body .pt-search {
    order: 2;
    flex: 1 1 260px;
    min-width: 0;
    max-width: 460px;
}

html body .pt-search-form {
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1px solid var(--pt-rule);
    background: var(--pt-card);
    padding: 0 13px;
    height: 42px;
}

html body .pt-search-form:focus-within {
    border-color: var(--pt-brass);
}

html body .pt-search-icon {
    flex: 0 0 auto;
    color: var(--pt-walnut);
}

/* nimbus-base styles inputs through a :not() chain at (0,4,1); this needs to outrank it */
html body .pt-search-form input.pt-search-field {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    padding: 0;
    height: 40px;
    min-height: 0;
    font-family: var(--pt-sans);
    font-size: 0.94rem;
    color: var(--pt-ink);
    box-shadow: none;
    border-radius: 0;
}

html body .pt-search-form input.pt-search-field::placeholder {
    color: #8d8071;
    opacity: 1;
}

html body .pt-search-form input.pt-search-field:focus {
    outline: none;
    box-shadow: none;
}

html body .fx-header-actions {
    order: 3;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

html body .pt-act {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid transparent;
    background: transparent;
    color: var(--pt-ink);
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
}

html body .pt-act:hover {
    border-color: var(--pt-rule);
    color: var(--pt-brass-dark);
}

html body .pt-act-badge {
    position: absolute;
    top: 3px;
    right: 1px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    background: var(--pt-ink);
    color: var(--pt-paper);
    font-family: var(--pt-sans);
    font-size: 0.63rem;
    font-weight: 600;
    line-height: 17px;
    text-align: center;
    border-radius: 9px;
}

/* second row */
html body .fx-nav {
    order: 4;
    flex: 1 0 100%;
    margin: 0;
    border-top: 1px solid var(--pt-rule-soft);
}

html body .fx-nav-list {
    display: flex;
    flex-wrap: wrap;
    gap: 26px;
    margin: 0;
    padding: 0;
    list-style: none;
}

html body .fx-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 13px 0;
    font-family: var(--pt-sans);
    font-size: 0.79rem;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--pt-ink);
    text-decoration: none;
    border-bottom: 2px solid transparent;
}

html body .fx-nav-list > li > .fx-nav-link:hover,
html body .fx-nav-list > li.current-menu-item > .fx-nav-link,
html body .fx-nav-list > li.current-menu-parent > .fx-nav-link,
html body .fx-nav-list > li.current-menu-ancestor > .fx-nav-link {
    color: var(--pt-brass-dark);
    border-bottom-color: var(--pt-brass);
}

html body .fx-nav-chevron {
    width: 10px;
    height: 10px;
    opacity: 0.5;
}

/* the built-in search overlay is redundant next to the permanent bar */
html body .fx-nav-search-toggle,
html body .fx-nav-search-form {
    display: none;
}


/* ---- mega menu ---- */

html body .fx-mega-menu {
    background: var(--pt-card);
    border-top: 1px solid var(--pt-rule);
    border-bottom: 1px solid var(--pt-rule);
    box-shadow: 0 18px 34px -26px rgba(42, 37, 32, 0.5);
}

html body .fx-mega-inner {
    max-width: var(--pt-measure);
    margin: 0 auto;
    padding: 26px 24px 30px;
}

html body .fx-mega-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

html body .fx-mega-list .fx-nav-link {
    display: block;
    padding: 7px 0;
    font-family: var(--pt-serif);
    font-size: 1.12rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    border-bottom: 0;
    color: var(--pt-ink);
}

html body .fx-mega-list .fx-nav-link:hover {
    color: var(--pt-brass-dark);
}

/* Dropdowns: the parent theme styles .fx-sub-menu but wp_nav_menu emits .sub-menu, so
   without these rules every child item spills into the header as a bullet list. */
html body .fx-nav-list > li {
    position: relative;
}

html body .fx-nav-list .sub-menu {
    position: absolute;
    top: 100%;
    left: -14px;
    z-index: 60;
    display: block;
    min-width: 232px;
    margin: 0;
    padding: 8px 0;
    list-style: none;
    background: var(--pt-card);
    border: 1px solid var(--pt-rule);
    box-shadow: 0 18px 34px -26px rgba(42, 37, 32, 0.55);
    opacity: 0;
    visibility: hidden;
    transform: translateY(7px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

html body .fx-nav-list > li:hover > .sub-menu,
html body .fx-nav-list > li:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: none;
}

html body .fx-nav-list .sub-menu li {
    list-style: none;
}

html body .fx-nav-list .sub-menu a {
    display: block;
    padding: 7px 18px;
    font-family: var(--pt-sans);
    font-size: 0.88rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--pt-ink);
    text-decoration: none;
}

html body .fx-nav-list .sub-menu a:hover {
    background: var(--pt-paper-2);
    color: var(--pt-brass-dark);
}


/* ===========================================================================
   Typographic book covers
   =========================================================================== */

.pt-cover {
    position: relative;
    display: flex;
    aspect-ratio: 5 / 7.4;
    min-height: 0;
    width: 100%;
    background: linear-gradient(150deg,
        color-mix(in srgb, var(--pt-cat, var(--pt-walnut)) 88%, #fff) 0%,
        var(--pt-cat, var(--pt-walnut)) 62%,
        color-mix(in srgb, var(--pt-cat, var(--pt-walnut)) 82%, #000) 100%);
    border: 1px solid color-mix(in srgb, var(--pt-cat, var(--pt-walnut)) 70%, #000);
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* the spine is the same hue pushed darker, so it reads as a fold rather than a stripe */
.pt-cover-spine {
    flex: 0 0 13px;
    background: color-mix(in srgb, var(--pt-cat, var(--pt-walnut)) 68%, #000);
    border-right: 1px solid rgba(255, 255, 255, 0.14);
}

.pt-cover[data-cat="fiction"]              { --pt-cat: var(--pt-cat-fiction); }
.pt-cover[data-cat="philosophy"]           { --pt-cat: var(--pt-cat-philosophy); }
.pt-cover[data-cat="poetry"]               { --pt-cat: var(--pt-cat-poetry); }
.pt-cover[data-cat="essay-non-fiction"]    { --pt-cat: var(--pt-cat-essay-non-fiction); }
.pt-cover[data-cat="classics"]             { --pt-cat: var(--pt-cat-classics); }
.pt-cover[data-cat="children-young-adult"] { --pt-cat: var(--pt-cat-children-young-adult); }

.pt-cover-body {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    flex-direction: column;
    justify-content: flex-start;
    padding: 15% 9% 0;
    min-width: 0;
}

.pt-cover-rule {
    display: block;
    width: 30px;
    height: 2px;
    margin-bottom: 12%;
    background: rgba(255, 255, 255, 0.55);
}

.pt-cover-title {
    display: block;
    font-family: var(--pt-serif);
    font-size: clamp(0.95rem, 1.55vw, 1.32rem);
    font-weight: 600;
    line-height: 1.18;
    color: #fbf7ee;
    overflow-wrap: normal;
    word-break: normal;
}

.pt-cover--sm .pt-cover-title { font-size: clamp(0.78rem, 1.12vw, 0.98rem); }
.pt-cover--xs .pt-cover-title { font-size: clamp(0.68rem, 0.92vw, 0.84rem); }

/* Author and category share one baseline at the foot of the cover; giving the author
   a right margin keeps a long name from running under the category label. */
.pt-cover-author {
    display: block;
    margin-top: auto;
    padding-bottom: 11%;
    font-family: var(--pt-sans);
    font-size: 0.63rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    overflow-wrap: break-word;
    text-transform: uppercase;
    line-height: 1.35;
    color: rgba(251, 247, 238, 0.72);
}

/* The spine colour already encodes the category, so the label only earns its space
   on the large cover used by the product page. */
.pt-cover-foot {
    display: none;
}

.pt-cover--lg .pt-cover-foot {
    display: block;
    position: absolute;
    right: 8%;
    bottom: 7%;
    max-width: 34%;
    font-family: var(--pt-sans);
    font-size: 0.5rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    line-height: 1.3;
    text-align: right;
    text-transform: uppercase;
    color: rgba(251, 247, 238, 0.7);
    opacity: 0.8;
}

.pt-cover--lg .pt-cover-title  { font-size: clamp(1.6rem, 2.5vw, 2.2rem); }
.pt-cover--lg .pt-cover-author { font-size: 0.74rem; max-width: 58%; overflow: hidden; }
.pt-cover--lg .pt-cover-spine  { flex-basis: 20px; }

.pt-cover--mini {
    width: 46px;
    flex: 0 0 46px;
}

.pt-cover--mini .pt-cover-body   { padding: 12% 10% 0; }
.pt-cover--mini .pt-cover-rule   { width: 14px; margin-bottom: 8%; }
.pt-cover--mini .pt-cover-title  { font-size: 0.5rem; line-height: 1.2; }
.pt-cover--mini .pt-cover-spine  { flex-basis: 6px; }


/* ===========================================================================
   Hero — this week's shelf
   =========================================================================== */

.pt-hero {
    border-bottom: 1px solid var(--pt-rule);
    background: var(--pt-paper);
}

.pt-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: clamp(32px, 5vw, 74px);
    align-items: center;
    max-width: var(--pt-measure);
    margin: 0 auto;
    padding: clamp(46px, 6vw, 82px) 24px clamp(40px, 5vw, 64px);
}

.pt-hero-issue {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 22px;
}

.pt-hero-issue::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--pt-rule);
}

.pt-hero-title {
    margin: 0 0 18px;
    font-family: var(--pt-serif);
    font-size: clamp(2.3rem, 4.3vw, 3.5rem);
    font-weight: 500;
    line-height: 1.08;
    color: var(--pt-ink);
}

.pt-hero-lede {
    margin: 0 0 26px;
    max-width: 42ch;
    font-size: 1.03rem;
    color: var(--pt-ink-soft);
}

.pt-hero-sig {
    display: block;
    margin-bottom: 26px;
    padding-left: 16px;
    border-left: 2px solid var(--pt-brass);
    font-family: var(--pt-serif);
    font-size: 1.06rem;
    font-style: italic;
    color: var(--pt-ink-soft);
}

.pt-hero-sig cite {
    display: block;
    margin-top: 5px;
    font-family: var(--pt-sans);
    font-size: 0.68rem;
    font-style: normal;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--pt-walnut);
}

.pt-link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding-bottom: 3px;
    border-bottom: 1px solid var(--pt-ink);
    font-family: var(--pt-sans);
    font-size: 0.79rem;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--pt-ink);
    text-decoration: none;
}

.pt-link-arrow:hover {
    color: var(--pt-brass-dark);
    border-bottom-color: var(--pt-brass);
}

/* the shelf itself */
.pt-shelf {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(10px, 1.5vw, 20px);
    align-items: stretch;
    padding-bottom: 8px;
}

.pt-shelf-book-title,
.pt-shelf-price {
    margin-left: 1px;
}

.pt-shelf-book-title {
    padding-top: 18px;
}

.pt-shelf-book {
    display: flex;
    flex-direction: column;
    text-decoration: none;
}

.pt-shelf-book .pt-shelf-book-title {
    flex: 1 1 auto;
}

/* The plank is drawn per book, anchored to the bottom edge of its cover, and stretched
   past the gap on both sides so the segments read as one continuous shelf. */
.pt-shelf-cover {
    position: relative;
    display: block;
}

.pt-shelf-cover::after {
    content: "";
    position: absolute;
    left: calc(-1 * clamp(10px, 1.5vw, 20px) / 2 - 1px);
    right: calc(-1 * clamp(10px, 1.5vw, 20px) / 2 - 1px);
    bottom: -7px;
    height: 7px;
    background: linear-gradient(180deg, var(--pt-walnut) 0%, #5c4229 100%);
    box-shadow: 0 7px 16px -7px rgba(42, 37, 32, 0.55);
}

.pt-shelf--bare .pt-shelf-cover::after {
    display: none;
}

.pt-shelf-book .pt-cover {
    box-shadow: 0 12px 20px -14px rgba(42, 37, 32, 0.75);
}

.pt-shelf-book:hover .pt-cover {
    transform: translateY(-9px);
    box-shadow: 0 20px 30px -16px rgba(42, 37, 32, 0.7);
}

.pt-shelf-price {
    display: block;
    margin-top: 11px;
    font-family: var(--pt-sans);
    font-size: 0.79rem;
    font-weight: 600;
    color: var(--pt-ink);
}

.pt-shelf-book-title {
    display: block;
    margin-top: 3px;
    font-family: var(--pt-serif);
    font-size: 0.95rem;
    line-height: 1.25;
    color: var(--pt-ink-soft);
}


/* ===========================================================================
   Shop
   =========================================================================== */

html body ul.products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
    gap: 40px 30px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* WooCommerce's clearfix pseudo-elements become stray grid items and push the first
   book out of column one. */
html body ul.products[class*="columns-"]::before,
html body ul.products[class*="columns-"]::after {
    content: none;
    display: none;
}

html body ul.products[class*="columns-"] li.product.type-product {
    position: relative;
    width: auto;
    margin: 0;
    padding: 0;
    float: none;
    background: transparent;
    border: 0;
    box-shadow: none;
    text-align: left;
}

html body ul.products[class*="columns-"] li.product.type-product a img {
    margin: 0 0 13px;
    box-shadow: none;
}

html body ul.products[class*="columns-"] li.product.type-product .pt-cover {
    margin-bottom: 13px;
    box-shadow: 0 10px 18px -14px rgba(42, 37, 32, 0.7);
}

html body ul.products[class*="columns-"] li.product.type-product:hover .pt-cover {
    transform: translateY(-5px);
    box-shadow: 0 16px 24px -15px rgba(42, 37, 32, 0.65);
}

html body ul.products[class*="columns-"] li.product.type-product .woocommerce-loop-product__title {
    padding: 0;
    font-family: var(--pt-serif);
    font-size: 1.14rem;
    font-weight: 600;
    line-height: 1.24;
    color: var(--pt-ink);
}

html body .pt-loop-author {
    display: block;
    margin-top: 3px;
    font-family: var(--pt-sans);
    font-size: 0.74rem;
    color: var(--pt-ink-soft);
}

html body ul.products[class*="columns-"] li.product.type-product .price {
    display: block;
    margin: 7px 0 10px;
    font-family: var(--pt-sans);
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--pt-ink);
}

html body ul.products[class*="columns-"] li.product.type-product .price del {
    color: #8d8071;
    font-weight: 400;
}

html body ul.products[class*="columns-"] li.product.type-product .button,
html body ul.products[class*="columns-"] li.product.type-product .added_to_cart {
    display: inline-block;
    margin: 0 12px 0 0;
    padding: 0 0 3px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--pt-ink);
    border-radius: 0;
    font-family: var(--pt-sans);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--pt-ink);
    line-height: 1.7;
}

html body ul.products[class*="columns-"] li.product.type-product .button:hover,
html body ul.products[class*="columns-"] li.product.type-product .added_to_cart:hover {
    background: transparent;
    color: var(--pt-brass-dark);
    border-bottom-color: var(--pt-brass);
}

/* heart sits on the cover */
html body ul.products[class*="columns-"] li.product.type-product .fxw-btn {
    position: absolute;
    top: 9px;
    right: 9px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 31px;
    height: 31px;
    padding: 0;
    background: rgba(251, 247, 238, 0.9);
    border: 1px solid var(--pt-rule);
    border-radius: 0;
    color: var(--pt-ink-soft);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease, color 0.2s ease;
}

html body ul.products[class*="columns-"] li.product.type-product:hover .fxw-btn,
html body ul.products[class*="columns-"] li.product.type-product .fxw-btn:focus-visible,
html body ul.products[class*="columns-"] li.product.type-product .fxw-btn.is-active {
    opacity: 1;
}

html body .fxw-btn.is-active {
    color: #a1372b;
}

html body .fxw-btn.is-active svg {
    fill: #a1372b;
}

/* archive header */
html body .woocommerce-products-header,
html body .woocommerce-page .woocommerce-products-header {
    max-width: var(--pt-measure);
    margin: 0 auto;
    padding: 46px 24px 0;
}

html body .woocommerce-products-header__title {
    font-family: var(--pt-serif);
    font-size: clamp(2rem, 3.6vw, 2.9rem);
    font-weight: 500;
}

html body .woocommerce-result-count,
html body .woocommerce-ordering {
    font-family: var(--pt-sans);
    font-size: 0.82rem;
    color: var(--pt-ink-soft);
}


/* ---- single product ---- */

html body.single-product div.product {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(30px, 5vw, 66px);
    align-items: start;
    max-width: var(--pt-measure);
    margin: 0 auto;
    padding: clamp(34px, 4vw, 58px) 24px;
}

html body.single-product div.product .pt-single-cover {
    max-width: 340px;
}

html body.single-product div.product .product_title {
    margin: 0 0 6px;
    font-family: var(--pt-serif);
    font-size: clamp(2rem, 3.4vw, 2.8rem);
    font-weight: 500;
    line-height: 1.1;
}

html body.single-product div.product p.price,
html body.single-product div.product span.price {
    margin: 16px 0 22px;
    font-family: var(--pt-sans);
    font-size: 1.28rem;
    font-weight: 600;
    color: var(--pt-ink);
}

html body.single-product div.product .woocommerce-product-details__short-description {
    padding-bottom: 16px;
    border-bottom: 1px solid var(--pt-rule-soft);
    font-family: var(--pt-sans);
    font-size: 0.92rem;
    color: var(--pt-ink-soft);
}

html body .pt-book-note {
    font-family: var(--pt-serif);
    font-size: 1.22rem;
    font-style: italic;
    line-height: 1.5;
    color: var(--pt-ink);
}

html body .pt-book-meta {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0;
    margin: 22px 0 0;
    border-top: 1px solid var(--pt-rule);
}

html body .pt-book-meta dt {
    padding: 9px 20px 9px 0;
    border-bottom: 1px solid var(--pt-rule-soft);
    font-family: var(--pt-sans);
    font-size: 0.67rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--pt-walnut);
}

html body .pt-book-meta dd {
    margin: 0;
    padding: 9px 0;
    border-bottom: 1px solid var(--pt-rule-soft);
    font-family: var(--pt-sans);
    font-size: 0.9rem;
    color: var(--pt-ink);
}

html body div.product form.cart {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 24px 0;
}

html body div.product form.cart .quantity input.qty {
    width: 62px;
    height: 46px;
    min-height: 0;
    padding: 0 8px;
    border: 1px solid var(--pt-rule);
    border-radius: 0;
    background: var(--pt-card);
    font-family: var(--pt-sans);
    text-align: center;
    color: var(--pt-ink);
}

html body div.product form.cart .button,
html body .woocommerce .pt-btn {
    height: 46px;
    padding: 0 26px;
    background: var(--pt-ink);
    border: 1px solid var(--pt-ink);
    border-radius: 0;
    font-family: var(--pt-sans);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--pt-paper);
}

html body div.product form.cart .button:hover {
    background: var(--pt-brass-dark);
    border-color: var(--pt-brass-dark);
    color: #fff;
}


/* ===========================================================================
   Drawers — basket + reading list
   =========================================================================== */

.fxmc-overlay {
    position: fixed;
    inset: 0;
    z-index: 900;
    background: rgba(26, 22, 18, 0.42);
    opacity: 0;
    transition: opacity 0.24s ease;
}

.fxmc-overlay.is-open {
    opacity: 1;
}

.fxmc-drawer,
.fxw-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 910;
    display: flex;
    flex-direction: column;
    width: min(390px, 92vw);
    background: var(--pt-card);
    border-left: 1px solid var(--pt-rule);
    transform: translateX(102%);
    transition: transform 0.28s ease;
}

.fxmc-drawer.is-open,
.fxw-drawer.is-open {
    transform: none;
}

.fxmc-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 22px 16px;
    border-bottom: 1px solid var(--pt-rule);
}

.fxmc-title {
    font-family: var(--pt-serif);
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--pt-ink);
}

.fxmc-close {
    width: 34px;
    height: 34px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--pt-ink-soft);
    cursor: pointer;
}

.fxmc-close:hover {
    border-color: var(--pt-rule);
    color: var(--pt-ink);
}

.fxmc-body,
.fxw-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 18px 22px 26px;
}

body.pt-drawer-open {
    overflow: hidden;
}

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

.fxw-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 0;
    border-bottom: 1px solid var(--pt-rule-soft);
}

.fxw-item-link {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 12px;
    min-width: 0;
    text-decoration: none;
}

.fxw-item-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.fxw-item-title {
    font-family: var(--pt-serif);
    font-size: 1.02rem;
    line-height: 1.2;
    color: var(--pt-ink);
}

.fxw-item-author {
    font-family: var(--pt-sans);
    font-size: 0.72rem;
    color: var(--pt-ink-soft);
}

.fxw-item-price {
    margin-top: 3px;
    font-family: var(--pt-sans);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--pt-ink);
}

.fxw-item-remove {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    font-size: 1.2rem;
    line-height: 1;
    color: var(--pt-ink-soft);
    cursor: pointer;
}

.fxw-item-remove:hover {
    border-color: var(--pt-rule);
    color: #a1372b;
}

.fxw-empty {
    font-family: var(--pt-serif);
    font-size: 1.12rem;
    font-style: italic;
    line-height: 1.55;
    color: var(--pt-ink-soft);
}

.fxw-all {
    display: inline-block;
    margin-top: 18px;
    padding-bottom: 3px;
    border-bottom: 1px solid var(--pt-ink);
    font-family: var(--pt-sans);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--pt-ink);
}

/* WooCommerce's own mini-cart markup inside our drawer */
html body .fxmc-body ul.cart_list li {
    padding: 13px 0 13px 0;
    border-bottom: 1px solid var(--pt-rule-soft);
}

html body .fxmc-body ul.cart_list li a {
    font-family: var(--pt-serif);
    font-size: 1.02rem;
    font-weight: 500;
    color: var(--pt-ink);
    text-decoration: none;
}

html body .fxmc-body .woocommerce-mini-cart__total {
    display: flex;
    justify-content: space-between;
    padding: 15px 0;
    border-top: 1px solid var(--pt-rule);
    font-family: var(--pt-sans);
    font-size: 0.95rem;
    font-weight: 600;
}

html body .fxmc-body .woocommerce-mini-cart__buttons {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

html body .fxmc-body .woocommerce-mini-cart__buttons a {
    display: block;
    padding: 13px 18px;
    text-align: center;
    font-family: var(--pt-sans);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 0;
}

html body .fxmc-body .woocommerce-mini-cart__buttons a.checkout {
    background: var(--pt-ink);
    color: var(--pt-paper);
    border: 1px solid var(--pt-ink);
}

html body .fxmc-body .woocommerce-mini-cart__buttons a:not(.checkout) {
    background: transparent;
    color: var(--pt-ink);
    border: 1px solid var(--pt-rule);
}

html body .fxmc-body .woocommerce-mini-cart__empty-message {
    font-family: var(--pt-serif);
    font-size: 1.12rem;
    font-style: italic;
    color: var(--pt-ink-soft);
}

/* the /wishlist/ page */
.pt-shelf-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 36px 26px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pt-shelf-item {
    position: relative;
}

.pt-shelf-item a {
    text-decoration: none;
}

.pt-shelf-item .pt-shelf-title {
    display: block;
    margin-top: 12px;
    font-family: var(--pt-serif);
    font-size: 1.1rem;
    color: var(--pt-ink);
}

.pt-shelf-item .pt-shelf-author {
    display: block;
    font-family: var(--pt-sans);
    font-size: 0.74rem;
    color: var(--pt-ink-soft);
}

.pt-shelf-item .fxw-item-remove {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(251, 247, 238, 0.9);
    border-color: var(--pt-rule);
}


/* ===========================================================================
   LIVE RUNTIME OVERRIDES
   The live site carries body.fx-skin-glass and body.fx-arch-commerce, which are
   absent locally. The glass skin styles .fx-skin-glass .x at (0,2,0) and beats
   plain body .x at (0,1,1), so anything it touches is re-asserted here at a
   higher weight. No !important: specificity does the work.
   =========================================================================== */

html body.fx-skin-glass {
    background: var(--pt-paper);
}

html body.fx-skin-glass .t-section,
html body.fx-arch-commerce .t-section {
    background: transparent;
}

html body.fx-skin-glass .pt-band-paper {
    background: var(--pt-paper);
}

html body.fx-skin-glass .pt-band-ink {
    background: var(--pt-ink);
}

html body.fx-skin-glass .pt-band-card {
    background: var(--pt-card);
}

/* square everything the skin rounds */
html body.fx-skin-glass .t-card,
html body.fx-skin-glass .t-btn-primary,
html body.fx-skin-glass .t-btn-ghost,
html body.fx-skin-glass .pt-cover,
html body.fx-skin-glass .pt-act,
html body.fx-skin-glass .fxmc-drawer,
html body.fx-skin-glass .fxw-drawer,
html body.fx-skin-glass .pt-search-form,
html body.fx-skin-glass input,
html body.fx-skin-glass button {
    border-radius: 0;
}

html body.fx-skin-glass .t-card {
    background: var(--pt-card);
    border: 1px solid var(--pt-rule);
    box-shadow: none;
}

html body.fx-skin-glass .t-btn-primary {
    background: var(--pt-ink);
    border: 1px solid var(--pt-ink);
    color: var(--pt-paper);
    font-family: var(--pt-sans);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    box-shadow: none;
}

html body.fx-skin-glass .t-btn-primary:hover {
    background: var(--pt-brass-dark);
    border-color: var(--pt-brass-dark);
}

html body.fx-skin-glass .t-btn-ghost {
    background: transparent;
    border: 1px solid var(--pt-ink);
    color: var(--pt-ink);
    font-family: var(--pt-sans);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    box-shadow: none;
}

html body.fx-skin-glass .t-section-title {
    font-family: var(--pt-serif);
    color: var(--pt-ink);
}

html body.fx-skin-glass .fx-header,
html body.fx-skin-glass .fx-header.is-stuck {
    height: auto;
    min-height: 0;
    background: var(--pt-ink);
    backdrop-filter: none;
}

/* the live header may be laid out logo-center, which absolutely positions the
   wordmark over the search bar */
html body .fx-header--logo-center .fx-header-inner {
    justify-content: flex-start;
}

html body .fx-header--logo-center .fx-logo {
    position: static;
    left: auto;
    transform: none;
    flex-basis: auto;
}


/* ===========================================================================
   Responsive
   The desktop nav collapses at 900px in fixit-core, but this header carries a
   search field as well, so the second row is the part that runs out of space
   first — around 1024. Checked at 1440 / 1180 / 1024 / 900 / 390.
   =========================================================================== */

@media (max-width: 1180px) {
    html body .fx-nav-list {
        gap: 18px;
    }

    html body .fx-nav-link {
        font-size: 0.74rem;
        letter-spacing: 0.1em;
    }
}

@media (max-width: 1024px) {
    .pt-hero-inner {
        grid-template-columns: 1fr;
        gap: 38px;
    }

    .pt-shelf {
        max-width: 520px;
    }

    html body.single-product div.product {
        grid-template-columns: 1fr;
    }

    html body.single-product div.product .pt-single-cover {
        max-width: 260px;
    }
}

@media (max-width: 900px) {
    html body .fx-header-inner {
        padding: 12px 18px;
        gap: 12px;
    }

    html body .pt-search {
        order: 4;
        flex: 1 0 100%;
        max-width: none;
        padding-bottom: 12px;
    }

    html body .fx-header-actions {
        order: 3;
        margin-left: auto;
    }

    html body .fx-nav {
        display: none;
    }

    html body .fx-nav-mobile-list .sub-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        min-width: 0;
        border: 0;
        box-shadow: none;
        background: transparent;
        padding: 0 0 0 14px;
    }
}

@media (max-width: 600px) {
    html body .fx-logo-text,
    html body .fx-logo-wordmark {
        font-size: 1.34rem;
    }

    html body .pt-act {
        width: 36px;
        height: 36px;
    }

    .pt-shelf {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px 16px;
    }

    .pt-shelf::after {
        display: none;
    }

    html body ul.products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px 18px;
    }
}


/* ===========================================================================
   Home page bands
   =========================================================================== */

.pt-wrap {
    max-width: var(--pt-measure);
    margin: 0 auto;
    padding: 0 24px;
}

.pt-band {
    padding: clamp(48px, 6vw, 88px) 0;
    border-bottom: 1px solid var(--pt-rule);
    background: var(--pt-paper);
}

.pt-band-card {
    background: var(--pt-card);
}

.pt-band-ink {
    background: var(--pt-ink);
    border-bottom-color: var(--pt-ink);
    color: var(--pt-paper);
}

.pt-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: clamp(26px, 3vw, 40px);
    padding-bottom: 16px;
    border-bottom: 1px solid var(--pt-rule);
}

.pt-band-ink .pt-section-head {
    border-bottom-color: rgba(245, 239, 227, 0.22);
}

.pt-section-title {
    margin: 6px 0 0;
    font-family: var(--pt-serif);
    font-size: clamp(1.7rem, 3vw, 2.5rem);
    font-weight: 500;
    line-height: 1.1;
    color: var(--pt-ink);
}

.pt-band-ink .pt-section-title,
.pt-band-ink .pt-eyebrow,
.pt-band-ink .pt-link-arrow {
    color: var(--pt-paper);
}

.pt-band-ink .pt-eyebrow {
    color: var(--pt-brass);
}

.pt-band-ink .pt-link-arrow {
    border-bottom-color: var(--pt-brass);
}

.pt-band-ink .pt-link-arrow:hover {
    color: var(--pt-brass);
}

/* ---- creed ---- */

.pt-creed-title {
    max-width: 18ch;
    margin: 0 0 34px;
    font-family: var(--pt-serif);
    font-size: clamp(1.9rem, 3.4vw, 2.8rem);
    font-weight: 500;
    line-height: 1.08;
}

.pt-creed-cols {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    border-top: 1px solid var(--pt-rule);
}

.pt-creed-col {
    padding: 22px 30px 4px 0;
    border-right: 1px solid var(--pt-rule);
}

.pt-creed-col:last-child {
    border-right: 0;
    padding-right: 0;
}

.pt-creed-col:not(:first-child) {
    padding-left: 30px;
}

.pt-creed-col p {
    margin: 10px 0 0;
    font-size: 0.94rem;
    color: var(--pt-ink-soft);
}

/* ---- contents index ---- */

.pt-contents-list {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.pt-contents-list li {
    border-bottom: 1px solid var(--pt-rule-soft);
}

.pt-contents-list a {
    display: grid;
    grid-template-columns: 52px minmax(0, 260px) minmax(0, 1fr) 48px;
    align-items: baseline;
    gap: 16px;
    padding: 17px 0;
    text-decoration: none;
    transition: color 0.2s ease;
}

.pt-contents-list a:hover {
    color: var(--pt-brass-dark);
}

.pt-contents-num {
    font-family: var(--pt-serif);
    font-size: 0.95rem;
    letter-spacing: 0.1em;
    color: var(--pt-walnut);
}

.pt-contents-name {
    font-family: var(--pt-serif);
    font-size: clamp(1.25rem, 2vw, 1.65rem);
    font-weight: 500;
    color: inherit;
}

.pt-contents-note {
    font-family: var(--pt-sans);
    font-size: 0.86rem;
    color: var(--pt-ink-soft);
}

.pt-contents-count {
    font-family: var(--pt-sans);
    font-size: 0.82rem;
    font-weight: 600;
    text-align: right;
    color: var(--pt-ink);
}

/* ---- the long evening ---- */

.pt-evening-table {
    width: 100%;
    border-collapse: collapse;
}

.pt-evening-table td {
    padding: 15px 14px 15px 0;
    border-bottom: 1px solid rgba(245, 239, 227, 0.18);
    font-family: var(--pt-sans);
    font-size: 0.92rem;
    color: rgba(245, 239, 227, 0.86);
    vertical-align: baseline;
}

.pt-ev-date {
    width: 92px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--pt-brass);
    white-space: nowrap;
}

.pt-ev-title {
    font-family: var(--pt-serif);
    font-size: 1.22rem;
    color: var(--pt-paper);
}

.pt-ev-host {
    font-size: 0.86rem;
    color: rgba(245, 239, 227, 0.6);
}

.pt-ev-seats {
    width: 96px;
    text-align: right;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
}

.pt-ev-full {
    color: rgba(245, 239, 227, 0.38);
}

/* ---- staff shelf ---- */

.pt-staff .pt-shelf {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.pt-shelf--bare::after {
    display: none;
}

/* ---- visit ---- */

.pt-visit-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(28px, 4vw, 58px);
    align-items: center;
}

.pt-visit-inner p {
    max-width: 46ch;
    color: var(--pt-ink-soft);
}

.pt-hours {
    display: grid;
    grid-template-columns: max-content 1fr;
    margin: 24px 0;
    border-top: 1px solid var(--pt-rule);
}

.pt-hours dt {
    padding: 10px 24px 10px 0;
    border-bottom: 1px solid var(--pt-rule-soft);
    font-family: var(--pt-sans);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--pt-walnut);
}

.pt-hours dd {
    margin: 0;
    padding: 10px 0;
    border-bottom: 1px solid var(--pt-rule-soft);
    font-family: var(--pt-sans);
    font-size: 0.92rem;
    color: var(--pt-ink);
}

.pt-visit-figure {
    margin: 0;
}

.pt-visit-figure img {
    display: block;
    width: 100%;
    height: clamp(280px, 34vw, 420px);
    object-fit: cover;
    border: 1px solid var(--pt-rule);
}

@media (max-width: 1024px) {
    .pt-creed-cols {
        grid-template-columns: 1fr;
    }

    .pt-creed-col {
        padding: 18px 0;
        border-right: 0;
        border-bottom: 1px solid var(--pt-rule-soft);
    }

    .pt-creed-col:not(:first-child) {
        padding-left: 0;
    }

    .pt-visit-inner {
        grid-template-columns: 1fr;
    }

    .pt-staff .pt-shelf {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .pt-section-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

    .pt-contents-list a {
        grid-template-columns: 34px minmax(0, 1fr) 44px;
        gap: 10px;
    }

    .pt-contents-note {
        display: none;
    }

    .pt-evening-table,
    .pt-evening-table tbody,
    .pt-evening-table tr,
    .pt-evening-table td {
        display: block;
        width: auto;
    }

    .pt-evening-table tr {
        padding: 14px 0;
        border-bottom: 1px solid rgba(245, 239, 227, 0.18);
    }

    .pt-evening-table td {
        padding: 1px 0;
        border-bottom: 0;
        text-align: left;
    }

    .pt-staff .pt-shelf {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* ===========================================================================
   Mega menu position fix
   nimbus-base gives .fx-mega-menu top:100% (correct while it is absolute) and then
   .fx-mega-menu--fullwidth switches it to position:fixed without resetting top. Fixed
   positioning resolves 100% against the viewport, so the panel opens a full screen
   below the fold and looks like a menu with no dropdown at all.
   =========================================================================== */

html body .fx-nav-list > li.fx-has-mega {
    position: static;
}

html body .fx-header .fx-mega-menu--fullwidth {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: auto;
}

html body .fx-nav {
    position: relative;
}

/* ===========================================================================
   Search autocomplete (AmazingSearch)
   The plugin right-aligns the panel to the search field using its own outerWidth, so
   giving the panel the width of the field is what puts it under the field. Its top/left
   are written inline, which no selector can beat -- width is not, which is the opening.
   =========================================================================== */

html body #amazingsearch-autocomplete {
    position: absolute;
    z-index: 940;
    /* the panel is aligned to the input's right edge, which sits one field-padding
       inside the bar; the margin puts the two right edges back together */
    margin-left: 13px;
    width: min(460px, calc(100vw - 32px));
    max-height: min(70vh, 620px);
    overflow-y: auto;
    padding: 0;
    background: var(--pt-card);
    border: 1px solid var(--pt-rule);
    border-radius: 0;
    box-shadow: 0 24px 40px -28px rgba(42, 37, 32, 0.7);
}

html body .amazingsearch-section {
    padding: 14px 18px;
    border-bottom: 1px solid var(--pt-rule-soft);
}

html body .amazingsearch-section:last-child {
    border-bottom: 0;
}

html body .amazingsearch-section-title {
    margin-bottom: 9px;
    font-family: var(--pt-sans);
    font-size: 0.63rem;
    font-weight: 600;
    letter-spacing: 0.17em;
    text-transform: uppercase;
    color: var(--pt-walnut);
}

html body .amazingsearch-product-list,
html body .amazingsearch-items {
    margin: 0;
    padding: 0;
    list-style: none;
}

html body .amazingsearch-product-item,
html body .amazingsearch-item {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid var(--pt-rule-soft);
}

html body .amazingsearch-product-item:last-child,
html body .amazingsearch-item:last-child {
    border-bottom: 0;
}

html body .amazingsearch-product-link,
html body .amazingsearch-item a {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 9px 0;
    text-decoration: none;
    color: var(--pt-ink);
}

html body .amazingsearch-product-link:hover,
html body .amazingsearch-item a:hover {
    color: var(--pt-brass-dark);
}

html body .amazingsearch-product-info {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

html body .amazingsearch-product-name {
    font-family: var(--pt-serif);
    font-size: 1.06rem;
    font-weight: 500;
    line-height: 1.25;
    color: inherit;
}

html body .amazingsearch-highlight {
    background: transparent;
    color: var(--pt-brass-dark);
    font-weight: 600;
}

html body .amazingsearch-product-desc {
    font-family: var(--pt-sans);
    font-size: 0.74rem;
    line-height: 1.45;
    color: var(--pt-ink-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html body .amazingsearch-product-price {
    flex: 0 0 auto;
}

html body .amazingsearch-price {
    font-family: var(--pt-sans);
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--pt-ink);
    white-space: nowrap;
}

html body .amazingsearch-product-image,
html body .amazingsearch-product-item img {
    display: none;
}

html body .amazingsearch-further-search {
    padding-top: 11px;
}

html body .amazingsearch-further-search-link {
    display: inline-block;
    padding-bottom: 2px;
    border-bottom: 1px solid var(--pt-ink);
    font-family: var(--pt-sans);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--pt-ink);
}

html body .amazingsearch-item a {
    font-family: var(--pt-sans);
    font-size: 0.88rem;
    padding: 6px 0;
}

/* The mega panel puts its columns on .fx-mega-inner, which only ever has one child list,
   so the column count has to live on the list itself. */
html body .fx-mega-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2px 40px;
}

/* .fx-mega-inner is itself a --fx-mega-cols grid, so the list was being squeezed into
   one 260px column. Let the inner be a plain block and put the columns on the list. */
html body .fx-mega-inner {
    display: block;
    max-width: var(--pt-measure);
    margin: 0 auto;
    padding: 22px 24px 26px;
}

/* a colour chip per category, matching the book covers */
html body .fx-mega-list .fx-nav-link {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 8px 0;
}

html body .fx-mega-list .fx-nav-link::before {
    content: "";
    flex: 0 0 auto;
    width: 9px;
    height: 22px;
    background: var(--pt-rule);
}

html body .fx-mega-list a[href*="/fiction/"]::before              { background: var(--pt-cat-fiction); }
html body .fx-mega-list a[href*="/philosophy/"]::before           { background: var(--pt-cat-philosophy); }
html body .fx-mega-list a[href*="/poetry/"]::before               { background: var(--pt-cat-poetry); }
html body .fx-mega-list a[href*="/essay-non-fiction/"]::before    { background: var(--pt-cat-essay-non-fiction); }
html body .fx-mega-list a[href*="/classics/"]::before             { background: var(--pt-cat-classics); }
html body .fx-mega-list a[href*="/children-young-adult/"]::before { background: var(--pt-cat-children-young-adult); }
html body .fx-mega-list a[href*="/children-you"]::before          { background: var(--pt-cat-children-young-adult); }

/* the plugin's price row carries its own add-to-cart button, styled bright blue by
   default; pull the row onto one line and make the button match the shop */
html body .amazingsearch-product-price {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 4px;
}

html body .amazingsearch-tocart-btn {
    width: auto;
    min-width: 0;
    height: 26px;
    padding: 0 10px;
    background: transparent;
    border: 1px solid var(--pt-rule);
    border-radius: 0;
    box-shadow: none;
    font-family: var(--pt-sans);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    line-height: 24px;
    color: var(--pt-ink);
    cursor: pointer;
}

html body .amazingsearch-tocart-btn:hover {
    background: var(--pt-ink);
    border-color: var(--pt-ink);
    color: var(--pt-paper);
}


/* ===========================================================================
   Header: ink ground
   Two fixes live here. First, the theme options pin .fx-header to
   --fx-header-height (60px), which was written for a one-row header; the menu row
   overflowed the painted box, so page content slid underneath it and the header
   looked half transparent while scrolling. Height has to go back to auto.
   Second, the header and its dropdowns sit on ink rather than paper, so the
   coloured covers read against a neutral rather than competing with the page.
   =========================================================================== */

html body .fx-header,
html body .fx-header.is-stuck {
    height: auto;
    min-height: 0;
    background: var(--pt-ink);
    border-bottom: 1px solid rgba(245, 239, 227, 0.14);
}

html body .fx-header-inner {
    height: auto;
    padding-bottom: 0;
}

html body .fx-logo-text,
html body .fx-logo-wordmark {
    color: var(--pt-paper);
}

html body .fx-nav {
    border-top: 1px solid rgba(245, 239, 227, 0.12);
}

html body .fx-nav-link {
    color: rgba(245, 239, 227, 0.88);
}

html body .fx-nav-list > li > .fx-nav-link:hover,
html body .fx-nav-list > li.current-menu-item > .fx-nav-link,
html body .fx-nav-list > li.current-menu-parent > .fx-nav-link,
html body .fx-nav-list > li.current-menu-ancestor > .fx-nav-link {
    color: var(--pt-brass);
    border-bottom-color: var(--pt-brass);
}

html body .pt-act {
    color: rgba(245, 239, 227, 0.9);
}

html body .pt-act:hover {
    border-color: rgba(245, 239, 227, 0.3);
    color: var(--pt-brass);
}

html body .pt-act-badge {
    background: var(--pt-brass);
    color: var(--pt-ink);
}

/* the field stays light: a search box you type into should read as paper */
html body .pt-search-form {
    border-color: rgba(245, 239, 227, 0.22);
    background: rgba(245, 239, 227, 0.07);
}

html body .pt-search-form:focus-within {
    border-color: var(--pt-brass);
    background: var(--pt-card);
}

html body .pt-search-form input.pt-search-field {
    color: var(--pt-paper);
}

html body .pt-search-form:focus-within input.pt-search-field {
    color: var(--pt-ink);
}

html body .pt-search-form input.pt-search-field::placeholder {
    color: rgba(245, 239, 227, 0.5);
}

html body .pt-search-form:focus-within input.pt-search-field::placeholder {
    color: #8d8071;
}

html body .pt-search-icon {
    color: rgba(245, 239, 227, 0.55);
}

html body .pt-search-form:focus-within .pt-search-icon {
    color: var(--pt-walnut);
}

/* ---- dropdowns on ink ---- */

html body .fx-header .fx-mega-menu,
html body .fx-header .fx-mega-menu--fullwidth {
    background: #221e19;
    border-top: 1px solid rgba(245, 239, 227, 0.12);
    border-bottom: 1px solid rgba(245, 239, 227, 0.12);
    box-shadow: 0 26px 40px -30px rgba(0, 0, 0, 0.9);
}

html body .fx-mega-list .fx-nav-link {
    color: rgba(245, 239, 227, 0.88);
}

html body .fx-mega-list .fx-nav-link:hover {
    color: var(--pt-brass);
}

html body .fx-nav-list .sub-menu {
    background: #221e19;
    border-color: rgba(245, 239, 227, 0.14);
    box-shadow: 0 22px 36px -28px rgba(0, 0, 0, 0.9);
}

html body .fx-nav-list .sub-menu a {
    color: rgba(245, 239, 227, 0.86);
}

html body .fx-nav-list .sub-menu a:hover {
    background: rgba(245, 239, 227, 0.06);
    color: var(--pt-brass);
}

/* the search results panel follows the same ground */
html body #amazingsearch-autocomplete {
    --amazingsearch-hover-bg: rgba(245, 239, 227, 0.09);
    background: #221e19;
    border-color: rgba(245, 239, 227, 0.16);
    box-shadow: 0 26px 44px -30px rgba(0, 0, 0, 0.9);
}

html body .amazingsearch-popular .amazingsearch-item,
html body .amazingsearch-recent .amazingsearch-item {
    border: 1px solid rgba(245, 239, 227, 0.18);
    border-radius: 0;
    color: rgba(245, 239, 227, 0.82);
}

html body .amazingsearch-popular .amazingsearch-item:hover,
html body .amazingsearch-recent .amazingsearch-item:hover {
    border-color: var(--pt-brass);
}

html body .amazingsearch-popular .amazingsearch-item a,
html body .amazingsearch-recent .amazingsearch-item a {
    color: rgba(245, 239, 227, 0.82);
}

html body .amazingsearch-product-link {
    text-decoration: none;
}

html body .amazingsearch-section {
    border-bottom-color: rgba(245, 239, 227, 0.1);
}

html body .amazingsearch-section-title {
    color: var(--pt-brass);
}

html body .amazingsearch-product-item,
html body .amazingsearch-item {
    border-bottom-color: rgba(245, 239, 227, 0.08);
}

html body .amazingsearch-product-link,
html body .amazingsearch-item a {
    color: rgba(245, 239, 227, 0.9);
}

html body .amazingsearch-product-link:hover,
html body .amazingsearch-item a:hover {
    color: var(--pt-brass);
}

html body .amazingsearch-product-desc {
    color: rgba(245, 239, 227, 0.55);
}

html body .amazingsearch-price {
    color: var(--pt-paper);
}

html body .amazingsearch-highlight {
    color: var(--pt-brass);
}

html body .amazingsearch-tocart-btn {
    border-color: rgba(245, 239, 227, 0.26);
    color: rgba(245, 239, 227, 0.9);
}

html body .amazingsearch-tocart-btn:hover {
    background: var(--pt-brass);
    border-color: var(--pt-brass);
    color: var(--pt-ink);
}

html body .amazingsearch-further-search-link {
    border-bottom-color: var(--pt-brass);
    color: var(--pt-brass);
}

/* mobile menu panel matches */
html body .fx-nav-mobile {
    background: #221e19;
}

html body .fx-nav-mobile a {
    color: rgba(245, 239, 227, 0.88);
}

/* nimbus-base styles inputs through a :not() chain that lands at (0,4,1); the field needs
   four classes of its own to outrank it, otherwise it keeps --fx-input-bg white and glares
   against the ink header. */
html body .pt-search .pt-search-form input.pt-search-field.search-field {
    background: rgba(245, 239, 227, 0.07);
    border: 0;
    box-shadow: none;
    color: var(--pt-paper);
}

html body .pt-search .pt-search-form:focus-within input.pt-search-field.search-field {
    background: transparent;
    color: var(--pt-ink);
}


/* ===========================================================================
   Search bar: a ruled line, not a widget
   The filled box read as a grey slab with a second box inside it (both the form and
   the field carried a background, and the field started after the icon). Everything
   else in this theme is hairlines and squares, so the search is a rule as well.
   =========================================================================== */

html body .pt-search {
    max-width: var(--pt-search-w);
    align-self: center;
}

html body .pt-search .pt-search-form {
    gap: 11px;
    height: auto;
    padding: 0 2px 7px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(245, 239, 227, 0.28);
    box-shadow: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* the second pixel comes from a shadow so focus does not shift the row by 1px */
html body .pt-search .pt-search-form:focus-within {
    background: transparent;
    border-bottom-color: var(--pt-brass);
    box-shadow: 0 1px 0 0 var(--pt-brass);
}

html body .pt-search .pt-search-form input.pt-search-field.search-field {
    height: 26px;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    font-family: var(--pt-serif);
    font-size: 1.08rem;
    letter-spacing: 0.01em;
    color: var(--pt-paper);
}

html body .pt-search .pt-search-form:focus-within input.pt-search-field.search-field {
    background: transparent;
    color: var(--pt-paper);
}

html body .pt-search-form input.pt-search-field::placeholder,
html body .pt-search-form:focus-within input.pt-search-field::placeholder {
    font-family: var(--pt-serif);
    font-size: 1.06rem;
    font-style: italic;
    color: rgba(245, 239, 227, 0.42);
    opacity: 1;
}

html body .pt-search-icon,
html body .pt-search-form:focus-within .pt-search-icon {
    width: 17px;
    height: 17px;
    color: rgba(245, 239, 227, 0.5);
    transition: color 0.2s ease;
}

html body .pt-search-form:focus-within .pt-search-icon {
    color: var(--pt-brass);
}

/* the results panel hangs off the rule, so it should not repeat the border above it */
html body #amazingsearch-autocomplete {
    border-top-color: var(--pt-brass);
}

/* The panel is placed by the plugin from the field's own box: top from the input's
   height, left from the panel's own width. Matching the panel width to the bar is what
   lines the two right edges up; the margins take out the few pixels of padding the
   plugin cannot know about, and drop the panel clear of the rule. */
html body #amazingsearch-autocomplete {
    width: min(var(--pt-search-w), calc(100vw - 32px));
    margin-top: 12px;
    margin-left: 2px;
}

/* The field sits in the header's first row, so at z-index 940 the panel was sliding
   behind the menu row and losing its first entries. It has to sit above the header,
   which also keeps it correct when the header changes height at mobile. */
html body #amazingsearch-autocomplete {
    z-index: 1010;
    overflow-x: hidden;
}

html body .amazingsearch-product-link,
html body .amazingsearch-item a {
    max-width: 100%;
}

html body .amazingsearch-product-info {
    max-width: 100%;
    overflow: hidden;
}

/* name / byline / price stack at the left; the add button is centred against the whole
   row rather than floating between two of the three lines */
html body .amazingsearch-product-item {
    position: relative;
}

html body .amazingsearch-product-link {
    padding-right: 46px;
}

html body .amazingsearch-tocart-btn {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

html body .amazingsearch-product-price {
    margin-top: 2px;
}


/* ===========================================================================
   Mobile header
   This block is last on purpose: the ink and search sections above were appended
   after the responsive rules, so anything they set has to be re-stated here to win.
   =========================================================================== */

@media (max-width: 900px) {
    html body .fx-header-inner {
        max-width: 100%;
        gap: 10px;
        padding: 11px 16px 12px;
    }

    html body .fx-logo {
        order: 1;
        margin-right: auto;
    }

    html body .fx-header-actions {
        order: 2;
        gap: 2px;
        margin-left: 0;
    }

    /* the field drops to its own full-width row under the wordmark */
    html body .pt-search {
        order: 3;
        flex: 1 1 100%;
        width: 100%;
        max-width: 100%;
        margin: 2px 0 0;
    }

    html body .pt-search .pt-search-form {
        padding: 0 2px 8px;
    }

    html body .pt-search .pt-search-form input.pt-search-field.search-field {
        font-size: 1rem;
    }

    /* the collapsed panel was sizing to its own content and dragging the whole
       document wider than the viewport */
    html body .fx-nav-mobile {
        order: 4;
        flex: 1 0 100%;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow-x: hidden;
    }

    html body .fx-nav-mobile-list {
        display: flex;
        flex-direction: column;
        width: 100%;
        min-width: 0;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    html body .fx-nav-mobile-list li {
        width: 100%;
        min-width: 0;
        list-style: none;
    }

    html body .fx-nav-mobile-list a {
        display: block;
        width: 100%;
        padding: 11px 0;
        border-bottom: 1px solid rgba(245, 239, 227, 0.1);
        font-family: var(--pt-sans);
        font-size: 0.82rem;
        font-weight: 600;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: rgba(245, 239, 227, 0.9);
        text-decoration: none;
    }

    /* children read as an indented, lighter list rather than a second dropdown */
    html body .fx-nav-mobile-list .sub-menu,
    html body .fx-nav-mobile-list ul {
        position: static;
        display: block;
        width: 100%;
        min-width: 0;
        margin: 0;
        padding: 0 0 6px 14px;
        background: transparent;
        border: 0;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    html body .fx-nav-mobile-list .sub-menu a,
    html body .fx-nav-mobile-list ul a {
        padding: 8px 0;
        border-bottom: 0;
        font-family: var(--pt-serif);
        font-size: 1rem;
        font-weight: 400;
        letter-spacing: 0;
        text-transform: none;
        color: rgba(245, 239, 227, 0.72);
    }

    html body .fx-nav-toggle {
        order: 3;
        width: 38px;
        height: 38px;
        padding: 0;
        background: transparent;
        border: 1px solid transparent;
    }

    html body .fx-nav-toggle span {
        background: rgba(245, 239, 227, 0.9);
    }

    /* the results panel is full-bleed on a narrow screen */
    html body #amazingsearch-autocomplete {
        width: calc(100vw - 32px);
        margin-left: 0;
    }
}

@media (max-width: 600px) {
    html body .fx-logo-text,
    html body .fx-logo-wordmark {
        font-size: 1.3rem;
    }

    html body .pt-act {
        width: 34px;
        height: 34px;
    }
}

/* The hamburger never opens the menu on any Nimbus theme: nimbus-base.css reveals the
   drawer with `.fx-nav-mobile.fx-open`, but fixit-core's nav.js never adds that class --
   it sets aria-hidden on the drawer and puts `fx-nav-open` on <body>. Opening off the
   class the script actually writes is the whole fix, and it needs no JS. */
@media (max-width: 900px) {
    html body.fx-nav-open .fx-nav-mobile {
        max-height: 78vh;
        overflow-y: auto;
        border-top: 1px solid rgba(245, 239, 227, 0.12);
    }

    html body.fx-nav-open {
        overflow: hidden;
    }

    html body .fx-nav-mobile-list {
        padding: 8px 16px 18px;
    }

    /* hamburger turns into a cross while the drawer is open */
    html body .fx-nav-toggle.is-open span:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
    }

    html body .fx-nav-toggle.is-open span:nth-child(2) {
        opacity: 0;
    }

    html body .fx-nav-toggle.is-open span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
    }

    html body .fx-nav-toggle span {
        transition: transform 0.22s ease, opacity 0.22s ease;
    }
}


/* ===========================================================================
   Spines — books seen from the side, standing on the shelf
   Width comes from the real page count (inline --pt-spine-w), so the row has the
   uneven rhythm of an actual shelf rather than a set of identical slabs.
   =========================================================================== */

.pt-spines {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: 3px;
    padding: 0 6px;
    min-height: 260px;
}

.pt-spines::after {
    content: "";
    position: absolute;
    left: -2%;
    right: -2%;
    bottom: -8px;
    height: 8px;
    background: linear-gradient(180deg, var(--pt-walnut) 0%, #4e3722 100%);
    box-shadow: 0 8px 18px -8px rgba(0, 0, 0, 0.55);
}

.pt-shelf--bare.pt-spines::after {
    display: none;
}

.pt-spine {
    position: relative;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    width: var(--pt-spine-w, 34px);
    height: 250px;
    padding: 12px 0 14px;
    text-decoration: none;
    background:
        linear-gradient(90deg,
            rgba(255, 255, 255, 0.22) 0%,
            rgba(255, 255, 255, 0.05) 14%,
            rgba(0, 0, 0, 0.06) 62%,
            rgba(0, 0, 0, 0.3) 100%),
        var(--pt-cat, var(--pt-walnut));
    border-radius: 2px 1px 1px 2px;
    box-shadow: 0 10px 16px -12px rgba(0, 0, 0, 0.7);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.pt-spine[data-cat="fiction"]              { --pt-cat: var(--pt-cat-fiction); }
.pt-spine[data-cat="philosophy"]           { --pt-cat: var(--pt-cat-philosophy); }
.pt-spine[data-cat="poetry"]               { --pt-cat: var(--pt-cat-poetry); }
.pt-spine[data-cat="essay-non-fiction"]    { --pt-cat: var(--pt-cat-essay-non-fiction); }
.pt-spine[data-cat="classics"]             { --pt-cat: var(--pt-cat-classics); }
.pt-spine[data-cat="children-young-adult"] { --pt-cat: var(--pt-cat-children-young-adult); }

/* every second and third book sits a little taller, the way a real shelf does */
.pt-spine:nth-child(3n)   { height: 262px; }
.pt-spine:nth-child(4n+2) { height: 240px; }
.pt-spine:nth-child(5n+3) { height: 256px; }

/* the brass rules near head and foot of the spine */
.pt-spine-head,
.pt-spine-foot {
    flex: 0 0 auto;
    width: 58%;
    height: 1px;
    background: rgba(251, 247, 238, 0.45);
}

.pt-spine-foot {
    margin-top: auto;
}

.pt-spine-text {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    min-height: 0;
    margin: 12px 0;
    padding: 0 1px;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    overflow: hidden;
}

.pt-spine-title {
    font-family: var(--pt-serif);
    font-size: 0.98rem;
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: 0.012em;
    color: #fbf7ee;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 100%;
}

.pt-spine--sm .pt-spine-title { font-size: 0.9rem; }
.pt-spine--xs .pt-spine-title { font-size: 0.8rem; }

.pt-spine-author {
    font-family: var(--pt-sans);
    font-size: 0.54rem;
    font-weight: 600;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: rgba(251, 247, 238, 0.62);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 100%;
}

/* pulling a book half out of the shelf */
.pt-spine:hover {
    transform: translateY(-14px);
    box-shadow: 0 20px 26px -14px rgba(0, 0, 0, 0.7);
}

.pt-spine-tip {
    position: absolute;
    bottom: calc(100% + 14px);
    left: 50%;
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: max-content;
    max-width: 230px;
    padding: 11px 14px;
    background: var(--pt-ink);
    border: 1px solid rgba(245, 239, 227, 0.16);
    box-shadow: 0 18px 30px -20px rgba(0, 0, 0, 0.8);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
    pointer-events: none;
}

.pt-spine:hover .pt-spine-tip,
.pt-spine:focus-visible .pt-spine-tip {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

.pt-spine-tip-title {
    font-family: var(--pt-serif);
    font-size: 1.08rem;
    line-height: 1.2;
    color: var(--pt-paper);
}

.pt-spine-tip-author {
    font-family: var(--pt-sans);
    font-size: 0.7rem;
    color: rgba(245, 239, 227, 0.6);
}

.pt-spine-tip-price {
    margin-top: 3px;
    font-family: var(--pt-sans);
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--pt-brass);
}

@media (max-width: 700px) {
    .pt-spines {
        gap: 2px;
        min-height: 210px;
        overflow-x: auto;
        padding-bottom: 4px;
    }

    .pt-spine,
    .pt-spine:nth-child(3n),
    .pt-spine:nth-child(4n+2),
    .pt-spine:nth-child(5n+3) {
        height: 200px;
    }

    .pt-spine-title { font-size: 0.82rem; }
    .pt-spine--sm .pt-spine-title { font-size: 0.76rem; }
    .pt-spine--xs .pt-spine-title { font-size: 0.7rem; }
}

/* longer titles step down further and give up the author line, so the spine reads in
   one piece instead of ending in an ellipsis */
.pt-spine {
    height: 278px;
    padding: 11px 0 13px;
}

.pt-spine:nth-child(3n)   { height: 292px; }
.pt-spine:nth-child(4n+2) { height: 266px; }
.pt-spine:nth-child(5n+3) { height: 284px; }

.pt-spine-text {
    margin: 9px 0;
    gap: 8px;
}

.pt-spine--xxs .pt-spine-title { font-size: 0.72rem; letter-spacing: 0; }

/* The author competed with the title for the height of the spine and forced the long
   ones into an ellipsis. The spine now carries the title alone; author and price are
   on the hover card. */
.pt-spine-text {
    justify-content: center;
}

.pt-spine-title {
    max-height: 100%;
    text-overflow: clip;
}


/* ===========================================================================
   Spines on mobile: the shelf tips over into a stack
   A vertical spine tells a phone nothing -- there is no hover to reveal the title,
   and a tap just navigates away. Below 760 the same books lie flat instead: each
   spine becomes a full-width band whose HEIGHT is its thickness, carrying title,
   author and price in the open. Same objects, same colours, no hover required.
   =========================================================================== */

@media (max-width: 760px) {
    .pt-spines {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 3px;
        min-height: 0;
        padding: 0;
        overflow-x: visible;
    }

    /* the plank becomes the surface the stack rests on */
    .pt-spines::after {
        left: -3%;
        right: -3%;
        bottom: -9px;
        height: 9px;
    }

    .pt-spine,
    .pt-spine:nth-child(3n),
    .pt-spine:nth-child(4n+2),
    .pt-spine:nth-child(5n+3) {
        flex-direction: row;
        align-items: center;
        gap: 12px;
        width: 100%;
        /* Thickness has to be amplified here: the title, author and price already set a
           floor around 60px, so the raw 26-60px spine width would flatten out. */
        height: auto;
        min-height: calc(var(--pt-spine-w, 34px) * 1.75 + 4px);
        padding: 10px 14px;
        border-radius: 1px 2px 2px 1px;
        background:
            linear-gradient(180deg,
                rgba(255, 255, 255, 0.2) 0%,
                rgba(255, 255, 255, 0.04) 16%,
                rgba(0, 0, 0, 0.06) 64%,
                rgba(0, 0, 0, 0.28) 100%),
            var(--pt-cat, var(--pt-walnut));
    }

    .pt-spine:hover {
        transform: none;
    }

    /* the head and foot rules become one short rule at the left edge */
    .pt-spine-head {
        flex: 0 0 auto;
        width: 3px;
        height: 22px;
        background: rgba(251, 247, 238, 0.5);
    }

    .pt-spine-foot {
        display: none;
    }

    .pt-spine-text {
        flex: 1 1 auto;
        margin: 0;
        writing-mode: horizontal-tb;
        text-orientation: initial;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 1px;
    }

    .pt-spine-title,
    .pt-spine--sm .pt-spine-title,
    .pt-spine--xs .pt-spine-title,
    .pt-spine--xxs .pt-spine-title {
        font-size: 1.02rem;
        line-height: 1.2;
        white-space: normal;
        letter-spacing: 0.005em;
    }

    /* the hover card stops being a card and simply sits in the row */
    .pt-spine-tip {
        position: static;
        flex: 0 0 auto;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 0;
        width: auto;
        max-width: 42%;
        padding: 0;
        background: transparent;
        border: 0;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        pointer-events: auto;
    }

    .pt-spine-tip-title {
        display: none;
    }

    .pt-spine-tip-author {
        font-size: 0.66rem;
        text-align: right;
        color: rgba(251, 247, 238, 0.72);
    }

    .pt-spine-tip-price {
        margin-top: 1px;
        font-size: 0.86rem;
        color: #fbf7ee;
    }
}


/* ===========================================================================
   Shop toolbar — sorting and filters
   =========================================================================== */

html body .pt-toolbar {
    max-width: var(--pt-measure);
    margin: 0 auto 34px;
    padding: 0 24px;
}

html body .pt-toolbar-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding-bottom: 13px;
    border-bottom: 1px solid var(--pt-rule);
}

html body .woocommerce-result-count {
    margin: 0;
    font-family: var(--pt-sans);
    font-size: 0.82rem;
    color: var(--pt-ink-soft);
}

html body .pt-toolbar-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* WooCommerce's own select is kept out of sight rather than removed */
html body .woocommerce-ordering {
    display: none;
}

html body .pt-filters-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 15px;
    background: transparent;
    border: 1px solid var(--pt-rule);
    border-radius: 0;
    font-family: var(--pt-sans);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--pt-ink);
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
}

html body .pt-filters-toggle:hover,
html body .pt-toolbar.is-open .pt-filters-toggle {
    border-color: var(--pt-ink);
}

html body .pt-filters-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--pt-ink);
    color: var(--pt-paper);
    font-size: 0.63rem;
    line-height: 1;
    border-radius: 9px;
}

/* ---- sort ---- */

html body .pt-sort {
    position: relative;
}

html body .pt-sort-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 15px;
    background: transparent;
    border: 1px solid var(--pt-rule);
    border-radius: 0;
    font-family: var(--pt-sans);
    font-size: 0.82rem;
    color: var(--pt-ink);
    cursor: pointer;
    transition: border-color 0.2s ease;
}

html body .pt-sort-btn:hover,
html body .pt-sort.is-open .pt-sort-btn {
    border-color: var(--pt-ink);
}

html body .pt-sort-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--pt-walnut);
}

html body .pt-sort-current {
    font-family: var(--pt-serif);
    font-size: 1.02rem;
    color: var(--pt-ink);
}

html body .pt-sort svg {
    transition: transform 0.2s ease;
}

html body .pt-sort.is-open svg {
    transform: rotate(180deg);
}

html body .pt-sort-list {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 60;
    min-width: 224px;
    margin: 0;
    padding: 6px 0;
    list-style: none;
    background: var(--pt-card);
    border: 1px solid var(--pt-rule);
    box-shadow: 0 20px 34px -26px rgba(42, 37, 32, 0.7);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-5px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

html body .pt-sort.is-open .pt-sort-list {
    opacity: 1;
    visibility: visible;
    transform: none;
}

html body .pt-sort-list li {
    list-style: none;
}

html body .pt-sort-list a {
    display: block;
    padding: 8px 16px;
    font-family: var(--pt-serif);
    font-size: 1.04rem;
    color: var(--pt-ink);
    text-decoration: none;
}

html body .pt-sort-list a:hover {
    background: var(--pt-paper-2);
    color: var(--pt-brass-dark);
}

html body .pt-sort-list a[aria-current="true"] {
    color: var(--pt-brass-dark);
}

html body .pt-sort-list a[aria-current="true"]::before {
    content: "— ";
    color: var(--pt-brass);
}

/* ---- filter panel ---- */

html body .pt-filters-panel {
    display: none;
    padding: 20px 0 4px;
}

html body .pt-toolbar.is-open .pt-filters-panel {
    display: block;
}

html body .pt-filter-group {
    display: flex;
    align-items: baseline;
    gap: 18px;
    padding: 11px 0;
    border-bottom: 1px solid var(--pt-rule-soft);
}

html body .pt-filter-legend {
    flex: 0 0 76px;
    font-family: var(--pt-sans);
    font-size: 0.67rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--pt-walnut);
}

html body .pt-filter-opts {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    min-width: 0;
    gap: 7px;
}

html body .pt-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: transparent;
    border: 1px solid var(--pt-rule);
    font-family: var(--pt-sans);
    font-size: 0.82rem;
    color: var(--pt-ink);
    text-decoration: none;
    transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

html body .pt-chip:hover {
    border-color: var(--pt-ink);
    color: var(--pt-ink);
}

html body .pt-chip.is-on {
    background: var(--pt-ink);
    border-color: var(--pt-ink);
    color: var(--pt-paper);
}

html body .pt-chip-n {
    font-size: 0.7rem;
    color: var(--pt-ink-soft);
}

html body .pt-chip.is-on .pt-chip-n {
    color: rgba(245, 239, 227, 0.6);
}

/* the swatch ties each shelf to its book colour */
html body .pt-chip-swatch {
    width: 8px;
    height: 15px;
    background: var(--pt-rule);
}

html body .pt-chip[data-cat="fiction"] .pt-chip-swatch              { background: var(--pt-cat-fiction); }
html body .pt-chip[data-cat="philosophy"] .pt-chip-swatch           { background: var(--pt-cat-philosophy); }
html body .pt-chip[data-cat="poetry"] .pt-chip-swatch               { background: var(--pt-cat-poetry); }
html body .pt-chip[data-cat="essay-non-fiction"] .pt-chip-swatch    { background: var(--pt-cat-essay-non-fiction); }
html body .pt-chip[data-cat="classics"] .pt-chip-swatch             { background: var(--pt-cat-classics); }
html body .pt-chip[data-cat="children-young-adult"] .pt-chip-swatch { background: var(--pt-cat-children-young-adult); }

html body .pt-filter-clear {
    display: inline-block;
    margin-top: 15px;
    padding-bottom: 2px;
    border-bottom: 1px solid var(--pt-ink);
    font-family: var(--pt-sans);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--pt-ink);
    text-decoration: none;
}

@media (max-width: 900px) {
    html body .pt-toolbar {
        padding: 0 16px;
    }

    html body .pt-toolbar-top {
        flex-wrap: wrap;
        gap: 10px;
    }

    html body .woocommerce-result-count {
        flex: 1 0 100%;
        order: 3;
        margin-top: 2px;
    }

    html body .pt-toolbar-controls {
        flex: 1 1 100%;
        justify-content: space-between;
    }

    html body .pt-sort-btn {
        max-width: 62vw;
    }

    html body .pt-sort-current {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    html body .pt-filter-group {
        flex-direction: column;
        gap: 9px;
    }

    html body .pt-filter-legend {
        flex: 0 0 auto;
    }
}

/* On a narrow screen the "Sorted by" label costs more room than it earns, and pushed
   the value itself into an ellipsis. */
@media (max-width: 600px) {
    html body .pt-sort-label {
        display: none;
    }

    html body .pt-sort-btn {
        max-width: none;
        padding: 0 13px;
    }

    html body .pt-sort-current {
        font-size: 0.96rem;
    }

    html body .pt-filters-toggle {
        padding: 0 13px;
    }
}

/* An option that would empty the shop stays visible but is not clickable, so the
   combination that leads nowhere can be seen rather than discovered by landing on it. */
html body .pt-chip.is-empty {
    border-color: var(--pt-rule-soft);
    color: #a99e8c;
    cursor: not-allowed;
}

html body .pt-chip.is-empty .pt-chip-swatch {
    opacity: 0.35;
}

html body .pt-chip.is-empty .pt-chip-n {
    color: #bcb2a1;
}

/* the count turns into a remove mark once the option is on */
html body .pt-chip.is-on .pt-chip-n {
    font-size: 0.86rem;
    line-height: 1;
    color: rgba(245, 239, 227, 0.75);
}

/* empty state keeps the toolbar company */
html body .woocommerce-info,
html body .woocommerce-no-products-found .woocommerce-info {
    max-width: var(--pt-measure);
    margin: 0 auto;
    padding: 30px 24px 40px;
    background: transparent;
    border: 0;
    border-top: 1px solid var(--pt-rule-soft);
    font-family: var(--pt-serif);
    font-size: 1.28rem;
    font-style: italic;
    color: var(--pt-ink-soft);
}

html body .woocommerce-info::before {
    content: none;
}

/* results fade while the next set is fetched, so a filter click reads as an update
   rather than a page that went blank */
html body ul.products,
html body .woocommerce-info {
    transition: opacity 0.18s ease;
}

html body .pt-loading {
    opacity: 0.35;
    pointer-events: none;
}

/* The sticky header sits at z-index 1000, so at 900/910 the drawers slid underneath it
   and lost their own heading and close button behind it, and the page never dimmed. */
html body .fxmc-overlay {
    z-index: 1150;
}

html body .fxmc-drawer,
html body .fxw-drawer {
    z-index: 1200;
    box-shadow: -22px 0 40px -28px rgba(0, 0, 0, 0.75);
}

/* auto-fill with a 180px minimum drops to ONE column below about 380 of usable width and
   then stretches it full-bleed, so a saved book filled the whole phone screen. The
   reading list now tracks the shop grid: two columns on a phone. */
@media (max-width: 700px) {
    .pt-shelf-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 26px 16px;
    }

    .pt-shelf-item .pt-shelf-title {
        margin-top: 10px;
        font-size: 1rem;
        line-height: 1.22;
    }

    .pt-shelf-item .fxw-item-remove {
        top: 6px;
        right: 6px;
        width: 26px;
        height: 26px;
    }
}


/* ===========================================================================
   Notices
   The WooCommerce default is a white slab with a heavy border and a green tick.
   Here it is a quiet band with a brass edge, matching everything else.
   =========================================================================== */

html body .woocommerce-notices-wrapper {
    max-width: var(--pt-measure);
    margin: 0 auto;
    padding: 0 24px;
}

html body .woocommerce-message,
html body .woocommerce-error,
html body .woocommerce-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    margin: 26px 0 0;
    padding: 15px 20px;
    background: var(--pt-card);
    border: 1px solid var(--pt-rule);
    border-left: 3px solid var(--pt-brass);
    border-radius: 0;
    font-family: var(--pt-serif);
    font-size: 1.14rem;
    font-style: normal;
    line-height: 1.4;
    color: var(--pt-ink);
    list-style: none;
}

html body .woocommerce-error {
    border-left-color: #a1372b;
}

/* the default tick is a green sprite bolted on with padding-left */
html body .woocommerce-message::before,
html body .woocommerce-error::before,
html body .woocommerce-info::before {
    content: none;
}

html body .woocommerce-message .button,
html body .woocommerce-error .button,
html body .woocommerce-info .button {
    flex: 0 0 auto;
    height: 36px;
    margin: 0;
    padding: 0 18px;
    background: transparent;
    border: 1px solid var(--pt-ink);
    border-radius: 0;
    font-family: var(--pt-sans);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.13em;
    line-height: 34px;
    text-transform: uppercase;
    color: var(--pt-ink);
}

html body .woocommerce-message .button:hover,
html body .woocommerce-info .button:hover {
    background: var(--pt-ink);
    color: var(--pt-paper);
}


/* ===========================================================================
   Cart and checkout
   Both run on the classic shortcodes rather than the block versions, because the
   seeded block markup arrived wrapped in wp:html and never initialised.
   =========================================================================== */

html body.woocommerce-cart .woocommerce,
html body.woocommerce-checkout .woocommerce {
    max-width: var(--pt-measure);
    margin: 0 auto;
    padding: 0 24px 60px;
}

html body .woocommerce table.shop_table {
    width: 100%;
    margin: 0 0 30px;
    border: 0;
    border-top: 1px solid var(--pt-rule);
    border-radius: 0;
    border-collapse: collapse;
}

html body .woocommerce table.shop_table th {
    padding: 13px 12px 13px 0;
    border-bottom: 1px solid var(--pt-rule);
    font-family: var(--pt-sans);
    font-size: 0.67rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--pt-walnut);
    text-align: left;
}

html body .woocommerce table.shop_table td {
    padding: 16px 12px 16px 0;
    border-top: 0;
    border-bottom: 1px solid var(--pt-rule-soft);
    font-family: var(--pt-sans);
    font-size: 0.92rem;
    color: var(--pt-ink);
    vertical-align: middle;
}

html body .woocommerce table.cart td.product-name a {
    font-family: var(--pt-serif);
    font-size: 1.1rem;
    color: var(--pt-ink);
    text-decoration: none;
}

html body .woocommerce table.cart td.product-thumbnail {
    width: 80px;
    padding-right: 16px;
}

html body .woocommerce table.cart td.product-thumbnail .pt-cover {
    width: 64px;
}

html body .woocommerce a.remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background: transparent;
    border: 1px solid var(--pt-rule);
    border-radius: 0;
    font-size: 1rem;
    line-height: 1;
    color: var(--pt-ink-soft);
}

html body .woocommerce a.remove:hover {
    background: transparent;
    border-color: #a1372b;
    color: #a1372b;
}

html body .woocommerce .quantity input.qty {
    width: 62px;
    height: 42px;
    min-height: 0;
    padding: 0 6px;
    background: var(--pt-card);
    border: 1px solid var(--pt-rule);
    border-radius: 0;
    font-family: var(--pt-sans);
    text-align: center;
    color: var(--pt-ink);
}

html body .woocommerce .coupon input#coupon_code {
    height: 42px;
    min-height: 0;
    padding: 0 12px;
    background: var(--pt-card);
    border: 1px solid var(--pt-rule);
    border-radius: 0;
    font-family: var(--pt-sans);
    color: var(--pt-ink);
}

html body .woocommerce .cart_totals {
    max-width: 420px;
    margin-left: auto;
    padding: 22px 24px;
    background: var(--pt-card);
    border: 1px solid var(--pt-rule);
}

html body .woocommerce .cart_totals h2 {
    margin: 0 0 12px;
    font-family: var(--pt-serif);
    font-size: 1.5rem;
    font-weight: 500;
}

html body .woocommerce .cart_totals table.shop_table {
    margin: 0;
    border-top: 0;
}

html body .woocommerce .cart_totals .order-total td {
    border-bottom: 0;
    font-size: 1.14rem;
    font-weight: 600;
}

/* buttons across cart and checkout */
html body .woocommerce a.button,
html body .woocommerce button.button,
html body .woocommerce input.button {
    height: 46px;
    padding: 0 26px;
    background: transparent;
    border: 1px solid var(--pt-ink);
    border-radius: 0;
    font-family: var(--pt-sans);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    line-height: 44px;
    text-transform: uppercase;
    color: var(--pt-ink);
}

html body .woocommerce a.button:hover,
html body .woocommerce button.button:hover,
html body .woocommerce input.button:hover {
    background: var(--pt-ink);
    color: var(--pt-paper);
}

html body .woocommerce a.button.alt,
html body .woocommerce button.button.alt,
html body .woocommerce .checkout-button,
html body .woocommerce #place_order {
    width: auto;
    background: var(--pt-ink);
    border-color: var(--pt-ink);
    color: var(--pt-paper);
}

html body .woocommerce a.button.alt:hover,
html body .woocommerce button.button.alt:hover,
html body .woocommerce .checkout-button:hover,
html body .woocommerce #place_order:hover {
    background: var(--pt-brass-dark);
    border-color: var(--pt-brass-dark);
    color: #fff;
}

html body .woocommerce .checkout-button {
    display: block;
    margin-top: 16px;
    text-align: center;
}

/* checkout form */
html body .woocommerce form.checkout {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: clamp(26px, 4vw, 56px);
    align-items: start;
}

html body .woocommerce form.checkout #customer_details {
    grid-column: 1;
}

html body .woocommerce form.checkout h3,
html body .woocommerce-checkout h3#order_review_heading {
    margin: 0 0 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--pt-rule);
    font-family: var(--pt-serif);
    font-size: 1.5rem;
    font-weight: 500;
}

html body .woocommerce form .form-row label {
    display: block;
    margin-bottom: 5px;
    font-family: var(--pt-sans);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--pt-walnut);
}

/* nimbus-base styles inputs through a :not() chain at (0,4,1), so these need four
   classes of their own to win -- the same trick the header search field needed */
html body .woocommerce form .form-row input.input-text.input-text,
html body .woocommerce form .form-row textarea.input-text.input-text,
html body .woocommerce form .form-row select.pt-select {
    width: 100%;
    height: 46px;
    min-height: 0;
    padding: 0 13px;
    background: var(--pt-card);
    border: 1px solid var(--pt-rule);
    border-radius: 0;
    box-shadow: none;
    font-family: var(--pt-sans);
    font-size: 0.94rem;
    color: var(--pt-ink);
}

html body .woocommerce form .form-row textarea.input-text.input-text {
    height: auto;
    min-height: 96px;
    padding: 11px 13px;
}

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

html body .woocommerce-checkout #order_review {
    grid-column: 2;
    padding: 22px 24px;
    background: var(--pt-card);
    border: 1px solid var(--pt-rule);
}

html body .woocommerce-checkout #payment {
    background: transparent;
    border-radius: 0;
}

html body .woocommerce-checkout #payment ul.payment_methods {
    padding: 0;
    border-bottom: 1px solid var(--pt-rule-soft);
}

html body .woocommerce-checkout #payment div.form-row {
    padding: 16px 0 0;
}

html body .woocommerce .cart-empty,
html body .woocommerce .wc-empty-cart-message {
    padding: 40px 0 12px;
    font-family: var(--pt-serif);
    font-size: 1.4rem;
    font-style: italic;
    color: var(--pt-ink-soft);
}

@media (max-width: 900px) {
    html body .woocommerce form.checkout {
        grid-template-columns: 1fr;
    }

    html body .woocommerce-checkout #order_review,
    html body .woocommerce form.checkout #customer_details {
        grid-column: 1;
    }

    html body .woocommerce .cart_totals {
        max-width: none;
        margin-left: 0;
    }

    html body .woocommerce table.cart td.product-thumbnail {
        width: 60px;
    }
}


/* nimbus-base sets `input:not(...)  { width: 100% }` at (0,4,1); the quantity box and the
   coupon field both need four classes of their own or they stretch across their column. */
html body .woocommerce table.cart .quantity input.qty.qty,
html body .woocommerce div.quantity input.qty.qty {
    width: 74px;
    max-width: 74px;
    min-width: 0;
    flex: 0 0 74px;
}

html body .woocommerce table.cart td.actions .coupon {
    display: flex;
    gap: 10px;
    align-items: center;
    float: none;
}

html body .woocommerce table.cart td.actions {
    padding: 20px 0;
    border-bottom: 1px solid var(--pt-rule-soft);
}

html body .woocommerce table.cart td.actions .coupon input#coupon_code.input-text {
    width: 220px;
    max-width: 220px;
    min-width: 0;
    flex: 0 0 220px;
}

/* the checkout button was a fixed 46px tall with a 44px line-height, so the label sat on
   the edge and the descenders were cut */
html body .woocommerce .checkout-button,
html body .woocommerce .wc-proceed-to-checkout a.checkout-button {
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
    min-height: 52px;
    padding: 14px 22px;
    line-height: 1.25;
    text-align: center;
    white-space: normal;
}

html body .woocommerce .wc-proceed-to-checkout {
    padding: 14px 0 0;
}

/* the cover stands in for the missing product photograph */
html body .woocommerce table.cart td.product-thumbnail .pt-cover {
    width: 56px;
    margin: 0;
}

html body .fxmc-body ul.cart_list li .pt-cover {
    width: 46px;
    float: left;
    margin: 0 12px 0 0;
}

html body .woocommerce table.cart td.product-thumbnail img {
    width: 56px;
    height: auto;
}


/* at 46-56px the cover is a token rather than a cover: the title has to come right down
   and the rule and author get out of the way */
html body .woocommerce table.cart td.product-thumbnail .pt-cover .pt-cover-body,
html body .fxmc-body ul.cart_list li .pt-cover .pt-cover-body {
    padding: 11% 9% 0;
}

html body .woocommerce table.cart td.product-thumbnail .pt-cover .pt-cover-title,
html body .fxmc-body ul.cart_list li .pt-cover .pt-cover-title {
    font-size: 0.44rem;
    line-height: 1.15;
}

html body .woocommerce table.cart td.product-thumbnail .pt-cover .pt-cover-rule,
html body .fxmc-body ul.cart_list li .pt-cover .pt-cover-rule {
    width: 13px;
    height: 1px;
    margin-bottom: 8%;
}

html body .woocommerce table.cart td.product-thumbnail .pt-cover .pt-cover-author,
html body .fxmc-body ul.cart_list li .pt-cover .pt-cover-author {
    display: none;
}

html body .woocommerce table.cart td.product-thumbnail .pt-cover .pt-cover-spine,
html body .fxmc-body ul.cart_list li .pt-cover .pt-cover-spine {
    flex-basis: 6px;
}


/* #customer_details is itself a two column .col2-set, so the page ended up in three
   columns with the order summary squeezed into the last one. Billing and notes stack
   in the left column; the summary keeps the right one to itself. */
html body .woocommerce form.checkout #customer_details.col2-set,
html body .woocommerce form.checkout #customer_details .col2-set {
    display: block;
    width: 100%;
}

html body .woocommerce form.checkout #customer_details .col-1,
html body .woocommerce form.checkout #customer_details .col-2 {
    float: none;
    width: 100%;
    margin: 0;
    padding: 0;
}

html body .woocommerce form.checkout #customer_details .col-2 {
    margin-top: 26px;
}

html body .woocommerce-checkout h3#order_review_heading {
    grid-column: 2;
    grid-row: 1;
}

html body .woocommerce-checkout #order_review {
    grid-column: 2;
    grid-row: 2;
}

html body .woocommerce form.checkout #customer_details {
    grid-column: 1;
    grid-row: 1 / span 2;
}

/* two fields side by side read better than two full-width ones */
html body .woocommerce form .form-row-first,
html body .woocommerce form .form-row-last {
    float: none;
    width: 100%;
}

html body .woocommerce form .woocommerce-billing-fields__field-wrapper {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 18px;
}

html body .woocommerce form .woocommerce-billing-fields__field-wrapper > .form-row {
    grid-column: span 2;
    margin: 0 0 16px;
}

html body .woocommerce form .woocommerce-billing-fields__field-wrapper > .form-row-first,
html body .woocommerce form .woocommerce-billing-fields__field-wrapper > .form-row-last {
    grid-column: span 1;
}

/* the country and state selects are native and need the same treatment as the inputs */
html body .woocommerce form .form-row select,
html body .woocommerce form .form-row .select2-container .select2-selection--single {
    width: 100%;
    height: 46px;
    min-height: 46px;
    padding: 0 13px;
    background: var(--pt-card);
    border: 1px solid var(--pt-rule);
    border-radius: 0;
    font-family: var(--pt-sans);
    font-size: 0.94rem;
    color: var(--pt-ink);
}

html body .woocommerce form .form-row .select2-container .select2-selection__rendered {
    padding: 0;
    line-height: 44px;
    color: var(--pt-ink);
}

html body .woocommerce form .form-row .select2-container .select2-selection__arrow {
    height: 44px;
}

html body .woocommerce .checkout_coupon.woocommerce-form-coupon {
    margin: 0 0 26px;
    padding: 18px 20px;
    background: var(--pt-card);
    border: 1px solid var(--pt-rule);
    border-radius: 0;
}

html body .woocommerce-form-coupon-toggle .woocommerce-info {
    justify-content: flex-start;
    gap: 8px;
}

html body #order_review table.shop_table td,
html body #order_review table.shop_table th {
    padding: 12px 0;
}

html body #order_review table.shop_table .order-total th,
html body #order_review table.shop_table .order-total td {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--pt-ink);
}

html body .woocommerce-checkout #place_order {
    width: 100%;
    height: auto;
    min-height: 52px;
    margin-top: 8px;
    padding: 14px 22px;
    line-height: 1.25;
    white-space: normal;
}

/* the payment description box defaults to a lavender bubble with a matching arrow */
html body .woocommerce-checkout #payment div.payment_box {
    background: var(--pt-paper-2);
    border-radius: 0;
    font-family: var(--pt-sans);
    font-size: 0.86rem;
    color: var(--pt-ink-soft);
}

html body .woocommerce-checkout #payment div.payment_box::before {
    border-bottom-color: var(--pt-paper-2);
}

html body .woocommerce-checkout #payment ul.payment_methods li label {
    font-family: var(--pt-serif);
    font-size: 1.08rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--pt-ink);
}


/* ===========================================================================
   Page headers for the shop utility pages, 404, and account
   =========================================================================== */

html body .pt-page-head {
    padding: 34px 0 18px;
}

html body .pt-page-head .pt-wrap {
    padding-bottom: 14px;
    border-bottom: 1px solid var(--pt-rule);
}

html body .pt-page-title {
    margin: 5px 0 0;
    font-family: var(--pt-serif);
    font-size: clamp(2rem, 3.4vw, 2.8rem);
    font-weight: 500;
    line-height: 1.1;
    color: var(--pt-ink);
}

/* ---- 404 ---- */

.pt-404-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
    gap: clamp(30px, 5vw, 70px);
    align-items: center;
}

.pt-404-title {
    margin: 8px 0 14px;
    font-family: var(--pt-serif);
    font-size: clamp(2.2rem, 4vw, 3.2rem);
    font-weight: 500;
    line-height: 1.08;
    color: var(--pt-ink);
}

.pt-404-lede {
    max-width: 46ch;
    margin: 0 0 26px;
    color: var(--pt-ink-soft);
}

html body .pt-404-search {
    display: flex;
    align-items: center;
    gap: 0;
    max-width: 420px;
    margin: 0 0 26px;
}

html body .pt-404-search input.search-field.search-field {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    height: 46px;
    min-height: 0;
    padding: 0 14px;
    background: var(--pt-card);
    border: 1px solid var(--pt-rule);
    border-right: 0;
    border-radius: 0;
    box-shadow: none;
    font-family: var(--pt-sans);
    font-size: 0.94rem;
    color: var(--pt-ink);
}

html body .pt-404-submit {
    flex: 0 0 auto;
    height: 46px;
    padding: 0 22px;
    background: var(--pt-ink);
    border: 1px solid var(--pt-ink);
    border-radius: 0;
    font-family: var(--pt-sans);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--pt-paper);
    cursor: pointer;
}

html body .pt-404-submit:hover {
    background: var(--pt-brass-dark);
    border-color: var(--pt-brass-dark);
}

.pt-404-shelves {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 0 0 26px;
    padding: 0;
    list-style: none;
}

.pt-404-shelves li {
    list-style: none;
}

/* ---- account ---- */

html body .woocommerce-account .woocommerce {
    max-width: var(--pt-measure);
    margin: 0 auto;
    padding: 26px 24px 60px;
}

html body .woocommerce-account .woocommerce-MyAccount-navigation ul {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--pt-rule);
}

html body .woocommerce-account .woocommerce-MyAccount-navigation li {
    border-bottom: 1px solid var(--pt-rule-soft);
}

html body .woocommerce-account .woocommerce-MyAccount-navigation a {
    display: block;
    padding: 11px 0;
    font-family: var(--pt-sans);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pt-ink);
    text-decoration: none;
}

html body .woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
html body .woocommerce-account .woocommerce-MyAccount-navigation a:hover {
    color: var(--pt-brass-dark);
}

html body .woocommerce-account .woocommerce-form-login,
html body .woocommerce-account .woocommerce-form-register {
    max-width: 460px;
    padding: 24px;
    background: var(--pt-card);
    border: 1px solid var(--pt-rule);
    border-radius: 0;
}

html body .woocommerce-account form .form-row input.input-text.input-text,
html body .woocommerce-account form .form-row input.woocommerce-Input.woocommerce-Input {
    width: 100%;
    height: 46px;
    min-height: 0;
    padding: 0 13px;
    background: var(--pt-paper);
    border: 1px solid var(--pt-rule);
    border-radius: 0;
    box-shadow: none;
    font-family: var(--pt-sans);
    color: var(--pt-ink);
}

@media (max-width: 900px) {
    .pt-404-inner {
        grid-template-columns: 1fr;
    }

    html body .pt-page-head {
        padding: 22px 0 14px;
    }
}

/* the responsive cart table adds its own padding on top of the row width and pushed a
   few pixels past the viewport at 390 */
@media (max-width: 700px) {
    html body .woocommerce table.shop_table_responsive,
    html body .woocommerce table.cart {
        display: block;
        width: 100%;
        max-width: 100%;
        table-layout: fixed;
    }

    html body .woocommerce table.shop_table_responsive tbody,
    html body .woocommerce table.shop_table_responsive tr,
    html body .woocommerce table.shop_table_responsive td {
        display: block;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    html body .woocommerce table.shop_table_responsive thead {
        display: none;
    }

    html body .woocommerce table.shop_table_responsive td {
        padding: 8px 0;
        text-align: left;
        overflow-wrap: anywhere;
    }

    html body .woocommerce table.shop_table_responsive tr {
        padding: 14px 0;
        border-bottom: 1px solid var(--pt-rule-soft);
    }
}

/* ===========================================================================
   Related shelf on the product page
   div.product is a two column grid, so this has to break out of it or it lands in
   one narrow column with a screen of empty space beneath.
   =========================================================================== */

html body.single-product div.product .pt-related {
    grid-column: 1 / -1;
    margin-top: clamp(34px, 5vw, 64px);
    padding-top: clamp(28px, 4vw, 48px);
    border-top: 1px solid var(--pt-rule);
}

html body .pt-related .pt-wrap {
    max-width: none;
    padding: 0;
}

html body .pt-related .pt-spines {
    min-height: 0;
}

html body .pt-related .pt-spine,
html body .pt-related .pt-spine:nth-child(3n),
html body .pt-related .pt-spine:nth-child(4n+2),
html body .pt-related .pt-spine:nth-child(5n+3) {
    height: 214px;
}

html body .pt-related .pt-spine:nth-child(3n)   { height: 226px; }
html body .pt-related .pt-spine:nth-child(4n+2) { height: 204px; }

@media (max-width: 760px) {
    html body .pt-related .pt-spine,
    html body .pt-related .pt-spine:nth-child(3n),
    html body .pt-related .pt-spine:nth-child(4n+2),
    html body .pt-related .pt-spine:nth-child(5n+3) {
        height: auto;
    }
}

/* the shelf should reach the full measure rather than huddle at the left, so the spines
   grow into the space while keeping their relative thickness */
html body .pt-related .pt-spine {
    flex: 1 1 var(--pt-spine-w, 34px);
    max-width: 92px;
}

/* flex-grow set to the same number as the thickness keeps the proportions when the
   shelf stretches, instead of equalising every book to the same slab */
html body .pt-related .pt-spine {
    flex: var(--pt-spine-grow, 34) 1 0;
    min-width: 26px;
    max-width: 92px;
}

/* Stretching the books to fill 1024px capped almost all of them at the same width and
   threw away the page-count signal. They keep their real thickness instead and the
   plank hugs the group; the heading row above carries the full measure. */
html body .pt-related .pt-spine {
    flex: 0 0 auto;
    max-width: none;
}

html body .pt-related .pt-spines {
    width: max-content;
    max-width: 100%;
}

/* max-content is right for the horizontal shelf but fights the stacked mobile layout */
@media (max-width: 760px) {
    html body .pt-related .pt-spines {
        width: auto;
        max-width: 100%;
    }

    html body .pt-related .pt-spine {
        flex: 0 0 auto;
        width: 100%;
        max-width: 100%;
    }
}



/* ===========================================================================
   Mobile menu: parents hold their children until asked
   =========================================================================== */

@media (max-width: 900px) {
    html body .fx-nav-mobile-list .pt-nav-row {
        display: flex;
        align-items: center;
        width: 100%;
        border-bottom: 1px solid rgba(245, 239, 227, 0.1);
    }

    html body .fx-nav-mobile-list .pt-nav-row > a {
        flex: 1 1 auto;
        width: auto;
        border-bottom: 0;
    }

    html body .fx-nav-mobile-list .pt-sub-toggle {
        display: flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        width: 46px;
        height: 42px;
        margin-right: -6px;
        padding: 0;
        background: transparent;
        border: 0;
        border-radius: 0;
        color: inherit;
        cursor: pointer;
    }

    html body .fx-nav-mobile-list .pt-sub-chevron {
        width: 7px;
        height: 7px;
        margin-top: -3px;
        border-right: 1.5px solid rgba(245, 239, 227, 0.62);
        border-bottom: 1.5px solid rgba(245, 239, 227, 0.62);
        transform: rotate(45deg);
        transition: transform 0.26s ease, border-color 0.2s ease;
    }

    html body .fx-nav-mobile-list li.pt-sub-open > .pt-nav-row .pt-sub-chevron {
        margin-top: 3px;
        border-color: var(--pt-brass);
        transform: rotate(-135deg);
    }

    html body .fx-nav-mobile-list .sub-menu,
    html body .fx-nav-mobile-list ul {
        max-height: 0;
        padding-bottom: 0;
        overflow: hidden;
        transition: max-height 0.32s ease, padding-bottom 0.32s ease;
    }

    html body .fx-nav-mobile-list li.pt-sub-open > .sub-menu,
    html body .fx-nav-mobile-list li.pt-sub-open > ul {
        max-height: 520px;
        padding-bottom: 10px;
    }
}


html body .pt-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-bottom: 1px solid #0b0806;
    background: linear-gradient(170deg, #2a2019 0%, #17110d 56%, #0f0b08 100%);
}

html body .pt-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        linear-gradient(96deg,
            rgba(11, 8, 6, 0.82) 0%,
            rgba(11, 8, 6, 0.72) 30%,
            rgba(11, 8, 6, 0.42) 54%,
            rgba(11, 8, 6, 0.16) 72%,
            rgba(11, 8, 6, 0.52) 100%),
        linear-gradient(180deg,
            rgba(9, 6, 4, 0.78) 0%,
            rgba(9, 6, 4, 0) 26%,
            rgba(9, 6, 4, 0) 62%,
            rgba(9, 6, 4, 0.72) 100%);
}

html body .pt-hero .pt-hero-inner {
    position: static;
    display: block;
    max-width: var(--pt-measure);
    margin: 0 auto;
    padding: clamp(38px, 4vw, 56px) 24px 0;
}

html body .pt-hero .pt-hero-text {
    position: relative;
    z-index: 5;
    max-width: 40rem;
}

html body .pt-hero .pt-hero-shelf {
    position: static;
    min-width: 0;
}

html body .pt-hero .pt-eyebrow {
    color: #d9b078;
}

html body .pt-hero .pt-hero-issue::after {
    background: rgba(196, 154, 92, 0.34);
}

html body .pt-hero .pt-hero-title {
    max-width: 20ch;
    font-size: clamp(2.3rem, 4vw, 3.5rem);
    line-height: 1.02;
    color: #f6ecda;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.6);
}

html body .pt-hero .pt-hero-lede {
    max-width: 44ch;
    color: rgba(241, 232, 216, 0.74);
}

html body .pt-hero .pt-hero-sig {
    border-left-color: #b98f4f;
    color: rgba(238, 228, 210, 0.78);
}

html body .pt-hero .pt-hero-sig cite {
    color: #d0a566;
}

html body .pt-hero .pt-link-arrow {
    border-bottom-color: rgba(244, 234, 216, 0.45);
    color: #f0e6d4;
}

html body .pt-hero .pt-link-arrow:hover {
    border-bottom-color: #c49a5c;
    color: #e6c48c;
}

.pt-case {
    display: contents;
}

.pt-case-back {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 30px 0 0;
    overflow: hidden;
}

.pt-case-row {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    align-items: flex-end;
    justify-content: center;
    gap: 3px;
    min-height: 0;
    padding: 0 10px 9px;
    overflow: hidden;
}

.pt-case-row:nth-child(1) { filter: blur(2.4px) saturate(0.5) brightness(0.42); }
.pt-case-row:nth-child(2) { filter: blur(2px) saturate(0.56) brightness(0.5); }
.pt-case-row:nth-child(3) { filter: blur(1.6px) saturate(0.62) brightness(0.58); }
.pt-case-row:nth-child(4) { filter: blur(1.3px) saturate(0.66) brightness(0.64); }

.pt-case-row::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 9px;
    background: linear-gradient(180deg, #6b4e30 0%, #33240f 100%);
    box-shadow: 0 9px 20px -9px rgba(0, 0, 0, 0.85);
}

.pt-case-spine {
    flex: 0 0 auto;
    width: var(--pt-spine-w, 34px);
    height: var(--pt-back-h, 84%);
    max-height: calc(100% - 12px);
    transform: rotate(var(--pt-back-tilt, 0deg));
    transform-origin: bottom center;
    border-radius: 2px 1px 1px 2px;
    background:
        linear-gradient(90deg,
            rgba(255, 255, 255, 0.2) 0%,
            rgba(255, 255, 255, 0.04) 16%,
            rgba(0, 0, 0, 0.1) 62%,
            rgba(0, 0, 0, 0.34) 100%),
        var(--pt-cat, #6b4f33);
}

.pt-case-spine[data-cat="fiction"]              { --pt-cat: var(--pt-cat-fiction); }
.pt-case-spine[data-cat="philosophy"]           { --pt-cat: var(--pt-cat-philosophy); }
.pt-case-spine[data-cat="poetry"]               { --pt-cat: var(--pt-cat-poetry); }
.pt-case-spine[data-cat="essay-non-fiction"]    { --pt-cat: var(--pt-cat-essay-non-fiction); }
.pt-case-spine[data-cat="classics"]             { --pt-cat: var(--pt-cat-classics); }
.pt-case-spine[data-cat="children-young-adult"] { --pt-cat: var(--pt-cat-children-young-adult); }

.pt-case-lamp {
    position: absolute;
    left: 50%;
    bottom: 0;
    z-index: 3;
    width: 86%;
    height: 64%;
    transform: translateX(-50%);
    pointer-events: none;
    background: radial-gradient(44% 74% at 50% 88%,
        rgba(250, 216, 158, 0.4) 0%,
        rgba(238, 192, 126, 0.17) 38%,
        rgba(0, 0, 0, 0) 72%);
}

html body .pt-hero .pt-spines {
    position: relative;
    z-index: 4;
    justify-content: center;
    gap: clamp(7px, 1.1vw, 17px);
    max-width: var(--pt-measure);
    margin: clamp(20px, 2.4vw, 32px) auto 0;
    padding: 0 24px 12px;
    min-height: 0;
}

html body .pt-hero .pt-spines::after {
    left: 0;
    right: 0;
    bottom: 0;
    height: 12px;
    background: linear-gradient(180deg, #a07a4c 0%, #6b4c2c 42%, #35240f 100%);
    box-shadow:
        0 16px 30px -10px rgba(0, 0, 0, 0.9),
        inset 0 1px 0 0 rgba(255, 226, 178, 0.16);
}

html body .pt-hero .pt-spines .pt-spine,
html body .pt-hero .pt-spines .pt-spine:nth-child(3n),
html body .pt-hero .pt-spines .pt-spine:nth-child(4n+2),
html body .pt-hero .pt-spines .pt-spine:nth-child(5n+3) {
    width: calc(var(--pt-spine-w, 34px) * 1.85);
    box-shadow:
        0 16px 22px -14px rgba(0, 0, 0, 0.95),
        inset 0 0 0 1px rgba(0, 0, 0, 0.24);
}

html body .pt-hero .pt-spines .pt-spine                 { height: 236px; }
html body .pt-hero .pt-spines .pt-spine:nth-child(3n)   { height: 250px; }
html body .pt-hero .pt-spines .pt-spine:nth-child(4n+2) { height: 224px; }
html body .pt-hero .pt-spines .pt-spine:nth-child(5n+3) { height: 244px; }

html body .pt-hero .pt-spines .pt-spine-title {
    font-size: 1.02rem;
}

html body .pt-hero .pt-spines .pt-spine--sm .pt-spine-title  { font-size: 0.94rem; }
html body .pt-hero .pt-spines .pt-spine--xs .pt-spine-title  { font-size: 0.86rem; }
html body .pt-hero .pt-spines .pt-spine--xxs .pt-spine-title { font-size: 0.78rem; }

@media (max-width: 1024px) {
    html body .pt-hero .pt-hero-title {
        max-width: 18ch;
    }

    html body .pt-hero .pt-spines .pt-spine,
    html body .pt-hero .pt-spines .pt-spine:nth-child(3n),
    html body .pt-hero .pt-spines .pt-spine:nth-child(4n+2),
    html body .pt-hero .pt-spines .pt-spine:nth-child(5n+3) {
        width: calc(var(--pt-spine-w, 34px) * 1.45);
    }
}

@media (max-width: 760px) {
    html body .pt-hero::after {
        background: linear-gradient(180deg,
            rgba(9, 6, 4, 0.9) 0%,
            rgba(9, 6, 4, 0.72) 34%,
            rgba(9, 6, 4, 0.5) 60%,
            rgba(9, 6, 4, 0.8) 100%);
    }

    .pt-case-back {
        inset: 0 0 auto;
        height: 46%;
        padding-top: 0;
    }

    .pt-case-row:nth-child(1),
    .pt-case-row:nth-child(2) {
        display: none;
    }

    .pt-case-lamp {
        top: 24%;
        bottom: auto;
        height: 46%;
    }

    html body .pt-hero .pt-hero-inner {
        padding-bottom: 0;
    }

    html body .pt-hero .pt-spines {
        gap: 3px;
        margin-top: 34px;
        padding: 0 24px 14px;
    }

    html body .pt-hero .pt-spines .pt-spine,
    html body .pt-hero .pt-spines .pt-spine:nth-child(3n),
    html body .pt-hero .pt-spines .pt-spine:nth-child(4n+2),
    html body .pt-hero .pt-spines .pt-spine:nth-child(5n+3) {
        width: 100%;
        height: auto;
    }
}


html body .pt-footer {
    padding: 0;
    border-top: 1px solid rgba(196, 154, 92, 0.2);
    background: linear-gradient(178deg, #221a14 0%, #16110c 100%);
    color: rgba(240, 231, 214, 0.72);
}

html body .pt-footer-inner {
    max-width: var(--pt-measure);
    margin: 0 auto;
    padding: clamp(48px, 5vw, 72px) 24px clamp(24px, 3vw, 34px);
}

html body .pt-footer-grid {
    display: grid;
    grid-template-columns: 1.55fr 1fr 1fr 1.25fr;
    gap: clamp(26px, 3.4vw, 54px);
    align-items: start;
}

html body .pt-footer-wordmark {
    display: block;
    margin-bottom: 16px;
    font-family: var(--pt-serif);
    font-size: 1.62rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: #f4ead8;
}

html body .pt-footer-blurb {
    margin: 0 0 14px;
    max-width: 34ch;
    font-size: 0.92rem;
    line-height: 1.62;
    color: rgba(240, 231, 214, 0.68);
}

html body .pt-footer-note {
    margin: 0;
    max-width: 34ch;
    padding-left: 13px;
    border-left: 2px solid rgba(196, 154, 92, 0.55);
    font-family: var(--pt-serif);
    font-size: 1rem;
    font-style: italic;
    line-height: 1.5;
    color: rgba(228, 200, 154, 0.85);
}

html body .pt-footer-social {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}

html body .pt-footer-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(240, 231, 214, 0.22);
    color: rgba(240, 231, 214, 0.78);
    transition: border-color 0.2s ease, color 0.2s ease;
}

html body .pt-footer-social a:hover {
    border-color: var(--pt-brass);
    color: var(--pt-brass);
}

html body .pt-footer-social svg {
    width: 16px;
    height: 16px;
}

html body .pt-footer-head {
    margin: 0 0 16px;
    font-family: var(--pt-sans);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.17em;
    text-transform: uppercase;
    color: #d5ac72;
}

html body .pt-footer-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

html body .pt-footer-list li {
    margin: 0 0 9px;
    list-style: none;
}

html body .pt-footer-list a {
    font-family: var(--pt-serif);
    font-size: 1.04rem;
    line-height: 1.4;
    color: rgba(240, 231, 214, 0.74);
    text-decoration: none;
    transition: color 0.18s ease;
}

html body .pt-footer-list a:hover {
    color: #f2e6d2;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-color: rgba(196, 154, 92, 0.7);
}

html body .pt-footer-address {
    margin: 0 0 18px;
    font-family: var(--pt-serif);
    font-size: 1.04rem;
    font-style: normal;
    line-height: 1.5;
    color: rgba(240, 231, 214, 0.78);
}

html body .pt-footer-address span {
    display: block;
}

html body .pt-footer-hours {
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
}

html body .pt-footer-hours li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(240, 231, 214, 0.09);
    list-style: none;
}

html body .pt-footer-days {
    font-size: 0.82rem;
    color: rgba(240, 231, 214, 0.62);
}

html body .pt-footer-time {
    font-size: 0.86rem;
    font-variant-numeric: tabular-nums;
    color: rgba(240, 231, 214, 0.88);
}

html body .pt-footer-reach li {
    margin-bottom: 5px;
}

html body .pt-footer-reach a {
    font-family: var(--pt-sans);
    font-size: 0.88rem;
    color: rgba(228, 200, 154, 0.88);
}

html body .pt-footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 26px;
    margin-top: clamp(34px, 4vw, 52px);
    padding-top: 20px;
    border-top: 1px solid rgba(240, 231, 214, 0.12);
    font-family: var(--pt-sans);
    font-size: 0.76rem;
    color: rgba(240, 231, 214, 0.5);
}

html body .pt-footer-legal {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

html body .pt-footer-legal a {
    color: rgba(240, 231, 214, 0.58);
    text-decoration: none;
    transition: color 0.18s ease;
}

html body .pt-footer-legal a:hover {
    color: var(--pt-brass);
}

@media (max-width: 1024px) {
    html body .pt-footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 38px 40px;
    }

    html body .pt-footer-brand {
        grid-column: 1 / -1;
    }

    html body .pt-footer-blurb,
    html body .pt-footer-note {
        max-width: 52ch;
    }
}

@media (max-width: 600px) {
    html body .pt-footer-grid {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    html body .pt-footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }

    html body .pt-footer-legal {
        gap: 16px;
    }
}


html body .pt-lead {
    padding: clamp(46px, 5vw, 76px) 0 clamp(30px, 3.4vw, 46px);
    border-bottom: 1px solid var(--pt-rule);
    background: var(--pt-paper);
}

html body .pt-lead .pt-page-title {
    max-width: 22ch;
    margin: 10px 0 0;
    font-size: clamp(2.1rem, 4vw, 3.2rem);
}

html body .pt-lead-text {
    max-width: 52ch;
    margin: 20px 0 0;
    font-family: var(--pt-serif);
    font-size: clamp(1.12rem, 1.6vw, 1.34rem);
    font-style: italic;
    line-height: 1.5;
    color: var(--pt-ink-soft);
}

html body .pt-prose p {
    max-width: 62ch;
    margin: 0 0 18px;
    color: var(--pt-ink-soft);
}

html body .pt-prose p:last-child {
    margin-bottom: 0;
}

html body .pt-prose .pt-section-title {
    margin: 0 0 20px;
}

html body .pt-prose .pt-link-arrow {
    margin-top: 8px;
}

html body .pt-band-ink .pt-prose p,
html body .pt-band-ink p {
    color: rgba(245, 239, 227, 0.76);
}

html body .pt-note {
    max-width: 56ch;
    margin: 26px 0 0;
    padding-left: 16px;
    border-left: 2px solid var(--pt-brass);
    font-family: var(--pt-serif);
    font-size: 1.08rem;
    font-style: italic;
    line-height: 1.55;
    color: var(--pt-ink-soft);
}

html body .pt-note cite {
    display: block;
    margin-top: 6px;
    font-family: var(--pt-sans);
    font-size: 0.68rem;
    font-style: normal;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--pt-walnut);
}


html body .fx-header {
    position: relative;
}

html body .fx-nav {
    position: static;
}

html body .fx-header .fx-mega-menu,
html body .fx-header .fx-mega-menu--fullwidth {
    left: 0;
    right: 0;
    width: auto;
    padding: 0;
    border-top: 1px solid rgba(196, 154, 92, 0.28);
    border-bottom: 0;
    background: linear-gradient(180deg, #241f19 0%, #1b1610 100%);
    box-shadow: 0 30px 46px -28px rgba(0, 0, 0, 0.95);
}

html body .fx-mega-inner {
    display: block;
    max-width: var(--pt-measure);
    margin: 0 auto;
    padding: 26px 24px 30px;
}

html body .fx-mega-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 44px;
}

html body .fx-mega-list > li {
    border-bottom: 1px solid rgba(245, 239, 227, 0.08);
}

html body .fx-mega-list .fx-nav-link {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 11px 6px 11px 0;
    font-family: var(--pt-serif);
    font-size: 1.08rem;
    font-weight: 400;
    letter-spacing: 0.005em;
    text-transform: none;
    color: rgba(245, 239, 227, 0.86);
    transition: color 0.18s ease, padding-left 0.18s ease;
}

html body .fx-mega-list .fx-nav-link:hover {
    padding-left: 5px;
    color: #f2e6d2;
}

html body .fx-mega-list .fx-nav-link::before {
    content: "";
    flex: 0 0 auto;
    width: 4px;
    height: 26px;
    background: rgba(245, 239, 227, 0.16);
    transition: background 0.18s ease, box-shadow 0.18s ease;
}

html body .fx-mega-list a[href*="/fiction/"]::before              { background: var(--pt-cat-fiction); }
html body .fx-mega-list a[href*="/philosophy/"]::before           { background: var(--pt-cat-philosophy); }
html body .fx-mega-list a[href*="/poetry/"]::before               { background: var(--pt-cat-poetry); }
html body .fx-mega-list a[href*="/essay-non-fiction/"]::before    { background: var(--pt-cat-essay-non-fiction); }
html body .fx-mega-list a[href*="/classics/"]::before             { background: var(--pt-cat-classics); }
html body .fx-mega-list a[href*="/children-young-adult/"]::before { background: var(--pt-cat-children-young-adult); }
html body .fx-mega-list a[href*="/children-you"]::before          { background: var(--pt-cat-children-young-adult); }

html body .fx-mega-list a[href*="/greek-literature/"]::before,
html body .fx-mega-list a[href*="/in-translation/"]::before,
html body .fx-mega-list a[href*="/sale/"]::before {
    width: 4px;
    background: transparent;
    box-shadow: inset 0 0 0 1px rgba(196, 154, 92, 0.75);
}

html body .fx-mega-list .fx-nav-link:hover::before {
    box-shadow: 0 0 0 1px rgba(196, 154, 92, 0.5);
}

@media (max-width: 1100px) {
    html body .fx-mega-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 32px;
    }
}

html body .fx-header .fx-header-inner {
    position: static;
}

html body .pt-search .pt-search-form:hover {
    border-bottom-color: rgba(196, 154, 92, 0.65);
}

html body .pt-search .pt-search-form:focus-within {
    border-bottom-color: var(--pt-brass);
    box-shadow: 0 1px 0 0 var(--pt-brass);
}

html body .pt-search .pt-search-form input.pt-search-field.search-field,
html body .pt-search .pt-search-form input.pt-search-field.search-field:hover,
html body .pt-search .pt-search-form input.pt-search-field.search-field:focus,
html body .pt-search .pt-search-form input.pt-search-field.search-field:focus-visible {
    border: 0;
    border-radius: 0;
    outline: none;
    box-shadow: none;
    background: transparent;
}


@media (max-width: 768px) {
    html body #amazingsearch-autocomplete {
        position: fixed;
        margin: 0;
        width: 100%;
        max-width: 100%;
        max-height: calc(100vh - var(--pt-header-h, 130px));
        transform: translateY(var(--pt-header-h, 130px));
        border: 0;
        border-top: 1px solid rgba(196, 154, 92, 0.3);
        border-radius: 0;
        box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.9);
        background: rgba(11, 8, 6, 0.72);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    html body #amazingsearch-autocomplete .amazingsearch-section {
        background: #221e19;
        border-bottom-color: rgba(245, 239, 227, 0.1);
    }

    html body #amazingsearch-autocomplete .amazingsearch-section:first-child {
        border-top: 1px solid rgba(196, 154, 92, 0.3);
    }
}


/* ===========================================================================
   Journal — the posts page
   A ledger rather than a card grid: three stub entries in cards read as a
   half-empty shop window, while a ruled list reads as a column that simply
   has not been running long.
   =========================================================================== */

html body .pt-page-head .pt-page-lede {
    max-width: 54ch;
    margin: 14px 0 0;
    font-family: var(--pt-sans);
    font-size: 1rem;
    line-height: 1.65;
    color: var(--pt-ink-soft);
}

html body .pt-journal {
    padding-top: clamp(30px, 3.4vw, 46px);
}

html body .pt-journal-list {
    max-width: 860px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

html body .pt-journal-item {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 0 24px;
    padding: clamp(26px, 3vw, 38px) 0;
    border-bottom: 1px solid var(--pt-rule);
}

html body .pt-journal-item:first-child {
    padding-top: 0;
}

html body .pt-journal-index {
    font-family: var(--pt-serif);
    font-size: 1.65rem;
    font-weight: 500;
    line-height: 1;
    color: var(--pt-brass-dark);
}

html body .pt-journal-date {
    display: block;
    font-family: var(--pt-sans);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.17em;
    text-transform: uppercase;
    color: var(--pt-walnut);
}

html body .pt-journal-title {
    margin: 8px 0 0;
    font-family: var(--pt-serif);
    font-size: clamp(1.5rem, 2.6vw, 2.05rem);
    font-weight: 500;
    line-height: 1.15;
    color: var(--pt-ink);
}

html body .pt-journal-title a {
    color: inherit;
    text-decoration: none;
    box-shadow: inset 0 -1px 0 transparent;
    transition: box-shadow 0.18s ease, color 0.18s ease;
}

html body .pt-journal-title a:hover,
html body .pt-journal-title a:focus-visible {
    color: var(--pt-brass-dark);
    box-shadow: inset 0 -1px 0 var(--pt-brass);
}

html body .pt-journal-excerpt {
    max-width: 58ch;
    margin: 12px 0 20px;
    font-family: var(--pt-sans);
    font-size: 0.97rem;
    line-height: 1.7;
    color: var(--pt-ink-soft);
}

html body .pt-journal-empty {
    max-width: 46ch;
    margin: 0 0 22px;
    font-family: var(--pt-serif);
    font-size: 1.35rem;
    line-height: 1.4;
    color: var(--pt-ink-soft);
}

/* ---- pagination ---- */

html body .pt-journal-pages {
    margin-top: clamp(30px, 3.6vw, 46px);
}

html body .pt-journal-pages .page-numbers {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

html body .pt-journal-pages li .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--pt-rule);
    font-family: var(--pt-sans);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--pt-ink);
    text-decoration: none;
}

html body .pt-journal-pages li .page-numbers.current {
    border-color: var(--pt-ink);
    background: var(--pt-ink);
    color: var(--pt-paper);
}

html body .pt-journal-pages li a.page-numbers:hover {
    border-color: var(--pt-brass);
    color: var(--pt-brass-dark);
}

/* The index column costs more than it earns once the measure narrows. */
@media (max-width: 620px) {
    html body .pt-journal-item {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    html body .pt-journal-index {
        display: none;
    }
}

/* ---- a single entry ---- */

html body .pt-post {
    padding-top: clamp(30px, 3.4vw, 46px);
}

html body .pt-post-figure {
    max-width: 860px;
    margin: 0 0 clamp(26px, 3vw, 40px);
}

html body .pt-post-figure img {
    display: block;
    width: 100%;
    height: auto;
}

html body .pt-post-body {
    max-width: 68ch;
}

html body .pt-post-body p {
    margin: 0 0 1.15em;
    font-family: var(--pt-sans);
    font-size: 1.03rem;
    line-height: 1.78;
    color: var(--pt-ink-soft);
}

html body .pt-post-body h2,
html body .pt-post-body h3 {
    margin: 1.7em 0 0.5em;
    font-family: var(--pt-serif);
    font-weight: 500;
    line-height: 1.2;
    color: var(--pt-ink);
}

html body .pt-post-body h2 { font-size: 1.85rem; }
html body .pt-post-body h3 { font-size: 1.4rem; }

html body .pt-post-body a {
    color: var(--pt-brass-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
}

html body .pt-post-body blockquote {
    margin: 1.6em 0;
    padding-left: 20px;
    border-left: 2px solid var(--pt-brass);
    font-family: var(--pt-serif);
    font-size: 1.3rem;
    line-height: 1.45;
    color: var(--pt-ink);
}

html body .pt-post-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    max-width: 860px;
    margin: clamp(38px, 4.4vw, 60px) 0 clamp(24px, 2.6vw, 34px);
    padding-top: 22px;
    border-top: 1px solid var(--pt-rule);
}

html body .pt-post-nav-next {
    text-align: right;
}

html body .pt-post-nav-side a {
    display: block;
    margin-top: 6px;
    font-family: var(--pt-serif);
    font-size: 1.25rem;
    line-height: 1.25;
    color: var(--pt-ink);
    text-decoration: none;
}

html body .pt-post-nav-side a:hover {
    color: var(--pt-brass-dark);
}

@media (max-width: 620px) {
    html body .pt-post-nav {
        grid-template-columns: minmax(0, 1fr);
    }

    html body .pt-post-nav-next {
        text-align: left;
    }
}

/* ---- search results reuse the ledger, minus the numbering column ---- */

html body .pt-results .pt-journal-item {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
}

html body .pt-results .pt-journal-title {
    font-size: clamp(1.35rem, 2.2vw, 1.75rem);
}

html body .pt-results .pt-404-search {
    max-width: 460px;
}