/* ============================================
   MAIN STYLES
   ============================================ */

/* ── CSS Custom Properties ──────────────────────────────── */
:root {
  --black:   #0a0a0a;
  --dark:    #111111;
  --mid:     #1e1e1e;
  --grey-dk: #3a3a3a;
  --grey:    #6b6b6b;
  --grey-lt: #f2f2f2;
  --grey-lt2: #f2f2f2;
  --off-wh:  #f4f4f4;
  --white:   #ffffff;
  --radius:  10px;
  --shadow:  0 0px 10px rgba(0,0,0,0.1);
  --shadow-hover: 0 0px 20px rgba(0,0,0,0.2);
  --transition: 0.2s cubic-bezier(.4,0,.2,1);
}

/* ── Base ───────────────────────────────────────────────── */
@font-face {
  font-family: trackim_font;
  src: url(../trackim_font.ttf);
  font-display: fallback;
}
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: trackim_font, 'Helvetica Neue', Arial, sans-serif;
  background: var(--off-wh);
  color: var(--black);
}

/* ── Header ─────────────────────────────────────────────── */
.main-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--black);
      background: linear-gradient(180deg, #0c0c0c 0%, #292929 100%);

  border-bottom: 1px solid var(--mid);
  width: 100%;
}

/* Update header content to align with body */
.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  max-width: 1000px;        /* Changed from 1040px to match body */
  margin: 0 auto;
}

.header-logo {
  flex-shrink: 0;
}

.header-logo .logo {
  height: 60px;
  width: auto;
  display: block;
}

.header-nav {
  display: flex;
  gap: 12px;
  align-items: center;
}

.header-nav .button {
  font-weight: bold;
  margin: 0;
  float: none;
  display: inline-block;
  padding: 10px 20px;
  background: var(--white);
  color: var(--black);
  border: none;
  cursor: pointer;
  box-shadow: none;
  border: 1px solid #fff;
}

.header-nav .button.off_state {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.18);
  color: var(--grey-lt);
}

.header-nav .button:hover {
  background: var(--grey-lt);
  color: var(--black);
  box-shadow: none;
}

.header-nav .button.off_state:hover {
  background: rgba(255,255,255,0.08);
  color: var(--white);
  border-color: var(--white);
}


h1 .logo {
  max-width: 300px;
  width: 100%;
  padding: 0;
}
h2 {
  display: block;
  padding: 0;
  margin: 0 0 4px 0;
  text-align: left;
  font-size: 24px;
  letter-spacing: 0.4px;
  font-weight: 700;
  color: var(--black);
}

/* Product titles (books/games) styled as h1 for SEO but look like h2 */
h1.product-title {
  display: block;
  padding: 0;
  margin: 0 0 0 0;
  text-align: left;
  font-size: 22px;
  letter-spacing: 0.4px;
  font-weight: 700;
  color: var(--black);
  border: none;
  line-height: normal;
}

.game-title {
    margin-bottom: 10px!important; /* or whatever spacing you need */
}


/* ── Inputs ─────────────────────────────────────────────── */
input {
  border: 1.5px solid #d0d0d0;
  border-radius: 6px;
  font-family: trackim_font, Arial, sans-serif;
  width: 100%;
  max-width: 38%;
  padding: 11px 14px;
  font-size: 18px;
  letter-spacing: 1px;
  background: var(--white);
  color: var(--black);
  outline: none;
}
input:focus {
  border-color: var(--grey-dk);
  box-shadow: 0 0 0 3px rgba(0,0,0,0.07);
}

/* ── Global button reset ────────────────────────────────── */
button {
  border: 1.5px solid var(--grey-dk);
  padding: 10px 22px;
  margin-left: 12px;
  font-size: 15px;
  letter-spacing: 1px;
  font-family: trackim_font, Arial, sans-serif;
  background: var(--white);
  color: var(--black);
  border-radius: 6px;
  outline: none;
  cursor: pointer;
}
button:hover {
  background: var(--black);
  color: var(--white);
  border-color: var(--black);
}
.join_now:hover { filter: none; }

/* ── Button system ────────────────────────────────────────
   Two visual variants on every CTA:
     • Solid black (.button base, .btn-primary)
     • Black outline (.btn-secondary, .btn-game-video)
   Both share the same computed height (38px) so they line
   up perfectly when used side-by-side. The outline variant
   uses 10/20 padding + 1.5px border; the solid uses 12/20
   with no border; min-height locks the box so subpixel
   border math can't drift them apart. line-height: 1 keeps
   the text baseline consistent across both.
   ────────────────────────────────────────────────────────── */

/* Shared button typography — one place to tweak. */
.button,
.btn-primary,
.btn-secondary {
  box-sizing: border-box;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 1px;
  font-family: trackim_font, Arial, sans-serif;
  border-radius: 6px;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
}

/* Solid black CTA (links styled as buttons). */
.button {
  background: var(--black);
  color: var(--white);
  border: none;
  padding: 10px 20px;
  margin: 10px px 0 0;
  display: block;
  float: left;
  clear: none;
  border: 1px solid var(--black);
}
.button:hover {
  background: var(--grey-dk);
  color: var(--white);
}

/* Solid black CTA (button elements / content pages). */
.btn-primary {
  background: var(--black);
  color: var(--white);
  border: none;
  padding: 10px 20px;
  margin: 0 10px 10px 0;
  display: inline-block;
      border: 1px solid var(--black);
}
.btn-primary:hover {
  background: var(--grey-dk);
  color: var(--white);
}

/* Black-outline CTA. 10/20 padding + 1.5px border keeps the
   box at the same 38px height as the solid variant. */
.btn-secondary {
  background: transparent;
  color: var(--black);
  border: 1px solid var(--black);
  padding: 10px 20px;
  margin: 0 0px 10px 0;
  display: inline-block;
}
.btn-secondary:hover {
  background: var(--grey-lt);
  color: var(--black);
  border-color: var(--black);
}

/* View Gameplay button — same outline shape as .btn-secondary
   but inverts on hover (fills solid black). Kept as its own
   class so the games action-row stays semantically clear. */
.button.btn-game-video {
  box-sizing: border-box;
  background: transparent;
  color: var(--black);
  border: 1px solid var(--black);
  padding: 10px 20px;
  font-size: 14px;
  line-height: 1;
  font-family: trackim_font, Arial, sans-serif;
  border-radius: 6px;
  text-align: center;
  cursor: pointer;
  float: none;
  display: inline-block;
}
.button.btn-game-video:hover {
  background: var(--black);
  color: var(--white);
  border-color: var(--black);
}

/* ── About strip ────────────────────────────────────────── */
.about {
  overflow: hidden;
  background: #ffffff;
  border-bottom: 1px solid #e0e0e0;
}
/* Update the about section to match book width */
.about_cont {
  line-height: 1.7;
  width: 100%;              /* Changed from 82% */
  max-width: 1000px;        /* Changed from 960px to match .book */
  overflow: hidden;
  margin: 0 auto;
  padding: 20px 20px;       /* Changed from 20px 0 to add side padding */
  color: #000;
  font-size: 16px;
  letter-spacing: 0.4px;
}

/* ── Books section ──────────────────────────────────────── */
.books {
  padding: 20px 20px 20px;
  text-align: center;
  background: #f0f0f0;
}
.book {
  max-width: 960px;
  overflow: hidden;
  background: var(--white);
  margin: 0 auto 20px;
  text-align: left;
  padding: 28px 28px 24px;
  border-radius: var(--radius);
  box-shadow: 0 1px 8px rgba(0,0,0,0.06), 0 4px 20px rgba(0,0,0,0.05);
  border: 1px solid #e8e8e8;
  border-left: 3px solid transparent;
}



span.no_shadow, .book_image .no_shadow, span.no_shadow, .web_image .no_shadow {
  box-shadow: none !important;
}

.web_image  { 
  max-width: 300px; 
  height: auto; 
  float: left; 
  background: var(--white); 
  font-size: 0; 
  line-height: 0;
  overflow:visible;
  border-radius:6px;
  box-shadow:0 2px 10px rgba(0,0,0,0.12);
  border: 1px solid var(--grey-lt);
}
.web_text   { float: left; width: calc(100% - 360px); padding: 0 20px 0 36px; font-size: 17px; letter-spacing: 0.3px; line-height: 1.55; }

.book_image { 
  max-width: 400px; 
  height: auto; 
  float: left; 
  background: var(--white); 
  font-size: 0; 
  line-height: 0;
   overflow:visible;
  width:100%;
  border-radius:6px;
  box-shadow:0 2px 10px rgba(0,0,0,0.12);
  border: 1px solid var(--grey-lt);

}
.book_text  { float: left; width: calc(100% - 460px); padding: 0 20px 0 36px; font-size: 16px; letter-spacing: 0.3px; line-height: 1.55; }

.book_image img, .web_image img {
  width: 100%;
  height: auto;
  display: block;
  vertical-align: top;
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.12);
  background: var(--white);
  margin: -1px;
  padding: 1px;
}

.right { float: right; }
.coming_soon {
  font-size: 15px;
  letter-spacing: 1px;
  padding: 8px 16px;
  border-radius: 6px;
  background: var(--grey-dk);
  color: var(--white);
  display: block;
  margin: 14px 0 0;
  float: left;
}
.line_1 { font-size: 14px; letter-spacing: 1px; display: block; }

