/* 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 it LAST, after every other stylesheet, so these overrides win without
 * needing !important (the two exceptions are noted where they appear).
 *
 * 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 ------------------------------------
     Two buttons both carried .primary and equal flex weight, so neither read
     as the intended path. The first stays primary; any later primary in the
     same row demotes to a ghost. */
  .agg-btn {
    padding: 9px 12px;
    font-size: 13px;
    border-radius: 9px;
  }
  .agg-btn.primary ~ .agg-btn.primary {
    background: var(--hover);
    color: var(--ink-mid);
  }
  .agg-btn.primary ~ .agg-btn.primary:hover {
    background: var(--well);
    color: var(--ink-hi);
  }

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