/* polish.css — desktop UI polish layer for gifts.wtf.
 *
 * PURELY ADDITIVE. Every rule in this file lives inside @media (min-width:1100px)
 * and every rule is an override of an existing declaration. Nothing here is
 * rewritten in place, and below 1100px this file contributes zero declarations,
 * so phone and tablet rendering is byte-for-byte what it was before.
 *
 * LOAD ORDER (corrected 2026-08-26): this sheet no longer loads last. The order
 * in index.html is header.css -> glass.css -> intro.css -> polish.css ->
 * glass-tabs.css, because several per-tab glass rules sit at equal specificity
 * to the originals and only win by coming after. The two sheets currently
 * overlap on nothing (glass-tabs.css sets only background/border-color on
 * #gwFeatureBar .fb-tile/.fb-label; this file sets flex/padding/font-size), but
 * an edit to either can now be silently swallowed by the other, so check both
 * before adding a rule to a selector they share.
 *
 * Why buttons are only shrunk on desktop: a touch target wants to stay at or
 * above ~44px, so shrinking the mobile controls would trade a real usability
 * property for a cosmetic one. The oversized controls are a desktop problem,
 * where a 49px pill and a 216px tile are simply out of scale with the content.
 */

@media (min-width: 1100px) {

  /* ---- 1. THE HERO CTA -------------------------------------------------
     Was 210x49 at 15px. That is a landing-page-sized button on a page whose
     job is to get out of the way. */
  .gw-cta {
    padding: 10px 22px;
    font-size: 13.5px;
    gap: 7px;
  }

  /* ---- 2. THE AGGREGATOR BUY SHEET ------------------------------------
     Just the sizing now. The sibling rule that used to live here demoted a
     second .agg-btn.primary to a ghost, written when the sheet shipped two
     competing primaries. agg.js has since made the escrow button an explicit
     ghost, so exactly one .primary exists and that combinator could never
     match again; it was removed rather than left as a rule with a comment
     describing markup that no longer exists. */
  .agg-btn {
    padding: 9px 12px;
    font-size: 13px;
    border-radius: 9px;
  }

  /* ---- 3. THE GRID BUY BUTTON -----------------------------------------
     Repeated once per card across a 13-column grid, so a couple of pixels
     here is the difference between a wall of buttons and a wall of gifts. */
  .agg-buy {
    padding: 7px 9px;
    font-size: 12.5px;
    border-radius: 8px;
  }

  /* ---- 4. THE ITEM VIEW ------------------------------------------------
     Four offer/buy CTAs can appear in one column. Colour is left alone,
     because green reads as buy and pink reads as offer and that distinction
     is load-bearing. Only the scale comes down. */
  .iv2-cta {
    padding: 9px 16px;
    font-size: 13px;
  }
  .iv-buynow {
    padding: 10px 14px;
    font-size: 13.5px;
    border-radius: 10px;
  }
  .iv-offer-send,
  .iv-holder-offer {
    padding: 9px 14px;
    font-size: 13px;
  }

  /* ---- 5. THE NAV HUB OVERLAY -----------------------------------------
     19 tiles at 216px each stacked to roughly 4,100px of dialog. With the
     left rail carrying navigation on desktop, the hub is a secondary
     surface and can be a directory instead of a wall. */
  .gwh-grid {
    grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
    gap: 14px;
  }
  .gwh-tile {
    min-height: 148px;
    padding: 13px;
    border-radius: 16px;
  }

  /* ---- 6. THE LANDING FEATURE BAR -------------------------------------
     Every tile here duplicates a hub tile. Shrinking it lets more of the
     actual product show above the fold. */
  #gwFeatureBar .fb-tile {
    flex: 0 0 150px;
  }
  #gwFeatureBar .fb-label {
    padding: 8px 11px 9px;
    font-size: 12.5px;
  }
}