/* ── Cookie/Accept buttons ──────────────────────────────── */
button.accept {
  border: none;
  padding: 9px 18px;
  margin-left: 0;
  font-size: 14px;
  letter-spacing: 1px;
  font-family: trackim_font, Arial, sans-serif;
  background: var(--white);
  color: var(--black);
  border-radius: 6px;
  outline: none;
  display: inline-block;
  cursor: pointer;
}
button.accept:hover { 
  background: var(--grey-lt); 
  color: var(--black);
}
button.active:hover { filter: brightness(115%); cursor: pointer !important; }
button.deny { margin: 0 0 0 10px; background: transparent; color: var(--white); border: 1px solid rgba(255,255,255,0.3); }
button.deny:hover { background: rgba(255,255,255,0.1); }
.button_blue { background: var(--grey-dk); }

/* ── Cookie bar ─────────────────────────────────────────── */
.cookieAcceptBar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  background: var(--dark);
  color: var(--white);
  padding: 14px 0;
  z-index: 99999;
  display: none;
  border-top: 1px solid var(--grey-dk);
}
.cookieAcceptBar a { color: var(--grey-lt); text-decoration: none; font-weight: bold; }
.copyright_text { font-size: 14px; margin: 10px 0; margin-right: 20px; }
.copyright { width: 80%; overflow: hidden; margin: 0 auto; text-align: center; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; }
.cookiebuttons { display: flex; gap: 10px; }

/* ── Footer ─────────────────────────────────────────────── */
.footer_container {
  background: var(--dark);
  background: linear-gradient(180deg, #0c0c0c 0%, #292929 100%);

  overflow: auto;
  border-top: 1px solid var(--mid);
}
.footer {
  width: 80%;
  overflow: hidden;
  margin: 0 auto;
  text-align: left;
  padding: 26px 20px;
  margin-bottom: 90px;
  color: var(--grey-lt);
  font-size: 14px;
}

.footer-copyright {
  text-align: center;
  margin-bottom: 16px;
}

.footer-links {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.footer-button {
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  color: var(--grey-lt);
  text-decoration: none;
  font-size: 13px;
  transition: all 0.2s ease;
  display: inline-block;
}

.footer-button:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
  color: var(--white);
}

/* ── Tags ───────────────────────────────────────────────── */
.tag_cont { margin-top: 0px; margin-bottom: 16px; overflow: hidden; }
.tag, .tag_color {
  padding: 4px 10px;
  background: var(--off-wh);
  border: 1px solid #d8d8d8;
  color: var(--grey);
  border-radius: 20px;
  font-size: 12px;
  display: block;
  float: left;
  clear: none;
  margin: 4px 6px 0 0;
  letter-spacing: 0.3px;
  height: auto;
  font-weight: bold;
}
.tag_color {
  background: var(--black);
  border-color: var(--black);
  color: var(--white);
}

/* ── Sign-up / Join modal ────────────────────────────────── */
.cookiebuttons { display: flex; gap: 10px; }
.privacy_link { text-decoration: underline !important; color: var(--grey-lt); }
.logo { max-width: 300px; width: 100%; padding: 0; }
.join div.close { position: absolute; top: 10px; right: 10px; width: 20px; margin: 0; cursor: pointer; }

.close img {
    filter: brightness(0) saturate(100%) invert(80%);
    cursor: pointer;
}

.close img:hover {
    filter: brightness(0) saturate(100%) invert(60%);
}


.sign_up_tag { padding: 0 20px; }
.ml_button { padding: 10px 0 0; overflow: initial; margin: 0; text-align: center; display: block; }
.ml_button button { margin: 0; }
.hide { display: none; }
.join_open { 
  margin: 0 0 16px;
  background: var(--white);
  color: var(--black);
  border: none;
}
.join_open:hover {
  background: var(--grey-lt);
  color: var(--black);
}
.center { text-align: center; }

.join {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.7);
  z-index: 10000;
  align-items: center;
  justify-content: center;
}
.join.active {
  display: flex;
}
.join-modal-content {
  background: var(--white);
  padding: 20px;
  border-radius: 12px;
  max-width: 400px;
  width: 90%;
  box-shadow: 0 10px 40px rgba(0,0,0,0.3);
  position: relative;
  text-align: center;
  font-family: trackim_font, Arial, sans-serif;
}
.join-modal-content h3 {
  font-size: 24px;
  margin: 0 0 15px 0;
  color: #333;
  font-family: trackim_font, Arial, sans-serif;
  letter-spacing: 0.5px;
}
.join div { margin: 0; color: var(--black); display: block; font-size: 18px; letter-spacing: 1px; text-align: center; }
.join .sign_up_tag { 
  color: var(--black);
  font-size: 16px;
  padding: 0;
  margin: 0 0 25px 0;
  line-height: 1.5;
  letter-spacing: 0.3px;
}
.join div.close { position: absolute; top: 10px; right: 10px; width: 20px; margin: 0; cursor: pointer; }
.join div.close img { filter: none; }
.join input { margin: 0 0 12px 0; width: 100%; max-width: 100%; }
.join button { 
  margin: 0; 
  width: 100%; 
  background: var(--black);
  color: var(--white);
  border: none;
  padding: 10px 24px;
  font-size: 16px;
  cursor: pointer;
}
.join button:hover {
  background: var(--grey-dk);
}

/* ── YouTube card ───────────────────────────────────────── */

/* Art Image Container - Centers artwork on white background */
.art-image-container {
  width: 100%;
  aspect-ratio: 4/3;
  background: white;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0;
  border-bottom: 1px solid #e0e0e0;
  position: relative;
}



.art-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transform-origin: center center;
}

.image-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
}

.artwork-buttons {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.artwork-buttons .btn-enlarge, 
.artwork-buttons .btn-how-made {
  flex: 1;
  min-width: 0;
  margin: 0 !important;
  float: none !important;
  display: block !important;
  /* Inherits .button.btn-preview styles */
}

/* No need for separate hover - uses .button.btn-preview:hover */

/* Enlarged Artwork Modal - Full Screen Interactive Viewer */
.enlarged-artwork-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.95);
  z-index: 10000;
}

.enlarged-artwork-modal.active {
  display: block;
}

.enlarged-artwork-content {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
}

.enlarged-image-viewer {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: #1a1a1a;
  cursor: grab;
}

.enlarged-image-viewer.dragging {
  cursor: grabbing;
}

.enlarged-image-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.enlarged-image {
  max-width: 90%;
  max-height: 90%;
  width: auto;
  height: auto;
  position: absolute;
  user-select: none;
  -webkit-user-drag: none;
  object-fit: contain;
}

/* Viewer Controls - All 4 buttons on right side */
.viewer-controls {
  position: absolute;
  top: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 10001;
}

.viewer-btn {
  width: 44px;
  height: 44px;
  background: var(--black);
  border: 2px solid rgba(255,255,255,0.3);
  border-radius: 6px;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: white;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  padding: 0;
}

.viewer-btn img {
  width: 20px;
  height: 20px;
  display: block;
  pointer-events: none;
}

.viewer-btn:hover {
  background: var(--grey-dk);
  border-color: rgba(255,255,255,0.5);
}

.viewer-btn:active {
}

/* Sticky Bottom Info Bar with Drop Shadow */
.enlarged-artwork-bottom-bar {
  background: white;
  padding: 20px 40px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid #e0e0e0;
  position: sticky;
  bottom: 0;
  z-index: 10001;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
}

.enlarged-artwork-info {
  flex: 1;
  text-align: left;
  /* Reserve room on the right so title/artist/specs don't
     run under the absolutely-positioned price above. */
  padding-right: 130px;
}

.enlarged-artwork-info h2 {
  font-size: 24px;
  margin: 0 0 0px 0;
  color: var(--black);
  font-weight: 700;
}

.enlarged-artwork-info .specs {
  font-size: 14px;
  margin: 0 0 10px 0;
  color: #000;
  /*font-weight: 700;*/
}

/* Price pins to the top-right of the bottom bar so it
   always sits in the corner regardless of how tall the
   info column gets. The bottom bar provides the position
   context (it's already sticky-positioned). */
.enlarged-artwork-info .price {
  position: absolute;
  top: 20px;
  right: 40px;
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--black);
  text-align: right;
  white-space: nowrap;
  z-index: 2;
}

/* Actions column sits right-aligned below the price.
   margin-top clears the absolute price above it.
   Once the bar stacks vertically on mobile (≤768px),
   the mobile block resets margin-top to 0 since the
   price gets its own row in the stack. */
.enlarged-artwork-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 36px;
  text-align: right;
}

.enlarged-artwork-actions .art-purchase-button {
  margin: 0;
  padding: 10px 20px;
  font-size: 16px;
  white-space: nowrap;
  width: auto;
  max-width: none;
}

.enlarged-artwork-actions .button-group {
  display: flex;
  gap: 10px;
  align-items: center;
}

.enlarged-artwork-actions .button-group .art-purchase-button {
  flex: 1;
}

.enlarged-artwork-actions .sold-badge {
  margin: 0;
  padding: 10px 20px;
  font-size: 16px;
}

/* Video Modal */
/* Video modal.
   The modal must always fit the viewport on BOTH axes — wide-but-short
   browsers used to clip the top of the iframe and the close button at
   the bottom because the layout was sized purely from width (16:9 padding
   trick). Now the content width is the smaller of:
     • the full available width (capped at 1200px), or
     • the width that would let the 16:9 video PLUS the close-button row
       fit inside the available height.
   Content height then follows naturally via aspect-ratio. */
.video-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.9);
  z-index: 10000;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.video-modal.active {
  display: flex;
}

/* Reserve ~140px of vertical chrome below the video:
     20+20px modal padding + 20px modal-content bottom padding
     + 20px gap above the close button + ~46px close-button height
     + ~14px buffer for line-height variance.
   Everything else collapses to whichever constraint is tighter. */
