/* AZAPP_Shop v0.5.0 — halaman Shop bertab (app-shell sendiri). Kad produk/kursus/komuniti = CSS AVH sedia ada. */
html.azshop-html { min-width: 0; }
body.azshop-body { margin: 0; background: #f6f8fb; color: #0f172a; font-family: "DM Sans", system-ui, sans-serif;
	padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
.azshop { max-width: 1080px; margin: 0 auto; }
.azshop-top { position: sticky; top: 0; z-index: 30; background: #fff; border-bottom: 1px solid #e5e9f0; padding-top: env(safe-area-inset-top); }
.azshop-search { position: relative; margin: 0; padding: 10px 12px 6px; }
.azshop-search input[type=search] { width: 100%; box-sizing: border-box; height: 44px; border-radius: 99px; border: 1px solid #e5e9f0; background: #f1f4f8;
	padding: 0 16px 0 42px; font: inherit; font-size: 15px; color: inherit; -webkit-appearance: none; appearance: none; }
.azshop-search input[type=search]:focus { outline: none; border-color: #0095d3; background: #fff; }
.azshop-search__ic { position: absolute; left: 25px; top: 50%; margin-top: -8px; color: #64748b; display: flex; pointer-events: none; }
.azshop-search__ic svg { width: 18px; height: 18px; }

/* Tab — semua kelihatan sekali gus (tanpa seret): bahagi sama rata */
.azshop-tabs { display: flex; padding: 0 4px; }
.azshop-tab { flex: 1 1 0; min-width: 0; min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
	color: #64748b; text-decoration: none; font-size: 11px; font-weight: 600; border-bottom: 2px solid transparent; }
.azshop-tab span { overflow: hidden; text-overflow: ellipsis; max-width: 100%; white-space: nowrap; }
.azshop-tab.is-active { color: #0095d3; border-bottom-color: #0095d3; }
.azshop-tab svg { width: 20px; height: 20px; flex-shrink: 0; }

.azshop-main { padding: 12px 12px 0; }
.azshop-sec { margin: 0 0 22px; }
.azshop-sec__hd { display: flex; justify-content: space-between; align-items: center; margin: 0 0 8px; }
.azshop-sec__hd h2 { margin: 0; font-family: "Plus Jakarta Sans", sans-serif; font-size: 17px; font-weight: 800; }
.azshop-sec__hd a { font-size: 13px; font-weight: 700; color: #0077a8; min-height: 44px; display: inline-flex; align-items: center; text-decoration: none; }

/* Rel leret sisi (tab All) — diri sendiri, tak bergantung pada bungkus seksyen homepage */
.azshop .azhp-rail { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity; padding: 2px 2px 8px; margin: 0 -12px; padding-left: 12px; padding-right: 12px; -webkit-overflow-scrolling: touch; }
.azshop .azhp-rail > * { flex: 0 0 72%; max-width: 300px; scroll-snap-align: start; }

/* Chip kategori */
.azshop-chips { display: flex; gap: 8px; overflow-x: auto; padding: 0 0 10px; margin: 0 -12px; padding-left: 12px; padding-right: 12px; }
.azshop-chip { flex: 0 0 auto; min-height: 36px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 99px; border: 1px solid #e5e9f0;
	background: #fff; color: #334155; font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.azshop-chip.is-active { background: #0095d3; border-color: #0095d3; color: #fff; }

/* Kad kedai & webinar (kad produk/kursus/komuniti guna CSS AVH) */
.azshop-list { display: grid; gap: 10px; }
.azshop-store, .azshop-web { display: flex; gap: 12px; padding: 12px; background: #fff; border: 1px solid #e5e9f0; border-radius: 16px; color: inherit; text-decoration: none; }
.azshop-store__av { width: 52px; height: 52px; border-radius: 50%; background: #e6f4fb; color: #0077a8; font-weight: 800; font-size: 20px; display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; }
.azshop-store__av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.azshop-store__tx { display: flex; flex-direction: column; gap: 3px; min-width: 0; justify-content: center; }
.azshop-store__tx b { font-size: 15px; }
.azshop-store__bio { font-size: 12.5px; color: #64748b; line-height: 1.4; }
.azshop-store__tx small { font-size: 12px; color: #64748b; }
.azshop-web__img { width: 96px; min-height: 72px; border-radius: 12px; background: #e6f4fb; overflow: hidden; flex-shrink: 0; align-self: stretch; }
.azshop-web__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.azshop-web__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.azshop-web__h { font-size: 15px; line-height: 1.3; }
.azshop-web__host, .azshop-web__slot { font-size: 12.5px; color: #64748b; }
.azshop-web__slot { color: #0077a8; font-weight: 600; }
.azshop-web__cta { align-self: flex-start; margin-top: 4px; padding: 6px 14px; border-radius: 99px; background: #FFB800; color: #1f1500; font-size: 13px; font-weight: 800; }

.azshop-more { display: block; width: 100%; max-width: 320px; margin: 16px auto 0; min-height: 48px; border-radius: 99px; border: 1px solid #0095d3; background: #fff; color: #0077a8; font: inherit; font-weight: 700; cursor: pointer; }
.azshop-more:disabled { opacity: .6; cursor: default; }
.azshop-kosong { text-align: center; padding: 56px 20px; color: #64748b; display: flex; flex-direction: column; gap: 6px; }
.azshop-kosong strong { color: #0f172a; font-size: 16px; }

@media (min-width: 960px) {
	.azshop-tab { flex-direction: row; gap: 8px; font-size: 13px; }
	.azshop .azhp-rail > * { flex-basis: 260px; }
	.azshop-list { grid-template-columns: repeat(2, 1fr); }
}

/* ══════════════════════════════════════════════════════════════════════════════
   v0.5.1 — KAD RINGKAS 2 LAJUR (mockup Shop: ShopProducts / ShopCourses / ShopAll)
   Halaman ini shell sendiri — TIADA #top, jadi peraturan AVH '#top .azhp …' (tajuk, butang) tak terpakai;
   semua yang diperlukan ditakrif semula di sini, dikurung .azshop. Markup kad AVH tak diubah.
   ══════════════════════════════════════════════════════════════════════════════ */
.azshop .azhp-grid--prod, .azshop .azhp-grid--course { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-items: start; }
/* Homepage AVH menyembunyikan kad ke-5+ di ≤959px ('.azhp-grid > *:nth-child(n+5){display:none}') — dalam Shop
   ia menyorok produk (dan semua kad "Load more"). Batalkan; kad ialah flex lajur. */
.azshop .azhp-grid > *:nth-child(n+5) { display: flex; }

.azshop .azhp-prod, .azshop .azhp-course { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden;
	background: #fff; border: 0; border-radius: 16px; box-shadow: 0 1px 3px rgba(26, 26, 46, .08); transition: none; }
.azshop .azhp-prod:hover, .azshop .azhp-course:hover { transform: none; box-shadow: 0 1px 3px rgba(26, 26, 46, .08); }

/* Imej segi empat sama (kursus juga — ikut mockup) */
.azshop .azhp-prod__thumb, .azshop .azhp-course__thumb { position: relative; aspect-ratio: 1 / 1; background: #f1f3f6; display: block; }
.azshop .azhp-prod__imglink, .azshop .azhp-course__thumb > a { display: block; width: 100%; height: 100%; }
.azshop .azhp-prod__thumb img, .azshop .azhp-course__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.azshop .azhp-prod__badges { top: 6px; left: 6px; }
.azshop .azhp-course__cat { top: 6px; left: 6px; }
.azshop .azhp-share { top: 6px; right: 6px; width: 28px; height: 28px; }
.azshop .azhp-share svg { width: 13px; height: 13px; }

.azshop .azhp-prod__body, .azshop .azhp-course__body { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px 12px; flex: 1; }

/* Dibuang pada kad Shop: label jenis, penerangan, baris seller, butang Lihat/Beli (keputusan Wan 30 Sept 2026:
   ketuk kad → halaman produk), hos & butang kursus, pengisi. */
.azshop .azhp-prod__type, .azshop .azhp-prod__desc, .azshop .azhp-prod__seller, .azshop .azhp-prod__actions,
.azshop .azhp-course__host, .azshop .azhp-course__body .az-btn, .azshop .azhp-prod .azhp-spacer, .azshop .azhp-course .azhp-spacer { display: none !important; }

.azshop .azhp-prod__title, .azshop .azhp-course__title { margin: 0; min-height: 0; font: 600 14px/1.3 "DM Sans", system-ui, sans-serif;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.azshop .azhp-prod__title a, .azshop .azhp-course__title a { color: #1a1a2e; text-decoration: none; }
/* Seluruh kad boleh diketuk: pautan tajuk diregangkan ke kad (butang kongsi z-index 30 kekal di atas).
   Containing block = kad (position:relative), jadi tak terpotong overflow tajuk. */
.azshop .azhp-prod__title a::after, .azshop .azhp-course__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }

.azshop .azhp-prod__price, .azshop .azhp-course__price { margin: 0; font: 800 18px/1.1 "Plus Jakarta Sans", system-ui, sans-serif; color: #1a1a2e; }
.azshop .azhp-cur { font-size: 12px; font-weight: 700; color: inherit; margin-right: 1px; }
.azshop .azhp-prod__price small { font: 500 12px "DM Sans", sans-serif; color: #9aa3af; text-decoration: line-through; margin-left: 6px; }
.azshop .azhp-prod__free { color: #15803d; }
/* Lencana komisen (hanya affiliate — JS AVH mendedahkannya): kekal, dikecilkan */
.azshop .azhp-comm { margin-top: 2px; padding: 3px 8px; font-size: 11px; }

@media (min-width: 960px) {
	.azshop .azhp-grid--prod, .azshop .azhp-grid--course { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
}