/* Multi-supplier "Other sellers on Dumyah" drawer. Paired with catalog/view/javascript/catalog/ms-drawer.js and the _ms_alternatives_sidebar.tpl partial. RTL-safe via logical properties; bottom-sheet layout at ≤767px. */ /* ── Summary box ─────────────────────────────────────────────── */ .ms-sellers-summary { appearance: none; width: 100%; margin-top: 12px; padding: 12px 14px; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 8px; text-align: start; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s, background 0.15s; display: block; } .ms-sellers-summary:hover, .ms-sellers-summary:focus-visible { border-color: #93c5fd; background: #f8fafc; outline: none; } .ms-sellers-summary:focus-visible { box-shadow: 0 0 0 2px #1d4ed8; } .ms-sellers-summary__title { display: block; font-weight: 700; color: #111827; font-size: 13px; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid #e5e7eb; } .ms-sellers-summary__body { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; line-height: 1.4; color: #1f2937; } .ms-sellers-summary__line { flex: 1; color: #1f2937; } /* Chevron — pseudo-element so it flips automatically in RTL via the transform rule below. */ .ms-sellers-summary__chevron { width: 8px; height: 14px; flex: 0 0 auto; position: relative; } .ms-sellers-summary__chevron::before { content: ''; position: absolute; top: 50%; inset-inline-end: 0; width: 8px; height: 8px; border-right: 2px solid #6b7280; border-top: 2px solid #6b7280; transform: translateY(-50%) rotate(45deg); } [dir="rtl"] .ms-sellers-summary__chevron::before { transform: translateY(-50%) rotate(225deg); } /* ── Drawer ──────────────────────────────────────────────────── */ .ms-drawer-wrap { position: fixed; inset: 0; z-index: 9999; pointer-events: none; } .ms-drawer-wrap.is-open { pointer-events: auto; } .ms-drawer-backdrop { position: absolute; inset: 0; background: rgba(17, 24, 39, 0); transition: background 0.25s ease-out; } .ms-drawer-wrap.is-open .ms-drawer-backdrop { background: rgba(17, 24, 39, 0.45); } .ms-drawer { position: absolute; top: 0; bottom: 0; inset-inline-end: 0; width: min(420px, 100%); max-width: 100%; background: #ffffff; box-shadow: 0 0 30px rgba(17, 24, 39, 0.18); transform: translateX(100%); transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1); display: flex; flex-direction: column; overflow: hidden; } [dir="rtl"] .ms-drawer { transform: translateX(-100%); } .ms-drawer-wrap.is-open .ms-drawer { transform: translateX(0); } /* Page scroll lock while drawer is open. Class is set on (documentElement) because that's where Dumyah's main scroll lives; locking both html and body covers either-scroll layouts. touch-action:none stops mobile rubber-banding on the backdrop; the drawer body uses touch-action:auto (default) so its own scroll continues to work. */ html.ms-drawer-locked, html.ms-drawer-locked body { overflow: hidden; touch-action: none; overscroll-behavior: contain; } html.ms-drawer-locked .ms-drawer__body { touch-action: auto; } .ms-drawer__header { flex: 0 0 auto; display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 12px; border-bottom: 1px solid #e5e7eb; background: #f9fafb; } /* Amazon-style product context row inside the drawer header: thumb · title + rating · close button. align-items:center makes the thumb, title block, and close button all vertically centered against the tallest sibling — without it the close button stuck to the top of the row while the title sat in the middle (because .ms-drawer__product-info used align-self:center), leaving the X visibly mis-aligned. */ .ms-drawer__product { display: flex; align-items: center; gap: 12px; } .ms-drawer__product-img { flex: 0 0 auto; width: 56px; height: 56px; object-fit: contain; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 6px; padding: 2px; } .ms-drawer__product-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .ms-drawer__product-title { margin: 0; font-size: 14px; font-weight: 700; color: #111827; line-height: 1.35; /* Two-line clamp keeps the header compact even for the longest product names. The clamp is a soft cap; one-line titles render at their natural height. */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ms-drawer__product-rating { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #4b5563; line-height: 1; } .ms-drawer__product-rating .reviewed-stars { /* Reuse the PDP star sprite, but shrink it for the header: the PDP defines each star at 30px (150px row); here we scale the sprite to ~16px/star (80px row) so the rating reads as a compact inline label, not a full-size rating widget. The inner span keeps its inline `width: %`, so the fill stays proportional. */ flex: 0 0 auto; width: 80px; height: 16px; background-size: 16px auto; } .ms-drawer__product-rating .reviewed-stars span { height: 16px; background-size: 16px auto; } .ms-drawer__rating-num { font-weight: 600; color: #111827; } .ms-drawer__rating-count { color: #6b7280; } /* Secondary "Sellers on Dumyah" header — smaller than the product title above. */ .ms-drawer__titles { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; } .ms-drawer__title, .ms-drawer__subtitle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .ms-drawer__title { margin: 0; font-size: 14px; font-weight: 700; color: #111827; line-height: 1.3; flex: 0 0 auto; } .ms-drawer__subtitle { margin: 0; font-size: 11.5px; color: #6b7280; line-height: 1.3; flex: 1 1 auto; } /* Close button — circular, sits in the product context row, vertically centered against the thumb + title block via the parent's align-items:center. margin-inline-end pulls it clear of the drawer's rounded corner (the corner radius eats ~14px of usable space at the top-right, so without inset the button visually crowds the edge). Border + tinted bg keep the ring readable against the white drawer. */ .ms-drawer__close { appearance: none; display: inline-flex; align-items: center; justify-content: center; background: #f3f4f6; border: 1px solid #cbd5e1; border-radius: 50%; width: 34px; height: 34px; color: #111827; cursor: pointer; flex: 0 0 auto; margin-inline-end: 22px; box-shadow: 0 1px 2px rgba(17, 24, 39, 0.06); transition: background 0.15s, border-color 0.15s, transform 0.05s; } .ms-drawer__close svg { width: 18px; height: 18px; } /* Fallback layout (no product context available): close pinned inline to the secondary title row. */ .ms-drawer__close--inline { margin-inline-start: auto; } .ms-drawer__close:hover { background: #f9fafb; border-color: #cbd5e1; } .ms-drawer__close:active { transform: scale(0.94); } .ms-drawer__close:focus-visible { outline: none; box-shadow: 0 0 0 2px #ffffff, 0 0 0 3px rgba(255, 51, 153, 0.55); border-color: rgb(255, 51, 153); } .ms-drawer__close svg { display: block; } .ms-drawer__body { flex: 1 1 auto; overflow-y: auto; padding: 12px 16px 24px; } /* ── Drawer row ───────────────────────────────────────────────── Amazon-style "Sellers on" layout: bold price + optional discount and strikethrough on the start side, primary action pinned to the end. Delivery, stock, and trust badges flow as plain text below — no chip pills. Inherits Dumyah's body font-family. Tighter spacing tuned for a refined, compact feel. */ .ms-drawer-row { border-bottom: 1px solid #f1f3f5; padding: 12px 4px; display: flex; flex-direction: column; gap: 5px; } .ms-drawer-row:last-child { border-bottom: none; } /* Winner row — solid pale-pink wash + a Dumyah-pink accent bar on the start edge. Clearer than the previous fade-to-transparent gradient, which all but disappeared on light backgrounds. */ .ms-drawer-row--winner { background: #fff0f6; border: 1px solid #fbcfe2; border-inline-start: 3px solid rgb(255, 51, 153); border-radius: 8px; /* Logical padding so the button-side (inline-end) inset matches the plain rows. Normal rows inset the action by 4px (padding only); the winner adds a 1px border, so 3px padding + 1px border = 4px keeps the Add-to-cart / counter aligned across all rows, in LTR and RTL. The accent-bar side (inline-start) keeps its roomier 14px. */ padding-block: 12px; padding-inline-start: 14px; padding-inline-end: 3px; margin-bottom: 6px; } /* Top row: price block on the start side, Add-to-cart on the end. Price block stacks: optional Recommended chip → discount + price inline → optional "List price" strike below. */ .ms-drawer-row__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .ms-drawer-row__price-block { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; } .ms-drawer-row__recommended { align-self: flex-start; background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; border-radius: 999px; padding: 1px 7px; font-size: 9.5px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; margin-bottom: 2px; line-height: 1.4; } .ms-drawer-row__price-line { display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; } .ms-drawer-row__discount { color: #b91c1c; font-size: 12px; font-weight: 600; line-height: 1; } .ms-drawer-row__price { font-size: 18px; line-height: 1.1; font-weight: 700; color: #111827; white-space: nowrap; letter-spacing: -0.01em; } .ms-drawer-row__price--promo { color: #111827; } .ms-drawer-row__currency { font-size: 11px; font-weight: 500; color: #6b7280; /* Negative offset pulls the currency tight against the price, countering the parent .ms-drawer-row__price-line `gap: 5px`. */ margin-inline-start: -3px; text-transform: uppercase; letter-spacing: 0.02em; } .ms-drawer-row__list-price { font-size: 11px; color: #6b7280; line-height: 1.3; } .ms-drawer-row__price-was { text-decoration: line-through; color: #9ca3af; } /* Plain text delivery line — replaces the old tier pill. Date is rendered in slightly bolder weight; the [data-tier] attribute is preserved so we can re-tint by tier later if needed. */ .ms-drawer-row__delivery { font-size: 12px; font-weight: 600; color: #111827; line-height: 1.4; margin-top: 1px; } .ms-drawer-row__delivery[data-tier="unavailable"], .ms-drawer-row__delivery[data-tier="extended"] { color: #6b7280; font-weight: 500; } /* Quantity-aware escalation note: the selected qty exceeds this offer's fast-delivery stock, so the (slower) supplier estimate above applies. Muted amber so it reads as an advisory, not an error. Injected by ms-drawer.js. */ .ms-drawer-row__delivery-note { font-size: 11.5px; font-weight: 500; color: #92611c; line-height: 1.35; margin-top: 2px; } .ms-drawer-row__points { margin-top: 3px; line-height: 1.4; } .ms-drawer-row__points-line { display: flex; align-items: center; flex-wrap: wrap; } .ms-drawer-row__points-line + .ms-drawer-row__points-line { margin-top: 2px; } .ms-drawer-row__points-line img { position: relative; top: 1px; } /* Meta line: stock · save · badges. All plain text with a subtle middle-dot separator (CSS-driven so PHP doesn't have to inject it). Each item keeps its semantic data-* attribute for future targeting. */ .ms-drawer-row__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 8px; font-size: 12.5px; color: #6b7280; line-height: 1.4; } .ms-drawer-row__meta > * + *::before { content: '·'; color: #d1d5db; margin-inline-end: 8px; } .ms-drawer-row__stock { font-weight: 500; } .ms-drawer-row__stock--calm { color: #4b5563; } .ms-drawer-row__stock--urgent { color: #b91c1c; font-weight: 600; } .ms-drawer-row__stock--muted { color: #9ca3af; } .ms-drawer-row__save { color: #047857; font-weight: 600; } .ms-drawer-row__badge { color: #4b5563; } .ms-drawer-row__badge[data-badge="verified_supplier"] { color: #1d4ed8; } .ms-drawer-row__badge[data-badge="fast_dispatch"] { color: #047857; } .ms-drawer-row__badge[data-badge="top_rated"] { color: #b45309; } /* ── Action group: sits on the end of the top row, holding either the Add-to-cart button or (once the offer is in the cart) the − qty + counter that replaces it in the same footprint. ── */ .ms-drawer-row__action { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: 0 0 auto; } /* Right-side action cluster: per-offer favourite heart sitting INLINE beside the Add-to-cart / qty stepper (heart on the start side, stepper at the edge), top-aligned next to the price so there's no empty gap under it. ── */ .ms-drawer-row__end { display: flex; flex-direction: row; align-items: center; gap: 8px; flex: 0 0 auto; } /* Per-offer favourite heart. Outline by default, solid pink when this exact offer is favourited (.is-fav, toggled by ms-drawer.js). Mirrors the brand-pink accent used by the counter/winner bar. */ .ms-drawer-row__fav { width: 30px; height: 30px; padding: 0; border: 1px solid #f0c3d8; border-radius: 50%; background: #ffffff; color: rgb(255, 51, 153); font-size: 16px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s ease, border-color .15s ease, transform .1s ease; } .ms-drawer-row__fav:hover { background: #fff0f6; } .ms-drawer-row__fav:active { transform: scale(0.92); } .ms-drawer-row__fav.is-fav { background: rgb(255, 51, 153); border-color: rgb(255, 51, 153); } .ms-drawer-row__fav[data-busy="1"] { opacity: 0.55; pointer-events: none; } /* The journal-icons font has no outline-heart glyph, so render the solid heart (icon-heart) always and fake the outline with a transparent fill + pink stroke. Favourited → solid white heart on the pink button. */ .ms-drawer-row__fav .icon-heart { line-height: 1; color: transparent; -webkit-text-stroke: 1.4px rgb(255, 51, 153); } .ms-drawer-row__fav.is-fav .icon-heart { color: #ffffff; -webkit-text-stroke: 0; } /* Temu-style quantity counter — same pill footprint as the Add button it replaces, so the morph doesn't shift the row. Pink to match the brand; the − / + are flat tap targets flanking the count. */ .ms-drawer-row__counter { display: inline-flex; align-items: center; justify-content: space-between; min-width: 96px; min-height: 30px; border: 1px solid rgb(255, 51, 153); border-radius: 999px; background: #ffffff; overflow: hidden; flex: 0 0 auto; box-shadow: 0 1px 2px rgba(255, 51, 153, 0.18); } .ms-drawer-row__counter[hidden] { display: none; } .ms-counter-btn { appearance: none; background: transparent; border: none; color: rgb(255, 51, 153); width: 30px; height: 30px; font-size: 18px; line-height: 1; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; transition: background 0.15s, color 0.15s, opacity 0.15s; } .ms-counter-btn:hover:not(:disabled) { background: rgba(255, 51, 153, 0.10); } .ms-counter-btn:disabled { opacity: 0.4; cursor: not-allowed; } .ms-counter-value { flex: 1 1 auto; text-align: center; min-width: 24px; padding: 0 2px; font-size: 13px; font-weight: 700; color: #111827; user-select: none; } /* Add-to-cart: Dumyah pink pill. Sits on the top row to the right of the price block, directly below the qty stepper. Compact size keeps the row feeling refined rather than chunky. */ .ms-drawer-row__add-btn { appearance: none; background: rgb(255, 51, 153); color: #ffffff; border: 1px solid rgb(255, 51, 153); border-radius: 999px; padding: 6px 14px; font-size: 12px; font-weight: 600; line-height: 1.3; min-width: 96px; min-height: 30px; white-space: nowrap; cursor: pointer; flex: 0 0 auto; box-shadow: 0 1px 2px rgba(255, 51, 153, 0.18); transition: background 0.15s, border-color 0.15s, opacity 0.15s, box-shadow 0.15s; } .ms-drawer-row__add-btn:hover { background: rgb(230, 36, 132); border-color: rgb(230, 36, 132); } .ms-drawer-row__add-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px #ffffff, 0 0 0 3px rgb(255, 51, 153); } .ms-drawer-row__add-btn:disabled { opacity: 0.55; cursor: not-allowed; } .ms-drawer-row__add-btn.is-loading { opacity: 0.75; cursor: progress; } .ms-row-msg { margin-top: 6px; padding: 6px 10px; border-radius: 4px; font-size: 12px; line-height: 1.3; opacity: 1; transition: opacity 0.2s ease-out; } .ms-row-msg--success { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; } .ms-row-msg--error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; } .ms-row-msg--leaving { opacity: 0; } /* ── Mobile: drawer becomes a bottom sheet ── */ @media (max-width: 767px) { .ms-drawer { top: auto; bottom: 0; inset-inline-end: 0; width: 100%; max-height: 96vh; border-top-left-radius: 14px; border-top-right-radius: 14px; transform: translateY(100%); } [dir="rtl"] .ms-drawer { transform: translateY(100%); } .ms-drawer-wrap.is-open .ms-drawer { transform: translateY(0); } .ms-drawer__header { padding: 12px 14px 10px; gap: 10px; } .ms-drawer__product-img { width: 52px; height: 52px; } .ms-drawer__product-title { font-size: 13.5px; } .ms-drawer__product-rating { font-size: 11.5px; } .ms-drawer__title { font-size: 13.5px; } .ms-drawer__subtitle { font-size: 11px; } .ms-drawer__body { padding: 10px 14px 28px; } .ms-drawer__close { width: 34px; height: 34px; } .ms-drawer-row { padding: 12px 4px; } .ms-drawer-row--winner { padding-block: 12px; padding-inline-start: 14px; padding-inline-end: 3px; } .ms-drawer-row__top { gap: 10px; } .ms-drawer-row__price { font-size: 19px; } .ms-drawer-row__discount { font-size: 12.5px; } .ms-drawer-row__delivery { font-size: 12.5px; } .ms-drawer-row__meta { font-size: 11.5px; gap: 3px 10px; } .ms-drawer-row__meta > * + *::before { margin-inline-end: 10px; } .ms-drawer-row__add-btn { padding: 7px 16px; font-size: 12.5px; min-width: 104px; min-height: 32px; } .ms-drawer-row__counter { min-width: 104px; min-height: 32px; } .ms-counter-btn { width: 32px; height: 32px; font-size: 19px; } .ms-counter-value { font-size: 13.5px; } .ms-sellers-summary { margin-top: 14px; padding: 14px; } .ms-sellers-summary__title { font-size: 14px; } .ms-sellers-summary__body { font-size: 13.5px; } }