/* Buyreal Product Card Studio — static styles. Per-site rules are added inline. */

.brpcs-rel { position: relative; }

/* Sticker zones */
.brpcs-zone { display: flex; flex-wrap: wrap; gap: 4px; pointer-events: none; }
.brpcs-zone .brpcs-st { pointer-events: auto; }
.brpcs-zone-img { position: absolute; z-index: 4; max-width: calc(100% - 12px); flex-direction: column; align-items: flex-start; }
.brpcs-z-img_tl { top: 6px; left: 6px; }
.brpcs-z-img_tr { top: 6px; right: 6px; align-items: flex-end; }
.brpcs-z-img_bl { bottom: 6px; left: 6px; }
.brpcs-z-img_br { bottom: 6px; right: 6px; align-items: flex-end; }
[dir="rtl"] .brpcs-z-img_tl, [dir="rtl"] .brpcs-z-img_bl { left: auto; right: 6px; align-items: flex-end; }
[dir="rtl"] .brpcs-z-img_tr, [dir="rtl"] .brpcs-z-img_br { right: auto; left: 6px; align-items: flex-start; }
.brpcs-zone-inline { margin: 2px 0 6px; width: 100%; }
.brpcs-zone:empty { display: none; }

/* Sticker */
.brpcs-st {
	--st-fs: var(--st-fs-d, 12px);
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: .35em;
	max-width: 100%;
	padding: var(--st-py, 3px) var(--st-px, 8px);
	font-size: var(--st-fs-auto, var(--st-fs));
	font-weight: var(--st-fw, 600);
	line-height: 1.25;
	letter-spacing: .01em;
	color: var(--st-c, #fff);
	background: linear-gradient(135deg, var(--st-bg, #111), var(--st-bg2, var(--st-bg, #111)));
	border: 1px solid var(--st-bc, transparent);
	border-radius: var(--st-r, 6px);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	vertical-align: middle;
}
@media (min-width: 768px) and (max-width: 1024px) { .brpcs-st { --st-fs: var(--st-fs-t, 11px); } }
@media (max-width: 767px) { .brpcs-st { --st-fs: var(--st-fs-m, 10px); gap: .25em; } }
.brpcs-tx { overflow: hidden; text-overflow: ellipsis; }
.brpcs-ic { display: inline-flex; flex: 0 0 auto; line-height: 1; }
.brpcs-ic svg { width: 1.2em; height: 1.2em; display: block; }
.brpcs-emoji { font-size: 1.1em; }

/* Shapes */
.brpcs-shape-pill { border-radius: 999px; }
.brpcs-shape-square { border-radius: 0; }
.brpcs-shape-ribbon { border-radius: 3px 0 0 3px; padding-right: calc(var(--st-px, 8px) + 8px); clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 50%, 100% 100%, 0 100%); border: 0; }
.brpcs-shape-tag { border-radius: 0 4px 4px 0; padding-left: calc(var(--st-px, 8px) + 8px); clip-path: polygon(9px 0, 100% 0, 100% 100%, 9px 100%, 0 50%); border: 0; }
.brpcs-shape-flag { border-radius: 8px 0 0 8px; padding-right: calc(var(--st-px, 8px) + 10px); clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%); border: 0; font-style: italic; }

/* Device visibility */
@media (min-width: 1025px) { .brpcs-no-d { display: none !important; } }
@media (min-width: 768px) and (max-width: 1024px) { .brpcs-no-t { display: none !important; } }
@media (max-width: 767px) { .brpcs-no-m { display: none !important; } }

/* Animations */
@keyframes brpcs-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes brpcs-bounce { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(-3px); } 60% { transform: translateY(1px); } }
@keyframes brpcs-blink { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes brpcs-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes brpcs-rise { 0% { transform: translateY(4px); opacity: 0; } 35%, 70% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(-4px); opacity: 0; } }
@keyframes brpcs-drop { 0% { transform: translateY(-4px); opacity: 0; } 35%, 70% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(4px); opacity: 0; } }
@keyframes brpcs-glow { 0%, 100% { box-shadow: 0 0 0 0 var(--st-bg); } 50% { box-shadow: 0 0 0 4px transparent, 0 0 10px 1px var(--st-bg); } }
@keyframes brpcs-wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-4deg); } 75% { transform: rotate(4deg); } }
@keyframes brpcs-shine { 0% { transform: translateX(-120%) skewX(-20deg); } 60%, 100% { transform: translateX(260%) skewX(-20deg); } }

.brpcs-anim-pulse { animation: brpcs-pulse 1.8s ease-in-out infinite; }
.brpcs-anim-bounce { animation: brpcs-bounce 1.6s ease-in-out infinite; }
.brpcs-anim-blink { animation: brpcs-blink 1.4s ease-in-out infinite; }
.brpcs-anim-float { animation: brpcs-float 2.4s ease-in-out infinite; }
.brpcs-anim-glow { animation: brpcs-glow 2s ease-in-out infinite; overflow: visible; }
.brpcs-anim-wiggle { animation: brpcs-wiggle 1.2s ease-in-out infinite; }
.brpcs-anim-rise .brpcs-ic { animation: brpcs-rise 1.5s ease-in-out infinite; }
.brpcs-anim-drop .brpcs-ic { animation: brpcs-drop 1.5s ease-in-out infinite; }
.brpcs-anim-shine::after {
	content: "";
	position: absolute;
	top: 0; bottom: 0; left: 0;
	width: 40%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
	animation: brpcs-shine 2.6s ease-in-out infinite;
	pointer-events: none;
}

