:root { --rayo-red: #E30613; --rayo-red-dark: #B8040F; --rayo-black: #121212; --rayo-gold: #D4AF37; --rayo-bg: #F8F9FA; --rayo-font-display: 'Bebas Neue', 'Impact', sans-serif; --rayo-font-body: 'Inter', -apple-system, 'Segoe UI', sans-serif; --rayo-max: 1840px; --rayo-gutter: clamp(16px, 3vw, 56px); }
.rayo-display { font-family: var(--rayo-font-display); text-transform: uppercase; letter-spacing: .04em; font-weight: 400; }
.rayo-container { max-width: var(--rayo-max); margin: 0 auto; padding: 0 var(--rayo-gutter); }
.rayo-kicker { display: block; color: var(--rayo-red); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

.rayo-catalog { background: var(--rayo-bg); padding: 64px 0; font-family: var(--rayo-font-body); }
.rayo-catalog__head { text-align: center; max-width: 672px; margin: 0 auto 32px; }
.rayo-catalog__head h2 { font-size: 2.4rem; color: var(--rayo-black); margin: 0; }
.rayo-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 32px; }
.rayo-tab { padding: 10px 20px; border: 1px solid #e5e7eb; border-radius: 999px; background: #fff; color: #374151; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: background .2s, color .2s; }
.rayo-tab:hover { background: #f3f4f6; }
.rayo-tab.is-active { background: var(--rayo-black); border-color: var(--rayo-black); color: #fff; }

.rayo-products { display: flex; gap: 24px; overflow-x: auto; padding: 8px 4px 24px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.rayo-products::-webkit-scrollbar { height: 6px; }
.rayo-products::-webkit-scrollbar-thumb { background: var(--rayo-red); border-radius: 3px; }

.rayo-product { flex: 0 0 78%; scroll-snap-align: start; display: flex; flex-direction: column; background: #fff; border: 1px solid #e5e7eb; border-radius: 1rem; overflow: hidden; box-shadow: 0 1px 3px rgba(0, 0, 0, .06); transition: box-shadow .3s; }
@media (min-width: 576px) { .rayo-product { flex-basis: calc(50% - 12px); } }
@media (min-width: 992px) { .rayo-product { flex-basis: calc(25% - 18px); } }
.rayo-product[hidden] { display: none; }
.rayo-product:hover { box-shadow: 0 20px 30px rgba(0, 0, 0, .12); }
.rayo-product.has-discount { border-color: var(--rayo-red); box-shadow: 0 8px 24px rgba(227, 6, 19, .15); }

.rayo-product__media { position: relative; display: block; height: 360px; overflow: hidden; background: #f3f4f6; }
.rayo-product__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.rayo-product:hover .rayo-product__media img { transform: scale(1.05); }
.rayo-product__badge { position: absolute; top: 12px; left: 12px; background: var(--rayo-black); color: #fff; font-size: 10px; font-weight: 800; padding: 4px 10px; border-radius: 999px; text-transform: uppercase; letter-spacing: .08em; }
.rayo-product__discount { position: absolute; top: 12px; right: 12px; z-index: 2; background: var(--rayo-red); color: #fff; font-family: var(--rayo-font-display); font-size: 1.6rem; line-height: 1; padding: 8px 14px; border-radius: .6rem; letter-spacing: .04em; box-shadow: 0 6px 14px rgba(227, 6, 19, .45); transform: rotate(3deg); }

.rayo-product__body { display: flex; flex: 1; flex-direction: column; justify-content: space-between; gap: 16px; padding: 20px; }
.rayo-product__name { margin: 0; font-family: var(--rayo-font-body); font-size: .9rem; font-weight: 700; letter-spacing: 0; text-transform: none; }
.rayo-product__name a { color: #111827; transition: color .2s; }
.rayo-product:hover .rayo-product__name a { color: var(--rayo-red); }
.rayo-product__price { margin: 4px 0 0; font-family: var(--rayo-font-display); font-size: 1.4rem; color: var(--rayo-black); }
.rayo-product__price.is-offer { color: var(--rayo-red); font-size: 1.8rem; }
.rayo-product__old { margin-left: 8px; font-size: 1rem; color: #9ca3af; text-decoration: line-through; }


.rayo-product__add { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px; border-radius: .75rem; background: var(--rayo-black); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; transition: background .3s; }
.rayo-product__add:hover { background: var(--rayo-red); color: #fff; }

html, body { overflow-x: clip; }
.rayo-catalog { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: 0; }