.video-modal-content {
  background: black;
  border-radius: 12px;
  width: min(100%, max(280px, calc((100vh - 140px) * 16 / 9)));
  max-width: 1200px;
  position: relative;
  padding-bottom: 20px;
}

/* Drop the old padding-bottom 56.25% trick — aspect-ratio is the
   modern equivalent and plays nicely with the width-from-height
   calculation above. */
.video-container {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 12px 12px 0 0;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 12px 12px 0 0;
}
/* Vertical variant for YouTube Shorts (9:16).
   Same height-driven sizing strategy as the horizontal default,
   just swapping the ratio. The narrower width also gets a tighter
   min so the modal doesn't blow up on tall, narrow viewports. */
.video-modal-content.vertical {
  width: min(100%, max(220px, calc((100vh - 140px) * 9 / 16)));
  max-width: 500px;
}

.video-modal-content.vertical .video-container {
  aspect-ratio: 9 / 16;
}
.video-close-btn {
  display: block;
  margin: 20px auto 0;
  background: var(--white);
  color: var(--black);
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 16px;
  font-family: trackim_font, Arial, sans-serif;
  letter-spacing: 1px;
  cursor: pointer;
  font-weight: 600;
}

.video-close-btn:hover {
  background: var(--grey-lt);
  color: var(--black);
}

.modal-close {
  position: absolute;
  top: -40px;
  right: 0;
  background: white;
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--black);
  z-index: 10001;
}

.modal-close:hover {
  background: var(--grey-lt);
}
.youtube_text {
  float: left;
  clear: none;
  margin: 0;
  padding: 0;
  display: block;
  width: calc(100% - 200px);
  color: var(--white);
  font-size: 28px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}
.youtube_button { float: right; margin: 0; }
.youtube_card {
  background-image: url("../imgs/YouTube-Background.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border-radius: var(--radius);
}
.you_tube_ad { box-shadow: none; padding-top: 0; }

/* ── Old filter bar removed - nav is now in header ─────── */

/* ── Art section ────────────────────────────────────────── */
.art {
  padding: 0px 0px;
  text-align: center;
  background: var(--off-wh);
}
.art_container {
  padding: 0px 20px 50px;
  text-align: center;

}
#videos-container {
  max-width: 960px;
  margin: 20px auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.art_section {
  padding: 0;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid #e8e8e8;
  overflow: hidden;
}

.art_section:hover { 
  box-shadow: var(--shadow-hover); 
}

/* Deep-link highlight for the Invest in Art grid.
   Triggered when artwork.php's "Purchase {Title}" CTA brings a visitor
   here with `#art-piece-<slug>` in the URL. The JS (focusArtPieceFromHash
   in scripts.js) scrolls the matching tile into view and adds the
   .art-piece-flash class; this CSS draws the fading highlight.

   The highlight rides on box-shadow (rather than outline or border) so
   it respects the tile's border-radius, paints outside the box without
   affecting layout, and animates smoothly. Two layered shadows - a
   tight dark ring and a softer halo - together read as a clear focus
   cue without being garish. */
.art_section.art-piece-flash {
  animation: artPieceFlash 2s ease-out;
  /* During the animation, lift the tile above its neighbors so the
     halo doesn't get clipped by adjacent stacking contexts. */
  position: relative;
  z-index: 2;
}

@keyframes artPieceFlash {
  0% {
    box-shadow:
      0 0 0 4px rgba(10, 10, 10, 0.85),
      0 0 0 12px rgba(10, 10, 10, 0.20),
      var(--shadow);
  }
  60% {
    box-shadow:
      0 0 0 4px rgba(10, 10, 10, 0.55),
      0 0 0 16px rgba(10, 10, 10, 0.10),
      var(--shadow);
  }
  100% {
    box-shadow:
      0 0 0 4px rgba(10, 10, 10, 0),
      0 0 0 20px rgba(10, 10, 10, 0),
      var(--shadow);
  }
}

/* Respect reduced-motion preferences: skip the gradient/easing and just
   hold the highlight steady before snapping it off. The visitor still
   gets the visual confirmation; they just don't get the fade. */
@media (prefers-reduced-motion: reduce) {
  .art_section.art-piece-flash {
    animation: artPieceFlashReduced 2s steps(1, end);
  }
  @keyframes artPieceFlashReduced {
    0%, 90% {
      box-shadow:
        0 0 0 4px rgba(10, 10, 10, 0.85),
        0 0 0 12px rgba(10, 10, 10, 0.20),
        var(--shadow);
    }
    100% {
      box-shadow: var(--shadow);
    }
  }
}
.youtube-video { aspect-ratio: 16/9; width: 100%; border-radius: 6px; }
.art-purchase {
  margin-top: 0;
  padding: 20px;
  border-top: none;
  text-align: left;
}
.art-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--black);
  margin-bottom: 0px;
  line-height: 1.3;
}
.art-specs {
    font-size: 14px;
    color: #000000;
    margin-bottom: 15px;
    /* font-weight: 700; */
}
.art-purchase-price {
  font-size: 24px;
  font-weight: 700;
  color: var(--black);
  margin-bottom: 12px;
}
.art-purchase-button {
  background: var(--black);
  color: white;
  border: none;
  padding: 10px 20px;
  font-size: 14px;
  font-family: trackim_font, Arial, sans-serif;
  letter-spacing: 1px;
  border-radius: 6px;
  cursor: pointer;
  width: 100%;
  max-width: 100%;
  margin: 0;
  float: none;
  display: block;
  line-height: 1;
  border: 1px solid var(--black);
}
.art-purchase-button:hover {
  background: var(--grey-dk);
}



.cancel-hold-button {
  background: #dc3545;
  color: white;
  border: none;
  padding: 10px 24px;
  font-size: 14px;
  font-family: trackim_font, Arial, sans-serif;
  letter-spacing: 1px;
  border-radius: 6px;
  cursor: pointer;
  margin-left: 10px;
}
.cancel-hold-button:hover {
  background: #c82333;
}
.button-group {
  display: flex;
  align-items: center;
  width: 100%;
}
.button-group .art-purchase-button {
  flex: 1;
}
.sold-badge {
  background: transparent;
  color: #dc3545;
  font-size: 24px;
  font-weight: 700;
  padding: 0;
  border-radius: 0;
  display: block;
  letter-spacing: 2px;
  margin: 0;
}

.sold-text {
  color: #dc3545;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 2px;
  text-align: center;
  padding: 10px 0;
  font-family: trackim_font, Arial, sans-serif;
}

/* Purchase Modal Styles */
.purchase-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.7);
  z-index: 10000;
  align-items: center;
  justify-content: center;
}
.purchase-modal.active {
  display: flex;
}
.purchase-modal-content {
  background: white;
  padding: 40px;
  border-radius: 12px;
  max-width: 500px;
  width: 90%;
  box-shadow: 0 10px 40px rgba(0,0,0,0.3);
  text-align: center;
  font-family: trackim_font, Arial, sans-serif;
}
.purchase-modal-content h3 {
  font-size: 24px;
  margin: 0 0 15px 0;
  color: #333;
  font-family: trackim_font, Arial, sans-serif;
  letter-spacing: 0.5px;
}
.purchase-modal-content p {
  font-size: 16px;
  color: var(--black);
  margin: 0 0 25px 0;
  line-height: 1.5;
  font-family: trackim_font, Arial, sans-serif;
  letter-spacing: 0.3px;
}
.purchase-modal-content .price-display {
  font-size: 36px;
  font-weight: bold;
  color: #000;
  margin: 0;
  font-family: trackim_font, Arial, sans-serif;
  letter-spacing: 1px;
}
#paypal-button-modal-container {
  margin: 20px 0;
}
.modal-cancel-btn {
  background: #ccc;
  border: none;
  padding: 10px 24px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  width: 100%;
  margin-top: 15px;
  color: #333;
  font-family: trackim_font, Arial, sans-serif;
  letter-spacing: 0.5px;
  margin:0px;
}
.modal-cancel-btn:hover {
  background: var(--grey-lt);
  color: var(--black);
}
.success-modal-content {
  text-align: center;
}
.success-icon {
  font-size: 64px;
  color: #28a745;
  margin-bottom: 20px;
}
.pending-modal-content {
  text-align: center;
}
.pending-icon {
  font-size: 64px;
  color: #ffc107;
  margin-bottom: 20px;
}
/* Animations removed */
/* Loading Spinner */
.art-loading-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100px 20px;
  min-height: 400px;
}
.spinner {
  width: 60px;
  height: 60px;
  border: 4px solid #f0f0f0;
  border-top: 4px solid #000;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.spinner-text {
  margin-top: 20px;
  font-size: 16px;
  color: #666;
}

/* Art Controls Bar - Unified Series + Filter */
/* ============================================
   ART FILTER BAR (Single Container for Everything)
   ============================================ */

.art-filter-bar {
  width: 100%;
  padding: 0px 0px 0;
  background: var(--off-wh);
  margin-bottom: 0px !important;
   background: linear-gradient(180deg, #191919 0%, #313131 100%);
   background: linear-gradient(180deg, #414141 0%, #666565 100%);
}

.art-filter-bar-2 {
  width: 100%;
  padding: 20px 20px 0;
  background: var(--off-wh);
  margin-bottom: 0px !important;
}

.art-filter-container {
    max-width: 1000px;
    margin: 0 auto;   
    overflow: hidden;
    width: 100%;
  background:transparent;

}



.art-filter-container-2 {
    max-width: 960px;
    margin: 0 auto;
    background: var(--white);
     box-shadow: var(--shadow);
    border-radius: 10px;
    overflow: hidden;
    width: 100%;
}


/* Series Selection Dropdown (gradient background, white text) */
.art-series-selection {
  
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0;
  color: #ffffff;
}


.art-series-dropdown {
  padding: 10px 36px 10px 16px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  cursor: pointer;
  font-family: trackim_font, 'Helvetica Neue', Arial, sans-serif;
  min-width: 240px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

.art-series-dropdown:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.3);
}

.art-series-dropdown:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
}

