/*
 * Express Facades: the End of Year Sale (T-148, Facades 1.10.27.9). Loaded on the Garden Room Designer and /garden-rooms/
 * only while the sale is on (inc/sale.php). Modest on purpose: one brass ribbon above each title, the price from
 * 1 January 2027 in a small line under each sale price, and the terms in small print. "Sale" keeps its capitals as
 * written (no upper-case styling). Brass fills sit behind graphite only (7:1); brass text on light is --c-accent-ink (5.5:1).
 */

/* The ribbon (template-parts/sale-ribbon.php) */
.ef-sale-ribbon {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  margin: 0 0 14px;
  padding: 6px 12px 6px 10px;
  border-radius: 999px;
  font-size: 0.875rem;
  line-height: 1.35;
}
.ef-sale-ribbon__name { font-weight: 700; letter-spacing: -0.005em; }
.ef-sale-ribbon__name::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin: 0 7px 1px 2px;
  border-radius: 50%;
  background: currentColor;
  vertical-align: middle;
}
.ef-sale-ribbon--page {
  border: 1px solid var(--c-accent-line);
  background: var(--c-accent-soft);
  color: var(--c-ink);
}
.ef-sale-ribbon--page .ef-sale-ribbon__name::before { background: var(--c-accent); }
.ef-sale-ribbon--page .ef-sale-ribbon__until { color: var(--c-text-2, var(--c-ink-2)); }
.grd .ef-sale-ribbon--designer {
  margin-bottom: 16px;
  background: var(--gold, #C9A54E);
  color: #1C2024;
  text-shadow: none;
  box-shadow: 0 1px 2px rgba(20, 22, 25, 0.25);
}

/* The garden rooms page: the price from 1 January under each sale price, the struck-through variant, the terms */
.ef-sale-after {
  display: block;
  margin-top: 4px;
  font-family: var(--f-mono);
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--c-accent-ink);
}
.gr-hero__price .ef-sale-after { margin-top: 6px; font-size: 0.875rem; }
/* The prices-by-size table's column (ef_sale_th(), ef_sale_td()): on a wide screen its header says "From 1 January 2027",
   so the cell gives the price alone; on a phone each room is a card and the line comes last, below "+ VAT at 20%". */
.gr-table__afterh { min-width: 7.5em; }   /* "From 1 January 2027" may take two lines, so the row keeps its "In 3D" */
@media (min-width: 1280px) and (max-width: 1439.98px) {   /* with the extra column the table needs the panel's full width up to 1440 */
  .gr-prices__panel:has(.gr-table__after) { grid-template-columns: minmax(0, 1fr); }
}
.gr-table__after .ef-sale-after { margin: 0; font-size: 0.8125rem; white-space: nowrap; }
@media (min-width: 640px) {   /* the header says when; screen readers still hear it in the cell */
  .gr-table__after .ef-sale-after__when { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 639.98px) {
  .gr-table tr:has(.gr-table__after) { grid-template-areas: "size go" "area go" "inc go" "ex go" "after go"; }
  .gr-table__after { grid-area: after; margin-top: 4px; }
  .gr-table__after .ef-sale-after { white-space: normal; }
}
.gr-band .ef-sale-after { color: var(--c-accent); }
.ef-sale-was { margin-right: 4px; color: var(--c-muted); font-weight: 500; text-decoration-thickness: 1.5px; }
.gr-band .ef-sale-was { color: var(--c-on-dark-muted); }
.ef-sale-terms {
  margin: 10px 0 0;
  max-width: 34em;
  font-size: var(--fs-xs, 0.8125rem);
  line-height: 1.5;
  color: var(--c-muted);
}
.gr-prices__table .ef-sale-terms { margin: 14px 0 0; font-weight: 600; color: var(--c-ink-2); }

/* The Designer: the tag by "Guide price", the line under the price (sale.js) */
.grd .ef-sale-tag {
  border-color: var(--gold, #C9A54E);
  background: var(--gold, #C9A54E);
  color: #1C2024;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
}
.grd .price__lbl.has-sale { display: block; margin-bottom: 7px; }   /* said on a phone too, as the draft tag is */
@media (max-width: 479.98px) {   /* a phone's bar: the tag alone, so it keeps to one line beside "Get a quote" */
  .grd .price__lbl.has-sale { margin-bottom: 5px; font-size: 0; letter-spacing: 0; }
  .grd .price__lbl.has-sale .grd-tag { font-size: 10.5px; }
}
.grd .price__after { display: block; margin-top: 4px; font: 500 12px/1.3 var(--mono); color: var(--gold-2, #D5B465); }
.grd .price__after[hidden], .grd .ef-sale-tag[hidden], .grd .ef-sale-was[hidden] { display: none; }
.grd .ef-sale-was { margin-right: 6px; font-size: 0.62em; font-weight: 500; color: var(--paper-2); }
.grd .pl .pl__sale th, .grd .pl .pl__sale td { padding-top: 10px; font: 500 14px/1.4 var(--body); color: var(--gold-2, #D5B465); }
.grd .pl .pl__sale td { font-family: var(--mono); }
.grd .pl .pl__sale th small { margin-top: 3px; color: var(--paper-3); }