/** * Dekorum Shop Styles v2.4 * Estilo basado en la referencia de Dekorum (fondo claro, tarjetas, sidebar de filtros) * * v1: estructura inicial * v2.0: sidebar y main en cajas blancas * v2.1-v2.3: intentos varios de uniformizar con cart (max-widths distintos) * * v2.4 (FIX REAL — verificado por DevTools sobre el cart): * - El fondo gris-beige del sitio es #F1EFEB y viene aplicado al * GLOBALMENTE (Customizer/Kit Elementor), NO al CSS de cart. Por eso * el cart y la tienda lo heredan automáticamente sin pintar nada. * - Container .dk-container completamente transparente — .site-main del * tema padre (Hello Elementor) define max-width: 1140px y centrado en * desktop (escalonado a 800/600/500/100% en breakpoints menores). * - --dk-bg-page actualizado de #f6f6f6 a #F1EFEB para coincidir con * el fondo real del sitio. */ /* ===================================================== VARIABLES (mismas que dekorum-cart-checkout.css) ===================================================== */ :root { --dk-primary: #1a1a1a; --dk-primary-hover: #444; --dk-accent: #E73D1E; --dk-accent-hover: #c12f15; --dk-bg-page: #F1EFEB; /* fondo real del body del sitio (igual al cart) */ --dk-text: #212529; --dk-border: #ccc; --dk-border-light: #eee; --dk-shadow: 0 0 20px rgba(0, 0, 0, .08); } /* ===================================================== LAYOUT GENERAL — delegar 100% al .site-main del tema padre ===================================================== */ /* El fondo gris-beige (#F1EFEB) ya viene aplicado al globalmente por el sitio (Customizer / Kit Elementor). No lo aplicamos nosotros, solo lo declaramos como --dk-bg-page para reutilizarlo en cajas internas. */ .dekorum-shop { padding: 50px 0 85px; } /* Container interno transparente — .site-main del tema padre define max-width: 1140px en desktop (con escalado responsive) y centrado. Si metemos cualquier max-width/margin/padding aquí, rompemos el wrapping del tema y la tienda se desalinea respecto al cart. */ .dekorum-shop .dk-container { max-width: 1140px; width: 100%; box-sizing: border-box; margin: 0 auto; padding: 0 15px; } @media (max-width: 1199px) { .dekorum-shop .dk-container { max-width: 960px; } } @media (max-width: 991px) { .dekorum-shop .dk-container { max-width: 800px; padding: 0 20px; } } @media (max-width: 767px) { .dekorum-shop .dk-container { max-width: 600px; padding: 0 20px; } } @media (max-width: 575px) { .dekorum-shop .dk-container { max-width: 100%; padding: 0 10px; } } /* Wrapper del título (idéntico a .dk-page-container del cart) */ .dekorum-shop .page-title-wrapper { margin: 0 0 30px; padding: 0; border-bottom: 0; } /* Título de página (idéntico a .dk-page-title del cart) */ .dekorum-shop .page-title { color: var(--dk-text); font-size: 40px; font-weight: 600; margin: 0; padding: 0; line-height: 1.2; letter-spacing: -0.3px; text-transform: none; font-family: Poppins, sans-serif; } .dk-shop-layout { display: grid; grid-template-columns: 280px 1fr; gap: 24px; align-items: start; } /* Evitar scroll horizontal fantasma — mismo patrón que cart/checkout */ body.woocommerce.archive, body.post-type-archive-product, body.tax-product_cat, body.tax-marca_product, body.tax-aplicacion_product, body.tax-componente_product, body.tax-composicion_product, body.tax-tipodematerial_product { overflow-x: hidden; } body.woocommerce.archive .site-main, body.woocommerce.archive main, body.post-type-archive-product .site-main, body.post-type-archive-product main { overflow-x: hidden; max-width: 100%; } /* Ocultar título nativo del tema en archives — usamos el nuestro custom */ .post-type-archive-product .page-header, .post-type-archive-product h1.entry-title, .post-type-archive-product .elementor-page-title, .tax-product_cat .page-header, .tax-product_cat h1.entry-title, .tax-product_cat .elementor-page-title, .tax-marca_product .page-header, .tax-marca_product h1.entry-title, .tax-marca_product .elementor-page-title { display: none !important; } /* ===================================================== SIDEBAR DE FILTROS — caja blanca estilo cart ===================================================== */ .dk-filter-sidebar { background: transparent; } .filter-sidebar-content { background: #fff; border: 0; border-radius: 10px; box-shadow: var(--dk-shadow); padding: 25px; position: sticky; top: 100px; } /* Título alineado al patrón de bloques principales del checkout (.woocommerce-billing-fields h3 / #order_review_heading): 17.6px, 0.3px letter-spacing, uppercase, border gris fino */ .filter-title { display: block; color: var(--dk-text); font-size: 17.6px; font-weight: 700; margin: 0 0 18px; padding: 0 0 18px; border-bottom: 1px solid var(--dk-border); text-transform: uppercase; letter-spacing: 0.3px; line-height: 1.3; } .filter-item { border-bottom: 1px solid var(--dk-border-light); padding: 12px 0; } .filter-item:last-child { border-bottom: none; padding-bottom: 0; } .filter-item-title { display: flex; justify-content: space-between; align-items: center; cursor: pointer; font-size: 15px; font-weight: 600; color: var(--dk-text); padding: 4px 0; user-select: none; } .filter-item-title:hover { color: var(--dk-primary); } .filter-icon { font-size: 18px; font-weight: 400; color: #888; transition: transform 0.2s; } .filter-item-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } .filter-item.open .filter-item-content { max-height: 500px; overflow-y: auto; padding-top: 10px; } .filter-options { list-style: none; margin: 0; padding: 0; } .filter-options li { margin: 6px 0; } .filter-options .dk-filter-link { display: flex; align-items: center; gap: 8px; text-decoration: none; color: #555; font-size: 14px; padding: 4px 0; transition: color 0.15s; } .filter-options .dk-filter-link:hover { color: #000; } .filter-options .dk-filter-link input[type="checkbox"] { margin: 0; width: 16px; height: 16px; cursor: pointer; accent-color: #1a1a1a; } /* ===================================================== MAIN: TOOLBAR + GRID — caja blanca estilo cart ===================================================== */ .dk-shop-main { background: #fff; border-radius: 10px; box-shadow: var(--dk-shadow); padding: 25px; } .catalog-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; margin-bottom: 25px; padding-bottom: 18px; border-bottom: 1px solid var(--dk-border); } .filters-current-wrapper { flex: 1; min-width: 0; } .filters-current-wrapper:empty { flex: 0; } .filters-current { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .filters-current .items { display: flex; gap: 8px; flex-wrap: wrap; } .filters-current .item { display: inline-flex; align-items: center; gap: 6px; background: #f5f5f5; border: 1px solid #ddd; border-radius: 20px; padding: 4px 12px; font-size: 13px; color: #333; } .filters-current .item a { color: #666; text-decoration: none; font-weight: 700; line-height: 1; } .filters-current .item a:hover { color: #000; } .filters-current .clear-all { color: #666; text-decoration: underline; font-size: 13px; } .filters-current .clear-all:hover { color: #000; } .sort-wrapper { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .sort-wrapper label { font-size: 14px; color: #666; margin: 0; white-space: nowrap; } .dekorum-sort-select { padding: 8px 32px 8px 12px; border: 1px solid #ddd; border-radius: 4px; background-color: #fff; font-size: 14px; color: #333; cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%23666' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; transition: border-color 0.2s; } .dekorum-sort-select:hover, .dekorum-sort-select:focus { border-color: #1a1a1a; outline: none; } /* ===================================================== GRID DE PRODUCTOS ===================================================== */ .products-ajax-wrapper { transition: opacity 0.2s; } .products-grid .product-items { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .product-loop-item { list-style: none; } /* ===================================================== PRODUCT CARD ===================================================== */ .dk-product-item { background: #f8f6f0; border-radius: 8px; overflow: hidden; transition: transform 0.2s, box-shadow 0.2s; height: 100%; display: flex; flex-direction: column; } .dk-product-item:hover { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(0,0,0,0.08); } .dk-product-content { display: flex; flex-direction: column; height: 100%; } .dk-product-photo { position: relative; background: #fff; padding: 30px 20px; text-align: center; overflow: hidden; } .dk-product-photo a { display: block; } .dk-product-image { max-width: 100%; height: auto; max-height: 220px; object-fit: contain; transition: transform 0.3s; } .dk-product-item:hover .dk-product-image { transform: scale(1.05); } .dk-label-container { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; gap: 5px; z-index: 2; } .dk-category-label { background: rgba(0,0,0,0.7); color: #fff; padding: 4px 10px; font-size: 11px; border-radius: 3px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; } .dk-product-label-new { background: #e74c3c; color: #fff; padding: 4px 10px; font-size: 11px; border-radius: 3px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .dk-product-details { padding: 16px 20px 20px; flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; } .dk-product-name, a.dk-product-name { display: block; font-size: 14px; font-weight: 600; color: #152433 !important; text-decoration: none; line-height: 1.4; min-height: 40px; } .dk-product-name:hover, a.dk-product-name:hover { color: #E73D1E !important; } .dk-product-price { font-size: 16px; font-weight: 700; color: #1a1a1a; margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(0,0,0,0.08); } .dk-product-price .woocommerce-Price-amount { color: #1a1a1a; } .dk-product-price del { color: #999; margin-right: 8px; font-size: 14px; } .dk-product-price ins { text-decoration: none; color: #e74c3c; } /* ===================================================== PAGINACIÓN ===================================================== */ .pagination-wrapper { margin-top: 40px; text-align: center; } .ajax-pagination { display: inline-flex; gap: 6px; align-items: center; } .ajax-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 10px; background: #fff; border: 1px solid #ddd; color: #333; text-decoration: none; font-size: 14px; border-radius: 4px; transition: all 0.15s; } .ajax-pagination .page-numbers:hover { background: #1a1a1a; color: #fff; border-color: #1a1a1a; } .ajax-pagination .page-numbers.current { background: #1a1a1a; color: #fff; border-color: #1a1a1a; font-weight: 600; } .ajax-pagination .page-numbers.dots { border: none; background: transparent; cursor: default; } .ajax-pagination .page-numbers.dots:hover { background: transparent; color: #333; } /* ===================================================== ALERTAS / VACÍO ===================================================== */ .woocommerce-alert { padding: 40px; text-align: center; background: #f8f6f0; border-radius: 8px; color: #666; font-size: 16px; } /* ===================================================== RESPONSIVE ===================================================== */ @media (max-width: 991px) { .dk-shop-layout { grid-template-columns: 1fr; } .filter-sidebar-content { position: static; } .products-grid .product-items { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .filter-sidebar-content, .dk-shop-main { padding: 20px; } } @media (max-width: 575px) { .products-grid .product-items { grid-template-columns: 1fr; } .catalog-toolbar { flex-direction: column; align-items: stretch; } .sort-wrapper { justify-content: flex-end; } .dekorum-shop .page-title { font-size: 24px; } } /* ===================================================== FILTRO MÓVIL — Drawer lateral estilo Ikeda ===================================================== */ /* Botón flotante — solo visible en móvil */ .dk-filter-toggle { display: none; } /* Overlay */ .dk-filter-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 998; } .dk-filter-overlay.active { display: block; } /* Botón cerrar dentro del drawer */ .dk-filter-close { display: none; } @media (max-width: 768px) { /* Botón flotante */ .dk-filter-toggle { display: flex; align-items: center; gap: 8px; position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 997; background: #E73D1E; color: #fff; border: none; border-radius: 50px; padding: 12px 24px; font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: 0 4px 16px rgba(231,61,30,0.4); white-space: nowrap; } .dk-filter-toggle:hover { background: #c12f15; } /* Sidebar — drawer desde la izquierda */ .dk-filter-sidebar { position: fixed !important; top: 0; left: 0; height: 100%; width: 0; overflow: hidden; z-index: 999; transition: width 0.3s ease; background: #fff; box-shadow: none; border-radius: 0 !important; padding: 0 !important; } .dk-filter-sidebar.open { width: 300px; overflow-y: auto; box-shadow: 4px 0 20px rgba(0,0,0,0.15); } .filter-sidebar-content { padding: 60px 20px 20px !important; min-width: 280px; } /* Botón cerrar */ .dk-filter-close { display: flex; position: absolute; top: 14px; right: 14px; background: transparent; border: none; font-size: 20px; color: #152433; cursor: pointer; padding: 4px 8px; z-index: 2; } .dk-filter-close:hover { color: #E73D1E; } /* Ocultar el sidebar del layout normal en móvil */ .dk-shop-layout { grid-template-columns: 1fr !important; } }