/* ==========================================================================
   Fun Coupons – store pages (/dealstore/<store>/), v4 (Oct 30 2026)
   Michael (Oct 30): back to the ORIGINAL single-column layout (full width,
   offers 3 across, sections one after another). Only these changes:
     - Desktop: the email sign-up box and the "offers by month" chart sit side by side.
     - Store header band look (blue top line, light gradient, bigger store name).
     - FAQ as cards, even ticket spacing, muted expired cards, phones show 4 similar
       stores, no empty widget gap above the footer.
   Loaded by inc/page-styles.php on store pages only (after fc-main).
   No markup, links, data-* or tracking changes. Text never smaller than before.
   (The sidebar version is kept in git history: commit b5eefcc.)
   ========================================================================== */

@media (min-width: 1024px) {

  /* ---------- Store header: same 3 parts, hero look ------------------- */
  html body.tax-dealstore .fc-store > .fc-store-head {
    background: linear-gradient(110deg, var(--fc-surface) 55%, #eef5fd 100%);
    border-color: #d5e3f5;
    box-shadow: inset 0 4px 0 var(--fc-brand), var(--fc-shadow);
  }
  html body.tax-dealstore .fc-store-head__title { font-size: 38px !important; line-height: 1.2 !important; }

  /* ---------- Email box + "offers by month" chart side by side -------- */
  /* .fc-store-main becomes a 2-column grid; everything spans both columns except
     the email box (left) and the chart (right). "dense" lets the chart move up
     next to the email box; all other sections keep their order, full width.  */
  html body.tax-dealstore .fc-store-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    grid-auto-flow: row dense;
    column-gap: 16px;
    align-items: start;
  }
  html body.tax-dealstore .fc-store-main > *,
  html body.tax-dealstore .fc-store-extra > * { grid-column: 1 / -1; min-width: 0; }
  html body.tax-dealstore .fc-store-extra { display: contents; }

  /* only when both are there and the email box is showing */
  html body.tax-dealstore .fc-store-main:has(.fc-hist):has(> .fc-ebox-wrap:not([hidden])) > .fc-ebox-wrap {
    grid-column: 1; align-self: stretch; display: flex; flex-direction: column;
    padding-top: calc(18px * 1.25 + 10px);      /* = chart heading height, so the two cards line up */
  }
  html body.tax-dealstore .fc-store-main:has(.fc-hist):has(> .fc-ebox-wrap:not([hidden])) .fc-store-extra > .fc-hist {
    grid-column: 2; align-self: stretch; display: flex; flex-direction: column;
  }
  html body.tax-dealstore .fc-store-main:has(.fc-hist):has(> .fc-ebox-wrap:not([hidden])) .fc-store-extra > .fc-hist .fc-hist__card { flex: 1 1 auto; }
  html body.tax-dealstore .fc-store-main:has(.fc-hist):has(> .fc-ebox-wrap:not([hidden])) .fc-store-extra > .fc-hist .fc-section-title { margin: 0 2px 10px !important; line-height: 1.25 !important; }
  /* email box as a stacked card, filling the chart card's height */
  html body.tax-dealstore .fc-store-main:has(.fc-hist) > .fc-ebox-wrap:not([hidden]) .fc-ebox {
    flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; gap: 0; padding: 16px;
  }
  html body.tax-dealstore .fc-store-main:has(.fc-hist) > .fc-ebox-wrap:not([hidden]) .fc-ebox__title { margin: 0 0 10px !important; text-align: left !important; }
  html body.tax-dealstore .fc-store-main:has(.fc-hist) > .fc-ebox-wrap:not([hidden]) .fc-ebox__row { display: flex; width: 100%; max-width: 100%; margin: 0; }
  html body.tax-dealstore .fc-store-main:has(.fc-hist) > .fc-ebox-wrap:not([hidden]) .fc-ebox__row input[type="email"] { flex: 1 1 auto; width: auto !important; min-width: 0 !important; margin: 0 !important; }
  html body.tax-dealstore .fc-store-main:has(.fc-hist) > .fc-ebox-wrap:not([hidden]) .fc-ebox__row button { flex: 0 0 auto; margin: 0 !important; }
  html body.tax-dealstore .fc-store-main:has(.fc-hist) > .fc-ebox-wrap:not([hidden]) .fc-ebox__fine { margin: 8px 0 0 !important; }
  html body.tax-dealstore .fc-ebox-wrap[hidden] { display: none !important; }

  /* ---------- Expired codes: muted look only (same layout as before) -- */
  html body.tax-dealstore .fc-ticket-wrap--expired .fc-ticket { background: #f6f7f9; box-shadow: none; border-color: var(--fc-line); }
  html body.tax-dealstore .fc-ticket-wrap--expired .fc-ticket__tear::before,
  html body.tax-dealstore .fc-ticket-wrap--expired .fc-ticket__tear::after { background: var(--fc-bg); }
  html body.tax-dealstore .fc-ticket-wrap--expired .fc-deal,
  html body.tax-dealstore .fc-ticket-wrap--expired .fc-ticket__logo { filter: grayscale(1); opacity: .6; }
  html body.tax-dealstore .fc-ticket-wrap--expired .fc-ticket__title a { color: var(--fc-muted) !important; }
}

/* ==========================================================================
   Phones + tablets (<1024px) (Michael, Oct 30): similar stores show the first 4 only; the existing
   "See all … coupons" link follows. The rest stay in the HTML (links for Google).
   Desktop keeps every similar store (Settings → related_limit, currently 8).
   ========================================================================== */
@media (max-width: 1023px) {
  html body.tax-dealstore .fc-related__grid > .fc-rel-card:nth-child(n+5) { display: none; }
}

/* All widths (Oct 30): the store sidebar widget area holds an old Amazon ad script that renders nothing,
   but its box left a ~57px gap under About. Hidden while it has nothing visible (comes back on its own
   if an ad iframe, image or link ever renders). */
html body.tax-dealstore .fc-store-aside:not(:has(iframe, img, a, p, ins, video)) { display: none !important; }
/* Phones + tablets: less empty space between the last card and the footer (was 32px + 28px) */
@media (max-width: 1023px) {
  html body.tax-dealstore .fc-store.rh-container { padding-bottom: 12px !important; }
}




/* ==========================================================================
   FAQ as separate cards (Michael, Oct 30) — all widths. Same questions and
   answers (native <details>), text never smaller than before.
   Desktop: 2 columns, the open question spans the full row. Phones: one column, condensed.
   ========================================================================== */
html body.tax-dealstore .fc-faq-section .fc-section-title { margin-bottom: 4px !important; }
html body.tax-dealstore .fc-faq__sub { margin: 0 2px 12px !important; color: var(--fc-muted); font-size: 14.5px; line-height: 1.4; }
html body.tax-dealstore .fc-faq {
  display: grid !important; grid-template-columns: minmax(0, 1fr); gap: 8px;
  background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important;
}
html body.tax-dealstore .fc-faq details {
  min-width: 0; background: var(--fc-surface); border: 1px solid var(--fc-line) !important; border-radius: 12px;
  box-shadow: var(--fc-shadow); transition: border-color .15s, box-shadow .15s;
}
html body.tax-dealstore .fc-faq details[open] { border-color: var(--fc-brand) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--fc-brand) 14%, transparent); }
html body.tax-dealstore .fc-faq summary {
  display: flex !important; align-items: flex-start !important; justify-content: flex-start !important; gap: 10px !important;
  min-height: 0 !important; padding: 12px !important; line-height: 1.35 !important; cursor: pointer;
}
html body.tax-dealstore .fc-faq summary::before {
  content: "Q"; flex: none; width: 24px; height: 24px; margin-top: -1px; border-radius: 7px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--fc-brand) 10%, var(--fc-surface)); color: var(--fc-brand); font: 800 12.5px/1 var(--fc-display);
}
html body.tax-dealstore .fc-faq summary .fc-ico--chev {
  flex: none; margin-left: auto; width: 28px !important; height: 28px !important; margin-top: -3px; padding: 6px; border-radius: 50%;
  background: color-mix(in srgb, var(--fc-brand) 10%, var(--fc-surface)); color: var(--fc-brand) !important; box-sizing: border-box;
}
html body.tax-dealstore .fc-faq details[open] summary .fc-ico--chev { background: var(--fc-brand); color: #fff !important; }
html body.tax-dealstore .fc-faq__body { padding: 0 12px 12px 46px !important; color: var(--fc-muted); }
html body.tax-dealstore .fc-faq__body p, html body.tax-dealstore .fc-faq__body li { color: var(--fc-ink2); }
@media (min-width: 1024px) {
  html body.tax-dealstore .fc-faq { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
  html body.tax-dealstore .fc-faq details[open] { grid-column: 1 / -1; }
  html body.tax-dealstore .fc-faq summary { padding: 16px 16px !important; gap: 12px !important; }
  html body.tax-dealstore .fc-faq summary::before { width: 28px; height: 28px; font-size: 13.5px; }
  html body.tax-dealstore .fc-faq summary .fc-ico--chev { width: 32px !important; height: 32px !important; padding: 7px; margin-top: -2px; }
  html body.tax-dealstore .fc-faq__body { padding: 0 60px 16px 56px !important; }
  html body.tax-dealstore .fc-faq__sub { margin-bottom: 14px !important; }
}
/* Phones: FAQ cards kept compact */
@media (max-width: 1023px) {
  html body.tax-dealstore .fc-faq { gap: 6px; }
  html body.tax-dealstore .fc-faq summary { padding: 10px 10px 10px 12px !important; gap: 9px !important; }
  html body.tax-dealstore .fc-faq summary::before { width: 22px; height: 22px; font-size: 12px; margin-top: 0; }
  html body.tax-dealstore .fc-faq summary .fc-ico--chev { width: 26px !important; height: 26px !important; padding: 5px; margin-top: -2px; }
  html body.tax-dealstore .fc-faq__body { padding: 0 12px 10px 43px !important; }
  html body.tax-dealstore .fc-faq__sub { margin-bottom: 10px !important; }
}


/* Ticket spacing, store pages, all widths (Michael, Oct 30): logo and title had only 6px between them, while an empty
   "verified" row left ~20px under the title. Now: ~10px logo -> title, ~12px text -> tear line, verified line or not. */
html body.tax-dealstore .fc-ticket__top { row-gap: 0 !important; }
html body.tax-dealstore .fc-ticket__lr { margin-bottom: 10px !important; }
html body.tax-dealstore .fc-ticket__top > .fc-ticket__verify { margin-top: 6px !important; }
html body.tax-dealstore .fc-ticket__tear { margin-top: 12px !important; }

/* Email box + chart: even it out (Michael, Oct 30) — equal columns, same top line for both cards,
   room under the "Stores can change…" note, shorter chart so neither card has big empty areas. */
@media (min-width: 1024px) {
  html body.tax-dealstore .fc-store-main:has(.fc-hist):has(> .fc-ebox-wrap:not([hidden])) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 20px; }
  html body.tax-dealstore .fc-store-main:has(.fc-hist):has(> .fc-ebox-wrap:not([hidden])) > .fc-ebox-wrap,
  html body.tax-dealstore .fc-store-main:has(.fc-hist):has(> .fc-ebox-wrap:not([hidden])) .fc-store-extra > .fc-hist { margin-top: 24px !important; }
  /* chart title: fixed 24px line + 10px gap; the email card is pushed down the same 34px so both cards start level */
  html body.tax-dealstore .fc-store-main:has(.fc-hist):has(> .fc-ebox-wrap:not([hidden])) .fc-store-extra > .fc-hist .fc-section-title { line-height: 24px !important; margin: 0 2px 10px !important; }
  html body.tax-dealstore .fc-store-main:has(.fc-hist):has(> .fc-ebox-wrap:not([hidden])) > .fc-ebox-wrap { padding-top: 34px !important; }
  html body.tax-dealstore .fc-store-main:has(.fc-hist):has(> .fc-ebox-wrap:not([hidden])) .fc-hist__card { padding: 16px 18px 12px; }
  html body.tax-dealstore .fc-store-main:has(.fc-hist):has(> .fc-ebox-wrap:not([hidden])) .fc-hist__chart { height: 120px; }
  html body.tax-dealstore .fc-store-main:has(.fc-hist) > .fc-ebox-wrap:not([hidden]) .fc-ebox { justify-content: center; padding: 18px; }
  html body.tax-dealstore .fc-store-main > .fc-accuracy { margin-bottom: 0 !important; }
}

/* Email box + chart, v2 (Michael, Oct 30): the chart title sits INSIDE its box (the whole section becomes
   the card), the alerts title starts at the top of its box, same padding and same title style in both. */
@media (min-width: 1024px) {
  html body.tax-dealstore .fc-store-main:has(.fc-hist):has(> .fc-ebox-wrap:not([hidden])) > .fc-ebox-wrap { padding-top: 0 !important; }
  html body.tax-dealstore .fc-store-main:has(.fc-hist):has(> .fc-ebox-wrap:not([hidden])) .fc-store-extra > .fc-hist {
    background: var(--fc-surface); border: 1px solid var(--fc-line); border-radius: var(--fc-radius-card); box-shadow: var(--fc-shadow);
    padding: 18px 20px 14px;
  }
  html body.tax-dealstore .fc-store-main:has(.fc-hist):has(> .fc-ebox-wrap:not([hidden])) .fc-store-extra > .fc-hist .fc-hist__card {
    background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important;
  }
  html body.tax-dealstore .fc-store-main:has(.fc-hist):has(> .fc-ebox-wrap:not([hidden])) .fc-store-extra > .fc-hist .fc-section-title,
  html body.tax-dealstore .fc-store-main:has(.fc-hist) > .fc-ebox-wrap:not([hidden]) .fc-ebox__title {
    margin: 0 0 10px !important; font-family: var(--fc-display) !important; font-size: 18px !important; font-weight: 800 !important; line-height: 24px !important; letter-spacing: -.015em;
  }
  html body.tax-dealstore .fc-store-main:has(.fc-hist) > .fc-ebox-wrap:not([hidden]) .fc-ebox {
    justify-content: flex-start !important; padding: 18px 20px 14px !important;
  }
  html body.tax-dealstore .fc-store-main:has(.fc-hist) > .fc-ebox-wrap:not([hidden]) .fc-ebox__row { margin-top: 6px !important; }
  html body.tax-dealstore .fc-store-main:has(.fc-hist) > .fc-ebox-wrap:not([hidden]) .fc-ebox__fine { margin-top: 10px !important; }
  html body.tax-dealstore .fc-store-main:has(.fc-hist):has(> .fc-ebox-wrap:not([hidden])) .fc-hist__sum { margin: 0 0 8px; }
}