/* =========================
   GLOBAL DESIGN SETTINGS
   (Beginner notes)
   - We keep a few variables so you can tweak spacing/widths easily.
   - The site is clean, white, with neutral greys and a single accent.
   ========================= */

:root {
  --content-max: 1200px;    /* max width of the content area */
  --grid-gap: 20px;         /* space between cards */
  --card-min: 240px;        /* min width of a card (controls columns) */
  --radius: 6px;           /* rounded corners on cards */
  --shadow: none;

  --bg: #ffffff;            /* page background: plain white */
  --text: #111111;          /* main text color: very dark grey */
  --muted: #6b7280;         /* muted text (subtle grey) */
  --line: #e5e7eb;          /* light border line color */
  --accent: #0ea5e9;        /* blue accent used for focus states */

  --price: #111111;         /* price color */
  --sold: #b91c1c;          /* red for SOLD labels/badge */
}

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

/* =========================
   BASE / LAYOUT
   - Basic resets and container paddings.
   ========================= */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 "Work Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 400;
}


.site-header, .toolbar, .site-footer {
  margin: 0 auto;
  max-width: var(--content-max);
  padding: 16px clamp(12px, 3vw, 24px);
  /* no borders on header/toolbar/footer */
}


/* Footer layout: right-align content inside the max-width container */
/* Footer container: a single row with space between */
.site-footer {
  margin: 0 auto;
  max-width: var(--content-max);
  padding: 16px clamp(12px, 3vw, 24px);

  display: flex;
  justify-content: space-between;  /* © on the left, link on the right */
  align-items: baseline;            /* nice alignment with small text */
  gap: 12px;
}

/* Right side wrapper can stay simple */
.footer-inner { display: flex; align-items: baseline; }

/* Plain text link styles */
.footer-note { margin: 0; }                 /* remove p default margin */
.footer-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.footer-link:hover { text-decoration-thickness: 2px; }
.footer-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Stack on very small screens */
@media (max-width: 520px) {
  .site-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
}

.site-title {
  margin: 0.2rem 0 0;
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  font-family: Helvetica, Arial, sans-serif; /* title only */
  font-weight: 400;                           /* not bold */
}

/* Enable smooth anchor scrolling */
html { scroll-behavior: auto; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
/* ===============================
   FULL SCREEN INTRO (BEGIN)
   Delete this block if you remove the intro.
   =============================== */
.intro {
  min-height: 100svh;              /* full viewport height incl. mobile UI */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;              /* for the scroll cue positioning */
  padding: 24px;
}

.intro__inner {
  max-width: var(--content-max);
  width: 100%;
  text-align: center;              /* centered horizontally */
}

.intro__title {
  margin: 0 0 28px; /* increased space below the title */
  font-size: clamp(1.8rem, 4.5vw, 2.4rem);
  font-weight: 500;
  line-height: 1.15;
  font-family: Helvetica, Arial, sans-serif;
}

.intro__email {
  color: #7851A9;
  text-decoration: none;
}

.intro__text {
  margin: 0 auto;
  max-width: 68ch;                  /* comfortable line length */
  color: var(--text);
}
.intro__text p { margin: 0 0 24px; }

/* Scroll cue at the bottom center of the intro */
.intro__cue {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  text-decoration: none;
  color: inherit;
  background: rgba(255,255,255,0.5);
  border: 1px solid var(--line);
  padding: 6px 12px;
  border-radius: 999px;
}
.intro__cue:hover { background: rgba(255,255,255,0.7); }

/* Intro logo replaces the text title */
.intro__logo {
  display: block;
  margin: 0 auto 18px;           /* space below the logo */
  width: clamp(320px, 47vw, 1400px);
  height: auto;
  max-width: 100%;                /* never overflow container */
  image-rendering: auto;
}

/* Make the intro logo slightly larger on phones */
@media (max-width: 600px) {
  .intro__logo {
    width: clamp(300px, 70vw, 560px); /* was 42vw on all sizes */
  }
  /* optional: give it a touch more breathing room */
  .intro { padding: 16px; }
}

/* Keep some space between logo/title and the intro text */
.intro__text { margin-top: 40px; }

/* ===============================
   FULL SCREEN INTRO (END)
   =============================== */

/* =========================
   GRID
   - Responsive grid using auto-fill + minmax so it adapts to screen size.
   - Increase/decrease --card-min to change density (more columns vs larger cards).
   ========================= */
   .grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(var(--card-min), 1fr));
     gap: var(--grid-gap);
     max-width: var(--content-max);
     margin: 0 auto;
     padding: 16px clamp(12px, 3vw, 24px) 48px;
     align-items: start; /* key: prevents grid items from stretching vertically */
   }

