/* LS Training ⇄ OpenCart 4 integration overrides. Loaded LAST so it wins
   over both the WP theme (ls-theme.css) and the old OC theme (oc-custom.css). */

/* ===== OC4 integration fixes (added during LS theme port) =====
   OpenCart 4's default stylesheet turns #container into an absolutely
   positioned, viewport-wide sticky-footer wrapper. Inside the LS chrome
   (#imain is a 960px centered column) that breaks the layout, so restore
   normal flow. */
#container { position: static; width: auto; min-height: 0; margin-bottom: 0; }
#content, #column-left, #column-right { padding-bottom: 0; }
/* OC4 also pins <footer> to the viewport bottom — restore normal flow for the LS footer */
footer#footer { position: static; border: 0; padding-top: 0; bottom: auto; }

/* ===== LS course-grid integration with OC4 (match live lstrainingco.com) ===== */
#column-left .sidebar { width: auto; margin-right: 0; float: none; }
#column-left #question-widget { margin-left: 0; }

.product-grid { width: auto; overflow: hidden; margin-top: 20px; }
.product-grid > div.product-thumb {
  border: 1px solid #dedede; float: left; width: 31%; margin: 0 2% 20px 0;
  padding: 16px 14px 0 14px; box-sizing: border-box;
}
.product-grid .product-thumb .name { min-height: 50px; }
.product-grid .product-thumb .name a { color: #136fc5; line-height: 1.4; text-decoration: none; }
.product-grid .product-thumb .description { display: block; overflow: hidden; font-size: 12px; line-height: 1.4; min-height: 110px; }

/* gray Cost / Add-to-Cart footer bar, like live */
.cost-hrs-cart { background: #f7f7f7; clear: both; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 -14px; padding: 14px; border-top: 1px solid #dedede; }
.cost-hrs-cart .price { margin: 0; font-size: 12px; color: #1e749c; font-weight: 700; }
.cost-hrs-cart .price .title { font-size: 10px !important; color: #777; text-transform: uppercase; font-weight: 700; display: block; padding-bottom: 6px; }
.cost-hrs-cart .cart { margin: 0; flex: none; }
.cost-hrs-cart .cart .button { display: inline-block; width: auto; background: #1e749c; color: #fff; border: 0; border-radius: 4px; padding: 6px 12px; font-size: 11px; font-weight: 700; line-height: 1.4; cursor: pointer; white-space: nowrap; }
.cost-hrs-cart .cart .button:hover { background: #155b7c; }
.pagination-wrap { clear: both; padding-top: 20px; }

/* The old WP/OC theme floats #content with a fixed margin-left (it assumed a
   different sidebar mechanism). In OC4's bootstrap flex row that leaves a huge
   gap and squeezes the grid — restore normal flex-column behaviour. */
#product-category #content, #product-product #content { float: none !important; margin-left: 0 !important; width: auto !important; }

/* OC4 makes .product-thumb .button absolutely positioned (hover-reveal cart strip).
   Our course card reuses the .button class for a normal inline Add-to-Cart button. */
.cost-hrs-cart .cart { display: inline-flex; width: auto; }
.cost-hrs-cart .cart .button { position: static; bottom: auto; width: auto; display: inline-block; }

/* keep 3-up rows aligned even when card heights differ (float wrap glitch) */
.product-grid > div.product-thumb:nth-child(3n+1) { clear: left; }