body {
  width: 100%;
  height: 100%;
}

h1, h2, h3, h4, h5, h6 {
  color: #444;
}

legend {
  padding: 7px 0;
  margin-bottom: 20px;
  border-bottom: 1px solid #e5e5e5;
}

label {
  font-size: 12px;
  font-weight: normal;
}

/* Chrome border line */
button:focus {
  outline: none !important;
}

/* container */
#container {
  width: 100%;
  min-height: 100%;
  /* Was position:absolute with a fixed 300px margin-bottom reserved for the
     footer -- a sticky-footer hack that silently clips the page (browser
     scroll bounds stop short of the real content) whenever the page grows
     taller than that reserved gap, e.g. once the homepage got long enough
     to include the "about the space" section. Plain flow avoids that
     entirely and works at any content height. */
  position: relative;
}

/* content */
#content, #column-left, #column-right {
  padding-bottom: 730px;
}

@media (min-width: 576px) {
  #content, #column-left, #column-right {
    padding-bottom: 400px;
  }
}
#alert {
  z-index: 9999;
  position: fixed;
  top: 30%;
  left: 50%;
  width: 320px;
  margin-left: -160px;
}

@media (min-width: 992px) {
  #alert {
    width: 600px;
    margin-left: -300px;
  }
}
@media (min-width: 1140px) {
  #alert {
    width: 600px;
    margin-left: -300px;
  }
}
@media (min-width: 1320px) {
  #alert {
    width: 600px;
    margin-left: -300px;
  }
}
#alert .alert {
  margin-bottom: 15px;
}

#alert .alert-primary {
  box-shadow: 0 0 0 5px rgb(var(--bs-primary-rgb), 0.1);
}

#alert .alert-secondary {
  box-shadow: 0 0 0 5px rgb(var(--bs-secondary-rgb), 0.1);
}

#alert .alert-success {
  box-shadow: 0 0 0 5px rgb(var(--bs-success-rgb), 0.1);
}

#alert .alert-warning {
  box-shadow: 0 0 0 5px rgb(var(--bs-warning-rgb), 0.1);
}

#alert .alert-danger {
  box-shadow: 0 0 0 5px rgb(var(--bs-danger-rgb), 0.1);
}

#alert .alert-info {
  box-shadow: 0 0 0 5px rgb(var(--bs-info-rgb), 0.1);
}

#alert .alert-light {
  box-shadow: 0 0 0 5px rgb(var(--bs-light-rgb), 0.1);
}

#alert .alert-dark {
  box-shadow: 0 0 0 5px rgb(var(--bs-dark-rgb), 0.1);
}

/* top */
#top {
  background-color: var(--bs-tertiary-bg);
  border-bottom: 1px solid var(--bs-border-color);
  margin-bottom: 20px;
  position: relative;
  padding-bottom: 5px;
}

#top ul.list-inline {
  margin-bottom: 0;
}

#top .list-inline-item > a, #top .list-inline-item .dropdown > a, #top .list-inline-item .dropdown > span {
  font-size: 1.1em;
  color: var(--bs-gray-600);
  line-height: 40px;
  vertical-align: middle;
  padding: 10px 0px 5px 0px;
}

/* logo */
#logo {
  text-align: center;
  margin: 7px 0 7px 0;
}

#logo img {
  max-width: 200px;
}

@media (min-width: 768px) {
  #logo {
    text-align: left;
  }
}
/* search */
#search {
  margin-bottom: 10px;
}

#search .form-control-lg {
  height: 40px;
  font-size: 12px;
  line-height: 20px;
  padding: 0 10px;
}

#search .btn-lg {
  font-size: 15px;
  line-height: 18px;
  padding: 0.57rem 35px;
  text-shadow: 0 1px 0 #FFF;
}

/* cart */
#cart {
  margin-bottom: 10px;
}

#cart .img-thumbnail {
  min-width: 100px;
}

#cart .btn-lg {
  font-size: 15px;
  line-height: 18px;
  padding: 14px 35px;
}

#cart .dropdown-menu {
  background: #eee;
}

#cart .dropdown-menu li {
  min-width: 300px;
}

@media (max-width: 768px) {
  #cart .dropdown-menu li {
    min-width: 100%;
  }
}
/* menu */
#menu {
  background-color: #229ac8;
  background-image: linear-gradient(to bottom, #23a1d1, #1f90bb);
  background-repeat: repeat-x;
  border: 1px solid #1f90bb;
  border-color: #1f90bb #1f90bb #145e7a;
  min-height: 40px;
  border-radius: 4px;
  padding: 0 1rem;
  margin-bottom: 20px;
}

