/* 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-coupons-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 header star row (shared row_store_buttons.logic.tpl): lang-script bootstrap/style.css
 * has no .merchant-rating rules (see layout_a.css). Mobile rules below used to force
 * float:none on .merchant-rating, which broke the horizontal star row — mirror Layout A.
 */
.lb-store-page .merchant-header-row .merchant-body .merchant-rating {
  float: left;
  font-size: 10px;
  clear: both;
  margin: 8px 0 0;
  box-sizing: border-box;
}

.lb-store-page .merchant-header-row .merchant-body .merchant-rating:not(:checked) > input {
  position: absolute;
  top: -9999px;
  clip: rect(0, 0, 0, 0);
}

.lb-store-page .merchant-header-row .merchant-body .merchant-rating:not(:checked) > label {
  float: right;
  width: 1em;
  padding: 0 0.1em;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
  font-size: 200%;
  line-height: 1.2;
  color: #ddd;
}

.lb-store-page .merchant-header-row .merchant-body .merchant-rating > input:checked ~ label:before {
  color: #fb8b24;
  content: "\2605";
}

.lb-store-page .merchant-header-row .merchant-body .merchant-rating:not(:checked) > label:hover:before,
.lb-store-page .merchant-header-row .merchant-body .merchant-rating:not(:checked) > label:hover ~ label:before {
  color: #fb8b24;
  content: "\2605";
}

.lb-store-page .merchant-header-row .merchant-body .merchant-rating > input:checked + label:hover:before,
.lb-store-page .merchant-header-row .merchant-body .merchant-rating > input:checked + label:hover ~ label:before,
.lb-store-page .merchant-header-row .merchant-body .merchant-rating > input:checked ~ label:hover:before,
.lb-store-page .merchant-header-row .merchant-body .merchant-rating > input:checked ~ label:hover ~ label:before,
.lb-store-page .merchant-header-row .merchant-body .merchant-rating > label:hover ~ input:checked ~ label:before {
  color: #fb8b24;
  content: "\2605";
}

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

/* 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;
}

/* Store tab panes: neutralize span11 offsets inside tab-content.
 * Kept for backward compatibility: Layout B's own store_content.tpl no
 * longer emits .tab-pane.span11 (see layout_b/store_content.tpl — the
 * coupon-first single-list structure was restored to match main-script),
 * but any caller that still renders a tab widget inside .lb-store-page
 * should stay contained. */
.lb-store-page .tab-content > .tab-pane.span11 {
  width: 100%;
  max-width: 100%;
  float: none;
  margin-left: 0;
  box-sizing: border-box;
}

/*
 * Layout B store shell containment — keeps the main content column
 * physically inside <section class="span9"> so <div class="span3" id="sidebar">
 * next to it (see layout_b/store.tpl -> sidebar.tpl) can actually
 * render on the right.
 *
 * Why this is needed:
 *   layout_b/store_content.tpl (mirrored from main-script) emits
 *     <section class="store-deals-list span12 lb-store-deals-list">
 *     <section class="store-overview span10 lb-store-overview">
 *   as top-level children of <section class="span9">. Those .span12 /
 *   .span10 class names also match bootstrap.css static grid rules:
 *     [class*="span"] { float:left; margin-left:20px; }
 *     .span12 { width: 940px; }
 *     .span10 { width: 780px; }
 *   Both widths are LARGER than the .span9 parent (700px at the default
 *   bootstrap 2 breakpoint, ~870px at >=1200px). The result is a floated
 *   block that sticks out of span9 to the right, visually covering the
 *   adjacent span3 sidebar column — which the user reads as "right
 *   sidebar is missing / main content spans too wide".
 *
 * Fix:
 *   Scoped to .lb-store-page .lb-store-main direct children so it only
 *   neutralizes span12/span10 for the Layout B offer list + overview
 *   sections and cannot leak to Layout A (.la-*) or Layout C (.lc-portal).
 *   Keeps the span12/span10 class names in the markup (preserves parity
 *   with main-script template) but makes those sections behave as normal
 *   block elements filling the span9 content width.
 */
