/**
 * Project: Driven Racing – Drupal 11 tweaks
 * File: css/catalog-products.css
 *
 * Version: 2025-12-04 v1.0.2
 *
 * Change log:
 * - 2025-12-04 21:10  (v1.0.2) Catalog → product main image sizing:
 *                     enforce a hard 250px × 167px size for the primary
 *                     product image in the top band for catalog_products
 *                     rows, covering both .drd-catalog-product-main-image
 *                     and .drd-catalog-product-image wrappers so DXPR /
 *                     image style attributes can’t override the size.
 * - 2025-12-04 20:10  (v1.0.1) Pizza Cutter band refinements:
 *                     • add explicit horizontal gap between the main
 *                       image and the description via flex gap,
 *                     • bump selector specificity for the description
 *                       to .view-catalog-products .drd-catalog-product-
 *                       description so Muli 13px / 20px typography wins
 *                       over any DXPR defaults.
 * - 2025-12-04 18:32  (v1.0.0) Initial split from home-header-footer.css
 *                     v1.3.55: move all .drd-catalog-* catalog_products
 *                     block_1 rules (single product band + order line
 *                     layout) into this stylesheet unchanged.
 */

/******************************
 * CATALOG PRODUCT ROW – CATEGORY → PRODUCT (D7-style band)
 ******************************/

/* Outer white band around the catalog product row */
.view-catalog-products .drd-catalog-product-row {
  max-width: 1140px;
  margin: 0 auto 30px;
  padding: 15px 25px 20px;
  background: #ffffff;
  border: 1px solid #e5e5e5;
  box-sizing: border-box;
}

/* Title in the top band */
.drd-catalog-product-title {
  font-family: "Oswald", sans-serif;
  font-size: 30px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 12px;
}

/* Main band: image + description side by side */
.drd-catalog-product-main {
  display: flex;
  align-items: flex-start;
  gap: 24px; /* explicit spacing between image and description */
}

/* Main product image container */
.view-catalog-products .drd-catalog-product-main-image,
.view-catalog-products .drd-catalog-product-main .drd-catalog-product-image {
  flex: 0 0 auto;
}

/* Main product image: hard 250 × 167 */
.view-catalog-products .drd-catalog-product-main-image img,
.view-catalog-products .drd-catalog-product-main .drd-catalog-product-image img {
  display: block;
  width: 250px;
  height: 167px;
  object-fit: cover;
}

/* Full description text (Muli, 13px, 20px line-height) */
.view-catalog-products .drd-catalog-product-description {
  flex: 1 1 auto;
  font-family: "Muli", sans-serif;
  font-size: 13px;
  line-height: 20px;
}

/* Divider between info band and order band (edge-to-edge within row) */
.drd-catalog-product-divider {
  margin: 15px 0 10px;
  border: 0;
  border-top: 2px solid #aaaaaa;
}

/* Order band as a single horizontal row */
.drd-catalog-product-order-line {
  display: flex;
  align-items: center;
}

/* Order-line thumbnail (100 × 67) */
.drd-catalog-order-thumb {
  flex: 0 0 auto;
  margin-right: 20px;
}

.drd-catalog-order-thumb img {
  display: block;
  width: 100px;
  height: 67px;
  object-fit: cover;
}

/* Order-line text block (name + more) */
.drd-catalog-order-links {
  flex: 1 1 auto;
}

/* Linked product name */
.drd-catalog-order-name a {
  font-family: "Oswald", sans-serif;
  font-size: 13px;
  text-transform: uppercase;
  text-decoration: none;
}

.drd-catalog-order-name a:hover,
.drd-catalog-order-name a:focus {
  text-decoration: underline;
}

/* "More" text/link below the name (if present) */
.drd-catalog-order-more {
  font-size: 11px;
}

/* Price + cart controls on the right in a flex row */
.drd-catalog-order-controls {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Price text */
.drd-catalog-order-price,
.drd-catalog-order-price .field-content {
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

/* Add-to-cart form inline: quantity + button */
.drd-catalog-order-cart form {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

/* Hide quantity label; compact input */
.drd-catalog-order-cart .field--name-quantity label {
  display: none;
}

.drd-catalog-order-cart .field--name-quantity input.form-number {
  width: 48px;
  padding: 3px 4px;
  font-size: 11px;
  text-align: center;
}

/* Add to cart button styling */
.drd-catalog-order-cart .button--add-to-cart {
  padding: 4px 18px;
  font-size: 11px;
  text-transform: uppercase;
}

/******************************
 * END CATALOG PRODUCT ROW
 ******************************/