/* =========================
   Shop Page Styles (shop.css)
   Assumes :root variables exist in global CSS
   ========================= */

/* --- Hero --- */
.shop-hero {
  position: relative;
  width: 100%;
  min-height: 55vh;
  display: grid;
  place-items: center;
  text-align: center;
  color: #fff;
  background: url('https://images.unsplash.com/photo-1512621776951-a57141f2eefd?auto=format&fit=crop&w=1920&q=80')
              center center / cover no-repeat;
}
.shop-hero::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 60% at 50% 40%, rgba(0,0,0,.22), rgba(0,0,0,.55)),
    linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.55));
}
.shop-hero .container { position: relative; z-index: 1; }
.shop-hero h1 { margin: 0 0 .4rem; font-size: clamp(2rem, 1.4rem + 2vw, 3rem); }
.shop-hero p  { margin: 0; font-size: clamp(1rem, .9rem + .5vw, 1.2rem); opacity: .95; }

/* --- Toolbar (filters, search, sort) --- */
.shop-toolbar {
  padding: 1rem 0;
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: .75rem;
  align-items: center;
}
.shop-search {
  display: grid; grid-template-columns: 1fr auto; gap: .5rem;
}
.shop-search input[type="search"] {
  width: 100%;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 12px;
  padding: .85rem 1rem;
  outline: none;
  background: #fff;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.shop-search input[type="search"]:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(242,158,58,.18);
}
.shop-search .btn { border-radius: 12px; }

.shop-filters, .shop-sort {
  display: flex; gap: .5rem; align-items: center;
}
.shop-select {
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  padding: .75rem .9rem;
  border-radius: 12px;
  font: inherit;
}

/* --- Product Grid --- */
.shop-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin: 1rem 0 2rem;
}

/* --- Product Card --- */
.product-card {
  background: #fff;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr auto;
  transition: transform .15s ease, box-shadow .2s ease;
}
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 30px rgba(2,6,23,.12);
}
.product-media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: #fff;
}
.product-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.badge {
  position: absolute; left: 10px; top: 10px;
  background: var(--brand);
  color: #111827;
  font-weight: 800;
  border-radius: 999px;
  padding: .35rem .6rem;
  font-size: .78rem;
  box-shadow: var(--shadow);
}
.badge.alt { background: #10b981; color: #052e2b; }

.product-body {
  padding: 12px 14px 8px;
  display: grid; gap: .35rem;
}
.product-title {
  font-weight: 800; line-height: 1.25;
}
.product-desc {
  color: var(--muted); font-size: .95rem; line-height: 1.5;
}
.product-meta {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 14px 14px;
}
.price {
  font-weight: 800; font-size: 1.05rem;
}
.add-row {
  display: flex; gap: .5rem; align-items: center;
}
/* Mobile (stack products vertically) */
@media (max-width: 600px) {
  .grid,
  .shop-grid {
    grid-template-columns: 1fr !important; /* force single column */
  }
}

.product:nth-child(1) .thumb img { animation-delay: .1s; }
.product:nth-child(2) .thumb img { animation-delay: .3s; }
.product:nth-child(3) .thumb img { animation-delay: .5s; }
.product:nth-child(4) .thumb img { animation-delay: .7s; }
.qty {
  display: inline-flex; align-items: center; gap: .35rem;
  border: 1px solid rgba(0,0,0,.12); border-radius: 10px; padding: .3rem .5rem;
}

.qty button {
  background: transparent; border: none; cursor: pointer; font-size: 1rem; padding: .1rem .35rem;
}
.qty input {
  width: 2.5rem; text-align: center; border: none; outline: none; font: inherit; background: transparent;
}

/* --- Category Pills --- */
.category-row {
  display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .25rem;
}
.pill {
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 999px;
  padding: .25rem .6rem;
  font-size: .8rem;
  color: var(--muted);
}
.pill.active {
  background: var(--soft);
  border-color: color-mix(in oklab, var(--brand) 55%, transparent);
  color: var(--dark);
}

/* --- Pagination --- */
.pagination {
  display: flex; justify-content: center; align-items: center; gap: .5rem; margin: 1rem 0 2rem;
}
.page-btn {
  min-width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: 10px; border: 1px solid rgba(0,0,0,.12); background: #fff; cursor: pointer;
  transition: transform .1s ease, box-shadow .15s ease, background .15s ease;
}
.page-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,.12); }
.page-btn.is-active { background: var(--brand); color: #111827; font-weight: 800; border-color: transparent; }

/* --- Empty / Notice --- */
.shop-empty {
  padding: 3rem 1rem; text-align: center; color: var(--muted);
}
.shop-empty .btn { margin-top: .75rem; }

/* --- Utilities --- */
.hr-soft {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,.08), transparent);
  border: 0; margin: 1.25rem 0;
}

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width: 1200px) {
  .shop-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 900px) {
  .shop-toolbar { grid-template-columns: 1fr; }
  .shop-search { grid-template-columns: 1fr; }
  .shop-filters, .shop-sort { justify-content: space-between; }
}
@media (max-width: 760px) {
  .shop-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 520px) {
  .shop-grid { grid-template-columns: 1fr; }
  .shop-hero { min-height: 50svh; }
  .badge { font-size: .72rem; padding: .3rem .55rem; }
}