.art-series-dropdown option {
  font-family: trackim_font, 'Helvetica Neue', Arial, sans-serif;
  padding: 10px;
  font-size: 14px;
  background: #2e2e2e;
  color: #ffffff;
}

/* Series Info Section (title and description) */
.art-series-info-section {
  padding: 20px 20px 0;
  margin: 0;
}

.art-series-title {
  font-size: 30px;
  font-weight: 600;
  color: var(--black);
  margin: 0 0 0 0;
  font-family: trackim_font, 'Helvetica Neue', Arial, sans-serif;
  text-align: left;
}

.art-series-description {
  line-height: 1.7;
  color: #000;
  font-size: 16px;
  letter-spacing: 0.4px;
  margin: 0;
  font-family: trackim_font, 'Helvetica Neue', Arial, sans-serif;
  text-align: left;
}

/* Separator line between description and filter */
.art-series-info-section::after {
  content: '';
  display: block;
  height: 1px;
  background: #e0e0e0;
  margin: 20px -20px 0;
}

/* ----------------------------------------------------------
   Purchase Benefits Blurb
   Trust-signal band sitting between the series info card
   and the artwork grid. Grey background, rounded corners,
   icon left + content right.
   ---------------------------------------------------------- */
.art-purchase-benefits {
  max-width: 1000px;
  margin: 16px auto 0;
  padding: 0 20px;
  box-sizing: border-box;
  width: 100%;
}

.art-purchase-benefits-inner {
  background: #e2e2e2;
  border-radius: 10px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.art-purchase-benefits-icon {
  flex: 0 0 auto;
  align-self: flex-start;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--grey-dk);
  margin-bottom:10px;
}

.art-purchase-benefits-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.art-purchase-benefits-content {
  flex: 1 1 auto;
  min-width: 0;
}

.art-purchase-benefits-title {
  font-family: trackim_font, 'Helvetica Neue', Arial, sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--black);
  margin: 0 0 10px;
  text-align: left;
}

.art-purchase-benefits-list {
  font-family: trackim_font, 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: #333;
  list-style: none;
  padding: 0;
  margin: 0 0 10px;
  text-align: left;
}

.art-purchase-benefits-list li {
  margin: 0 0 4px;
}

.art-purchase-benefits-list li:last-child {
  margin-bottom: 0;
}

.art-purchase-benefits-list strong {
  font-weight: 600;
  color: var(--black);
}

.art-purchase-benefits-note {
  font-family: trackim_font, 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  font-style: italic;
  line-height: 1.5;
  color: var(--grey);
  margin: 0;
  text-align: left;
}

.art-purchase-benefits-final {
  font-family: trackim_font, 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--black);
  margin: 8px 0 0;
  text-align: left;
}

.art-purchase-benefits-final strong {
  font-weight: 600;
}

/* Mobile: stack icon above content, keep 20px padding */
@media (max-width: 600px) {
  .art-purchase-benefits {
    padding: 0 10px;
  }
  .art-purchase-benefits-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .art-purchase-benefits-icon {
    width: 36px;
    height: 36px;
  }
}

/* Filter Section (grey background) */
.art-filter-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 10px 20px;
  margin: 0;
  background: linear-gradient(180deg, #191919 0%, #313131 100%);
  color: #ffffff;
}

.art-filter-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.art-controls-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--white);
  white-space: nowrap;
}

.art-filter-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.art-filter-btn {
  padding: 6px 14px;
  background: var(--white);
  border: 1px solid #d0d0d0;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--grey-dk);
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: trackim_font, 'Helvetica Neue', Arial, sans-serif;
  white-space: nowrap;
  margin: 0;
}

.art-filter-btn:hover {
  border-color: var(--grey-dk);
  background: var(--grey-lt);
  color: #000000;
}

.art-filter-btn.active {
  background: var(--black);
  border-color: var(--black);
  color: var(--white);
}

/* Smart Search - Flush Right in Filter Bar */
.art-smart-search {
  position: relative;
  min-width: 320px;
  max-width: 480px;
  flex: 0 1 auto;
  margin-left: auto;
}

.art-search-input {
  width: 100%;
  max-width: 100%;
  padding: 10px 40px 10px 14px;
  font-size: 14px;
  font-family: trackim_font, 'Helvetica Neue', Arial, sans-serif;
  border: 1px solid #c0c0c0;
  border-radius: 6px;
  background: var(--white);
  color: var(--black);
  transition: all 0.2s ease;
}

.art-search-input:focus {
  outline: none;
  border-color: var(--grey-dk);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
}

.art-search-input::placeholder {
  color: #999;
}

.art-search-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--grey);
  font-size: 16px;
  cursor: pointer;
  padding: 6px;
  line-height: 1;
  transition: color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.art-search-clear:hover {
  color: var(--grey-lt);
}

/* Search No Results Message */
#search-no-results {
  grid-column: 1 / -1;
  width: 100%;
  padding: 60px 20px;
  text-align: center;
  font-size: 18px;
  color: #666;
}

#search-no-results p:first-child {
  font-size: 20px;
  margin-bottom: 10px;
  font-weight: 600;
}

#search-no-results p:last-child {
  font-size: 16px;
  color: #999;
}

/* Search Highlight */
.search-highlight {
  color: #28a745;
  font-weight: 600;
}

/* Responsive - Mobile */
@media (max-width: 768px) {
  .art-series-selection {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 20px;
  }
  
  .art-series-dropdown {
    width: 100%;
    min-width: 100%;
  }
  
  .art-filter-section {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding:20px;
  }
  
  .art-filter-left {
    width: 100%;
  }
  
  .art-filter-buttons {
    width: 100%;
  }
  
  .art-filter-btn {
    flex: 1 1 auto;
    text-align: center;
    min-width: fit-content;
  }
  
  .art-smart-search {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    margin-left: 0;
  }
  
  /* Hide "Artwork View:" label on mobile */
  .art-controls-label {
    display: none;
  }
}

/* ============================================
   OLD STYLES - DEPRECATED (Keeping for backwards compatibility)
   ============================================ */
.art-controls-bar {
  width: 100%;
  padding: 20px 20px 0 ;
  background: var(--off-wh);
}

.art-controls-container {
  max-width: 960px;
  margin: 0 auto;
  background: var(--white);
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  padding: 16px 20px;
  display: flex;
  gap: 40px;
  align-items: center;
  flex-wrap: wrap;
}

.art-series-section,
.art-filter-section {
  display: flex;
  align-items: center;
  gap: 12px;
}



.art-controls-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.art-control-btn {
  padding: 8px 18px;
  background: var(--white);
  border: 1px solid #d0d0d0;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--grey-dk);
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: trackim_font, 'Helvetica Neue', Arial, sans-serif;
  white-space: nowrap;
  margin: 0;
}

.art-control-btn:hover {
  border-color: var(--grey-dk);
  background: var(--grey-lt);
}

.art-control-btn.active {
  background: var(--black);
  border-color: var(--black);
  color: var(--white);
}

.art-control-btn .artwork-count {
  font-size: 11px;
  opacity: 0.7;
  margin-left: 4px;
}


/* Responsive - Stack on mobile */
@media (max-width: 768px) {
  .art-controls-container {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  
  .art-series-section,
  .art-filter-section {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  
  .art-controls-buttons {
    width: 100%;
  }
  
  .art-control-btn {
    flex: 1;
    text-align: center;
  }
}



.art-filter-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--grey);
}

.art-filter-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.art-filter-btn {
  padding: 6px 14px;
  background: var(--white);
  border: 2px solid var(--grey-lt);
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--grey);
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: trackim_font, 'Helvetica Neue', Arial, sans-serif;
}

.art-filter-btn:hover {
  border-color: var(--grey);
  background: var(--grey-lt);
}

.art-filter-btn.active {
  background: var(--black);
  border-color: var(--black);
  color: var(--white);
}

/* Lazy loading image states */
.art-image {
  opacity: 0;
  transition: opacity 0.3s ease-in;
}

.art-image.loaded {
  opacity: 1;
}

#art-series, #other { display: none; }