/* =========================
   CARD
   - Each book is a "card" with: cover image + meta (title, price/SOLD).
   - aspect-ratio keeps consistent cover shape even before the image loads.
   ========================= */
   .card {
     display: block;            /* important: not a grid; the image defines the height */
     text-decoration: none;
     color: inherit;
     background: #ffffff;
     border: 0;
     border-radius: var(--radius);
     box-shadow: none;
     overflow: hidden;          /* clean clipped edges around the image */
     transition: none;
   }
.card:hover { }
.card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.card__cover {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;      /* common book ratio; change to 3/4 if your images are taller */
  background: #ffffff;      /* light grey while image loads */
}
.card__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* fill area without distortion */
  display: block;
}

.book__carousel { display: none; }

@media (max-width: 859px) {
  /* Show the mobile strip; hide desktop main + thumbs */
  .book__carousel { display: flex; }
  .book__main { display: none; }
  .book__thumbs { display: none; } /* we'll reinforce this below */

  .book__carousel {
    overflow-x: auto;
    /* natural scroll: NO scroll snap */
    -webkit-overflow-scrolling: touch;
    gap: 1px;                  /* tiny gap between images */
    padding: 0 8px 10px;       /* small side/bottom padding */
    scrollbar-gutter: stable;  /* keeps layout steady when scrollbar shows */
  }

  .book__slide {
    flex: 0 0 auto;            /* width follows the image’s intrinsic width */
  }

  .book__slide img {
    display: block;
    width: auto;               /* key: width adjusts to height & aspect ratio */
    height: min(60vh, 520px);  /* fallback */
    height: min(60svh, 520px); /* modern viewport unit */
    object-fit: contain;
    /* remove borders/radius so images sit snugly next to each other */
    border: 0;
    border-radius: 0;
    background: transparent;
  }
}


/* Small SOLD badge on the corner of the image */
.badge-sold {
  position: absolute;
  top: 8px; left: 8px;
  background: var(--sold);
  color: #fff;
  font-weight: 600;
  font-size: 0.72rem;
  padding: 4px 8px;
  border-radius: 999px;
  letter-spacing: .02em;
}

/* Wrapper so the image card sits above the text/price */
.tile { display: grid; gap: 8px; }

.card-info {
  display: grid;
  grid-template-columns: 1fr;     /* single column: title then price below */
  align-items: start;
  gap: 3px;                       /* tighter gap between title and price */
  padding: 0 4px;
}

.card-info__title {
  font-size: 0.98rem;
  line-height: 1.25;
  color: inherit;
  text-decoration: none;
  margin: 0;                      /* ensure no extra spacing above/below */
}
.card-info__title:hover { text-decoration: underline; }

.card-info__author {
  font-size: 0.9rem;        /* slightly smaller than title */
  color: var(--muted);      /* grey, like other secondary text */
  margin: 0;                /* no extra vertical spacing */
  line-height: 1.3;
}
.card-info__price {
  font-size: 0.95rem;             /* slightly smaller than title (optional) */
}

/* Price: not bold, normal text colour, can wrap to next line if long */
/* OPTION A: accent + size + tidy numerals */
.card-info__price .card__price {
  font-weight: 400;                 /* still not bold */
  color: var(--text);   /* uses your main text colour (#111111) */
  font-size: 1.02rem;               /* subtle bump */
  line-height: 1.2;
  font-variant-numeric: tabular-nums; /* cleaner pricing alignment */
  letter-spacing: 0.01em;           /* tiny tracking for clarity */
}


