/**
 * OGPC Product Card — frontend styles.
 *
 * Every value that Elementor can control is expressed as a CSS custom
 * property, so panel changes apply instantly without a re-render.
 */

.ogpc-grid {
	--ogpc-cols: 5;
	--ogpc-col-gap: 12px;
	--ogpc-row-gap: 12px;
	--ogpc-scroll-card-w: 250px;
	--ogpc-card-stretch: stretch;

	display: grid;
	grid-template-columns: repeat(var(--ogpc-cols), minmax(0, 1fr));
	column-gap: var(--ogpc-col-gap);
	row-gap: var(--ogpc-row-gap);
	align-items: var(--ogpc-card-stretch);
	box-sizing: border-box;
}

/* ------------------------------------------------------- Containment
 *
 * Elementor containers are flex, and a flex item defaults to
 * min-width:auto — which lets a wide horizontal track push the widget out
 * to its content width instead of the section's. Every ancestor between
 * the container and the track needs min-width:0 for the scroller to be
 * bounded by the section.
 */
.elementor-widget-ogpc-product-card,
.elementor-widget-ogpc-product-card > .elementor-widget-container {
	min-width: 0;
	max-width: 100%;
}

.ogpc-section {
	position: relative;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.ogpc-section *,
.ogpc-section *::before,
.ogpc-section *::after {
	box-sizing: border-box;
}

/* ------------------------------------------------------ Section header */

.ogpc-head {
	--ogpc-line-w: 4px;
	--ogpc-line-h: 22px;
	--ogpc-line-gap: 10px;

	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 20px;
	min-width: 0;
}

.ogpc-head__text {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.ogpc-head__titlewrap {
	display: flex;
	align-items: center;
	gap: var(--ogpc-line-gap);
	min-width: 0;
}

.ogpc-head__line {
	flex: 0 0 auto;
	width: var(--ogpc-line-w);
	height: var(--ogpc-line-h);
	border-radius: 2px;
	background-color: #15181c;
}

.ogpc-head__title {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	color: #15181c;
	min-width: 0;
}

.ogpc-head__accent {
	color: #2f6bff;
}

.ogpc-head__sub {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: #6b7280;
}

/* Arrows living in the header row instead of over the track. */
.ogpc-head__nav {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
}

.ogpc-head__nav .ogpc-nav {
	position: static;
	transform: none;
}

/* Header alignment variants. */
.ogpc-head--center {
	justify-content: center;
	text-align: center;
}

.ogpc-head--center .ogpc-head__text {
	align-items: center;
}

.ogpc-head--right {
	justify-content: flex-end;
	text-align: right;
}

.ogpc-head--right .ogpc-head__text {
	align-items: flex-end;
}

/* When the arrows are in the header, the track needs no top padding. */
.ogpc-carousel--header-nav {
	padding-top: 0;
}

/* --------------------------------------------------------- Filter tabs */

.ogpc-filterable {
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

.ogpc-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-bottom: 20px;
	min-width: 0;
}

.ogpc-filter__btn {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 9px 20px;
	border: 1px solid #e6e9ee;
	border-radius: 24px;
	background-color: #ffffff;
	color: #15181c;
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
	white-space: nowrap;
	cursor: pointer;
	transition:
		background-color 200ms ease,
		color 200ms ease,
		border-color 200ms ease;
}

.ogpc-filter__btn:hover {
	border-color: #f05a28;
}

.ogpc-filter__btn.is-active {
	border-color: #f05a28;
	color: #f05a28;
}

.ogpc-filter__btn:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Horizontal scrolling variants. The row keeps a hidden scrollbar and a
   little end padding so the last pill is never flush against the edge. */
.ogpc-filter--scroll,
.ogpc-filter--scroll_mobile {
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.ogpc-filter--scroll::-webkit-scrollbar,
.ogpc-filter--scroll_mobile::-webkit-scrollbar {
	display: none;
}

.ogpc-filter--scroll {
	flex-wrap: nowrap;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

@media (max-width: 767px) {
	.ogpc-card__save {
		padding: 2px 7px;
	}

	/* On a narrow card the old price takes the width the savings badge needs,
	   so it moves to its own line and the price row stays intact. */
	.ogpc-card__price del,
	.ogpc-card__price-was {
		display: block;
	}

	.ogpc-card__price-row {
		gap: 6px;
	}

	.ogpc-filter--scroll_mobile {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		justify-content: flex-start !important;
		scroll-snap-type: x proximity;
	}

	.ogpc-filter--scroll_mobile .ogpc-filter__btn {
		scroll-snap-align: start;
	}
}

/* Panel state while a filter request is in flight. */
.ogpc-filter__panel {
	position: relative;
	min-width: 0;
	transition: opacity 180ms ease;
}

.ogpc-filter__panel[aria-busy="true"] {
	opacity: 0.45;
	pointer-events: none;
}

/* ------------------------------------------------------------- Carousel */

.ogpc-carousel {
	--ogpc-arrow-offset: 6px;

	position: relative;
	display: block;
	width: 100%;
	max-width: 100%;
	/* Without this a flex/grid parent lets the track grow to its content
	   width and the row spills outside the section. */
	min-width: 0;
}

/* Horizontal scroll layout */
.ogpc-grid--scroll {
	--ogpc-per-view: 5;

	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	align-items: var(--ogpc-card-stretch);
	row-gap: 0;
	scroll-behavior: smooth;
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

/* Cards sized as a fraction of the visible track, so N of them fit the
   section exactly and the row can never be wider than its container. */
.ogpc-grid--scroll.ogpc-grid--perview > .ogpc-card {
	flex: 0 0 calc(
		(100% - (var(--ogpc-per-view) - 1) * var(--ogpc-col-gap)) / var(--ogpc-per-view)
	);
	max-width: calc(
		(100% - (var(--ogpc-per-view) - 1) * var(--ogpc-col-gap)) / var(--ogpc-per-view)
	);
}

/* The track never scrolls the page sideways while a drag is in progress. */
.ogpc-grid--drag {
	cursor: grab;
	touch-action: pan-y;
}

.ogpc-grid--drag.is-dragging {
	cursor: grabbing;
	scroll-behavior: auto;
	scroll-snap-type: none;
	user-select: none;
}

/* Suppress the click that ends a drag, so a swipe never opens a product. */
.ogpc-grid--drag.is-dragging a,
.ogpc-grid--drag.is-dragging button {
	pointer-events: none;
}

/* Autoplay in continuous mode needs instant scrolling to stay smooth, and a
   scripted step animation must not fight scroll snapping while it runs. */
.ogpc-grid--gliding,
.ogpc-grid--animating {
	scroll-behavior: auto;
	scroll-snap-type: none;
}

/* ------------------------------------------------------- Carousel arrows */

/* Sizes use var() fallbacks rather than local declarations: the arrows can
   render inside .ogpc-carousel or up in the section header, and Elementor
   writes the value on the widget root for both to inherit. A local
   declaration here would shadow that and break the control. */
.ogpc-nav {
	position: absolute;
	top: 50%;
	z-index: 5;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--ogpc-arrow-size, 40px);
	height: var(--ogpc-arrow-size, 40px);
	margin: 0;
	padding: 0;
	transform: translateY(-50%);
	border: 1px solid #e6e9ee;
	border-radius: 50%;
	background-color: #ffffff;
	color: #15181c;
	cursor: pointer;
	transition:
		background-color 200ms ease,
		color 200ms ease,
		border-color 200ms ease,
		opacity 200ms ease,
		visibility 200ms ease;
}

.ogpc-nav svg {
	width: var(--ogpc-arrow-icon, 16px);
	height: var(--ogpc-arrow-icon, 16px);
}

.ogpc-carousel--inside .ogpc-nav--prev { left: var(--ogpc-arrow-offset); }
.ogpc-carousel--inside .ogpc-nav--next { right: var(--ogpc-arrow-offset); }

.ogpc-carousel--outside {
	padding-left: calc(var(--ogpc-arrow-size, 40px) + var(--ogpc-arrow-offset));
	padding-right: calc(var(--ogpc-arrow-size, 40px) + var(--ogpc-arrow-offset));
}

.ogpc-carousel--outside .ogpc-nav--prev { left: 0; }
.ogpc-carousel--outside .ogpc-nav--next { right: 0; }

.ogpc-carousel--top {
	padding-top: calc(var(--ogpc-arrow-size, 40px) + 12px);
}

.ogpc-carousel--top .ogpc-nav {
	top: 0;
	transform: none;
}

.ogpc-carousel--top .ogpc-nav--next { right: 0; }
.ogpc-carousel--top .ogpc-nav--prev { right: calc(var(--ogpc-arrow-size, 40px) + 8px); }

/* Reveal on hover — still shown on keyboard focus. */
.ogpc-carousel--reveal .ogpc-nav {
	opacity: 0;
	visibility: hidden;
}

.ogpc-carousel--reveal:hover .ogpc-nav,
.ogpc-carousel--reveal:focus-within .ogpc-nav {
	opacity: 1;
	visibility: visible;
}

/* Faded, but still operable, when the track is at that end. */
.ogpc-nav.is-end {
	opacity: 0.35;
}

.ogpc-carousel--reveal:hover .ogpc-nav.is-end,
.ogpc-carousel--reveal:focus-within .ogpc-nav.is-end {
	opacity: 0.35;
}

@media (max-width: 767px) {
	.ogpc-carousel--no-mobile-arrows .ogpc-nav {
		display: none;
	}

	.ogpc-carousel--no-mobile-arrows.ogpc-carousel--outside {
		padding-left: 0;
		padding-right: 0;
	}

	.ogpc-carousel--no-mobile-arrows.ogpc-carousel--top {
		padding-top: 0;
	}
}

.ogpc-grid--scroll > .ogpc-card {
	flex: 0 0 var(--ogpc-scroll-card-w);
	max-width: var(--ogpc-scroll-card-w);
}

.ogpc-grid--snap {
	scroll-snap-type: x mandatory;
	scroll-padding-left: 0;
}

.ogpc-grid--snap > .ogpc-card {
	scroll-snap-align: start;
}

.ogpc-grid--no-bar {
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.ogpc-grid--no-bar::-webkit-scrollbar {
	display: none;
}

/* ------------------------------------------------------------------ Card */

.ogpc-card {
	--ogpc-card-bg: #ffffff;
	--ogpc-card-radius: 16px;
	--ogpc-card-gap: 2px;
	--ogpc-card-hover-scale: 1;
	--ogpc-transition: 220ms;

	--ogpc-img-h: 140px;
	--ogpc-img-w: 100%;
	--ogpc-img-fit: contain;
	--ogpc-img-pos: center center;
	--ogpc-img-bg: transparent;
	--ogpc-img-radius: 10px;
	--ogpc-img-scale: 1.04;

	--ogpc-title-lines: 1;

	position: relative;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	min-width: 0;
	padding: 12px;
	background-color: var(--ogpc-card-bg);
	border-radius: var(--ogpc-card-radius);
	transition:
		transform var(--ogpc-transition) ease,
		box-shadow var(--ogpc-transition) ease,
		border-color var(--ogpc-transition) ease;
}

.ogpc-card > * {
	min-width: 0;
}

/* ------------------------------------------------- Full-card click area */

/* Covers the card below the interactive controls, so the whole tile opens
   the product while the two buttons keep their own actions. */
.ogpc-card__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
	text-decoration: none;
}

.ogpc-card--clickable {
	cursor: pointer;
}

/* Anything the visitor can act on sits above the overlay. */
.ogpc-card--clickable .ogpc-card__badge,
.ogpc-card--clickable .ogpc-card__actions,
.ogpc-card--clickable .ogpc-card__title a,
.ogpc-card--clickable .ogpc-card__save {
	position: relative;
	z-index: 2;
}

.ogpc-card--clickable .ogpc-card__actions {
	pointer-events: auto;
}

/* --------------------------------------------------- Card hover effects */

.ogpc-card {
	--ogpc-fx-lift: 4px;
	--ogpc-fx-scale: 1.02;
	--ogpc-fx-tilt: 1deg;
	--ogpc-fx-glow: rgba(20, 24, 32, 0.18);
	--ogpc-fx-glow-size: 26px;
	--ogpc-fx-outline: #15181c;
	--ogpc-fx-outline-w: 2px;
	--ogpc-fx-shine: rgba(255, 255, 255, 0.55);
}

.ogpc-card--fx-lift:hover {
	transform: translateY(calc(-1 * var(--ogpc-fx-lift)));
}

.ogpc-card--fx-zoom:hover {
	transform: scale(var(--ogpc-fx-scale));
}

.ogpc-card--fx-lift-zoom:hover {
	transform: translateY(calc(-1 * var(--ogpc-fx-lift))) scale(var(--ogpc-fx-scale));
}

.ogpc-card--fx-tilt:hover {
	transform: translateY(calc(-1 * var(--ogpc-fx-lift))) rotate(var(--ogpc-fx-tilt));
}

.ogpc-card--fx-glow:hover {
	box-shadow: 0 6px var(--ogpc-fx-glow-size) var(--ogpc-fx-glow);
}

.ogpc-card--fx-outline {
	box-shadow: inset 0 0 0 0 transparent;
}

.ogpc-card--fx-outline:hover {
	box-shadow: inset 0 0 0 var(--ogpc-fx-outline-w) var(--ogpc-fx-outline);
}

/* Shine: a diagonal highlight that sweeps across once per hover. */
.ogpc-card--fx-shine {
	overflow: hidden;
}

.ogpc-card--fx-shine::after {
	content: "";
	position: absolute;
	top: -60%;
	left: -120%;
	width: 60%;
	height: 220%;
	z-index: 3;
	pointer-events: none;
	transform: rotate(18deg);
	background: linear-gradient(
		90deg,
		transparent 0%,
		var(--ogpc-fx-shine) 50%,
		transparent 100%
	);
	transition: left 650ms ease;
}

.ogpc-card--fx-shine:hover::after {
	left: 140%;
}

/* ----------------------------------------------------------------- Media */

.ogpc-card__media {
	position: relative;
	height: var(--ogpc-img-h);
	margin-bottom: 12px;
	background-color: var(--ogpc-img-bg);
	border-radius: var(--ogpc-img-radius);
	overflow: hidden;
	box-sizing: border-box;
	flex: 0 0 auto;
}

.ogpc-card__media-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	position: relative;
}

.ogpc-card__img {
	display: block;
	width: var(--ogpc-img-w);
	max-width: 100%;
	height: 100%;
	object-fit: var(--ogpc-img-fit);
	object-position: var(--ogpc-img-pos);
	transition: transform var(--ogpc-transition) ease, opacity var(--ogpc-transition) ease;
}

.ogpc-card:hover .ogpc-card__img {
	transform: scale(var(--ogpc-img-scale));
}

.ogpc-card__img--hover {
	position: absolute;
	inset: 0;
	margin: auto;
	opacity: 0;
	pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
	.ogpc-card:hover .ogpc-card__img--hover {
		opacity: 1;
	}
}

/* ----------------------------------------------------------------- Badge */

.ogpc-card__badge {
	--ogpc-badge-x: 0px;
	--ogpc-badge-y: 0px;

	position: absolute;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	padding: 3px 9px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: 0.01em;
	white-space: nowrap;
	border-radius: 20px;
	background-color: #00b341;
	color: #ffffff;
}

.ogpc-card__badge--top-left {
	top: var(--ogpc-badge-y);
	left: var(--ogpc-badge-x);
}

.ogpc-card__badge--top-right {
	top: var(--ogpc-badge-y);
	right: var(--ogpc-badge-x);
}

.ogpc-card__badge--bottom-left {
	bottom: var(--ogpc-badge-y);
	left: var(--ogpc-badge-x);
}

.ogpc-card__badge--bottom-right {
	bottom: var(--ogpc-badge-y);
	right: var(--ogpc-badge-x);
}

.ogpc-card__badge--outofstock { background-color: #e5102e; }
.ogpc-card__badge--preorder   { background-color: #d6009a; }
.ogpc-card__badge--onsale     { background-color: #f05a28; }
.ogpc-card__badge--new        { background-color: #1565c0; }
.ogpc-card__badge--lowstock   { background-color: #ef6c00; }

/* ------------------------------------------------------------------ Body */

.ogpc-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	gap: var(--ogpc-card-gap);
	min-width: 0;
}

.ogpc-card__brand {
	font-size: 12px;
	font-weight: 400;
	line-height: 1.35;
	color: #8a8f98;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ogpc-card__title {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.35;
	color: #15181c;
	overflow-wrap: anywhere;
}

.ogpc-card__title a {
	color: inherit;
	text-decoration: none;
}

.ogpc-clamp {
	display: -webkit-box;
	-webkit-line-clamp: var(--ogpc-title-lines);
	line-clamp: var(--ogpc-title-lines);
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Reserve the full clamp height so short titles do not shorten the card. */
.ogpc-clamp--reserve {
	min-height: calc(1.35em * var(--ogpc-title-lines));
}

.ogpc-card__from {
	display: block;
	font-size: 12px;
	line-height: 1.35;
	color: #8a8f98;
	margin: 8px 0 2px;
}

/* One row by default: the price keeps its size and the savings badge is the
   part that gives, so the badge never drops underneath on a narrow card. */
.ogpc-card__price-row {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 8px;
	min-width: 0;
}

.ogpc-card__price-row > .ogpc-card__price {
	flex: 0 0 auto;
	min-width: 0;
}

.ogpc-card__price-row > .ogpc-card__save {
	/* Shrinkable on one row; the wrap and stack layouts set this to
	   "0 0 auto" so the badge keeps its natural width there. */
	flex: var(--ogpc-save-flex, 0 1 auto);
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ogpc-card__price {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	color: #15181c;
}

.ogpc-card__price del,
.ogpc-card__price-was {
	font-size: 0.78em;
	font-weight: 500;
	color: #9aa0a8;
	text-decoration: line-through;
}

.ogpc-card__price ins {
	text-decoration: none;
	background: none;
	color: inherit;
}

/* Currency symbol spacing. Applied by class so it pads the correct edge for
   both left- and right-positioned currencies, and works no matter whether the
   symbol came from WooCommerce settings, a site filter, or the widget. */
.ogpc-grid {
	--ogpc-cur-gap: 4px;
}

.ogpc-card__price .woocommerce-Price-currencySymbol,
.ogpc-card__save .woocommerce-Price-currencySymbol {
	font-size: inherit;
	/* Keeps "Tk 2,990" from breaking across two lines. */
	white-space: nowrap;
}

.ogpc-cur-left .ogpc-card__price .woocommerce-Price-currencySymbol,
.ogpc-cur-left .ogpc-card__save .woocommerce-Price-currencySymbol {
	margin-right: var(--ogpc-cur-gap);
}

.ogpc-cur-right .ogpc-card__price .woocommerce-Price-currencySymbol,
.ogpc-cur-right .ogpc-card__save .woocommerce-Price-currencySymbol {
	margin-left: var(--ogpc-cur-gap);
}

.ogpc-card__price .woocommerce-Price-amount,
.ogpc-card__save .woocommerce-Price-amount {
	white-space: nowrap;
}

/* inline-block, not inline-flex: a flex container discards the whitespace
   text node between the "Save" prefix and the price markup. */
.ogpc-card__save {
	display: inline-block;
	vertical-align: middle;
	padding: 3px 9px;
	font-size: 11px;
	font-weight: 500;
	line-height: 1.35;
	white-space: nowrap;
	border-radius: 20px;
	background-color: #e2f5ea;
	color: #157f4c;
}

/* --------------------------------------------------------------- Actions */

/* margin-top:auto pins the row to the bottom, so cards stay aligned
   whatever the title length. */
.ogpc-card__actions {
	display: flex;
	align-items: stretch;
	gap: 8px;
	margin-top: auto;
	padding-top: 14px;
	min-width: 0;
}

.ogpc-card__icon-btn,
.ogpc-card__buy {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	font-family: inherit;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color var(--ogpc-transition) ease,
		color var(--ogpc-transition) ease,
		border-color var(--ogpc-transition) ease,
		opacity var(--ogpc-transition) ease;
}

.ogpc-card__icon-btn {
	--ogpc-icon-size: 17px;

	position: relative;
	flex: 0 0 38px;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 1px solid #e6e9ee;
	border-radius: 10px;
	background-color: #ffffff;
	color: #3c4149;
}

.ogpc-card__buy {
	flex: 1 1 auto;
	min-height: 38px;
	padding: 6px 14px;
	gap: 6px;
	border: 1px solid transparent;
	border-radius: 20px;
	background-color: #eff2f7;
	color: #15181c;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.2;
	text-align: center;
}

.ogpc-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
}

.ogpc-card__icon-btn .ogpc-icon svg,
.ogpc-card__icon-btn .ogpc-icon i {
	width: var(--ogpc-icon-size);
	height: var(--ogpc-icon-size);
	font-size: var(--ogpc-icon-size);
}

.ogpc-card__buy .ogpc-icon svg,
.ogpc-card__buy .ogpc-icon i {
	width: 1em;
	height: 1em;
	font-size: 1em;
}

/* Disabled states */
.ogpc-card__icon-btn.is-disabled,
.ogpc-card__buy.is-disabled {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}

/* Keyboard focus must stay visible. */
.ogpc-card__icon-btn:focus-visible,
.ogpc-card__buy:focus-visible,
.ogpc-card__title a:focus-visible,
.ogpc-card__media-inner:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* --------------------------------------------------------------- Loading */

.ogpc-spinner {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 15px;
	height: 15px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	opacity: 0;
	pointer-events: none;
}

.ogpc-card__icon-btn.is-loading .ogpc-icon {
	opacity: 0;
}

.ogpc-card__icon-btn.is-loading .ogpc-spinner {
	opacity: 1;
	animation: ogpc-spin 0.7s linear infinite;
}

.ogpc-card__icon-btn.is-loading {
	pointer-events: none;
}

.ogpc-card__icon-btn.is-done .ogpc-icon {
	color: #157f4c;
}

@keyframes ogpc-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ogpc-card,
	.ogpc-card__img,
	.ogpc-card__icon-btn,
	.ogpc-card__buy {
		transition: none;
	}

	.ogpc-card:hover {
		transform: none;
	}

	.ogpc-card:hover .ogpc-card__img {
		transform: none;
	}

	.ogpc-card--fx-shine::after {
		display: none;
	}

	.ogpc-grid--scroll {
		scroll-behavior: auto;
	}

	.ogpc-spinner {
		animation-duration: 2s;
	}
}

/* ----------------------------------------------------------------- Toast */

.ogpc-toast {
	position: fixed;
	z-index: 99999;
	left: 50%;
	bottom: 24px;
	transform: translate(-50%, 12px);
	max-width: min(90vw, 360px);
	padding: 11px 18px;
	border-radius: 10px;
	background-color: #15181c;
	color: #ffffff;
	font-size: 13px;
	line-height: 1.4;
	text-align: center;
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
	opacity: 0;
	transition: opacity 200ms ease, transform 200ms ease;
}

.ogpc-toast.is-visible {
	opacity: 1;
	transform: translate(-50%, 0);
}

.ogpc-toast--error {
	background-color: #b3261e;
}

/* ----------------------------------------------------------------- Empty */

.ogpc-empty {
	padding: 24px;
	text-align: center;
	font-size: 14px;
	color: #6b7280;
}

/* ----------------------------------------------------- Safety / overflow */

.ogpc-card img {
	max-width: 100%;
}

.ogpc-grid,
.ogpc-card {
	max-width: 100%;
}