/**
 * Theme Name:     Woostify Child
 * Author:         Woostify
 * Template:       woostify
 * Text Domain:	   woostify-child
 * Description:    Woostify is fast, lightweight, responsive and super flexible WooCommerce theme built with SEO, speed, and usability in mind. The theme works great with any of your favorite page builder likes Elementor, Beaver Builder, SiteOrigin, Thrive Architect, Divi, etc. Therefore, you can build any type of websites like shop, business agencies, corporate, portfolio, education, university portal, consulting, church, restaurant, medical and so on. Woostify is compatible with all well-coded plugins, including major ones like WooCommerce, OrbitFox, Yoast, BuddyPress, bbPress, etc. Learn more about the theme and ready to import demo sites at https://woostify.com
 */
.elementor-flip-box__back{
	background-color: #0000007a !important;
}
.cuscat.category-slider-section {
    padding: 20px;
}

.cuscat .categorySwiper { width: 100%; }

.cuscat .category-card { display: block; text-decoration: none; }

.cuscat .category-image {
    position: relative;
    height: 350px;
    border-radius: 14px;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    transition: 0.4s;
    display: flex;
    align-items: center;      /* vertical center */
    justify-content: center;  /* horizontal center */
}

.cuscat .overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.35);
    transition: 0.4s;
}

.cuscat .category-title {
    position: relative;      /* remove absolute positioning */
    text-align: center;
    color: #fff;
    font-size: 42px;
    font-weight: 500;
    font-family: "Playfair Display", serif;
    z-index: 2;
}

.cuscat .category-image:hover { transform: scale(1.03); }
.cuscat .category-image:hover .overlay { background: rgba(0,0,0,0.55); }

@media(max-width:1024px){.cuscat .category-image{ height:300px; } .cuscat .category-title{ font-size:32px; } }

@media(max-width:768px){.cuscat .category-slider-section{ padding:30px; } .cuscat .category-image{ height:250px; } .cuscat .category-title{ font-size:26px; } }

//rug
.rg-pro-outer { font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; margin: 20px 0; background: #fff; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.rg-pro-tabs-nav { display: flex; gap: 4px; background: #f8f9fa; border-bottom: 1px solid #e9ecef; padding: 0 12px; }
.rg-pro-nav-btn { padding: 12px 20px; background: none; border: none; font-weight: 600; color: #6c757d; cursor: pointer; border-bottom: 2px solid transparent; }
.rg-pro-nav-btn.active { color: #8b1a1a; border-bottom-color: #8b1a1a; }
.rg-pro-panel { display: none; padding: 20px; }
.rg-pro-panel.active { display: block; }
.rg-canvas-stage { position: relative; background: #f0ede8; border-radius: 12px; overflow: hidden; }
.rg-canvas-2d { display: block; width: 100%; height: auto; touch-action: none; }
.rg-top-bar { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; justify-content: space-between; z-index: 10; }
.rg-room-selector { background: rgba(255,255,255,0.9); backdrop-filter: blur(8px); padding: 6px 16px; border-radius: 40px; display: flex; align-items: center; gap: 10px; font-weight: 500; }
.rg-room-dropdown { border: none; background: transparent; font-weight: 600; color: #8b1a1a; cursor: pointer; }
.rg-hide-show { background: rgba(255,255,255,0.9); border: none; border-radius: 40px; padding: 6px 16px; font-weight: 500; cursor: pointer; }
.rg-carousel-wrapper { position: absolute; bottom: 80px; left: 12px; right: 12px; display: flex; align-items: center; gap: 8px; z-index: 10; background: rgba(0,0,0,0.5); backdrop-filter: blur(8px); border-radius: 60px; padding: 8px 12px; }
.rg-carousel { display: flex; gap: 10px; overflow-x: auto; scroll-behavior: smooth; flex: 1; }
.rg-carousel img { width: 80px; height: 70px; object-fit: cover; border-radius: 8px; border: 2px solid transparent; cursor: pointer; }
.rg-carousel img.active { border-color: #8b1a1a; }
.rg-carousel-nav { background: white; border: none; border-radius: 50%; width: 32px; height: 32px; cursor: pointer; font-weight: bold; }
.rg-rugs-bar { position: absolute; bottom: 12px; left: 12px; right: 12px; background: rgba(255,255,255,0.9); backdrop-filter: blur(8px); border-radius: 40px; padding: 6px 16px; display: flex; align-items: center; gap: 12px; z-index: 10; }
.rg-rugs-thumbs { display: flex; gap: 8px; overflow-x: auto; }
.rg-rug-thumb { width: 60px; height: 50px; border-radius: 8px; border: 2px solid transparent; cursor: pointer; background: #fff; }
.rg-rug-thumb.active { border-color: #8b1a1a; }
.rg-rug-thumb img { width: 100%; height: 100%; object-fit: contain; }
.rg-controls-bottom { display: flex; justify-content: space-between; padding: 12px; background: #fff; border-top: 1px solid #eee; }
.rg-reset-btn, .rg-see-live { padding: 8px 24px; border-radius: 40px; font-weight: 600; cursor: pointer; border: none; }
.rg-reset-btn { background: #f1f3f5; color: #333; }
.rg-see-live { background: #8b1a1a; color: white; }
.rg-hint { text-align: center; font-size: 12px; color: #666; padding: 8px; background: #f8f9fa; }
.rg-3d-container { background: #e9ecef; border-radius: 12px; overflow: hidden; }
.rg-canvas-3d { width: 100%; height: 500px; display: block; }
.rg-3d-controls { position: absolute; bottom: 80px; right: 20px; display: flex; gap: 10px; }
.rg-3d-info { text-align: center; font-size: 12px; padding: 8px; background: #fff; }
.rg-gydence-wrapper { background: #111; border-radius: 16px; overflow: hidden; }
.rg-gydence-carousels { display: flex; gap: 24px; padding: 16px; background: rgba(0,0,0,0.6); }
.rg-gyd-carousel { display: flex; gap: 12px; overflow-x: auto; }
.rg-gyd-item { flex-shrink: 0; width: 80px; text-align: center; cursor: pointer; opacity: 0.6; transition: 0.2s; }
.rg-gyd-item.active { opacity: 1; outline: 2px solid #8b1a1a; border-radius: 8px; }
.rg-gyd-item img { width: 100%; aspect-ratio: 1/0.9; object-fit: cover; border-radius: 8px; }
.rg-gyd-scene { position: relative; }
.rg-gyd-canvas { width: 100%; aspect-ratio: 16/9; display: block; }
.rg-gyd-rotate-handle { position: absolute; bottom: 20px; left: 20px; background: rgba(0,0,0,0.6); padding: 8px; border-radius: 50%; cursor: grab; z-index: 20; }
.rg-gyd-footer { display: flex; justify-content: space-between; align-items: center; padding: 12px 20px; background: #1a1a1a; }
@media (max-width: 640px) { .rg-carousel img { width: 60px; height: 55px; } .rg-gyd-item { width: 60px; } }