#menu-ai-button {
  background-color: #e2231a;
  color: #fff;
  border: none;
  font-weight: 600;
  white-space: nowrap;
}

#menu-ai-button:hover {
  background-color: #b81b14;
  color: #fff;
}

#menu .navbar-nav > li > a {
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  padding: 10px 15px 10px 15px;
  background-color: transparent;
}

#menu .navbar-nav > li > a:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

#menu .dropdown-menu {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

#menu .dropdown-inner {
  display: flex;
  flex-direction: column;
}

#menu .dropdown-inner ul {
  width: 100%;
  min-width: 200px;
}

#menu .dropdown-inner .dropdown-item {
  white-space: normal;
  word-break: break-word;
}

#menu {
  position: relative;
}

#menu .nav-item.dropdown {
  position: relative;
}

#menu .menu-dropdown-caret {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  padding: 0 12px;
  border: 0;
  background: transparent;
  color: #fff;
}

@media (min-width: 960px) {
  #menu .dropdown:hover .dropdown-menu {
    display: block;
  }
  #menu .dropdown-inner {
    flex-direction: row;
  }
  #menu .nav-item.dropdown {
    /* let the mega-menu anchor to the whole nav bar, not the button --
       otherwise a long column set overflows past the viewport edge on
       narrower desktop widths. */
    position: static;
  }
  #menu .dropdown-menu {
    left: 0;
    right: 0;
    width: auto;
  }
  #menu .dropdown-inner ul {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
  }
}
#category {
  float: left;
  font-size: 16px;
  font-weight: 700;
  line-height: 40px;
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}

#menu .navbar-toggler i {
  color: #fff;
  border-color: #fff;
  font-size: 0.9em;
}

/* default boostrap changes */
div.required .col-form-label:before, div.required .form-label:before {
  content: "* ";
  color: #F00;
  font-weight: bold;
}

.form-switch-lg {
  font-size: 20px;
  min-height: 30px;
  line-height: 30px;
}

.nav-tabs {
  margin-bottom: 15px;
}

.form-check .form-check-input {
  margin-top: 0.25rem;
}

@media (min-width: 768px) {
  .col-form-label {
    text-align: right;
  }
}
/* footer */
footer {
  border: 1px solid #000000;
  width: 100%;
  padding-top: 30px;
  background-color: #303030;
  border-top: 1px solid #ddd;
  color: #e2e2e2;
}

footer hr {
  border-top: none;
  border-bottom: 1px solid #666;
}

footer a {
  color: #ccc;
  text-decoration: none;
}

footer a:hover {
  color: #fff;
}

footer h5 {
  font-family: "Open Sans", sans-serif;
  font-size: 13px;
  font-weight: bold;
  color: #fff;
  margin-top: 10px;
  margin-bottom: 10px;
}

/* breadcrumb */
.breadcrumb {
  margin: 0 0 20px 0;
  padding: 8px 0;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  background-color: var(--bs-tertiary-bg);
}
.breadcrumb i {
  font-size: 15px;
}
.breadcrumb > li.breadcrumb-item {
  text-shadow: 0 1px 0 #FFF;
  padding: 0 20px;
  position: relative;
  white-space: nowrap;
}
.breadcrumb > li.breadcrumb-item > a {
  text-decoration: none;
  color: var(--bs-gray-700, #495057);
}
.breadcrumb > li.breadcrumb-item > a:hover {
  color: #e2231a;
  text-decoration: underline;
}
.breadcrumb > li.breadcrumb-item:last-child > a {
  color: var(--bs-gray-900, #212529);
  font-weight: 600;
  pointer-events: none;
}
.breadcrumb > li.breadcrumb-item:after {
  content: "";
  display: block;
  position: absolute;
  top: -3px;
  right: -5px;
  width: 29px;
  height: 29px;
  border-right: 1px solid var(--bs-border-color);
  border-bottom: 1px solid var(--bs-border-color);
  transform: rotate(-45deg);
}
.breadcrumb > li.breadcrumb-item + li:before {
  content: "";
  padding: 0;
}

.product-thumb {
  border: none;
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
}

#about-space {
  background: #faf6f0;
  padding: 50px 0;
  margin-top: 30px;
}

.about-space-heading {
  font-family: Georgia, serif;
  font-weight: 700;
  color: #222;
  margin-bottom: 15px;
}

.about-space-intro {
  max-width: 720px;
  color: #555;
  font-size: 1.05rem;
  line-height: 1.6;
  margin-bottom: 30px;
}

.about-space-photos {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.about-space-photo {
  width: 100%;
  border-radius: 10px;
  display: block;
  object-fit: cover;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}

.about-space-photo-main {
  aspect-ratio: 4 / 3;
}

.about-space-photo-small {
  aspect-ratio: 16 / 7;
}

.about-space-features {
  margin-bottom: 25px;
}

.about-space-features li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.05rem;
  color: #333;
  margin-bottom: 16px;
}

.about-space-features li i {
  color: #e2231a;
  font-size: 1.3rem;
  width: 28px;
  text-align: center;
  flex-shrink: 0;
}

.about-space-cta {
  background: #e2231a;
  color: #fff;
  font-weight: 600;
  padding: 10px 22px;
  border-radius: 6px;
}

.about-space-cta:hover {
  background: #b81b14;
  color: #fff;
}

@media (max-width: 767px) {
  .about-space-photos {
    margin-bottom: 30px;
  }
}

.product-meta {
  list-style: none;
  padding: 0;
  margin: 12px 0 16px;
}

.product-meta li {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 5px 0;
  font-size: 0.92rem;
}

.product-meta .label {
  color: #888;
  white-space: nowrap;
}

.product-meta .value {
  color: #222;
  font-weight: 600;
  white-space: nowrap;
}

.product-meta .value a {
  color: #222;
}

.product-meta .dots {
  flex: 1 1 auto;
  border-bottom: 1px dotted #ccc;
  margin: 0 4px 4px;
  min-width: 12px;
}

.product-actions {
  display: flex;
  align-items: stretch;
  gap: 10px;
}

.product-actions #button-cart {
  flex: 1 1 auto;
}

