:root {
  --book-bg: #ebe7e1;
  --book-panel: rgba(255,255,255,0.78);
  --book-panel-strong: rgba(255,255,255,0.94);
  --book-ink: #17191d;
  --book-muted: #696a70;
  --book-line: rgba(27,29,34,0.1);
  --book-orange: #d76f35;
  --book-teal: #1e6968;
  --book-purple: #9159e5;
  --book-pink: #e4869b;
  --book-midnight: #191970;
  --book-blue: #3d72c4;
  --book-tan: #d9b98a;
  --book-shadow: 0 24px 70px rgba(40,36,31,0.14);
  /* Reds, by purpose: hearts/block buttons, error messages, delete actions. */
  --book-red: #e0303f;
  --book-error: #c0392b;
  --book-danger: #b5495b;
  --rail-left: max(24px, calc((100vw - 1180px) / 2));
  --rail-shift: calc(var(--rail-left) - 94px);
  --rail-width: 290px;
  --rail-gap: 28px;
  --content-left: calc(var(--rail-left) + var(--rail-width) + var(--rail-gap));
  --sticky-page-top: 86px;
}

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

html {
  color: var(--book-ink);
  font-family: Nunito, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  text-size-adjust: 100%;
}

body {
  background: #e2ddd4;
  color: var(--book-ink);
  margin: 0;
  min-height: 100vh;
}

.page-bg-corner-patch {
  /* .page-bg-accent's own top-right border-radius cuts a small rounded
     notch out of its corner (same as any rounded box) — normally that
     reveals the plain page background behind it, but right next to that
     notch is .right-edge-strip's own color, so the plain background peeking
     through there reads as a stray wrong color. This sits behind
     .page-bg-accent, sized generously over just that notch, so the color
     revealed matches .right-edge-strip instead. */
  background: #c9c4bc;
  height: 30px;
  pointer-events: none;
  position: fixed;
  right: 56px;
  top: 0;
  width: 30px;
  z-index: 0;
}

.page-bg-accent {
  background: #ffffff;
  border-radius: 26px 24px 0 0;
  bottom: 0;
  left: 94px;
  overflow: hidden;
  pointer-events: none;
  position: fixed;
  right: 56px;
  top: 14px;
  z-index: 0;
}

.page-bg-accent:before,
.page-bg-accent:after {
  content: "";
  position: absolute;
}

.page-bg-accent:before {
  /* Height is expressed relative to this element's own top (-6vh, itself
     offset 14px down by .page-bg-accent) so the curve stays pinned to the
     same point regardless of viewport height. */
  background: #ebe9e4;
  border-radius: 0 0 0 80px;
  height: calc(501px + 6vh);
  left: calc(var(--rail-left) - var(--rail-shift) + var(--rail-width) - 94px);
  right: -8vw;
  top: -6vh;
}

.page-bg-accent:after {
  /* right/width no longer overshoot past .page-bg-accent's own edge (as
     they used to, relying on the parent's overflow:hidden to flat-clip the
     excess) — that flat clip was hiding this corner's own rounding, so the
     edge now sits exactly at the parent's boundary and rounds itself,
     matching .app-sidebar-inner's top-left corner (24px). */
  background: #dbd7cf;
  height: calc(501px + 6vh);
  right: 0;
  top: -6vh;
  width: calc(28vw - 6vw);
}

.page-bg-gap-strip {
  /* Fills the 14px gap above .page-bg-accent:after (clipped off by
     .page-bg-accent's own top:14px offset) with the color of the strip
     next to it (.right-edge-strip's top half), but only across the same
     horizontal span as the profile-picture rectangle below it — .page-bg-
     accent:after's own width (28vw), minus the 6vw of it that's clipped
     off-screen past .page-bg-accent's right edge. */
  background: #c9c4bc;
  height: 14px;
  pointer-events: none;
  position: fixed;
  right: 56px;
  top: 0;
  width: calc(28vw - 6vw);
  z-index: 0;
}

.right-edge-strip {
  /* Split at the same height where .page-bg-accent:after (the profile-
     picture rectangle) ends and the white base takes over (14px top offset
     + 501px+6vh height, the 6vh cancels out to a flat 515px). */
  background: #c9c4bc;
  height: 515px;
  pointer-events: none;
  position: fixed;
  right: 0;
  top: 0;
  width: 56px;
  z-index: 0;
}

.right-edge-strip:after {
  background: #e2ded7;
  bottom: 0;
  content: "";
  position: fixed;
  right: 0;
  top: 515px;
  width: 56px;
}

a {
  color: var(--book-teal);
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

/* Avatar/name links to a user's public profile (chat, book club). Keep the
   surrounding text color so names look the same as before, just clickable. */
.second_shelf-profile-link {
  color: inherit;
  flex-shrink: 0;
  transition: opacity 0.18s ease;
}

.second_shelf-profile-link:hover {
  color: inherit;
  opacity: 0.75;
}

.second_shelf-profile-link > img {
  display: block;
}

img {
  height: auto;
  max-width: 100%;
}

ul,
ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

.clear {
  clear: both;
}

.wrapper {
  margin: 0 auto;
  width: min(1180px, calc(100% - 48px));
}

.app-topbar {
  background: transparent;
  border: 0;
  left: 0;
  padding: 16px 15px 0;
  position: sticky;
  top: 0;
  z-index: 80;
}

.app-topbar .wrapper {
  padding-left: 272px;
}

/*
 * Fixed to the viewport (not the page) so a flash message set right
 * before a redirect — e.g. "Your listing has been deleted", landing on
 * #my-books further down the profile page — is still seen and can be
 * dismissed immediately, instead of sitting off-screen above the fold.
 * Centered via left:50%/translateX rather than left:0;right:0;margin:auto
 * — the more standard fixed-toast technique, and it keeps the box itself
 * (not some full-width invisible wrapper) as the only thing at this
 * position, so nothing can end up sitting in front of its own close button.
 */
.wrapper-flash {
  left: 50%;
  max-width: min(560px, calc(100vw - 32px));
  padding-top: env(safe-area-inset-top, 0px);
  pointer-events: none;
  position: fixed;
  top: 16px;
  transform: translateX(-50%);
  width: max-content;
  z-index: 150;
}

.wrapper-flash:empty {
  display: none;
}

.topbar-shell {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  gap: 14px;
  min-height: 64px;
  padding: 0;
}

.topbar-brand {
  color: var(--book-ink);
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 1px;
  line-height: 24px;
  text-transform: uppercase;
}

.topbar-spacer {
  flex: 1;
}

.topbar-account {
  position: fixed;
  right: 80px;
  top: 30px;
  z-index: 90;
}

.account-trigger,
.account-login,
button,
.btn {
  align-items: center;
  background: var(--book-teal);
  border: 0;
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  font-family: inherit;
  font-size: 14px;
  font-weight: 900;
  gap: 8px;
  justify-content: center;
  min-height: 40px;
  padding: 0 18px;
}

/* .btn's own display: inline-flex is author CSS, so it beats the browser's
   built-in [hidden] { display: none } rule (same specificity, but author
   origin always wins over user-agent origin) — a .btn element marked
   hidden would otherwise render anyway. This re-asserts it whenever both
   are present, e.g. toggling between a request/"requested" pair of .btn
   elements by adding/removing the hidden attribute. */
.btn[hidden] {
  display: none;
}

/* Mark as sold/available — item detail page, owner-only actions next to
   Edit item. Sold uses a warm, deliberate amber (closing a sale reads as a
   positive, decisive action, not a destructive one) with a price-tag icon;
   available-again is an outline/ghost treatment so it reads as the lighter,
   reversible undo action sitting next to it. */
.btn-mark-sold {
  background: var(--book-orange);
}

.btn-mark-sold:hover {
  background: #c25f28;
}

.btn-mark-available {
  background: transparent;
  border: 1.5px solid var(--book-line);
  color: var(--book-ink);
}

.btn-mark-available:hover {
  background: var(--book-line);
}

.account-trigger {
  background: transparent;
  border-radius: 999px;
  color: var(--book-ink);
  gap: 12px;
  padding: 4px 6px;
}

.account-trigger:hover,
.account-trigger:focus {
  background: rgba(255,255,255,0.52);
}

.account-trigger img {
  border: 3px solid #f2cd75;
  border-radius: 50%;
  height: 38px;
  object-fit: cover;
  width: 38px;
}

.account-trigger span {
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-menu {
  background: var(--book-panel-strong);
  border: 1px solid rgba(255,255,255,0.65);
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(32,28,24,0.16);
  min-width: 180px;
  opacity: 0;
  padding: 8px;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  transform: translateY(-6px);
  transition: 0.18s ease;
}

.topbar-account:hover .account-menu,
.topbar-account:focus-within .account-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.account-menu a,
.account-login {
  border-radius: 10px;
  color: var(--book-ink);
  display: block;
  font-weight: 800;
  padding: 10px 12px;
}

.account-login {
  background: rgba(255,255,255,0.72);
}

.account-menu a:hover,
.account-login:hover {
  background: rgba(30,105,104,0.1);
  color: var(--book-teal);
}

section {
  padding: 0 15px 52px;
  position: relative;
  z-index: 2;
}

.second-shelf-layout {
  display: grid;
  gap: var(--rail-gap);
  grid-template-columns: var(--rail-width) minmax(0, 1fr);
}

.second-shelf-main-area {
  grid-column: 2;
  min-width: 0;
  position: relative;
  z-index: 70;
}

#main {
  min-width: 0;
  position: relative;
  z-index: 2;
}

.app-sidebar {
  align-self: start;
  height: calc(100vh - 114px);
  left: calc(var(--rail-left) - var(--rail-shift));
  overflow: visible;
  position: fixed;
  top: 114px;
  width: var(--rail-width);
  z-index: 64;
}

.app-sidebar-inner {
  background: #ffffff;
  border-radius: 24px 0 0 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  padding: 4px 14px 22px;
  position: relative;
  z-index: 3;
}

.sidebar-logo {
  color: var(--book-ink);
  display: block;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 0.5px;
  line-height: 26px;
  margin: 0 8px 44px;
  text-transform: uppercase;
}

.sidebar-menu {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sidebar-menu-muted {
  border-top: 1px solid var(--book-line);
  margin-top: auto;
  padding-top: 26px;
}

.sidebar-menu a {
  align-items: center;
  border-radius: 14px;
  color: var(--book-ink);
  display: flex;
  font-size: 16px;
  font-weight: 700;
  gap: 14px;
  min-height: 48px;
  padding: 10px 14px;
}

.sidebar-menu a:hover {
  background: rgba(224,219,214,0.72);
}

.sidebar-menu-badge {
  align-items: center;
  background: var(--book-teal);
  border-radius: 999px;
  color: #fff;
  display: flex;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 900;
  height: 20px;
  justify-content: center;
  margin-left: auto;
  min-width: 20px;
  padding: 0 6px;
}

.sidebar-menu a.active {
  background: rgba(224,219,214,0.72);
}

.sidebar-menu span {
  align-items: center;
  background: #eef0f1;
  border-radius: 10px;
  color: var(--book-muted);
  display: flex;
  flex-shrink: 0;
  height: 34px;
  justify-content: center;
  min-width: 34px;
}

.sidebar-menu-discover span {
  background: var(--book-orange);
  color: #fff;
}

.sidebar-menu-post span {
  background: var(--book-pink);
  color: #fff;
}

.sidebar-menu-bookclub span {
  background: #efe6fb;
}

.sidebar-menu-profile span {
  background: var(--book-tan);
  color: #fff;
}

.sidebar-menu-settings {
  position: relative;
}

.settings-menu {
  background: var(--book-panel-strong);
  border: 1px solid rgba(255,255,255,0.65);
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(32,28,24,0.16);
  left: calc(100% + 10px);
  min-width: 200px;
  opacity: 0;
  padding: 8px;
  pointer-events: none;
  position: absolute;
  top: 0;
  transform: translateX(-6px);
  transition: 0.18s ease;
  z-index: 80;
}

.sidebar-menu-settings:hover .settings-menu,
.sidebar-menu-settings:focus-within .settings-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

.settings-menu a {
  border-radius: 10px;
  color: var(--book-ink);
  display: block;
  font-weight: 800;
  padding: 10px 12px;
}

.settings-menu a:hover {
  background: rgba(30,105,104,0.1);
  color: var(--book-teal);
}

.sidebar-menu-chat span {
  background: var(--book-teal);
  color: #fff;
}

.home-discover {
  margin: 0 0 34px;
  max-width: none;
  padding: 24px 0 20px;
}

.home-discover h1,
body.search h1,
body.user h1,
body.item h1,
.form-container .header h1 {
  color: var(--book-ink);
  font-size: 36px;
  font-weight: 900;
  line-height: 44px;
  margin: 0 0 26px;
}

.home-discover-title-link {
  color: inherit;
  transition: color 0.18s ease;
}

.home-discover-title-link:hover,
.home-discover-title-link:focus-visible {
  color: var(--book-teal);
}

.home-discover-title-btn {
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  min-height: 0;
  padding: 0;
  transition: color 0.18s ease;
}

.home-discover-title-btn:hover,
.home-discover-title-btn:focus-visible {
  color: var(--book-teal);
}

#main > h1,
.form-container > .header {
  backdrop-filter: blur(16px);
  background: rgba(248,246,242,0.76);
}

#main > h1 {
  margin: 0 0 24px;
  padding: 24px 0 20px;
}

.form-container > .header {
  border-bottom: 0;
  margin: -22px -22px 22px;
  padding: 24px 22px 0;
}

.form-container > .header h1 {
  margin-bottom: 18px;
}

.item-post-header {
  align-items: center;
  display: flex;
  gap: 16px;
  justify-content: space-between;
}

.form-container > .item-post-header h1 {
  margin-bottom: 0;
}

.item-post-delete-btn {
  align-items: center;
  background: rgba(181,73,91,0.1);
  border: 1px solid rgba(181,73,91,0.24);
  border-radius: 999px;
  color: var(--book-danger);
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 800;
  gap: 8px;
  padding: 9px 16px;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.item-post-delete-btn:hover {
  background: rgba(181,73,91,0.18);
  border-color: rgba(181,73,91,0.4);
}

.home-discover-search-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.home-book-search {
  align-items: center;
  background: rgba(255,255,255,0.76);
  border: 1px solid rgba(255,255,255,0.82);
  border-radius: 10px;
  box-shadow: 0 18px 42px rgba(48,42,36,0.08);
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) 110px;
  height: 52px;
  max-width: 600px;
  overflow: hidden;
  width: 100%;
}

.home-book-search-category {
  align-items: center;
  border-right: 1px solid rgba(27,29,34,0.14);
  display: flex;
  height: 100%;
  justify-content: center;
  position: relative;
}

.home-book-search .home-book-search-category select,
.home-book-search .home-book-search-query input {
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--book-ink);
  font: inherit;
  height: 100%;
  margin: 0;
  min-height: 0;
  outline: 0;
  padding: 0;
  text-align: center;
  width: 100%;
}

