/* ==========================================================================
   Deals (clearance + temporary sales)
   ========================================================================== */

/* Compact controls for an auto-detected warehouse. */
.geo-banner { display: inline-flex; align-items: center; gap: .4rem .75rem; flex-wrap: wrap; }
.geo-banner-main { display: inline-flex; align-items: center; gap: .35rem; color: var(--muted); font-size: .82rem; }
.geo-banner-main .ico { flex: 0 0 auto; color: var(--brand); }
.geo-banner-actions { display: inline-flex; align-items: center; gap: .5rem; }
.geo-banner-actions form { margin: 0; }
.geo-confirm { background: none; color: var(--brand-dark); border: 0; padding: .34rem 0; font-weight: 600; font-family: var(--font-body); font-size: .82rem; cursor: pointer; white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; }
.geo-confirm:hover { color: var(--brand); }
.geo-change { padding: .34rem .55rem; border-radius: var(--radius-sm); color: var(--muted); font-size: .82rem; white-space: nowrap; text-decoration: none; }
.geo-change:hover { background: var(--brand-tint); color: var(--brand-dark); }
/* Inside the search panel the banner becomes a quiet footer strip under the row,
   with the actions pushed to the trailing edge. */
.search-panel > .geo-banner {
  display: flex;
  width: calc(100% + var(--panel-pad) * 2);
  margin: .9rem calc(var(--panel-pad) * -1) calc(var(--panel-pad) * -1);
  padding: .6rem var(--panel-pad);
  border-top: 1px solid var(--line);
  background: var(--surface-2); border-radius: 0 0 var(--radius) var(--radius);
}
.search-panel > .geo-banner .geo-banner-actions { margin-left: auto; }

/* Page header */
.deals-head { display: flex; align-items: flex-end; justify-content: space-between; gap: .9rem 1.4rem; flex-wrap: wrap; margin-top: .4rem; }
.deals-head-main { flex: 1 1 32rem; min-width: 0; }
.deals-head h1 { margin: 0; }
.deals-intro { margin: .45rem 0 0; color: var(--muted); max-width: 78ch; }
.deals-head-location { color: var(--muted); font-size: .6em; font-weight: 500; white-space: nowrap; }
.deals-meta { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem .9rem; min-height: 2rem; margin-top: .35rem; }
.deals-meta .change-link { font-family: var(--font-body); font-size: .82rem; }
.deals-stale { color: var(--low-stock); font-size: .82rem; }
.deals-local-link { min-height: 40px; display: inline-flex; align-items: center; gap: .35rem; color: var(--brand-dark); font-size: .85rem; font-weight: 600; text-decoration: none; }
.deals-local-link:hover { text-decoration: underline; }
.deals-local-link .ico { width: 1rem; height: 1rem; }

/* Deal-type tabs (segmented filter): the primary way to switch between the
   clearance (.97) and temporary-sale views, with live counts on each. */
.deal-tabs { display: inline-flex; flex-wrap: wrap; gap: .45rem; }
.deal-tab { min-height: 44px; display: inline-flex; align-items: center; gap: .45rem; padding: .42rem .72rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-weight: 600; font-size: .9rem; text-decoration: none; transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease; }
.deal-tab[data-deal-type="all"] { --deal-tab-accent: var(--brand); --deal-tab-tint: var(--brand-tint); }
.deal-tab[data-deal-type="markdown"] { --deal-tab-accent: var(--clearance); --deal-tab-tint: var(--clearance-tint); }
.deal-tab[data-deal-type="sale"] { --deal-tab-accent: var(--sale); --deal-tab-tint: var(--sale-tint); }
.deal-tab:hover { border-color: var(--deal-tab-accent); background: var(--deal-tab-tint); color: var(--text); }
.deal-tab.is-active { border-color: var(--deal-tab-accent); background: var(--deal-tab-tint); box-shadow: inset 0 -2px 0 var(--deal-tab-accent); }
.deal-tab.is-active:hover { color: var(--text); border-color: var(--deal-tab-accent); }
.deal-tab-label { color: var(--text); white-space: nowrap; }
.deal-tab-label-short { display: none; }
.deal-tab-count { font-size: .76rem; font-weight: 600; color: var(--text); background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: .05rem .4rem; min-width: 1.5rem; text-align: center; }
.deal-tab.is-active .deal-tab-count { color: var(--text); background: var(--surface); border-color: var(--deal-tab-accent); }

