/* AFTERTOUGE — Shop mobile polish (≤480px only) */
@media (max-width: 480px){

  /* Overall spacing under fixed header + a bit more bottom room */
  .shop{
    padding-top: var(--chrome-h);
    padding-bottom: 64px;
  }

  /* ---------- Header row (title + controls) ---------- */
  .shop-head{
    margin: 8px 0 12px;
    margin-left: 0;                 /* undo desktop offset */
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .shop-title{
    font-size: 22px;
    line-height: 1.1;
    margin: 0;
  }

  /* Controls become a tidy two-column grid */
  .shop-controls{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
  }

  /* Search full-width on its own row */
  .shop-search{ grid-column: 1 / -1; }
  .shop-search input{
    width: 100%;
    height: 44px;
    border-radius: 12px;
    padding: 0 12px;
    font-size: 14px;
  }

  /* Sort on left column */
  .sort-wrap{
    grid-column: 1 / 2;
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .sort-wrap span{ font-size: 12px; color: var(--muted); }
  .sort-wrap select{
    width: 100%;
    height: 44px;
    border-radius: 12px;
    padding: 0 10px;
    font-size: 14px;
  }

  /* Currency toggle on right column */
  .currency-toggle{
    grid-column: 2 / 3;
    display: flex;
    gap: 6px;
    padding: 4px;
    border-radius: 999px;
    background: #fff;
  }
  .cur-btn{
    flex: 1;
    padding: 10px 0;
    font-size: 13px;
    border-radius: 999px;
  }

  /* ---------- Filters (sidebar becomes a card above grid) ---------- */
  .shop-aside{
    position: static;               /* stack normally */
    width: auto;
    height: auto;
    margin: 4px 0 8px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    box-shadow: var(--shadow, 0 2px 10px rgba(0,0,0,.04));
  }

  .aside-row{
    margin-bottom: 10px;
  }
  .aside-row h3{
    font-size: 16px;
    margin: 0;
  }

  /* Two-column, tap-friendly category pills */
  .checklist{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 12px;
    margin-bottom: 12px;
  }
  .checklist label{
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 8px 10px;
    background: #fff;
    line-height: 1.2;
  }
  .checklist input{ accent-color: #111827; }

  .branches{ margin-top: 8px; }
  .branches__title{
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted);
    margin-bottom: 6px;
  }

  /* Price block spacing + larger inputs */
  .price-wrap{
    border-top: 1px solid var(--line);
    padding-top: 12px;
    margin-top: 8px;
  }
  .price-head h3{ font-size: 16px; margin: 0; }
  .price-head .muted{ font-size: 12px; }

  .price-inputs{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 10px 0;
  }
  .price-inputs input{
    height: 42px;
    border-radius: 12px;
    font-size: 14px;
  }
  #priceRange{
    width: 100%;
    height: 32px;
  }

  /* ---------- Results grid (2 per row) ---------- */
  .shop-main{
    margin-left: 0;                 /* ensure no desktop offset */
    padding-top: 6px;
  }

  .result-meta{
    font-size: 12px;
    margin: 4px 0 8px;
  }

  /* Force 2 columns on phones (overrides your 560px rule that sets 1) */
  .shop-main .grid{
    --cols: 2 !important;
    gap: 14px;
  }

  .product__image{
    border-radius: 14px;
  }
  .product__title{
    font-size: 14px;
    margin: 8px 0 2px;
  }
  .product__price{
    font-size: 15px;
  }

  /* Make ATC always visible & thumb-friendly on mobile */
  .add-to-cart{
    right: 8px;
    bottom: 8px;
    padding: 8px 10px;
    font-size: 12px;
    transform: none;
    opacity: 1;
  }

  /* Show more button: full width */
  .section__footer{ margin-top: 12px; }
  .btn-showmore{
    width: 100%;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 14px;
  }
}




/* Ensure the + is always visible inside the overlay button */
.add-to-cart{
  /* guard against any inherited font-size:0 or color clashes */
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  display: grid;
  place-items: center;
  min-width: 36px;    /* keeps it tappable even if empty text */
  min-height: 36px;
  padding: 0;         /* icon-y feel; remove if you prefer the pill */
}

.add-to-cart::before{
  content: "+";
  line-height: 1;
  display: block;
}