/* =========================
   STATE/INTERACTION
   ========================= */
.btn[disabled], .page-btn[disabled] { opacity: .55; cursor: not-allowed; }
.product-card:focus-within { outline: 2px solid color-mix(in oklab, var(--brand) 60%, transparent); outline-offset: 3px; }
.shop-select:focus { outline: none; box-shadow: 0 0 0 4px rgba(242,158,58,.18); border-color: var(--brand); }

/* Optional: dark mode support if you add a class to <body> */
body.dark .product-card { background: #0f172a; border-color: #1f2937; }
body.dark .product-desc, body.dark .pill { color: #cbd5e1; }
body.dark .pill.active { background: #0b3125; color: #eafff3; }
/* =========================
   Shop Filters (only)
   ========================= */

/* Panel */
.shop-filters{
  margin: 18px auto 8px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 12px;
  border: 1px solid #e6edf5;
  border-radius: 14px;
  background: color-mix(in oklab, white 86%, transparent);
  box-shadow: 0 10px 26px rgba(2,8,23,.06);
  backdrop-filter: blur(6px);
}
@media (max-width: 640px){
  .shop-filters{ grid-template-columns: 1fr; }
}

/* Group */
.shop-filters .filter-group{
  display: grid;
  gap: 6px;
  min-width: 0;
}
.shop-filters .filter-group label{
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--muted, #64748b);
}

/* Selects (custom arrow, pill, focus ring) */
.shop-filters .filter-group select{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  padding: .8rem 2.5rem .8rem .9rem;
  border-radius: 12px;
  border: 1px solid #dfe7f1;
  background:
    #fff
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 20 20' fill='%230f172a'><path d='M5.23 7.21a.75.75 0 0 1 1.06.02L10 10.94l3.71-3.71a.75.75 0 1 1 1.06 1.06l-4.24 4.24a.75.75 0 0 1-1.06 0L5.21 8.27a.75.75 0 0 1 .02-1.06z'/></svg>")
    no-repeat right 12px center / 14px 14px;
  font: inherit;
  color: var(--text, #0f172a);
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease, transform .06s ease;
}
.shop-filters .filter-group select:hover{
  border-color: #cfe0f6;
  background-color: #fbfdff;
}
.shop-filters .filter-group select:focus{
  outline: none;
  border-color: var(--brand, #0ea5e9);
  box-shadow: 0 0 0 .28rem rgba(14,165,233,.18);
}
.shop-filters .filter-group select:active{
  transform: scale(.995);
}

/* Compact layout tweak for very narrow phones */
@media (max-width: 380px){
  .shop-filters{ padding: 10px; gap: 10px; }
  .shop-filters .filter-group select{ padding: .75rem 2.25rem .75rem .8rem; }
}

/* Optional dark mode (if you toggle body.dark) */
body.dark .shop-filters{
  background: #0f172a;
  border-color: #1f2937;
}
body.dark .shop-filters .filter-group label{ color: #cbd5e1; }
body.dark .shop-filters .filter-group select{
  background-color: #111827;
  color: #e5e7eb;
  border-color: #243244;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 20 20' fill='%23e5e7eb'><path d='M5.23 7.21a.75.75 0 0 1 1.06.02L10 10.94l3.71-3.71a.75.75 0 1 1 1.06 1.06l-4.24 4.24a.75.75 0 0 1-1.06 0L5.21 8.27a.75.75 0 0 1 .02-1.06z'/></svg>");
}
body.dark .shop-filters .filter-group select:focus{
  box-shadow: 0 0 0 .28rem rgba(14,165,233,.28);
}
/* === Zoom-out animation for product images === */
.product .thumb img {
  transform: scale(1.15);   /* start zoomed-in */
  opacity: 0;               /* invisible initially */
  animation: shopZoomOut 1.2s ease forwards;
}

@keyframes shopZoomOut {
  0% {
    transform: scale(1.15);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.product .thumb img {
  transform: scale(1.1);
  transition: transform 0.6s ease;
}
.product:hover .thumb img {
  transform: scale(1);
}
/* Zoom-out animation for Shop Hero */
.shop-hero {
  animation: heroZoomOut 2s ease forwards;
  transform: scale(1.15);  /* start zoomed-in */
  opacity: 0;
}

@keyframes heroZoomOut {
  0% {
    transform: scale(1.15);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.shop-hero h1, 
.shop-hero p {
  opacity: 0;
  animation: fadeUp 1.2s ease forwards;
}

.shop-hero h1 { animation-delay: 1.2s; }
.shop-hero p  { animation-delay: 1.6s; }

@keyframes fadeUp {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}
.grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* 👈 now 5 per row */
  gap: 18px;
}
@media (max-width: 1200px) {
  .grid {
    grid-template-columns: repeat(4, 1fr); /* fallback to 4 on slightly smaller screens */
  }
}
@media (max-width: 992px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 768px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .grid {
    grid-template-columns: 1fr; /* mobile: single column */
  }
}