/* Book lists (class page and cart): one card per book, store prices side by side */

.book-list { max-width: 980px; margin: 0 auto; text-align: left; }

.book-card {
    display: grid;
    grid-template-columns: 64px 1fr;
    grid-template-areas: "cover info" "stores stores";
    column-gap: 12px;
    padding: 16px 0;
    border-bottom: 1px solid #eee;
}
.book-cover { grid-area: cover; }
.book-cover img { width: 64px; height: auto; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.book-cover .no-cover {
    width: 64px; height: 88px; border-radius: 4px; background: #f3f3f3;
    display: flex; align-items: center; justify-content: center; color: #bbb;
}
.book-info { grid-area: info; min-width: 0; }
.book-subject { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: #888; margin-bottom: 2px; }
.book-subject .badge-new {
    display: inline-block; margin-left: 4px; padding: 1px 6px; border-radius: 10px;
    background: #e8f4fd; color: #1f6fb2; font-size: 10px; letter-spacing: 0; vertical-align: 1px;
}
.book-title { font-size: 16px; line-height: 1.3; font-weight: 600; margin: 0 0 4px; overflow-wrap: anywhere; }
.book-title a { color: #c62f2f; }
.book-meta { font-size: 12px; line-height: 1.5; color: #666; }
.book-meta strong { color: #444; font-weight: 600; }
.book-remove {
    display: inline-block; margin-top: 4px; padding: 0; border: 0; background: none;
    color: #999; font-size: 12px; text-decoration: underline; cursor: pointer;
}
.book-remove:hover { color: #c62f2f; }

/* Store prices */
.store-grid { grid-area: stores; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; }
.store-cell { min-width: 0; }
.store-tile {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    height: 100%; min-height: 66px; padding: 8px 4px; border: 1px solid #ddd; border-radius: 8px;
    background: #fff; color: #333; text-align: center; text-decoration: none !important; line-height: 1.2;
    transition: border-color .15s, box-shadow .15s;
}
a.store-tile:hover, a.store-tile:focus { border-color: #999; box-shadow: 0 1px 4px rgba(0,0,0,.12); color: #333; }
.store-name { font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: #777; }
.store-price { margin: 3px 0 2px; font-size: 17px; font-weight: 700; color: #222; white-space: nowrap; }
.store-price strong { font-weight: 700; }
.store-cta { font-size: 11px; color: #c62f2f; font-weight: 600; white-space: nowrap; }
.store-tile.is-muted { background: #fafafa; border-style: dashed; }
.store-tile.is-muted .store-price { font-size: 12px; font-weight: 400; color: #999; white-space: normal; }
.store-tile.is-search .store-price { font-size: 13px; font-weight: 600; color: #444; white-space: normal; }
.store-tile.is-best { border: 2px solid #2e9e4f; background: #f1fbf4; padding-top: 14px; }
.store-tile.is-best .store-cta { color: #2e9e4f; }
.store-tile { position: relative; }
.store-tile.is-best::after {
    content: "✓ più conveniente"; position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
    padding: 1px 7px; border-radius: 9px; background: #2e9e4f; color: #fff;
    font-size: 10px; font-weight: 700; line-height: 16px; white-space: nowrap;
}

.store-amazon .store-name { color: #c45500; }
.store-libraccio .store-name { color: #8a5a00; }
.store-mondadoristore .store-name { color: #b0262b; }

@media (min-width: 768px) {
    .book-card { grid-template-columns: 80px 1fr 400px; grid-template-areas: "cover info stores"; column-gap: 20px; align-items: start; }
    .book-cover img, .book-cover .no-cover { width: 80px; }
    .book-cover .no-cover { height: 110px; }
    .store-grid { margin-top: 0; }
    .book-title { font-size: 17px; }
}

/* Page header of the class page */
.list-header { max-width: 980px; margin: 0 auto; }
.list-header .breadcrumb { background: none; padding: 0; margin: 0 0 12px; font-size: 12px; text-align: left; }
.list-header h1 { font-size: 24px; line-height: 1.25; margin: 0 0 6px; font-weight: 700; }
.list-header .school { font-size: 16px; color: #444; margin: 0 0 4px; font-weight: 600; }
.list-header .school-meta { font-size: 13px; color: #888; margin: 0 0 16px; }
@media (min-width: 768px) {
    .list-header h1 { font-size: 32px; }
    .list-header .school { font-size: 19px; }
}

.list-actions { display: grid; grid-template-columns: 1fr; gap: 10px; max-width: 520px; margin: 0 auto 16px; }
.list-actions form { margin: 0; }
.action-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
    min-height: 48px; padding: 10px 16px; border: 0; border-radius: 8px;
    font-size: 16px; font-weight: 600; line-height: 1.2; text-decoration: none !important; cursor: pointer;
}
.action-btn svg { flex: 0 0 auto; width: 20px; height: 20px; }
.action-amazon { background: #ffa41c; color: #111 !important; }
.action-amazon:hover { background: #fa8900; }
.action-cart { background: #ce3939; color: #fff !important; }
.action-cart:hover { background: #b32e2e; }
.action-share { background: #fff; color: #333 !important; border: 1px solid #ccc; }
.action-share:hover { border-color: #888; }
@media (min-width: 768px) {
    .list-actions { grid-template-columns: 1fr 1fr; max-width: 640px; }
    .list-actions .action-amazon-wrap { grid-column: 1 / -1; }
}

.list-totals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-width: 520px; margin: 0 auto 8px; }
.total-tile { padding: 8px 4px; border-radius: 8px; background: #f6f6f6; text-align: center; line-height: 1.25; }
.total-tile .store-name { display: block; }
.total-tile .total-price { display: block; font-size: 18px; font-weight: 700; color: #222; white-space: nowrap; }
.total-tile .total-count { display: block; font-size: 11px; color: #888; }
.list-note { max-width: 520px; margin: 0 auto 8px; font-size: 12px; color: #888; }

.other-classes { max-width: 980px; margin: 24px auto 0; text-align: left; }
.other-classes h3 { font-size: 18px; }
.other-classes .combo { margin-bottom: 10px; font-size: 14px; }
.other-classes .combo-name { display: block; font-weight: 600; margin-bottom: 4px; }
.other-classes .class-chip {
    display: inline-block; margin: 0 4px 6px 0; padding: 4px 10px; border: 1px solid #ddd; border-radius: 14px;
    color: #c62f2f; text-decoration: none; font-size: 14px;
}
.other-classes .class-chip.is-current { background: #ce3939; border-color: #ce3939; color: #fff; }

@media (max-width: 767px) {
    .list-header .breadcrumb { white-space: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .list-header .breadcrumb > li { display: inline; }
}

/* Store logos instead of names */
.store-logo { display: block; width: auto; max-width: 88%; height: 16px; margin: 0 auto; object-fit: contain; }
.store-tile .store-name, .total-tile .store-name { display: flex; align-items: center; justify-content: center; height: 20px; }
.store-tile.is-muted .store-logo { opacity: .45; filter: grayscale(1); }
@media (min-width: 768px) { .store-logo { height: 18px; } }

/* Book page */
.book-page { max-width: 820px; margin: 0 auto; text-align: left; }
.book-page .breadcrumb { background: none; padding: 0; margin: 0 0 14px; font-size: 12px; }
.book-hero { display: grid; grid-template-columns: 110px 1fr; gap: 16px; align-items: start; }
.book-page .book-cover img { width: 110px; height: auto; border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.book-page .book-cover .no-cover { width: 110px; height: 150px; border-radius: 6px; }
.book-page h1.book-title { font-size: 20px; line-height: 1.3; font-weight: 700; color: #222; margin: 0 0 8px; }
.book-page .book-meta { font-size: 13px; }
.book-add { margin-top: 14px; max-width: 280px; }
.offers-title { font-size: 18px; font-weight: 700; margin: 26px 0 12px; }

.offer-list { display: grid; gap: 10px; }
.offer-list .store-tile {
    flex-direction: row; justify-content: flex-start; gap: 12px; min-height: 68px;
    padding: 12px 14px; text-align: left; height: auto;
}
.offer-list .store-name { flex: 0 0 92px; height: 24px; justify-content: flex-start; }
.offer-list .store-logo { margin: 0; max-width: 92px; height: 20px; }
.offer-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.offer-list .store-price { margin: 0; font-size: 20px; }
.offer-list .store-tile.is-muted .store-price { font-size: 14px; }
.offer-list .store-tile.is-search .store-price { font-size: 15px; }
.offer-note { font-size: 12px; color: #777; line-height: 1.3; margin-top: 2px; }
.offer-list .store-cta {
    flex: 0 0 auto; padding: 9px 14px; border-radius: 8px; background: #ce3939; color: #fff;
    font-size: 14px; font-weight: 700;
}
.offer-list .store-tile.is-best { padding-top: 12px; }
.offer-list .store-tile.is-best .store-cta { background: #2e9e4f; color: #fff; }
.offer-list .store-tile.is-best::after { left: 14px; transform: none; }

.book-details { display: grid; grid-template-columns: 110px 1fr; gap: 8px 12px; font-size: 14px; margin: 0; }
.book-details dt { color: #888; font-weight: 400; }
.book-details dd { margin: 0; color: #333; overflow-wrap: anywhere; }
.book-description { font-size: 14px; line-height: 1.6; color: #444; }

@media (min-width: 768px) {
    .book-hero { grid-template-columns: 200px 1fr; gap: 28px; }
    .book-page .book-cover img, .book-page .book-cover .no-cover { width: 200px; }
    .book-page .book-cover .no-cover { height: 270px; }
    .book-page h1.book-title { font-size: 28px; }
    .book-page .book-meta { font-size: 15px; }
    .offer-list .store-name { flex-basis: 120px; }
    .offer-list .store-logo { max-width: 120px; height: 24px; }
}

/* The old theme adds ::before/::after (clearfix) that would become grid cells */
.book-hero::before, .book-hero::after, .book-card::before, .book-card::after,
.offer-list::before, .offer-list::after, .store-grid::before, .store-grid::after,
.list-totals::before, .list-totals::after, .list-actions::before, .list-actions::after { content: none; display: none; }
.book-hero .book-cover, .book-hero .book-info { grid-area: auto; }

/* Book page: big cover (on phones above the title, centred) */
.book-hero { grid-template-columns: 1fr; }
.book-page .book-cover { text-align: center; }
.book-page .book-cover img { width: 100%; max-width: 300px; }
.book-page .book-cover .no-cover { width: 220px; height: 300px; margin: 0 auto; }
.book-page .book-info { text-align: left; }
@media (min-width: 768px) {
    .book-hero { grid-template-columns: 400px 1fr; gap: 32px; }
    .book-page .book-cover img { width: 400px; max-width: 100%; }
    .book-page .book-cover .no-cover { width: 300px; height: 410px; }
}
.book-page .list-note { max-width: none; margin: 10px 0 0; }