/* Layout B: alternative layout focused on a flatter, card-like look */

/* Layout B: basic wrappers reuse same HTML but different spacing */
.lb-store-page,
.lb-deals-page,
.lb-home {
  max-width: 1160px;
  margin: 0 auto;
  padding: 10px 0 30px;
}

/* Store header: stack content, actions under title on mobile-ish widths */
.merchant-header-row .merchant-card {
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  padding: 16px 18px;
}

.merchant-header-row .merchant-media {
  float: left;
  margin-right: 18px;
}

.merchant-header-row .merchant-body {
  overflow: hidden;
}

.merchant-header-row .merchant-actions {
  margin-top: 10px;
  text-align: left;
}

.merchant-header-row .merchant-actions .merchant-button {
  display: inline-block;
  margin-right: 10px;
  margin-bottom: 6px;
  padding: 7px 14px;
  font-size: 13px;
  line-height: 1.2;
  text-decoration: none;
  border-radius: 3px;
}

.merchant-header-row .merchant-actions .merchant-button i {
  margin-right: 4px;
}

@media (max-width: 768px) {
  .merchant-header-row .merchant-media {
    float: none;
    margin: 0 0 12px 0;
  }

  .merchant-header-row .merchant-actions .merchant-button {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }
}

/* Sidebar tweaks for Layout B: more compact vertical rhythm */
.sidebar-column.lb-sidebar,
#sidebar.lb-sidebar {
  margin-top: 0;
}

.lb-sidebar .sidebar-panel {
  margin-bottom: 16px;
}

.lb-sidebar .merchant-teaser-row {
  margin-bottom: 12px;
}

/* Footer: slightly slimmer than Layout A */
.site-footer.lb-footer {
  padding: 24px 0;
  margin-top: 32px;
}

/*
 * Footer list → meta gap (Layout B only — this file is not loaded for layout_a / layout_c).
 * Global source of tight spacing: templates/bootstrap/css/style.css (linked as /cache/style.css):
 *   .site-footer .footer-column ul... > li:last-child { margin-bottom: 0; }
 *   .site-footer .footer-column ul... > li.footer-view-all { margin-bottom: 0; }
 * Overrides must use !important and load after /cache/style.css (see header.tpl custom_css link).
 */
.site-footer .footer-column ul:not(.social-footer) > li.footer-view-all {
  margin-bottom: 9px !important;
}

.site-footer .footer-column {
  margin-bottom: 6px !important;
}

.site-footer .footer-grid .row-fluid > .footer-meta {
  clear: both;
  margin-top: 7px !important;
}

/* -------------------------------
   Layout B: heading sizing/alignment
   ------------------------------- */
/* H1 → body: trim Bootstrap .page-header + style.css .page-header-row (this file loads for layout B only). */
.page-main > header.page-header {
  padding-bottom: 5px; /* bootstrap.css .page-header: 9px */
  margin-bottom: 16px; /* bootstrap.css .page-header: 30px */
}

.page-main > header.page-header .page-header-row {
  margin-top: 25px;
  margin-bottom: 12px; /* style.css .page-header-row: 25px */
}

.page-header-row .page-title {
  font-size: 28px;
  line-height: 34px;
  margin: 0 0 6px; /* was 0 0 10px */
  word-break: break-word;
}

.page-header-row .page-search,
.page-header-row .search-form {
  text-align: right;
}

.page-header-row .search-query {
  width: 320px;
  max-width: 100%;
}

/* -------------------------------
   Layout B: featured stores spacing
   ------------------------------- */
.featured-merchants {
  margin: 0 0 12px;
}

.heading-featured-box {
  margin-bottom: 10px;
}

.heading-featured-box > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.heading-featured-box .sidebar-store-thumbnail {
  margin: 0;
  line-height: 0;
}

.heading-featured-box .sidebar-store-thumbnail img {
  display: block;
  margin: 0;
}

.heading-featured-box a[title] {
  line-height: 1.3;
  margin: 0;
}

.heading-featured-box .very-small {
  margin: 0;
  line-height: 1.2;
}

/* -------------------------------
   Layout B: store merchant header cleanup
   ------------------------------- */
.merchant-header-row {
  margin-bottom: 12px;
}