/* ── Misc states ────────────────────────────────────────── */
#confirmation { font-size: 24px; letter-spacing: 1px; display: none; color: var(--black); font-weight: 600; }
#error        { font-size: 16px; letter-spacing: 0.5px; display: none; color: #dc3545; }
#duplicate    { font-size: 16px; letter-spacing: 0.5px; display: none; color: var(--grey); }
.disabled     { background: #ccc !important; color: var(--white); }
.err { box-shadow: inset 0 0 6px #900; border-color: #900 !important; }
.err::placeholder           { color: #900; opacity: 1; }
.err:-ms-input-placeholder  { color: #900; }
.err::-ms-input-placeholder { color: #900; }


/* ============================================
   BOOK PREVIEW MODAL STYLES
   ============================================ */

/* ── Book Preview Modal - Full Screen Viewer ──────────── */
.book-preview-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.95);
  z-index: 10000;
}

.book-preview-modal.active {
  display: block;
}

.book-preview-content {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
}

.book-preview-viewer {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: #1a1a1a;
  cursor: grab;
}

.book-preview-viewer.dragging {
  cursor: grabbing;
}

.book-image-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.book-preview-image {
  max-width: 90%;
  max-height: 90%;
  width: auto;
  height: auto;
  position: absolute;
  user-select: none;
  -webkit-user-drag: none;
  object-fit: contain;
}

/* Book Preview Loading Spinner */
.book-preview-loading {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1a1a1a;
  z-index: 10002;
}

.book-preview-spinner {
  width: 60px;
  height: 60px;
  border: 4px solid rgba(255,255,255,0.1);
  border-top: 4px solid #fff;
  border-radius: 50%;
  animation: book-spinner-spin 1s linear infinite;
}

@keyframes book-spinner-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Book Viewer Controls - All 4 buttons on right side */
.book-viewer-controls {
  position: absolute;
  top: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 10001;
}

/* Purchase Prompt - End of Preview Screen */
.book-purchase-prompt {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1a1a1a;
  z-index: 10000;
}

.purchase-prompt-content {
  text-align: center;
  max-width: 500px;
  padding: 40px;
}

.purchase-prompt-content h2 {
  font-size: 20px;
  color: var(--white);
  margin: 0 0 20px 0;
  font-weight: 700;
  letter-spacing: 1px;
  font-family: trackim_font, Arial, sans-serif;
  text-align: center;
}

.purchase-prompt-content p {
  font-size: 18px;
  color: rgba(255,255,255,0.85);
  margin: 0 0 0 0;
  line-height: 1.6;
  letter-spacing: 0.3px;
  font-family: trackim_font, Arial, sans-serif;
}

.purchase-prompt-content p:last-of-type {
  margin-bottom: 30px;
}

.purchase-prompt-button {
  background: var(--white);
  color: var(--black);
  border: none;
  padding: 14px 36px;
  font-size: 16px;
  font-family: trackim_font, Arial, sans-serif;
  letter-spacing: 1px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  margin: 10px;
  min-width: 220px;
  display: inline-block;
}

.purchase-prompt-button:hover {
    background: var(--grey-lt);
    color: var(--black);
}

.purchase-prompt-close {
  background: transparent;
  color: rgba(255,255,255,0.7);
  border: 1px solid rgba(255,255,255,0.3);
  padding: 10px 20px;
  font-size: 14px;
  font-family: trackim_font, Arial, sans-serif;
  letter-spacing: 1px;
  border-radius: 6px;
  cursor: pointer;
  margin: 10px;
  min-width: 220px;
  display: inline-block;
}

.purchase-prompt-close:hover {
  background: rgba(255,255,255,0.1);
  color: var(--white);
  border-color: var(--white);
  transition: all 0.2s ease;
}

/* Sticky Bottom Info Bar */
.book-preview-bottom-bar {
  background: white;
  padding: 20px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #e0e0e0;
  position: sticky;
  bottom: 0;
  z-index: 10001;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
}

.book-preview-info {
  flex: 1;
  text-align: left;
}

.book-preview-info h3 {
  font-size: 20px;
  margin: 0 0 4px 0;
  color: var(--black);
  font-weight: 700;
  font-family: trackim_font, Arial, sans-serif;
}

.book-page-indicator {
  font-size: 14px;
  color: var(--grey);
  font-family: trackim_font, Arial, sans-serif;
}

.book-preview-navigation {
  display: flex;
  gap: 12px;
  align-items: center;
}

.book-nav-button {
  background: var(--black);
  color: white;
  border: none;
  padding: 11px 28px;
  font-size: 14px;
  font-family: trackim_font, Arial, sans-serif;
  letter-spacing: 1px;
  border-radius: 6px;
  cursor: pointer;
  min-width: 100px;
  margin-left: 0;
}

.book-nav-button:hover {
  background: var(--grey-dk);
}

.book-nav-button:disabled {
  background: #e0e0e0;
  color: var(--grey);
  cursor: not-allowed;
}

/* Mobile responsiveness */
@media only screen and (max-width: 800px) {
  .book-preview-bottom-bar {
    padding: 15px 20px;
    flex-direction: column;
    gap: 4px;
    align-items: stretch;
  }
  
  .book-preview-info {
    text-align: center;
  }
  
  .book-preview-info h3 {
    font-size: 18px;
  }
  
  .book-preview-navigation {
    width: 100%;
    justify-content: space-between;
  }
  
  .book-nav-button {
    flex: 1;
    min-width: 0;
    padding: 10px 16px;
    font-size: 13px;
  }
  
  .book-viewer-controls {
    top: 10px;
    right: 10px;
  }
  
  .viewer-btn {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }
  
  .book-preview-image {
    max-width: 95%;
    max-height: 95%;
  }


.art-filter-bar-2 {
  padding: 20px 0px 0;
}


.art-purchase-benefits{
padding: 0 0px;
}





}


/* ============================================
   BOOK STYLES (CONVERSION ENHANCEMENTS)
   ============================================ */

/* Star ratings */
.stars { color: #1a1a1a; font-size: 15px; letter-spacing: 3px; display: inline-block; }
.review-count { font-size: 12px; color: var(--grey); margin-left: 8px; vertical-align: middle; letter-spacing: 0.3px; }
.rating-row { margin: 8px 0 12px; }

/* Badge on book image */
.book_image_wrap { position: relative; float: left; max-width: 400px; }
.book_image_wrap .book_image { max-width: 100%; float: none; }
.bestseller-badge, .new-badge {
  position: absolute;
  top: 12px; left: -4px;
  color: var(--white);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  padding: 5px 12px 5px 10px;
  text-transform: uppercase;
  pointer-events: none;
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 50%, calc(100% - 6px) 100%, 0 100%);
}
.bestseller-badge { background: #1a1a1a; }
.new-badge        { background: var(--grey-dk); }

/* Action row — buttons sit inline */
.action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
  clear: both;
  align-items: center;
}

/* Hide the <span class="preview"></span> placeholder on desktop. It's
   an empty flex item and the `gap: 10px` above it still applies, which
   shows up as phantom left spacing before the first button. Nothing
   currently populates this span (JS targets .preview-button on the <a>
   tag instead). The mobile rule further down (.action-row .preview
   { width: 100%; }) overrides this display when needed. */
.action-row > .preview { display: none; }

/* ── Invest in Art CTAs ───────────────────────────────────
   Enlarge / How Made (outline) + Purchase (solid black).
   Same height system as the main button suite but a touch
   taller (41px) to read as the primary product CTA.
   ────────────────────────────────────────────────────────── */

/* Solid black purchase button. 13/20 padding + min-height
   lock the box to 41px. */
.button.btn-purchase {
  background: var(--black);
  color: var(--white);
  border: none;
  padding: 10px 20px;
  margin: 0;
  float: none;
  display: inline-block;
  border: 1px solid var(--black);
}
.button.btn-purchase:hover {
  background: #222;
}

/* Black-outline preview button. 12/10 padding + 1.5px
   border = 41px, matching .btn-purchase exactly. */
.button.btn-preview {
  background: transparent;
  color: var(--black);
  border: 1px solid var(--black);
  padding: 10px 20px;
  margin: 0;
  float: none;
  display: inline-block;
}
.button.btn-preview:hover {
  background: var(--grey-lt);
  color: var(--black);
  border-color: var(--black);
}

/* Available on Amazon note */
.amazon-note {
  display: block;
  clear: both;
  font-size: 12px;
  color: var(--grey);
  margin-top: 12px;
  letter-spacing: 0.3px;
}
.amazon-note span { font-weight: 700; color: var(--grey); }

/* Social proof quote */
.book-quote {
    font-style: italic;
    color: var(--grey);
    font-size: 14px;
    /* border-left: 2px solid #d8d8d8; */
    padding: 14px;
    margin: 14px 0 6px;
    line-height: 1.55;
    font-weight: bold;
    background: #f4f4f4;
    border-radius: 6px;
}

/* Gift hint */
.gift-hint {
  display: block;
  font-size: 12px;
  color: var(--grey);
  background: #f8f8f8;
  border: 1px solid #e4e4e4;
  border-radius: 4px;
  padding: 5px 11px;
  margin-top: 12px;
  width: 100%;
  clear: both;
  letter-spacing: 0.3px;
}

/* ── Book card upgrades ───────────────────────────────── */
.book {
  border-left: 3px solid transparent;
}

/* Tighter h2 spacing */
.book_text h2 {
  font-size: 22px;
  margin-bottom: 6px;
  line-height: 1.2;
}

/* Divider between description and actions */
.book-body-divider {
  border: none;
  border-top: 1px solid #cacaca;
  margin: 16px 0 0;
}

/* ── Section label ────────────────────────────────────── */
.books-header {
  max-width: 1000px;
  margin: 0 auto 8px;
  padding: 0 0 14px;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.books-header h3 {
  margin: 0;
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--grey);
  font-weight: 400;
}
.books-header-count {
  font-size: 11px;
  color: var(--grey-lt);
  letter-spacing: 1px;
}


/* ============================================
   RESPONSIVE STYLES
   ============================================ */

/* ── Responsive: 900px ──────────────────────────────────── */
@media only screen and (max-width: 900px) {

.line_1{ font-size:16px; letter-spacing: 1px; display:block;}
.line_2{font-size:40px; letter-spacing: 1px;  display:block;}

/* New header mobile styles */
.header-content {
  flex-direction: column;
  padding: 14px 20px;
  gap: 12px;
}

.header-logo .logo {
  height: 80px; /* Increased from 60px */
}

.header-nav {
  width: 100%;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}



h1{ font-size:40px; padding: 18px 20px 14px; }
h1 .logo { max-width: 220px; width: 100%; }

.book_image, .web_image{  max-width: 100%;  float:left; display:block; margin-bottom:20px;  }
.book_text, .web_text{ float:left; display:block; width:100%; padding:0px; font-size:18px; letter-spacing: 1px; }
	
.books { padding: 20px;}
.button{display:block;}

input{ width: calc(100% - 193px); max-width:100%; }

.footer {
  width: auto;
  padding: 20px 0;
  margin: 20px;
}


/* Book styles mobile */
.action-row { flex-direction: column; align-items: stretch; gap: 8px; }
.button.btn-purchase, .button.btn-preview { width: 100%; text-align: center; display: block; }
.action-row .preview { width: 100%; }
.action-row .preview .button { width: 100%; text-align: center; display: block; }
.book_image_wrap { max-width: 100%; float: none; display: block; margin-bottom: 18px; }

}

/* ── Misc ───────────────────────────────────────────────── */
.join div.close { position: absolute; top:10px; right: 10px; width:20px; margin:0; }

@media only screen and (max-width: 640px) {
  .join_open { }
}

@media only screen and (max-width: 800px) {
  .ml_button { text-align: center; }
  .youtube_text { width: 100%; display: block; padding-bottom: 16px; text-align: center; font-size: 22px; }
  .youtube_button { float: none; margin: 0; text-align: center; display: inline-block; }
  .youtube_card { text-align: center; }
  
  #videos-container {
    grid-template-columns: 1fr;
  }
  
  .art_container { padding: 0 0 20px; }
  .art { padding: 0px 20px;}
  .art-filter-container-2{ padding: 0px }
  .artwork-buttons {
    flex-direction: column;
  }
  

.art-filter-btn {
  padding: 6px 10px;}

  .btn-enlarge, .btn-how-made {
    min-width: 100%;
  }
  
  /* Enlarged Modal Mobile.
     Bar stacks vertically. Price stays absolute-pinned to
     the top-right corner of the bar (inherited from base
     rules), but we shrink the right offset to match the
     reduced mobile padding. The info column drops its
     desktop right-padding gutter to a smaller mobile one,
     and the actions column drops its desktop margin-top
     pushdown since the bar is now stacked. */
  .enlarged-artwork-bottom-bar {
    padding: 15px 20px;
    flex-direction: column;
    gap: 0px;
    align-items: stretch;
  }
  
  .enlarged-artwork-info {
    text-align: left;
    width: 100%;
    padding-right: 90px;
  }
  
  .enlarged-artwork-info h2 {
    font-size: 20px;
  }
  
  .enlarged-artwork-info .price {
    top: 15px;
    right: 20px;
    font-size: 20px;
  }
  
  .enlarged-artwork-actions {
    width: 100%;
    margin-top: 0;
    text-align: right;
  }
  
  .enlarged-artwork-actions .art-purchase-button {
    width: 100%;
    font-size: 14px;
  }
  
  /* SOLD text on mobile: right-aligned below the
     absolute-positioned price. Overrides the centered
     base .sold-text rule. */
  .enlarged-artwork-actions .sold-text {
    text-align: right;
    padding: 0;
  }
  
  .viewer-controls {
    top: 10px;
    right: 10px;
  }
  
  .viewer-btn {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }
  
  .modal-close {
    top: 10px;
    right: 10px;
  }
}

.you_tube_ad { box-shadow: none; padding-top: 0; }


/* ============================================
   ART SERIES SWITCHER
   ============================================ */

/* ============================================
   ART SERIES SWITCHER - CLEAN & THIN
   ============================================ */

/* ============================================
   ART SERIES SWITCHER - FULL WIDTH WITH HIERARCHY
   ============================================ */

/* ============================================
   ART SERIES SWITCHER - FINAL ALIGNED VERSION
   ============================================ */

/* Old series switcher styles removed - now using unified art-controls-bar */


/* ============================================
   UPDATED JOIN MODAL STYLES
   Add these to your styles.css (replace the existing confirmation styles)
   ============================================ */

/* Hide the "Get Updates" title when showing confirmation */
.join.show-confirmation #modal-title,
.join.show-confirmation .sign_up_tag {
	display: none;
}

/* Confirmation message container */
#confirmation { 
	display: none;
	color: var(--black);
	text-align: center;
	padding: 20px 0;
}

#confirmation.confirmation-message {
	display: none;
}

