/* Antoni 3.0 - shop.css: katalog, kartu produk, halaman produk afiliasi, baris rekomendasi. */

.shop-toolbar { display: grid; gap: .75rem; margin-bottom: 1.5rem; padding: 1rem 1.25rem; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); }
.filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.filter-row__label { display: inline-flex; align-items: center; gap: .35rem; flex: 0 0 7.5rem; color: var(--c-muted); font-size: var(--fs-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.filter-row .chip-row { flex: 1; min-width: 0; }
.price-filter__input { width: 8.5rem; min-height: 40px; padding: .4rem .75rem; }
.price-filter__sep { color: var(--c-muted); }
@media (max-width: 639px) { .filter-row__label { flex-basis: 100%; } .price-filter__input { flex: 1; width: auto; min-width: 0; } }

.product-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 1.5rem; }

.product-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (min-width: 640px) { .shop-strip--inline .product-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .shop-strip--home .product-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; } }

.shop-strip { margin-block: 2.5rem; }

/* Beranda: pita produk berwarna penuh lebar */
.shop-strip--home { margin: 2rem 0 0; padding-block: 0 .5rem; }

.product-card {
	min-width: 0; display: flex; flex-direction: column;
	background: var(--c-surface); color: var(--c-text);
	border: 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
	transition: transform .2s;
}
.product-card:hover { transform: translateY(-3px); }
.product-card__link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.product-card__media { position: relative; aspect-ratio: 1; background: var(--c-surface-2); overflow: hidden; border-radius: 0; }
.product-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.product-card:hover .product-card__media img { transform: scale(1.05); }
.product-card__badge {
	position: absolute; top: .5rem; left: .5rem; padding: .15rem .55rem; border-radius: 6px;
	background: var(--c-af-bg); color: var(--c-af); font-size: .75rem; font-weight: 800; letter-spacing: .04em;
}
.product-card__body { display: flex; flex-direction: column; gap: .4rem; padding: .85rem; flex: 1; }
.product-card__cta { display: flex; align-items: center; justify-content: center; min-height: 44px; margin-top: auto; border-radius: var(--radius-sm); background: var(--c-cta); color: var(--c-cta-text); font-weight: 700; }
.product-card:hover .product-card__cta { filter: brightness(1.08); }
.product-card__title { min-height: 2.6em; margin: 0; font-family: var(--font-display); font-size: 1rem; font-weight: 700; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.product-card__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .5rem; margin: 0; font-weight: 800; font-size: 1.0625rem; color: var(--c-shop); }
.product-card__price s { color: var(--c-muted); font-size: .8125rem; font-weight: 400; }
.product-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .75rem; margin: .15rem 0 .5rem; padding-top: .55rem; border-top: 1px dashed var(--c-border); color: var(--c-muted); font-size: .75rem; }
.product-card__rating { display: inline-flex; align-items: center; gap: .2rem; color: var(--c-star); font-weight: 700; }
.product-card__rating .icon, .product-info__rating .icon { width: 1em; height: 1em; fill: currentColor; }

/* Halaman produk -------------------------------------------------------- */
.shop-single { padding-bottom: 1rem; }

.breadcrumb { margin-bottom: 1.25rem; font-size: .8125rem; color: var(--c-muted); }
.breadcrumb__list { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .1rem; margin: 0; padding: 0; list-style: none; }
.breadcrumb__list li { display: inline-flex; align-items: center; gap: .1rem; min-width: 0; }
.breadcrumb__list a { color: var(--c-muted); font-weight: 600; text-decoration: none; }
.breadcrumb__list a:hover { color: var(--c-primary); text-decoration: underline; }
.breadcrumb__list .icon { width: 1em; height: 1em; opacity: .6; }
.breadcrumb__list li[aria-current="page"] span { color: var(--c-text); font-weight: 700; max-width: 32ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.product-single { display: grid; gap: 1.75rem; grid-template-columns: minmax(0, 1fr); margin-bottom: 2.5rem; }
.product-gallery { min-width: 0; }
.product-gallery__main { aspect-ratio: 1; overflow: hidden; border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface); }
.product-gallery__main img { width: 100%; height: 100%; object-fit: contain; }
.product-gallery__thumbs { display: flex; gap: .6rem; margin: 1rem 0 0; padding: 0 0 .25rem; list-style: none; overflow-x: auto; }
.product-gallery__thumb { width: 68px; height: 68px; padding: 0; overflow: hidden; border: 2px solid var(--c-border); border-radius: var(--radius-sm); background: var(--c-surface); cursor: pointer; }
.product-gallery__thumb:hover { border-color: var(--c-primary); }
.product-gallery__thumb.is-active { border-color: var(--c-shop); outline: 2px solid var(--c-shop); outline-offset: 1px; }
.product-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }

