/**
 * v1.6.8 — Responsive safeguards for the public catalog.
 *
 * These selectors deliberately target only the Librería layouts. They keep
 * Divi's normal editor and unrelated WordPress screens untouched while making
 * titles, covers, video embeds, book facts, and the physical-order panel fit
 * from a small phone through a wide desktop.
 */

/* Grid children may otherwise keep their intrinsic width and push a column
 * wider than the device when a long product title, ISBN, or CLABE is used. */
.lbr-unified-catalog,
.lbr-catalog-body,
.lbr-catalog-results,
.lbr-catalog-card,
.lbr-catalog-card-heading,
.lbr-catalog-card-body,
.lbr-product-main-row,
.lbr-product-main-row > .et_pb_column,
.lbr-product-info-column,
.lbr-product-buy-column,
.lbr-digital-library__card,
.lbr-digital-library__body {
  min-width: 0;
}

.lbr-catalog-card h2,
.lbr-catalog-card h2 a,
.lbr-card-author,
.lbr-card-excerpt,
.lbr-product-template .et_pb_wc_title h1,
.lbr-product-template .product_title,
.lbr-product-synopsis,
.lbr-product-synopsis__content,
.lbr-product-facts dd,
.lbr-product-buy-column,
.lbr-digital-library__body h3,
.lbr-site-footer a {
  overflow-wrap: anywhere;
}

/* Keep every book cover as its original portrait image.  WooCommerce and
 * Divi can otherwise impose a square thumbnail on some image sizes. */
.lbr-catalog-cover img,
.lbr-digital-library__cover img,
.lbr-related-section .woocommerce ul.products li.product img {
  height: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
}

.lbr-product-template .et_pb_wc_gallery .woocommerce-product-gallery__image img,
.lbr-product-template .et_pb_wc_gallery .et_pb_module_inner img {
  height: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
  width: auto !important;
}

/* Videos retain their natural 16:9 frame instead of relying on an iframe's
 * fixed browser size.  Non-video thumbnails are also contained, never cropped. */
.lbr-video-cover {
  background-size: contain;
  min-width: 0;
}

.lbr-video-cover img.lbr-video-cover-image {
  display: block;
  height: auto !important;
  max-height: 100%;
  max-width: 100%;
  object-fit: contain !important;
  width: 100% !important;
}

.lbr-video-embed {
  aspect-ratio: 16 / 9;
  max-width: 100%;
  width: 100%;
}

.lbr-video-embed iframe {
  border: 0;
  display: block;
  height: 100%;
  max-width: 100%;
  width: 100%;
}

/* Landscape tablets have enough room for the cover and synopsis, but not for
 * a readable third column.  The purchase panel becomes a full second row and
 * uses its space for the physical and digital options side by side. */
