



.book-card img { aspect-ratio: 3/5; object-fit: cover; width: 100%; }
.book-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1.5rem; }
.book-card h3 { font-size: 1rem; margin: 0.5rem 0 0.25rem; line-height: 1.3; }
.book-card .authors { font-size: 0.85rem; color: var(--pico-muted-color); margin: 0; }
.book-card .price { font-size: 0.95rem; font-weight: 600; margin-top: 0.25rem; }
.book-card a { text-decoration: none; color: inherit; }
.book-card a:hover h3 { color: var(--pico-primary); }


.home-hero { margin-bottom: 2.5rem; }

.home-hero-photo {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  height: 260px;
  background: var(--pico-primary);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.home-hero-photo img {
  display: block;
  flex-shrink: 0;
  width: 1920px;
  height: 260px;
}
@media (max-width: 900px) {
  .home-hero-photo { height: 360px; }
  
  .home-hero-photo img { width: 100%; height: 360px; object-fit: cover; object-position: right center; }
}
.home-hero-text { padding: 1.5rem 0 0; }
.home-hero-text h1 { margin: 0 0 0.25rem; }
.home-hero-slogan { color: var(--pico-muted-color); margin: 0 0 1.25rem; font-size: 1.15rem; }
.home-hero-search { display: flex; gap: 0.5rem; max-width: 640px; margin: 0; }
.home-hero-search input { flex: 1; margin: 0; }
.home-hero-search button { margin: 0; flex: 0 0 auto; padding-left: 1.5rem; padding-right: 1.5rem; }


body.home .header-search { display: none; }


.btn-compact { max-width: 450px; }


.request-book-cta { margin-top: 2.5rem; padding-top: 1.5rem;
                     border-top: 1px solid var(--pico-muted-border-color);
                     color: var(--pico-muted-color); }
.request-book-cta a { font-weight: 600; }

.request-book-cta-empty { margin-top: 2rem; padding: 1.25rem 1.5rem;
                            background: var(--pico-card-background-color);
                            border: 1px solid var(--pico-muted-border-color);
                            border-radius: 6px; }
.request-book-cta-empty p:last-child { margin-bottom: 0; }
.request-book-cta-empty .cta-button { display: inline-block; }


.genre-nav { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 2rem; }
.genre-nav a { padding: 0.3rem 0.75rem; border: 1px solid var(--pico-muted-border-color); font-size: 0.9rem; text-decoration: none; }


.book-detail-grid { display: grid; grid-template-columns: minmax(200px, 1fr) 2fr; gap: 2rem; margin-bottom: 2rem; }
@media (max-width: 640px) { .book-detail-grid { grid-template-columns: 1fr; } }
.book-detail-images img { width: 100%; margin-bottom: 0.5rem; }
.book-detail-extra-images { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.75rem; margin: 1.5rem 0; }
.book-detail-extra-images img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: var(--pico-card-background-color); }
.book-detail dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.3rem 1rem; margin: 1rem 0; }
.book-detail dt { color: var(--pico-muted-color); font-size: 0.9rem; }
.book-detail dd { margin: 0; font-size: 0.95rem; }


footer small { color: var(--pico-muted-color); }
.search-form { flex: 1; max-width: 400px; margin: 0; }
.search-form input { margin-bottom: 0; }
.toolbar { display: flex; justify-content: space-between; align-items: center; margin: 1rem 0; gap: 1rem; flex-wrap: wrap; }
.toolbar .count { color: var(--pico-muted-color); font-size: 0.9rem; }
.toolbar .sort-form { display: flex; align-items: center; gap: 0.5rem; margin: 0; }
.toolbar .sort-form select { margin: 0; min-width: 200px; }
.pagination { display: flex; justify-content: center; align-items: center; gap: 1.5rem; margin: 2rem 0; }
.pagination span { color: var(--pico-muted-color); }


#cookie-notice { position: fixed; bottom: 0; left: 0; right: 0; padding: 0.6rem 1rem;
                 background: var(--pico-card-background-color); border-top: 1px solid var(--pico-muted-border-color);
                 display: none; font-size: 0.85rem; z-index: 100; }
#cookie-notice.show { display: flex; gap: 1rem; align-items: center; justify-content: center; flex-wrap: wrap; }
#cookie-notice p { margin: 0; color: var(--pico-muted-color); }
#cookie-notice button { margin: 0; padding: 0.2rem 0.8rem; font-size: 0.85rem; }


