/* Kitchen Time: product cards, grids and empty states (home, catalogue, related). */
.kt-pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 24px; }
.kt-pgrid--feat { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.kt-pcard { --accent: var(--red); position: relative; background: var(--white); border-radius: var(--r-md); transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .4s var(--ease), box-shadow .4s, opacity .4s, filter .4s; box-shadow: 0 22px 40px -28px rgba(60, 20, 10, .55); }
.kt-pcard:hover { box-shadow: 0 34px 56px -26px rgba(60, 20, 10, .6); }
.kt-pcard.is-out { opacity: 0; transform: scale(.9); filter: blur(4px); pointer-events: none; }
.kt-pcard__link { display: grid; height: 100%; border-radius: inherit; padding: 14px 14px 22px; gap: 14px; }
.kt-pcard__stage { position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: 18px; background: color-mix(in srgb, var(--accent) 12%, #fff); overflow: hidden; }
.kt-pcard__disc { position: absolute; width: 74%; aspect-ratio: 1; border-radius: 50%; background: var(--accent); transform: scale(.82); transition: transform .8s var(--ease); }
.kt-pcard:hover .kt-pcard__disc { transform: scale(1.12); }
.kt-pcard__img { position: relative; width: 82%; height: 82%; object-fit: contain; filter: drop-shadow(0 18px 14px rgba(40, 10, 5, .35)); transition: transform .8s var(--ease); }
.kt-pcard:hover .kt-pcard__img { transform: translateY(-8px) rotate(-3deg) scale(1.06); }
.kt-pcard__ph { position: relative; display: grid; justify-items: center; gap: 6px; text-align: center; }
.kt-pcard__ph img { width: 64%; height: auto; border-radius: 14px; background: #fff; padding: 6px 10px; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .5); }
.kt-pcard__ph small { color: #fff; font-weight: 700; font-size: .78rem; }
.kt-pcard__body { display: grid; gap: 4px; padding-inline: 8px; }
.kt-pcard__cat { font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.kt-pcard__title { font-family: var(--serif); font-weight: 800; font-size: 1.35rem; line-height: 1.15; }
.kt-pcard__urdu { font-family: var(--urdu); font-size: 1.1rem; color: #6b564d; }
.kt-pcard__sizes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.kt-pcard__sizes i { font-style: normal; font-size: .78rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--cream); }
.kt-pcard__go { position: absolute; right: 22px; bottom: 22px; width: 42px; height: 42px; border-radius: 50%; background: var(--ink); color: var(--cream); display: grid; place-items: center; transform: scale(.7) rotate(-45deg); opacity: 0; transition: transform .5s var(--ease), opacity .3s; }
.kt-pcard__go svg { width: 18px; height: 18px; }
.kt-pcard:hover .kt-pcard__go, .kt-pcard__link:focus-visible .kt-pcard__go { transform: none; opacity: 1; }
.kt-empty { display: grid; justify-items: center; gap: 14px; text-align: center; padding: clamp(40px, 7vw, 90px) 24px; border-radius: var(--r-lg); background: var(--cream-2); }
.kt-empty h3 { font-family: var(--serif); font-weight: 900; font-size: clamp(1.6rem, 3vw, 2.4rem); }
.kt-empty p { max-width: 34rem; }
.kt-empty__art { width: 120px; height: auto; }
.kt-empty__admin { font-size: .9rem; opacity: .75; }
.kt-empty__admin a { text-decoration: underline; }
.kt-empty[hidden] { display: none; }
.kt-js .kt-pcard[data-reveal].is-in { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .4s var(--ease), box-shadow .4s, opacity .4s, filter .4s; }
@media (max-width: 640px) {
.kt-pgrid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
.kt-pgrid--feat { grid-template-columns: 1fr; }
.kt-pcard__title { font-size: 1.1rem; }
.kt-pcard__link { padding: 10px 10px 18px; }
}
@media (hover: none) {
.kt-pcard__go { opacity: 1; transform: none; }
}

/* Real pack pictures sit on white; the coloured disc is only for the placeholder. */
.kt-pcard.has-img .kt-pcard__disc { display: none; }
.kt-pcard.has-img .kt-pcard__stage { background: #fff; box-shadow: inset 0 0 0 1px rgba(29, 15, 10, .07); }
.kt-pcard.has-img .kt-pcard__img { width: 100%; height: 100%; object-fit: contain; filter: none; }
.kt-pcard.has-img:hover .kt-pcard__img { transform: scale(1.05); }

/* Phones and touch screens: no arrow button at all (the whole card is the link). It only shows on desktop, on hover. */
@media (hover: none), (max-width: 640px) {
.kt-pcard__go { display: none; }
}