.home-book-search .home-book-search-category select,
.home-book-search .home-book-search-category select:focus {
  /* Its own chevron icon sits next to it — no arrow image, focused or not. */
  background-image: none;
}

.home-book-search .home-book-search-category select {
  appearance: none;
  color: var(--book-muted);
  overflow: hidden;
  padding: 0 28px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-book-search-category i {
  color: var(--book-muted);
  pointer-events: none;
  position: absolute;
  right: 14px;
}

.home-book-search-query {
  align-items: center;
  display: flex;
  gap: 0;
  height: 100%;
  justify-content: center;
  padding: 0 18px;
}

.home-book-search-query i,
.home-book-search-query input::placeholder {
  color: #a4a0a0;
}

.home-book-search button {
  height: 36px;
  justify-self: center;
  margin: 0;
  min-height: 36px;
}

.section-heading {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin: 0 0 22px;
}

.section-heading h2,
body.search #main h2 {
  color: var(--book-ink);
  font-size: 26px;
  font-weight: 800;
  line-height: 32px;
  margin: 0;
}

.section-subheading {
  color: var(--book-muted);
  font-size: 14px;
  margin: 4px 0 0;
}

.section-heading a {
  align-items: center;
  background: rgba(255,255,255,0.8);
  border: 1px solid rgba(255,255,255,0.75);
  border-radius: 9px;
  color: var(--book-ink);
  display: inline-flex;
  font-size: 14px;
  font-weight: 900;
  gap: 8px;
  min-height: 32px;
  padding: 0 14px;
}

/*
 * .second_shelf-icon-btn is the plain visual (circular icon button) —
 * .second_shelf-refresh-btn extends it for the Refresh/shuffle control
 * specifically, which is ALSO a JS selector (global.js binds its
 * click-to-reshuffle behavior to that exact class). Any other circular
 * icon button (e.g. "Melden") must use .second_shelf-icon-btn alone, never
 * .second_shelf-refresh-btn, or it inherits that reload-the-page behavior
 * along with the look.
 */
.second_shelf-icon-btn,
.second_shelf-refresh-btn {
  align-items: center;
  background: #fff;
  border: 1px solid var(--book-line);
  border-radius: 50%;
  color: var(--book-ink);
  cursor: pointer;
  display: inline-flex;
  flex-shrink: 0;
  font-size: 15px;
  height: 42px;
  justify-content: center;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
  width: 42px;
}

.second_shelf-icon-btn:hover,
.second_shelf-icon-btn:focus-visible,
.second_shelf-refresh-btn:hover,
.second_shelf-refresh-btn:focus-visible {
  background: var(--book-teal);
  border-color: var(--book-teal);
  color: #fff;
}

.second_shelf-refresh-btn i {
  transition: transform 0.4s ease;
}

.second_shelf-refresh-btn:hover i {
  transform: rotate(180deg);
}

/*
 * "Pull a book off the shelf" — a book leaning out (tug), catching, then
 * dropping back and spinning into place — instead of a plain loading spin,
 * for the exact moment a fresh shuffle of books lands.
 */
.second_shelf-refresh-btn.is-spinning i {
  animation: second_shelf-refresh-pull 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes second_shelf-refresh-pull {
  0% { transform: translateY(0) rotate(0deg); }
  35% { transform: translateY(5px) rotate(-22deg); }
  60% { transform: translateY(-3px) rotate(10deg); }
  100% { transform: translateY(0) rotate(360deg); }
}

.home-latest,
.home-categories,
#sidebar .filters,
body.user #sidebar,
body.item #sidebar .widget-box,
body.user-public-profile #sidebar .widget-box,
.form-container-box,
.form-container,
#contact,
.page #main,
.not-found #main {
  background: rgba(255,255,255,0.62);
  border: 1px solid rgba(255,255,255,0.72);
  border-radius: 16px;
  box-shadow: 0 18px 45px rgba(42,38,34,0.08);
  padding: 22px;
}

.home-latest,
.home-categories {
  background: transparent;
  border: 0;
  box-shadow: none;
  margin: 0 0 34px;
  padding: 0;
  position: relative;
  z-index: 40;
}

.listing-card-list {
  clear: both;
  position: relative;
  z-index: 42;
  width: 100%;
}

