/* Import Fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600&family=Oswald:wght@400;500;700&display=swap');

:root { 
    --rm-bg:#f4f4f4; 
    --rm-head: 'Oswald', sans-serif; 
    --rm-body: 'Montserrat', sans-serif; 
}

/* Container */
.rossa-vintage-wrapper { position:relative; background:var(--rm-bg); padding:80px 20px; font-family:var(--rm-body); overflow:hidden; }
.vintage-grain { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; opacity:0.05; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); z-index:1; }

/* Scalloped Edge */
.paper-edge { position: absolute; left: 0; width: 100%; height: 20px; z-index: 2; background-color: #111; }
.paper-edge.top { top: -1px; mask: radial-gradient(10px at 50% 100%, transparent 99%, #000 101%) 0 0/20px 100% repeat-x; -webkit-mask: radial-gradient(10px at 50% 100%, transparent 99%, #000 101%) 0 0/20px 100% repeat-x; }
.paper-edge.bottom { bottom: -1px; transform: scaleY(-1); mask: radial-gradient(10px at 50% 100%, transparent 99%, #000 101%) 0 0/20px 100% repeat-x; -webkit-mask: radial-gradient(10px at 50% 100%, transparent 99%, #000 101%) 0 0/20px 100% repeat-x; }

/* Filter Bar */
.rm-filter-bar { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 15px; max-width: 900px; margin: 0 auto 50px auto; position: relative; z-index: 5; }
.rm-filter-bar input, .rm-filter-bar select { 
    width: 100%; padding: 12px 15px; border: 1px solid #ccc; border-radius: 4px; 
    font-family: var(--rm-body); font-size: 13px; font-weight: 500; 
    background: #fff; height: 45px; box-sizing: border-box; box-shadow: 0 2px 5px rgba(0,0,0,0.05); 
}
@media(max-width: 768px) { .rm-filter-bar { grid-template-columns: 1fr; } }

/* Grid & Cards */
.merch-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:40px; margin-bottom:60px; position:relative; z-index:3; min-height:200px; }
.merch-card { width:240px; cursor:pointer; text-align:center; transition:0.3s; }
.merch-card:hover { transform:translateY(-5px); }
.img-frame img { width:100%; height:240px; object-fit:cover; filter:sepia(10%); transition:0.3s; }
.merch-card:hover .img-frame img { filter:none; }
.card-info h4 { font-family: var(--rm-head); font-size: 15px; text-transform: uppercase; margin: 12px 0 5px; color: #111; letter-spacing: 0.5px; }
.price-tag { font-family: var(--rm-head); font-size: 14px; font-weight: 500; color: #555; }
.rm-no-result { text-align:center; width:100%; padding:20px; color:#555; font-family:var(--rm-body); }
.fade-in-anim { animation: fadeIn 0.5s ease forwards; opacity:0; }
@keyframes fadeIn { from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:translateY(0)} }

/* Tape Label */
.tape-label span { background: #000; color: #fff; padding: 5px 15px; display: inline-block; transform: rotate(-2deg); margin-bottom: 40px; font-family: var(--rm-head); font-size: 20px; font-weight: 700; letter-spacing: 1px; }

/* Footer */
.merch-footer-shop { text-align:center; padding:20px 0; position:relative; z-index:3; }
.shop-from-label { font-family: var(--rm-head); font-size: 16px; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 15px; color: #555; font-weight: 700; }
.shop-btn-wrap { display:flex; justify-content:center; gap:20px; flex-wrap:wrap; }
.rm-footer-btn { padding: 12px 30px; border-radius: 50px; text-decoration: none; color: #fff; text-transform: uppercase; transition: 0.3s; min-width: 160px; font-family: var(--rm-head); font-size: 13px; font-weight: 500; letter-spacing: 1px; }
.rm-footer-btn:hover { transform:translateY(-3px); opacity:0.9; }
.f-shopee { border: 1px solid #ee4d2d; color: #ee4d2d; background: transparent; } 
.f-shopee:hover { background: #ee4d2d; color: #fff; }
.f-tokped { border: 1px solid #42b549; color: #42b549; background: transparent; }
.f-tokped:hover { background: #42b549; color: #fff; }
.rm-view-all-btn { display: inline-block; border: 1px solid #333; color: #333; padding: 10px 25px; text-decoration: none; text-transform: uppercase; transition: 0.3s; border-radius: 2px; font-family: var(--rm-head); font-size: 12px; letter-spacing: 2px; font-weight: 500; }
.rm-view-all-btn:hover { background:#333; color:#fff; }

/* Modal */
.rm-modal { display:none; position:fixed; z-index:99999; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.95); color:#eee; }
.rm-modal-content { position:relative; margin:5% auto; width:90%; max-width:850px; }
.rm-close { position:absolute; right:0; top:-40px; font-size:40px; color:#fff; cursor:pointer; }
.rm-cols { display:grid; grid-template-columns:1fr 1.2fr; gap:40px; }
.rm-col-img img { width:100%; border-radius:3px; }
.rm-col-info h2 { font-family: var(--rm-head); font-size: 28px; font-weight: 700; text-transform: uppercase; margin-bottom: 5px; color: #fff; }
#rm-price { font-family: var(--rm-head); font-size: 20px; color: #ccc; margin-bottom: 20px; display: block; }
.rm-desc-box { font-family: var(--rm-body); font-size: 14px; line-height: 1.6; color: #ddd; margin-bottom: 30px; }
.rm-avail-label { font-family: var(--rm-body); font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #aaa; margin-bottom: 10px; }
.rm-btn-group { display:flex; gap:10px; margin-top:20px; }
.rm-btn { padding: 10px 25px; border-radius: 50px; text-decoration: none; color: #fff; text-transform: uppercase; font-family: var(--rm-head); font-size: 13px; font-weight: 500; letter-spacing: 1px; }
.tokped { background:#42b549; } .shopee { background:#ee4d2d; }
@media(max-width:768px) { .rm-cols { grid-template-columns:1fr; } .rm-modal-content { margin:20% auto; } }