:root { --bg-primary: #151617; --bg-secondary: #303134; --bg-card: #303134; --bg-hover: #3c4043; --bg-label: #525252; --text-label: #f3c96b; --text-primary: #e8eaed; --primary_hover: #ea7106; --text-secondary: #9aa0a6; --text-link: #e2a15b; --border-color: #5f6368; --accent-blue: #ce9252; --star-gold: #f5c518; --success-green: #cfea9f; --success-red: #e49292; --gallery-bg: #fff; } [data-theme="light"] { --bg-primary: #D8D2BF; --bg-secondary: #ffffff; --bg-card: #f5f1eb; --bg-hover: #fff5e4; --bg-label: #69665f; --text-label: #fff; --text-primary: #271910; --primary_hover: #ea7106; --text-secondary: #5f6368; --text-link: #824100; --border-color: #dadce0; --accent-blue: #ec8c2a; --star-gold: #f5c518; --success-green: #137333; --success-red: #9e2509; --gallery-bg: #ffffff; } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Roboto', 'Google Sans', Arial, sans-serif; background-color: var(--bg-primary); color: var(--text-primary); line-height: 1.5; padding: 10px; } .container { max-width: 1800px; margin: 0 auto; display: flex; gap: 0; } .main-content { flex: 1; min-width: 0; padding-right: 20px; } /* Sidebar Panel - Always Visible */ .sidebar-panel { position: sticky; top: 0; width: 420px; flex-shrink: 0; height: 100vh; background: var(--bg-secondary); overflow-y: auto; border-left: 1px solid var(--border-color); border-radius: 15px 15px 0 0; } .sidebar-empty { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--text-secondary); font-size: 14px; padding: 40px; text-align: center; } .sidebar-btn { width: 36px; height: 36px; border-radius: 50%; background: var(--bg-hover); border: none; color: var(--text-primary); font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; } .sidebar-btn:hover { background: var(--border-color); } .sidebar-btn svg { width: 18px; height: 18px; fill: currentColor; } .sidebar-close-mobile { display: none; position: absolute; top: 12px; right: 12px; z-index: 20; } .sidebar-overlay { display: none; } .sidebar-content { display: none; position: relative; } .sidebar-content.active { display: block; border-radius: 15px 15px 0 0; } /* Image Gallery */ .gallery-section { background: var(--gallery-bg); padding: 14px; border-radius: 15px 15px 0 0; } .gallery-main { width: calc(100% + 20px); margin-left: -10px; border-radius: 9px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; position: relative; overflow: clip; max-height: 380px; } .gallery-main div { max-width: 100%; display: flex; object-fit: contain; aspect-ratio: 1; justify-content: center; } .gallery-main div img { max-width: 100%; max-height: 100%; object-fit: contain; } .gallery-source { position: absolute; bottom: 8px; right: 8px; background: var(--bg-primary); color: var(--text-secondary); padding: 4px 10px; border-radius: 4px; font-size: 11px; cursor: pointer; text-decoration: none; } .gallery-thumbs { display: flex; gap: 8px; overflow-x: auto; padding: 4px; background: #423f3c54; border-radius: 9px; -ms-overflow-style: none; scrollbar-width: none; width: 100%; } .gallery-thumbs::-webkit-scrollbar { display: none; } .gallery-thumb { width: 56px; height: 56px; border-radius: 8px; border: 2px solid #bebebe; background: #fff; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; transition: .15s; } .gallery-thumb.active { border-color: #000; } .gallery-thumb:hover { border-color: #000; } .gallery-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; } /* Gallery Navigation */ .gallery-nav-wrapper { position: relative; display: flex; align-items: center; } .gallery-nav-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 50%; background: var(--bg-primary); border: 1px solid var(--border-color); color: var(--text-primary); cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 10; opacity: 0; transition: opacity 0.2s, background 0.2s; box-shadow: 0 2px 6px rgba(0,0,0,0.3); } .gallery-nav-btn.visible { opacity: 1; } .gallery-nav-btn:hover { background: var(--bg-hover); } .gallery-nav-btn:disabled { opacity: 0 !important; cursor: default; z-index: -10; } .gallery-nav-btn svg { width: 16px; height: 16px; fill: currentColor; } .gallery-nav-prev { left: -4px; } .gallery-nav-next { right: -4px; } /* Product Info Section */ .product-info-section { padding: 10px 20px; } .sidebar-title { font-size: 22px; font-weight: 400; line-height: 1.4; margin-bottom: 8px; color: var(--text-primary); } .sidebar-rating { display: none; } /* Highlights Section */ .highlights-section { padding: 0 20px 10px; margin-bottom: 10px; border-bottom: 1px solid var(--border-color); } .highlights-list { margin: 0; padding-left: 20px; font-size: 14px; color: var(--text-primary); line-height: 1.8; } .highlights-list li { margin-bottom: 2px; } /* About Section */ .about-section { padding: 0 20px 20px; border-bottom: 1px solid var(--border-color); } .about-title { font-size: 19px; font-weight: 500; margin-bottom: 5px; color: var(--text-primary); } .about-text { font-size: 14px; color: var(--text-primary); line-height: 1.4; } .about-text.collapsed { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .about-toggle { display: flex; align-items: center; gap: 4px; background: none; border: none; color: var(--text-link); font-size: 14px; cursor: pointer; padding: 8px 0 0; } .about-toggle:hover { text-decoration: underline; } .about-toggle svg { width: 16px; height: 16px; transition: transform 0.2s; } .about-toggle.expanded svg { transform: rotate(180deg); } /* Specs Table */ .specs-section { padding: 20px; } .specs-table { width: 100%; border-collapse: collapse; } .specs-table tr { border-bottom: 1px solid var(--border-color); } .specs-table tr:last-child { border-bottom: none; } .specs-table td { padding: 1px 0; font-size: 14px; vertical-align: top; } .specs-table td:first-child { color: var(--text-secondary); width: 40%; padding-right: 16px; } .specs-table td:last-child { color: var(--text-primary); } /* Action Buttons */ .action-section { padding: 20px; border-top: 1px solid var(--border-color); position: sticky; bottom: 0; background: var(--bg-secondary); } .sidebar-price { font-size: 24px; font-weight: 500; margin-bottom: 4px; } .sidebar-avail { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--success-green); margin-bottom: 16px; } .sidebar-avail::before { content: ''; width: 8px; height: 8px; background: var(--success-green); border-radius: 50%; } .btn-primary.in { display: block; } .btn-primary { display: none; width: 100%; padding: 14px 24px; background: var(--accent-blue); color: #202124; text-decoration: none; border-radius: 4px; font-weight: 500; font-size: 14px; text-align: center; border: none; cursor: pointer; } #start_estimate{ text-decoration: navajowhite; background: var(--accent-blue); padding: 5px 9px; border-radius: 4px; font-size: 14px; color: #202124; white-space: nowrap; } .btn-primary:hover, #start_estimate:hover { background: var(--primary_hover); } /* Header & Filters */ .header { margin-bottom: 24px; } .header h1 { font-family: 'Google Sans', Arial, sans-serif; font-size: 24px; font-weight: 400; color: var(--text-primary); display: flex; align-items: top; gap: 10px; margin: 5px auto -5px 0; flex-wrap: wrap; } h1 a { cursor: pointer; } .filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 4px 12px; background: var(--bg-secondary); border-radius: 8px; margin-bottom: 8px; max-width: calc(100% - 70px); } .filter-group { display: flex; align-items: center; gap: 8px; } .filter-group label { font-size: 14px; color: var(--text-secondary); font-weight: 500; } .filter-group select { padding: 8px 12px; border-radius: 4px; border: 1px solid var(--border-color); background: var(--bg-primary); color: var(--text-primary); font-size: 14px; cursor: pointer; min-width: 120px; } .filter-group select:hover { border-color: var(--accent-blue); } .filter-group select:focus { outline: none; border-color: var(--accent-blue); } .btn-apply { padding: 10px 24px; background: var(--accent-blue); color: #202124; border: none; border-radius: 4px; font-size: 14px; font-weight: 500; cursor: pointer; transition: background 0.2s; } .btn-apply:hover { background: var(--primary_hover); } .theme-toggle { padding: 10px 16px; background: var(--bg-hover); color: var(--text-primary); border: 1px solid var(--border-color); border-radius: 4px; font-size: 14px; cursor: pointer; display: flex; align-items: center; gap: 6px; margin: 6px 0; } .theme-toggle:hover { background: var(--border-color); } .theme-toggle svg { width: 18px; height: 18px; fill: currentColor; } .feed-url { font-size: 12px; color: var(--text-secondary); padding: 5px 10px 0 0; border-radius: 0 0 8px 8px; margin-top: -8px; word-break: break-all; text-align: right; } .feed-url a { color: var(--text-link); text-decoration: none; } .feed-url a:hover { text-decoration: underline; } /* Stats bar */ .stats-bar { display: none; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--border-color); margin-bottom: 20px; } .stats-bar .count { font-size: 14px; color: var(--text-secondary); } .stats-bar .count strong { color: var(--text-primary); } /* Product Grid */ .product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(166px, 1fr)); gap: 6px; } /* Product Card - Google Shopping Style */ .product-card { background: var(--bg-card); border-radius: 16px; overflow: hidden; transition: box-shadow 0.2s, transform 0.2s; cursor: pointer; border: 0px; position: relative; overflow: hidden; } .product-image img { position: relative; z-index: 1; background: var(--bg-card); } .product-image .stage { z-index: 0; } .product-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.15); border-color: var(--border-color); transform: translateY(-2px); } [data-theme="light"] .product-card { box-shadow: 0 1px 3px rgba(0,0,0,0.1); border: 1px solid var(--border-color); } [data-theme="light"] .product-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.15); } .product-card.selected { border-color: var(--accent-blue); box-shadow: 0 0 0 1px var(--accent-blue); } .product-image { position: relative; width: 100%; padding-bottom: 100%; background: var(--gallery-bg); display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 15px; } .product-image img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 100%; max-height: 100%; object-fit: contain; } .product-badge { position: absolute; bottom: 8px; right: 8px; background: rgba(32, 33, 36, 0.9); color: var(--text-primary); padding: 4px 8px; border-radius: 4px; font-size: 11px; font-weight: 500; } .product-content { padding: 12px 16px 16px; } .product-title { font-size: 14px; font-weight: 500; color: var(--text-primary); margin-bottom: 4px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .product-brand { font-size: 12px; color: var(--text-secondary); margin-bottom: 8px; } .product-price { font-size: 18px; font-weight: 500; color: var(--text-primary); margin-bottom: 4px; } .product-shipping { font-size: 12px; color: var(--text-secondary); } /* Size/Variant badge */ .product-size { display: inline-block; background: var(--bg-label); color: var(--text-label); padding: 4px 8px; border-radius: 4px; font-size: 17px; margin-top: 4px; } /* Availability indicator */ .availability { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--success-green); margin-top: 4px; } #sidebarAvail { margin: 0 0 8px; } .in_stock { color: var(--success-green); } .availability.red, .out_of_stock { color: var(--success-red); } .availability::before { content: ''; width: 6px; height: 6px; background: var(--success-green); border-radius: 50%; margin-bottom: auto; margin-top: 5px; } .availability.red::before { background: var(--success-red); } /* Category Pills */ .category-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; } .category-pill { padding: 6px 12px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 20px; font-size: 13px; color: var(--text-secondary); cursor: pointer; transition: all 0.2s; text-decoration: none; } .category-pill:hover { border-color: var(--accent-blue); color: var(--accent-blue); } .category-pill.active { background: var(--accent-blue); border-color: var(--accent-blue); color: #202124; } .category-pill .count { margin-left: 4px; opacity: 0.7; } .generating_xml { padding: 35px; margin: 20px auto; display: flex; align-items: center; justify-content: center; } /* Loading */ .loading { text-align: center; padding: 60px 20px; color: var(--text-secondary); } /* Empty State */ .empty-state { text-align: center; padding: 60px 20px; color: var(--text-secondary); } .empty-state svg { width: 64px; height: 64px; margin-bottom: 16px; opacity: 0.5; } /* Responsive */ @media (max-width: 1024px) { .container { flex-direction: column; } .sidebar-panel { position: fixed; top: 0; right: -420px; width: 420px; max-width: 90vw; height: 100vh; z-index: 1001; transition: right 0.3s ease; box-shadow: -4px 0 20px rgba(0,0,0,0.5); border-radius: 15px 15px 0 0; } .sidebar-panel.active { right: 0; } .sidebar-empty { display: none; } .sidebar-close-mobile { display: flex; } .sidebar-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 1000; } .sidebar-overlay.active { display: block; } .main-content { padding-right: 0; } } @media (max-width: 768px) { .filters { flex-direction: column; align-items: stretch; } .filter-group { justify-content: space-between; } .filter-group select { flex: 1; } .product-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } .sidebar-panel { width: 100%; max-width: 100vw; right: -100%; } .gallery-main { height: 389px; max-width: 389px; margin: auto; } } .image-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.9); z-index: 2000; justify-content: center; align-items: center; cursor: zoom-out; } .image-overlay.active { display: flex; } .image-overlay img { max-width: 95vw; max-height: 95vh; object-fit: contain; } .overlay-close { position: absolute; top: 20px; right: 30px; font-size: 40px; color: #fff; background: none; border: none; cursor: pointer; opacity: 0.7; } .overlay-close:hover { opacity: 1; } .feed-url { display:none; background: var(--bg-secondary); border-radius: 5px; padding: 3px; gap: 5px; border: 2px solid #979694; padding: 3px 8px; line-height: 1.1; align-items: center; } /* Gallery main loader */ .gallery-main div { position: relative; } .gallery-main .stage { position: absolute; top: 25%; left: 50%; transform: translate(-50%, -50%); z-index: 0; } .gallery-main img { position: relative; z-index: 1; background: var(--gallery-bg); } /* Thumbnail loader */ .gallery-thumb { position: relative; } .gallery-thumb .stage { position: absolute; top: 25%; left: 50%; transform: translate(-50%, -50%) scale(0.5); z-index: 0; } .gallery-thumb img { position: relative; z-index: 1; background: #fff; } .dot-pulse{position:relative;left:-9999px;width:10px;height:10px;border-radius:5px;background:#fea104;color:#fea104;box-shadow:9999px 0 0 -5px;-webkit-animation:dot-pulse 1.5s infinite linear;animation:dot-pulse 1.5s infinite linear;-webkit-animation-delay:0.25s;animation-delay:0.25s;} .dot-pulse::before, .dot-pulse::after{content:"";display:inline-block;position:absolute;top:0;width:10px;height:10px;border-radius:5px;background:#fea104;color:#fea104;} .dot-pulse::before{box-shadow:9984px 0 0 -5px;-webkit-animation:dot-pulse-before 1.5s infinite linear;animation:dot-pulse-before 1.5s infinite linear;-webkit-animation-delay:0s;animation-delay:0s;} .dot-pulse::after{box-shadow:10014px 0 0 -5px;-webkit-animation:dot-pulse-after 1.5s infinite linear;animation:dot-pulse-after 1.5s infinite linear;-webkit-animation-delay:0.5s;animation-delay:0.5s;} @-webkit-keyframes dot-pulse-before{ 0%{box-shadow:9984px 0 0 -5px;} 30%{box-shadow:9984px 0 0 2px;} 60%, 100%{box-shadow:9984px 0 0 -5px;} } @keyframes dot-pulse-before{ 0%{box-shadow:9984px 0 0 -5px;} 30%{box-shadow:9984px 0 0 2px;} 60%, 100%{box-shadow:9984px 0 0 -5px;} } @-webkit-keyframes dot-pulse{ 0%{box-shadow:9999px 0 0 -5px;} 30%{box-shadow:9999px 0 0 2px;} 60%, 100%{box-shadow:9999px 0 0 -5px;} } @keyframes dot-pulse{ 0%{box-shadow:9999px 0 0 -5px;} 30%{box-shadow:9999px 0 0 2px;} 60%, 100%{box-shadow:9999px 0 0 -5px;} } @-webkit-keyframes dot-pulse-after{ 0%{box-shadow:10014px 0 0 -5px;} 30%{box-shadow:10014px 0 0 2px;} 60%, 100%{box-shadow:10014px 0 0 -5px;} } @keyframes dot-pulse-after{ 0%{box-shadow:10014px 0 0 -5px;} 30%{box-shadow:10014px 0 0 2px;} 60%, 100%{box-shadow:10014px 0 0 -5px;} } .stage {display: flex;justify-content: center;align-items: center;position: absolute;border-radius: 14px;padding-top: 100%;} /* Gallery main loader */ .gallery-main > div { max-width: 100%; min-height: 300px; display: flex; object-fit: contain; aspect-ratio: 1; justify-content: center; align-items: center; position: relative; } .gallery-main > div > .stage { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 0; padding-top: 0; width: auto; height: auto; } .gallery-main > div > img { position: relative; z-index: 1; max-width: 100%; max-height: 100%; object-fit: contain; } .btn-primary.out_of_stock { display: none; }