/* Card inspector (admins only, ?brpcs_inspect=1) */
.brpcs-inspector { position: fixed; left: 8px; right: 8px; bottom: 8px; z-index: 999999; max-height: 55vh; overflow: auto; background: #fff; color: #111; border: 2px solid #111; border-radius: 12px; font: 13px/1.4 system-ui, sans-serif; box-shadow: 0 10px 40px rgba(0,0,0,.25); }
.brpcs-inspector header { position: sticky; top: 0; background: #111; color: #fff; padding: 10px 12px; display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.brpcs-inspector header button { background: #fff; color: #111; border: 0; border-radius: 6px; padding: 4px 10px; cursor: pointer; }
.brpcs-inspector p { margin: 8px 12px; color: #444; }
.brpcs-inspector ul { list-style: none; margin: 0; padding: 0 0 8px; }
.brpcs-inspector li { padding: 7px 12px; border-top: 1px solid #eee; cursor: pointer; display: grid; gap: 2px; }
.brpcs-inspector li:hover, .brpcs-inspector li:focus { background: #f4f4f5; outline: none; }
.brpcs-inspector code { font-size: 12px; word-break: break-all; color: #111; background: none; padding: 0; }
.brpcs-inspector small { color: #666; }
.brpcs-inspector .brpcs-tagged { color: #047857; font-weight: 600; }
.brpcs-inspect-hl { outline: 3px solid #f59e0b !important; outline-offset: 2px; }

/* Safety: live price HTML includes screen-reader text; keep it hidden even if a theme forgets. */
.price .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Offer badges (merged from Smart Offer Showcase Pro) */
.brpcs-ob-zone { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.brpcs-ob-fixed { display: flex; flex-wrap: wrap; gap: 6px; }
.brpcs-ob {
	display: inline-flex; align-items: center; gap: .4em; max-width: 100%;
	font-size: var(--ob-fs-auto, var(--ob-fs, 13px)); font-weight: 600; line-height: 1.2;
	color: var(--ob-c, inherit); background: var(--ob-bg, transparent);
	transition: transform .3s cubic-bezier(.16, 1, .3, 1), opacity .2s ease;
}
.brpcs-ob-tx { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brpcs-ob-ic { display: inline-flex; flex: 0 0 auto; }
.brpcs-ob-ic svg { width: 1.2em; height: 1.2em; display: block; }
.brpcs-ob-express { border-radius: 24px 4px 4px 24px; padding: .28em 1.1em .28em .85em; font-family: "Helvetica Neue", Arial, sans-serif; font-style: italic; font-weight: 800; letter-spacing: -.02em; transform: skewX(-12deg); }
.brpcs-ob-express .brpcs-ob-tx { display: inline-block; transform: skewX(12deg); }
.brpcs-ob-express .brpcs-ob-ic { display: none; }
.brpcs-ob-price { padding: .28em .75em; border-radius: 6px; border: 1px solid #16a34a; }
.brpcs-ob-pill { padding: .28em .9em; border-radius: 999px; }
.brpcs-ob-text { padding: 0; }
.brpcs-ob-ticker { display: flex; align-items: center; min-height: 1.9em; }
.brpcs-ob-ticker .brpcs-ob { transition: transform .3s cubic-bezier(.16, 1, .3, 1), opacity .25s ease; }
.brpcs-ob-ticker.is-out .brpcs-ob { opacity: 0; transform: translateY(-6px); }
.brpcs-ob-ticker.is-out .brpcs-ob-express { transform: translateY(-6px) skewX(-12deg); }
.brpcs-ob-ticker.is-single .brpcs-ob { animation: brpcs-obfloat 4s ease-in-out infinite; }
.brpcs-ob-ticker.is-single .brpcs-ob-express { animation-name: brpcs-obfloatskew; }
@keyframes brpcs-obfloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes brpcs-obfloatskew { 0%, 100% { transform: translateY(0) skewX(-12deg); } 50% { transform: translateY(-2px) skewX(-12deg); } }
.brpcs-ob-single { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 12px; }

/* Loading skeleton + fallbacks */
@keyframes brpcs-shimmer { to { background-position: 250% 0, 8% 6%, 8% 64%, 8% 72%, 8% 81%, 8% 94%; } }
.brpcs-nocq { container-type: normal !important; }

/* Recently viewed */
.brpcs-rv { margin: 24px 0; }
.brpcs-rv[hidden] { display: none !important; }
.brpcs-rv-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.brpcs-rv-title { margin: 0; font-size: clamp(18px, 2.4vw, 26px); }
.brpcs-rv-nav { display: flex; gap: 6px; }
.brpcs-rv-nav button { width: 34px; height: 34px; border-radius: 50%; border: 1px solid #e4e4e7; background: #fff; color: #111; font-size: 22px; line-height: 1; cursor: pointer; padding: 0; }
.brpcs-rv-track {
	--rv-cols: 2.3; --rv-gap: 8px;
	display: grid; grid-auto-flow: column;
	grid-auto-columns: calc((100% - (var(--rv-cols) - 1) * var(--rv-gap)) / var(--rv-cols));
	gap: var(--rv-gap); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
	-webkit-overflow-scrolling: touch; padding-bottom: 2px;
}
.brpcs-rv-track::-webkit-scrollbar { display: none; }
.brpcs-rv-item { scroll-snap-align: start; min-width: 0; display: flex; }
.brpcs-rv-item > * { width: 100%; }
.brpcs-rv-item .products { margin: 0; padding: 0; list-style: none; display: block; }
.brpcs-rv-item .products > li { width: 100% !important; margin: 0 !important; float: none !important; }
.brpcs-rv-skel { aspect-ratio: 3 / 5; border-radius: 12px; background: linear-gradient(90deg, #ececee 0, #f6f6f7 50%, #ececee 100%) 0 0 / 200% 100%; animation: brpcs-rvsk 1.2s linear infinite; }
@keyframes brpcs-rvsk { to { background-position: -200% 0; } }