@media (min-width: 981px) and (max-width: 1180px) {
  .lbr-product-template .lbr-product-main-row {
    grid-template-columns: minmax(170px, 0.74fr) minmax(0, 1.6fr) !important;
    row-gap: 18px;
  }

  .lbr-product-template .lbr-product-main-row > .et_pb_column {
    float: none !important;
    margin-right: 0 !important;
    width: auto !important;
  }

  .lbr-product-template .lbr-product-buy-column {
    grid-column: 1 / -1;
    margin-left: 0 !important;
    padding: 18px !important;
  }

  .lbr-product-buy-column .lbr-purchase-options {
    align-items: start;
    gap: 18px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lbr-product-buy-column .lbr-purchase-panel {
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
}

/* Divi normally stacks its columns below this point.  Make the stacking
 * explicit so a custom Divi width or cached layout cannot leave an old float
 * beside the next section. */
@media (max-width: 980px) {
  .lbr-product-template .lbr-product-main-row {
    display: block !important;
  }

  .lbr-product-template .lbr-product-main-row > .et_pb_column {
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    min-width: 0;
    width: 100% !important;
  }

  .lbr-product-template .lbr-product-buy-column {
    margin-left: 0 !important;
    padding: 18px !important;
  }

  .lbr-product-template .lbr-product-cover-column {
    text-align: center;
  }

  .lbr-product-template .et_pb_wc_gallery .woocommerce-product-gallery__image img,
  .lbr-product-template .et_pb_wc_gallery .et_pb_module_inner img {
    max-height: min(460px, 64vh);
  }

  .lbr-header-actions {
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .lbr-header-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    justify-content: center;
  }

  .lbr-header-nav a {
    margin: 0 !important;
  }
}

@media (max-width: 600px) {
  .lbr-site-header .et_pb_row,
  .lbr-catalog-page .et_pb_row,
  .lbr-product-template .et_pb_row,
  .lbr-related-section .et_pb_row,
  .lbr-site-footer .et_pb_row {
    width: 90%;
  }

  .lbr-header-main {
    padding-top: 12px;
  }

  .lbr-brand a {
    font-size: clamp(1.22rem, 6.8vw, 1.55rem);
    letter-spacing: -0.045em;
    max-width: 100%;
    white-space: normal;
  }

  .lbr-brand a::before {
    flex: 0 0 auto;
    margin-right: 18px;
  }

  .lbr-brand-title {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .lbr-header-nav {
    justify-content: flex-start;
    padding-bottom: 9px;
    padding-top: 9px;
  }

  .lbr-header-nav a {
    line-height: 1.25;
  }

  .lbr-catalog-toolbar {
    padding: 10px 12px;
  }

  .lbr-sort-control {
    align-items: stretch;
    display: grid;
    gap: 6px;
    grid-template-columns: 1fr;
    max-width: 100%;
    white-space: normal;
    width: 100%;
  }

  .lbr-sort-control select {
    max-width: 100%;
    min-width: 0;
    width: 100%;
  }

  .lbr-filter-options label {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .lbr-catalog-card--video {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .lbr-catalog-card--video .lbr-video-cover {
    aspect-ratio: 16 / 9;
    min-height: 0;
    width: 100%;
  }

  .lbr-catalog-card--video .lbr-video-embed {
    aspect-ratio: auto;
    height: 100%;
  }

  .lbr-catalog-card--video .lbr-catalog-card-body {
    grid-column: 1;
    grid-row: 2;
    padding: 14px;
  }

  .lbr-product-template .et_pb_wc_title h1,
  .lbr-product-template .product_title {
    font-size: clamp(1.65rem, 8vw, 2rem) !important;
    line-height: 1.1;
  }

  .lbr-product-facts dl div {
    gap: 2px;
    grid-template-columns: 1fr !important;
    margin-bottom: 7px;
  }

  .lbr-product-facts dt {
    font-weight: 800;
    text-align: left !important;
  }

  .lbr-product-buy-column .lbr-purchase-options {
    gap: 14px;
  }

  .lbr-action-button {
    white-space: normal;
  }
}

/* At this size labels and long banking values need their own compact rows.
 * Nothing is hidden; an 18-digit CLABE simply wraps when necessary. */
@media (max-width: 480px) {
  .lbr-product-buy-column .lbr-bank-details {
    grid-template-columns: 1fr !important;
    row-gap: 5px;
  }

  .lbr-product-buy-column .lbr-bank-details > div {
    column-gap: 7px;
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
  }

  .lbr-product-buy-column .lbr-order-steps {
    margin-left: 17px;
  }

  .lbr-product-buy-column .lbr-purchase-panel__price,
  .lbr-product-buy-column .et_pb_wc_price,
  .lbr-product-buy-column .price {
    overflow-wrap: anywhere;
    white-space: normal !important;
  }
}

@media (max-width: 359px) {
  .lbr-catalog-card--book {
    grid-template-columns: 92px minmax(0, 1fr) !important;
  }

  .lbr-catalog-card--book .lbr-catalog-cover img.lbr-catalog-cover-image {
    height: 144px !important;
    max-width: 78px;
  }
}