/* Keep SOLD prominent */
.card-info__price .card__sold {
  font-weight: 800;
  color: var(--sold);
}


/* =========================
   PAGINATION
   - Buttons styled as simple pills; current page has aria-current="page".
   ========================= */
.pagination {
  display: flex;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 8px 16px 32px;
  max-width: var(--content-max);
  margin: 0 auto;
}
.page-btn {
  display: inline-block;
  padding: 8px 12px;
  background: #fff;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 999px;
  text-decoration: none;
}
.page-btn:hover { background: #f8fafc; }
.page-btn[aria-current="page"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(14,165,233,.15);
}

/* =========================
   BOOK DETAIL PAGE
   - Simple two-column layout on large screens, single column on mobile.
   ========================= */
.book {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px clamp(12px, 3vw, 24px) 48px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 860px) {
  .book {
    grid-template-columns: 400px 1fr;
    align-items: start;
  }
}

/* Even larger on big screens */
@media (min-width: 1200px) {
  .book {
    grid-template-columns: 480px 1fr; /* nice, spacious cover */
  }
}

/* Gallery wrapper on the left side */
.book__gallery { display: grid; gap: 10px; }

/* Main image area (fixed book ratio) */
.book__main {
  width: 100%;
  aspect-ratio: 2 / 3;
  background: #f3f4f6;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.book__main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Horizontal, scrollable thumbnail strip */
.book__thumbs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px; /* space for scrollbar if visible */
}
.book__thumbs::-webkit-scrollbar { height: 8px; }
.book__thumbs::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 999px; }

/* Each thumbnail is a button for accessibility */
.thumb {
  border: 1px solid var(--line);
  background: #fff;
  padding: 0;
  border-radius: calc(var(--radius) - 2px);
  cursor: pointer;
  flex: 0 0 auto;            /* prevent shrinking; keep natural width */
  width: 68px;               /* small square-ish thumbs; adjust to taste */
  height: 68px;
  overflow: hidden;
}
.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Selected thumb state */
.thumb[aria-selected="true"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(14,165,233,.18);
}


.book__meta h1 { margin: 0 0 6px; font-size: clamp(1.25rem, 2.4vw, 1.6rem); font-weight: 500;}
.book__author { color: var(--muted); margin: 0 0 12px; }
.book__price { font-weight: 550; font-size: 1.05rem; margin: 6px 0 16px; color: var(--price); }
.book__sold  { font-weight: 900; color: var(--sold); margin: 6px 0 16px; }

.book__actions { margin-top: 12px; }

/* “Back to Books” link at the top */
.back-link {
  text-decoration: none;
  color: inherit;
  display: inline-block;
  margin-right: 10px;
}
.back-link:hover { text-decoration: underline; }

.book__desc {
  margin-top: 12px;
  color: var(--text);
}

.book__desc p {
  margin: 0 0 10px;
}

.book__desc a {
  color: var(--accent);
  text-decoration: underline;
}

.book__desc strong { font-weight: 600; }
.book__desc em { font-style: italic; }

/* Force-hide thumbs on mobile (placed AFTER the general .book__thumbs rules) */
@media (max-width: 859px) {
  .book__gallery .book__thumbs { display: none !important; }
}

.footer-link,
.footer-link:visited {
  color: #7851A9;              /* same purple as intro */
  text-decoration: none;
  text-underline-offset: 2px;
}
/* Show underline on hover */
.footer-link:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}
/* Keep a clear keyboard focus */
.footer-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

/* Default alignment */
.book__actions { text-align: left; }

/* Desktop: ensure right-column alignment */
@media (min-width: 860px) {
  .book__meta { display: flex; flex-direction: column; gap: 12px; }
  .book__actions { align-self: flex-start; } /* prevents centering */
}

