/* E-Books › clean modern shelves (dropdown / row / slider styles come from storefront-products.css) */

.eb-page { background: #f6f7f9; min-height: 70vh; padding-bottom: 3rem; --shop-theme-primary: #0f766e; }

.eb-head { display: flex; align-items: center; gap: 1rem; padding-top: 1.4rem; padding-bottom: 1rem; flex-wrap: wrap; }
.eb-head__title { display: flex; align-items: baseline; gap: .6rem; margin-right: auto; }
.eb-head__title h1 { margin: 0; font-size: 1.8rem; font-weight: 800; letter-spacing: -.02em; color: #111827; }
.eb-head__title span { font-size: .9rem; font-weight: 700; color: #9ca3af; }
.eb-search { position: relative; flex: 1 1 320px; max-width: 520px; }
.eb-search input { width: 100%; height: 48px; padding: 0 3.2rem 0 1.15rem; border: 1.5px solid #e5e7eb; border-radius: 999px; background: #fff; font-size: 1rem; outline: none; transition: border-color .15s, box-shadow .15s; }
.eb-search input:focus { border-color: var(--shop-theme-primary); box-shadow: 0 0 0 4px rgba(15, 118, 110, .1); }
.eb-search button { position: absolute; right: 5px; top: 5px; width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--shop-theme-primary); color: #fff; cursor: pointer; }
.eb-bar .sf-bar__in { flex-wrap: wrap; }
.eb-clear { display: inline-flex; align-items: center; height: 46px; padding: 0 .8rem; color: #dc2626; font-weight: 700; text-decoration: none; }
.eb-main { padding-top: 1.1rem; display: flex; flex-direction: column; gap: 1.2rem; }
.sf-dd__item.is-child { padding-left: 1.6rem; font-weight: 500; }

/* Spotlight */
.eb-spot { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 1.6rem; align-items: center; padding: 1.4rem; border-radius: 22px; background: linear-gradient(135deg, #ecfdf5 0%, #f0f9ff 60%, #fff 100%); border: 1px solid #e2f3ee; }
.eb-spot__cover { position: relative; display: block; aspect-ratio: 2 / 3; border-radius: 12px; overflow: hidden; background: linear-gradient(135deg, #0f766e, #134e4a); box-shadow: 0 18px 40px rgba(15, 23, 42, .25), 0 3px 8px rgba(15, 23, 42, .12); transform: rotate(-2deg); transition: transform .3s; }
.eb-spot__cover:hover { transform: rotate(0) scale(1.02); }
.eb-spot__cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.eb-spot__info { display: flex; flex-direction: column; gap: .55rem; min-width: 0; }
.eb-spot__info em { font-style: normal; font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--shop-theme-primary); }
.eb-spot__info h2 { margin: 0; font-size: clamp(1.4rem, 2.8vw, 2.2rem); font-weight: 800; line-height: 1.25; text-wrap: balance; }
.eb-spot__info h2 a { color: #111827; text-decoration: none; }
.eb-spot__info p { margin: 0; color: #4b5563; font-weight: 600; }
.eb-spot__info .dz-card__now { font-size: 1.5rem; }
.eb-spot__act { display: flex; gap: .6rem; margin-top: .4rem; flex-wrap: wrap; }
.eb-spot__act .btn { min-height: 46px; padding: 0 1.6rem; font-weight: 700; border-radius: 12px; }
.eb-spot__act .btn-primary { background: var(--shop-theme-primary); border-color: var(--shop-theme-primary); }

/* Card: fixed 2:3 cover for every book */
.eb-card { display: flex; flex-direction: column; width: 100%; height: 100%; background: #fff; border: 1px solid #eceef1; border-radius: 14px; overflow: hidden; transition: box-shadow .18s, transform .18s; }
.eb-card:hover { box-shadow: 0 12px 28px rgba(15, 23, 42, .13); transform: translateY(-3px); }
.eb-card__cover { position: relative; display: block; width: 100%; aspect-ratio: 2 / 3; overflow: hidden; background: linear-gradient(160deg, #0f766e, #134e4a); }
.eb-card__cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; transition: transform .45s ease; }
.eb-card:hover .eb-card__cover img { transform: scale(1.05); }
.eb-card__fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 3.2rem; font-weight: 800; color: rgba(255, 255, 255, .55); }
.eb-flag, .eb-fmt { position: absolute; z-index: 2; font-size: .68rem; font-weight: 800; padding: .18rem .6rem; border-radius: 999px; letter-spacing: .03em; }
.eb-flag { left: 8px; top: 8px; color: #fff; background: #dc2626; }
.eb-flag--free { background: #16a34a; } .eb-flag--own { background: #2563eb; }
.eb-fmt { right: 8px; bottom: 8px; background: rgba(17, 24, 39, .75); color: #fff; backdrop-filter: blur(6px); }
.eb-card__body { padding: .65rem .75rem .8rem; display: flex; flex-direction: column; gap: .22rem; min-width: 0; }
.eb-card__title { color: #111827; font-weight: 700; font-size: .92rem; line-height: 1.35; text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em; }
.eb-card__title:hover { color: var(--shop-theme-primary); }
.eb-card__by { font-size: .76rem; color: #6b7280; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.eb-track .eb-item { flex: 0 0 calc((100% - 60px) / 7) !important; min-width: 148px !important; max-width: none !important; display: flex; scroll-snap-align: start; }
.eb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .9rem; }
.eb-pager { display: flex; justify-content: center; margin-top: 1rem; }
.eb-result { margin: 0; font-size: 1.2rem; font-weight: 800; display: flex; align-items: baseline; gap: .6rem; }
.eb-result small { font-size: .85rem; color: #9ca3af; font-weight: 700; }

@media (max-width: 1199.98px) { .eb-track .eb-item { flex-basis: calc((100% - 40px) / 5) !important; } }
@media (max-width: 991.98px) { .eb-track .eb-item { flex-basis: calc((100% - 30px) / 4) !important; } }
@media (max-width: 767.98px) {
    .eb-head__title h1 { font-size: 1.5rem; }
    .eb-search { order: 3; flex-basis: 100%; max-width: none; }
    .eb-spot { grid-template-columns: 120px minmax(0, 1fr); gap: 1rem; padding: 1rem; border-radius: 18px; }
    .eb-spot__info h2 { font-size: 1.15rem; }
    .eb-spot__act .btn { min-height: 42px; padding: 0 1.1rem; }
    .eb-track .eb-item { flex-basis: 38% !important; min-width: 130px !important; }
    .eb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
    .eb-bar .sf-bar__in { display: grid; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 420px) { .eb-spot { grid-template-columns: 96px minmax(0, 1fr); } }

body.dark-mode .eb-page { background: #0b1220; }
body.dark-mode .eb-head__title h1, body.dark-mode .eb-card__title, body.dark-mode .eb-spot__info h2 a { color: #f1f5f9; }
body.dark-mode .eb-card, body.dark-mode .eb-search input { background: #111827; border-color: #1f2937; color: #e5e7eb; }
body.dark-mode .eb-spot { background: linear-gradient(135deg, #0f2a27, #0f172a); border-color: #1f2937; }