.merchant-header-row .merchant-card {
  padding: 14px 16px;
  margin: 0 0 10px;
}

.merchant-header-row .merchant-title {
  margin: 0 0 4px;
  font-size: 21px;
  line-height: 1.3;
  word-break: break-word;
}

.merchant-header-row .merchant-description {
  margin: 6px 0 4px;
  line-height: 1.45;
}

.merchant-header-row .merchant-meta,
.merchant-header-row .merchant-meta p {
  margin: 0;
  line-height: 1.3;
}

.merchant-header-row .merchant-media {
  margin-right: 14px;
}

.merchant-header-row .merchant-logo {
  margin-bottom: 0;
}

.merchant-header-row .merchant-actions {
  margin-top: 8px;
  padding-top: 0;
}

.merchant-header-row .merchant-actions .merchant-button {
  margin-right: 8px;
  margin-bottom: 6px;
}

/* -------------------------------
   Layout B store page: match Layout A merchant treatment
   ------------------------------- */
.lb-store-page .merchant-header-row .merchant-body .merchant-title {
  display: none; /* keep schema markup, hide duplicate visual heading */
}

.lb-store-page .merchant-header-row .merchant-body {
  font-size: 14px;
  line-height: 1.45;
}

.lb-store-page .merchant-header-row .merchant-header {
  margin: 0;
}

.lb-store-page .merchant-header-row .merchant-description {
  margin: 0 0 6px;
  font-weight: 600;
  line-height: 1.45;
  color: #222;
}

.lb-store-page .merchant-header-row .merchant-meta {
  margin: 0;
}

.lb-store-page .merchant-header-row .merchant-meta p {
  margin: 0;
  line-height: 1.25;
}

/* Remove spacer gap generated by legacy <div><br></div> in merchant body */
.lb-store-page .merchant-header-row .merchant-meta + div {
  margin: 0;
  padding: 0;
  height: 0;
  line-height: 0;
  overflow: hidden;
}

/* Store merchant card: left = media + body, right = actions (matches bootstrap span2 column) */
.lb-store-page .merchant-header-row .merchant-card {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 12px 16px;
  padding: 12px 14px;
}

.lb-store-page .merchant-header-row .merchant-card > .clearfix {
  display: none;
}

.lb-store-page .merchant-header-row .merchant-card > .merchant-media,
.lb-store-page .merchant-header-row .merchant-card > .merchant-body,
.lb-store-page .merchant-header-row .merchant-card > .merchant-actions {
  float: none !important;
  margin-left: 0 !important;
}

.lb-store-page .merchant-header-row .merchant-card > .merchant-media {
  width: auto !important;
  flex: 0 0 auto;
  margin-right: 0;
}

.lb-store-page .merchant-header-row .merchant-card > .merchant-body {
  width: auto !important;
  overflow: visible;
  flex: 1 1 0;
  min-width: 0;
}

.lb-store-page .merchant-header-row .merchant-card > .merchant-actions {
  width: auto !important;
  flex: 0 0 200px;
  max-width: 100%;
  margin-top: 0 !important;
  margin-left: auto;
  text-align: right;
  padding-top: 0;
  align-self: flex-start;
}

.lb-store-page .merchant-header-row .merchant-actions .merchant-button {
  display: block;
  width: 100%;
  max-width: 220px;
  margin-left: auto;
  margin-right: 0;
  box-sizing: border-box;
  margin-bottom: 6px;
  padding: 8px 12px;
  font-size: 13px;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 2px;
  color: inherit;
}

.lb-store-page .merchant-header-row .merchant-actions .merchant-button i {
  margin-right: 6px;
}

.lb-store-page .merchant-header-row .merchant-actions .merchant-button:hover,
.lb-store-page .merchant-header-row .merchant-actions .merchant-button:focus {
  background: rgba(0, 0, 0, 0.07);
  border-color: rgba(0, 0, 0, 0.12);
  text-decoration: none;
}

/* -------------------------------
   Layout B: offer card compact rhythm
   ------------------------------- */
.lb-offer-card {
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 4px;
  padding: 12px 14px;
  margin: 0 0 12px;
  background: #fff;
}

.lb-offer-shell > .hide {
  margin: 0;
}