/* Common third-party widget fixes (Shopify/iframe etc.) */
.book__actions iframe,
.book__actions .shopify-buy-frame,
.book__actions .shopify-buy__btn,
.book__actions button,
.book__actions a {
  display: inline-block;   /* don’t stretch full width */
  margin: 0;               /* remove auto-centering margins */
}

/* Default: mobile */
#buy-button-desktop { display: none; }
#buy-button-mobile  { display: block; }

@media (min-width: 860px) {
  #buy-button-desktop { display: block; }
  #buy-button-mobile  { display: none; }
}

/* Desktop: center the Shopify Buy Button inside the right column */
@media (min-width: 860px) {
  #buy-button-desktop {
    display: flex;              /* use the column’s width */
    justify-content: center;    /* center the content */
  }
  /* Nudge common Shopify wrappers/buttons to not left-offset themselves */
  #buy-button-desktop .shopify-buy__product { margin: 0 !important; max-width: none !important; }
  #buy-button-desktop .shopify-buy__btn,
  #buy-button-desktop button,
  #buy-button-desktop a,
  #buy-button-desktop iframe {
    display: inline-block;
    margin: 0 auto !important;  /* center if any element uses block layout */
  }
}

/* Default: desktop stack off (mobile uses the carousel you already have) */
.book__stack { display: none; }

/* Desktop: show vertical stack, hide old main + thumbs; make right column sticky */
@media (min-width: 860px) {
  /* Left column = stacked images you scroll down through */
  .book__stack {
    display: grid;
    gap: 0px;                 /* space between images */
  }
  .book__panel img {
    display: block;
    width: 100%;
    height: auto;              /* natural height for vertical scrolling */
    object-fit: contain;
  }

  /* Retire the old desktop main + thumbnails */
  .book__main,
  .book__thumbs {
    display: none;
  }

  /* Keep the right column pinned while the left scrolls */
  .book__meta {
    position: sticky;
    top: clamp(12px, 4vh, 40px);    /* adjust offset to taste */
    align-self: start;              /* ensure the grid item doesn't stretch */
    display: flex;                  /* your previous layout tweaks still apply */
    flex-direction: column;
    gap: 12px;
  }
}

/* Desktop vertical stack — ultra-tight spacing */
@media (min-width: 860px) {
  /* Almost no gap (set to 0 for zero) */
  .book__stack { gap: 2px; }        /* try 1px or 0 */

  /* Remove default figure margins */
  .book__panel { margin: 0; }

  /* Remove borders/radius so images butt up cleanly */
  .book__panel img {
    border: 0;
    border-radius: 0;
    background: transparent;        /* was #fff; make seamless */
  }
}

@media (max-width: 859px) {
  .book__carousel { gap: 2px; }     /* or 1px / 0 */
  .book__slide { margin: 0; }
  .book__slide img { border: 0; border-radius: 0; }
}

/* Desktop: tighter meta spacing (title / author / price / description) */
@media (min-width: 860px) {
  .book__meta {
    gap: 6px;                 /* was ~12px — tighten the whole column */
  }

  .book__meta h1 {
    margin: 0 0 2px;          /* title → author */
    line-height: 1.15;        /* slightly tighter lines */
  }

  .book__author {
    margin: 0 0 6px;          /* author → price */
  }

  .book__price,
  .book__sold {
    margin: 2px 0 8px;        /* price/sold → description */
  }

  /* Description spacing */
  .book__desc { margin-top: 6px; }
  .book__desc p { margin: 0 0 6px; }  /* paragraphs inside description */
}

/* Rounder, thicker page bubbles */
.page-btn {
  display: flex;                 /* center the number */
  align-items: center;
  justify-content: center;

  padding: 6px;                  /* equal padding → more circular */
  min-width: 32px;               /* keep width close to height */
  height: 32px;

  border-radius: 999px;          /* full pill/circle */
  border-width: 2px;             /* thicker grey border */
}

