/* Simply Dresses — V3 custom CSS (rebuilt from the V2 storefront). * * MODELLED ON promgirl-custom-v3.css. The two stores are SISTER SHEETS: * 799 vs 805 lines of v2 CSS from the same "reformation" preset, ~18% divergent, with * IDENTICAL token blocks except two brand colours. So the card is built to the same * structure as PromGirl's, section for section, with Simply Dresses' own brand values. * PromGirl runs TAIGA, Simply Dresses runs TAILOR — same design system, different card DOM. * Taiga .card / .card-media / .card-media-overlay / .badge / .card-title / .price-item--regular * Tailor .product-card / .product-card__image / .product-card__badges / .product-badges__badge * / .product-card__title / .price__regular-value * Sledge-generic names (.color-swatch, .other-colors, .size-options, .trigger, .badge-counter, * and the whole list-view block) are IDENTICAL on both and transfer verbatim. * * V3 adopts the merchant sheet into EVERY Sledge shadow root and NOT into the light DOM, so the * v2 selectors (`body .x`, `:root {…}`, `.sledge-custom__*`) are all dead. Rules below are flat * and use `:host(...)` to scope. The merchant sheet is adopted LAST, so it wins at equal * specificity — `!important` only where the library sets the value inline via JS. * * THE HARDCODING RULE * v2 value == theme var -> emit `var(T, V)`; pinning would desync Sledge from the theme. * v2 value != theme var -> pin V; the merchant deliberately diverged for Sledge. * no theme var -> pin V. * Real case-1: v2 `--sledge-custom-button-background-color: 127,111,109` IS the theme's * `--color-button-main: #7f6f6d`. Never pinned. * * Measured on www.simplydresses.com/collections/long-plus-size-dresses (2026-07-17): * ATC NOT RENDERED — `.sledge-custom__product-card__quick-buy{display:none}` (v2 L207-213) * verified live: 36/36 cards, 0 visible rects, offsetParent null * sale #c01919 (v2 L799 — NOT the L203 #ee3b45, which loses 0-1-0 vs 0-3-0) * compare #595959, struck, rendered AFTER the sale value (v2 DOM order) * title 16px / 400 / rgb(0,0,0) / lh 27.2px (MEASURED live, not v2-declared) * heart bottom-centre, hanging -23px below the media, 36px white circle, icon #802d43 */ /* ── 1. Brand tokens ─────────────────────────────────────────────────────── v2 declared these on `:root`, which matches nothing inside a shadow root — rescoped to `:host`, which every Sledge element exposes and which this adopted sheet reaches. Values are Simply Dresses' own. The two that differ from PromGirl are marked. */ :host { --sledge-custom-background-img-card: 244, 242, 240; --sledge-custom-button-background-color: 127, 111, 109; /* taupe (PromGirl: 230,8,115 pink) */ --sledge-custom-body-color-text: 21, 21, 21; --sledge-custom-on-sale-color-text: 238, 59, 69; --sledge-custom-sold-out-badge-background: 147, 147, 147; --sledge-custom-sold-out-badge-text: 255, 255, 255; --sledge-custom-in-stock-badge-background: 232, 56, 149; /* (PromGirl: 194,40,118) */ --sledge-custom-in-stock-badge-text: 255, 255, 255; /* v2 `--sledge-color-primary-green-5` -> v3 accent token. Drives the active size pill / swatch ring / focus accents across every Sledge element. */ --color-primary-green: rgb(var(--sledge-custom-button-background-color)); --color-text: rgb(var(--sledge-custom-body-color-text)); } /* ── 2. Badges ───────────────────────────────────────────────────────────── Tailor renders `.product-card__badges > .product-badges > .product-badges__badge`, pinned top-left over the media. v2 stacked square chips in the top-left corner at 8px (css:76-98). The corner and the square chip are the Simply Dresses look, so they are re-asserted. UNLIKE PromGirl, no `!important` and no JS tagging is needed here. PromGirl runs Taiga, whose badges are the CORE `.badge` span that v3 paints INLINE (product-card.ts:2005 ``), so a plain rule would lose. Tailor's template emits its OWN badge markup with NO inline colour and semantic modifier classes (tailor/card.ts:520-525 `product-badges__badge--sold-out` / `--sale`), so they are styled directly. Merchandising campaign badges still use the core inline `.badge` and are deliberately left alone, so they keep the colour the merchant picked in the admin. */ :host(sledge-product-card) .product-card__badges { top: 8px; /* v2 L83-84; Tailor insets 0 */ left: 8px; right: auto; } :host(sledge-product-card) .product-badges { gap: 5px; /* v2 L82; Tailor 4px */ flex-direction: column; align-items: flex-start; } :host(sledge-product-card) .product-badges__badge { border-radius: 0; /* v2 L87-98 */ text-transform: uppercase; font-size: 10px; letter-spacing: 0.05em; font-weight: 600; min-width: 24px; padding: 2px 6px; line-height: 27.2px; } /* v2 L100-108. The `--in-stock` badge (v2 L110-113) is NOT shipped: updateBadge() only ever built `--sold-out` / `--on-sale`, so v2 never rendered it. */ :host(sledge-product-card) .product-badges__badge--sale { background-color: #ef1620; color: #ffffff; } :host(sledge-product-card) .product-badges__badge--sold-out { background-color: rgb(var(--sledge-custom-sold-out-badge-background)); color: rgb(var(--sledge-custom-sold-out-badge-text)); } @media (min-width: 768px) { :host(sledge-product-card) .product-card__badges { top: 16px; /* v2 L686-689 */ left: 16px; } } /* ── 3. Colour swatches + size pills ─────────────────────────────────────── Sledge-generic class names — identical on Taiga and Tailor, so these transfer verbatim from PromGirl. v2's swatch was a 22px circle with a 2px white inner ring and a grey outer ring (v2 L256-272); the ring is the house look, so it stays. `border-radius` is asserted here even though the Tailor template already rounds them: the DEFAULT card — which is what renders for `variant="list"`, since the theme template is grid-only — has no radius of its own, and this rule is shared by both. Omitting it left the list card with SQUARE swatches while the grid showed circles (PromGirl round-4 item 4). */ :host(sledge-product-card) .color-swatch { width: 22px; height: 22px; min-width: 22px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px #e6e6e6; background-size: contain; background-position: center; background-repeat: no-repeat; } :host(sledge-product-card) .color-swatch:hover { box-shadow: 0 0 0 1px #7a7a7a; opacity: 1; } :host(sledge-product-card) .color-swatch--active { outline: none; box-shadow: 0 0 0 1px #0f0f0f; border: 2px solid #fff; } /* v2 L228-247 — the "+N" overflow chip was an outlined pill. v3 renders it as plain text. NOTE the string differs and CSS cannot change it: v2 said "2+", v3 says "+2 more". */ :host(sledge-product-card) .other-colors { display: flex; justify-content: center; align-items: center; font-size: 12px; min-width: 44px; height: 28px; padding: 4px 9px; background-color: transparent; border-radius: 100px; border: 1px solid #7a7a7a; opacity: 1; box-shadow: none; cursor: pointer; } :host(sledge-product-card) .other-colors:hover { background-color: #0f0f0f; border-color: #0f0f0f; color: #fff; } /* v2's card renderer emitted colour swatches ONLY — its swatch branch tested `option[0] == "Color"` before any size branch, so a size pill never rendered on a PLP card. The Tailor template still emits `.size-options` (kept for other Tailor stores), so it is suppressed here — same pattern as the quick-buy suppression below. */ :host(sledge-product-card) .size-options { display: none; } /* ── 4. Add-to-cart — SUPPRESSED, exactly as v2 suppressed it ────────────── READ THIS BEFORE "RESTORING" THE BUTTON. The live v2 storefront shows NO add-to-cart on a PLP card, at any viewport. The merchant's JS DID render a quick-buy form, but the merchant's own sheet hid the WRAPPER unconditionally: .sledge-custom__product-card__quick-buy { … display: none; } (v2 L207-213) No media query reverses it. Probe of the live site: 36/36 cards display:none, rect 0x0, offsetParent null, still none on hover. (v2 L46-48 `.sledge-custom__product-card:hover .sledge-custom__button { transform: translateY(0) }` LOOKS like a slide-up affordance — it is DEAD CODE, its ancestor is display:none. All of v2 L159-182 styling that button is dead for the same reason and is NOT ported.) Done in CSS, NOT via the `show_add_to_cart:false` setting, deliberately: that flag gates four separate things and removes `.atc-image-btn`, which the merchandising slot replaces IN PLACE for pre-order / back-in-stock CTAs. Suppressing the wrapper keeps all of that intact — and unlike the flag, it does not sit in the admin waiting to be toggled back on by accident. TWO hides are required (PromGirl needs three; Tailor has no `.atc-mobile` touch bar — verified: tailor/card.ts emits only `.atc-image-btn` / `.atc-quick-view` inside `.product-card__button-container`): .product-card__button-container — the Tailor card's hover-revealed strip. :host([variant="list"]) .atc-image-btn — in LIST mode the DEFAULT card emits the button BARE, with no Tailor wrapper, so the first rule misses it. */ :host(sledge-product-card) .product-card__button-container { display: none; } :host([variant="list"]) .atc-image-btn { display: none; } /* ── 5. Wishlist heart ───────────────────────────────────────────────────── v2 sat the heart in a white circle straddling the BOTTOM edge of the media, dark-rose outline, filled when active (v2 L351-387). Tailor mounts `.card-wishlist` inside `.icon-overlay`, which the template pins to the media's bottom-right (tailor/card.ts:251-260). `.icon-overlay` — not the media — is the containing block, so the offsets must be applied to IT; an offset on `.card-wishlist` alone resolves against the wrong box. Same trap PromGirl hit on Taiga. Doing it in CSS means no JS reparenting. ALIAS TRAP — why this targets v3-native names, not the v2 alias classes: wishlist-trigger.ts:122-131 maps ONE v3 element (`trigger-wrapper`) to BOTH v2 classes (`…__trigger-wrapper` + `…__trigger-block`), and `_render()` emits a single

. Porting v2 L351-364 mechanically flattens `position:unset` (→ static) onto the same element as `bottom`/`left`, making the offsets INERT — the heart silently reverts, with no error. */ :host(sledge-product-card) .icon-overlay { top: auto; right: auto; bottom: -23px; left: 50%; transform: translateX(-50%); flex-direction: row; } /* REQUIRED, not cosmetic: `.product-card__image` is `overflow: hidden` (tailor/card.ts:112), which would clip the negative bottom. Safe — every other child (primary/secondary image, badges, image-link) is `position:absolute; inset:0` and cannot overflow. */ :host(sledge-product-card) .product-card__image { overflow: visible; } /* v2 L366-382. `product-currency` is stamped ONLY on the Sledge-card heart (wishlist/product-card-slot.ts:88). The native-theme-card heart takes a different path (mountCardHeart, :237-248) which OMITS it and uses `data-card-heart` instead — so this hits the grid heart and leaves native/PDP hearts at their default, exactly as v2 did. ICON_HEART is `stroke="currentColor"` and ICON_HEART_FILLED is `fill="currentColor"` (core/icons.ts:10,14) ⇒ ONE `color` reproduces v2's stroke:#802d43 (resting) AND fill:#802d43 (active, v2 L384-387). `stroke-width:1.5` (v2 L381) is already native. */ :host(sledge-wishlist-trigger[product-currency]) .trigger { width: 52px; height: 52px; padding: 12px; background: #fff; border-radius: 50%; color: #802d43; } :host(sledge-wishlist-trigger[product-currency]) .trigger svg { width: 28px; height: 28px; } /* REQUIRED once simplydresses-custom-v3.js swaps the glyph: the replacement SVG hardcodes `stroke="black"`, which overrides `currentColor` and would kill the `color:#802d43` above. Re-assert the dark rose on the path itself. The NAV badge is deliberately NOT covered by this selector — it keeps the SVG's own black, the same split PromGirl ships. */ :host(sledge-wishlist-trigger[product-currency]) .trigger svg path { stroke: #802d43; } :host(sledge-wishlist-trigger[product-currency]) .trigger.active svg path { fill: #802d43; /* v2 L384-387 — filled when wishlisted */ stroke: #802d43; } /* ── 5b. Wishlist nav badge ──────────────────────────────────────────────── The nav badge and the floating badge are the SAME element (``); only the floating one carries the `floating` attribute / `.floating` class (wishlist-badge.ts:571-577). Tag-scoping makes these (0,2,1) vs the component's own (0,2,0), so they win outright rather than relying on source order. The icon SVG itself is swapped by simplydresses-custom-v3.js — `_getIcon()` only knows heart/star/bookmark (wishlist-badge.ts:581-590), so a custom SVG cannot come from settings. */ :host(sledge-wishlist-badge) svg { width: 24px; /* v2 L498-502 */ height: 24px; fill: none; } :host(sledge-wishlist-badge:not(.floating)) .badge { padding: 6px; line-height: 1; } /* Header counter chip. v2 L504-516: 18x18, 12px/400, full circle, rgb(202,180,177). Position per merchant feedback (2026-07-20): top:0 / right:-5px. `background` must be declared here, NOT inherited: the component's own `:host(:not(.floating))` rule sets sizing only; the colour comes from the lower-specificity base `.badge-counter` (`var(--color-bg-fill-critical, #e51c00)`), which this outranks. Both class names are covered — the library has used `.badge-counter` and `.counter`. */ :host(sledge-wishlist-badge:not(.floating)) .badge-counter, :host(sledge-wishlist-badge:not(.floating)) .counter { position: absolute; top: 0; right: -5px; bottom: auto; left: auto; width: auto; height: 18px; min-width: 18px; padding: 0 5px; font-family: inherit; font-size: 12px; font-weight: normal; background: rgb(202, 180, 177); border-radius: 9999px; display: flex; align-items: center; justify-content: center; } /* ── 5c. PDP gallery wishlist heart ──────────────────────────────────────── Merchant feedback (B), 2026-07-20: a circular white heart on the top-right of the main PDP image, "matching simplydresses.com". NEW BUILD, NOT A V2 RESTORATION. The reference heart is not a Sledge element — it is the third-party `smartwishlist` app (`span.smartwishlist > span.fa.fa-heart-o`). Measured live on simplydresses.com: host 50x50 at top:14.72px / right:9.81px / z-index:10 inside `.product-gallery__media`; inner span white, border-radius:50%, no shadow. Sledge v2 rendered NO PDP heart on that store (grepping v2-simplydresses-custom.{css,js} for gallery/PDP wishlist selectors returns zero) and its own heart CSS is card-only, BOTTOM-centre. MOUNTED BY JS. No pdp-surface widget injects on this store, so there is no to restyle. simplydresses-custom-v3.js appends to `.product-gallery` — the single stable node whose top and right edges coincide with `.product-gallery__media-list`, so these offsets reproduce the reference without coupling to the flickity carousel. SCOPE. Every rule carries our own `data-sd-pdp-heart` marker. Section 5's card block is scoped `:host(sledge-wishlist-trigger[product-currency])` and the patcher deliberately OMITS `product-currency` — the same discriminator the library's own mountCardHeart uses (wishlist/product-card-slot.ts:234-248). The two blocks are therefore mutually exclusive: 52px on cards, 50px here. Both share the #802d43 rose (merchant decision 2026-07-20: match the card identity rather than the reference app's black). (0,1,1) beats the library's own `:host([data-card-heart])` at (0,1,0) (wishlist-trigger.ts: `position:absolute; top:.5rem; right:.5rem; z-index:2`). Specificity is what wins here, not order — a shadow tree's own

Dresses by Chicas Fashion

Your cart (0)

Your cart is empty