/* One shared filter + sort toolbar for the deals and search result pages. On a
   wide screen the context (deal tabs or the result count) and the refinements
   share a single row, so the grid starts higher up the page. */
.filter-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-4); flex-wrap: wrap; margin: var(--space-6) 0 var(--space-4); padding-bottom: var(--space-4); border-bottom: 1px solid var(--line-strong); }
.filter-toolbar-main { display: flex; align-items: center; gap: .8rem 1rem; flex-wrap: wrap; }
.filter-form { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.filter-field { display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; font-weight: 500; color: var(--text); }
.filter-field select { min-height: 44px; font: inherit; font-size: .88rem; font-weight: 400; color: var(--text); padding: .4rem 2rem .4rem .6rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; }
.filter-field select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
.filter-field input[type=search] { min-height: 44px; width: 12rem; font: inherit; font-size: .88rem; font-weight: 400; color: var(--text); padding: .4rem .6rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); }
.filter-field input[type=search]:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
.filter-clear { font-size: .82rem; }
.filter-toolbar .results-meta { margin: 0; }

/* Refinement bar: the filter/sort controls sit in one full-width surface. */
.filter-controls { display: flex; align-items: center; gap: .6rem .8rem; flex-wrap: wrap; }
.mobile-filter-panel > summary { display: none; }
.filter-panel { padding: 0; border: 0; background: none; box-shadow: none; }
/* Low-stock visibility toggle, styled as a labeled checkbox. */
.deals-lowstock-form { display: inline-flex; margin: 0 0 0 .1rem; padding-left: .8rem; border-left: 1px solid var(--line); }
.deals-lowstock { min-height: 44px; display: inline-flex; align-items: center; gap: .45rem; font-family: inherit; font-size: .82rem; font-weight: 500; color: var(--text); text-decoration: none; cursor: pointer; white-space: nowrap; background: none; border: 0; padding: 0; }
.deals-lowstock:hover { color: var(--brand-dark); }
.deals-lowstock-box { width: 1.05rem; height: 1.05rem; border: 1px solid var(--line-strong); border-radius: 4px; background: var(--surface); flex: 0 0 auto; position: relative; }
.deals-lowstock:hover .deals-lowstock-box { border-color: var(--brand); }
.deals-lowstock.is-on .deals-lowstock-box { background: var(--brand); border-color: var(--brand); }
.deals-lowstock.is-on .deals-lowstock-box::after { content: ""; position: absolute; left: 5px; top: 1px; width: 4px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.deals-lowstock:focus-visible { outline: none; }
.deals-lowstock:focus-visible .deals-lowstock-box { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }

/* Sections */
.deal-section { margin-top: 2.5rem; }
.deals-results { margin-top: .85rem; }
.deal-results-note { color: var(--muted); font-size: .85rem; margin: 0 0 .55rem; }
.deal-results-meta { display: flex; align-items: baseline; justify-content: space-between; gap: .35rem 1rem; flex-wrap: wrap; margin-bottom: .55rem; }
.deal-results-meta.is-count-only { justify-content: flex-end; }
.deal-results-meta .deal-results-note { margin: 0; }
.deal-section-head { margin-bottom: .2rem; }
.deal-section-head h2 { display: flex; align-items: center; gap: .55rem; margin: 1.4rem 0 .25rem; }
.deal-section-note { color: var(--muted); font-size: .9rem; margin: 0 0 .4rem; max-width: 80ch; }
.featured-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.featured-heading h2 { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.featured-view-all { flex: none; display: inline-flex; align-items: center; min-height: 44px; font-size: var(--text-sm); font-weight: 600; white-space: nowrap; }
.featured-foot .btn-outline { width: 100%; }

/* In-card sale countdown */
.deal-countdown { display: inline-flex; align-items: center; gap: .3rem; flex: none; font-size: var(--text-2xs); font-weight: 600; color: var(--sale); background: var(--sale-tint); border: 1px solid var(--sale-line); padding: .05rem .35rem; border-radius: var(--radius-sm); white-space: nowrap; }
.deal-countdown .ico { width: 1em; height: 1em; }
.deal-countdown.is-soon { color: var(--warn-ink); background: var(--warn-tint); border-color: var(--warn-line); }
.deal-countdown.is-urgent { color: var(--out-stock); background: var(--danger-tint); border-color: var(--danger-line); }

/* Stack the deals toolbar and show the type tabs as a 2-up segmented control on
   narrow screens. Placed after the base .deal-tabs rule so it wins the cascade. */
@media (max-width: 600px) {
  .deals-head { align-items: stretch; }
  .warehouse-directory-head { align-items: flex-start; flex-direction: column; gap: .65rem; }
  .stores-form { display: flex; }
  .stores-form .btn-locate { width: 100%; justify-content: center; }
  .warehouse-region-grid { grid-template-columns: 1fr; }
  .warehouse-region[open] { grid-column: auto; }
  .search-scope-options { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .search-scope-label { height: 100%; padding: .35rem .5rem; }
  .search-scope-label strong, .search-scope-label small { white-space: normal; }
  /* Two up on a phone. One full-width card per row made each deal about a
     screen tall, which is the wrong shape for scanning hundreds of them. */
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-2); }
  .card { padding: var(--space-2); gap: var(--space-1); }
  .card-media { margin: 0 0 var(--space-1); aspect-ratio: 4 / 3; }
  .card-img { padding: .4rem; }
  .deals-results .browse-card .card-title a { -webkit-line-clamp: 3; min-height: calc(3 * 1.35em); }
  .card-title { font-size: .85rem; }
  .card .price { font-size: 1.25rem; }
  /* Too narrow to keep the comparison and the countdown on one line. */
  .card-meta { flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; }
  .card-meta.is-countdown-only { justify-content: flex-end; }
  /* Safari zooms the page when a control's text is under 16px, which leaves the
     page scrolled sideways after picking a filter. */
  .filter-field select { font-size: 1rem; }
  .filter-toolbar { flex-direction: column; align-items: stretch; }
  .filter-toolbar-main { display: block; }
  .mobile-filter-panel { width: 100%; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); }
  .mobile-filter-panel > summary { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .55rem .7rem; cursor: pointer; list-style: none; font-weight: 600; }
  .mobile-filter-panel > summary::-webkit-details-marker { display: none; }
  .mobile-filter-panel > summary::after { content: "▾"; color: var(--muted); }
  .mobile-filter-panel[open] > summary::after { content: "▴"; }
  .mobile-filter-panel > summary span { color: var(--muted); font-size: .72rem; font-weight: 500; }
  .mobile-filter-body { padding: .65rem .7rem .75rem; border-top: 1px solid var(--line); }
  .mobile-filter-panel:not([open]) > .mobile-filter-body { display: none; }
  .filter-panel { padding: 0; }
  .filter-controls { align-items: stretch; }
  .deals-lowstock-form { width: 100%; margin: 0; padding: 0; border-left: 0; }
  .deals-lowstock { width: 100%; min-height: 44px; }
  .filter-form { display: grid; grid-template-columns: 1fr; width: 100%; gap: .55rem; }
  .filter-form .filter-field { display: grid; grid-template-columns: 6rem minmax(0, 1fr); width: 100%; }
  .filter-form .filter-field select, .filter-form .filter-field input[type=search] { width: 100%; min-width: 0; font-size: 1rem; }
  .filter-clear { display: block; padding: .3rem; text-align: center; }
  .deal-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Three equal thirds are too narrow to hold "Markdowns" and its count side by
     side, so stack the count under the label instead of letting the pill get
     squeezed until the number spills out of it. */
  .deal-tab { flex-direction: column; justify-content: center; min-width: 0; padding: .4rem .3rem; gap: .1rem; }
  .deal-tab-count { flex: none; }
  .deal-tab-label-full { display: none; }
  .deal-tab-label-short { display: inline; }
  .deals-head-main { flex: 0 0 auto; width: 100%; max-width: none; }
  .geo-banner { width: 100%; }
  .geo-banner-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; gap: .45rem; }
  .geo-banner-actions form, .geo-confirm { width: 100%; }
  .geo-confirm, .geo-change { min-height: 44px; }
  .geo-change { display: flex; align-items: center; justify-content: center; padding: .3rem; text-align: center; border: 1px solid var(--line-strong); font-weight: 600; }
}

@media (max-width: 360px) {
  .deal-tab-label { white-space: normal; line-height: 1.2; text-align: center; }
}