/* Selected page: thicker, stronger blue ring */
.page-btn[aria-current="page"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(14,165,233,.25);  /* larger halo */
}

/* Mobile: show 2 columns so more books are visible at once */
@media (max-width: 600px) {
  .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* force 2 columns */
    gap: 12px;                                        /* slightly tighter spacing */
    padding: 16px 12px 32px;                          /* a bit less side padding */
  }
}

@media (max-width: 600px) {
  .card-info__title {
    font-size: 0.9rem;
  }
  .card-info__author {
    font-size: 0.8rem;
  }
  .card-info__price {
    font-size: 0.85rem;
  }
}

/* Tablet + Desktop: always 4 columns */
@media (min-width: 601px) {
  .grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Desktop: compact style when the right column is too tall */
@media (min-width: 860px) {

  /* NEW: soft compact — mild tightening */
.book__meta--compact-soft {
  gap: 10px; /* slightly tighter than normal (12px) */
}

.book__meta--compact-soft h1 {
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  margin: 0 0 4px;
  line-height: 1.18;
}

.book__meta--compact-soft .book__author {
  font-size: 0.95rem;
  margin: 0 0 6px;
  line-height: 1.35;
}

.book__meta--compact-soft .book__price,
.book__meta--compact-soft .book__sold {
  font-size: 0.95rem;
  margin: 4px 0 8px;
}

.book__meta--compact-soft .book__desc {
  margin-top: 6px;
}

.book__meta--compact-soft .book__desc p {
  margin: 0 0 6px;
  line-height: 1.4;
}

.book__meta--compact-soft .book__actions {
  margin-top: 10px;
}
  .book__meta--compact {
    gap: 6px; /* tighter overall spacing */
  }

  .book__meta--compact h1 {
    font-size: clamp(1.05rem, 2vw, 1.3rem);
    margin: 0 0 2px;
    line-height: 1.15;
  }

  .book__meta--compact .book__author {
    font-size: 0.9rem;
    margin: 0 0 4px;
    line-height: 1.3;
  }

  .book__meta--compact .book__price,
  .book__meta--compact .book__sold {
    font-size: 0.9rem;
    margin: 2px 0 6px;
  }

  .book__meta--compact .book__desc {
    margin-top: 4px;
  }

  .book__meta--compact .book__desc p {
    margin: 0 0 4px;
    line-height: 1.3;
  }

  .book__meta--compact .book__actions {
    margin-top: 8px;
  }
}
/* =========================
   STORE NOTICE TICKER (Mobile-first)
   ========================= */

/* MOBILE: static multi-line box, single copy of text */
.ticker {
  background: #ada4ae; /* pastel purple */
  color: #ffffff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: .9rem;
  line-height: 1.5;
  padding: 10px 14px;
  margin: 0 14px;              /* ← add margin so it doesn't touch screen edges */
  border-radius: 6px;           /* optional: nicer shape */
  overflow: visible;
}

/* On mobile, only show the FIRST .ticker__item */
.ticker__track {
  white-space: normal;          /* wrap text */
  animation: none;              /* no movement */
}

.ticker__item {
  display: block;
  padding: 0;
}

/* Hide duplicate copy on mobile */
.ticker__item:nth-child(2) {
  display: none;
}

/* =========================
   DESKTOP: marquee scrolling
   ========================= */
@media (min-width: 860px) {

  .ticker {
    margin: 0;                 /* full width */
    padding: 0;
    border-radius: 0;
    overflow: hidden;
  }

  .ticker__track {
    display: inline-block;
    white-space: nowrap;
    animation: ticker-scroll 40s linear infinite;
    padding-block: 4px;
  }

  .ticker__item {
    padding-inline: 2rem;
    display: inline-block;
  }

  /* Show the second copy again for seamless scroll */
  .ticker__item:nth-child(2) {
    display: inline-block;
  }
}

/* Reduced motion users */
@media (prefers-reduced-motion: reduce) {
  .ticker__track {
    animation: none !important;
    transform: translateX(0) !important;
  }
}

@keyframes ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}