.custom-listing {
     --bg: #ffffff;
     --ink: #0f1224;
     --muted: #6b7280;
     --chip: #f3f4f6;
     --chip-ink: #334155;
     --accent: #7c3aed;
     --accent-2: #ff3b65;
     --good: #16a34a;
     --hot: #ef4444;
     --edge: #e9eef5;
     --shadow: 0 10px 28px rgba(16, 24, 40, .08);
     --radius: 18px
 }

 .custom-listing.custom-listing-grid {
     display: grid;
     gap: 18px;
     grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
     padding: 8px;
     background: linear-gradient(180deg, #fafbff, transparent);
     color: var(--ink)
 }

 .custom-listing .custom-listing-card {
     position: relative;
     display: grid;
     grid-template-columns: 1fr auto;
     gap: 0;
     background: var(--bg);
     border-radius: var(--radius);
     box-shadow: var(--shadow);
     overflow: hidden;
     isolation: isolate;
     border: 1px solid #eef2f7
 }

 .custom-listing .custom-listing-card::after {
     content: "";
     position: absolute;
     inset: 0 auto 0 0;
     width: 6px;
     background: linear-gradient(180deg, var(--accent), var(--accent-2))
 }

 .custom-listing .custom-listing-card-sold::after {
     content: "";
     position: absolute;
     inset: 0 auto 0 0;
     width: 6px;
     background: linear-gradient(180deg, black, silver, black)
 }

 .custom-listing .custom-listing-card-discount {
     position: relative;
     display: grid;
     grid-template-columns: 1fr auto;
     gap: 0;
     background: var(--bg);
     border-radius: var(--radius);
     box-shadow: var(--shadow);
     overflow: hidden;
     isolation: isolate;
     border: 2px solid green
 }

 .custom-listing .custom-listing-card-discount::after {
     content: "";
     position: absolute;
     inset: 0 auto 0 0;
     width: 6px ;
     background: linear-gradient(180deg, green, rgb(141, 211, 141), green)
 }

 .custom-listing .custom-listing-card-bestviewed {
     position: relative;
     display: grid;
     grid-template-columns: 1fr auto;
     gap: 0;
     background: var(--bg);
     border-radius: var(--radius);
     box-shadow: var(--shadow);
     overflow: hidden;
     isolation: isolate;
     border: 2px solid #FF3838
 }

 .custom-listing .custom-listing-card-bestviewed::after {
     content: "";
     position: absolute;
     inset: 0 auto 0 0;
     width: 6px ;
     background: linear-gradient(180deg, #FF3838, #efadad, #FF3838)
 }

 .custom-listing .custom-listing-badges {
     position: absolute;
     top: 8px;
     left: 12px;
     display: flex;
     gap: 8px;
     z-index: 2;
     transform: scale(0.95);
 }

 .custom-listing .custom-listing-badge {
     font: 600 11px/1.9em inherit;
     padding: 2px 8px;
     border-radius: 999px;
     background: var(--chip);
     color: var(--chip-ink);
     border: 1px solid #e5e7eb;
     box-shadow: 0 2px 6px rgba(2, 6, 23, .06)
 }

 .custom-listing .custom-listing-badge--deal {
     background: #ecfdf5;
     color: var(--good);
     border-color: #d1fae5
 }

 .custom-listing .custom-listing-badge--hot {
     background: #fef2f2;
     color: var(--hot);
     border-color: #fee2e2
 }

 .custom-listing .custom-listing-badge--new {
     background: #eef2ff;
     color: #4338ca;
     border-color: #e0e7ff
 }

 .custom-listing .custom-listing-left {
     padding: 22px 14px 10px 18px
 }

 .custom-listing .custom-listing-title {
     margin: 12px 0 3px;
     font-weight: 800;
     letter-spacing: .2px;
     font-size: 16px;
     line-height: 1.3;
 }

 .custom-listing .custom-listing-venue {
     margin: 0 0 8px;
     color: var(--muted);
     font-weight: 500;
     font-size: 13px;
 }

 .custom-listing .custom-listing-meta {
     flex-wrap: wrap;
     display: flex;
     gap: 8px;
     width: 100%
 }

 .custom-listing .custom-listing-chip {
     background: var(--chip);
     color: var(--chip-ink);
     border: 1px solid #e5e7eb;
     border-radius: 999px;
     padding: 3px 6px;
     font-size: 10px;
     font-weight: 600
 }

 .custom-listing .custom-listing-perforation {
     position: absolute;
     right: 180px;
     top: 0;
     bottom: 0;
     width: 24px;
     display: flex;
     flex-direction: column;
     justify-content: space-evenly;
     align-items: center
 }

 .custom-listing .custom-listing-perforation i {
     width: 8px;
     height: 8px;
     border-radius: 50%;
     background: var(--edge);
     box-shadow: inset 0 1px 0 #fff, 0 0 0 4px #fff
 }
 .custom-listing .custom-listing-perforation-saled {
     position: absolute;
     right: 180px;
     top: 0;
     bottom: 0;
     width: 24px;
     display: flex;
     flex-direction: column;
     justify-content: space-evenly;
     align-items: center
 }

 .custom-listing .custom-listing-perforation-saled i {
     width: 8px;
     height: 8px;
     border-radius: 50%;
     background-color: white;
     /* box-shadow: inset 0 1px 0 #cccccc50, 0 0 0 4px #cccccc50 */
 }

 .custom-listing .custom-listing-right {
     width: 160px;
     padding: 10px;
     display: flex;
     flex-direction: column;
     gap: 8px;
     background: radial-gradient(120px 120px at 30% -10%, #ffffff66, transparent 60%), linear-gradient(135deg, #f7f8ff 0%, #f1f5ff 100%);
     border-left: 1px dashed #dde3ee
 }

 .custom-listing .custom-listing-price {
     display: flex;
     flex-direction: column;
     gap: 2px
 }

 .custom-listing .custom-listing-price-eur {
     font-weight: 700;
     color: var(--accent);
     font-size: 11px
 }

 .custom-listing .custom-listing-price-try {
     font-weight: 900;
     font-size: 16px;
     line-height: 1.1
 }

 .custom-listing .custom-listing-price-try small {
     font-weight: 700;
     font-size: .7em;
     color: var(--muted)
 }

 .custom-listing .custom-listing-hint {
     color: #6b7280;
     font-size: 10px
 }

 .custom-listing .custom-listing-cta-discount {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     border: 0;
     border-radius: 8px;
     padding: 8px 6px;
     cursor: pointer;
     color: #fff;
     font-weight: 800;
     letter-spacing: .2px;
     box-shadow: 0 10px 20px green;
     transition: transform .12s ease, box-shadow .2s ease;
     font-size: 0.85em;
 }

 .custom-listing .custom-listing-cta {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     border: 0;
     border-radius: 8px;
     padding: 8px 6px;
     cursor: pointer;
     color: #fff;
     font-weight: 800;
     letter-spacing: .2px;
     box-shadow: 0 10px 20px rgba(221, 0, 0, .25);
     transition: transform .12s ease, box-shadow .2s ease;
     font-size: 0.85em;
 }

 .custom-listing .custom-listing-cta-sold {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     border: 0;
     border-radius: 8px;
     padding: 8px 6px;
     cursor: not-allowed;
     color: #fff;
     font-weight: 800;
     letter-spacing: .2px;
     box-shadow: 0 10px 20px rgba(132, 128, 128, 0.25);
     transition: transform .12s ease, box-shadow .2s ease;
     font-size: 0.85em;
 }

 .custom-listing .custom-listing-cta:hover {
     transform: translateY(-2px);
     box-shadow: 0 12px 24px rgba(221, 0, 0, .25)
 }

 .custom-listing .custom-listing-cta:active {
     transform: translateY(0)
 }

 .custom-listing .custom-listing-cta svg {
     width: 18px;
     height: 18px;
     stroke: #fff;
     fill: none;
     stroke-width: 2
 }

 .custom-listing .custom-listing-like {
     position: absolute;
     right: 14px;
     top: 14px
 }

 .custom-listing .custom-listing-like input {
     position: absolute;
     opacity: 0;
     inset: 0
 }

 .custom-listing .custom-listing-like span {
     width: 26px;
     height: 26px;
     border-radius: 999px;
     display: grid;
     place-items: center;
     background: #ffffffcc;
     border: 1px solid #e5e7eb;
     backdrop-filter: saturate(140%) blur(4px);
     box-shadow: 0 6px 14px rgba(2, 6, 23, .08);
     cursor: pointer
 }

 .custom-listing .custom-listing-like span::before {
     content: "";
     width: 13px;
     height: 13px;
     transform: rotate(-45deg);
     border-radius: 4px 4px 0 0;
     background: #d1d5db;
     box-shadow: 12px 0 0 #d1d5db;
     display: block;
     clip-path: polygon(0 35%, 50% 0, 100% 35%, 50% 100%)
 }

 .custom-listing .custom-listing-like input:checked+span::before {
     background: var(--hot);
     box-shadow: 12px 0 0 var(--hot)
 }

 .custom-listing .custom-listing-like input:checked+span {
     border-color: #fecaca;
     background: #fff5f5
 }

 .custom-listing .custom-listing-card:hover {
     box-shadow: 0 16px 36px rgba(16, 24, 40, .12)
 }

 .custom-listing .custom-listing-card:hover .custom-listing-title {
     text-decoration: underline;
     text-decoration-thickness: 2px;
     text-underline-offset: 3px
 }

 @media (max-width:520px) {
     .custom-listing .custom-listing-meta {
         display: none
     }

     .custom-listing .custom-listing-card {
         grid-template-columns: 1fr
     }

     .custom-listing .custom-listing-right {
         flex-direction: row;
         justify-content: space-between;
         align-items: center;
         padding: 4px 10px 4px 10px;
         width: auto;
         border-left: none;
         border-top: 1px dashed #dde3ee;
         font-size: 0.8em;
         gap: 6px;
     }

     .custom-listing .custom-listing-perforation {
         display: none
     }
     .custom-listing .custom-listing-perforation-saled {
         display: none
     }

     .custom-listing .custom-listing-left {
         padding: 24px 8px 8px 12px
     }

     .custom-listing .custom-listing-badges {
         top: 6px;
         left: 10px;
         transform: scale(0.9);
     }

     .custom-listing .custom-listing-title {
         margin: 12px 0 3px;
         font-size: 13px;
         line-height: 1.25;
     }

     .custom-listing .custom-listing-venue {
         font-size: 11px;
     }

     .custom-listing .custom-listing-chip {
         font-size: 8px;
         padding: 1px 4px;
     }

     .custom-listing .custom-listing-price-try {
         font-size: 12px;
     }

     .custom-listing .custom-listing-price-eur {
         font-size: 8px;
     }

     .custom-listing .custom-listing-price {
         gap: 1px;
     }

     .custom-listing .custom-listing-cta,
     .custom-listing .custom-listing-cta-discount,
     .custom-listing .custom-listing-cta-sold {
         font-size: 0.7em;
         padding: 3px 5px;
         border-radius: 5px;
         white-space: nowrap;
     }
 }