.lb-offer-card-header {
  margin-bottom: 6px;
}

.lb-offer-card-header .offer-header,
.lb-offer-card-header .offer-title {
  margin: 0 0 4px;
}

.lb-offer-card-header .offer-meta,
.lb-offer-card-header .offer-meta p {
  margin: 0;
}

.lb-offer-primary-cta,
.lb-offer-cta-block {
  margin: 8px 0;
}

.lb-offer-primary-cta .offer-actions,
.lb-offer-cta-block .offer-actions {
  margin: 0;
}

.lb-offer-primary-cta .offer-box,
.lb-offer-cta-block .offer-box {
  display: inline-block;
}

.lb-offer-body-block,
.lb-offer-deal-body {
  margin: 8px 0;
}

.lb-offer-body-block .offer-content,
.lb-offer-deal-body .offer-content,
.lb-offer-body-block .offer-description-box,
.lb-offer-deal-body .offer-description-box {
  margin: 0;
}

.lb-offer-utility-block,
.lb-offer-deal-utility {
  margin: 8px 0 4px;
}

.lb-offer-utility-block .offer-share,
.lb-offer-deal-utility .offer-share {
  margin: 0;
}

.lb-offer-supporting-media {
  margin-top: 8px;
}

.lb-offer-supporting-media .offer-media {
  margin: 0;
}

.lb-offer-supporting-media .offer-thumbnail {
  margin: 0;
}

/* -------------------------------
   Layout B: sidebar compact spacing
   ------------------------------- */
#sidebar .sidebar-panel {
  margin-bottom: 14px;
}

#sidebar .merchant-teaser-row {
  margin-bottom: 12px;
}

#sidebar .merchant-header,
#sidebar .merchant-title,
#sidebar .merchant-meta,
#sidebar .merchant-meta p {
  margin: 0;
}

#sidebar .merchant-title {
  font-size: 16px;
  line-height: 1.3;
}

/* -------------------------------
   Mobile tightening
   ------------------------------- */
@media (max-width: 768px) {
  .page-header-row .page-title {
    font-size: 24px;
    line-height: 30px;
  }

  .merchant-header-row .merchant-card {
    padding: 12px;
  }

  .merchant-header-row .merchant-title {
    font-size: 18px;
  }

  .lb-offer-card {
    padding: 10px 12px;
  }

  .lb-store-page .merchant-header-row .merchant-actions .merchant-button {
    font-size: 12px;
  }

  /*
   * Store merchant card: force a single vertical stack (desktop leaves flex-wrap:wrap
   * and align-self:flex-start on actions — on narrow screens that can produce wrapped
   * columns or a narrow action rail beside the body, so text and buttons collide).
   */
  .lb-store-page .merchant-header-row .merchant-card {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
  }

  .lb-store-page .merchant-header-row .merchant-card > .merchant-media {
    flex: 0 0 auto;
    width: 100% !important;
    max-width: 100%;
    align-self: stretch;
  }

  .lb-store-page .merchant-header-row .merchant-card > .merchant-body {
    flex: 0 1 auto;
    width: 100% !important;
    max-width: 100%;
    min-width: 0;
  }

  .lb-store-page .merchant-header-row .merchant-card > .merchant-actions {
    flex: 0 0 auto;
    align-self: stretch;
    width: 100% !important;
    max-width: none;
    margin-left: 0;
    text-align: left;
  }

  .lb-store-page .merchant-header-row .merchant-actions .merchant-button {
    max-width: none;
    width: 100%;
    margin-left: 0;
    white-space: normal;
  }

  /* style.css floats .merchant-rating; in a narrow column it fights flex layout */
  .lb-store-page .merchant-header-row .merchant-rating {
    float: none !important;
    width: 100%;
    max-width: 100%;
    margin: 10px 0 0;
    clear: both;
    box-sizing: border-box;
  }

  .lb-store-page .merchant-header-row .merchant-rating::after {
    content: "";
    display: table;
    clear: both;
  }

  /* Contain floated star labels (style.css) so rows don’t spill into meta/buttons */
  .lb-store-page .merchant-header-row .merchant-body::after {
    content: "";
    display: table;
    clear: both;
  }
}