/* cache-bust: v2026-06-28a (search bar height + anti-flash panel positioning) */ /* ============================================================================= * Youth Bazaar — FiboSearch "Vitrina" skin (Phase 20 / THEME-01, desktop) * * Hand-authored PLAIN CSS — NOT Tailwind utilities. The FiboSearch `.dgwt-wcas-*` * DOM is generated by the plugin at runtime and lives OUTSIDE the theme's * `tailwind.config.js content` scan, so @apply / utility classes targeting it * would never generate (20-RESEARCH Pitfall 2). Every rule is scoped under a * FiboSearch own class (`.dgwt-wcas-*`) or a Youth Bazaar structural class * (`.yb-sugg-*` / `.yb-panel-*` / `.yb-stock-pill*`) so it can never leak onto * non-search DOM (T-20-07). * * Palette: read live theme tokens so BTS purple / NCT pink / SKZ red all theme * correctly via the `body.yb-band-*` cascade (both FiboSearch wrappers append to * , so the vars cascade with no extra scoping — Pattern 4). NEVER hardcode * the per-band accent hex for themeable parts: * accent (acc) ........ var(--color-secondary) (BTS #9B59B6 / NCT pink / SKZ red) * accent channels ..... var(--color-secondary-rgb) (for rgb(.. / .a) opacity) * CTA bg (primary) .... var(--color-primary) ("Añadir al carrito") * panel bg ............ var(--color-dropdown-bg) (BTS #FFF / NCT #1A1520 / SKZ #26262B) * active-row fill ..... var(--color-secondary-tinted-bg) (accTint) * Stock pill colors are the FIXED semantic green/red from DESIGN-NOTES * (intentionally NOT band-themed). * * Font: "Plus Jakarta Sans" for ALL dropdown chrome (Sue Ellen Francisco is the * display/logo font and is NOT used inside the dropdown — DESIGN-NOTES). * ========================================================================== */ /* ───────────────────────────────────────────────────────────────────────── * 0. Local fallbacks — keep the skin sane if a token is ever missing. * These never override the live theme vars (the `var(--x, fallback)` form * only uses the fallback when --x is undefined). Scoped to the wrappers. * ───────────────────────────────────────────────────────────────────────── */ .dgwt-wcas-suggestions-wrapp, .dgwt-wcas-details-wrapp { --yb-acc: var(--color-secondary, #9B59B6); --yb-acc-rgb: var(--color-secondary-rgb, 155 89 182); --yb-cta: var(--color-primary, #FFEE56); --yb-panel-bg: var(--color-dropdown-bg, #FFFFFF); --yb-acc-tint: var(--color-secondary-tinted-bg, rgb(var(--color-secondary-rgb, 155 89 182) / .08)); --yb-acc-ring: rgb(var(--color-secondary-rgb, 155 89 182) / .20); --yb-acc-fill: rgb(var(--color-secondary-rgb, 155 89 182) / .12); /* panelText / panelMuted are NEUTRAL per-palette grays (DESIGN-NOTES), NOT the * accent. BTS (light panel) → near-black; NCT/SKZ (dark panel) → light (set in * the per-band overrides below). */ --yb-panel-fg: #2D2D2D; --yb-panel-muted: #9b8f96; --yb-hair: rgb(var(--color-secondary-rgb, 155 89 182) / .14); --yb-tile-bg: rgb(var(--color-secondary-rgb, 155 89 182) / .08); font-family: "Plus Jakarta Sans", sans-serif; } /* Dark-panel palettes — light panelText/panelMuted (DESIGN-NOTES table). */ body.yb-band-nct .dgwt-wcas-suggestions-wrapp, body.yb-band-nct .dgwt-wcas-details-wrapp { --yb-panel-fg: #F0ECF5; --yb-panel-muted: #8F8898; } body.yb-band-stray-kids .dgwt-wcas-suggestions-wrapp, body.yb-band-stray-kids .dgwt-wcas-details-wrapp { --yb-panel-fg: #F0EDE8; --yb-panel-muted: rgba(240, 237, 232, .55); } /* ═══════════════════════════════════════════════════════════════════════════ * 1. PANEL CONTAINER — rounded "Vitrina" card, heavy shadow, pop-in, two-pane. * * FiboSearch renders the suggestions list (`.dgwt-wcas-suggestions-wrapp`) and the * Details Panel (`.dgwt-wcas-details-wrapp`) as siblings appended to , both * positioned under the input. We skin them into one visual card: the details panel * is the LEFT pane (316px) with a right hairline; the list is the RIGHT pane. * ═════════════════════════════════════════════════════════════════════════ */ .dgwt-wcas-suggestions-wrapp { background: var(--yb-panel-bg); color: var(--yb-panel-fg); /* !important: in the no-results state FiboSearch sets html.dgwt-wcas-open-pirx(-compact) * + body.dgwt-wcas-nores, which activate native pirx rules (NOT !important) that override * our panel with squared top corners (border-radius:0 0 5px 5px), a 1px margin-top and a * white top border — the "no-radius / white margin / pop-swap" glitch. Our !important wins. */ border: 1px solid var(--yb-hair) !important; border-radius: 16px !important; margin-top: 0 !important; /* No drop shadow — the right pane has the higher z-index, so any shadow bleeds * LEFT onto the details pane and reads as a seam between two cards. Flat panel, * divided only by the details pane's right hairline (per the reference mockup). */ box-shadow: none; padding: 0; overflow: hidden; /* Column layout so the footer can be pinned to the BOTTOM (margin-top:auto). * FiboSearch sets this pane's height inline to match the taller details (image) * pane, so without this the footer floats with empty space beneath it. */ display: flex; flex-direction: column; /* Entrance gated behind .yb-animate-in (see rule below + search.js) — without * gating, the panel re-pops on keystroke re-renders → blink. */ font-family: "Plus Jakarta Sans", sans-serif; /* Widen the list pane toward the Vitrina mockup (~508px list + 316px details * ≈ 824px total). FiboSearch sets an inline width + left on this node; we * override the WIDTH with !important here, and search.js (ybClampPanel) owns the * LEFT/TOP — it positions the list as the right pane under the input and pins the * details pane flush to its left as one contiguous card, clamped to the viewport * (O1). The width cap (100vw - 332px) guarantees list + 316px details always fits * within a 16px gutter, so the card never clips on either edge. */ width: min(508px, calc(100vw - 332px)) !important; box-sizing: border-box; } /* ANTI-FLASH (O1b) — FiboSearch shows + paints the list wrapp at its NATIVE * (right-aligned) position one frame BEFORE dispatching fibosearch/show-suggestions, * where search.js's ybClampPanel re-anchors it centered under the input. That paints * the panel on the right, then snaps it left = a visible jump on first open. Keep the * desktop list pane invisible until ybClampPanel tags it `.yb-clamped` (added in the * SAME synchronous task as our positioning, before the browser paints) so the native * position is never shown. search.js strips the tag on fibosearch/open, so every * fresh open re-hides until re-positioned. Scoped to `body > …` (the desktop panel is * a direct child of ); when the mobile overlay MOVES the wrapp into its sheet it * is no longer a body child, so this never hides mobile results. */ body > .dgwt-wcas-suggestions-wrapp:not(.yb-clamped) { visibility: hidden !important; } /* The Details Panel becomes the left pane: fixed width + right hairline border. */ .dgwt-wcas-details-wrapp { width: 316px; min-width: 316px; background: var(--yb-panel-bg); color: var(--yb-panel-fg); border: 1px solid var(--yb-hair) !important; border-radius: 16px 0 0 16px !important; margin-top: 0 !important; /* defeat native open-pirx-compact margin-top:1px */ box-shadow: none; /* flat — see suggestions-wrapp note (z-order seam bleed). */ padding: 18px 18px 20px; font-family: "Plus Jakarta Sans", sans-serif; } /* Panel entrance — GATED to the first render of an open session (search.js adds * .yb-animate-in once on fibosearch/open). Prevents the panel from re-popping * (blinking) on every keystroke as FiboSearch re-renders the dropdown. */ .dgwt-wcas-suggestions-wrapp.yb-animate-in, .dgwt-wcas-details-wrapp.yb-animate-in { animation: ybpop .24s cubic-bezier(.2, .8, .25, 1) both; } /* When the Details Panel is present (body.dgwt-wcas-is-details, details on the LEFT), * square the list's LEFT corners and put the divider on the LIST's left border (not * the details pane's right border) so it is ALWAYS present and spans the full panel * height — the details pane only populates on hover, so its border appeared late. * The list is the persistent, full-height pane, so the divider lives here. * NOTE: FiboSearch renders the list BEFORE the details node and uses body-level * `dgwt-wcas-is-details*` classes (not `has-details-box`/a sibling combinator). */ body.dgwt-wcas-is-details .dgwt-wcas-suggestions-wrapp { border-radius: 0 16px 16px 0 !important; /* beats native open-pirx radius override */ border-left: 1px solid rgb(var(--color-secondary-rgb, 155 89 182) / .28) !important; } /* Drop the details pane's own right border so the seam is a single crisp 1px line. */ body.dgwt-wcas-is-details .dgwt-wcas-details-wrapp { border-right: none !important; } /* ═══════════════════════════════════════════════════════════════════════════ * 2. LIST PANE — header "RESULTADOS / N de M", scrollable rows, footer hints. * ═════════════════════════════════════════════════════════════════════════ */ /* Header chrome (filled by search.js with the "N de M" count). */ .yb-sugg-header { display: flex; align-items: baseline; justify-content: space-between; padding: 12px 16px 8px; border-bottom: 1px solid var(--yb-hair); } .yb-sugg-header-label { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--yb-panel-muted); } .yb-sugg-header-count { font-size: 12px; font-weight: 700; color: var(--yb-acc); } /* The scrollable list area — custom 8px scrollbar thumb. */ .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestions-list, .dgwt-wcas-suggestions-wrapp { scrollbar-width: thin; scrollbar-color: var(--yb-acc-fill) transparent; } .dgwt-wcas-suggestions-wrapp::-webkit-scrollbar, .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestions-list::-webkit-scrollbar { width: 8px; } .dgwt-wcas-suggestions-wrapp::-webkit-scrollbar-thumb, .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestions-list::-webkit-scrollbar-thumb { background: var(--yb-acc-fill); border-radius: 8px; } .dgwt-wcas-suggestions-wrapp::-webkit-scrollbar-thumb:hover, .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestions-list::-webkit-scrollbar-thumb:hover { background: var(--yb-acc-tint); } /* ── Suggestion row ──────────────────────────────────────────────────────── * A product row: 48px tile thumb, ellipsis title, muted band sub-line, bold * price, and an accent left-bar + chevron on the active/hover state. */ .dgwt-wcas-suggestion { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-left: 3px solid transparent; cursor: pointer; color: inherit; /* Entrance animation is GATED behind .yb-animate-in (added by search.js only on * the first render of an open session). FiboSearch rebuilds the row list on EVERY * keystroke, so an unconditional entrance animation replays each letter → the panel * "blinks" while typing. Gating = entrance once on open, no replay on refine. */ } /* Per-row stagger entrance — JS sets --yb-row-i for the delay (falls back to 0). */ .dgwt-wcas-suggestion.yb-animate-in { animation: ybrow .26s ease both; animation-delay: calc(var(--yb-row-i, 0) * .03s); } /* Product image tile (48px square). */ .dgwt-wcas-suggestion .dgwt-wcas-si { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 10px; overflow: hidden; background: var(--yb-tile-bg); display: flex; align-items: center; justify-content: center; } .dgwt-wcas-suggestion .dgwt-wcas-si img { width: 100%; height: 100%; object-fit: cover; } /* Content column wrapper (real DOM: .dgwt-wcas-content-wrapp holds .dgwt-wcas-st * title column + .dgwt-wcas-meta price). Title + meta-line stack vertically. */ .dgwt-wcas-suggestion .dgwt-wcas-content-wrapp { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; } .dgwt-wcas-suggestion .dgwt-wcas-st { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; /* P2 — clear separation between title and band·member sub-line. */ } .dgwt-wcas-suggestion .dgwt-wcas-st-title { display: block; font-size: 14px; font-weight: 600; color: var(--yb-panel-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dgwt-wcas-suggestion .dgwt-wcas-st-title strong { font-weight: 800; color: var(--yb-panel-fg); } /* Band·member sub-line (Phase 19 .yb-sugg-meta-line) — muted, its OWN line. * !important display:flex defeats any inline/native display so it always drops * below the title (P2 — was butting against the title on dark palettes). */ .dgwt-wcas-suggestion .yb-sugg-meta-line { display: flex !important; gap: 6px; align-items: center; margin-top: 1px; font-size: 12px; line-height: 1.2; color: var(--yb-panel-muted); } .dgwt-wcas-suggestion .dgwt-wcas-meta { flex: 0 0 auto; text-align: right; } .yb-sugg-band { font-weight: 700; color: var(--yb-acc); } /* Idol name removed from list rows — band only (matches the Details Panel). */ .yb-sugg-member { display: none; } .yb-sugg-rating { display: inline-flex; align-items: center; font-size: 12px; } /* Native price node — bold. */ .dgwt-wcas-suggestion .dgwt-wcas-sp { flex: 0 0 auto; font-size: 13px; font-weight: 800; color: var(--yb-panel-fg); white-space: nowrap; } /* Sale price in a row: old price struck + muted, sale price prominent. */ .dgwt-wcas-suggestion .dgwt-wcas-sp del { margin-right: 5px; font-weight: 600; color: var(--yb-panel-muted); text-decoration: line-through; } .dgwt-wcas-suggestion .dgwt-wcas-sp ins { text-decoration: none; color: var(--yb-panel-fg); } /* Chevron — hidden until the row is active. */ .dgwt-wcas-suggestion::after { content: ""; flex: 0 0 8px; width: 8px; height: 8px; margin-left: 2px; border-right: 2px solid var(--yb-acc); border-top: 2px solid var(--yb-acc); transform: rotate(45deg); opacity: 0; transition: opacity .14s ease; } /* Active / hover row — accent tint fill + 3px left accent bar + chevron. * Hook BOTH the FiboSearch selected-class (`.dgwt-wcas-suggestion-selected`) and * native :hover, plus a JS-applied `.yb-row-active` so keyboard nav decorates too. */ .dgwt-wcas-suggestion:hover, .dgwt-wcas-suggestion-selected, .dgwt-wcas-suggestion.yb-row-active { background: var(--yb-acc-tint); border-left-color: var(--yb-acc); } .dgwt-wcas-suggestion:hover::after, .dgwt-wcas-suggestion-selected::after, .dgwt-wcas-suggestion.yb-row-active::after { opacity: 1; } /* Native English "See all products (74)" row — HIDDEN. We relocate it as a * Spanish accent link in the footer ("Ver todos los productos (N) →"), built by * search.js from this row's href + total. */ .dgwt-wcas-suggestion-more, .js-dgwt-wcas-suggestion-more { display: none !important; } /* ── Footer — only the "Ver todos" link, right-aligned (chrome filled by search.js; * keyboard hints removed per design). */ .yb-sugg-footer { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: auto; /* pin to the bottom of the (height-matched) list pane. */ padding: 6px 16px; border-top: 1px solid var(--yb-hair); font-size: 12px; color: var(--yb-panel-muted); } .yb-sugg-footer-link { font-weight: 800; color: var(--yb-acc); text-decoration: none; white-space: nowrap; } .yb-sugg-footer-link:hover { text-decoration: underline; } /* ═══════════════════════════════════════════════════════════════════════════ * 2b. CATEGORY / TAXONOMY SEARCH MODE — when the query matches product categories * (e.g. "album") FiboSearch adds: section-header rows ("Categorías"/"Productos"), * clickable category rows (.dgwt-wcas-suggestion-tax) in the list, and a taxonomy * PREVIEW in the left pane (.dgwt-wcas-products-in-cat: title + compact product rows * + a "Ver todos los productos" link). Skin them all to match the product UI. * ═════════════════════════════════════════════════════════════════════════ */ /* Section-header rows ("Categorías" / "Productos") — quiet uppercase labels, NOT * clickable rows: no left accent bar, no hover tint, no chevron. */ .dgwt-wcas-suggestion.dgwt-wcas-suggestion-headline { padding: 14px 16px 4px; border-left: none; cursor: default; pointer-events: none; background: transparent !important; } .dgwt-wcas-suggestion-headline .dgwt-wcas-st { display: block; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--yb-panel-muted); } .dgwt-wcas-suggestion-headline::after { display: none; /* no chevron on a header */ } /* Category rows (.dgwt-wcas-suggestion-tax) — a tag icon (in the thumb slot) + the * category name ("Album" matched = accent, then plain text) + "en " muted, on * one line. The base .dgwt-wcas-suggestion supplies the flex row, padding, hover tint * + left accent bar + chevron (kept — these ARE clickable). */ .dgwt-wcas-suggestion-tax::before { content: ""; flex: 0 0 20px; width: 20px; height: 20px; margin-left: 2px; align-self: center; background-color: var(--yb-acc); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='black'%3E%3Cpath d='M2 6a2 2 0 012-2h4l2 2h6a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='black'%3E%3Cpath d='M2 6a2 2 0 012-2h4l2 2h6a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z'/%3E%3C/svg%3E") center/contain no-repeat; } /* Keep the label inline so "Album" + "s" read as "Albums" (do NOT flex this node). */ .dgwt-wcas-suggestion-tax .dgwt-wcas-st { display: block; flex: 1 1 auto; min-width: 0; font-size: 14px; line-height: 1.3; color: var(--yb-panel-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dgwt-wcas-suggestion-tax .dgwt-wcas-st strong { font-weight: 800; color: var(--yb-acc); /* matched query part highlighted */ } .dgwt-wcas-suggestion-tax .dgwt-wcas-st-breadcrumbs { display: inline; /* defeat FiboSearch's full-width inline-block (caused ellipsis clip) */ width: auto; margin-left: 8px; font-size: 12px; font-weight: 600; color: var(--yb-panel-muted); } .dgwt-wcas-suggestion-tax .dgwt-wcas-st-label-in { margin-right: 4px; } /* ── Left pane: taxonomy preview (.dgwt-wcas-details-inner-taxonomy) ───────── */ /* Header: "CATEGORÍA:" small uppercase muted, then the category name in bold. */ .dgwt-wcas-details-wrapp .dgwt-wcas-datails-title { display: block; margin: 0 0 12px; font-size: 17px; font-weight: 800; line-height: 1.2; color: var(--yb-panel-fg); } .dgwt-wcas-details-wrapp .dgwt-wcas-details-title-tax { display: block; margin-bottom: 3px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--yb-panel-muted); } /* Compact product rows in the preview — 48px thumb + clamped title + price. */ .dgwt-wcas-details-wrapp .dgwt-wcas-tax-product-details { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--yb-hair); text-decoration: none; color: inherit; } .dgwt-wcas-details-wrapp .dgwt-wcas-products-in-cat .dgwt-wcas-tax-product-details:first-of-type { border-top: none; } .dgwt-wcas-details-wrapp .dgwt-wcas-tpd-image { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 10px; overflow: hidden; background: var(--yb-tile-bg); } .dgwt-wcas-details-wrapp .dgwt-wcas-tpd-image img { width: 100%; height: 100%; object-fit: cover; } /* Mirror the right-pane row: title + band (below) on the left, price on the right. * Grid (areas independent of DOM order) so the band — injected before the price by * the mu-plugin — still lands on its own line below the title. */ .dgwt-wcas-details-wrapp .dgwt-wcas-tpd-rest { flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "title price" "band price"; align-items: center; column-gap: 10px; } .dgwt-wcas-details-wrapp .dgwt-wcas-tpd-rest-title { grid-area: title; min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--yb-panel-fg); } .dgwt-wcas-details-wrapp .dgwt-wcas-tax-product-details:hover .dgwt-wcas-tpd-rest-title { color: var(--yb-acc); } /* Band sub-line — accent, matching the right-pane .yb-sugg-band. */ .dgwt-wcas-details-wrapp .yb-tpd-band { grid-area: band; margin-top: 2px; font-size: 12px; font-weight: 700; color: var(--yb-acc); } .dgwt-wcas-details-wrapp .dgwt-wcas-tpd-price { grid-area: price; font-size: 13px; font-weight: 800; white-space: nowrap; color: var(--yb-panel-fg); } /* Keep preview rows clean — no star rating (would be an unplaced grid item). */ .dgwt-wcas-details-wrapp .dgwt-wcas-tax-product-details .dgwt-wcas-pd-rating { display: none; } .dgwt-wcas-details-wrapp .dgwt-wcas-tpd-price .amount, .dgwt-wcas-details-wrapp .dgwt-wcas-tpd-price .woocommerce-Price-amount { color: var(--yb-panel-fg); } /* "Ver todos los productos (N)" link under the preview — muted, centered, hairline. */ .dgwt-wcas-details-wrapp .dgwt-wcas-details-more-products { display: block; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--yb-hair); text-align: center; font-size: 13px; font-weight: 700; text-transform: none; /* defeat FiboSearch's uppercase on this link */ letter-spacing: 0; color: var(--yb-panel-muted); text-decoration: none; } /* ═══════════════════════════════════════════════════════════════════════════ * 3. DETAILS PANEL (left pane) — image tile, badge, title, #SKU, band pill, * price + MXN, stock pill, qty stepper + CTA, "Ver producto completo →". * * REAL FiboSearch v1.33.0 Details Panel DOM (verified via live outerHTML dump): * .dgwt-wcas-details-inner-active the SHOWN product block (others hidden) * a > .dgwt-wcas-details-main-image the image tile (wrapped in a PDP ) * .dgwt-wcas-details-product-title title (an ) * .dgwt-wcas-details-product-sku plain SKU text node * .dgwt-wcas-pd-price price wrapper (> .woocommerce-Price-amount) * .yb-panel-meta > .yb-panel-band/.yb-panel-member our band/member (Phase 19) * .yb-stock-pill our pill (Plan 02) * .dgwt-wcas-stock FiboSearch's OWN plain stock line (DUP — hide) * .dgwt-wcas-details-hr native divider * .dgwt-wcas-pd-addtc .quantity + a.add_to_cart_button native qty + CTA anchor * ═════════════════════════════════════════════════════════════════════════ */ /* The active product block fills the panel as a vertical stack. */ .dgwt-wcas-details-wrapp .dgwt-wcas-details-inner { display: none; /* only the active block shows (FiboSearch toggles -active). */ } .dgwt-wcas-details-wrapp .dgwt-wcas-details-inner-active { display: block; } .dgwt-wcas-details-wrapp .dgwt-wcas-product-details { display: block; } /* Image tile — the PDP that wraps .dgwt-wcas-details-main-image becomes the * positioning context so the PHOTOCARD badge (its preceding sibling) overlays it * cleanly. We pull the badge into the tile via a wrapper-relative anchor below. */ .dgwt-wcas-details-wrapp .dgwt-wcas-product-details { position: relative; /* positioning context for the badge (sibling of the ). */ } .dgwt-wcas-details-wrapp .dgwt-wcas-product-details > a:has(.dgwt-wcas-details-main-image), .dgwt-wcas-details-wrapp .dgwt-wcas-details-main-image { display: block; position: relative; width: 100%; border-radius: 14px; overflow: hidden; } .dgwt-wcas-details-wrapp .dgwt-wcas-details-main-image { aspect-ratio: 4 / 5; background: var(--yb-tile-bg); margin-bottom: 14px; } .dgwt-wcas-details-wrapp .dgwt-wcas-details-main-image img { position: absolute; /* fill the tile regardless of FiboSearch's max-height cap. */ inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; /* override FiboSearch's default img cap (was leaving a bottom gap). */ object-fit: cover; object-position: 50% 30%; /* bias toward the top — keep faces/heads in frame. */ } /* Title — 19px / 800, no underline (it is an ). */ .dgwt-wcas-details-wrapp .dgwt-wcas-details-product-title { display: block; font-size: 19px; font-weight: 800; line-height: 1.25; color: var(--yb-panel-fg); text-decoration: none; margin: 0 0 6px; } .dgwt-wcas-details-wrapp .dgwt-wcas-details-product-title:hover { color: var(--yb-acc); } /* #SKU — muted, prefixed with "#". JS pulls it up next to the band pill so the two * share ONE inline row ("BAND · #SKU") above the price. */ .dgwt-wcas-details-wrapp .dgwt-wcas-details-product-sku { display: inline; vertical-align: middle; font-size: 12px; font-weight: 600; color: var(--yb-panel-muted); } .dgwt-wcas-details-wrapp .dgwt-wcas-details-product-sku::before { content: "#"; } /* Band/member meta (Phase 19 .yb-panel-meta) — band PILL (accent on tint) + * member. Pulled UP next to the #SKU via a negative margin so the mockup's * "band pill · #SKU" single row reads together between title and price. */ .dgwt-wcas-details-wrapp .yb-panel-meta { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 8px 6px 0; vertical-align: middle; } .dgwt-wcas-details-wrapp .yb-panel-band { display: inline-block; padding: 3px 9px; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--yb-acc); background: var(--yb-acc-tint); border-radius: 999px; } .dgwt-wcas-details-wrapp .yb-panel-member { display: none; /* idol name removed from the panel per design — band pill only. */ } /* Price — 26px 800 near-black panelText, with a muted "MXN" suffix (mockup). */ .dgwt-wcas-details-wrapp .dgwt-wcas-pd-price { margin: 4px 0 12px; line-height: 1.15; /* >1 so a wrapped variable-product RANGE never overlaps */ } .dgwt-wcas-details-wrapp .dgwt-wcas-pd-price .woocommerce-Price-amount, .dgwt-wcas-details-wrapp .dgwt-wcas-pd-price .amount { font-size: 26px; font-weight: 800; color: var(--yb-panel-fg); } .dgwt-wcas-details-wrapp .dgwt-wcas-pd-price .woocommerce-Price-amount::after { content: " MXN"; font-size: 12px; font-weight: 600; color: var(--yb-panel-muted); } /* Variable-product price RANGE (min – max): shrink the amounts and drop the * per-amount " MXN" so "$min – $max" reads cleanly instead of wrapping/overlapping. */ .dgwt-wcas-details-wrapp .dgwt-wcas-pd-price:has(.woocommerce-Price-amount ~ .woocommerce-Price-amount) .woocommerce-Price-amount { font-size: 18px; } .dgwt-wcas-details-wrapp .dgwt-wcas-pd-price:has(.woocommerce-Price-amount ~ .woocommerce-Price-amount) .woocommerce-Price-amount::after { content: ""; } /* SALE price — struck old price on its OWN line above the prominent sale price * (keeps the "$sale MXN" together instead of orphaning " MXN" to a new line). */ .dgwt-wcas-details-wrapp .dgwt-wcas-pd-price del { display: block; margin-bottom: 1px; text-decoration: line-through; opacity: .7; } .dgwt-wcas-details-wrapp .dgwt-wcas-pd-price del .woocommerce-Price-amount { font-size: 15px; font-weight: 600; color: var(--yb-panel-muted); } .dgwt-wcas-details-wrapp .dgwt-wcas-pd-price del .woocommerce-Price-amount::after { content: ""; /* no " MXN" on the struck-through old price */ } .dgwt-wcas-details-wrapp .dgwt-wcas-pd-price ins { text-decoration: none; } /* Suppress FiboSearch's OWN plain-text stock line — our .yb-stock-pill replaces it * (gap 2: green pill AND plain "Solo quedan 2 disponibles" both rendered). */ .dgwt-wcas-details-wrapp .dgwt-wcas-stock { display: none; } /* Native divider — soften to our hairline. */ .dgwt-wcas-details-wrapp .dgwt-wcas-details-hr { border: 0; border-top: 1px solid var(--yb-hair); margin: 10px 0; } /* ── Stock pill (FIXED semantic colors — intentionally NOT band-themed) ────── * .yb-stock-pill--low = green (qty 2..threshold); .yb-stock-pill--last = red * (qty==1). Each carries a .yb-stock-pill-dot pulsing dot (ybpulse). */ .yb-stock-pill { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; margin: 0 0 14px; font-size: 12px; font-weight: 700; border-radius: 999px; } .yb-stock-pill-dot { position: relative; flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: currentColor; } /* Radar-ping ring around the dot (ybpulse mirrors style.css yb-dot-pulse). */ .yb-stock-pill-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: currentColor; animation: ybpulse 1.6s ease-out infinite; } .yb-stock-pill--low { color: #1E8E5A; background: #E7F6EE; } .yb-stock-pill--last { color: #D64545; background: #FBEAEA; } /* ── Native qty stepper + add-to-cart — STYLE the native nodes, never rebuild. * REAL DOM: .dgwt-wcas-pd-addtc > form > .quantity input + the add-to-cart is a * WooCommerce AJAX ANCHOR `a.add_to_cart_button` (NOT a