.theme-cycle { background: transparent; color: var(--pico-muted-color);
                border: 1px solid var(--pico-muted-border-color);
                padding: 0.35rem 0.5rem; cursor: pointer; margin: 0;
                display: inline-flex; align-items: center; justify-content: center;
                line-height: 0; }
.theme-cycle:hover, .theme-cycle:focus-visible { color: var(--pico-primary);
                                                 border-color: var(--pico-primary); outline: none; }
.theme-cycle svg { width: 1.1rem; height: 1.1rem; display: none; }
.theme-cycle[data-theme-current="auto"]  svg[data-theme-icon="auto"]  { display: block; }
.theme-cycle[data-theme-current="light"] svg[data-theme-icon="light"] { display: block; }
.theme-cycle[data-theme-current="dark"]  svg[data-theme-icon="dark"]  { display: block; }


.cart-badge { display: inline-block; min-width: 1.4em; padding: 0.05em 0.4em;
              margin-left: 0.25em; border-radius: 999px; font-size: 0.8em;
              font-weight: 600; line-height: 1.2; text-align: center;
              background: var(--pico-muted-border-color); color: var(--pico-color); }
.cart-badge-warn { background: #d49a5e; color: #1a1a1a; }
.cart-badge-block { background: #c0392b; color: #fff; }


.site-nav { display: flex; align-items: center; gap: 1rem; flex-wrap: nowrap; padding: 0.5rem 0; position: relative; }

.site-logo { flex: 0 1 auto; min-width: 0; overflow: hidden;
              text-decoration: none; line-height: 1; }
.logo-text { font-family: 'Rationale', system-ui, sans-serif; font-weight: 400;
              font-size: 5rem; letter-spacing: 0.02em;
              white-space: nowrap; display: inline-block; }
.header-search { flex: 1 1 auto; max-width: 400px; margin: 0; }
.header-search input { margin-bottom: 0; }
.header-actions { display: flex; align-items: center; gap: 1rem; list-style: none; padding: 0; margin: 0; flex: 0 0 auto; }
.header-actions > li { padding: 0; margin: 0; }
.cart-icon-mobile { display: none; }


.mobile-menu { display: none; }

.mobile-menu summary { list-style: none; cursor: pointer;
                        padding: 0.5rem;
                        display: inline-flex; align-items: center; line-height: 0;
                        color: var(--pico-color); }
.mobile-menu summary::-webkit-details-marker { display: none; }
.mobile-menu summary::after { display: none !important; content: none !important;
                                background: none !important; }
.mobile-menu summary svg { stroke: currentColor; width: 24px; height: 24px; }
.mobile-menu summary:hover, .mobile-menu summary:focus-visible {
  color: var(--pico-primary); outline: none;
}
.mobile-menu-panel { position: absolute; top: calc(100% + 0.25rem); left: 0; right: 0;
                      padding: 1rem; background: var(--pico-card-background-color);
                      border: 1px solid var(--pico-muted-border-color); border-radius: 6px;
                      box-shadow: 0 6px 16px rgba(0,0,0,0.15); z-index: 50; }
.mobile-menu-panel form { margin: 0 0 0.75rem; }
.mobile-menu-panel form input { margin: 0; }

.mobile-menu-links { list-style: none; padding: 0; margin: 0;
                      display: block; }
.mobile-menu-links li { padding: 0.5rem 0; margin: 0; display: block;
                          border-bottom: 1px solid var(--pico-muted-border-color); }
.mobile-menu-links li:last-child { border-bottom: none; }
.mobile-menu-links a { text-decoration: none; display: block; }
.mobile-menu-theme { margin-top: 0.75rem; padding-top: 0.75rem;
                      border-top: 1px solid var(--pico-muted-border-color); }


@media (max-width: 900px) {
  
  .site-nav { gap: 0.5rem; justify-content: space-between; padding-left: 0.5rem; padding-right: 0.5rem; }
  .mobile-menu { display: block; }
  .header-search { display: none; }
  .header-action-desktop { display: none; }
  .cart-text-desktop { display: none; }
  
  #cart-link { display: inline-flex; align-items: center; padding: 0.5rem; margin: 0;
                color: var(--pico-color); text-decoration: none; }
  #cart-link:hover, #cart-link:focus-visible { color: var(--pico-primary); outline: none; }
  .cart-icon-mobile { display: inline-flex; align-items: center; }
  
  .cart-icon-mobile svg { width: 24px; height: 24px; transform: translateY(-3px); }
  
  .site-logo { flex: 1 1 0; text-align: center; }
  .logo-text { font-size: 2.5rem; }
}