.listing-card-list.listing-grid {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.listing-card {
  background: #fff;
  border: 1px solid rgba(255,255,255,0.78);
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(42,38,34,0.08);
  display: flex;
  flex-direction: column;
  margin: 0 0 14px;
  min-height: 250px;
  overflow: hidden;
  position: relative;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

/* Same lift as the category tiles (.book-category-tile:hover). */
.listing-card:hover {
  box-shadow: 0 18px 36px rgba(42,38,34,0.16);
  transform: translateY(-4px);
}

.listing-card[data-open-url] {
  cursor: pointer;
}

.listing-grid .listing-card {
  margin: 0;
}

.listing-thumb-frame {
  position: relative;
}

/*
 * Progressive-enhancement loading shimmer for image-heavy grids (listing
 * cards, "Meine Bücher", category tiles, bookclub covers). global.js adds
 * .second_shelf-thumb-loading to a thumb container while its <img> hasn't
 * fired load/error yet and removes it once it has — a no-op without JS,
 * the image just renders immediately as it always did.
 */
.listing-thumb.second_shelf-thumb-loading,
.my-book-thumb.second_shelf-thumb-loading,
.book-category-tile.second_shelf-thumb-loading,
.bookclub-card-cover.second_shelf-thumb-loading {
  animation: second_shelf-thumb-shimmer 1.4s ease infinite;
  background: linear-gradient(90deg, var(--book-line) 25%, rgba(255,255,255,0.9) 37%, var(--book-line) 63%);
  background-size: 400% 100%;
}

.listing-thumb img,
.my-book-thumb img,
.book-category-tile img,
.bookclub-card-cover img {
  transition: opacity 0.25s ease;
}

.second_shelf-thumb-loading img {
  opacity: 0;
}

@keyframes second_shelf-thumb-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

.listing-thumb {
  align-items: center;
  background: linear-gradient(145deg, rgba(255,255,255,0.48), rgba(226,222,218,0.52));
  display: flex;
  height: 165px;
  justify-content: center;
  overflow: hidden;
  padding: 6px;
  position: relative;
  width: 100%;
}

.listing-thumb img {
  border-radius: 4px;
  box-shadow: 0 10px 26px rgba(26,24,22,0.18);
  /* The whole photo, in its own shape — never cropped to the frame. */
  height: auto;
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  width: auto;
}

.listing-detail {
  background: #fff;
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 14px 16px;
}

.listing-cell,
.listing-data {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.listing-basicinfo a.title {
  color: var(--book-ink);
  display: block;
  font-size: 18px;
  font-weight: 900;
  line-height: 22px;
  margin: 0 0 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.listing-seller-row {
  align-items: center;
  display: flex;
  gap: 8px;
  margin-top: auto;
  padding-top: 10px;
}

.listing-seller {
  color: var(--book-muted);
  flex: 1;
  font-size: 14px;
  line-height: 18px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.listing-thumb .currency-value {
  background: rgba(255,255,255,0.94);
  border-radius: 999px;
  box-shadow: 0 4px 10px rgba(26,24,22,0.1);
  color: var(--book-ink);
  font-size: 15px;
  font-weight: 900;
  line-height: 20px;
  padding: 4px 12px;
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 2;
}

.listing-sold-badge {
  background: var(--book-ink);
  border-radius: 999px;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  left: 10px;
  letter-spacing: 0.02em;
  line-height: 20px;
  padding: 4px 12px;
  position: absolute;
  text-transform: uppercase;
  top: 10px;
  z-index: 2;
}

.listing-card:has(.listing-sold-badge) .listing-thumb img {
  filter: grayscale(0.5);
  opacity: 0.75;
}

/*
 * Favorite/save heart — bottom-right of the thumbnail so it never
 * collides with the price (top-right) or sold badge (top-left).
 */
.listing-favorite-btn {
  align-items: center;
  background: rgba(255,255,255,0.92);
  border: 0;
  border-radius: 50%;
  bottom: 10px;
  box-shadow: 0 4px 10px rgba(26,24,22,0.14);
  color: var(--book-muted);
  cursor: pointer;
  display: flex;
  font-size: 15px;
  height: 34px;
  justify-content: center;
  position: absolute;
  right: 10px;
  transition: transform 0.15s ease, color 0.15s ease;
  width: 34px;
  z-index: 2;
}

.listing-favorite-btn:hover {
  color: var(--book-red);
  transform: scale(1.08);
}

.listing-favorite-btn:active {
  transform: scale(0.9);
}

.listing-favorite-btn.is-active {
  color: var(--book-red);
}

.item-detail-favorite-btn {
  align-items: center;
  background: transparent;
  border: 1.5px solid var(--book-line);
  border-radius: 999px;
  color: var(--book-muted);
  cursor: pointer;
  display: flex;
  font-size: 14px;
  font-weight: 800;
  gap: 8px;
  padding: 0 18px;
  min-height: 40px;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.item-detail-favorite-btn:hover {
  border-color: var(--book-red);
  color: var(--book-red);
}

.item-detail-favorite-btn.is-active {
  background: rgba(224,48,63,0.1);
  border-color: var(--book-red);
  color: var(--book-red);
}

.listing-avatar {
  align-items: center;
  background: #d6dbe0;
  border: 2px solid rgba(255,255,255,0.9);
  border-radius: 50%;
  color: var(--book-muted);
  display: flex;
  flex-shrink: 0;
  height: 34px;
  justify-content: center;
  width: 34px;
}

.listing-avatar img {
  border-radius: 50%;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.listing-details,
.listing-grid .desc,
.listing-grid .category,
.listing-grid .location,
.listing-grid .date {
  display: none;
}

.listing-list .listing-card {
  min-height: 0;
}

.listing-list .listing-thumb {
  float: left;
  height: 120px;
  width: 110px;
}

.listing-list .listing-detail {
  min-height: 120px;
}

/*
 * A grid of book-cover-shaped tiles (portrait, like a shelf) instead of
 * the previous carousel — no JS needed at all, it just wraps, and a
 * full-bleed cover photo with the label overlaid reads as "browse a
 * shelf" more than a row of icon badges did.
 */
.book-category-rail {
  position: relative;
  z-index: 42;
}

.book-category-nav {
  align-items: center;
  background: rgba(255,255,255,0.94);
  border: 1px solid rgba(255,255,255,0.8);
  border-radius: 50%;
  box-shadow: 0 12px 28px rgba(40,36,31,0.16);
  color: var(--book-ink);
  cursor: pointer;
  display: flex;
  font-size: 14px;
  height: 40px;
  justify-content: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: box-shadow 0.15s ease, opacity 0.15s ease, transform 0.15s ease;
  width: 40px;
  z-index: 5;
}

.book-category-nav:hover {
  box-shadow: 0 16px 32px rgba(40,36,31,0.22);
  transform: translateY(-50%) scale(1.08);
}

.book-category-nav.prev {
  left: -20px;
}

.book-category-nav.next {
  right: -20px;
}

.book-category-nav.is-hidden {
  opacity: 0;
  pointer-events: none;
}

/*
 * A native scroll container, not a JS-driven translateX carousel — 5
 * tiles per "page" (--book-category-per-page, overridden at narrower
 * breakpoints below), scroll-snapped so the prev/next buttons (global.js)
 * and a plain swipe/trackpad scroll both always land on a tile boundary.
 */
.book-category-grid {
  --book-category-per-page: 5;
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.book-category-grid::-webkit-scrollbar {
  display: none;
}

.book-category-tile {
  aspect-ratio: 3 / 4;
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(42,38,34,0.1);
  display: block;
  flex: 0 0 calc((100% - (var(--book-category-per-page) - 1) * 16px) / var(--book-category-per-page));
  overflow: hidden;
  position: relative;
  scroll-snap-align: start;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.book-category-tile:hover {
  box-shadow: 0 18px 36px rgba(42,38,34,0.18);
  transform: translateY(-4px);
}

.book-category-tile img {
  height: 100%;
  left: 0;
  object-fit: cover;
  position: absolute;
  top: 0;
  transition: transform 0.3s ease;
  width: 100%;
}

.book-category-tile:hover img {
  transform: scale(1.06);
}

.book-category-tile-icon {
  align-items: center;
  background: linear-gradient(160deg, #f3d097, #d56d39);
  color: #fff;
  display: flex;
  font-size: 34px;
  height: 100%;
  justify-content: center;
  width: 100%;
}

.book-category-tile:nth-child(4n+2) .book-category-tile-icon {
  background: linear-gradient(160deg, #85d4e4, var(--book-teal));
}

.book-category-tile:nth-child(4n+3) .book-category-tile-icon {
  background: linear-gradient(160deg, #dfb7ef, #8c56d8);
}

.book-category-tile:nth-child(4n) .book-category-tile-icon {
  background: linear-gradient(160deg, #f5c0cc, var(--book-orange));
}

.book-category-tile-scrim {
  background: linear-gradient(to top, rgba(17,16,15,0.82) 0%, rgba(17,16,15,0.32) 42%, transparent 72%);
  inset: 0;
  position: absolute;
}

.book-category-tile-text {
  bottom: 0;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 2px;
  left: 0;
  padding: 14px;
  position: absolute;
  right: 0;
}

.book-category-tile-text strong {
  font-size: 15px;
  line-height: 19px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.35);
}

.book-category-tile-text em {
  font-size: 12px;
  font-style: normal;
  opacity: 0.85;
}

#sidebar {
  width: 100%;
}

#sidebar fieldset {
  border: 0;
  margin: 0 0 16px;
  padding: 0;
}

#sidebar h3 {
  color: var(--book-ink);
  font-size: 15px;
  margin: 0 0 6px;
}

#sidebar .category a,
.user_menu a {
  color: var(--book-ink);
  display: block;
  padding: 6px 0;
}

.user_menu a:hover,
#sidebar .category a:hover {
  color: var(--book-teal);
}

.list-header {
  margin-bottom: 20px;
  padding: 24px 0 20px;
}

.search-title-row {
  align-items: center;
  display: flex;
  gap: 16px;
}

.search-filter {
  flex-shrink: 0;
  position: relative;
}

.search-filter-toggle {
  align-items: center;
  background: #fff;
  border: 1px solid var(--book-line);
  border-radius: 999px;
  color: var(--book-ink);
  display: inline-flex;
  font-size: 14px;
  font-weight: 800;
  gap: 8px;
  min-height: 42px;
  padding: 0 18px;
}

.search-filter-toggle:hover,
.search-filter.is-open .search-filter-toggle {
  background: var(--book-teal);
  border-color: var(--book-teal);
  color: #fff;
}

.search-filter-panel {
  background: #fff;
  border: 1px solid var(--book-line);
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(32,28,24,0.16);
  display: flex;
  flex-direction: column;
  gap: 6px;
  opacity: 0;
  padding: 18px;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  transform: translateY(-6px);
  transition: 0.18s ease;
  width: 260px;
  z-index: 60;
}

.search-filter.is-open .search-filter-panel {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.search-filter-label {
  color: var(--book-muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.4px;
  margin: 10px 0 6px;
  text-transform: uppercase;
}

.search-filter-label:first-child {
  margin-top: 0;
}

.search-filter-input {
  background: #fff;
  border: 1px solid var(--book-line);
  border-radius: 8px;
  color: var(--book-ink);
  font: inherit;
  min-height: 40px;
  padding: 0 12px;
  width: 100%;
}

.search-filter-price-row {
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr 1fr;
}

.search-filter-price-row .search-filter-input {
  width: auto;
}

.search-filter-apply {
  margin-top: 14px;
  width: 100%;
}

.counter-search,
.empty {
  color: var(--book-muted);
}

#user-items-results.is-loading,
#user-public-profile-results.is-loading {
  opacity: 0.5;
  transition: opacity 0.15s ease;
}

.settings-back-button {
  align-items: center;
  background: #fff;
  border: 1px solid var(--book-line);
  border-radius: 999px;
  color: var(--book-ink);
  display: inline-flex;
  font-size: 14px;
  font-weight: 800;
  gap: 10px;
  margin-bottom: 24px;
  min-height: 42px;
  padding: 0 20px 0 16px;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.settings-back-button i {
  font-size: 12px;
}

.settings-back-button:hover,
.settings-back-button:focus {
  background: var(--book-teal);
  border-color: var(--book-teal);
  color: #fff;
}

input[type="text"],
input[type="url"],
input[type="password"],
input[type="email"],
input[type="date"],
input[type="time"],
input[type="tel"],
input[type="number"],
select,
textarea {
  background: rgba(255,255,255,0.82);
  border: 1px solid var(--book-line);
  border-radius: 8px;
  color: var(--book-ink);
  font: inherit;
  margin: 0 0 16px;
  min-height: 44px;
  padding: 10px 12px;
  width: 100%;
}

textarea {
  min-height: 140px;
  resize: vertical;
}

/* Our own drop-down arrow instead of the browser's: the same clean chevron
   in every browser (Safari's own looks squeezed), with room to breathe on
   the right. Selects with an arrow of their own (the home search) reset
   the background and so drop this one. */
select:not([multiple]) {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.5 6 6l4.5-4.5' fill='none' stroke='%236f675e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: right 14px center;
  background-repeat: no-repeat;
  background-size: 12px 8px;
  cursor: pointer;
  padding-right: 40px;
  text-overflow: ellipsis;
}

select:not([multiple]):focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.5 6 6l4.5-4.5' fill='none' stroke='%231e6968' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  /* Spelled out again: a field that set the background shorthand (which
     resets the repeat) would otherwise tile the arrow across itself. */
  background-position: right 14px center;
  background-repeat: no-repeat;
  background-size: 12px 8px;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--book-teal);
  outline: 0;
}

/*
 * Firefox (and some other browsers) draw their own small validity
 * indicator — a green glow/outline — on any field that currently passes
 * its constraints, box-shadow based rather than color/border, which is
 * why overriding border-color above doesn't touch it. Fires on *every*
 * textarea/input by default, optional fields included (empty is still
 * "valid"), not just ones this theme marks required.
 */
input:valid,
input:invalid,
select:valid,
select:invalid,
textarea:valid,
textarea:invalid {
  box-shadow: none;
}

label {
  color: var(--book-ink);
  display: block;
  font-weight: 800;
  margin-bottom: 5px;
}

.form-horizontal .control-group {
  margin-bottom: 16px;
}

.form-horizontal .control-label {
  float: left;
  padding-right: 18px;
  text-align: right;
  width: 30%;
}

.form-horizontal .controls {
  float: left;
  width: 70%;
}

.form-horizontal .actions,
.form-horizontal .pblbt,
.form-horizontal .recpt {
  margin-left: 30%;
}

.form-horizontal .control-group:after {
  clear: both;
  content: "";
  display: table;
}

.item-post h2 {
  clear: both;
  font-size: 22px;
  margin: 26px 0 16px 30%;
}

body.item-post .form-horizontal .pblbt {
  float: none;
  margin-left: 0;
  text-align: center;
  width: 100%;
}

/* Login page only — the shared .form-horizontal label/controls float
   layout above stays untouched everywhere else (registration, item post). */
body.login .form-container {
  margin: 48px auto;
  max-width: 440px;
}

body.login .form-horizontal .control-label {
  float: none;
  font-size: 13px;
  padding-right: 0;
  text-align: left;
  width: auto;
}

body.login .form-horizontal .controls {
  float: none;
  width: auto;
}

body.login .control-group.remember {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 22px;
}

body.login .control-group.remember .checkbox {
  align-items: center;
  display: flex;
  gap: 8px;
}

body.login .control-group.remember .checkbox input {
  accent-color: var(--book-teal);
  height: 16px;
  margin: 0;
  width: 16px;
}

body.login .control-group.remember label {
  color: var(--book-ink);
  font-weight: 700;
  margin: 0;
}

body.login .control-group.remember .lg {
  color: var(--book-teal);
  font-size: 13px;
  font-weight: 700;
}

body.login .form-horizontal .actions,
body.login .form-horizontal .pblbt,
body.login .form-horizontal .recpt {
  margin-left: 0;
}

body.login .control-group.butt {
  margin-top: 6px;
}

body.login .control-group.butt .btn {
  min-height: 46px;
  width: 100%;
}

body.login .control-group.act {
  border-top: 1px solid var(--book-line);
  margin-top: 22px;
  padding-top: 18px;
  text-align: center;
}

body.login .control-group.act .rg {
  color: var(--book-teal);
  font-weight: 700;
}

.photos_div,
.qq-upload-list {
  clear: both;
}

.isbn-lookup .controls {
  position: relative;
}

.control-group-negotiable .controls {
  align-items: center;
  display: flex;
  gap: 8px;
  min-height: 40px;
}

.control-group-negotiable input[type="checkbox"] {
  accent-color: var(--book-teal);
  height: 18px;
  margin: 0;
  width: 18px;
}

.control-group-negotiable .negotiable-inline-label {
  color: var(--book-muted);
  font-weight: 700;
  margin: 0;
}

/* The "Negotiable" and "Zustand" fields already have dedicated controls
   above (next to Price, under Description); hide osClass's generic
   auto-rendered duplicates of the same meta fields (injected into
   #plugin-hook via AJAX on category change). */
.plugin-hook-data .meta[data-slug="negotiable"],
.plugin-hook-data .meta[data-slug="condition"] {
  display: none;
}

.control-group-shipping .controls {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.shipping-mode-toggle {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.shipping-mode-option {
  align-items: center;
  background: rgba(255,255,255,0.6);
  border: 1px solid var(--book-line);
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.shipping-mode-option input {
  accent-color: var(--book-teal);
  margin: 0;
}

.shipping-mode-option i {
  color: var(--book-muted);
  font-size: 16px;
  transition: color 0.15s ease;
}

.shipping-mode-option span {
  font-weight: 700;
}

.shipping-mode-option.is-active {
  background: rgba(30,105,104,0.12);
  border-color: var(--book-teal);
  color: var(--book-teal);
}

.shipping-mode-option.is-active i {
  color: var(--book-teal);
}

.shipping-countries-panel {
  background: rgba(255,255,255,0.55);
  border: 1px solid var(--book-line);
  border-radius: 12px;
  display: none;
  padding: 14px;
}

.shipping-countries-panel.is-open {
  display: block;
}

.shipping-countries-panel-head {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.shipping-countries-panel-title {
  color: var(--book-ink);
  font-weight: 800;
}

.shipping-countries-panel-close {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: var(--book-muted);
  cursor: pointer;
  display: flex;
  font-size: 20px;
  height: 26px;
  justify-content: center;
  line-height: 1;
  padding: 0;
  width: 26px;
}

.shipping-countries-panel-close:hover {
  background: rgba(23,25,29,0.08);
  color: var(--book-ink);
}

.shipping-country-search {
  border: 1px solid var(--book-line);
  border-radius: 8px;
  box-sizing: border-box;
  margin-bottom: 10px;
  padding: 9px 12px;
  width: 100%;
}

.shipping-country-list {
  display: grid;
  gap: 4px 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-height: 240px;
  overflow-y: auto;
}

.shipping-country-item {
  align-items: center;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  font-size: 13px;
  gap: 8px;
  padding: 5px 6px;
}

.shipping-country-item:hover {
  background: rgba(30,105,104,0.08);
}

.shipping-country-item input {
  accent-color: var(--book-teal);
  margin: 0;
}

.shipping-country-empty {
  color: var(--book-muted);
  font-size: 13px;
  padding: 6px;
}

.control-label .required {
  color: var(--book-orange);
}

.field-hint {
  color: var(--book-muted);
  font-size: 12px;
  margin: 6px 0 0;
}

.isbn-lookup-status {
  color: var(--book-muted);
  display: block;
  font-size: 13px;
  min-height: 18px;
}

.isbn-lookup-status[data-state="error"] {
  color: #b42318;
}

.isbn-lookup-status[data-state="success"] {
  color: var(--book-teal);
}

.isbn-lookup-results {
  background: #fff;
  border: 1px solid var(--book-line);
  border-radius: 8px;
  box-shadow: 0 14px 30px rgba(32,36,42,0.14);
  left: 0;
  max-height: 260px;
  overflow: auto;
  position: absolute;
  top: 58px;
  width: 100%;
  z-index: 20;
}

.isbn-lookup-result,
.isbn-lookup-result:hover,
.isbn-lookup-result:focus {
  background: #fff;
  border: 0;
  border-bottom: 1px solid var(--book-line);
  border-radius: 0;
  box-shadow: none;
  color: var(--book-ink);
  display: block;
  font-size: 14px;
  line-height: 18px;
  min-height: 0;
  padding: 10px 12px;
  text-align: left;
  width: 100%;
}

.isbn-lookup-result:hover,
.isbn-lookup-result:focus {
  background: rgba(30,105,104,0.08);
}

.isbn-lookup-result strong,
.isbn-lookup-result span {
  display: block;
}

.isbn-lookup-result span {
  color: var(--book-muted);
  font-size: 12px;
  margin-top: 2px;
}

.photo-upload-section {
  margin: 28px 0;
}

.photo-upload-section h2 {
  margin-bottom: 4px;
}

.photo-upload-subtitle {
  color: var(--book-muted);
  font-size: 14px;
  margin: 0 0 20px;
}

.photo-upload-label {
  align-items: center;
  display: flex;
  font-weight: 800;
  gap: 8px;
  margin-bottom: 10px;
}

.photo-upload-label .required {
  color: var(--book-orange);
}

.photo-upload-label i {
  color: var(--book-muted);
}

/* The listing's photos (inc/photo-upload-helpers.php, js/photo-upload.js):
   square tiles, the first one — the cover — twice the size, and a tile to
   add more. */
.photo-uploader {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
}

.photo-uploader .photo-uploader-list {
  display: contents;
  list-style: none;
  margin: 0;
  padding: 0;
}

.photo-uploader .photo-uploader-list li {
  aspect-ratio: 1;
  background: #f1ede7;
  border: 1px solid var(--book-line);
  border-radius: 14px;
  list-style: none;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: relative;
}

.photo-uploader .photo-uploader-list li:first-child {
  grid-column: span 2;
  grid-row: span 2;
}

/* "Cover" on the first photo. */
.photo-uploader .photo-uploader-list li:first-child::after {
  background: rgba(23,25,29,0.6);
  border-radius: 999px;
  bottom: 8px;
  color: #fff;
  content: var(--cover-label, '');
  font-size: 11px;
  font-weight: 800;
  left: 8px;
  padding: 3px 9px;
  position: absolute;
}

.photo-uploader .photo-uploader-list .ajax_preview_img,
.photo-uploader .photo-uploader-list .ajax_preview_img img {
  display: block;
  height: 100%;
  width: 100%;
}

.photo-uploader .photo-uploader-list .ajax_preview_img img {
  background-color: #f1ede7;
  max-height: none;
  max-width: none;
  object-fit: contain;
}

.photo-uploader .photo-uploader-list .qq-upload-file {
  display: none;
}

.photo-uploader .photo-uploader-list .qq-upload-delete {
  align-items: center;
  background: rgba(23,25,29,0.6);
  border-radius: 50%;
  color: #fff;
  display: flex;
  font-size: 12px;
  height: 28px;
  justify-content: center;
  position: absolute;
  right: 6px;
  top: 6px;
  width: 28px;
  z-index: 2;
}

.photo-uploader .photo-uploader-list .qq-upload-move {
  align-items: center;
  background: rgba(255,255,255,0.85);
  border-radius: 50%;
  color: var(--book-ink);
  cursor: grab;
  display: flex;
  font-size: 11px;
  height: 26px;
  justify-content: center;
  left: 6px;
  position: absolute;
  top: 6px;
  width: 26px;
  z-index: 2;
}

.photo-uploader .photo-uploader-list li.is-uploading img {
  opacity: 0.45;
}

.photo-uploader-spinner {
  align-items: center;
  color: var(--book-teal);
  display: flex;
  font-size: 24px;
  inset: 0;
  justify-content: center;
  position: absolute;
}

.photo-uploader .photo-uploader-list li.ui-sortable-placeholder {
  background: rgba(30,105,104,0.08);
  border: 2px dashed rgba(30,105,104,0.4);
  visibility: visible !important;
}

/* Adding: a dashed tile — the whole area while there's no photo yet. */
.photo-uploader-add {
  align-items: center;
  aspect-ratio: 1;
  background: rgba(255,255,255,0.55);
  border: 2px dashed rgba(30,105,104,0.35);
  border-radius: 14px;
  color: var(--book-teal);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
  margin: 0;
  padding: 10px;
  position: relative;
  text-align: center;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.photo-uploader-add:hover,
.photo-uploader.is-dragover .photo-uploader-add {
  background: rgba(30,105,104,0.08);
  border-color: var(--book-teal);
}

.photo-uploader-add input {
  height: 1px;
  opacity: 0;
  position: absolute;
  width: 1px;
}

.photo-uploader-add-icon {
  align-items: center;
  background: var(--book-teal);
  border-radius: 50%;
  color: #fff;
  display: flex;
  font-size: 16px;
  height: 40px;
  justify-content: center;
  width: 40px;
}

.photo-uploader-add strong {
  font-size: 13px;
  font-weight: 900;
}

.photo-uploader-hint {
  color: var(--book-muted);
  display: none;
  font-size: 12px;
}

.photo-uploader:not(.has-photos) .photo-uploader-add {
  aspect-ratio: auto;
  grid-column: 1 / -1;
  min-height: 150px;
}

.photo-uploader:not(.has-photos) .photo-uploader-hint {
  display: block;
}

.photo-uploader.is-full .photo-uploader-add {
  display: none;
}

.photo-uploader-error {
  color: var(--book-error);
  font-size: 13px;
  font-weight: 700;
  grid-column: 1 / -1;
  margin: 0;
}

.photo-uploader-error[hidden] {
  display: none;
}

#error_list,
.error_list {
  background: rgba(255,255,255,0.84);
  border: 1px solid var(--book-line);
  border-radius: 10px;
  color: var(--book-ink);
  margin: 0 0 16px;
  padding: 12px 14px;
}

@keyframes second_shelf-flash-in {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.flashmessage {
  align-items: center;
  animation: second_shelf-flash-in 0.25s ease;
  background: var(--book-panel-strong);
  border-left: 4px solid var(--book-teal);
  border-radius: 12px;
  box-shadow: var(--book-shadow);
  color: var(--book-ink);
  display: flex;
  font-weight: 700;
  gap: 12px;
  padding: 12px 14px;
  pointer-events: auto;
}

.flashmessage-error {
  border-left-color: var(--book-error);
}

.flashmessage-warning {
  border-left-color: var(--book-orange);
}

.flashmessage-info {
  border-left-color: var(--book-blue);
}

.second_shelf-flash-icon {
  color: var(--book-teal);
  flex-shrink: 0;
  font-size: 18px;
  order: 1;
}

.flashmessage-error .second_shelf-flash-icon {
  color: var(--book-error);
}

.flashmessage-warning .second_shelf-flash-icon {
  color: var(--book-orange);
}

.flashmessage-info .second_shelf-flash-icon {
  color: var(--book-blue);
}

.second_shelf-flash-text {
  order: 2;
}

.flashmessage .ico-close {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: var(--book-muted);
  cursor: pointer;
  display: inline-flex;
  flex-shrink: 0;
  font-family: inherit;
  font-size: 13px;
  height: 26px;
  justify-content: center;
  margin-left: auto;
  order: 3;
  padding: 0;
  width: 26px;
}

.flashmessage .ico-close:hover {
  background: var(--book-line);
  color: var(--book-ink);
}

.breadcrumb {
  color: var(--book-muted);
  font-size: 13px;
  margin-bottom: 12px;
}

.paginate {
  margin-top: 20px;
}

.paginate a,
.paginate span {
  background: rgba(255,255,255,0.72);
  border-radius: 8px;
  color: var(--book-ink);
  display: inline-block;
  margin-right: 4px;
  padding: 8px 11px;
}

.paginate a {
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.paginate a:hover {
  background: var(--book-panel-strong);
  box-shadow: var(--book-shadow);
  transform: translateY(-2px);
}

.home-latest-paginate {
  align-items: center;
  display: flex;
  justify-content: center;
}

.home-latest-page-indicator {
  background: transparent;
  color: var(--book-muted);
  font-weight: 700;
}

.item-detail-sold-badge {
  align-items: center;
  background: var(--book-ink);
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  font-size: 13px;
  font-weight: 800;
  gap: 6px;
  letter-spacing: 0.02em;
  margin-bottom: 14px;
  padding: 6px 14px;
  text-transform: uppercase;
}

.item-detail-price-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.item-detail-price {
  color: var(--book-orange);
  font-size: 30px;
  font-weight: 900;
  margin-bottom: 0;
}

.item-detail-negotiable {
  background: rgba(30,105,104,0.12);
  border-radius: 999px;
  color: var(--book-teal);
  font-size: 13px;
  font-weight: 800;
  padding: 6px 14px;
}

.item-detail-negotiable-fixed {
  background: rgba(23,25,29,0.06);
  color: var(--book-muted);
}

/*
 * Condition pill — second_shelf_render_condition_badge() in functions.php.
 * Used both on item.php (its own row, right under the price) and on
 * "Meine Bücher" cards. Color tier tracks how used the book is: teal (best)
 * down through neutral for anything that doesn't match a current choice.
 */
.second_shelf-condition-badge {
  border-radius: 999px;
  display: inline-block;
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 20px;
  padding: 6px 14px;
}

.my-book-info .second_shelf-condition-badge {
  font-size: 12px;
  margin-bottom: 0;
  padding: 4px 11px;
  width: fit-content;
}

.second_shelf-condition-new {
  background: rgba(30,105,104,0.12);
  color: var(--book-teal);
}

.second_shelf-condition-like-new {
  background: rgba(61,114,196,0.12);
  color: var(--book-blue);
}

.second_shelf-condition-good {
  background: rgba(215,111,53,0.12);
  color: var(--book-orange);
}

.second_shelf-condition-acceptable,
.second_shelf-condition-other {
  background: rgba(23,25,29,0.06);
  color: var(--book-muted);
}

.item-detail-shipping {
  align-items: center;
  color: var(--book-muted);
  display: flex;
  font-size: 14px;
  gap: 8px;
  margin-bottom: 20px;
}

.item-detail-shipping i {
  color: var(--book-teal);
}

.item-photos {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) 380px;
  margin-bottom: 24px;
}

.item-photos .main-photo {
  background: linear-gradient(145deg, rgba(255,255,255,0.48), rgba(226,222,218,0.52));
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 360px;
  overflow: hidden;
}

.item-photos .main-photo img {
  border-radius: 10px;
  height: 100%;
  max-height: 480px;
  object-fit: contain;
  width: 100%;
}

.item-photos .thumbs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(2, 85px);
  gap: 8px;
}

.item-photos .thumbs a {
  display: block;
  height: 85px;
  width: 100%;
}

.item-photos .thumbs a.fancybox-thumb-primary {
  display: none;
}

.item-photos .thumbs img {
  border-radius: 8px;
  height: 100%;
  background-color: #f1ede7;
  object-fit: contain;
  width: 100%;
}

.item-detail-title {
  font-size: 30px;
  font-weight: 900;
  line-height: 1.2;
  margin: 0 0 12px;
}

.item-detail-seller-card {
  align-items: center;
  background: var(--book-panel-strong);
  border: 1px solid var(--book-line);
  border-radius: 16px;
  box-shadow: var(--book-shadow);
  color: inherit;
  display: flex;
  gap: 14px;
  margin: 20px 0;
  padding: 14px 16px;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.item-detail-seller-card:hover {
  border-color: var(--book-teal);
  transform: translateY(-1px);
}

.item-detail-seller-avatar {
  border-radius: 50%;
  flex-shrink: 0;
  height: 52px;
  object-fit: cover;
  width: 52px;
}

.item-detail-seller-info {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.item-detail-seller-label {
  color: var(--book-muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.item-detail-seller-name {
  color: var(--book-ink);
  font-size: 16px;
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item-detail-seller-rating {
  align-items: center;
  display: flex;
  gap: 6px;
}

/*
 * Shared star-rating icon color (second_shelf_render_stars() in
 * profile-helpers.php) — lives here rather than profile.css since it's
 * only conditionally loaded on the profile page, and this same markup now
 * also renders on item.php's seller card, which doesn't load that file.
 */
.second_shelf-star {
  color: var(--book-teal);
}

.item-detail-seller-rating .second_shelf-star {
  font-size: 12px;
}

.item-detail-seller-rating-count,
.item-detail-seller-rating-empty {
  color: var(--book-muted);
  font-size: 12px;
}

.item-detail-seller-card > i {
  color: var(--book-muted);
  flex-shrink: 0;
}

.item-detail-actions {
  display: flex;
  gap: 12px;
  margin: 24px 0;
}

.item-buy-btn {
  background: var(--book-ink);
}

.item-buy-btn:disabled {
  background: var(--book-line);
  color: var(--book-muted);
  cursor: not-allowed;
}

.item-footer-note {
  color: var(--book-muted);
  font-size: 13px;
  margin-top: 40px;
}

.item-footer-note h2 {
  font-size: 15px;
}

#item-content .price {
  color: var(--book-orange);
  font-size: 26px;
  font-weight: 900;
}

.admin-options {
  display: block;
  margin-top: 12px;
}

.admin-options a {
  display: inline-block;
  margin-right: 8px;
}

.fixed-close {
  display: none;
}

footer {
  background: transparent;
  color: var(--book-muted);
  padding: 20px 15px 34px;
}

footer .box > a,
footer .copy,
footer .language,
footer .language a,
footer .copy a {
  color: var(--book-muted);
  margin-right: 12px;
}

/*
 * Shared confirm dialog (delete listing/conversation, leave bookclub, ...)
 * — see [data-confirm] handling in global.js. Sits above everything,
 * including the chat context menu (z-index 30) and its own kind of
 * floating panels.
 */
.second_shelf-confirm-modal {
  align-items: center;
  background: rgba(23,25,29,0.42);
  backdrop-filter: blur(2px);
  display: flex;
  inset: 0;
  justify-content: center;
  position: fixed;
  z-index: 100;
}

.second_shelf-confirm-modal[hidden] {
  display: none;
}

.second_shelf-confirm-modal-box {
  background: var(--book-panel-strong);
  border-radius: 18px;
  box-shadow: var(--book-shadow);
  max-width: 360px;
  padding: 26px;
  width: calc(100% - 48px);
}

.second_shelf-confirm-modal-message {
  color: var(--book-ink);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  margin: 0 0 22px;
}

.second_shelf-confirm-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.second_shelf-confirm-modal-actions button {
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  padding: 11px 20px;
}

.second_shelf-confirm-cancel {
  background: var(--book-line);
  color: var(--book-ink);
}

.second_shelf-confirm-cancel:hover {
  background: rgba(27,29,34,0.16);
}

.second_shelf-confirm-ok {
  background: var(--book-danger);
  color: #fff;
}

.second_shelf-confirm-ok:hover {
  background: #a03e4e;
}

.second_shelf-report-modal-box {
  max-width: 400px;
}

.second_shelf-report-modal-title {
  align-items: center;
  color: var(--book-ink);
  display: flex;
  font-size: 19px;
  font-weight: 900;
  gap: 10px;
  margin: 0 0 18px;
}

.second_shelf-report-modal-title i {
  color: var(--book-muted);
}

.second_shelf-report-modal-label {
  color: var(--book-muted);
  display: block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.4px;
  margin: 0 0 6px;
  text-transform: uppercase;
}

.second_shelf-report-reason,
.second_shelf-report-message {
  margin-bottom: 16px;
  width: 100%;
}

.second_shelf-report-submit {
  background: var(--book-ink);
  color: #fff;
}

.second_shelf-report-submit:hover {
  background: #000;
}

.second_shelf-report-modal-success {
  color: var(--book-ink);
  padding: 12px 4px;
  text-align: center;
}

.second_shelf-report-modal-success i {
  color: var(--book-teal);
  font-size: 38px;
}

.second_shelf-report-modal-success p {
  font-size: 15px;
  font-weight: 800;
  margin: 14px 0 0;
}

/*
 * Password show/hide toggle (added by global.js to every password field).
 * A round eye button sits inside the field on the right; toggling makes it
 * "blink" and gives the field a faint teal tint while the password is
 * readable, so it's obvious at a glance that it's currently visible.
 */
.second_shelf-password-field {
  display: block;
  position: relative;
}

.second_shelf-password-field input {
  padding-right: 50px;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.second_shelf-password-field.is-revealed input {
  background: rgba(30,105,104,0.06);
  border-color: rgba(30,105,104,0.45);
  letter-spacing: 0.02em;
}

.second_shelf-password-toggle {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: var(--book-muted);
  cursor: pointer;
  display: flex;
  font-size: 15px;
  height: 34px;
  justify-content: center;
  padding: 0;
  position: absolute;
  right: 6px;
  top: 5px;
  transition: background 0.18s ease, color 0.18s ease;
  width: 34px;
}

.second_shelf-password-toggle:hover,
.second_shelf-password-toggle:focus-visible {
  background: rgba(30,105,104,0.1);
  color: var(--book-teal);
  outline: 0;
}

.second_shelf-password-field.is-revealed .second_shelf-password-toggle {
  background: rgba(30,105,104,0.12);
  color: var(--book-teal);
}

.second_shelf-password-toggle.is-blinking i {
  animation: second_shelf-eye-blink 0.28s ease;
}

@keyframes second_shelf-eye-blink {
  0% { transform: scaleY(1); }
  45% { transform: scaleY(0.1); }
  100% { transform: scaleY(1); }
}

/*
 * Bottom tab bar (bottom-nav.php) — phones and tablets only. A floating,
 * frosted bar with the five main destinations; "List a book" is the raised
 * round button in the middle. Replaces the left sidebar on those screens.
 */
.bottom-nav,
.account-menu-mobile {
  display: none;
}

@media screen and (max-width: 980px) {
  .app-sidebar {
    display: none;
  }

  .account-menu-mobile {
    display: block;
  }

  .account-menu {
    min-width: 210px;
  }

  .account-menu-logout {
    border-top: 1px solid var(--book-line);
    color: var(--book-red) !important;
  }

  body {
    padding-bottom: calc(92px + env(safe-area-inset-bottom));
  }

  body.chat-page-embed {
    padding-bottom: 0;
  }

  .bottom-nav {
    align-items: flex-end;
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    backdrop-filter: blur(18px) saturate(1.4);
    background: rgba(255,255,255,0.86);
    border: 1px solid rgba(255,255,255,0.9);
    border-radius: 24px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    box-shadow: 0 12px 36px rgba(40,36,31,0.18);
    display: flex;
    justify-content: space-around;
    left: 10px;
    padding: 6px 6px 8px;
    position: fixed;
    right: 10px;
    z-index: 85;
  }

  body.chat-page-embed .bottom-nav {
    display: none;
  }

  .bottom-nav-item {
    align-items: center;
    border-radius: 16px;
    color: var(--book-muted);
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    padding: 6px 2px 2px;
    position: relative;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.2s ease;
  }

  .bottom-nav-item:hover {
    color: var(--book-ink);
  }

  .bottom-nav-icon {
    align-items: center;
    border-radius: 999px;
    display: flex;
    font-size: 18px;
    height: 30px;
    justify-content: center;
    position: relative;
    transition: background 0.25s ease, transform 0.25s cubic-bezier(0.34, 1.5, 0.5, 1);
    width: 52px;
  }

  .bottom-nav-label {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.01em;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .bottom-nav-item.is-active {
    color: var(--book-teal);
  }

  .bottom-nav-item.is-active .bottom-nav-icon {
    background: rgba(30,105,104,0.12);
  }

  .bottom-nav-item:active .bottom-nav-icon {
    transform: scale(0.9);
  }

  .bottom-nav-badge {
    background: var(--book-red);
    border: 2px solid #fff;
    border-radius: 999px;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    min-width: 18px;
    padding: 2px 4px;
    position: absolute;
    right: 6px;
    text-align: center;
    top: -4px;
  }

  /* The raised "List a book" button. */
  .bottom-nav-item.is-primary .bottom-nav-icon {
    background: linear-gradient(140deg, var(--book-teal), var(--book-midnight));
    box-shadow: 0 8px 20px rgba(25,25,112,0.3), 0 0 0 4px rgba(255,255,255,0.9);
    color: #fff;
    font-size: 20px;
    height: 50px;
    margin-top: -24px;
    width: 50px;
  }

  .bottom-nav-item.is-primary.is-active {
    color: var(--book-teal);
  }
}

/*
 * ISBN barcode scanner on the "publish a listing" form (item-post.php):
 * a "Scan" button inside the ISBN field and a full-screen camera view with
 * a framed target, corner marks and a sweeping laser line.
 */
.isbn-input-row {
  align-items: stretch;
  display: flex;
  margin-bottom: 16px;
}

/* Field and button form one control: the button is docked to the field's
   right edge, same height and border as every other input on the form. */
.isbn-input-row input[type="text"] {
  border-radius: 8px 0 0 8px;
  flex: 1;
  margin: 0;
  min-width: 0;
}

.isbn-input-row:focus-within .isbn-scan-btn {
  border-color: var(--book-teal);
}

.isbn-scan-btn {
  align-items: center;
  background: rgba(30,105,104,0.08);
  border: 1px solid var(--book-line);
  border-radius: 8px;
  color: var(--book-teal);
  cursor: pointer;
  display: inline-flex;
  flex-shrink: 0;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  gap: 8px;
  justify-content: center;
  padding: 0 16px;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.isbn-input-row .isbn-scan-btn {
  border-left: 0;
  border-radius: 0 8px 8px 0;
}

.isbn-scan-btn i {
  font-size: 16px;
}

.isbn-scan-btn[hidden] {
  display: none;
}

.isbn-scan-btn:hover,
.isbn-scan-btn:focus-visible {
  background: var(--book-teal);
  color: #fff;
}

/* No scan button (no camera available): the field keeps its own corners. */
.isbn-input-row:has(.isbn-scan-btn[hidden]) input[type="text"] {
  border-radius: 8px;
}

@media (max-width: 480px) {
  .isbn-input-row .isbn-scan-btn span {
    display: none;
  }

  .isbn-input-row .isbn-scan-btn {
    padding: 0 14px;
  }
}

html.isbn-scanner-open,
html.isbn-scanner-open body {
  overflow: hidden;
}

.isbn-scanner {
  align-items: center;
  background: #0d0e10;
  display: flex;
  flex-direction: column;
  inset: 0;
  justify-content: center;
  opacity: 0;
  position: fixed;
  transition: opacity 0.2s ease;
  z-index: 200;
}

.isbn-scanner[hidden] {
  display: none;
}

.isbn-scanner.is-open {
  opacity: 1;
}

.isbn-scanner-stage {
  inset: 0;
  overflow: hidden;
  position: absolute;
}

.isbn-scanner-video {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

/* The target: everything around it is dimmed by the huge box-shadow. */
.isbn-scanner-frame {
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  box-shadow: 0 0 0 200vmax rgba(13,14,16,0.6);
  left: 50%;
  max-width: 420px;
  position: absolute;
  top: 45%;
  transform: translate(-50%, -50%);
  width: 78%;
}

.isbn-scanner-frame:before,
.isbn-scanner-frame:after {
  border: 4px solid #fff;
  border-radius: 18px;
  content: "";
  inset: -2px;
  position: absolute;
  -webkit-mask: linear-gradient(#000 0 0) top left / 34px 34px no-repeat, linear-gradient(#000 0 0) top right / 34px 34px no-repeat, linear-gradient(#000 0 0) bottom left / 34px 34px no-repeat, linear-gradient(#000 0 0) bottom right / 34px 34px no-repeat;
  mask: linear-gradient(#000 0 0) top left / 34px 34px no-repeat, linear-gradient(#000 0 0) top right / 34px 34px no-repeat, linear-gradient(#000 0 0) bottom left / 34px 34px no-repeat, linear-gradient(#000 0 0) bottom right / 34px 34px no-repeat;
}

.isbn-scanner-frame:after {
  display: none;
}

.isbn-scanner-laser {
  animation: isbn-laser 1.8s ease-in-out infinite;
  background: linear-gradient(90deg, transparent, #ff4d5a 15%, #ff4d5a 85%, transparent);
  box-shadow: 0 0 12px 2px rgba(255,77,90,0.7);
  height: 2px;
  left: 8%;
  position: absolute;
  right: 8%;
  top: 50%;
}

@keyframes isbn-laser {
  0%, 100% { transform: translateY(-38px); opacity: 0.6; }
  50% { transform: translateY(38px); opacity: 1; }
}

.isbn-scanner-hint {
  background: rgba(13,14,16,0.6);
  border-radius: 999px;
  bottom: calc(40px + env(safe-area-inset-bottom));
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  left: 50%;
  margin: 0;
  max-width: calc(100% - 32px);
  padding: 10px 18px;
  position: absolute;
  text-align: center;
  transform: translateX(-50%);
  width: max-content;
}

.isbn-scanner-hint.is-error {
  background: rgba(224,48,63,0.92);
}

.isbn-scanner-close {
  align-items: center;
  background: rgba(255,255,255,0.16);
  border: 0;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  display: flex;
  font-size: 18px;
  height: 44px;
  justify-content: center;
  position: absolute;
  right: 16px;
  top: calc(16px + env(safe-area-inset-top));
  width: 44px;
}

@media (prefers-reduced-motion: reduce) {
  .isbn-scanner-laser {
    animation: none;
  }
}

/* Laptop webcams and front cameras: mirrored preview, like a mirror. */
.isbn-scanner.is-mirrored .isbn-scanner-video {
  transform: scaleX(-1);
}

.isbn-scanner-switch {
  align-items: center;
  background: rgba(255,255,255,0.16);
  border: 0;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  display: flex;
  font-size: 16px;
  height: 44px;
  justify-content: center;
  left: 16px;
  position: absolute;
  top: calc(16px + env(safe-area-inset-top));
  width: 44px;
}

.isbn-scanner-switch[hidden] {
  display: none;
}

/* On wide screens the target sits a bit higher and larger, since a laptop
   webcam sees the book closer to the middle of the picture. */
@media (min-width: 981px) {
  .isbn-scanner-frame {
    max-width: 520px;
    top: 42%;
    width: 46%;
  }
}

/* ================================================================== */
/* Book page (item.php): the book on a stage, a buy box beside it,     */
/* "About this book" below.                                            */
/* ================================================================== */

.item-hero {
  align-items: start;
  display: grid;
  gap: 32px;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 410px);
  margin-bottom: 32px;
}

/* --- The stage: the cover, lit by a blurred copy of itself --- */
.item-gallery {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.item-stage {
  align-items: center;
  background: var(--book-panel);
  border-radius: 26px;
  display: flex;
  isolation: isolate;
  justify-content: center;
  min-height: 460px;
  overflow: hidden;
  padding: 44px 32px;
  position: relative;
}

.item-stage::before {
  background: var(--cover) center / cover no-repeat;
  content: '';
  filter: blur(46px) saturate(1.5);
  inset: -60px;
  opacity: 0.55;
  position: absolute;
  z-index: -2;
}

.item-stage::after {
  background: radial-gradient(ellipse at 50% 40%, rgba(255,255,255,0.35), transparent 65%);
  content: '';
  inset: 0;
  position: absolute;
  z-index: -1;
}

.item-stage .main-photo {
  display: inline-block;
  line-height: 0;
  max-width: 100%;
  perspective: 1400px;
  position: relative;
}

.item-stage-cover {
  border-radius: 4px 10px 10px 4px;
  box-shadow: 0 34px 60px -22px rgba(25,18,10,0.55), 0 12px 24px rgba(25,18,10,0.18);
  max-height: 440px;
  max-width: 100%;
  object-fit: contain;
  transform: rotateY(-9deg);
  transform-origin: left center;
  transition: transform 0.45s cubic-bezier(.2,.8,.2,1), box-shadow 0.45s ease;
}

/* The spine: a soft fold along the left edge of the cover. */
.item-stage .main-photo::after {
  background: linear-gradient(90deg, rgba(0,0,0,0.28), rgba(255,255,255,0.18) 40%, transparent);
  border-radius: 4px 0 0 4px;
  bottom: 0;
  content: '';
  left: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  transform: rotateY(-9deg);
  transform-origin: left center;
  transition: transform 0.45s cubic-bezier(.2,.8,.2,1);
  width: 14px;
}

.item-stage .main-photo:hover .item-stage-cover,
.item-stage .main-photo:hover::after {
  transform: rotateY(0) scale(1.02);
}

.item-stage .main-photo:hover .item-stage-cover {
  box-shadow: 0 40px 70px -24px rgba(25,18,10,0.6), 0 14px 28px rgba(25,18,10,0.2);
}

.item-stage-zoom {
  align-items: center;
  background: rgba(255,255,255,0.85);
  border-radius: 50%;
  bottom: 18px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
  color: var(--book-ink);
  display: flex;
  height: 40px;
  justify-content: center;
  pointer-events: none;
  position: absolute;
  right: 18px;
  width: 40px;
}

.item-stage-ribbon {
  align-items: center;
  background: var(--book-ink);
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(0,0,0,0.2);
  color: #fff;
  display: inline-flex;
  font-size: 13px;
  font-weight: 800;
  gap: 6px;
  left: 18px;
  letter-spacing: 0.04em;
  padding: 7px 14px;
  position: absolute;
  text-transform: uppercase;
  top: 18px;
  z-index: 1;
}

.item-stage-ribbon.is-reserved {
  background: var(--book-teal);
}

/* No photo: a cover of its own, like on the wish shelf. */
.item-stage.is-empty {
  background: linear-gradient(160deg, rgba(255,255,255,0.6), rgba(226,222,218,0.6));
}

.item-stage-placeholder {
  align-items: center;
  aspect-ratio: 2 / 3;
  background:
    linear-gradient(160deg, rgba(255,255,255,0.2), rgba(0,0,0,0.22)),
    var(--spine, var(--book-teal));
  border-radius: 4px 10px 10px 4px;
  box-shadow: inset 9px 0 0 rgba(0,0,0,0.18), 0 30px 50px -20px rgba(25,18,10,0.5);
  color: #fff;
  display: flex;
  font-family: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  font-size: 22px;
  font-weight: 700;
  justify-content: center;
  line-height: 1.2;
  padding: 28px 22px 28px 30px;
  text-align: center;
  width: min(240px, 70%);
}

/* Thumbnails: hover shows one on the stage, a click opens the gallery. */
.item-thumbs {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 2px 2px 6px;
  scrollbar-width: thin;
}

.item-thumbs.is-single {
  display: none;
}

.item-thumb {
  border: 2px solid transparent;
  border-radius: 10px;
  flex: 0 0 auto;
  line-height: 0;
  opacity: 0.7;
  overflow: hidden;
  transition: border-color 0.15s ease, opacity 0.15s ease, transform 0.15s ease;
}

.item-thumb img {
  height: 84px;
  background-color: #f1ede7;
  object-fit: contain;
  width: 62px;
}

.item-thumb:hover,
.item-thumb.is-active {
  border-color: var(--book-orange);
  opacity: 1;
}

.item-thumb:hover {
  transform: translateY(-2px);
}

/* --- The buy box --- */
.item-buybox {
  background: var(--book-panel-strong);
  border: 1px solid var(--book-line);
  border-radius: 26px;
  box-shadow: var(--book-shadow);
  display: grid;
  gap: 16px;
  padding: 26px;
  position: sticky;
  top: 24px;
}

.item-category-chip {
  align-items: center;
  color: var(--book-muted);
  display: inline-flex;
  font-size: 12px;
  font-weight: 800;
  gap: 6px;
  justify-self: start;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
}

.item-category-chip i {
  color: var(--book-orange);
}

.item-category-chip:hover {
  color: var(--book-teal);
}

.item-buybox .item-detail-title {
  font-family: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: -6px 0 0;
  overflow-wrap: anywhere;
}

.item-buybox .item-detail-author {
  margin: -6px 0 0;
}

.item-detail-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.item-detail-chips .second_shelf-condition-badge {
  margin: 0;
}

.item-detail-chips .trade-chip {
  font-size: 13px;
  padding: 6px 12px;
}

/* The price, on a warm card. */
.item-price-card {
  background: linear-gradient(135deg, rgba(215,111,53,0.1), rgba(215,111,53,0.04));
  border: 1px solid rgba(215,111,53,0.2);
  border-radius: 18px;
  display: grid;
  gap: 8px;
  padding: 14px 18px;
}

.item-price-card.is-swap {
  background: linear-gradient(135deg, rgba(30,105,104,0.1), rgba(30,105,104,0.04));
  border-color: rgba(30,105,104,0.2);
}

.item-price-card .item-detail-price-row {
  margin: 0;
}

.item-price-card .item-detail-price {
  font-size: 34px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.item-price-card.is-swap .item-detail-price {
  color: var(--book-teal);
}

.item-price-card .item-detail-wants {
  color: var(--book-muted);
  font-size: 14px;
  margin: 0;
}

.item-price-card .item-detail-wants i {
  color: var(--book-teal);
  margin-right: 4px;
}

/* Buttons: buying first and full width, the rest beside each other. */
.item-buybox .item-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
}

.item-buybox .item-detail-actions > .btn,
.item-buybox .item-detail-actions > .item-detail-favorite-btn {
  align-items: center;
  border-radius: 14px;
  display: inline-flex;
  flex: 1 1 auto;
  gap: 8px;
  justify-content: center;
  min-height: 48px;
}

.item-buybox .item-detail-actions > .item-buy-btn {
  flex-basis: 100%;
  font-size: 16px;
  min-height: 54px;
  order: -1;
}

.item-buybox .item-detail-actions > .item-detail-report-btn {
  flex: 0 0 auto;
}

/* Shipping and pickup: quiet lines between two hairlines. */
.item-detail-facts {
  border-bottom: 1px solid var(--book-line);
  border-top: 1px solid var(--book-line);
  display: grid;
  gap: 10px;
  padding: 14px 0;
}

.item-detail-facts:not(:has(*)) {
  display: none;
}

.item-detail-facts .item-detail-shipping,
.item-detail-facts .item-detail-pickup,
.item-detail-facts .item-detail-shipping + .item-detail-pickup {
  margin: 0;
}

.item-buybox .item-detail-seller-card {
  margin: 0;
}

/* --- About this book --- */
.item-about {
  background: var(--book-panel-strong);
  border: 1px solid var(--book-line);
  border-radius: 26px;
  box-shadow: var(--book-shadow);
  display: grid;
  gap: 18px;
  margin-bottom: 36px;
  padding: 26px 30px;
}

.item-about h2 {
  font-family: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  font-size: 24px;
  margin: 0;
}

.item-about .desc {
  font-size: 16px;
  line-height: 1.7;
  max-width: 72ch;
  white-space: pre-line;
}

.item-facts {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  margin: 0;
}

.item-facts div {
  background: rgba(23,25,29,0.04);
  border-radius: 14px;
  padding: 10px 14px;
}

.item-facts dt {
  color: var(--book-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.item-facts dd {
  font-weight: 800;
  margin: 2px 0 0;
  overflow-wrap: anywhere;
}

.item-about #custom_fields .meta {
  display: inline-block;
  margin-right: 16px;
}

/* Tablets and phones: one column, the stage a little smaller. */
@media (max-width: 980px) {
  .item-hero {
    gap: 18px;
    grid-template-columns: minmax(0, 1fr);
  }

  .item-buybox {
    position: static;
  }
}

@media (max-width: 640px) {
  .item-stage {
    border-radius: 20px;
    min-height: 0;
    padding: 30px 20px;
  }

  .item-stage-cover {
    max-height: 340px;
    transform: none;
  }

  .item-stage .main-photo::after {
    transform: none;
  }

  .item-buybox {
    border-radius: 20px;
    padding: 18px;
  }

  .item-buybox .item-detail-title {
    font-size: 26px;
  }

  .item-price-card .item-detail-price {
    font-size: 30px;
  }

  .item-about {
    border-radius: 20px;
    padding: 20px;
  }
}

/* Save and report: two round icons in the buy box's top corner, so the
   buttons below are only what moves the deal on. */
.item-buybox > * {
  min-width: 0;
}

.item-buybox .item-category-chip {
  min-height: 40px;
  padding-right: 96px;
}

.item-buybox .item-detail-actions > .item-detail-favorite-btn,
.item-buybox .item-detail-actions > .item-detail-report-btn {
  align-items: center;
  border-radius: 50%;
  display: flex;
  flex: none;
  height: 40px;
  justify-content: center;
  min-height: 0;
  padding: 0;
  position: absolute;
  top: 22px;
  width: 40px;
}

.item-buybox .item-detail-actions > .item-detail-favorite-btn {
  right: 70px;
}

.item-buybox .item-detail-actions > .item-detail-report-btn {
  right: 22px;
}

.item-buybox .item-detail-favorite-btn .item-detail-favorite-label {
  display: none;
}

/* Phones keep the buttons in a row too (responsive.css stacks the old ones). */
.item-buybox .item-detail-actions {
  flex-direction: row;
}

.item-price-card .item-detail-price {
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 980px) {
  .item-buybox {
    position: relative;
  }
}

@media (max-width: 640px) {
  .item-buybox .item-detail-actions > .item-detail-favorite-btn,
  .item-buybox .item-detail-actions > .item-detail-report-btn {
    top: 14px;
  }

  .item-buybox .item-detail-actions > .item-detail-favorite-btn {
    right: 62px;
  }

  .item-buybox .item-detail-actions > .item-detail-report-btn {
    right: 14px;
  }
}

/* The owner has no report button: the heart takes the corner. */
.item-buybox .item-detail-actions > .item-detail-favorite-btn:last-child {
  right: 22px;
}

.item-stage .main-photo:focus:not(:focus-visible) {
  outline: none;
}

@media (max-width: 640px) {
  .item-buybox .item-detail-actions > .item-detail-favorite-btn:last-child {
    right: 14px;
  }
}

/* The photo fills the stage edge to edge: the stage takes the photo's own
   shape (very tall ones are trimmed to a sensible height), no tilt, no
   frame around it — only a gentle zoom on hover. */
.item-stage:not(.is-empty) {
  display: block;
  min-height: 0;
  padding: 0;
}

.item-stage:not(.is-empty)::after {
  background: linear-gradient(180deg, transparent 70%, rgba(0,0,0,0.18));
  pointer-events: none;
  z-index: 0;
}

.item-stage .main-photo {
  display: block;
  line-height: 0;
  perspective: none;
}

.item-stage .main-photo::after {
  display: none;
}

.item-stage .item-stage-cover,
.item-stage .main-photo:hover .item-stage-cover {
  border-radius: 0;
  box-shadow: none;
  display: block;
  height: auto;
  max-height: 620px;
  max-width: none;
  min-height: 320px;
  object-fit: cover;
  transform: none;
  width: 100%;
}

.item-stage .item-stage-cover {
  transition: transform 0.6s cubic-bezier(.2,.8,.2,1), filter 0.3s ease;
}

.item-stage .main-photo:hover .item-stage-cover {
  transform: scale(1.03);
}

@media (max-width: 640px) {
  .item-stage .item-stage-cover,
  .item-stage .main-photo:hover .item-stage-cover {
    max-height: 460px;
    min-height: 240px;
  }
}

/* If a photo has to be trimmed, keep its top — where a cover's title is. */
.item-stage .item-stage-cover,
.item-stage .main-photo:hover .item-stage-cover {
  min-height: 240px;
  object-position: center top;
}

/* "Condition:" in front of the value, a little quieter than the value. */
.second_shelf-condition-label {
  font-weight: 700;
  opacity: 0.75;
}

/* Book page: the whole photo, never trimmed — it fills the stage's width
   and keeps its shape; if it's taller than the stage allows, it shrinks to
   fit and the cover's blurred light fills the sides. */
.item-stage .item-stage-cover,
.item-stage .main-photo:hover .item-stage-cover {
  min-height: 0;
  object-fit: contain;
  object-position: center;
}

.item-stage:not(.is-empty)::after {
  display: none;
}

/* Owner only, on the book page: views, and those of the last week. */
.item-views-panel {
  align-items: center;
  background: rgba(30,105,104,0.07);
  border-radius: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 0;
  padding: 10px 14px;
}

.item-views-panel-icon {
  align-items: center;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(30,105,104,0.15);
  color: var(--book-teal);
  display: flex;
  flex-shrink: 0;
  height: 34px;
  justify-content: center;
  width: 34px;
}

.item-views-panel-text {
  display: grid;
  line-height: 1.25;
}

.item-views-panel-text strong {
  color: var(--book-ink);
  font-size: 15px;
}

.item-views-panel-recent {
  color: var(--book-teal);
  font-size: 12px;
  font-weight: 700;
}

.item-views-panel-private {
  align-items: center;
  color: var(--book-muted);
  display: inline-flex;
  font-size: 12px;
  font-weight: 700;
  gap: 5px;
  margin-left: auto;
}

/* A price converted into the visitor's currency (currency-helpers.php). */
.price-fx {
  cursor: help;
  white-space: nowrap;
}

.item-price-origin {
  color: var(--book-muted);
  font-size: 12px;
  font-weight: 700;
  margin: 6px 0 0;
}

.item-price-origin i {
  color: var(--book-teal);
  margin-right: 4px;
}

/* Prices fit their place (js/global.js, second_shelf_fit_text): on one
   line, within their box — a long one is set smaller rather than spilling
   over the edge; "…" only as the very last resort. */
.listing-thumb .currency-value,
.item-detail-price,
.my-book-price,
.chat-item-price,
.price-offer-amount,
.wish-arrival-meta .price-fx {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.listing-thumb .currency-value {
  max-width: calc(100% - 20px);
}

.item-detail-price-row > .item-detail-price {
  min-width: 0;
}

.price-offer-tag {
  max-width: 100%;
  min-width: 0;
}

/* No connection on an open page (footer.php, global.js). */
.offline-bar {
  align-items: center;
  background: var(--book-ink);
  border-radius: 999px;
  box-shadow: 0 12px 30px rgba(23,25,29,0.3);
  color: #fff;
  display: flex;
  font-size: 13px;
  font-weight: 800;
  gap: 10px;
  left: 50%;
  max-width: calc(100vw - 24px);
  padding: 10px 18px;
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  transform: translateX(-50%);
  width: max-content;
  z-index: 10200;
}

.offline-bar[hidden] {
  display: none;
}

.offline-bar i {
  color: var(--book-orange);
}