.lb-store-page .lb-store-main > .lb-store-deals-list,
.lb-store-page .lb-store-main > .lb-store-overview {
  display: block;
  width: 100%;
  max-width: 100%;
  float: none;
  margin-left: 0;
  box-sizing: border-box;
}

/*
 * Layout B coupon rows (row_coupon.tpl): .row-fluid.lb-offer-row > .span2.offer-media
 * + .span10.offer-body — two-column row only on wide viewports (>=980px).
 *
 * bootstrap-responsive.css uses max-width:767px for stacking; between 768px
 * and 979px Bootstrap 2 still applies fluid span widths + floats, which left
 * a squeezed two-column row on tablets. Desktop two-column is scoped to
 * min-width:980px; stacking is handled in max-width:979px below.
 */
.lb-store-page .lb-store-deals-list .lb-offer-row.row-fluid:before,
.lb-store-page .lb-store-deals-list .lb-offer-row.row-fluid:after {
  display: table;
  line-height: 0;
  content: "";
}

.lb-store-page .lb-store-deals-list .lb-offer-row.row-fluid:after {
  clear: both;
}

@media (min-width: 980px) {
  .lb-store-page .lb-store-deals-list .lb-offer-row.row-fluid > .span2.offer-media,
  .lb-store-page .lb-store-deals-list .lb-offer-row.row-fluid > .span10.offer-body {
    float: left;
    display: block;
    box-sizing: border-box;
    min-height: 1px;
  }

  .lb-store-page .lb-store-deals-list .lb-offer-row.row-fluid > .span2.offer-media:first-child {
    margin-left: 0;
  }
}
/* -------------------------------
   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;
}

/*
 * Layout B deal list card: desktop (>=980px) only — CSS Grid places
 * .lb-offer-supporting-media in column 1 (thumbnail left). Below 979px a
 * flex column stack + order is applied later so tablet/mobile do not inherit
 * this grid (which fought the previous max-width:767px-only overrides).
 */
@media (min-width: 980px) {
  .lb-offer-card.lb-offer-card-deal-list .lb-offer-shell {
    display: grid;
    grid-template-columns: minmax(92px, 140px) minmax(0, 1fr) auto;
    column-gap: 16px;
    row-gap: 8px;
    align-items: start;
  }

  .lb-offer-card.lb-offer-card-deal-list .lb-offer-shell > .hide {
    display: none !important;
  }

  .lb-offer-card.lb-offer-card-deal-list .lb-offer-supporting-media {
    grid-column: 1;
    grid-row: 1 / -1;
    margin-top: 0;
    justify-self: stretch;
  }

  .lb-offer-card.lb-offer-card-deal-list .lb-offer-card-header {
    grid-column: 2 / 4;
    grid-row: 1;
  }

  .lb-offer-card.lb-offer-card-deal-list .lb-offer-deal-body {
    grid-column: 2 / 4;
    grid-row: 2;
  }

  .lb-offer-card.lb-offer-card-deal-list .lb-offer-deal-utility {
    grid-column: 2;
    grid-row: 3;
    align-self: center;
  }

  .lb-offer-card.lb-offer-card-deal-list .lb-offer-primary-cta {
    grid-column: 3;
    grid-row: 3;
    align-self: center;
    justify-self: end;
  }

  /* deal_media.frag.tpl wraps the thumb in .span2 — neutralise nested floats inside rail */
  .lb-offer-card.lb-offer-card-deal-list .lb-offer-supporting-media [class*="span"] {
    float: none;
    width: 100% !important;
    max-width: 100%;
    margin-left: 0 !important;
    box-sizing: border-box;
  }
}

/*
 * Layout B store coupons + deal cards: stack at tablet/mobile (<=979px).
 * Covers 768–979px where Bootstrap 2 still uses fluid columns and where
 * max-width:767px-only rules never applied.
 */
