.hspl {
	--hs-teal: #1f3c44;
	--hs-gold: #c9892b;
	--hs-gold2: #e0a64a;
	--hs-cream: #fbf6ec;
	--hs-sand: #e6d7b8;
	max-width: 640px;
	margin: 30px auto;
	padding: 22px 18px 18px;
	border-radius: 26px;
	background: linear-gradient(180deg, #e3efdd 0%, #f4f8ee 100%);
	box-shadow: 0 18px 50px rgba(31, 60, 68, .16);
	color: var(--hs-teal);
	box-sizing: border-box;
	font-family: inherit;
}
.hspl *, .hspl *::before, .hspl *::after { box-sizing: border-box; }

.hspl__mob { display: table; margin: 0 auto 14px; background: var(--hs-teal); color: #fff; border-radius: 999px; padding: 8px 24px; font-weight: 800; letter-spacing: .06em; font-size: 15px; }
.hspl__mob a { color: #fff; text-decoration: none; }

.hspl__ribbon {
	margin: 0 -4px 12px; padding: 14px 18px; text-align: center; text-transform: uppercase;
	font-weight: 900; font-size: clamp(22px, 5.4vw, 32px); letter-spacing: .02em; line-height: 1.15;
	color: var(--hs-teal); border-radius: 8px;
	background: linear-gradient(180deg, var(--hs-gold2), var(--hs-gold));
	box-shadow: 0 8px 18px rgba(201, 137, 43, .38), inset 0 1px 0 rgba(255, 255, 255, .45);
}
.hspl__sub {
	display: table; margin: 0 auto 8px; padding: 8px 22px; border-radius: 999px;
	background: var(--hs-teal); color: #fff; font-weight: 800; text-align: center;
	font-size: clamp(14px, 3.6vw, 18px); border: 2px solid var(--hs-gold2);
}
.hspl__tag { display: flex; align-items: center; gap: 12px; margin: 6px 6px 14px; font-style: italic; font-size: 14px; }
.hspl__tag::before, .hspl__tag::after { content: ""; flex: 1; height: 1px; background: rgba(31, 60, 68, .35); }

.hspl__expired { background: #fdecea; color: #a02622; border-radius: 12px; padding: 10px 14px; margin-bottom: 12px; font-weight: 700; text-align: center; font-size: 14px; }
.hspl.is-expired .hspl__price { opacity: .45; text-decoration: line-through; }

.hspl__card { background: var(--hs-cream); border: 3px solid #fff; border-radius: 20px; padding: 6px 22px; box-shadow: inset 0 0 0 1px var(--hs-sand); }
.hspl__list { list-style: none; margin: 0; padding: 0; }
.hspl__list li {
	display: flex; align-items: center; gap: 10px; margin: 0; padding: 11px 0;
	border-bottom: 1px dashed var(--hs-sand); font-weight: 800; text-transform: uppercase;
	font-size: clamp(16px, 4vw, 22px); letter-spacing: .02em; line-height: 1.2;
}
.hspl__list li:last-child { border-bottom: 0; }
.hspl__name { flex: 1; min-width: 0; }
.hspl__price { font-variant-numeric: tabular-nums; min-width: 4.2ch; text-align: right; color: var(--hs-teal); }
.hspl__chg { font-size: 12px; font-weight: 800; border-radius: 999px; padding: 2px 8px; letter-spacing: 0; white-space: nowrap; }
.hspl__chg.is-up { background: #e3f4e9; color: #1a7f45; }
.hspl__chg.is-down { background: #fdecea; color: #b32d2e; }
.hspl__chg.is-new { background: #fff1d6; color: #9a6410; }
.hspl__empty { text-align: center; padding: 24px 0; margin: 0; font-weight: 600; }

.hspl__foot {
	margin-top: 14px; padding: 14px 18px; border-radius: 16px; text-align: center;
	background: var(--hs-teal); color: var(--hs-gold2); font-weight: 700; line-height: 1.5; font-size: clamp(13px, 3.3vw, 16px);
	box-shadow: inset 0 0 0 2px rgba(224, 166, 74, .5);
}
.hspl__meta a { color: inherit; text-decoration: underline; }
.hspl__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; margin: 14px 0 4px; font-size: 13px; opacity: .85; }

.hspl__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 14px; }
.hspl__btn {
	display: inline-block; padding: 12px 22px; border-radius: 999px; font-weight: 800; font-size: 14px;
	text-decoration: none !important; letter-spacing: .03em; transition: transform .15s, box-shadow .15s;
}
.hspl__btn:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(31, 60, 68, .2); }
.hspl__btn.is-wa { background: #1fa855; color: #fff; }
.hspl__btn.is-call { background: var(--hs-teal); color: #fff; }
.hspl__btn.is-ghost { background: transparent; color: var(--hs-teal); border: 2px solid var(--hs-teal); padding: 10px 20px; }

@media (max-width: 480px) {
	.hspl { padding: 16px 10px 14px; border-radius: 20px; }
	.hspl__card { padding: 4px 14px; }
	.hspl__btn { flex: 1 1 100%; text-align: center; }
}

/* ---------- Header rate bar ---------- */
.hspl-tick {
	--hs-teal: #1f3c44; --hs-gold: #c9892b; --hs-gold2: #e0a64a;
	display: flex; align-items: stretch; width: 100%; background: var(--hs-teal); color: #fff;
	font-size: 14px; line-height: 1; position: relative; z-index: 1000; box-sizing: border-box;
	border-bottom: 2px solid var(--hs-gold);
}
.hspl-tick *, .hspl-tick *::before, .hspl-tick *::after { box-sizing: border-box; }
.hspl-tick__head {
	flex: 0 0 auto; display: flex; align-items: center; padding: 10px 18px; font-weight: 900;
	text-transform: uppercase; letter-spacing: .06em; font-size: 12.5px; color: var(--hs-teal);
	background: linear-gradient(180deg, var(--hs-gold2), var(--hs-gold)); white-space: nowrap;
	clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%); padding-right: 28px;
}
.hspl-tick__track { flex: 1 1 auto; min-width: 0; overflow: hidden; display: flex; align-items: center; }
.hspl-tick__inner { display: flex; width: max-content; animation: hspl-scroll 40s linear infinite; }
.hspl-tick:hover .hspl-tick__inner { animation-play-state: paused; }
.hspl-tick__set { display: flex; align-items: center; flex: 0 0 auto; }
.hspl-tick__item { padding: 10px 22px; white-space: nowrap; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; position: relative; }
.hspl-tick__item::after { content: "\2022"; position: absolute; right: -3px; color: var(--hs-gold2); }
.hspl-tick__item b { color: var(--hs-gold2); font-weight: 800; margin-left: 4px; }
.hspl-tick__item em { font-style: normal; font-size: 11px; font-weight: 800; margin-left: 4px; }
.hspl-tick__item em.is-up { color: #6fe39a; }
.hspl-tick__item em.is-down { color: #ff8f8a; }
.hspl-tick__link { flex: 0 0 auto; display: flex; align-items: center; padding: 10px 18px; color: #fff; font-weight: 700; font-size: 12.5px; text-decoration: none; border-left: 1px solid rgba(255,255,255,.2); white-space: nowrap; }
.hspl-tick__link:hover { color: var(--hs-gold2); }
@keyframes hspl-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
	.hspl-tick__inner { animation: none; }
	.hspl-tick__track { overflow-x: auto; }
	.hspl-tick__set[aria-hidden="true"] { display: none; }
}
@media (max-width: 600px) {
	.hspl-tick__head { padding: 9px 22px 9px 12px; font-size: 11px; }
	.hspl-tick__link { display: none; }
	.hspl-tick__item { padding: 9px 16px; font-size: 13px; }
}

/* ---------- Highlighted "Price List" link (topbar / menu) ---------- */
.hspl-link, a.hspl-link {
	--hs-hl: #e8590c;
	display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px; border-radius: 999px;
	background: linear-gradient(180deg, #ff8a3d, var(--hs-hl)); color: #fff !important;
	font-weight: 800; font-size: 13px; line-height: 1.2; letter-spacing: .05em; text-transform: uppercase;
	text-decoration: none !important; white-space: nowrap; vertical-align: middle;
	box-shadow: 0 0 0 0 rgba(232, 89, 12, .65); animation: hspl-pulse 2.2s infinite;
	transition: background .2s, color .2s, transform .2s;
}
.hspl-link:hover, a.hspl-link:hover { background: #fff; color: #1f3c44 !important; transform: translateY(-1px); }
.hspl-link__dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: hspl-blink 1.2s infinite; flex: 0 0 auto; }
.hspl-link:hover .hspl-link__dot { background: var(--hs-hl); }
@keyframes hspl-pulse { 0% { box-shadow: 0 0 0 0 rgba(232, 89, 12, .6); } 70% { box-shadow: 0 0 0 10px rgba(232, 89, 12, 0); } 100% { box-shadow: 0 0 0 0 rgba(232, 89, 12, 0); } }
@keyframes hspl-blink { 50% { opacity: .25; } }

/* Menu item version: add the CSS class  hs-menu-price  to a menu item (Appearance > Menus) */
.menu-item.hs-menu-price > a, li.hs-menu-price > a { color: #e8590c !important; font-weight: 800 !important; }
.menu-item.hs-menu-price > a::before, li.hs-menu-price > a::before {
	content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%;
	background: #e8590c; margin-right: 7px; vertical-align: middle; animation: hspl-blink 1.2s infinite;
}
@media (prefers-reduced-motion: reduce) {
	.hspl-link, .hspl-link__dot, .hs-menu-price > a::before { animation: none; }
}