/* * This is a manifest file that'll be compiled into application.css. * * With Propshaft, assets are served efficiently without preprocessing steps. You can still include * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard * cascading order, meaning styles declared later in the document or manifest will override earlier ones, * depending on specificity. * * Consider organizing styles into separate files for maintainability. */ * { box-sizing: border-box; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: #1a1a1a; background: #fafafa; } a { color: inherit; text-decoration: none; } .products-page, .product-page, .stores-page { max-width: 1200px; margin: 0 auto; padding: 24px 20px 64px; } .products-page h1, .stores-page h1 { margin-bottom: 24px; } .site-header { background-image: url("/assets/header-texture-fc4e2821.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center; border-bottom: 1px solid #e2d5c3; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); } .site-header__inner { max-width: 1200px; margin: 0 auto; padding: 12px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .site-header__brand { display: flex; align-items: center; } .site-header__logo { height: 52px; width: auto; display: block; } .site-nav { display: flex; gap: 16px; font-size: 0.9rem; } .site-nav a { color: #6b4a2f; } .site-nav a:hover { color: #4a3220; } @media (max-width: 600px) { .site-header__inner { padding: 10px 20px; gap: 10px; } .site-header__logo { height: 36px; } } .product-search { margin-bottom: 24px; } .product-search__input { width: 100%; max-width: 400px; min-width: 0; padding: 10px 14px; font-size: 0.95rem; border: 1px solid #e5e5e5; border-radius: 8px; outline: none; } .product-search__input:focus { border-color: #999; } .product-search__empty { color: #777; } /* --------------------------------------------------------------------------- Barra de filtros de categorías: en escritorio, columna fija a la izquierda siempre desplegada; en mobile, el mismo panel se convierte en un drawer deslizante abierto por el botón "Filtros" (ver .filters-open en , filter_drawer_controller.js — mismo patrón que .wishlist-open/.wishlist-drawer). El listado de checkboxes (_category_filters partial) vive una sola vez en el DOM; .products-filter-form y .products-results son display:contents para que sus hijos entren directo como celdas de esta grilla, sin importar el orden real en el documento. Paleta café/crema, a juego con .site-header (logo + textura): reusa los mismos tonos #6b4a2f / #4a3220 / #e2d5c3 en vez de introducir colores nuevos. Puramente visual — el comportamiento (instantáneo, sin botón "aplicar", subcategorías siempre visibles) no cambia. --------------------------------------------------------------------------- */ .products-catalog { display: grid; grid-template-columns: 280px 1fr; grid-template-areas: "search search" "aside count" "aside grid"; column-gap: 32px; row-gap: 16px; align-items: start; } .products-filter-form { display: contents; } .products-results { display: contents; } .products-catalog .product-search { grid-area: search; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; min-width: 0; margin-bottom: 0; } .products-page__count { grid-area: count; margin: 0 0 8px; color: #666; font-size: 0.9rem; } .products-catalog .product-grid, .products-catalog .product-search__empty { grid-area: grid; } .filters-toggle { display: none; flex-shrink: 0; white-space: nowrap; align-items: center; gap: 8px; padding: 8px 16px; font: inherit; font-size: 0.9rem; color: #6b4a2f; background: #fff; border: 1px solid #e2d5c3; border-radius: 999px; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; } .filters-toggle:hover { background: #faf6f0; border-color: #d8c3a5; } .products-catalog .wishlist-toggle { flex-shrink: 0; white-space: nowrap; margin-left: auto; } .category-filters { grid-area: aside; align-self: start; position: sticky; top: 20px; max-height: calc(100vh - 40px); overflow-y: auto; background: #faf6f0; border: 1px solid #e2d5c3; border-radius: 8px; padding: 16px; } .category-filters__header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid #e2d5c3; } .category-filters__title { margin: 0; margin-right: auto; font-family: Georgia, "Times New Roman", serif; font-size: 1.3rem; color: #4a3220; } .category-filters__clear { flex-shrink: 0; padding: 6px 12px; font-size: 0.85rem; color: #6b4a2f; background: #f0e6d8; border: 1px solid #e2d5c3; border-radius: 20px; cursor: pointer; } .category-filters__clear:hover { background: #e2d5c3; color: #4a3220; } .category-filters__close { display: none; width: 32px; height: 32px; align-items: center; justify-content: center; font-size: 1.3rem; line-height: 1; color: #6b4a2f; background: #f0e6d8; border: 0; border-radius: 50%; cursor: pointer; } .category-filters__close:hover { background: #e2d5c3; color: #4a3220; } .filter-overlay { display: none; } /* Todo grupo top-level (con o sin subcategorías, incluida "Sin categoría") comparte el mismo estilo de "card": borde + fondo blanco, como en la imagen de referencia. Solo los grupos con subcategorías suman el chevron y el .category-filter__subgroup interno. */ .category-filter__group { margin-bottom: 10px; } .category-filter__group--boxed { background: #fff; border: 1px solid #e2d5c3; border-radius: 8px; padding: 4px 12px; } .category-filter__option { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: 0.9rem; color: #4a3220; cursor: pointer; } /* Fila del grupo boxed: checkbox+nombre a la izquierda, chevron de expandir/contraer a la derecha. */ .category-filter__row { display: flex; align-items: center; gap: 4px; border-bottom: 1px solid #f0e6d8; } /* Sin subcategorías debajo (nada de qué separarse): la fila es el único hijo de la card y no necesita línea divisoria. */ .category-filter__group--boxed > .category-filter__row:only-child { border-bottom: 0; } .category-filter__row > .category-filter__option { flex: 1; min-width: 0; } .category-filter__chevron { flex-shrink: 0; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; color: #6b4a2f; background: transparent; border: 0; border-radius: 50%; cursor: pointer; transition: transform 0.15s ease, background 0.15s ease; } .category-filter__chevron:hover { background: #f0e6d8; } .category-filter__chevron[aria-expanded="false"] { transform: rotate(-90deg); } .category-filter__subgroup { margin-left: 4px; margin-top: 4px; padding-left: 18px; border-left: 1px solid #f0e6d8; } .category-filter__option--sub { font-size: 0.85rem; color: #6b5642; } .category-filter__label { flex: 1; } /* Checkbox cuadrado dibujado en CSS puro: sin íconos ni SVG externos, solo appearance:none + un check en ::before cuando está :checked. */ .category-filter__option input[type="checkbox"] { appearance: none; flex-shrink: 0; width: 18px; height: 18px; margin: 0; border: 1px solid #c9b394; border-radius: 4px; background: #fff; cursor: pointer; position: relative; transition: background 0.15s ease, border-color 0.15s ease; } .category-filter__option input[type="checkbox"]:hover { border-color: #6b4a2f; } .category-filter__option input[type="checkbox"]:checked { background: #4a3220; border-color: #4a3220; } .category-filter__option input[type="checkbox"]:checked::before { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } @media (max-width: 900px) { .products-catalog { grid-template-columns: minmax(0, 1fr); grid-template-areas: "search" "count" "grid"; } .filters-toggle { display: inline-flex; } .category-filters { position: fixed; top: 0; right: 0; height: 100%; width: min(360px, 100%); max-height: none; transform: translateX(100%); transition: transform 0.25s ease; z-index: 110; border-radius: 0; box-shadow: -8px 0 30px rgba(74, 50, 32, 0.2); } .category-filters__close { display: flex; } .filter-overlay { display: block; position: fixed; inset: 0; background: rgba(74, 50, 32, 0.4); opacity: 0; pointer-events: none; transition: opacity 0.25s ease; z-index: 105; } body.filters-open .filter-overlay { opacity: 1; pointer-events: auto; } body.filters-open .category-filters { transform: translateX(0); } body.filters-open { overflow: hidden; } /* While a swipe-to-close drag is in progress (filter_drawer_controller.js), the panel's transform is driven frame-by-frame from touch position, so the CSS transition must get out of the way — otherwise every touchmove update lags behind the finger instead of tracking it. Restored the instant the gesture ends (either snapping back or finishing the close), back to the normal transition above. */ .category-filters--dragging { transition: none; } } /* Grid: paginado con Turbo Frames anidados de carga diferida (`loading="lazy"`). Cada dentro del grid se colapsa con display:contents para que solo las .product-card reales cuenten como items del CSS Grid, sin importar cuán anidadas estén dentro de la cadena de frames. */ .product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; } .product-grid turbo-frame { display: contents; } .product-card { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid #e5e5e5; border-radius: 8px; overflow: hidden; transition: box-shadow 0.15s ease, transform 0.15s ease; } .product-card--loading { display: flex; align-items: center; justify-content: center; min-height: 160px; color: #999; font-size: 0.85rem; background: #fafafa; border-style: dashed; } /* El hover se dispara desde el wrapper para que la tarjeta y su corazón (que es hermano del , no hijo) se levanten juntos. */ .product-card:hover, .product-card-wrapper:hover .product-card { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); } .product-card-wrapper { position: relative; min-width: 0; transition: transform 0.15s ease; } .product-card-wrapper:hover { transform: translateY(-2px); } /* Vista de tienda (/stores/:id/products): una sola columna con imágenes grandes, mismo mecanismo de scroll infinito que .product-grid (turbo-frame colapsado). */ .product-list { display: flex; flex-direction: column; gap: 24px; max-width: 640px; margin: 0 auto; } .product-list turbo-frame { display: contents; } .product-row { display: block; background: #fff; border: 1px solid #e5e5e5; border-radius: 8px; overflow: hidden; transition: box-shadow 0.15s ease, transform 0.15s ease; } .product-row--loading { display: flex; align-items: center; justify-content: center; min-height: 160px; color: #999; font-size: 0.85rem; background: #fafafa; border-style: dashed; } .product-row:hover, .product-row-wrapper:hover .product-row { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); } .product-row-wrapper { position: relative; transition: transform 0.15s ease; } .product-row-wrapper:hover { transform: translateY(-2px); } .product-row__image { aspect-ratio: 1 / 1; background: #f0f0f0; } .product-row__image img { width: 100%; height: 100%; object-fit: cover; display: block; } .product-row__body { padding: 16px 18px; } .product-row__title { margin: 0 0 8px; font-size: 1.05rem; font-weight: 500; } .product-row__price { margin: 0; font-weight: 600; color: #111; } .product-card__image { aspect-ratio: 1 / 1; background: #f0f0f0; } .product-card__image img { width: 100%; height: 100%; object-fit: cover; display: block; } .product-card__placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #999; font-size: 0.85rem; } .product-card__link { display: block; color: inherit; } .product-card__body { padding: 12px 14px 8px; } .product-card__title { margin: 0 0 6px; font-size: 0.95rem; line-height: 1.3; min-height: 2.6em; font-weight: 500; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .product-card__meta { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 0 14px 12px; margin-top: auto; min-height: 1.3rem; } .product-card__price { margin: 0; font-weight: 600; color: #111; line-height: 1.3; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .product-card__store { display: block; position: relative; z-index: 1; margin-bottom: 4px; font-size: 0.8rem; color: #777; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .product-card__store:hover { color: #111; text-decoration: underline; } .back-link { display: inline-block; margin-bottom: 20px; color: #555; } .store-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; } .store-card { background: #fff; border: 1px solid #e5e5e5; border-radius: 8px; padding: 16px 18px; } .store-card__header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 4px; } .store-card__name { margin: 0; font-size: 1.05rem; font-weight: 600; } .store-card__platform { flex-shrink: 0; padding: 2px 8px; border: 1px solid #e5e5e5; border-radius: 999px; background: #f5f5f5; font-size: 0.7rem; font-weight: 600; color: #666; white-space: nowrap; } .store-card__platform[data-platform="shopify"] { border-color: #cfe4c4; background: #eef5e9; color: #4a7c30; } .store-card__platform[data-platform="woocommerce"] { border-color: #ddd0ea; background: #f3ecf9; color: #7245a1; } .store-card__url { display: inline-block; margin-bottom: 16px; font-size: 0.85rem; color: #666; overflow-wrap: anywhere; } .store-card__url:hover { color: #111; text-decoration: underline; } .store-card__stats { display: flex; justify-content: space-between; gap: 12px; } .store-card__stat { margin: 0; display: flex; flex-direction: column; gap: 2px; } .store-card__stat-label { font-size: 0.75rem; color: #999; } .store-card__stat-value { font-weight: 600; } .product-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; } .product-gallery { display: flex; flex-direction: column; min-width: 0; } .product-gallery .product-card__placeholder { width: 100%; border-radius: 8px; aspect-ratio: 1 / 1; object-fit: cover; } .carousel { position: relative; } .carousel__viewport { overflow: hidden; border-radius: 8px; background: #f0f0f0; touch-action: pan-y; } .carousel__track { display: flex; } .carousel__slide { flex: 0 0 100%; min-width: 0; } .carousel__track { transition: transform 0.3s ease; } .carousel__slide img { width: 100%; display: block; border-radius: 8px; aspect-ratio: 1 / 1; object-fit: contain; } .carousel__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, 0.85); color: #111; font-size: 1.4rem; line-height: 1; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); } .carousel__nav:hover { background: #fff; } .carousel__nav--prev { left: 8px; } .carousel__nav--next { right: 8px; } .carousel__dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; } .carousel__dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: #ddd; } .carousel__dot--active { background: #555; } .product-info h1 { margin: 0 0 8px; } .product-info__meta { color: #666; margin: 0 0 12px; } .product-info__price { font-size: 1.4rem; font-weight: 700; margin: 0 0 20px; } .product-info__description { margin-bottom: 24px; line-height: 1.5; } .product-info__ai-description { margin-bottom: 24px; padding: 12px 14px; background: #f6f4ff; border-left: 3px solid #8b7cf6; border-radius: 4px; line-height: 1.5; } .product-info__ai-description-label { display: block; color: #6d5fd6; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 4px; } .product-info__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 16px; } .product-info__visit-store { display: inline-flex; align-items: center; padding: 12px 22px; font: inherit; font-size: 0.95rem; font-weight: 700; color: #fff; background: #e0245e; border: 1px solid #e0245e; border-radius: 999px; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; } .product-info__visit-store:hover { background: #c51d50; border-color: #c51d50; } .product-variants { width: 100%; border-collapse: collapse; margin-bottom: 24px; } .product-variants th, .product-variants td { text-align: left; padding: 8px 10px; border-bottom: 1px solid #eee; font-size: 0.9rem; } @media (max-width: 720px) { .product-detail { grid-template-columns: 1fr; } } @media (max-width: 600px) { .product-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } } body.modal-open { overflow: hidden; } .modal-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); display: flex; align-items: flex-start; justify-content: center; overflow-y: auto; padding: 40px 20px; z-index: 100; } .modal-dialog { position: relative; background: #fff; border-radius: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); max-width: 900px; width: 100%; max-height: 90vh; overflow-y: auto; padding: 32px; transition: transform 0.25s ease, opacity 0.25s ease; } /* While a swipe-to-close drag is in progress (modal_controller.js), the dialog's transform is driven frame-by-frame from touch position, so the CSS transition must get out of the way — otherwise every touchmove update lags behind the finger instead of tracking it. Restored the instant the gesture ends, either springing back or flying the rest of the way off screen, under the transition above. */ .modal-dialog--dragging { transition: none; } .modal-dialog__close { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; line-height: 1; color: #111; background: rgba(255, 255, 255, 0.9); border-radius: 50%; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); } .modal-dialog__close:hover { background: #fff; } @media (max-width: 720px) { .modal-dialog { padding: 24px; } .modal-dialog__close { top: 10px; right: 10px; width: 40px; height: 40px; font-size: 1.6rem; } } /* --------------------------------------------------------------------------- Wishlist (favoritos): botón en la nav, corazón en la tarjeta y panel lateral. El estado abierto vive como clase en (ver wishlist_drawer_controller). --------------------------------------------------------------------------- */ .products-page__header { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; } .products-page__header h1 { margin: 0; margin-right: auto; } .wishlist-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; font: inherit; font-size: 0.9rem; color: #e0245e; background: #fff; border: 1px solid #f0c3d1; border-radius: 999px; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; } .wishlist-toggle:hover { background: #fdeef3; border-color: #e0245e; } .wishlist-toggle:hover { color: #111; } .wishlist-toggle__count { min-width: 20px; padding: 0 6px; font-size: 0.75rem; line-height: 20px; text-align: center; color: #fff; background: #e0245e; border-radius: 10px; } .wishlist-toggle__count--empty { display: none; } /* Tarjeta: corazón sobrepuesto (hermano del , no dentro — un