/* Main "Thank You!" text - Large and bold */
.confirmation-title {
	font-size: 42px!important;
	font-weight: 700;
	letter-spacing: 0.5px;
	margin: 0 0 0 0!important;
	color: var(--black);
	line-height: 1.1;
}

/* Subtitle "More fun to come" - Smaller, lighter */
.confirmation-subtitle {
    font-size: 20px !important;
    font-weight: 400;
    letter-spacing: 0.3px;
    color: var(--grey);
    margin: 0 !important;
    line-height: 1.4;
}

.happy_guy { max-width: 210px; width: 100%; margin-top: 20px;  }

/* Error and duplicate messages - keep existing styles */
#error { 
	font-size: 16px;
	letter-spacing: 0.5px;
	display: none;
	color: #dc3545;
	padding: 10px 0;
}

#duplicate { 
	font-size: 16px;
	letter-spacing: 0.5px;
	display: none;
	color: var(--grey);
	padding: 10px 0;
}

/* Mobile responsiveness */
@media (max-width: 600px) {
	.confirmation-title {
		font-size: 36px;
	}
	
	.confirmation-subtitle {
		font-size: 16px;
	}
}




/* ============================================
   EMAIL SIGNUP BAR - SIMPLIFIED (OPENS MODAL)
   Add this to your styles.css
   ============================================ */


