/* ok-catalog.css - sirf public catalog pages. Tokens ok-kit.css se aate hain. */

.ok-cat { min-height: 50vh; }

/* ---- category cards ---- */
.ok-catgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; }
.ok-catcard { display:flex; flex-direction:column; gap:4px; padding:18px; border:1px solid var(--ok-border);
  border-radius:12px; background:#fff; text-decoration:none; color:inherit; transition:border-color .15s, transform .15s; }
.ok-catcard:hover { border-color:var(--ok-cta); transform:translateY(-2px); }
.ok-catcard__n { color:var(--ok-grey); margin-top:6px; }

/* ---- product grid ---- */
.ok-pgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:16px; }
.ok-pcard { display:block; text-decoration:none; color:inherit; }
.ok-pcard__img { position:relative; aspect-ratio:2/3; border-radius:12px; overflow:hidden;
  background:var(--ok-bg-soft); border:1px solid var(--ok-border); display:flex; align-items:center; justify-content:center; }
.ok-pcard__img img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .25s; }
.ok-pcard:hover .ok-pcard__img img { transform:scale(1.03); }
.ok-pcard__noimg { color:var(--ok-grey); font-size:13px; }
.ok-pcard__flag { position:absolute; left:8px; top:8px; background:rgba(38,38,38,.86); color:#fff;
  font-size:11px; padding:3px 8px; border-radius:999px; }
.ok-pcard__body { padding:8px 2px 0; display:flex; flex-direction:column; gap:3px; }
.ok-pcard__title { font-size:14px; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ok-pcard__price { font-size:14px; display:flex; gap:8px; align-items:baseline; flex-wrap:wrap; }
.ok-pcard__price s { font-size:12px; }
.ok-locked { color:var(--ok-grey); font-size:12px; }

/* ---- product page ---- */
.ok-pdp { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:28px; align-items:start; }
.ok-pdp__main { aspect-ratio:2/3; border-radius:14px; overflow:hidden; border:1px solid var(--ok-border); background:var(--ok-bg-soft); }
.ok-pdp__main img { width:100%; height:100%; object-fit:cover; display:block; }
.ok-pdp__thumbs { display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.ok-pdp__thumb { padding:0; border:1px solid var(--ok-border); border-radius:8px; overflow:hidden; background:none; cursor:pointer; width:62px; height:84px; }
.ok-pdp__thumb.is-on { border-color:var(--ok-cta); box-shadow:0 0 0 1px var(--ok-cta); }
.ok-pdp__thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.ok-dl { margin-top:16px; padding:14px 16px; border:1px dashed var(--ok-border); border-radius:12px; background:var(--ok-bg-soft); }
.ok-dl small { display:block; margin-top:8px; }

.ok-pdp__price { margin-bottom:18px; }
.ok-pdp__now { font-family:var(--ok-font-head,inherit); font-size:30px; font-weight:600; margin-right:10px; }
.ok-pdp__stock { padding:14px 0 4px; border-top:1px solid var(--ok-border); border-bottom:1px solid var(--ok-border); margin-bottom:16px; }
.ok-sizes { display:flex; gap:8px; flex-wrap:wrap; margin:6px 0 8px; }
.ok-size { display:flex; flex-direction:column; align-items:center; min-width:62px; padding:7px 10px;
  border:1px solid var(--ok-border); border-radius:10px; background:#fff; line-height:1.25; }
.ok-size small { color:var(--ok-grey); font-size:11px; }
.ok-size.is-out { opacity:.45; }
.ok-size__x { color:var(--ok-amber,#B45309) !important; }
.ok-pdp__feat { margin:0 0 16px; padding-left:18px; }
.ok-pdp__feat li { margin-bottom:4px; }
.ok-pdp__desc { margin-bottom:16px; line-height:1.6; }
.ok-pdp__meta { padding-top:10px; border-top:1px solid var(--ok-border); }
.ok-unlock { border-color:var(--ok-cta) !important; }

@media (max-width:820px) {
  .ok-pdp { grid-template-columns:1fr; gap:20px; }
  .ok-pdp__now { font-size:26px; }
}
@media (max-width:560px) {
  .ok-pgrid { grid-template-columns:repeat(2,1fr); gap:12px; }
  .ok-catgrid { grid-template-columns:repeat(2,1fr); gap:10px; }
  .ok-catcard { padding:14px; }
}