.rpphero { position: relative; overflow: hidden; padding: clamp(150px, 20vw, 240px) clamp(20px, 4vw, 80px) clamp(56px, 8vw, 96px); border-bottom: 2px solid #2A2724; font-family: ‘Archivo’, Helvetica, Arial, sans-serif; color: #C9C0B2; }
.rpphero-bg { position: absolute; inset: -15% 0; z-index: 0; will-change: transform; }
.rpphero-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rpphero-scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(16,15,14,0.62) 0%, rgba(16,15,14,0.4) 55%, rgba(16,15,14,0.92) 100%); }
.rpphero-inner { position: relative; z-index: 2; }
.rpphero-label { font-size: 12px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: #E4DCCE; margin-bottom: 22px; }
.rpphero-script { font-family: ‘Caveat’, cursive; font-weight: 700; font-size: clamp(26px, 3.4vw, 42px); color: #D8571F; margin-bottom: 8px; }
.rpphero-title { font-family: ‘Anton’, Impact, sans-serif; font-weight: 400; font-size: clamp(56px, 11vw, 170px); line-height: 0.84; letter-spacing: -0.02em; text-transform: uppercase; color: #F2EADA; margin: 0; }
.rpphero-title span { color: #D8571F; }
.rpphero-copy { max-width: 560px; margin-top: 24px; font-size: 19px; line-height: 1.55; color: #E4DCCE; }
@media (prefers-reduced-motion: reduce) { .rpphero-bg { transform: none !important; } }

.rpshop { position: relative; overflow: hidden; padding: clamp(60px, 9vw, 140px) clamp(20px, 4vw, 80px); font-family: ‘Archivo’, Helvetica, Arial, sans-serif; color: #C9C0B2; }
.rpshop-head { width: 100%; position: relative; z-index: 2; }
.rpshop-label { font-size: 12px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: #8B837A; margin-bottom: 22px; }
.rpshop-title { font-family: ‘Anton’, Impact, sans-serif; font-weight: 400; font-size: clamp(44px, 7vw, 96px); line-height: 0.88; letter-spacing: -0.015em; text-transform: uppercase; color: #F2EADA; margin: 0; }
.rpshop-note { margin-top: 26px; max-width: 560px; font-size: 18px; line-height: 1.55; }
.rpshop-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(24px, 3vw, 40px); position: relative; z-index: 2; }
.rpshop-chip { border: 2px solid #2A2724; background: none; color: #E4DCCE; font-family: ‘Anton’, Impact, sans-serif; font-size: 16px; letter-spacing: 0.05em; text-transform: uppercase; padding: 10px 20px; cursor: pointer; transition: border-color 0.25s, color 0.25s, background 0.25s; }
.rpshop-chip:hover { border-color: #D8571F; color: #D8571F; }
.rpshop-chip.is-active { background: #D8571F; border-color: #D8571F; color: #100F0E; }
.rpshop-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; background: #2A2724; border: 2px solid #2A2724; margin-top: clamp(32px, 5vw, 64px); position: relative; z-index: 2; }
.rpshop-card { background: #100F0E; display: flex; flex-direction: column; text-decoration: none; transition: background 0.3s; }
.rpshop-card:hover { background: #1C1A18; }
.rpshop-card.is-hidden { display: none; }
.rpshop-media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; margin: 0; }
.rpshop-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s cubic-bezier(0.16,1,0.3,1); display: block; }
.rpshop-card:hover .rpshop-media img { transform: scale(1.05); }
.rpshop-shellart { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; border: 1px dashed #4A443E; background: repeating-linear-gradient(-45deg, #151312 0 14px, #100F0E 14px 28px); }
.rpshop-shellart span { font-family: ‘Anton’, Impact, sans-serif; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: #6E6862; }
.rpshop-go { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 18px; background: #D8571F; color: #100F0E; font-family: ‘Anton’, Impact, sans-serif; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; transform: translateY(101%); transition: transform 0.35s cubic-bezier(0.16,1,0.3,1); }
.rpshop-card:hover .rpshop-go { transform: none; }
.rpshop-body { padding: 20px 18px 24px; }
.rpshop-card h3 { font-family: ‘Anton’, Impact, sans-serif; font-weight: 400; font-size: 21px; line-height: 1; text-transform: uppercase; color: #F2EADA; margin: 0 0 12px; }
.rpshop-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.rpshop-ref { font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #8B837A; }
.rpshop-price { font-weight: 600; color: #E4DCCE; }
@media (max-width: 1100px) { .rpshop-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px) { .rpshop-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .rpshop-grid { grid-template-columns: 1fr; } }

.rpcta { position: relative; overflow: hidden; padding: clamp(72px, 11vw, 150px) clamp(20px, 4vw, 80px); border-top: 2px solid #2A2724; text-align: center; }
.rpcta-script { font-family: ‘Caveat’, cursive; font-weight: 700; font-size: clamp(26px, 3.2vw, 40px); color: #D8571F; margin-bottom: 10px; position: relative; z-index: 2; }
.rpcta-title { font-family: ‘Anton’, Impact, sans-serif; font-weight: 400; font-size: clamp(48px, 8.5vw, 120px); line-height: 0.86; text-transform: uppercase; color: #F2EADA; margin: 0; position: relative; z-index: 2; }
.rpcta-btn { display: inline-flex; margin-top: 40px; font-family: ‘Anton’, Impact, sans-serif; font-size: 17px; letter-spacing: 0.05em; text-transform: uppercase; padding: 16px 30px; background: #D8571F; color: #100F0E; text-decoration: none; transition: background 0.25s, transform 0.25s; position: relative; z-index: 2; }
.rpcta-btn:hover { background: #F2EADA; color: #100F0E; transform: translateY(-2px); }