.vscl-page-shell .vscl-cards.grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; margin-top:18px; } .vscl-page-shell .vscl-home-card, .vscl-page-shell .vscl-stack-card{ overflow:hidden; } .vscl-page-shell .vscl-home-media, .vscl-page-shell .vscl-stack-media{ display:block; position:relative; background:#eef2f6; color:inherit; text-decoration:none; } .vscl-page-shell .vscl-mini-carousel{ position:relative; width:100%; height:100%; min-height:100%; } .vscl-page-shell .vscl-slide{ display:none; width:100%; height:100%; } .vscl-page-shell .vscl-slide.is-active{ display:block; } .vscl-page-shell .vscl-slide img{ width:100%; height:100%; display:block; object-fit:cover; } .vscl-page-shell .vscl-stack-card{ display:grid; grid-template-columns:540px minmax(0,1fr); align-items:stretch; border-radius:16px; overflow:hidden; box-shadow:var(--vscl-shadow-lg); background:var(--vscl-surface); } .vscl-page-shell .vscl-stack-media{ position:relative; overflow:hidden; background:#eef2f6; border-radius:16px 0 0 16px; min-height:360px; height:360px; } .vscl-page-shell .vscl-stack-media, .vscl-page-shell .vscl-stack-media .vscl-slide, .vscl-page-shell .vscl-stack-media .vscl-slide img, .vscl-page-shell .vscl-stack-media .vscl-mini-carousel{ height:100%; } .vscl-page-shell .vscl-stack-body{ padding:22px 24px 20px; display:flex; flex-direction:column; justify-content:flex-start; background:var(--vscl-surface); min-width:0; } .vscl-page-shell .vscl-stack-title-row{ margin-bottom:12px; } .vscl-page-shell .vscl-stack-title-wrap{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; } .vscl-page-shell .vscl-stack-title-wrap-left{ display:flex; align-items:flex-start; gap:0; min-width:0; flex:1 1 auto; } .vscl-page-shell .vscl-brand-mini{ display:none!important; } .vscl-page-shell .vscl-stack-title-copy{ min-width:0; } .vscl-page-shell .vscl-home-body h3, .vscl-page-shell .vscl-stack-title-wrap h3{ margin:0; font-size:18px; line-height:1.24; font-weight:700; letter-spacing:-.01em; color:var(--vscl-heading); } .vscl-page-shell .vscl-home-body h3 a, .vscl-page-shell .vscl-stack-title-wrap a{ text-decoration:none; color:var(--vscl-heading); } .vscl-page-shell .vscl-condition-line{ font-size:13px; color:var(--vscl-text-soft); margin-top:6px; font-weight:600; } .vscl-page-shell .vscl-card-more{ display:inline-flex; align-items:center; justify-content:center; gap:3px; appearance:none; border:1px solid #e2e8f0; background:#fff; color:#64748b; width:34px; height:34px; border-radius:10px; cursor:pointer; flex:0 0 34px; padding:0; box-shadow:0 4px 12px rgba(15,23,42,.04); position:relative; } .vscl-page-shell .vscl-card-more span{ width:4px; height:4px; border-radius:50%; background:currentColor; display:block; } .vscl-page-shell .vscl-card-more:hover{ background:#f8fafc; } .vscl-page-shell .vscl-card-share{ position:absolute; top:42px; right:0; min-width:110px; background:#fff; border:1px solid var(--vscl-line); border-radius:10px; box-shadow:0 14px 26px rgba(15,23,42,.10); padding:8px; display:none; z-index:50; } .vscl-page-shell .vscl-card-share.is-open{ display:block; } .vscl-page-shell .vscl-card-share-btn{ width:100%; min-height:36px; border:0; background:#fff; color:var(--vscl-heading); border-radius:8px; font-size:14px; font-weight:700; cursor:pointer; } .vscl-page-shell .vscl-card-share-btn:hover{ background:#f8fafc; } .vscl-page-shell .vscl-stack-price-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:18px; } .vscl-page-shell .vscl-stack-price{ flex:1 1 auto; } .vscl-page-shell .vscl-stack-badges{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; } .vscl-page-shell .vscl-price-wrap{ display:flex; flex-direction:column; gap:4px; } .vscl-page-shell .vscl-price-old{ font-size:15px; text-decoration:line-through; color:var(--vscl-text-muted); } .vscl-page-shell .vscl-price-new{ font-size:18px; font-weight:800; color:var(--vscl-heading); letter-spacing:-.02em; line-height:1.05; } .vscl-page-shell .vscl-price-desc{ font-size:12px; color:var(--vscl-text-muted); } .vscl-page-shell .vscl-brand-small, .vscl-page-shell .vscl-brand-price-icon{ width:40px; height:40px; object-fit:contain; } .vscl-page-shell .vscl-divider-after{ padding-bottom:14px; border-bottom:1px solid var(--vscl-line); } .vscl-page-shell .vscl-divider-before{ padding-top:14px; border-top:1px solid var(--vscl-line); } .vscl-page-shell .vscl-stack-specs{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px 10px; margin-top:14px; padding-bottom:16px; border-bottom:1px solid var(--vscl-line); } .vscl-page-shell .vscl-spec-pill{ display:flex; align-items:center; gap:10px; border:1px solid #d9e2ec; border-radius:999px; padding:8px 12px 8px 8px; min-height:44px; background:#fff; color:var(--vscl-text); font-size:14px; line-height:1; font-weight:600; min-width:0; } .vscl-page-shell .vscl-spec-icon-wrap{ width:32px; height:32px; min-width:32px; min-height:32px; border-radius:999px; background:#fff; border:1px solid #d9e2ec; display:inline-flex; align-items:center; justify-content:center; } .vscl-page-shell .vscl-spec-pill img{ width:20px; height:20px; min-width:20px; min-height:20px; object-fit:contain; } .vscl-page-shell .vscl-spec-pill-copy{ display:flex; align-items:center; gap:6px; min-width:0; } .vscl-page-shell .vscl-spec-pill-copy span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .vscl-page-shell .vscl-stack-actions{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:16px; } .vscl-page-shell .vscl-stack-actions a, .vscl-page-shell .vscl-stack-actions button{ min-height:44px; border-radius:999px; font-size:14px; font-weight:700; white-space:nowrap; padding:10px 14px; justify-content:center; background:#111111!important; color:var(--vscl-danger)!important; box-shadow:none!important; border:1px solid #1f1f1f!important; } .vscl-page-shell .vscl-stack-actions a:hover, .vscl-page-shell .vscl-stack-actions button:hover{ background:#1a1a1a!important; color:var(--vscl-danger)!important; transform:none!important; } .vscl-page-shell .vscl-btn-icon{ width:14px; height:14px; margin-right:8px; object-fit:contain; opacity:.95; } .vscl-page-shell .vscl-special-badge{ position:absolute; left:14px; top:14px; background:linear-gradient(135deg,#ffb320,#ff7a00); color:#fff; padding:7px 12px; border-radius:999px; font-weight:800; font-size:12px; box-shadow:0 10px 20px rgba(255,122,0,.18); z-index:3; } .vscl-page-shell .vscl-fav{ position:absolute; right:14px; top:14px; width:40px; height:40px; border-radius:12px; border:0; background:rgba(15,23,42,.42)!important; color:#fff!important; font-size:20px; z-index:3; backdrop-filter:blur(6px); display:flex!important; align-items:center; justify-content:center; line-height:1; padding:0!important; } .vscl-page-shell .vscl-fav.is-active{ background:rgba(220,38,38,.92)!important; } .vscl-page-shell .vscl-gallery-count{ position:absolute; right:14px; bottom:18px; background:rgba(15,23,42,.36); color:#fff; padding:7px 10px; border-radius:10px; z-index:3; font-size:12px; line-height:1; backdrop-filter:blur(4px); } .vscl-page-shell .vscl-gallery-dots{ position:absolute; left:14px; right:14px; bottom:10px; display:flex; gap:6px; z-index:3; align-items:center; } .vscl-page-shell .vscl-gallery-dot{ appearance:none; border:0; height:3px; flex:1 1 0; background:rgba(255,255,255,.35); border-radius:999px; overflow:hidden; cursor:pointer; padding:0; } .vscl-page-shell .vscl-gallery-dot.is-active{ background:rgba(255,255,255,.95); } .vscl-page-shell .vscl-gallery-dot.is-more{ flex:0 0 auto; min-width:48px; height:auto; background:rgba(15,23,42,.48); color:#fff; font-size:11px; font-weight:700; border-radius:999px; padding:5px 8px; text-align:center; } .vscl-page-shell .vscl-home-body{ padding:18px 18px 20px; } .vscl-page-shell .vscl-home-title-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; } .vscl-page-shell .vscl-home-title-row h3{ flex:1 1 auto; } .vscl-page-shell .vscl-card-more-wrap{ position:relative; flex:0 0 auto; } .vscl-page-shell .vscl-stack-card{ grid-template-columns:minmax(420px,500px) minmax(0,1fr); min-height:300px; } .vscl-page-shell .vscl-stack-media{ min-height:300px; height:300px; } .vscl-page-shell .vscl-stack-body{ min-height:300px; padding:18px 22px 18px; } .vscl-page-shell .vscl-stack-title-row{ margin-bottom:8px; } .vscl-page-shell .vscl-stack-title-wrap h3{ font-size:20px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .vscl-page-shell .vscl-condition-line{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .vscl-page-shell .vscl-card-more{ background:#fff; border:1px solid var(--vscl-line); box-shadow:none; } .vscl-page-shell .vscl-card-share{ top:calc(100% + 8px); right:0; min-width:146px; padding:6px; } .vscl-page-shell .vscl-card-share-btn{ min-height:38px; font-size:13px; } .vscl-page-shell .vscl-stack-price-row{ align-items:center; gap:12px; } .vscl-page-shell .vscl-price-new{ font-size:22px; } .vscl-page-shell .vscl-divider-after{ padding-bottom:10px; } .vscl-page-shell .vscl-divider-before{ padding-top:12px; } .vscl-page-shell .vscl-stack-specs{ margin-top:10px; padding-bottom:12px; gap:10px 10px; } .vscl-page-shell .vscl-spec-pill{ min-height:40px; padding:8px 12px; border-radius:999px; background:#fff; border:1px solid #d4d7dd; } .vscl-page-shell .vscl-spec-icon-wrap{ width:36px; height:36px; min-width:36px; min-height:36px; border:0; background:transparent; } .vscl-page-shell .vscl-spec-pill img{ width:24px; height:24px; min-width:24px; min-height:24px; } .vscl-page-shell .vscl-stack-actions{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; align-items:stretch; } .vscl-page-shell .vscl-stack-actions a, .vscl-page-shell .vscl-stack-actions button{ min-height:42px; height:42px; border-radius:999px; font-size:13px; padding:8px 16px; display:inline-flex; align-items:center; justify-content:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .vscl-page-shell .vscl-btn-icon{ width:16px; height:16px; min-width:16px; min-height:16px; margin-right:8px; display:inline-flex; align-items:center; justify-content:center; color:currentColor; } .vscl-page-shell .vscl-btn-icon svg{ width:16px; height:16px; display:block; } .vscl-page-shell .vscl-gallery-count{ background:rgba(15,23,42,.24); border:1px solid rgba(255,255,255,.18); } .vscl-page-shell .vscl-gallery-dots{ right:74px; bottom:14px; } .vscl-page-shell .vscl-gallery-dot{ height:4px; background:rgba(255,255,255,.28); } .vscl-page-shell .vscl-gallery-dot.is-active{ background:rgba(255,255,255,.94); } .vscl-page-shell .vscl-gallery-dot.is-more{ cursor:pointer; } .vscl-page-shell .vscl-home-price{ display:flex; align-items:center; justify-content:space-between; gap:10px; } /* v8 custom refinements */ .vscl-page-shell .vscl-stack-card{ grid-template-columns:420px minmax(0,1fr); } .vscl-page-shell .vscl-stack-media{ min-height:350px; height:350px; } .vscl-page-shell .vscl-stack-title-wrap h3 a, .vscl-page-shell .vscl-condition-line, .vscl-page-shell .vscl-spec-pill-value{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; } .vscl-page-shell .vscl-stack-specs{ grid-template-columns:repeat(3,minmax(0,1fr)); } .vscl-page-shell .vscl-gallery-count{ bottom:26px; right:14px; z-index:4; } .vscl-page-shell .vscl-gallery-dots{ left:0; right:0; bottom:0; transform:none; width:100%; padding:0 10px 10px; z-index:3; } .vscl-page-shell .vscl-gallery-dot{ flex:1 1 0; width:auto; border-radius:999px; height:4px; } .vscl-page-shell .vscl-gallery-more-overlay{ position:absolute; inset:0; display:none; align-items:center; justify-content:center; flex-direction:column; gap:8px; background:rgba(15,23,42,.28); color:#fff; text-decoration:none; z-index:2; text-align:center; } .vscl-page-shell .vscl-mini-carousel.is-showing-more .vscl-gallery-more-overlay{ display:flex; } .vscl-page-shell .vscl-gallery-more-icon{ font-size:34px; line-height:1; } .vscl-page-shell .vscl-gallery-more-text{ font-size:16px; font-weight:700; } /* v9 refinements */ .vscl-page-shell .vscl-mini-carousel{ display:block; overflow:hidden; } .vscl-page-shell .vscl-slide{ position:absolute; inset:0; } .vscl-page-shell .vscl-slide.is-active{ display:block; } .vscl-page-shell .vscl-stack-media{ min-width:0; } .vscl-page-shell .vscl-stack-specs{ display:flex; flex-wrap:wrap; gap:10px; } .vscl-page-shell .vscl-spec-pill{ flex:0 1 auto; width:auto; max-width:100%; min-height:38px; padding:6px 12px 6px 8px; } .vscl-page-shell .vscl-spec-pill-copy, .vscl-page-shell .vscl-spec-pill-copy span, .vscl-page-shell .vscl-spec-pill-value{ width:auto; max-width:100%; } .vscl-page-shell .vscl-spec-pill-copy span, .vscl-page-shell .vscl-spec-pill-value{ white-space:nowrap; } .vscl-page-shell .vscl-spec-icon-wrap{ width:28px; height:28px; min-width:28px; min-height:28px; } .vscl-page-shell .vscl-spec-pill img{ width:20px; height:20px; min-width:20px; min-height:20px; } /* v10 thinner adaptive card pills */ .vscl-page-shell .vscl-stack-specs{ display:flex; flex-wrap:wrap; gap:8px; } .vscl-page-shell .vscl-spec-pill{ flex:0 0 auto; width:auto; max-width:100%; min-height:34px; padding:5px 12px 5px 8px; gap:8px; border-radius:999px; } .vscl-page-shell .vscl-spec-icon-wrap{ width:24px; height:24px; min-width:24px; min-height:24px; } .vscl-page-shell .vscl-spec-pill img{ width:18px; height:18px; min-width:18px; min-height:18px; } .vscl-page-shell .vscl-spec-pill-copy, .vscl-page-shell .vscl-spec-pill-value{ width:auto; max-width:100%; } .vscl-page-shell .vscl-spec-pill-value{ font-size:13px; line-height:1; } .vscl-page-shell .vscl-stack-actions a, .vscl-page-shell .vscl-stack-actions button{ background:#111111!important; color:#d61f2c!important; border:1px solid #1f1f1f!important; box-shadow:none!important; } .vscl-page-shell .vscl-stack-actions a:hover, .vscl-page-shell .vscl-stack-actions button:hover{ background:#1a1a1a!important; color:#d61f2c!important; } /* v11 stronger typography + larger list spacing */ .vscl-page-shell .vscl-cards.stack{ display:grid; gap:26px; } .vscl-page-shell .vscl-stack-title-wrap h3, .vscl-page-shell .vscl-stack-title-wrap h3 a{ font-size:20px; line-height:1.2; } .vscl-page-shell .vscl-condition-line{ font-size:15px; } .vscl-page-shell .vscl-price-new{ font-size:20px; } .vscl-page-shell .vscl-spec-pill{ min-height:36px; padding:6px 12px 6px 8px; gap:8px; } .vscl-page-shell .vscl-spec-pill-value{ font-size:15px; line-height:1; } .vscl-page-shell .vscl-spec-icon-wrap{ width:22px; height:22px; min-width:22px; min-height:22px; } .vscl-page-shell .vscl-spec-pill img{ width:17px; height:17px; min-width:17px; min-height:17px; } .vscl-page-shell .vscl-stack-actions a, .vscl-page-shell .vscl-stack-actions button{ font-size:15px; } /* v12 adaptive specs + softer copy + share icon */ .vscl-page-shell .vscl-stack-specs{display:flex;flex-wrap:wrap;gap:10px;} .vscl-page-shell .vscl-spec-pill{flex:0 0 auto;width:auto;max-width:100%;min-height:38px;padding:7px 12px 7px 9px;gap:8px;font-size:15px;font-weight:500;color:#667085;font-family:Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;} .vscl-page-shell .vscl-spec-icon-wrap{width:22px;height:22px;min-width:22px;min-height:22px;} .vscl-page-shell .vscl-spec-pill img{width:18px;height:18px;min-width:18px;min-height:18px;} .vscl-page-shell .vscl-spec-pill-copy,.vscl-page-shell .vscl-spec-pill-copy span,.vscl-page-shell .vscl-spec-pill-value{color:#667085;font-family:Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;} .vscl-page-shell .vscl-card-share-btn{display:inline-flex;align-items:center;justify-content:flex-start;gap:8px;} .vscl-page-shell .vscl-card-share-btn-icon{width:16px;height:16px;min-width:16px;min-height:16px;display:inline-flex;align-items:center;justify-content:center;color:#d61f2c;} .vscl-page-shell .vscl-card-share-btn-icon svg{width:16px;height:16px;display:block;} /* v13 cleaner card typography + tighter specs + share menu */ .vscl-page-shell .vscl-home-body h3, .vscl-page-shell .vscl-stack-title-wrap h3{font-size:19px;line-height:1.22;font-weight:600;letter-spacing:-.015em;color:#1f2937;} .vscl-page-shell .vscl-condition-line{font-size:14px;color:#64748b;font-weight:600;} .vscl-page-shell .vscl-price-old{font-size:16px;} .vscl-page-shell .vscl-price-new{font-size:20px;color:#111827;} .vscl-page-shell .vscl-stack-specs{display:flex;flex-wrap:wrap;gap:10px 10px;} .vscl-page-shell .vscl-spec-pill{width:auto;max-width:100%;min-height:36px;padding:7px 13px;border-radius:999px;border:1px solid #d9e2ec;background:#fff;display:inline-flex;align-items:center;justify-content:flex-start;gap:8px;flex:0 0 auto;} .vscl-page-shell .vscl-spec-pill span:last-child{color:#667085;font-size:15px;font-weight:500;line-height:1.1;white-space:nowrap;} .vscl-page-shell .vscl-spec-pill svg,.vscl-page-shell .vscl-spec-pill img{color:#8a94a6;opacity:.95;} .vscl-page-shell .vscl-card-share{min-width:164px;padding:8px;} .vscl-page-shell .vscl-card-share-btn{display:flex;align-items:center;gap:10px;white-space:nowrap;min-height:40px;padding:0 10px;} .vscl-page-shell .vscl-card-share-btn-icon{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;flex:0 0 18px;color:#d61f2c;} .vscl-page-shell .vscl-card-share-btn span:last-child{line-height:1;white-space:nowrap;} .vscl-page-shell .vscl-stack-card{row-gap:0;margin-bottom:22px;} /* v14 bigger friendly typography */ .vscl-page-shell .vscl-home-body h3, .vscl-page-shell .vscl-stack-title-wrap h3{font-size:24px;line-height:1.18;font-weight:800;letter-spacing:-.02em;} .vscl-page-shell .vscl-condition-line{font-size:16px;line-height:1.35;} .vscl-page-shell .vscl-price-old{font-size:18px;} .vscl-page-shell .vscl-price-new{font-size:34px;line-height:1.02;} .vscl-page-shell .vscl-spec-pill{min-height:46px;padding:8px 14px 8px 9px;font-size:17px;border-radius:999px;} .vscl-page-shell .vscl-spec-icon-wrap{width:30px;height:30px;min-width:30px;min-height:30px;} .vscl-page-shell .vscl-spec-pill img{width:18px;height:18px;min-width:18px;min-height:18px;} .vscl-page-shell .vscl-spec-pill-copy, .vscl-page-shell .vscl-spec-pill-value{font-size:17px;line-height:1.1;color:#64748b;} .vscl-page-shell .vscl-stack-actions a, .vscl-page-shell .vscl-stack-actions button{font-size:16px;min-height:48px;} .vscl-page-shell .vscl-card-share{min-width:168px;} .vscl-page-shell .vscl-card-share-btn{display:flex;align-items:center;gap:10px;font-size:15px;white-space:nowrap;} .vscl-page-shell .vscl-card-share-btn-icon{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;color:#d61f2c;} .vscl-page-shell .vscl-card-share-btn-icon svg{width:18px;height:18px;display:block;} .vscl-page-shell .vscl-gallery-more-text{font-size:24px;font-weight:800;line-height:1.15;} .vscl-page-shell .vscl-gallery-count{font-size:18px;font-weight:800;} /* v15 grid cards like list layout but vertical */ .vscl-page-shell .vscl-cards.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 24px;align-items:start;} .vscl-page-shell .vscl-grid-card{display:flex;flex-direction:column;min-height:100%;background:var(--vscl-surface);border-radius:18px;overflow:hidden;box-shadow:var(--vscl-shadow-lg);} .vscl-page-shell .vscl-grid-media{display:block;position:relative;min-height:260px;height:260px;background:#eef2f6;color:inherit;text-decoration:none;overflow:hidden;border-radius:18px 18px 0 0;} .vscl-page-shell .vscl-grid-media,.vscl-page-shell .vscl-grid-media .vscl-mini-carousel,.vscl-page-shell .vscl-grid-media .vscl-slide,.vscl-page-shell .vscl-grid-media .vscl-slide img{height:100%;} .vscl-page-shell .vscl-grid-body{display:flex;flex-direction:column;min-width:0;padding:18px 18px 20px;} .vscl-page-shell .vscl-grid-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px;} .vscl-page-shell .vscl-grid-title-row h3{margin:0;flex:1 1 auto;font-size:24px;line-height:1.18;font-weight:800;letter-spacing:-.02em;color:#1f2937;} .vscl-page-shell .vscl-grid-title-row h3 a{text-decoration:none;color:inherit;} .vscl-page-shell .vscl-grid-price-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:14px;} .vscl-page-shell .vscl-grid-price{flex:1 1 auto;min-width:0;} .vscl-page-shell .vscl-grid-brand-wrap{flex:0 0 auto;display:flex;align-items:center;justify-content:flex-end;} .vscl-page-shell .vscl-grid-specs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 12px;padding:16px 0 18px;border-bottom:1px solid var(--vscl-line);} .vscl-page-shell .vscl-grid-specs .vscl-spec-pill{min-height:40px;padding:6px 12px 6px 8px;gap:8px;border-radius:999px;color:#667085;font-size:15px;font-weight:500;max-width:100%;} .vscl-page-shell .vscl-grid-specs .vscl-spec-pill-value,.vscl-page-shell .vscl-grid-specs .vscl-spec-pill-copy{font-size:15px;color:#667085;} .vscl-page-shell .vscl-grid-specs .vscl-spec-icon-wrap{width:24px;height:24px;min-width:24px;min-height:24px;} .vscl-page-shell .vscl-grid-specs .vscl-spec-pill img{width:18px;height:18px;min-width:18px;min-height:18px;} .vscl-page-shell .vscl-grid-actions{display:grid;grid-template-columns:1fr;gap:10px;padding-top:16px;margin-top:auto;} .vscl-page-shell .vscl-grid-actions a,.vscl-page-shell .vscl-grid-actions button{min-height:46px;border-radius:999px;padding:10px 16px;display:inline-flex;align-items:center;justify-content:center;text-align:center;background:#111111!important;color:var(--vscl-danger)!important;border:1px solid #1f1f1f!important;box-shadow:none!important;font-size:15px;font-weight:700;white-space:nowrap;} .vscl-page-shell .vscl-grid-actions a:hover,.vscl-page-shell .vscl-grid-actions button:hover{background:#1a1a1a!important;color:var(--vscl-danger)!important;transform:none!important;} .vscl-page-shell .vscl-grid-card .vscl-card-share{min-width:180px;} @media (max-width: 1200px){.vscl-page-shell .vscl-cards.grid{grid-template-columns:repeat(2,minmax(0,1fr));}.vscl-page-shell .vscl-grid-media{height:240px;min-height:240px;}} @media (max-width: 767px){.vscl-page-shell .vscl-cards.grid{grid-template-columns:1fr;gap:20px;}.vscl-page-shell .vscl-grid-media{height:230px;min-height:230px;}.vscl-page-shell .vscl-grid-title-row h3{font-size:22px;}.vscl-page-shell .vscl-grid-specs{grid-template-columns:1fr 1fr;gap:10px;}} /* v15.1 grid image visibility hotfix */ .vscl-page-shell .vscl-grid-media{display:block;position:relative;overflow:hidden;line-height:0;} .vscl-page-shell .vscl-grid-media .vscl-mini-carousel{position:relative;display:block;width:100%;height:100%;min-height:100%;overflow:hidden;} .vscl-page-shell .vscl-grid-media .vscl-slide{position:absolute;inset:0;display:none;opacity:0;visibility:hidden;} .vscl-page-shell .vscl-grid-media .vscl-slide.is-active{display:block;opacity:1;visibility:visible;z-index:1;} .vscl-page-shell .vscl-grid-media .vscl-slide img{display:block;width:100%;height:100%;object-fit:cover;} .vscl-page-shell .vscl-grid-media .vscl-placeholder{display:block;width:100%;height:100%;min-height:260px;background:#eef2f6;} /* v16 grid image visibility + content-width pills */ .vscl-page-shell .vscl-grid-media, .vscl-page-shell .vscl-grid-media .vscl-mini-carousel{ position:relative; width:100%; height:260px; min-height:260px; overflow:hidden; } .vscl-page-shell .vscl-grid-media .vscl-slide{ position:absolute; inset:0; display:none; opacity:0; visibility:hidden; z-index:0; } .vscl-page-shell .vscl-grid-media .vscl-slide.is-active{ display:block !important; opacity:1 !important; visibility:visible !important; z-index:1; } .vscl-page-shell .vscl-grid-media .vscl-slide img{ display:block; width:100%; height:100%; object-fit:cover; } .vscl-page-shell .vscl-grid-specs{ display:flex; flex-wrap:wrap; gap:12px 12px; align-items:flex-start; } .vscl-page-shell .vscl-grid-specs .vscl-spec-pill, .vscl-page-shell .vscl-stack-specs .vscl-spec-pill{ display:inline-flex; width:fit-content; max-width:100%; flex:0 0 auto; justify-self:start; align-self:flex-start; } .vscl-page-shell .vscl-grid-specs .vscl-spec-pill-copy, .vscl-page-shell .vscl-stack-specs .vscl-spec-pill-copy{ min-width:0; flex:0 1 auto; } .vscl-page-shell .vscl-grid-specs .vscl-spec-pill-value, .vscl-page-shell .vscl-stack-specs .vscl-spec-pill-value{ white-space:nowrap; } /* v39.4 tablet-only: default grid with 2 per row, optional list toggle */ @media (min-width:768px) and (max-width:1024px){ .vscl-page-shell .vscl-view-toggle, .vscl-page-shell .vscl-sort-trigger-caret{ display:flex!important; } .vscl-page-shell .vscl-toolbar{ flex-direction:row; align-items:center; justify-content:space-between; gap:14px; } .vscl-page-shell .vscl-toolbar-right{ justify-content:flex-end; padding-top:0; } .vscl-page-shell.view-grid .vscl-cards.stack, .vscl-page-shell.view-source-default .vscl-cards.stack{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 20px; align-items:start; } .vscl-page-shell.view-grid .vscl-stack-card, .vscl-page-shell.view-source-default .vscl-stack-card{ display:flex; flex-direction:column; min-height:100%; border-radius:18px; overflow:hidden; background:var(--vscl-surface); box-shadow:var(--vscl-shadow-lg); margin-bottom:0; } .vscl-page-shell.view-grid .vscl-stack-media, .vscl-page-shell.view-source-default .vscl-stack-media{ width:100%; min-width:0; min-height:236px; height:236px; border-radius:18px 18px 0 0; } .vscl-page-shell.view-grid .vscl-stack-media, .vscl-page-shell.view-grid .vscl-stack-media .vscl-mini-carousel, .vscl-page-shell.view-grid .vscl-stack-media .vscl-slide, .vscl-page-shell.view-grid .vscl-stack-media .vscl-slide img, .vscl-page-shell.view-source-default .vscl-stack-media, .vscl-page-shell.view-source-default .vscl-stack-media .vscl-mini-carousel, .vscl-page-shell.view-source-default .vscl-stack-media .vscl-slide, .vscl-page-shell.view-source-default .vscl-stack-media .vscl-slide img{ height:100%; } .vscl-page-shell.view-grid .vscl-stack-body, .vscl-page-shell.view-source-default .vscl-stack-body{ min-height:0; padding:16px 16px 18px; } .vscl-page-shell.view-grid .vscl-stack-title-row, .vscl-page-shell.view-source-default .vscl-stack-title-row{ margin-bottom:12px; } .vscl-page-shell.view-grid .vscl-stack-title-wrap, .vscl-page-shell.view-source-default .vscl-stack-title-wrap{ align-items:flex-start; justify-content:space-between; gap:10px; } .vscl-page-shell.view-grid .vscl-stack-title-wrap h3, .vscl-page-shell.view-grid .vscl-stack-title-wrap h3 a, .vscl-page-shell.view-source-default .vscl-stack-title-wrap h3, .vscl-page-shell.view-source-default .vscl-stack-title-wrap h3 a{ font-size:19px; line-height:1.22; font-weight:800; white-space:normal; overflow:visible; text-overflow:unset; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; } .vscl-page-shell.view-grid .vscl-condition-line, .vscl-page-shell.view-source-default .vscl-condition-line{ display:none; } .vscl-page-shell.view-grid .vscl-card-more, .vscl-page-shell.view-source-default .vscl-card-more{ width:36px; height:36px; border-radius:10px; flex:0 0 36px; } .vscl-page-shell.view-grid .vscl-stack-price-row, .vscl-page-shell.view-source-default .vscl-stack-price-row{ align-items:center; justify-content:space-between; gap:10px; padding-bottom:14px; border-bottom:1px solid var(--vscl-line); } .vscl-page-shell.view-grid .vscl-price-old, .vscl-page-shell.view-source-default .vscl-price-old{font-size:14px;} .vscl-page-shell.view-grid .vscl-price-new, .vscl-page-shell.view-source-default .vscl-price-new{font-size:27px;line-height:1.02;} .vscl-page-shell.view-grid .vscl-brand-price-icon, .vscl-page-shell.view-grid .vscl-brand-small, .vscl-page-shell.view-source-default .vscl-brand-price-icon, .vscl-page-shell.view-source-default .vscl-brand-small{width:36px;height:36px;} .vscl-page-shell.view-grid .vscl-divider-after, .vscl-page-shell.view-grid .vscl-divider-before, .vscl-page-shell.view-source-default .vscl-divider-after, .vscl-page-shell.view-source-default .vscl-divider-before{ border:0; padding:0; } .vscl-page-shell.view-grid .vscl-stack-specs, .vscl-page-shell.view-source-default .vscl-stack-specs{ display:grid; grid-template-columns:1fr; gap:10px; margin-top:14px; padding-bottom:14px; border-bottom:1px solid var(--vscl-line); justify-items:center; } .vscl-page-shell.view-grid .vscl-stack-specs .vscl-spec-pill, .vscl-page-shell.view-source-default .vscl-stack-specs .vscl-spec-pill{ width:min(88%, 240px); min-height:40px; justify-content:center; padding:8px 14px; gap:8px; } .vscl-page-shell.view-grid .vscl-stack-specs .vscl-spec-pill-copy, .vscl-page-shell.view-grid .vscl-stack-specs .vscl-spec-pill-value, .vscl-page-shell.view-source-default .vscl-stack-specs .vscl-spec-pill-copy, .vscl-page-shell.view-source-default .vscl-stack-specs .vscl-spec-pill-value{ justify-content:center; text-align:center; } .vscl-page-shell.view-grid .vscl-stack-specs .vscl-spec-icon-wrap, .vscl-page-shell.view-source-default .vscl-stack-specs .vscl-spec-icon-wrap{ width:24px;height:24px;min-width:24px;min-height:24px; display:inline-flex;align-items:center;justify-content:center; } .vscl-page-shell.view-grid .vscl-stack-actions, .vscl-page-shell.view-source-default .vscl-stack-actions{ grid-template-columns:1fr; gap:10px; margin-top:14px; } .vscl-page-shell.view-grid .vscl-stack-actions a, .vscl-page-shell.view-grid .vscl-stack-actions button, .vscl-page-shell.view-source-default .vscl-stack-actions a, .vscl-page-shell.view-source-default .vscl-stack-actions button{ min-height:44px; height:44px; font-size:14px; justify-content:center; text-align:center; } .vscl-page-shell.view-list .vscl-cards.stack{ display:block; } .vscl-page-shell.view-list .vscl-stack-card{ display:grid; grid-template-columns:minmax(290px,35%) minmax(0,1fr); border-radius:18px; margin-bottom:18px; } .vscl-page-shell.view-list .vscl-stack-media{ height:270px; min-height:270px; border-radius:18px 0 0 18px; } .vscl-page-shell.view-list .vscl-stack-body{ padding:18px 18px 20px; } } /* v39.5 tablet/mobile corrective pass */ @media (max-width:767px){ .vscl-page-shell .vscl-view-toggle{display:none!important;} } @media (min-width:768px) and (max-width:1024px){ /* mobile-like default on tablet should still start as grid, even though source markup is stack */ .vscl-page-shell.view-source-default .vscl-cards.stack{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 20px; align-items:start; } .vscl-page-shell.view-source-default .vscl-stack-card{ display:flex; flex-direction:column; min-height:100%; border-radius:18px; overflow:hidden; background:var(--vscl-surface); box-shadow:var(--vscl-shadow-lg); margin-bottom:0; } .vscl-page-shell.view-source-default .vscl-stack-media{ width:100%; min-width:0; height:236px; min-height:236px; border-radius:18px 18px 0 0; } .vscl-page-shell.view-source-default .vscl-stack-media, .vscl-page-shell.view-source-default .vscl-stack-media .vscl-mini-carousel, .vscl-page-shell.view-source-default .vscl-stack-media .vscl-slide, .vscl-page-shell.view-source-default .vscl-stack-media .vscl-slide img{height:100%;} .vscl-page-shell.view-source-default .vscl-stack-body{padding:16px 16px 18px;} .vscl-page-shell.view-source-default .vscl-condition-line{display:none;} .vscl-page-shell.view-source-default .vscl-stack-price-row{ align-items:center;justify-content:space-between;gap:10px;padding-bottom:14px;border-bottom:1px solid var(--vscl-line); } .vscl-page-shell.view-source-default .vscl-stack-specs{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px;padding-bottom:14px;border-bottom:1px solid var(--vscl-line);justify-items:stretch;align-items:start; } .vscl-page-shell.view-source-default .vscl-stack-specs .vscl-spec-pill{ width:100%;min-width:0;min-height:40px;justify-content:center;padding:8px 12px;gap:8px; } .vscl-page-shell.view-source-default .vscl-stack-specs .vscl-spec-pill-copy, .vscl-page-shell.view-source-default .vscl-stack-specs .vscl-spec-pill-value{justify-content:center;text-align:center;} .vscl-page-shell.view-source-default .vscl-stack-actions{grid-template-columns:1fr;gap:10px;margin-top:14px;} .vscl-page-shell.view-source-default .vscl-stack-actions a, .vscl-page-shell.view-source-default .vscl-stack-actions button{min-height:44px;height:44px;font-size:14px;justify-content:center;text-align:center;} /* explicit tablet list view */ .vscl-page-shell.view-list .vscl-cards.stack{display:block;} .vscl-page-shell.view-list .vscl-stack-card{display:flex;flex-direction:column;border-radius:18px;margin-bottom:18px;overflow:hidden;} .vscl-page-shell.view-list .vscl-stack-media{width:100%;height:380px;min-height:380px;border-radius:18px 18px 0 0;} .vscl-page-shell.view-list .vscl-stack-media, .vscl-page-shell.view-list .vscl-stack-media .vscl-mini-carousel, .vscl-page-shell.view-list .vscl-stack-media .vscl-slide, .vscl-page-shell.view-list .vscl-stack-media .vscl-slide img{height:100%;} .vscl-page-shell.view-list .vscl-stack-body{padding:18px 18px 20px;} /* tablet list carousel visibility fix */ .vscl-page-shell.view-list .vscl-stack-media .vscl-mini-carousel{ position:relative; display:block; width:100%; height:100%; min-height:100%; overflow:hidden; } .vscl-page-shell.view-list .vscl-stack-media .vscl-slide{ position:absolute; inset:0; display:none !important; opacity:0; visibility:hidden; } .vscl-page-shell.view-list .vscl-stack-media .vscl-slide.is-active{ display:block !important; opacity:1; visibility:visible; z-index:1; } .vscl-page-shell.view-list .vscl-stack-media .vscl-slide img{ display:block; width:100%; height:100%; object-fit:cover; } /* explicit tablet grid view */ .vscl-page-shell.view-grid .vscl-cards.grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 20px; align-items:start; } .vscl-page-shell.view-grid .vscl-grid-card{ min-height:100%; } .vscl-page-shell.view-grid .vscl-grid-media{ height:236px; min-height:236px; } .vscl-page-shell.view-grid .vscl-grid-body{ padding:16px 16px 18px; } .vscl-page-shell.view-grid .vscl-grid-title-row{ margin-bottom:12px; align-items:flex-start; justify-content:space-between; gap:10px; } .vscl-page-shell.view-grid .vscl-grid-title-row h3, .vscl-page-shell.view-grid .vscl-grid-title-row h3 a{ font-size:19px; line-height:1.22; font-weight:800; white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:visible; text-overflow:unset; } .vscl-page-shell.view-grid .vscl-grid-price-row{ align-items:center; justify-content:space-between; gap:10px; padding-bottom:14px; border-bottom:1px solid var(--vscl-line); } .vscl-page-shell.view-grid .vscl-grid-brand-wrap img, .vscl-page-shell.view-grid .vscl-grid-brand-wrap .vscl-brand-small, .vscl-page-shell.view-grid .vscl-grid-brand-wrap .vscl-brand-price-icon{ width:36px; height:36px; } .vscl-page-shell.view-grid .vscl-grid-specs{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:14px; padding-bottom:14px; border-bottom:1px solid var(--vscl-line); justify-items:stretch; align-items:start; } .vscl-page-shell.view-grid .vscl-grid-specs .vscl-spec-pill{ width:100%; min-width:0; min-height:40px; justify-content:center; padding:8px 12px; gap:8px; } .vscl-page-shell.view-grid .vscl-grid-specs .vscl-spec-pill-copy, .vscl-page-shell.view-grid .vscl-grid-specs .vscl-spec-pill-value{ justify-content:center; text-align:center; } .vscl-page-shell.view-grid .vscl-grid-specs .vscl-spec-icon-wrap{ width:24px;height:24px;min-width:24px;min-height:24px;display:inline-flex;align-items:center;justify-content:center; } .vscl-page-shell.view-grid .vscl-grid-actions{ grid-template-columns:1fr; gap:10px; margin-top:14px; } .vscl-page-shell.view-grid .vscl-grid-actions a, .vscl-page-shell.view-grid .vscl-grid-actions button{ min-height:44px; height:44px; font-size:14px; justify-content:center; text-align:center; } } /* v39.8 tablet list slider hard fix */ @media (min-width:768px) and (max-width:1024px){ .vscl-page-shell.view-list .vscl-cards.stack{display:block !important;} .vscl-page-shell.view-list .vscl-stack-card{display:flex !important;flex-direction:column !important;overflow:hidden !important;} .vscl-page-shell.view-list .vscl-stack-media{display:block !important;position:relative !important;width:100% !important;height:380px !important;min-height:380px !important;overflow:hidden !important;border-radius:18px 18px 0 0 !important;background:#eef2f6 !important;} .vscl-page-shell.view-list .vscl-stack-media > .vscl-mini-carousel[data-vscl-carousel]{display:block !important;position:relative !important;width:100% !important;height:100% !important;min-height:100% !important;overflow:hidden !important;} .vscl-page-shell.view-list .vscl-stack-media > .vscl-mini-carousel[data-vscl-carousel] .vscl-slide{position:absolute !important;top:0 !important;right:0 !important;bottom:0 !important;left:0 !important;width:100% !important;height:100% !important;display:none !important;opacity:0 !important;visibility:hidden !important;} .vscl-page-shell.view-list .vscl-stack-media > .vscl-mini-carousel[data-vscl-carousel] .vscl-slide.is-active{display:block !important;opacity:1 !important;visibility:visible !important;z-index:2 !important;} .vscl-page-shell.view-list .vscl-stack-media > .vscl-mini-carousel[data-vscl-carousel] .vscl-slide img{display:block !important;width:100% !important;height:100% !important;object-fit:cover !important;} } /* desktop list image full-height + tighter action buttons */ @media (min-width:1025px){ .vscl-page-shell.view-list .vscl-stack-card{ display:grid !important; grid-template-columns:minmax(360px,37%) minmax(0,1fr); align-items:stretch !important; } .vscl-page-shell.view-list .vscl-stack-media{ height:auto !important; min-height:100% !important; align-self:stretch !important; border-radius:18px 0 0 18px; } .vscl-page-shell.view-list .vscl-stack-media, .vscl-page-shell.view-list .vscl-stack-media .vscl-mini-carousel, .vscl-page-shell.view-list .vscl-stack-media .vscl-slide, .vscl-page-shell.view-list .vscl-stack-media .vscl-slide img{ height:100% !important; } .vscl-page-shell.view-list .vscl-stack-actions{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; align-items:stretch; } .vscl-page-shell.view-list .vscl-stack-actions a, .vscl-page-shell.view-list .vscl-stack-actions button{ min-height:42px !important; height:42px !important; font-size:9px !important; line-height:1 !important; padding:7px 7px !important; gap:3px !important; letter-spacing:-0.02em !important; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:inline-flex !important; align-items:center !important; justify-content:center !important; } .vscl-page-shell.view-list .vscl-stack-actions .vscl-btn-icon{ width:9px !important; height:9px !important; min-width:9px !important; min-height:9px !important; margin-right:3px !important; flex:0 0 9px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; } .vscl-page-shell.view-list .vscl-stack-actions .vscl-btn-icon svg, .vscl-page-shell.view-list .vscl-stack-actions .vscl-btn-icon img{ width:9px !important; height:9px !important; min-width:9px !important; min-height:9px !important; display:block !important; } } /* desktop list cards slightly wider with larger image column */ @media (min-width:1200px){ .vscl-page-shell.view-list .vscl-stack-card, .vscl-page-shell .vscl-stack-card{ grid-template-columns:580px minmax(0,1fr); } .vscl-page-shell.view-list .vscl-stack-media, .vscl-page-shell .vscl-stack-media{ min-height:380px; height:380px; } .vscl-page-shell.view-list .vscl-stack-body, .vscl-page-shell .vscl-stack-body{ padding:24px 26px 22px; } }