/* Rock City Music Co. — v3 reskin to match the live v2 Sledge look. * Applied via settings:general.custom_css (merchant layer, adopted into every * Sledge shadow root incl. the default product card). Targets the DEFAULT v3 * widgets — Turbo is template-less by design. Every value below is a computed * style read off rockcitymusicco.com v2 (2026-07-19 card/grid pass, 2026-09-07 * interaction matrix, 2026-09-09 sidebar/toolbar/list/pagination pass — desktop * 1440, phone 391). Scope: Sledge shadow roots only, never the theme DOM. */ /* theme font (Roboto is loaded by the Turbo theme at document level; * font-faces pierce shadow boundaries) */ :host { font-family: Roboto, sans-serif; } /* ── product card ─────────────────────────────────────────────── */ .product-card { border: 1px solid #dedede; border-radius: 6.4px; overflow: hidden; background: #fff; /* v2 rows stretch every card to the tallest one (grid align stretch) */ height: 100%; box-sizing: border-box; /* v2 rhythm comes from the details padding alone, no flex gaps */ gap: 0; } .product-card .product-info { gap: 0; } /* v2 card hover (forced + real-pointer measured 2026-09-10): border darkens * to #bbbbbb and an 11px rgba(33,33,33,.2) glow appears instantly (no * transition), pointer cursor over the whole card */ .product-card { transition: none; } .product-card:hover { border-color: rgb(187, 187, 187); box-shadow: rgba(33, 33, 33, 0.2) 0px 0px 11px 0px; cursor: pointer; } .product-card .product-image { background: #fff; } .product-card .top-bar { padding: 8px 8px 0; } /* v2 auto sale badge: teal pill, BLACK text, uppercase (text itself is * rewritten to "ON SALE" by rockcity-custom-v3.js). !important: the default * card stamps background-color INLINE (#e51c00) on the badge element. */ .product-card .badges .badge { background: rgb(67, 198, 172) !important; color: #000; border-radius: 999px; font-size: 11px; font-weight: 500; letter-spacing: -0.2px; line-height: 1.6; padding: 2.5px 6px; text-transform: uppercase; } /* v2 .sledge__product-grid-card-desc: padding 0 16px, name 20px under the * image, price block margin 10px 0 30px (measured 2026-09-09). */ .product-card .product-details { text-align: center; padding: 20px 16px 30px; gap: 0; } .product-card .product-title-group .title { font-size: 13px; font-weight: 400; color: #000; letter-spacing: 2px; line-height: 15.6px; text-align: center; /* v2 wraps the full name — no clamp, no ellipsis (QC 880ba3eb) */ display: block; white-space: normal; overflow: visible; text-overflow: unset; -webkit-line-clamp: unset; } /* v2 card shows no variant pills/swatches */ .product-card .options-row { display: none; } .product-card .product-title-group { gap: 0; } .product-card .price-row { /* v2 stacks: bold price, struck compare-at on its own line BELOW */ flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px; margin-top: 10px; } .product-card .price { font-size: 18px; font-weight: 700; color: rgb(51, 51, 51); letter-spacing: normal; line-height: 21.6px; } .product-card .compare-price { font-size: 14px; font-weight: 400; color: rgb(248, 85, 56); letter-spacing: -0.28px; } /* v2 hover: the product's 2nd image fades in over the 1st (both * `transition: opacity 0.3s ease-in-out`, sampled live 2026-09-09); the 2nd * is injected by rockcity-custom-v3.js into the card shadow. */ .product-card .product-image img { transition: opacity 0.3s ease-in-out; } .product-card .product-image .rc-hover-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; pointer-events: none; } .product-card .product-image:hover .rc-hover-image { opacity: 1; } .product-card .product-image:has(.rc-hover-image):hover img:not(.rc-hover-image) { opacity: 0; } /* list view (1-column switch): v2 row card 869x173 — square 171px image on * the left, 32px gap, name + price centred in the remaining column * (QC 622a503f, measured 2026-09-09). */ :host([variant="list"]) .product-card { flex-direction: row; gap: 32px; height: auto; } :host([variant="list"]) .product-image { width: 171px; height: 171px; flex-shrink: 0; } :host([variant="list"]) .product-details { flex: 1; min-width: 0; justify-content: center; text-align: center; padding: 0 16px 16px; } :host([variant="list"]) .product-title-group .title { font-size: 13px; } /* ── grid ─────────────────────────────────────────────────────── */ .product-grid { gap: 10px; align-items: stretch; } /* ── toolbar (desktop 1440, v2 measured 2026-09-09) ────────────── * v2 row: 44px tall, right-aligned, 32px above the title row; "Sort by:" / * "Limit:" labels 16px #677487 then a 138x44 / 77x44 pill (white, 1px #393d4e, * radius 360, 16px #393d4e, 12px 16px padding, sort icon 18px, chevron 18px). * Sort comes BEFORE Limit. Title row 26px, 24px above the grid. */ .filter-sort { min-height: 44px; align-items: center; justify-content: flex-end; /* + the wrapper's own 24px row gap = v2's 32px */ margin-bottom: 8px; } .right-section { gap: 12px; align-items: center; } /* v3 renders per-page first; v2 shows Sort then Limit */ #perpage-toggle { order: 2; } .dropdown { gap: 0; align-items: center; } #sort-toggle::before, #perpage-toggle::before { font-size: 16px; font-weight: 400; line-height: 17.6px; letter-spacing: -0.32px; color: rgb(103, 116, 135); margin-right: 12px; } #sort-toggle::before { content: "Sort by:"; } #perpage-toggle::before { content: "Limit:"; } /* the pill = label (left half) + chevron (right half) */ .dropdown-label, .dropdown-chevron { box-sizing: border-box; height: 44px; background: #fff; border: 1px solid rgb(57, 61, 78); color: rgb(57, 61, 78); transition: all 0.3s; } /* v2 pill hover = `filter: brightness(0.9)` over 0.3s (forced :hover, * measured 2026-09-10). Only the pill itself (label half or chevron half) * triggers it — the "Sort by:" / "Limit:" caption and the open menu live in * the same .dropdown box but sit outside the v2 button. */ .dropdown:has(.dropdown-label:hover, .dropdown-chevron:hover) .dropdown-label, .dropdown:has(.dropdown-label:hover, .dropdown-chevron:hover) .dropdown-chevron { filter: brightness(0.9); } .dropdown-label { display: flex; align-items: center; gap: 8px; padding: 12px 8px 12px 16px; border-right: none; border-radius: 360px 0 0 360px; font-size: 16px; font-weight: 400; line-height: 17.6px; letter-spacing: -0.32px; } #sort-toggle .dropdown-label::before { content: ""; width: 18px; height: 18px; flex-shrink: 0; background: url("data:image/svg+xml;utf8,") center / 18px no-repeat; } .dropdown-chevron { width: auto; height: 44px; padding: 12px 16px 12px 0; border-left: none; border-radius: 0 360px 360px 0; } .dropdown-chevron svg { width: 18px; height: 18px; } /* open state: the pill turns grey, chevron points up (rotation is the * library's own :has rule on .dropdown-chevron) */ .dropdown:has(.dropdown-menu.open) .dropdown-label, .dropdown:has(.dropdown-menu.open) .dropdown-chevron { background: rgb(230, 230, 230); } .dropdown:has(.dropdown-menu.open) .dropdown-chevron svg { transform: rotate(180deg); } .dropdown:has(.dropdown-menu.open) .dropdown-chevron { transform: none; } /* v2 menu: white, 1px black border, radius 12, 142 wide, 8px vertical * padding, option rows 40px 14px #333, ACTIVE option red #b51a00, no shadow */ .dropdown-menu { left: auto; right: 0; min-width: 142px; margin-top: 16px; padding: 8px 0; background: #fff; border: 1px solid #000; border-radius: 12px; box-shadow: none; } .dropdown-option { padding: 0 16px; font-size: 14px; font-weight: 400; line-height: 40px; letter-spacing: normal; color: rgb(51, 51, 51); } .dropdown-option.active { font-weight: 400; color: rgb(181, 26, 0); } .filter-sort-secondary { align-items: center; /* v2 title row is a 26px line box */ min-height: 26px; /* + the panel's 16px column gap = v2's 24px above the grid */ margin-bottom: 8px; } /* v2 "Electric Guitars - 97 Results": 18px/700 #000 (the library's toolbar * title is 20px via :host([show-title]) — same specificity here) */ :host([show-title]) .page-title, .page-title { font-size: 18px; font-weight: 700; color: #000; line-height: 21.6px; letter-spacing: normal; } /* v2 view switcher: 20px black glyphs, 12px apart */ .layout-icons { gap: 12px; } .layout-btn, .layout-btn svg { width: 20px; height: 20px; } .filter-sort .filter-btn-label { font-size: 16px; line-height: 17.6px; letter-spacing: -0.28px; color: rgb(57, 61, 78); } /* ── desktop layout: sidebar 251 wide, 59px gutter to the grid ───────── */ @media (min-width: 768px) { .filter-body { gap: 59px; } .filter-sidebar { width: 251px; padding: 0; } /* v2 starts the sidebar with the first group title, level with the * toolbar; the "Filter" icon row is a phone-only control (QC ab061254, * 198b0110). */ .sidebar-header { display: none; } /* first group header: v2 pads it 8px 0 20px (48px) instead of 20px 0. * The refine block (when it has chips) pads 12px extra underneath so the * first header lands 12px under the chips there, like v2 (485 = 473 + 12). */ .filter-sidebar > sledge-filter-group:first-of-type { margin-top: -12px; } } /* ── active-filter block (v2 refine block, measured 2026-09-09) ─────── * Row 1: "Filter" 24px/700 #000 left + "Clear All" 14px #b51a00 right * (61px incl. 8px top / 24px bottom padding). Row 2: chips "Brand: X ×" * 14px #000 on #f3f3f3, radius 4, padding 2px 6px, 12px apart, 12px below. */ .filter-active { display: grid; grid-template-columns: 1fr auto; align-items: center; /* v2 keeps 12px between two refine items; the 24px under the "Filter" / * "Clear All" row is added by the first chip's margin-top below, so the * gap between chips never inherits it (QC b7acccda). */ row-gap: 12px; column-gap: 8px; padding: 8px 0 0; } .filter-active::before { content: "Filter"; grid-row: 1; grid-column: 1; font-size: 24px; font-weight: 700; line-height: 28.8px; color: #000; } .filter-active .clear-all-btn { grid-row: 1; grid-column: 2; justify-self: end; margin: 0; font-size: 14px; font-weight: 400; line-height: 22.4px; letter-spacing: -0.28px; color: rgb(181, 26, 0); text-transform: capitalize; } /* The chip cards themselves keep the v3 library look (grey card, group title * + × when a group holds several values) — Devan 10 Sep: v2's loose chips * break with more than one value per group. Only their placement is ours. */ .filter-active .group-card { grid-row: 2; grid-column: 1 / -1; /* 12px row-gap + 12px = v2's 24px between the "Clear All" row and the * first chip; every later chip drops it and keeps the plain 12px. */ margin-top: 12px; } .filter-active .group-card ~ .group-card { grid-row: auto; margin-top: 0; } /* A group with ONE value renders v2's small chip ("Brand: Fender ×" on * #f3f3f3, radius 4, 2px 6px, 14px #000, 12px ×) — Devan 10 Sep; the library * behaviour (× removes, tooltip, Clear all) is untouched and groups with * several values keep the v3 card. */ .filter-active .group-card.single { background: none; border: none; border-radius: 0; padding: 0; justify-content: flex-start; } .filter-active .group-card.single .filter-pill { background: rgb(243, 243, 243); border: none; border-radius: 4px; padding: 2px 6px; gap: 4px; font-size: 14px; font-weight: 400; line-height: 22.4px; letter-spacing: -0.28px; color: #000; } .filter-active .group-card.single .filter-pill:hover { background: rgb(243, 243, 243); color: #000; } .filter-active .group-card.single .pill-text { color: #000; } .filter-active .group-card.single .pill-remove { width: 12px; height: 12px; color: #000; } @media (min-width: 768px) { /* the desktop sidebar pulls its first group up 12px (v2's 48px first * header); keep 12px between the last chip card and that header */ .filter-active .group-card:last-of-type { margin-bottom: 24px; } } /* ── filter sidebar groups (v2 measured 2026-09-09) ─────────────────── * Group header 20px 0 (60px), title 18px/700 #000, 15px chevron at the right * edge (up while open, down while closed), no divider between groups. */ :host(sledge-filter-group) { border-bottom: none; } /* scoped to the facet group: the selected-filter chip card reuses the class * name .group-header for its own title row */ .filter-group > .group-header { padding: 20px 0; } .group-label { font-size: 18px; font-weight: 700; color: #000; letter-spacing: -0.36px; line-height: 19.8px; } .group-toggle { width: 15px; height: 15px; font-size: 0; color: transparent; background: url("data:image/svg+xml;utf8,") center / 15px no-repeat; transform: rotate(180deg); transition: transform 0.2s ease; } .group-header.closed .group-toggle { transform: none; } /* v2 shows the value list in a 230px scroll box; the v3 list is a 300px * scroller sized by INLINE styles (filter-group.ts: max-height, 10px right * padding, stable gutter), so only important declarations reach it. v2 bar: * WebKit pseudo-elements, 8px wide, transparent track, #888888 thumb with a * 16px radius, 3px from the group edge (measured 2026-09-10). */ .group-items, .virtual-viewport { max-height: 230px !important; padding-right: 0 !important; scrollbar-gutter: auto !important; /* Chrome draws the bar on the element's right edge; the 15px chevron sits * flush right (centre 7.5px in), so an 8px bar centres under it when the * list stops 3.5px short of the group edge (Devan 10 Sep, as Brox Tuning). */ margin-right: 3.5px; } .group-items::-webkit-scrollbar, .virtual-viewport::-webkit-scrollbar { width: 8px; background: transparent; } .group-items::-webkit-scrollbar-track, .virtual-viewport::-webkit-scrollbar-track { background: transparent; } .group-items::-webkit-scrollbar-thumb, .virtual-viewport::-webkit-scrollbar-thumb { background: rgb(136, 136, 136); border-radius: 16px; } /* Item rows: v2 spaces its rows 49px apart, which Devan judged too loose * (10 Sep) — the rows keep the v3 library rhythm (26px rows, 8px apart) with * v2's box and type: checkbox 18px, 2px #8c9196 border, radius 4, checked = * #b51a00 fill + 10x8 white tick, label 13px/700 #444 capitalised with the * count right after it. Hover anywhere on the row dims the box * (`filter: brightness(0.8)`, 0.3s) exactly like v2's row hover. */ .filter-item { padding: 0; min-height: 26px; gap: 12px; align-items: center; } .filter-item .checkbox { width: 18px; height: 18px; box-sizing: border-box; border: 2px solid rgb(140, 145, 150); border-radius: 4px; background: #fff; transition: all 0.3s; } .filter-item:hover .checkbox { filter: brightness(0.8); } .filter-item .checkbox.checked { background: rgb(181, 26, 0); border-color: rgb(181, 26, 0); } /* v2 tick = the Radix checkbox indicator: a 10x8 white rounded check * (path read off v2, same glyph Brox Tuning uses); the library's 14px angular * check is hidden and the glyph drawn as a mask so it rasterises like v2. */ .filter-item .checkbox.checked svg { display: none; } .filter-item .checkbox.checked::after { content: ""; display: block; width: 10px; height: 8px; background: #fff; -webkit-mask: url("data:image/svg+xml;utf8,") center / 10px 8px no-repeat; mask: url("data:image/svg+xml;utf8,") center / 10px 8px no-repeat; } .filter-item .filter-label { flex: 0 1 auto; font-size: 13px; font-weight: 700; line-height: 20px; color: rgb(68, 68, 68); text-transform: capitalize; } .filter-item .filter-count { margin-left: -8px; font-size: 13px; font-weight: 700; line-height: 20px; color: rgb(68, 68, 68); } /* ── price slider (v2 measured 2026-09-07/09; QC 1785ba0b) ─────────────── * Track and thumbs follow v2: 5px track #e4e4e4 radius 9999, fill #1b1f23, * two ROUND 20px #1b1f23 thumbs with a 3px #e4e4e4 ring, min/max labels * 14px #929292. Vertical spacing stays the v3 library rhythm (v2's 56px gap * above the track looked empty in v3 — Devan 10 Sep). */ /* keep the library's top:50% + translateY(-50%) so the 5px track is centred * on the same axis as the 20px thumbs */ .range-track-bg, .range-fill { height: 5px; border: none; border-radius: 9999px; } .range-track-bg { background: rgb(228, 228, 228); } .range-fill { background: rgb(27, 31, 35); } .range-input::-webkit-slider-thumb { width: 20px; height: 20px; border-radius: 50%; background: rgb(27, 31, 35); border: 3px solid rgb(228, 228, 228); box-sizing: border-box; } .range-input::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: rgb(27, 31, 35); border: 3px solid rgb(228, 228, 228); box-sizing: border-box; } .range-value { font-size: 14px; line-height: 20px; color: rgb(146, 146, 146); } /* ── pagination (v2 measured 2026-09-07/09) ─────────────────────────── * "Page 1 of 416 - total 4989 result" 16px #767676 between two 34px boxed * arrows (1px #b7b7b7, radius 12, 16px glyph, disabled 30% black), 24px * apart, 51px under the grid. */ .pagination-wrapper { /* + the panel's 16px column gap = v2's 51px under the grid */ margin-top: 35px; } .pagination { gap: 24px; margin-top: 0; } .pagination-arrow { width: 34px; height: 34px; box-sizing: border-box; background: #fff; border: 1px solid rgb(183, 183, 183); border-radius: 12px; color: #000; } /* v2 disabled arrow (measured 2026-09-10): 30% black glyph, the white box * dimmed by a permanent brightness(0.9), not-allowed cursor, no hover change */ .pagination-arrow:disabled { color: rgba(16, 16, 16, 0.3); filter: brightness(0.9); cursor: not-allowed; } .pagination-arrow { transition: all 0.3s; } .pagination-arrow:hover:not(:disabled) { filter: brightness(0.9); } .pagination-arrow svg { width: 16px; height: 16px; } .page-info { font-size: 16px; font-weight: 400; line-height: 25.6px; letter-spacing: -0.32px; color: rgb(118, 118, 118); } /* ── search page (QC OFF-9751 f57fae2f + matrix 2026-09-07) ───────────── */ /* v2 renders no tab row at all on this store (only the product surface has a * Sledge widget); the v3 panel shows one dark "Products (N)" tab above the * widget. Hide the row — the products tab stays the active pane. */ .tab-bar { display: none; } /* zero-result page: the library's message block stays as is; the Sort / Limit * pills and the view switcher stay visible like v2 (the library stamps * `hide-controls` on the toolbar host and hides both rows). The "0 Results" * title and the phone Filter button stay hidden on purpose (Devan 10 Sep). */ :host([hide-controls]) .right-section, :host([hide-controls]) .filter-sort-secondary { display: flex; } :host([hide-controls]) .filter-sort-secondary { justify-content: flex-end; } /* ── phone (391, Nurdin's viewport) ───────────────────────────────────── */ @media (max-width: 767px) { /* v2 widget runs full-bleed: 356px wide from x=10, i.e. the theme's own * 10px page gutter and nothing else (QC 1ca24255). The Turbo hostCSS adds * 12px on the host (light-DOM rule, so !important is the only way in from * here) and the flyout layout pads the panel 16px through its hook. */ :host(sledge-filter-panel), :host(sledge-search-result-panel) { padding-inline: 0 !important; --sledge-filter-panel-padding-x: 0px; } .filter-panel { display: flex; flex-direction: column; padding: 0; } /* v2 order: title row, then the controls. The v3 h1 sits under the * toolbar; move it first. (v2's own three ragged rows are tidied here: * title / Filter + Sort + Limit pills on ONE row / view icons.) */ .filter-panel > .page-title { order: -1; margin: 0 0 8px; } .filter-sort { justify-content: space-between; gap: 8px; margin-bottom: 8px; } /* v2 "Filter" trigger: 94x44 pill, the word then v2's own 18px sliders * icon (two circles on two lines, #393d4e 1.5px strokes — markup read off * v2 2026-09-10), hover = brightness(0.9) over 0.3s */ .filter-btn { flex-direction: row-reverse; gap: 8px; height: 44px; padding: 12px 16px; background: #fff; border: 1px solid rgb(57, 61, 78); border-radius: 360px; font-size: 16px; line-height: 17.6px; letter-spacing: -0.28px; color: rgb(57, 61, 78); transition: all 0.3s; } .filter-btn:hover { filter: brightness(0.9); } .filter-btn-icon { width: 18px; height: 18px; background: url("data:image/svg+xml;utf8,") center / 18px no-repeat; } .filter-btn-icon svg { display: none; } .filter-btn-label { font-size: 16px; color: rgb(57, 61, 78); } .right-section { gap: 8px; } /* the "Sort by:" / "Limit:" captions do not fit a 356px row */ #sort-toggle::before, #perpage-toggle::before { display: none; } .filter-sort-secondary { justify-content: flex-end; min-height: 0; /* + the panel's 16px column gap = v2's 32px above the grid */ margin-bottom: 16px; } /* v2 compare-at price is 12px on phone */ .product-card .compare-price { font-size: 12px; } /* pagination spans the widget like the grid (QC 52f397e6) */ .pagination { width: 100%; justify-content: space-between; } /* flyout drawer (v2 measured 2026-09-07 flyout-active): ~331px panel, * "Filter" 24px/700 at 21,22, round 36px grey close button, "Clear All" * directly under the title, chip below it, groups from y=201 */ .drawer-panel { max-width: 331px; } .drawer-header { padding: 18px 20px 0 21px; border-bottom: none; } .drawer-title { font-size: 24px; font-weight: 700; line-height: 28.8px; color: #000; } .drawer-close-btn { width: 36px; height: 36px; border-radius: 50%; background: rgb(243, 243, 243); color: #000; } .drawer-body { padding: 33px 21px 24px; gap: 0; } /* inside the drawer the title is the drawer's own; keep Clear All above * the chips like v2 */ .filter-active::before { display: none; } .filter-active { padding: 0; } .filter-active .clear-all-btn { grid-column: 1; justify-self: start; } .filter-active .group-card:last-of-type { /* v2 drawer: first group title 41px under the chip */ margin-bottom: 21px; } /* zero-result page: the library pads the block 16px on each side, so its * sections sat inside the widget edges while the toolbar above ran * full-bleed. Drop the side padding so both share one edge (QC 0dac9872); * the vertical rhythm stays the library's. */ .no-result { padding-inline: 0; } }

Slides

Subscribe