/* ===== Google Reviews → Card slider (overrides plugin widths) ===== */ .reviews-slider{ --gap:16px; --card: clamp(260px, 32vw, 420px); --radius:16px; --shadow:0 8px 24px rgba(0,0,0,.08); --bg:#fff; --ink:#111827; --muted:#6b7280; position:relative; padding:8px 0; } /* Force a horizontal track across popular plugins */ .reviews-slider .rplg-reviews, .reviews-slider .wpgr-list, .reviews-slider .grw-reviews, .reviews-slider .ti-reviews-container, .reviews-slider .wp-google-list, .reviews-slider ul{ display:flex !important; gap:var(--gap); overflow-x:auto !important; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding:8px 6px; margin:0 !important; list-style:none !important; border:0 !important; } .reviews-slider .rplg-reviews::-webkit-scrollbar, .reviews-slider .wpgr-list::-webkit-scrollbar, .reviews-slider .grw-reviews::-webkit-scrollbar, .reviews-slider .wp-google-list::-webkit-scrollbar{ display:none; } /* Kill plugin-imposed 100% widths */ .reviews-slider li, .reviews-slider .rplg-review, .reviews-slider .wpgr-review, .reviews-slider .grw-review, .reviews-slider .ti-review, .reviews-slider .wp-google-review{ width:auto !important; max-width:none !important; flex:0 0 var(--card) !important; scroll-snap-align:start; box-sizing:border-box; border:1px solid #eef0f3 !important; background:var(--bg) !important; color:var(--ink) !important; border-radius:var(--radius) !important; box-shadow:var(--shadow) !important; padding:16px !important; } /* Remove full-width lines some themes add */ .reviews-slider .rplg-review + .rplg-review, .reviews-slider .wpgr-review + .wpgr-review, .reviews-slider .grw-review + .grw-review, .reviews-slider li + li{ border-top:0 !important; } /* Head row */ .reviews-slider .rplg-header, .reviews-slider .wpgr-head, .reviews-slider .grw-header, .reviews-slider .ti-header, .reviews-slider .wp-google-head{ display:flex; align-items:center; gap:12px; margin-bottom:10px; border:0 !important; } .reviews-slider .rplg-avatar img, .reviews-slider .wpgr-avatar img, .reviews-slider .grw-avatar img, .reviews-slider .ti-avatar img, .reviews-slider .wp-google-avatar img{ width:48px; height:48px; border-radius:50%; object-fit:cover; } /* Name / time / stars */ .reviews-slider .rplg-name, .reviews-slider .wpgr-name, .reviews-slider .grw-name, .reviews-slider .ti-name, .reviews-slider .wp-google-name{ font-weight:600; line-height:1.2; } .reviews-slider .rplg-time, .reviews-slider .wpgr-time, .reviews-slider .grw-time, .reviews-slider .ti-time, .reviews-slider .wp-google-time{ font-size:.85rem; color:var(--muted); } .reviews-slider .rplg-stars, .reviews-slider .wpgr-stars, .reviews-slider .grw-stars, .reviews-slider .ti-stars, .reviews-slider .wp-google-stars{ margin-top:6px; } /* Body clamp so cards stay even height */ .reviews-slider .rplg-content, .reviews-slider .wpgr-text, .reviews-slider .grw-text, .reviews-slider .ti-text, .reviews-slider .wp-google-text{ font-size:.95rem; line-height:1.5; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:7; overflow:hidden; } /* Hover lift on desktop */ @media (hover:hover){ .reviews-slider .rplg-review, .reviews-slider .wpgr-review, .reviews-slider .grw-review, .reviews-slider .ti-review, .reviews-slider .wp-google-review{ transition:transform .25s ease, box-shadow .25s ease; } .reviews-slider .rplg-review:hover, .reviews-slider .wpgr-review:hover, .reviews-slider .grw-review:hover, .reviews-slider .ti-review:hover, .reviews-slider .wp-google-review:hover{ transform:translateY(-3px); box-shadow:0 12px 28px rgba(0,0,0,.12); } } /* Soft edge gradient so it reads like a carousel */ .reviews-slider::before, .reviews-slider::after{ content:""; position:sticky; top:0; bottom:0; width:28px; flex:0 0 28px; pointer-events:none; z-index:1; background:linear-gradient(to right, #fff 0, rgba(255,255,255,0) 100%); } .reviews-slider::after{ margin-left:auto; background:linear-gradient(to left, #fff 0, rgba(255,255,255,0) 100%); } /* Responsive: wider cards on phones for a single hero card */ @media (max-width:640px){ .reviews-slider{ --card: 86vw; } } @media (min-width:641px) and (max-width:1024px){ .reviews-slider{ --card: 48%; } } @media (min-width:1025px){ .reviews-slider{ --card: 32%; } } /* Nuke any theme borders around the widget area */ .reviews-slider *[style*="border-top"], .reviews-slider *[style*="border-bottom"]{ border:0 !important; } /* Last-resort width reset for stubborn plugins */ .reviews-slider [style*="width: 100%"]{ width:auto !important; }