for bundles (so inner script rows can be
real anchors). These zones are the anchors that link to the bundle
page itself — thumb, title and footer. */
.bndl-zone {
display: block;
text-decoration: none;
color: inherit;
}
/* When the zone also carries .cat-card-foot, keep the foot's flex
layout so the price stays on the left and View on the right. */
.bndl-zone.cat-card-foot {
display: flex;
align-items: center;
justify-content: space-between;
}
.bndl-title-zone { padding: 0; }
/* Includes block — replaces the .cat-card-desc area on a bundle card */
.bndl-includes {
display: flex;
flex-direction: column;
gap: 6px;
margin-top: 2px;
}
.bndl-includes-label {
font: 800 9.5px/1 var(--font-display);
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgb(255 255 255 / 0.4);
}
.bndl-includes-list {
list-style: none;
margin: 0; padding: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
/* Row is now an anchor that links to the included script's own page */
a.bndl-inc-row {
display: flex;
align-items: center;
gap: 9px;
padding: 5px 8px;
border-radius: 8px;
background: rgb(255 255 255 / 0.025);
border: 1px solid rgb(255 255 255 / 0.05);
text-decoration: none;
color: inherit;
transition:
background 0.2s,
border-color 0.2s,
transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.cat-card-link:hover a.bndl-inc-row {
background: rgb(194 91 214 / 0.08);
border-color: rgb(194 91 214 / 0.18);
}
/* Stronger highlight when the user hovers the row itself, signalling
that this specific row is the click target (not the whole card). */
a.bndl-inc-row:hover {
background: rgb(194 91 214 / 0.18) !important;
border-color: rgb(194 91 214 / 0.45) !important;
transform: translateX(2px);
}
a.bndl-inc-row:hover .bndl-inc-name { color: #fff; }
a.bndl-inc-row:hover .bndl-inc-chev {
color: #f0b6ff;
transform: translateX(2px);
}
.bndl-inc-thumb {
flex-shrink: 0;
width: 24px; height: 24px;
border-radius: 5px;
overflow: hidden;
background: linear-gradient(135deg, #2a1240, #14081f);
border: 1px solid rgb(255 255 255 / 0.08);
display: grid; place-items: center;
}
.bndl-inc-thumb img {
width: 100%; height: 100%;
object-fit: cover;
}
.bndl-inc-mark {
font: 800 9px/1 var(--font-display);
color: rgb(255 255 255 / 0.85);
letter-spacing: -0.01em;
}
.bndl-inc-name {
flex: 1; min-width: 0;
font: 600 12px/1.3 var(--font-display);
color: rgb(255 255 255 / 0.78);
letter-spacing: -0.005em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: color 0.2s;
}
.bndl-inc-chev {
flex-shrink: 0;
width: 12px; height: 12px;
color: rgb(255 255 255 / 0.3);
transition: color 0.2s, transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
/* ============================================================
Bundle /package page — "What's included" tab
Replaces Features/Specs/FAQ when the package is a bundle.
Reuses .cat-card-link for the included script cards so the
look is identical to /scripts.
============================================================ */
/* Count pill next to the tab label, e.g. "What's included [5]" */
.pk-tab-count {
display: inline-grid;
place-items: center;
min-width: 22px;
height: 18px;
padding: 0 6px;
margin-left: 4px;
border-radius: 999px;
background: rgb(194 91 214 / 0.18);
border: 1px solid rgb(194 91 214 / 0.4);
color: #f0b6ff;
font: 800 10px/1 var(--font-display);
letter-spacing: 0.03em;
}
.pk-tab.is-active .pk-tab-count {
background: rgb(194 91 214 / 0.28);
color: #fff;
border-color: rgb(194 91 214 / 0.6);
}
/* Compact summary bar — single row: count chip on the left, inline
savings on the right. Replaces the old big banner. */
.pk-bndl-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
flex-wrap: wrap;
padding: 10px 14px;
border-radius: 12px;
background:
linear-gradient(135deg, rgb(194 91 214 / 0.07) 0%, rgb(136 75 245 / 0.03) 100%),
linear-gradient(180deg, #120a24 0%, #0a0614 100%);
border: 1px solid rgb(194 91 214 / 0.18);
margin-bottom: 16px;
}
.pk-bndl-bar-count {
display: inline-flex;
align-items: center;
gap: 8px;
font: 600 13px/1 var(--font-display);
color: rgb(255 255 255 / 0.7);
letter-spacing: -0.005em;
}
.pk-bndl-bar-count svg {
width: 16px; height: 16px;
color: #f0b6ff;
}
.pk-bndl-bar-count strong {
color: #fff;
font-weight: 800;
}
.pk-bndl-bar-savings {
display: inline-flex;
align-items: center;
gap: 8px;
font-variant-numeric: tabular-nums;
}
.pk-bndl-bar-savings:empty { display: none; }
.pk-bndl-sav-strike {
font: 600 13px/1 var(--font-display);
color: rgb(255 255 255 / 0.45);
text-decoration: line-through;
text-decoration-thickness: 1px;
text-decoration-color: rgb(255 255 255 / 0.4);
}
.pk-bndl-sav-arrow {
font: 700 12px/1 var(--font-display);
color: rgb(255 255 255 / 0.35);
}
.pk-bndl-sav-now {
font: 800 14px/1 var(--font-display);
letter-spacing: -0.01em;
background: linear-gradient(135deg, #f0b6ff 0%, #c25bd6 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
}
.pk-bndl-sav-pill {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
border-radius: 999px;
background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
color: #fff;
font: 800 10.5px/1 var(--font-display);
letter-spacing: 0.05em;
text-transform: uppercase;
box-shadow:
0 6px 12px -6px rgb(16 185 129 / 0.45),
inset 0 1px 0 rgb(255 255 255 / 0.18);
}
.pk-bndl-sav-pct {
font-weight: 900;
}
/* Grid of included-script cards — three across on desktop */
.pk-bndl-grid {
list-style: none;
margin: 0; padding: 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}
@media (max-width: 1080px) { .pk-bndl-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .pk-bndl-grid { grid-template-columns: 1fr; } }
/* Skeleton placeholder while we wait for the cache / API */
.pk-bndl-skel {
aspect-ratio: 4 / 5;
border-radius: 18px;
background:
linear-gradient(180deg, #120a24 0%, #0a0614 100%);
border: 1px solid rgb(255 255 255 / 0.06);
position: relative;
overflow: hidden;
}
.pk-bndl-skel::after {
content: '';
position: absolute; inset: 0;
background: linear-gradient(90deg,
transparent 0%,
rgb(194 91 214 / 0.06) 50%,
transparent 100%);
animation: pk-bndl-shimmer 1.4s ease-in-out infinite;
}
@keyframes pk-bndl-shimmer {
from { transform: translateX(-100%); }
to { transform: translateX(100%); }
}
/* The .pk-bndl-card itself reuses .cat-card-link entirely; only minor
grid-context tweaks here. */
.pk-bndl-card {
height: 100%;
opacity: 0; transform: translateY(16px);
animation: cat-card-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
animation-delay: calc(var(--i, 0) * 60ms);
}
/* ============================================================
Gift card /package page — info card replacing the tabs section.
============================================================ */
.pk-gc-info {
display: flex;
flex-direction: column;
gap: 18px;
padding: 24px;
border-radius: 18px;
background:
linear-gradient(135deg, rgb(194 91 214 / 0.08) 0%, rgb(136 75 245 / 0.03) 100%),
linear-gradient(180deg, #120a24 0%, #0a0614 100%);
border: 1px solid rgb(194 91 214 / 0.18);
}
.pk-gc-info-head {
display: flex;
align-items: flex-start;
gap: 16px;
}
.pk-gc-icon {
flex-shrink: 0;
width: 44px; height: 44px;
display: grid; place-items: center;
border-radius: 12px;
background: linear-gradient(135deg, rgb(194 91 214 / 0.18) 0%, rgb(136 75 245 / 0.12) 100%);
border: 1px solid rgb(194 91 214 / 0.35);
color: #f0b6ff;
}
.pk-gc-icon svg { width: 22px; height: 22px; }
.pk-gc-info-text {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.pk-gc-info-title {
margin: 0;
font: 800 17px/1.25 var(--font-display);
letter-spacing: -0.01em;
color: #fff;
}
.pk-gc-info-lead {
margin: 0;
font-size: 13.5px;
line-height: 1.55;
color: rgb(255 255 255 / 0.65);
}
.pk-gc-info-lead strong {
color: #fff;
font-weight: 800;
}
.pk-gc-info-list {
list-style: none;
margin: 0; padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.pk-gc-info-list li {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 10px 12px;
border-radius: 10px;
background: rgb(255 255 255 / 0.025);
border: 1px solid rgb(255 255 255 / 0.05);
font-size: 13.5px;
line-height: 1.5;
color: rgb(255 255 255 / 0.78);
}
.pk-gc-info-list li strong {
color: #fff;
font-weight: 800;
margin-right: 4px;
}
.pk-gc-check {
flex-shrink: 0;
width: 16px; height: 16px;
margin-top: 2px;
padding: 2px;
border-radius: 999px;
background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
color: #fff;
box-shadow: 0 4px 10px -4px rgb(16 185 129 / 0.45);
}
@media (max-width: 560px) {
.pk-gc-info { padding: 18px; }
.pk-gc-info-head { gap: 12px; }
.pk-gc-icon { width: 38px; height: 38px; }
.pk-gc-icon svg { width: 18px; height: 18px; }
.pk-gc-info-title { font-size: 16px; }
}
/* ============================================================
Gift card hero — replaces Tebex's low-res gift card image both
on the /gift-cards listing thumb and on the /package gallery.
Pure CSS + SVG, so it scales cleanly at any size.
============================================================ */
/* ---- Listing thumb (inside .cat-card-thumb) ---- */
.cat-card-gc {
position: absolute;
inset: 0;
display: grid;
place-items: center;
padding: 14px;
background:
radial-gradient(circle at 30% 25%, rgb(194 91 214 / 0.32), transparent 55%),
radial-gradient(circle at 75% 80%, rgb(136 75 245 / 0.32), transparent 60%),
linear-gradient(135deg, #2a1240 0%, #14081f 60%, #0a0510 100%);
}
.cat-card-gc::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgb(255 255 255 / 0.04) 1px, transparent 1px),
linear-gradient(90deg, rgb(255 255 255 / 0.04) 1px, transparent 1px);
background-size: 22px 22px;
background-position: -1px -1px;
mask-image: radial-gradient(circle at center, black 10%, transparent 75%);
-webkit-mask-image: radial-gradient(circle at center, black 10%, transparent 75%);
pointer-events: none;
}
/* Original Tebex image — centered, capped to its native size so it
never upscales (which is what was making it look low-quality). */
.cat-card-gc-img {
position: relative;
z-index: 1;
width: auto !important;
height: auto !important;
max-width: min(100%, 70%);
max-height: 80%;
object-fit: contain !important;
filter: drop-shadow(0 8px 18px rgb(0 0 0 / 0.45));
/* Stop the .cat-card-thumb img scale-on-hover transform from upscaling
the small image (it currently has transform: scale(1.06)). */
transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.cat-card-link:hover .cat-card-gc-img { transform: scale(1.04); }
/* Fallback when there is NO Tebex image — show value chip + tag */
.cat-card-gc-fallback {
display: flex;
flex-direction: column;
gap: 6px;
text-align: center;
}
.cat-card-gc-value {
position: relative;
z-index: 1;
font: 900 32px/1 var(--font-display);
letter-spacing: -0.03em;
background: linear-gradient(135deg, #fff 0%, #f0b6ff 60%, #c25bd6 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
font-variant-numeric: tabular-nums;
}
.cat-card-gc-tag {
position: relative;
z-index: 1;
align-self: center;
padding: 3px 10px;
border-radius: 999px;
background: rgb(0 0 0 / 0.4);
border: 1px solid rgb(194 91 214 / 0.4);
color: #f0b6ff;
font: 800 9.5px/1 var(--font-display);
letter-spacing: 0.12em;
text-transform: uppercase;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
/* ---- Package page stage (the gallery) ----
Same idea: keep the Tebex image at its native size, centered on the
brand backdrop. Override the existing .pk-stage / .pk-frame img rules
that fill the whole frame. */
.pk-stage-gc {
background:
radial-gradient(circle at 25% 20%, rgb(194 91 214 / 0.40), transparent 55%),
radial-gradient(circle at 80% 80%, rgb(136 75 245 / 0.40), transparent 60%),
linear-gradient(135deg, #2a1240 0%, #14081f 60%, #0a0510 100%) !important;
overflow: hidden;
}
.pk-stage-gc::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgb(255 255 255 / 0.05) 1px, transparent 1px),
linear-gradient(90deg, rgb(255 255 255 / 0.05) 1px, transparent 1px);
background-size: 36px 36px;
background-position: -1px -1px;
mask-image: radial-gradient(circle at center, black 5%, transparent 70%);
-webkit-mask-image: radial-gradient(circle at center, black 5%, transparent 70%);
pointer-events: none;
z-index: 1;
}
.pk-stage-gc .pk-frame {
background: transparent !important;
display: grid !important;
place-items: center !important;
padding: 24px;
}
.pk-stage-gc .pk-frame img {
position: relative !important;
z-index: 2 !important;
width: auto !important;
height: auto !important;
max-width: min(70%, 360px) !important;
max-height: 80% !important;
object-fit: contain !important;
border-radius: 16px;
filter: drop-shadow(0 16px 36px rgb(0 0 0 / 0.55));
}
@media (max-width: 560px) {
.cat-card-gc-value { font-size: 26px; }
.pk-stage-gc .pk-frame img { max-width: 60% !important; }
}
/* Empty state */
.cat-empty {
max-width: 420px; margin: 40px auto 60px;
padding: 40px 24px;
text-align: center;
border-radius: 18px;
background: rgb(255 255 255 / 0.02);
border: 1px dashed rgb(255 255 255 / 0.12);
color: #fff;
}
.cat-empty-glyph {
width: 60px; height: 60px; margin: 0 auto 16px;
display: grid; place-items: center;
border-radius: 999px;
background: rgb(194 91 214 / 0.12);
color: #f0b6ff;
}
.cat-empty-glyph svg { width: 28px; height: 28px; }
.cat-empty h3 {
margin: 0 0 6px;
font: 800 18px/1.2 var(--font-display);
}
.cat-empty p {
margin: 0 0 18px;
font-size: 13.5px;
color: rgb(255 255 255 / 0.5);
}
.cat-empty-reset {
padding: 10px 20px;
border: none;
border-radius: 999px;
background: linear-gradient(135deg, #c25bd6 0%, #884bf5 100%);
color: #fff;
font: 700 12px/1 var(--font-display); letter-spacing: 0.06em;
cursor: pointer;
transition: filter 0.2s, transform 0.2s;
}
.cat-empty-reset:hover { filter: brightness(1.08); transform: translateY(-1px); }
/* ---------- Bottom CTA ---------- */
.cat-cta {
position: relative;
width: 100vw; margin: 0 calc(50% - 50vw);
padding: clamp(60px, 8vh, 96px) clamp(24px, 5vw, 72px);
overflow: hidden;
background:
radial-gradient(60% 60% at 50% 100%, rgb(136 75 245 / 0.18) 0%, transparent 70%),
#060310;
border-top: 1px solid rgb(255 255 255 / 0.05);
text-align: center;
color: #fff;
}
.cat-cta-inner { max-width: 560px; margin: 0 auto; }
.cat-cta h2 {
margin: 0 0 10px;
font: 900 clamp(28px, 3.4vw, 40px)/1.1 var(--font-display);
letter-spacing: -0.025em;
}
.cat-cta p {
margin: 0 0 26px;
font-size: 15px; line-height: 1.55;
color: rgb(255 255 255 / 0.6);
}
.cat-cta-btn {
display: inline-flex; align-items: center; gap: 10px;
padding: 14px 26px;
border-radius: 999px;
background: linear-gradient(135deg, #5865F2 0%, #4752c4 100%);
color: #fff;
font: 700 14px/1 var(--font-display);
letter-spacing: 0.02em;
text-decoration: none;
box-shadow: 0 12px 28px -10px rgb(88 101 242 / 0.6);
transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), filter 0.2s, box-shadow 0.25s;
}
.cat-cta-btn svg { width: 20px; height: 20px; }
.cat-cta-btn:hover {
transform: translateY(-2px);
filter: brightness(1.08);
box-shadow: 0 18px 40px -12px rgb(88 101 242 / 0.75);
}
/* ============================================================
CUSTOM SORT DROPDOWN (replaces native