.product-actions #button-wishlist {
  flex: 0 0 auto;
}

.product-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 0;
}

.product-badges .badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #e9f7ef;
  color: #1e7e42;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 20px;
}

.product-delivery-info {
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: 8px;
  padding: 16px 18px;
  margin-bottom: 20px;
}

.product-delivery-info h4 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 10px;
}

.product-delivery-info ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.product-delivery-info li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  color: #444;
}

.product-delivery-info li i {
  color: #e2231a;
  width: 18px;
  text-align: center;
}

/* The thumbnails are no longer padded out to a square (see model/tool/image_fit.php),
   so the box has to give them a common height instead of a common width - otherwise a
   portrait book and a squat one sit at different scales. They stand on one baseline. */
.product-thumb {
  --cover-height: 260px;
}

.product-thumb .image {
  height: var(--cover-height);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex-shrink: 0;
}

/* The frame is only as wide as the cover, so anything pinned to its corners lands on
   the artwork and not in the empty column beside a narrow book. */
.product-thumb .image-frame {
  position: relative;
  height: 100%;
  display: flex;
  align-items: flex-end;
}

/* A grey plate behind an unpadded cover would show as bars either side of it.
   The ceiling is a length, not `max-height: 100%` - a percentage on a replaced
   element inside a flex container is not honoured here, and the covers overflowed
   the box upwards by ~50px before this was caught in the browser. */
.product-thumb .image img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: var(--cover-height);
  display: block;
  border-radius: 2px;
}

.product-thumb .image a:hover {
  opacity: 0.9;
}

.product-thumb .btn-wishlist {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid #eee;
  background: #fff;
  color: #e2231a;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.product-thumb .btn-wishlist:hover {
  background: #fff5f4;
}

.product-thumb .content {
  padding-top: 12px;
  text-align: center;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.product-thumb .product-name {
  display: -webkit-box;
  display: box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  box-orient: vertical;
  overflow: hidden;
  max-height: 2.7em;
  font-size: 0.95rem;
  font-weight: 600;
  color: #222;
  text-decoration: none;
  line-height: 1.35;
  min-height: 2.5em;
  width: 100%;
  word-break: break-word;
}

.product-thumb .product-name:hover {
  color: #e2231a;
}

.product-thumb .product-manufacturer {
  color: #888;
  font-size: 0.8rem;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-thumb .product-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
}

.product-thumb .price {
  font-weight: 700;
  font-size: 1.05rem;
  color: #222;
}

.product-thumb .price-old {
  font-weight: 400;
  font-size: 0.85rem;
  color: #999;
  text-decoration: line-through;
  margin-left: 4px;
}

.product-thumb .btn-buy {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: #e2231a;
  color: #fff;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.product-thumb .btn-buy:hover {
  background: #b81b14;
}

/* Wishlist and cart sit on the cover rather than in a row of their own: at the card's
   right edge they ended up closer to the next card's price than to their own. */
.product-thumb .product-actions-overlay {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  z-index: 2;
}

.product-thumb .product-actions-overlay form {
  display: flex;
}

.product-thumb .product-actions-overlay .btn-wishlist,
.product-thumb .product-actions-overlay .btn-buy {
  width: 32px;
  height: 32px;
  font-size: 0.85rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
}

/* Revealed on hover where there is a pointer; always visible on touch, which has none. */
@media (hover: hover) {
  .product-thumb .product-actions-overlay {
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.16s ease, transform 0.16s ease;
    pointer-events: none;
  }

  .product-thumb:hover .product-actions-overlay,
  .product-thumb:focus-within .product-actions-overlay {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
}

.product-toolbar {
  margin-top: 40px;
  margin-bottom: 32px;
}

#product-list,
#content > .row[class*="row-cols-"] {
  --bs-gutter-x: 50px;
  margin-top: 24px;
}

#product-list .col {
  margin-bottom: 50px;
}