.email-signup-bar {
    
    margin: 20px 20px 0;
    border-radius: 6px;
}
.email-signup-content {
  background: linear-gradient(180deg, #191919 0%, #313131 100%);
  background-image: url("../imgs/email_background_art.webp");
  background-position: center; background-size: cover;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    max-width: 960px;
    margin: 20px auto 0;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-radius: 10px;
}

.signup-text {
  flex: 1;
  text-align: left;
}

.signup-heading {
  font-size: 26px;
  font-weight: 700;
  color: var(--white);
  margin: 0 0 2px 0;
  letter-spacing: 0.5px;
  font-family: trackim_font, Arial, sans-serif;
}

.signup-subtext {
  font-size: 15px;
  color: rgba(255,255,255,0.75);
  margin: 0;
  letter-spacing: 0.3px;
  font-family: trackim_font, Arial, sans-serif;
}

.signup-bar-button {
  border: none;
  padding: 10px 32px;
  margin: 0;
  font-size: 14px;
  letter-spacing: 1px;
  font-family: trackim_font, Arial, sans-serif;
  background: var(--white);
  color: var(--black);
  border-radius: 6px;
  outline: none;
  cursor: pointer;
  font-weight: 700;
  white-space: nowrap;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.signup-bar-button:hover {
  background: var(--grey-lt);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

/* Mobile responsiveness for signup bar */
@media only screen and (max-width: 800px) {
  .email-signup-content {
    background-image: url("../imgs/email_background_mobile_art.webp");
    flex-direction: column;
    gap: 20px;
    padding: 24px 20px;
  }
  
  .signup-text {
    text-align: center;
  }
  
  .signup-heading {
    font-size: 22px;
  }
  
  .signup-subtext {
    font-size: 14px;
  }
  
  .signup-bar-button {
    width: 100%;
    padding: 14px 24px;
  }
}
/* ============================================
   NO SOLD ARTWORK MESSAGE (Devil)
   ============================================ */
.no-sold-message {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0;
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}

.devil-image {
  width: 100%;
  height: auto;
  margin-bottom: 0px;
  max-width: 400px;


}

.devil-title {
  font-size: 32px;
  font-weight: bold;
  color: var(--black);
  margin: 0 0 16px 0;
  letter-spacing: 0.5px;
}

.devil-text {
  font-size: 18px;
  line-height: 1.6;
  color: var(--grey);
  margin: 0;
}

@media only screen and (max-width: 800px) {
  .no-sold-message {
    padding: 0;
  }
  

  .devil-title {
    font-size: 26px;
  }
  
  .devil-text {
    font-size: 16px;
  }
}



/* Book Author Styling */
/* Add this to your main CSS file (likely /css/styles.css) */

.book-author {
    font-size: 12px!important;
    color: #666;
    margin: 0px 0 10px 0;

    font-weight: 400;
}

.book-author span {
    font-style: italic;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .book-author {
        font-size: 12px;
        margin: 0px 0 10px 0;
    }
}





/* Enhanced Footer Styles - Simple White Hover, No Animation */
/* Add this to your existing styles.css */


.footer {
     width: 100%;
    margin: 0 auto;
    padding: 40px 20px 20px;
     max-width: 990px !important;
}





/* Footer Main Grid */
.footer-main {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    margin-bottom: 0px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Tablet - 2 columns */
@media (max-width: 900px) {
    .footer-main {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
}

/* Mobile - 2 columns (smaller gap) */
@media (max-width: 600px) {
    .footer-main {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

/* Footer Columns */
.footer-column {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.footer-column-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 5px 0;
    color: #fff;
    letter-spacing: 0.5px;
}

.footer-column-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Simple text links - just turn white on hover */
.footer-link {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 14px;
    line-height: 1.6;
}

.footer-link:hover {
    color: #fff; /* Simple white on hover - no animation */
}

/* Footer Contact */
.footer-contact {
    margin-top: 10px;
}

.footer-email {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 14px;
}

.footer-email:hover {
    color: #fff;
    text-decoration: underline;
}

/* Footer Bottom */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    padding-top: 20px;
}

@media (max-width: 480px) {
    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }
}

.footer-copyright {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
}

/* Footer Social Links */
.footer-social {
    display: flex;
    gap: 15px;
}

.footer-social-link {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 14px;
}

.footer-social-link:hover {
    color: #fff;
}

/* Artwork Artist Styling - Same as book author */
.art-artist {
    font-size: 12px;
    color: #434343;
    margin: 0px 0 10px 0;
    font-style: italic;
    font-weight: 400;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .book-author,
    .art-artist {
        font-size: 12px;
        margin: 0px 0 10px 0;
    }
}

/* Enlarged Modal Artist Styling */
.enlarged-artist {
    color: #434343;
    font-size: 12px;
    font-style: italic;
    margin: 0px 0 10px 0;
}


/* ── Breadcrumb ─────────────────────────────────────────── */
.breadcrumb-container {
  background: var(--white);
  border-bottom: 1px solid #e0e0e0;
  padding: 10px 20px;;
  text-align: center;
}

.breadcrumb {
  max-width: 960px;
  margin: 0 auto;
  display: inline-block;
}

.breadcrumb ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.breadcrumb li {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: var(--grey);
}

.breadcrumb li:not(:last-child)::after {
  content: '›';
  margin-left: 8px;
  color: var(--grey);
  font-size: 16px;
}

.breadcrumb a {
  color: var(--grey);
  text-decoration: none;
  transition: color 0.2s ease;
}

.breadcrumb a:hover {
  color: var(--black);
  text-decoration: underline;
}

.breadcrumb li:last-child {
  color: var(--black);
  font-weight: 500;
}







/* ============================================
   Invest in Art — Price pinned to top-right
   The .art-purchase parent becomes the positioning
   context. Only the text rows (title/artist/specs)
   get right-padding so they don't run under the
   absolute-positioned price. Buttons span full width.
   
   Scoped with :not(.artwork-detail-card) because the
   artwork detail page (artwork.php) also uses .art_section
   as its wrapper class — without the exclusion, the detail
   page would inherit this pinned-price layout, which we
   don't want.
   ============================================ */
.art_section:not(.artwork-detail-card) .art-purchase {
    position: relative;
}

/* Reserve room on the right ONLY for the text rows
   above the price, so they don't collide with the
   floated price. Buttons and other elements below
   stay full-width. */
.art_section:not(.artwork-detail-card) .art-purchase .art-title,
.art_section:not(.artwork-detail-card) .art-purchase .art-artist,
.art_section:not(.artwork-detail-card) .art-purchase .art-specs {
    padding-right: 110px;
}

.art_section:not(.artwork-detail-card) .art-purchase .art-purchase-price {
    position: absolute;
    top: 20px;
    right: 20px;
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    text-align: right;
    white-space: nowrap;
}

/* SOLD text (homepage grid): in the rendered template the
   .sold-text element lives BELOW the Enlarge / How It's
   Made buttons (replacing the Purchase button). We let it
   sit there naturally — no absolute positioning — so it
   inherits the base .sold-text rule (centered red text).
   Earlier overrides pinned it to the top-right corner,
   which is no longer wanted. */

/* Tighten on small screens so the price doesn't dominate
   the narrow card layout. */
@media (max-width: 480px) {
    .art_section:not(.artwork-detail-card) .art-purchase .art-title,
    .art_section:not(.artwork-detail-card) .art-purchase .art-artist,
    .art_section:not(.artwork-detail-card) .art-purchase .art-specs {
        padding-right: 90px;
    }
    .art_section:not(.artwork-detail-card) .art-purchase .art-purchase-price {
        font-size: 20px;
    }
}


/* ============================================
   HOMEPAGE: ART SERIES SWITCHER & STICKY BAR
   Migrated from inline <style> in index.php.
   These rules are only used by the homepage (index.php) Invest-in-Art
   section and the sticky series switcher that sits inside .main-header
   on that page. Class names are unique enough that they don't appear
   elsewhere in the codebase, so a global home is fine.
   ============================================ */
/* Art Series chip switcher (Invest in Art section).
   Mirrors the chip styling used on the art-archive page so the two
   places that let a visitor pick a series feel like the same control. */
.art-series-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
}
.art-series-chips .art-series-chip {
	font-weight: bold;
	margin: 0;
	float: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	font-size: 14px;
	letter-spacing: 0.3px;
	line-height: 1.2;
	background: var(--white);
	color: var(--black);
	border: 1px solid var(--white);
	border-radius: 6px;
	cursor: pointer;
	box-shadow: none;
	font-family: inherit;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.art-series-chips .art-series-chip.off_state {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.4);
	color: var(--grey-lt);
}
.art-series-chips .art-series-chip:hover {
	background: var(--grey-lt);
	color: var(--black);
	box-shadow: none;
}
.art-series-chips .art-series-chip.off_state:hover {
	background: rgba(255, 255, 255, 0.08);
	color: var(--white);
	border-color: var(--white);
}

/* Count badge inside each chip */
.art-series-chip-count {
	font-size: 12px;
	font-weight: 600;
	padding: 1px 6px;
	border-radius: 999px;
	line-height: 1.4;
}
.art-series-chips .art-series-chip:not(.off_state) .art-series-chip-count {
	background: rgba(0, 0, 0, 0.1);
	color: var(--black);
}
.art-series-chips .art-series-chip.off_state .art-series-chip-count {
	background: rgba(255, 255, 255, 0.12);
	color: var(--grey-lt);
}

/* Series chips now live in their own .art-filter-bar so they read as a
   separate card from the info + Available/Sold + search bar below. The
   gap is what gives them visual separation. */
.art-series-bar {
	margin-bottom: 20px;
}

/* Per-series meta line ("X pieces · Y available"). Lives directly under
   the H2 series title, above the description. A homepage-specific
   variant of the .archive-series-meta on art-archive.php — the homepage
   sits inside a tighter container card so the type size and bottom
   spacing differ slightly. */
.art-series-meta2 {
	font-size: 12px;
	color: var(--grey);
	letter-spacing: 0.4px;
	margin-top: 0px;
	margin-bottom: 10px;
	text-align: left;
}

/* Count chip on the Available / Sold filter buttons. Same shape as
   .art-series-chip-count (rounded pill, small font). The base rule
   below targets the OFF (inactive) button state which is the more
   common case; .active overrides for the ON state. Visibility is
   toggled by JS via the .is-hidden class so empty buckets ("Sold 0")
   don't show up at all. */
.art-filter-chip-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-left: 8px;
	font-size: 12px;
	font-weight: 600;
	padding: 1px 7px;
	border-radius: 999px;
	line-height: 1.4;
	/* Base = OFF state colors (button is transparent on black). Mirrors
	   the badge inside .art-series-chip.off_state. The .active rule
	   below flips this for the white-fill active button. */
	background: rgba(255, 255, 255, 0.12);
	color: var(--grey-lt);
}
.art-filter-btn.active .art-filter-chip-count {
	background: rgba(0, 0, 0, 0.1);
	color: var(--black);
}

/* Filter buttons (Available / Sold) — match the Art Series chip
   behavior exactly. Both controls sit on the same dark surface
   (.art-filter-section has background:#000000), so the same
   rgba(255,255,255,...) values translate verbatim.

   Class semantics differ slightly from the chips but the four rules
   are parallel:
     Chip                           Filter button
     -----------------------------  -------------------------------
     .chip                base ON   .art-filter-btn.active   ON
     .chip:hover          hover ON  .art-filter-btn.active:hover
     .chip.off_state      base OFF  .art-filter-btn          OFF
     .chip.off_state:hover          .art-filter-btn:hover

   In other words: the chip treats ON as the base and adds .off_state
   to flip it; the filter button treats OFF as the base and adds
   .active to flip it. Same intent, no :not() needed. */
.art-filter-section .art-filter-btn {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.4);
	color: var(--grey-lt);
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.art-filter-section .art-filter-btn:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: var(--white);
	color: var(--white);
}
.art-filter-section .art-filter-btn.active {
	background: var(--white);
	border-color: var(--white);
	color: var(--black);
}
.art-filter-section .art-filter-btn.active:hover {
	background: var(--grey-lt);
	color: var(--black);
}

/* Mobile: keep the "Art Series:" label visible (the global rule in
   styles.css hides .art-controls-label on small screens to make room
   for the existing controls — but for the series chip section we want
   the label to stay so users have context). And stack chips full-width
   so they're easier to tap. */
@media (max-width: 768px) {
	.art-series-selection .art-controls-label {
		display: inline-block !important;
	}
	.art-series-chips {
		width: 100%;
		flex-direction: column;
		align-items: stretch;
	}
	.art-series-chips .art-series-chip {
		width: 100%;
		justify-content: center;
		padding: 6px 14px;
	}
}

/* ============================================
   STICKY ART SERIES SWITCHER
   Compact form of the full series chip bar (#art-series-selection).
   Lives as the last child of .main-header so it inherits the header's
   position:sticky. Visibility is class-driven by JS — base state is
   collapsed (max-height: 0). When the full bar scrolls out of view,
   series-switcher-debug.js adds .is-visible. Clicking the toggle adds
   .is-open which expands the panel below to reveal mirror chips.
   ============================================ */
.art-series-sticky {
	max-height: 0;
	overflow: hidden;
	background: linear-gradient(180deg, #414141 0%, #666565 100%);
	transition: max-height 0.25s ease;
}

.art-series-sticky.is-visible.is-open {
	/* Open: room for toggle row + expanded chip panel. Inner panel has
	   its own overflow-y:auto for cases with many series. */
	max-height: 360px;
}

.art-series-sticky-inner {
	max-width: 1000px;
	margin: 0 auto;
	padding: 10px 20px;
	display: flex;
	align-items: center;
}

.art-series-sticky.is-visible {
    max-height: 60px;
}

.art-series-sticky-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 14px;
	background: rgba(255, 255, 255, 0.10);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 6px;
	color: var(--white);
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.3px;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
	margin: 0px;
}
.art-series-sticky-toggle:hover,
.art-series-sticky-toggle[aria-expanded="true"] {
	background: rgba(255, 255, 255, 0.18);
	border-color: rgba(255, 255, 255, 0.32);
}
.art-series-sticky-label {
	color: rgba(255, 255, 255, 0.65);
	font-weight: 500;
}
.art-series-sticky-current {
	color: var(--white);
	max-width: 240px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.art-series-sticky-chev {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 14px;
	height: 14px;
	opacity: 0.8;
}
.art-series-sticky-chev img {
	width: 100%;
	height: 100%;
	display: block;
	/* Invert the dark SVG so it reads as light on the dark sticky bar.
	   Combined with the rotate transition below so opening/closing
	   the panel flips the chevron smoothly. */
	transition: transform 0.2s ease;
}
.art-series-sticky-toggle[aria-expanded="true"] .art-series-sticky-chev img {
	transform: rotate(180deg);
}


/* Expandable panel below the toggle row. Same gradient surface so it
   reads as one continuous bar with the toggle. Chips inside reuse the
   .art-series-chip look from the full bar — same component, smaller
   container. */
.art-series-sticky-panel {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.25s ease, padding 0.25s ease;
	padding: 0 20px;
}
.art-series-sticky.is-open .art-series-sticky-panel {
	max-height: 300px;
	padding: 4px 20px 12px;
	overflow-y: auto;
}
.art-series-sticky-chips {
	max-width: 960px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.art-series-sticky-chips .art-series-chip {
	font-weight: bold;
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	font-size: 14px;
	letter-spacing: 0.3px;
	line-height: 1.2;
	background: var(--white);
	color: var(--black);
	border: 1px solid var(--white);
	border-radius: 6px;
	cursor: pointer;
	font-family: inherit;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.art-series-sticky-chips .art-series-chip.off_state {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.4);
	color: var(--grey-lt);
}
.art-series-sticky-chips .art-series-chip:hover {
	background: var(--grey-lt);
	color: var(--black);
}
.art-series-sticky-chips .art-series-chip.off_state:hover {
	background: rgba(255, 255, 255, 0.08);
	color: var(--white);
	border-color: var(--white);
}

/* Count pill inside each sticky chip. Mirrors the rules under the
   full-bar .art-series-chips so the sticky compact chips show the
   same grey badge with the piece count. Without these, the count
   <span> in the markup still renders the number but as bare text
   (the base .art-series-chip-count rule only sets shape/typography,
   not background/color — those come from the parent-scoped rules
   for each chip container). */
.art-series-sticky-chips .art-series-chip:not(.off_state) .art-series-chip-count {
	background: rgba(0, 0, 0, 0.1);
	color: var(--black);
}
.art-series-sticky-chips .art-series-chip.off_state .art-series-chip-count {
	background: rgba(255, 255, 255, 0.12);
	color: var(--grey-lt);
}

/* Mobile: tighten padding, shrink the current-series label so longer
   titles ellipsize before they crowd the chev, and stack chips
   full-width inside the panel (mirrors the full-bar mobile treatment
   above). Allow more vertical room for the open panel since the header
   itself is taller on mobile. */
@media (max-width: 768px) {
	.art-series-sticky-current { max-width: 160px; }
	.art-series-sticky.is-visible.is-open { max-height: 70vh; }
	/* Stretch the toggle button across the sticky bar so it's an easier
	   tap target on phones, and push the chevron to the far right so
	   the row reads as: [label] [current series] ............ [v] */
	.art-series-sticky-toggle {
		width: 100%;
		justify-content: flex-start;
	}
	.art-series-sticky-toggle .art-series-sticky-chev {
		margin-left: auto;
	}
	.art-series-sticky-chips {
		flex-direction: column;
		align-items: stretch;
	}
	.art-series-sticky-chips .art-series-chip {
		width: 100%;
		justify-content: center;
		padding: 6px 14px;
	}
}


.back-to-top {
  
  position: fixed;
  right: 24px;
  bottom: max(24px, env(safe-area-inset-bottom, 24px));
  z-index: 90;
  width: 52px;
  height: 52px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--black);
  color: var(--white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease, background 150ms ease;
}

.back-to-top.is-visible {
 
  opacity: 0.55;
  transform: translateY(0);
  pointer-events: auto;
}


.back-to-top:hover {
  background: var(--grey-dk);
}

/* Pressed state — small inset shadow + slight scale-down gives haptic
   feel without moving the button noticeably. */
.back-to-top:active {
  transform: translateY(0) scale(0.96);
}

/* Visible keyboard focus ring. Uses the outline pattern instead of a
   box-shadow override so it stacks cleanly with the elevation shadow. */
.back-to-top:focus {
  outline: none;
}
.back-to-top:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 3px;
  /* Second ring in black so the white ring is visible against light
     page backgrounds too. */
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25), 0 0 0 5px var(--black);
}

.back-to-top img {
  display: block;
  width: 20px;
  height: 20px;
  /* Nudge up 1px so the arrow sits optically centered — pure-geometric
     centering looks slightly low because the arrow's visual weight is
     at the bottom of its bounding box. */
  transform: translateY(-1px);
  /* The SVG file's stroke/fill color is baked into the asset; we
     can't tint it from CSS the way we could with the previous inline
     SVG + currentColor. If you ever want a tinted variant, either
     ship a second SVG with the desired color or reintroduce an inline
     <svg> using currentColor. */
  pointer-events: none;
}

/* Mobile tuning — smaller button, tighter inset, but stays above the
   iOS bottom toolbar via env(safe-area-inset-bottom). */
@media (max-width: 600px) {
  .back-to-top {
    right: 10px;
    bottom: max(16px, env(safe-area-inset-bottom, 16px));
    width: 48px;
    height: 48px;
  }
}

/* Respect the user's motion preference. The show/hide still happens
   (opacity flip) but without the slide-up transform animation. */
@media (prefers-reduced-motion: reduce) {
  .back-to-top {
    transform: none;
    transition: opacity 0ms;
  }
  .back-to-top.is-visible {
    transform: none;
  }
}

/* ----------------------------------------------------------
   Scroll-next-row button.
   Round, dark companion to .back-to-top, but anchored to the
   TOP-right of the viewport rather than the bottom. Sits 20px
   below the sticky Art Series bar — the exact `top` value is
   set inline by JS (initScrollNextRow in scripts.js) so it
   always tracks the live header height (which can change
   when the Art Series sticky bar toggles between collapsed
   and expanded states).

   Hidden by default; .is-visible is added by JS once the
   sticky bar itself becomes visible and there's still grid
   below the fold to scroll to.
   ---------------------------------------------------------- */
.scroll-next-row {
  position: fixed;
  /* `top` is set inline by JS — fallback here in case the JS
     hasn't run yet (FOUC guard) so the button can't appear
     mid-screen. */
  top: 200px;
  right: 24px;
  z-index: 90;
  width: 52px;
  height: 52px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--black);
  color: var(--white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  opacity: 0;
  /* Mirror the back-to-top entry animation, but slide DOWN from
     above (negative Y) to match the button's top-anchored
     position — feels like it's dropping in from under the
     sticky bar. */
  transform: translateY(-12px);
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease, background 150ms ease, top 180ms ease;
}

.scroll-next-row.is-visible {
  opacity: 0.55;
  transform: translateY(0);
  pointer-events: auto;
}

.scroll-next-row:hover {
  background: var(--grey-dk);
}

/* Pressed state — subtle scale-down for haptic feel. */
.scroll-next-row:active {
  transform: translateY(0) scale(0.96);
}

.scroll-next-row:focus {
  outline: none;
}
.scroll-next-row:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 3px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25), 0 0 0 5px var(--black);
}

.scroll-next-row img {
  display: block;
  width: 20px;
  /* Nudge down 1px so the down-arrow sits optically centered —
     mirror of the -1px nudge on .back-to-top img. */
  transform: translateY(1px);
  pointer-events: none;
}

/* Mobile tuning — smaller button, tighter right inset. The `top`
   value still comes from JS so the button stays glued to the
   bottom of the (mobile-taller) sticky bar. */
@media (max-width: 600px) {
  .scroll-next-row {
    right: 10px;
    width: 48px;
    height: 48px;
  }
}

/* Respect the user's motion preference. */
@media (prefers-reduced-motion: reduce) {
  .scroll-next-row {
    transform: none;
    transition: opacity 0ms, top 0ms;
  }
  .scroll-next-row.is-visible {
    transform: none;
  }
}

.action-row > .button,
.action-row > .btn-primary,
.action-row > .btn-secondary {
  margin: 0;
}


#duplicate .thank_you_img {
    display: block;
    margin: 0 auto 15px;
    max-width: 200px;
    height: auto;
}

#duplicate .duplicate-thanks {
    display: block;
    font-size: 2em;
    font-weight: bold;
    margin-bottom: 8px;
}

#duplicate .duplicate-text {
    display: block;
    font-size: 1em;
}