/**
 * JT Bargain Grid (Pocket Friendly) widget styles.
 *
 * Extracted verbatim from the shared jt-widgets.css Bargain Grid
 * section. Already scoped by stable classes, not per-instance IDs,
 * so no selector rewriting was needed.
 */

/* --- JT Bargain Grid (Pocket Friendly) Styles --- */
.jt-bargain-wrapper { position: relative; width: 100%; padding: 0; }
.jt-bargain-wrapper .jt-bargain-header { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 10px; padding: 0 4px; }
.jt-bargain-wrapper .jt-bg-header-text { flex: 1; }
.jt-bargain-wrapper .jt-bargain-title { font-size: 22px; font-weight: 800; color: #0f172a; margin: 0 0 2px 0; letter-spacing: -0.5px; line-height: 1.2; }
.jt-bargain-wrapper .jt-bargain-subtitle { font-size: 14px; color: #64748b; margin: 0; font-weight: 500; }
.jt-bargain-wrapper .jt-header-btn { background: #f8fafc; color: #0f172a; padding: 10px 20px; border-radius: 100px; font-size: 14px; font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: all 0.2s; border: 1px solid #e2e8f0; flex-shrink: 0; }
.jt-bargain-wrapper .jt-header-btn:hover { background: #0f172a; color: #ffffff; border-color: #0f172a; box-shadow: 0 4px 12px rgba(15,23,42,0.15); }

/* Layout Configurations */
.jt-bargain-wrapper.jt-bg-layout-carousel .jt-bargain-track { 
	display: grid; grid-template-rows: repeat(var(--mj-bg-rows, 1), 1fr); grid-auto-flow: column; grid-auto-columns: calc( (100% - (var(--mj-bg-gap, 16px) * (var(--mj-bg-cols, 6) - 1))) / var(--mj-bg-cols, 6) );
	gap: var(--mj-bg-gap, 16px); overflow-x: auto; scroll-snap-type: x mandatory; 
	scrollbar-width: none; padding: 15px calc(var(--mj-bg-gap, 16px) * 2) 15px 4px; -webkit-overflow-scrolling: touch; align-items: flex-start;
}
.jt-bargain-wrapper.jt-bg-layout-carousel .jt-bargain-track::-webkit-scrollbar { display: none; }
.jt-bargain-wrapper.jt-bg-layout-carousel .jt-bg-card { flex: none; min-width: 0; width: 100%; height: 100%; scroll-snap-align: start; }
.jt-bargain-wrapper.jt-bg-layout-grid .jt-bargain-track { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--mj-bg-gap, 16px); padding: 15px 0 0; }
.jt-bargain-wrapper.jt-bg-layout-grid .jt-bg-card { flex: 0 0 calc((100% - (var(--mj-bg-gap, 16px) * (var(--mj-bg-cols, 6) - 1))) / var(--mj-bg-cols, 6) - 0.1px); max-width: calc((100% - (var(--mj-bg-gap, 16px) * (var(--mj-bg-cols, 6) - 1))) / var(--mj-bg-cols, 6) - 0.1px); width: 100%; height: auto; }

/* Cards */
.jt-bargain-wrapper .jt-bg-card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: 4/5; overflow: hidden; text-decoration: none; box-shadow: 0 4px 15px rgba(0,0,0,0.05); transform: translateZ(0); background: #f8fafc; }
.jt-bargain-wrapper .jt-bg-img-wrap { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.jt-bargain-wrapper .jt-bg-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
.jt-bargain-wrapper .jt-bg-card:hover .jt-bg-img-wrap img { transform: scale(1.08); }
.jt-bargain-wrapper .jt-bg-overlay { position: absolute; inset: 0; z-index: 2; background: linear-gradient(to top, var(--mj-bg-overlay, rgba(15,23,42,0.95)) 0%, transparent 60%); pointer-events: none; }
.jt-bargain-wrapper .jt-bg-content { position: absolute; bottom: 0; left: 0; right: 0; z-index: 3; padding: 16px 10px 12px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.jt-bargain-wrapper .jt-bg-label { font-size: 11px; text-transform: uppercase; font-weight: 700; color: rgba(255,255,255,0.9); letter-spacing: 1px; margin-bottom: 2px; }
.jt-bargain-wrapper .jt-bg-price { font-size: 24px; font-weight: 900; color: #ffffff; line-height: 1.15; letter-spacing: -0.5px; margin-bottom: 4px; text-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.jt-bargain-wrapper .jt-bg-cat { font-size: 11px; font-weight: 700; color: #ffffff; background: rgba(255,255,255,0.2); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); padding: 4px 12px; border-radius: 100px; text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.jt-bargain-wrapper .jt-nav-arrow { position: absolute; top: calc(50% + 15px); transform: translateY(-50%); z-index: 10; width: 40px; height: 40px; border-radius: 50%; background: #ffffff; border: 1px solid #f1f5f9; color: #0f172a; box-shadow: 0 4px 15px rgba(0,0,0,0.08); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px; transition: all 0.3s ease; }
.jt-bargain-wrapper .jt-nav-arrow:hover { background: #0f172a; color: #ffffff; box-shadow: 0 8px 20px rgba(15,23,42,0.2); }
.jt-bargain-wrapper .jt-nav-arrow.prev { left: -15px; }
.jt-bargain-wrapper .jt-nav-arrow.next { right: -15px; }
@media (max-width: 1024px) {
	.jt-bargain-wrapper .jt-bargain-title { font-size: 20px; }
	.jt-bargain-wrapper .jt-bargain-subtitle { font-size: 13px; }
	.jt-bargain-wrapper .jt-bg-content { padding: 14px 8px 12px; }
	.jt-bargain-wrapper .jt-bg-label { font-size: 10px; }
	.jt-bargain-wrapper .jt-bg-price { font-size: 20px; margin-bottom: 5px; }
	.jt-bargain-wrapper .jt-bg-cat { font-size: 10px; padding: 4px 10px; }
}
@media (max-width: 767px) {
	.jt-bargain-wrapper .jt-bg-card { min-height: 120px; }
	.jt-bargain-wrapper .jt-bargain-header { padding: 0; margin-bottom: 10px; gap: 8px; }
	.jt-bargain-wrapper .jt-bargain-title { font-size: 17px; }
	.jt-bargain-wrapper .jt-bargain-subtitle { font-size: 13px; margin-top: 2px; }
	.jt-bargain-wrapper .jt-header-btn { padding: 6px 12px; font-size: 11px; }
	.jt-bargain-wrapper .jt-bg-content { padding: 12px max(3px, calc(14px - var(--mj-bg-cols, 2) * 2.5px)) 10px; }
	.jt-bargain-wrapper .jt-bg-label { font-size: max(7.5px, calc(13px - var(--mj-bg-cols, 2) * 1.2px)); margin-bottom: 2px; }
	.jt-bargain-wrapper .jt-bg-price { font-size: max(13px, calc(24px - var(--mj-bg-cols, 2) * 2.5px)); margin-bottom: 3px; letter-spacing: -0.2px; line-height: 1.15; }
	.jt-bargain-wrapper .jt-bg-cat { font-size: max(7.5px, calc(12px - var(--mj-bg-cols, 2) * 1px)); padding: max(3px, calc(6px - var(--mj-bg-cols, 2) * 0.5px)) max(6px, calc(16px - var(--mj-bg-cols, 2) * 2px)); }
	.jt-bargain-wrapper .jt-nav-arrow { display: none; }
}