.product-info { min-width: 0; display: flex; flex-direction: column; align-items: stretch; }
.product-info .badge { margin-bottom: .6rem; }
.product-info__title { font-size: clamp(1.625rem, 3.6vw, 2.5rem); line-height: 1.1; letter-spacing: -.03em; }
.product-info__stats { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1rem; margin: 0 0 .25rem; color: var(--c-muted); font-size: .9375rem; }
.product-info__rating { display: inline-flex; align-items: center; gap: .25rem; color: var(--c-star); }
.product-info__price {
	display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem 1rem; margin: 1rem 0 1.25rem; padding: 1.1rem 1.25rem;
	background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius);
}
.product-info__price-now { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 2.75rem); font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--c-shop); }
.product-info__price s { color: var(--c-muted); }
.product-info__facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0; margin: 0 0 1.5rem; border-top: 1px solid var(--c-border); }
.product-info__facts dt, .product-info__facts dd { margin: 0; padding: .65rem 0; border-bottom: 1px solid var(--c-border); }
.product-info__facts dt { padding-right: 1.5rem; color: var(--c-muted); font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; align-self: center; }
.product-info__facts dd { font-weight: 600; }
.product-info__soldout { display: flex; align-items: center; gap: .5rem; margin: 0; padding: .9rem 1rem; border: 1px solid var(--c-danger); border-radius: var(--radius-sm); color: var(--c-danger); font-weight: 800; }

.product-trust { display: grid; gap: .5rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
.product-trust li { display: flex; align-items: center; gap: .6rem; font-size: .9375rem; }
.product-trust .icon { color: var(--c-accent); }

.product-desc { margin-bottom: 2.5rem; max-width: var(--content); }

/* Bilah beli lengket (ponsel) */
.buybar { display: none; }

@media (min-width: 640px) {
	.product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.product-row { grid-auto-columns: calc((100% - 2.5rem) / 3); }
}
@media (min-width: 900px) {
	.product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.product-row { grid-auto-columns: calc((100% - 3.75rem) / 4); }
	.product-single { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 3rem; align-items: start; }
	.product-gallery { position: sticky; top: calc(var(--header-h) + 1.25rem); }
}
@media (min-width: 1200px) {
	.product-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.product-row { grid-auto-columns: calc((100% - 5rem) / 5); }
}

@media (max-width: 899px) {
	body.single-shopee_product { padding-bottom: 88px; }
	.buybar {
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
		display: flex; align-items: center; gap: .85rem; padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom, 0px));
		background: var(--c-bg); border-top: 1px solid var(--c-border);
	}
	.buybar__price { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
	.buybar__price strong { font-family: var(--font-display); font-size: 1.25rem; color: var(--c-shop); white-space: nowrap; }
	.buybar__price s { color: var(--c-muted); font-size: .75rem; white-space: nowrap; }
	.buybar .button--cta { flex: 1; width: auto; padding: .8rem 1rem; font-size: 1rem; }
}

/* Rekomendasi di dalam artikel: 3 kartu lega (bukan baris geser yang sempit) */
.shop-strip--inline { margin-block: 2rem; padding: 1.25rem; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); }
.shop-strip--inline .product-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: row; grid-auto-columns: auto; gap: 1rem; overflow: visible; padding: 0; }
.shop-strip--inline .product-card__body { padding: .85rem .9rem; }
.shop-strip--inline .product-card__price { font-size: 1rem; }
.shop-strip--inline .disclosure { margin-top: 1rem; }
@media (max-width: 639px) {
	.shop-strip--inline { padding: 1rem; }
	.shop-strip--inline .product-row { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: minmax(200px, 72%); overflow-x: auto; padding-bottom: .75rem; }
}