@media (max-width: 979px) {
  .lb-store-page .lb-store-deals-list .lb-offer-row.row-fluid {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }

  .lb-store-page .lb-store-deals-list .lb-offer-row.row-fluid > .span2.offer-media,
  .lb-store-page .lb-store-deals-list .lb-offer-row.row-fluid > .span10.offer-body {
    float: none !important;
    width: 100% !important;
    max-width: 100%;
    margin-left: 0 !important;
    display: block;
    box-sizing: border-box;
    min-width: 0;
  }

  .lb-store-page .lb-store-deals-list .lb-offer-row.row-fluid > .span10.offer-body {
    min-width: 0;
  }

  .lb-store-page .lb-store-deals-list .lb-offer-row .offer-media {
    width: 100%;
    max-width: 100%;
    margin: 0 0 14px 0;
    text-align: center;
    box-sizing: border-box;
  }

  .lb-store-page .lb-store-deals-list .lb-offer-row .offer-media .thumbnail,
  .lb-store-page .lb-store-deals-list .lb-offer-row .offer-media .thumbnail img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }

  .lb-store-page .lb-store-deals-list .lb-offer-row .lb-offer-body {
    min-width: 0;
  }

  .lb-store-page .lb-store-deals-list .lb-offer-row .offer-body,
  .lb-store-page .lb-store-deals-list .lb-offer-row .offer-title,
  .lb-store-page .lb-store-deals-list .lb-offer-row .offer-title a,
  .lb-store-page .lb-store-deals-list .lb-offer-row h2.offer-title,
  .lb-store-page .lb-store-deals-list .lb-offer-row h2.offer-title a {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    white-space: normal;
    word-break: normal;
    overflow-wrap: anywhere;
    box-sizing: border-box;
  }

  .lb-store-page .lb-store-deals-list .lb-offer-row .offer-title,
  .lb-store-page .lb-store-deals-list .lb-offer-row .offer-title a,
  .lb-store-page .lb-store-deals-list .lb-offer-row h2.offer-title,
  .lb-store-page .lb-store-deals-list .lb-offer-row h2.offer-title a {
    font-size: 22px;
    line-height: 1.2;
  }

  .lb-store-page .lb-store-deals-list .lb-offer-row .offer-meta,
  .lb-store-page .lb-store-deals-list .lb-offer-row .offer-meta p,
  .lb-store-page .lb-store-deals-list .lb-offer-row .offer-meta small {
    width: 100%;
    max-width: 100%;
    white-space: normal;
    word-break: normal;
    overflow-wrap: anywhere;
    box-sizing: border-box;
  }

  .lb-store-page .lb-store-deals-list .lb-offer-row .offer-description-box {
    max-width: 100%;
    box-sizing: border-box;
  }

  .lb-store-page .lb-store-deals-list .lb-offer-row .lb-offer-actions,
  .lb-store-page .lb-store-deals-list .lb-offer-row .offer-actions,
  .lb-store-page .lb-store-deals-list .lb-offer-row footer.offer-actions {
    clear: both;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin-top: 8px;
  }

  .lb-store-page .lb-store-deals-list .lb-offer-row .offer-box,
  .lb-store-page .lb-store-deals-list .lb-offer-row .coupon-box {
    float: none !important;
    width: auto !important;
    min-width: 150px;
    max-width: 100%;
    text-align: center;
    box-sizing: border-box;
  }

  /* Deal list card: flex stack (grid rules only apply >=980px above). */
  .lb-offer-card.lb-offer-card-deal-list {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }

  .lb-offer-card.lb-offer-card-deal-list .lb-offer-shell {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    grid-template-columns: none;
    column-gap: 0;
    row-gap: 10px;
  }

  .lb-offer-card.lb-offer-card-deal-list .lb-offer-shell > .hide {
    display: none !important;
    order: 0;
  }

  .lb-offer-card.lb-offer-card-deal-list .lb-offer-supporting-media {
    order: 1;
    grid-column: auto !important;
    grid-row: auto !important;
    margin-top: 0;
    width: 100%;
    text-align: center;
  }

  .lb-offer-card.lb-offer-card-deal-list .lb-offer-card-header {
    order: 2;
    grid-column: auto !important;
    grid-row: auto !important;
  }

  .lb-offer-card.lb-offer-card-deal-list .lb-offer-deal-body {
    order: 3;
    grid-column: auto !important;
    grid-row: auto !important;
  }

  .lb-offer-card.lb-offer-card-deal-list .lb-offer-deal-utility {
    order: 4;
    grid-column: auto !important;
    grid-row: auto !important;
  }

  .lb-offer-card.lb-offer-card-deal-list .lb-offer-primary-cta {
    order: 5;
    grid-column: auto !important;
    grid-row: auto !important;
    margin-top: 4px;
    margin-bottom: 0;
  }

  .lb-offer-card.lb-offer-card-deal-list .lb-offer-supporting-media [class*="span"] {
    float: none !important;
    width: 100% !important;
    max-width: 100%;
    margin-left: 0 !important;
  }

  .lb-offer-card.lb-offer-card-deal-list .lb-offer-supporting-media .offer-thumbnail,
  .lb-offer-card.lb-offer-card-deal-list .lb-offer-supporting-media .offer-thumbnail img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    box-sizing: border-box;
  }

  .lb-offer-card.lb-offer-card-deal-list .lb-offer-card-header .offer-title,
  .lb-offer-card.lb-offer-card-deal-list .lb-offer-card-header .offer-title a {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    white-space: normal;
    word-break: normal;
    overflow-wrap: anywhere;
    font-size: 22px;
    line-height: 1.2;
    box-sizing: border-box;
  }

  .lb-offer-card.lb-offer-card-deal-list .lb-offer-card-header .offer-meta,
  .lb-offer-card.lb-offer-card-deal-list .lb-offer-card-header .offer-meta p {
    width: 100%;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
    box-sizing: border-box;
  }

  .lb-offer-card.lb-offer-card-deal-list .lb-offer-primary-cta .offer-actions {
    justify-content: space-between;
    width: 100%;
    max-width: 100%;
    flex-wrap: wrap;
    gap: 10px;
    box-sizing: border-box;
  }

  .lb-offer-card.lb-offer-card-deal-list .lb-offer-primary-cta .offer-box {
    float: none !important;
    width: auto !important;
    min-width: 150px;
    max-width: 100%;
    box-sizing: border-box;
  }
}

