/* ==========================================================================
   UPTOWNPK  —  Storefront additions for the PHP shop
   (category tiles, shop sidebar, stock pills, checkout, pagination)
   Loaded after style.css and pages.css.
   ========================================================================== */

/* ------------------------------------------------------- category tiles --- */
.category-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  background: #fff;
  border-radius: 22px;
  padding: 1.5rem .9rem;
  height: 100%;
  text-align: center;
  text-decoration: none;
  color: var(--brand-brown);
  box-shadow: var(--shadow-card);
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), box-shadow .35s ease;
}
.category-tile:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-product);
  color: var(--brand-brown);
}
.category-tile__icon {
  width: 52px; height: 52px;
  border-radius: 16px;
  background: rgba(226, 140, 40, .14);
  color: var(--brand-orange);
  display: grid;
  place-items: center;
  font-size: 1.4rem;
  margin-bottom: .3rem;
}
.category-tile__name { font-weight: 700; font-size: .88rem; line-height: 1.3; }
.category-tile__count { font-size: .7rem; color: rgba(66, 43, 28, .5); }

/* --------------------------------------------------------- shop sidebar --- */
.shop-sidebar {
  background: #fff;
  border-radius: 24px;
  padding: 1.5rem 1.25rem;
  box-shadow: var(--shadow-card);
  position: sticky;
  top: 6rem;
}
.shop-sidebar__title {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 1.2rem;
  color: var(--brand-brown);
  margin-bottom: 1rem;
}
.cat-list, .cat-sublist { list-style: none; padding: 0; margin: 0; }
.cat-list > li { margin-bottom: .2rem; }

.cat-list a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  padding: .5rem .7rem;
  border-radius: 12px;
  font-size: .88rem;
  font-weight: 600;
  color: var(--brand-brown);
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}
.cat-list a span {
  font-size: .7rem;
  font-weight: 700;
  color: rgba(66, 43, 28, .4);
  background: rgba(66, 43, 28, .06);
  border-radius: 999px;
  padding: .1rem .5rem;
}
.cat-list a:hover { background: rgba(226, 140, 40, .1); color: var(--brand-orange); }
.cat-list a.active { background: var(--brand-brown); color: var(--brand-cream); }
.cat-list a.active span { background: rgba(249, 241, 232, .18); color: var(--brand-cream); }

.cat-sublist {
  margin: .15rem 0 .5rem .8rem;
  padding-left: .6rem;
  border-left: 2px solid rgba(66, 43, 28, .08);
  display: none;
}
.cat-sublist.is-open { display: block; }
.cat-list li:hover > .cat-sublist { display: block; }
.cat-sublist a { font-size: .82rem; font-weight: 500; padding: .35rem .6rem; }

@media (max-width: 991.98px) {
  .shop-sidebar { position: static; }
  .cat-sublist { display: block; }
}

/* ------------------------------------------------------------ pagination --- */
.pagination-brand .page-link {
  border: none;
  color: var(--brand-brown);
  font-weight: 700;
  font-size: .85rem;
  margin: 0 .15rem;
  border-radius: 999px;
  min-width: 40px;
  text-align: center;
  background: #fff;
  box-shadow: 0 4px 12px rgba(66, 43, 28, .08);
}
.pagination-brand .page-link:hover { background: rgba(226, 140, 40, .15); color: var(--brand-orange); }
.pagination-brand .page-item.active .page-link { background: var(--brand-brown); color: var(--brand-cream); }
.pagination-brand .page-item.disabled .page-link { opacity: .45; }

/* ----------------------------------------------------------- stock pills --- */
.stock-pill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  border-radius: 999px;
  padding: .3rem .8rem;
  font-size: .74rem;
  font-weight: 700;
}
.stock-pill--in  { background: rgba(25, 135, 84, .12);  color: #198754; }
.stock-pill--low { background: rgba(226, 140, 40, .16); color: #b56a12; }
.stock-pill--out { background: rgba(179, 38, 30, .12);  color: #b3261e; }

.product-stockout {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: rgba(66, 43, 28, .82);
  color: var(--brand-cream);
  text-align: center;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .35rem 0;
}

/* --------------------------------------------------------------- voucher --- */
.voucher-box {
  border-top: 1px solid rgba(249, 241, 232, .18);
  padding-top: 1.1rem;
}
.voucher-box .form-control {
  border-radius: 999px;
  border: 1px solid rgba(249, 241, 232, .25);
  background: rgba(249, 241, 232, .08);
  color: var(--brand-cream);
  font-size: .85rem;
  padding: .55rem 1rem;
}
.voucher-box .form-control::placeholder { color: rgba(249, 241, 232, .45); }
.voucher-box .form-control:focus {
  background: rgba(249, 241, 232, .12);
  border-color: var(--brand-orange);
  color: var(--brand-cream);
  box-shadow: none;
}
.voucher-applied {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: rgba(226, 140, 40, .2);
  color: var(--brand-orange);
  border-radius: 999px;
  padding: .35rem .9rem;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .04em;
}

/* -------------------------------------------------------------- checkout --- */
.checkout-lines .line { font-size: .84rem; }

.pay-options { display: flex; flex-direction: column; gap: .75rem; }
.pay-option {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  border: 1.5px solid rgba(66, 43, 28, .14);
  border-radius: 18px;
  padding: 1rem 1.1rem;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}
.pay-option:hover { border-color: rgba(226, 140, 40, .5); }
.pay-option input { margin-top: .25rem; accent-color: var(--brand-orange); }
.pay-option:has(input:checked) { border-color: var(--brand-orange); background: rgba(226, 140, 40, .06); }
.pay-option strong { display: block; font-size: .92rem; }
.pay-option small { color: rgba(66, 43, 28, .6); font-size: .8rem; }

.confirm-badge {
  width: 84px; height: 84px;
  margin: 0 auto;
  border-radius: 50%;
  background: #198754;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 2.6rem;
  box-shadow: 0 12px 30px rgba(25, 135, 84, .35);
}

/* Tables inside the cream "legal" panel (order confirmation) */
.legal .table { --bs-table-color: var(--brand-brown); font-size: .9rem; }
.legal .table thead th {
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(66, 43, 28, .5);
  border-bottom: 2px solid rgba(66, 43, 28, .1);
}
.legal .table tfoot td { border-top: 1px solid rgba(66, 43, 28, .08); }

/* ---------------------------------------------------------- built-by --- */
.powered-by {
  margin: 1.1rem 0 0;
  padding-top: .9rem;
  border-top: 1px solid rgba(249, 241, 232, .1);
  text-align: center;
  font-size: .76rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(249, 241, 232, .38);
}
.powered-by a,
.powered-by span {
  color: rgba(249, 241, 232, .72);
  font-weight: 600;
  letter-spacing: .06em;
  text-decoration: none;
}
.powered-by a:hover { color: var(--brand-orange); }