/*
 * Oippa design layer (loaded after hx.css when Design style = "Oippa").
 * Gradients and soft depth on top of the store colours. Colours come from
 * Store colors: --hx-grad-a (main colour) and --hx-grad-b (gradient end, automatic or set).
 */
:root {
	--hx-grad: linear-gradient(135deg, var(--hx-grad-a, var(--hx-primary)) 0%, var(--hx-grad-b, var(--hx-primary-dark)) 100%);
	--hx-grad-soft: linear-gradient(135deg, color-mix(in srgb, var(--hx-grad-a, var(--hx-primary)) 9%, #fff) 0%, color-mix(in srgb, var(--hx-grad-b, var(--hx-primary)) 7%, #fff) 100%);
	--hx-grad-badge: linear-gradient(135deg, var(--hx-badge) 0%, color-mix(in srgb, var(--hx-badge) 70%, #ff7a45) 100%);
	--hx-glow: 0 10px 24px -10px rgba(var(--hx-primary-rgb), 0.55);
	--hx-lift: 0 1px 2px rgba(15, 23, 42, 0.05), 0 8px 24px -12px rgba(15, 23, 42, 0.18);
	--hx-r: 14px;
}

body.hx-style-oippa { background: var(--hx-bg); color: var(--hx-text); }
.hx-style-oippa ::selection { background: rgba(var(--hx-primary-rgb), 0.18); }

/* Top bar, announcement and footer */
.hx-style-oippa .hx-announce,
.hx-style-oippa .hx-topbar,
.hx-style-oippa .hx-notice .e-con.e-parent { background-image: var(--hx-grad) !important; }
.hx-style-oippa .hx-footer { background: var(--hx-grad); }

/* Buttons */
.hx-style-oippa .hx-card__btn,
.hx-style-oippa .hx-order__btn,
.hx-style-oippa .hx-more__btn,
.hx-style-oippa .hx-filters__apply,
.hx-style-oippa .hx-sbuy__btn,
.hx-style-oippa .hx-pop__btn,
.hx-style-oippa .hx-ty__add,
.hx-style-oippa .hx-rv__add,
.hx-style-oippa .hx-rv__send,
.hx-style-oippa .hx-thanks__home,
.hx-style-oippa .hx-hb-btn {
	background: var(--hx-grad);
	border-color: transparent;
	color: #fff;
	box-shadow: var(--hx-glow);
	transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
@media (hover: hover) {
	.hx-style-oippa .hx-card__link:hover .hx-card__btn,
	.hx-style-oippa .hx-order__btn:hover,
	.hx-style-oippa .hx-more__btn:hover,
	.hx-style-oippa .hx-filters__apply:hover,
	.hx-style-oippa .hx-pop__btn:hover,
	.hx-style-oippa .hx-ty__add:hover,
	.hx-style-oippa .hx-rv__send:hover,
	.hx-style-oippa .hx-thanks__home:hover,
	.hx-style-oippa .hx-hb-btn:hover { transform: translateY(-1px); filter: saturate(1.08) brightness(1.04); box-shadow: 0 14px 28px -12px rgba(var(--hx-primary-rgb), 0.6); }
}
.hx-style-oippa .hx-order__btn:active,
.hx-style-oippa .hx-card__btn:active { transform: translateY(0); }

/* Product cards */
.hx-style-oippa .hx-card__link { border-radius: var(--hx-r); }
.hx-style-oippa .hx-card__media { border-radius: var(--hx-r); background: var(--hx-grad-soft); box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.04); }
@media (hover: hover) {
	.hx-style-oippa .hx-card__link:hover .hx-card__media { box-shadow: var(--hx-lift); }
	.hx-style-oippa .hx-card__link:hover .hx-card__title { text-decoration: none; color: var(--hx-primary); }
}
.hx-style-oippa .hx-card__badge { background: var(--hx-grad-badge); border-radius: 999px; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.35); }
.hx-style-oippa .hx-card__btn { border-radius: 12px; font-weight: 800; }

/* Prices and discount badges */
.hx-style-oippa .hx-pp__badge { background: var(--hx-grad-badge); color: #fff; box-shadow: none; border-radius: 999px; }

/* Search, chips and filters */
.hx-style-oippa .hx-hs__search { border-radius: 14px; }
.hx-style-oippa .hx-chip { border-radius: 999px; }
.hx-style-oippa .hx-chip.is-active { background: var(--hx-grad); border-color: transparent; box-shadow: var(--hx-glow); }
.hx-style-oippa .hx-filters { border-radius: var(--hx-r); }

/* Order form: soft gradient frame */
.hx-style-oippa .hx-order {
	border: 1.5px solid transparent;
	border-radius: 20px;
	background: linear-gradient(var(--hx-bg), var(--hx-bg)) padding-box, var(--hx-grad) border-box;
	box-shadow: var(--hx-lift);
}
.hx-style-oippa .hx-order .hx-field__input { border-radius: 12px; }
.hx-style-oippa .hx-order .hx-field__input:focus { border-color: var(--hx-primary); box-shadow: 0 0 0 4px rgba(var(--hx-primary-rgb), 0.12); outline: none; }
.hx-style-oippa .hx-offer.is-on { box-shadow: 0 0 0 2px var(--hx-primary), var(--hx-glow); }

/* Reviews, popup, thank-you */
.hx-style-oippa .hx-rv__card { border-radius: var(--hx-r); box-shadow: var(--hx-lift); }
.hx-style-oippa .hx-pop__box { border-radius: 20px; }
.hx-style-oippa .hx-thanks__box { border-radius: 20px; background: var(--hx-grad-soft); box-shadow: var(--hx-lift); }
.hx-style-oippa .hx-thanks__check { background: var(--hx-grad); color: #fff; }

@media (prefers-reduced-motion: reduce) {
	.hx-style-oippa * { transition: none !important; }
}