.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;
}

/*
 * Layout B primary CTA ("Get this deal") visual treatment.
 *
 * Main-script reference: templates/bootstrap/css/style.css groups
 *   .coupon-box, .offer-box { width:150px !important; padding:6px !important;
 *     background-color:{{color_1}}; color:#fff; text-align:center;
 *     border-radius:3px; cursor:pointer; }
 * so <div class="offer-box pull-right"> emitted by
 * shared/offer/fragments/list/deal_footer_actions.frag.tpl renders as a
 * prominent branded button inside the Layout B offer card.
 *
 * In this migration the shared style.css lost `.offer-box` from that
 * selector group (only `.coupon-box` remained), so the CTA element inside
 * .lb-offer-card had no background / width / padding / radius and the
 * inner <a class="white"> rendered as invisible white text on the white
 * .lb-offer-card background. That is the "CTA is visually weak" symptom.
 *
 * Fix is applied here (not in style.css) to stay strictly Layout-B-scoped:
 * layout_b.css is only served when layout_variant=layout_b (see
 * lang-script/index.php layout pack CSS wiring), and every selector is
 * anchored under .lb-offer-card so it cannot match Layout A (.la-offer-card)
 * or Layout C wrappers (.lc-portal--*) even if the file were ever loaded.
 */
.lb-offer-card .offer-box {
  display: inline-block;
  box-sizing: border-box;
  width: 150px;
  max-width: 100%;
  padding: 6px;
  background-color: #2c3e50;
  color: #fff;
  text-align: center;
  border-radius: 3px;
  cursor: pointer;
}