@media (min-width: 960px) {
  /* The base .product-thumb is a column; without resetting the direction the list
     view stayed a stacked card and only ever looked like a narrower grid. */
  .product-list .product-thumb {
    display: flex;
    flex-direction: row;
  }
  .product-list .product-thumb .image {
    flex-direction: column;
    margin-bottom: 0;
    width: 150px;
    height: auto;
    align-items: center;
    flex-shrink: 0;
  }
  /* The list view keeps its text flush left - it reads as a row, not as a card. */
  .product-list .product-thumb .content {
    flex-direction: column;
    flex: 1;
    padding-top: 0;
    padding-left: 15px;
    text-align: left;
  }
  .product-list .product-thumb .product-footer {
    justify-content: flex-start;
  }
}
.rating .fa-stack {
  width: 20px;
}

.rating .fa-star {
  color: #999;
  font-size: 15px;
}

.rating .fa-star {
  color: #FC0;
  font-size: 15px;
}

.rating .fa-star + .fa-star {
  color: #E69500;
}

/* product list */
.price {
  color: #444;
}

.price-new {
  font-weight: 600;
}

.price-old {
  color: #dc512c;
  text-decoration: line-through;
}

.price-tax {
  color: #999;
  font-size: 12px;
  display: block;
}

/* blog */
.blog-thumb {
  border: 1px solid #ddd;
  margin-bottom: 15px;
}

.blog-thumb h4 {
  font-weight: bold;
}

.blog-thumb .image {
  text-align: center;
  margin-bottom: 15px;
}

.blog-thumb .image a:hover {
  opacity: 0.8;
}

.blog-thumb .description {
  padding: 15px;
}

/* Theme Custom CSS */
#cookie {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 150px;
  z-index: 9999;
  opacity: 0.95;
  color: #ecf0f1;
  background: #343a40;
}

#cookie div {
  font-size: 16px;
  color: #FFFFFF;
}
/* BookLab brand override */
:root {
  --bs-primary: #e2231a;
  --bs-primary-rgb: 226, 35, 26;
}
.btn-primary {
  --bs-btn-bg: #e2231a !important;
  --bs-btn-border-color: #e2231a !important;
  --bs-btn-hover-bg: #b81b14 !important;
  --bs-btn-hover-border-color: #b81b14 !important;
  --bs-btn-active-bg: #b81b14 !important;
  --bs-btn-active-border-color: #b81b14 !important;
}
a {
  color: #e2231a;
}
a:hover {
  color: #b81b14;
}
.text-primary {
  color: #e2231a !important;
}
.bg-primary {
  background-color: #e2231a !important;
}

/* Dropdown caret (missing from this Bootstrap build) */
.dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0.3em solid;
  border-right: 0.3em solid transparent;
  border-bottom: 0;
  border-left: 0.3em solid transparent;
}

/* Product description "highlights" bullet list (e.g. "Realismo mágico en
   estado puro") -- styled to match the specification table's card look
   instead of a plain bare <ul>. */
#tab-description ul {
  list-style: none;
  padding: 0;
  margin: 20px 0 0 0;
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: 6px;
  overflow: hidden;
}

#tab-description ul li {
  padding: 10px 16px;
  border-bottom: 1px solid var(--bs-border-color, #dee2e6);
  background: #fff;
}

#tab-description ul li:last-child {
  border-bottom: none;
}

#tab-description ul li::before {
  content: "\2022";
  color: #e2231a;
  font-weight: 700;
  display: inline-block;
  width: 1em;
  margin-left: -1em;
}

#tab-description ul li {
  padding-left: 2em;
}

/* Make product meta links (Author, Publisher) clearly clickable with brand accent color and hover underline */
.product-meta a {
    color: #e63946;
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 500;
    transition: color 0.2s ease;
}
.product-meta a:hover {
    color: #c92e3b;
    text-decoration: underline;
}