.lb-offer-card .offer-box a,
.lb-offer-card .offer-box a:link,
.lb-offer-card .offer-box a:visited,
.lb-offer-card .offer-box a:hover,
.lb-offer-card .offer-box a:focus,
.lb-offer-card .offer-box a:active {
  color: #fff;
  text-decoration: none;
}

/*
 * Contain the float pair inside <footer class="offer-actions">:
 *   .vote-area           -> float:left  (style.css)
 *   .offer-box.pull-right -> float:right (bootstrap .pull-right)
 * Without a clearfix <footer> collapses to 0 height, which is why the
 * .lb-offer-deal-body .well.offer-description-box visually tucks under the
 * CTA row and the card's vertical rhythm (header / CTA / excerpt / share /
 * media) reads as misaligned. Scoped to .lb-offer-card so it only affects
 * the Layout B deal/coupon card, not merchant-header / merchant-actions.
 */
.lb-offer-card .offer-actions,
.lb-offer-row .lb-offer-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.lb-offer-card .offer-actions::after {
  content: "";
  display: table;
  clear: both;
}

.lb-offer-row .lb-offer-actions::after {
  content: "";
  display: table;
  clear: both;
}

/* Layout B bottom action rows: neutralize legacy global floats/widths. */
.lb-offer-card .offer-share,
.lb-offer-row .offer-share {
  width: auto !important;
  max-width: 100%;
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px 7px;
}

.lb-offer-row .offer-share {
  float: left;
  margin-top: 8px;
  margin-right: 16px;
}

.lb-offer-card .offer-share a,
.lb-offer-row .offer-share a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.lb-offer-card .offer-share img,
.lb-offer-row .offer-share img {
  float: none !important;
  display: block;
  width: 32px;
  height: 32px;
}

.lb-offer-card .vote-area,
.lb-offer-row .vote-area {
  float: none !important;
  width: auto !important;
  max-width: none;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

.lb-offer-card .vote-area .vote-box,
.lb-offer-row .vote-area .vote-box {
  float: none !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: auto !important;
  min-width: 52px;
  padding: 2px 6px !important;
  line-height: 1.2 !important;
  font-size: 15px;
}

.lb-offer-card .vote-area .vote-box small,
.lb-offer-row .vote-area .vote-box small {
  display: block;
  line-height: 1.2;
  white-space: nowrap;
}

.lb-offer-card .vote-area .vote-button,
.lb-offer-row .vote-area .vote-button {
  float: none !important;
  width: 28px !important;
  min-width: 28px;
  height: 28px;
  margin: 0 !important;
  padding: 4px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.lb-offer-card .offer-box.pull-right,
.lb-offer-row .offer-box.pull-right {
  float: none !important;
  flex: 0 0 auto;
}

.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) {
  /* Coupons/Deals controls: stack sort and pages cleanly on phones */
  .lb-coupons-page .coupons-sort,
  .lb-coupons-page .coupons-pages,
  .lb-deals-page .deals-sort,
  .lb-deals-page .deals-pages {
    float: none;
    width: 100%;
    margin: 0 0 8px;
    text-align: left;
  }

  .lb-coupons-page .coupons-sort ul,
  .lb-coupons-page .coupons-pages ul,
  .lb-deals-page .deals-sort ul,
  .lb-deals-page .deals-pages ul {
    margin: 0;
  }

  .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;
  }

  .lb-store-page .merchant-header-row .merchant-body .merchant-rating {
    margin-top: 10px;
  }

  /* Contain floated star labels so flex body height includes the star row */
  .lb-store-page .merchant-header-row .merchant-body::after {
    content: "";
    display: table;
    clear: both;
  }
}