.comw-pl-wrap{--comw-pl-accent:#2563eb;--comw-pl-border:#e5e7eb;--comw-pl-cols:3;max-width:100%;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;} /* Count text ("Showing X of Y products") and the grid/list toggle share one row - both live in render_results_block() so they redraw together whenever the query changes (Load More, filter change), rather than the toggle sitting in a separately-rendered, never-updated wrapper. The optional heading (the `title` shortcode attribute) lives in this same row - order:0 keeps it first regardless of Filter Button Position (see below), and margin-right:auto pushes everything else in the row to the far right, on the same line. */ .comw-pl-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:16px;} .comw-pl-heading{order:0;margin:0;margin-right:auto;font-size:1.4rem;font-weight:700;} /* group_by_category="yes" - one heading + "View All" + its own grid per category, back to back (see COMW_Product_List::render_grouped_by_category()). */ .comw-pl-heading--main{margin-right:0;margin-bottom:24px;font-size:1.6rem;} .comw-pl-category-section{margin-bottom:40px;} .comw-pl-category-section:last-child{margin-bottom:0;} .comw-pl-category-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:16px;} .comw-pl-category-head .comw-pl-heading{margin-right:auto;} .comw-pl-view-all{flex:0 0 auto;font-size:13px;font-weight:700;color:var(--comw-pl-accent);white-space:nowrap;} .comw-pl-view-all:hover{text-decoration:underline;} .comw-pl-view-toggle{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:1.5px solid var(--comw-pl-border);border-radius:9px;background:#fff;color:#374151;cursor:pointer;transition:border-color .15s,color .15s,box-shadow .15s;} .comw-pl-view-toggle:hover{border-color:var(--comw-pl-accent);color:var(--comw-pl-accent);box-shadow:0 4px 10px rgba(37,99,235,.15);} /* "Filter" toggle button (comw_product_list_filter_style = 'toggle') - opens the sidebar as a panel instead of it always occupying a grid column. Explicit `order` (rather than DOM position) so Easy Order > Settings > Product Display's "Filter Button Position" can flip it to either side without touching the markup - default (left): Filter+count hug the left, the grid/list toggle is pushed to the far right by its own margin-left. [data-filter-position="right"] instead groups Filter with the grid/list toggle on the right, count on the left. */ .comw-pl-filter-toggle{order:1;flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;border:1.5px solid var(--comw-pl-border);border-radius:9px;background:#fff;color:#374151;font-size:13px;font-weight:700;cursor:pointer;transition:border-color .15s,color .15s,box-shadow .15s;} .comw-pl-filter-toggle:hover, .comw-pl-filter-toggle[aria-expanded="true"]{border-color:var(--comw-pl-accent);color:var(--comw-pl-accent);} .comw-pl-toolbar .comw-pl-count{order:2;} .comw-pl-toolbar .comw-pl-view-toggle{order:3;margin-left:auto;} .comw-pl-wrap[data-filter-position="right"] .comw-pl-toolbar .comw-pl-count{order:1;margin-right:auto;} .comw-pl-wrap[data-filter-position="right"] .comw-pl-toolbar .comw-pl-view-toggle{order:2;margin-left:0;} .comw-pl-wrap[data-filter-position="right"] .comw-pl-toolbar .comw-pl-filter-toggle{order:3;margin-left:8px;} .comw-pl-icon-list{display:none;} .comw-pl-view-list .comw-pl-icon-grid{display:none;} .comw-pl-view-list .comw-pl-icon-list{display:block;} .comw-pl-empty{padding:32px;text-align:center;color:#6b7280;background:#f9fafb;border-radius:12px;} .comw-pl-count{margin:0;font-size:13px;color:#6b7280;} .comw-pl-count-shown,.comw-pl-count-total{font-weight:700;color:#1f2937;} .comw-pl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:22px;} @media (min-width:900px){.comw-pl-grid{grid-template-columns:repeat(var(--comw-pl-cols),1fr);}} .comw-pl-card{position:relative;display:flex;flex-direction:column;border:1px solid var(--comw-pl-border);border-radius:18px;background:#fff;overflow:hidden;transition:box-shadow .25s,transform .25s,border-color .25s;} .comw-pl-card:hover{box-shadow:0 16px 34px rgba(15,23,42,.12);transform:translateY(-4px);border-color:#dbe3ef;} /* Background/text color come from Settings > General (inline style, per-render) - only position and shape are fixed here. */ /* background/color/border-radius/padding/margin/width/height all come from Settings > General as inline style (see COMW_Checkout::sale_badge_inline_style()) - only structural/typography properties that aren't admin-configurable live here. */ .comw-pl-sale-badge{position:absolute;z-index:2;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;box-shadow:0 4px 10px rgba(15,23,42,.2);} .comw-pl-sale-badge.comw-badge-pos-top-left{top:12px;left:12px;} .comw-pl-sale-badge.comw-badge-pos-top-right{top:12px;right:12px;} .comw-pl-sale-badge.comw-badge-pos-bottom-left{bottom:12px;left:12px;} .comw-pl-sale-badge.comw-badge-pos-bottom-right{bottom:12px;right:12px;} @keyframes comwPlFadeInUp{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}} .comw-pl-card--new{animation:comwPlFadeInUp .45s ease both;} .comw-pl-thumb{position:relative;display:block;width:100%;aspect-ratio:1/1;background:linear-gradient(160deg,#f3f4f6,#e9ecf1);overflow:hidden;border:none;padding:0;margin:0;cursor:pointer;} /* object-fit:contain (not cover) - every card keeps the same fixed-height box as before, but the photo is never cropped to fill it; any leftover space inside the box just shows the background gradient instead. */ .comw-pl-thumb img{width:100%;height:100%;object-fit:contain;display:block;transition:transform .35s ease;} .comw-pl-card:hover .comw-pl-thumb img{transform:scale(1.06);} .comw-pl-thumb-placeholder{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:#c7cdd6;} .comw-pl-thumb-zoom{position:absolute;right:10px;bottom:10px;display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:rgba(17,24,39,.55);color:#fff;opacity:0;transform:scale(.8);transition:opacity .2s,transform .2s;backdrop-filter:blur(2px);} .comw-pl-card:hover .comw-pl-thumb-zoom{opacity:1;transform:scale(1);} .comw-pl-body{display:flex;flex-direction:column;gap:6px;padding:16px 16px 18px;flex:1;} .comw-pl-title{font-size:15px;font-weight:700;color:#1f2937;text-decoration:none;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} .comw-pl-title:hover{color:var(--comw-pl-accent);} .comw-pl-desc{margin:0;font-size:12.5px;line-height:1.5;color:#8a93a3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} .comw-pl-price{margin-top:2px;font-size:17px;font-weight:800;color:var(--comw-pl-accent);} .comw-pl-price .comw-pl-price-was{font-size:13px;font-weight:600;color:#9ca3af;text-decoration:line-through;margin-right:5px;} .comw-pl-price .comw-pl-price-now{font-style:normal;text-decoration:none;color:var(--comw-pl-accent);} .comw-pl-price .comw-price-unit{font-size:11.5px;font-weight:600;color:#9ca3af;} /* Buy Now/Out of Stock/WC Add to Cart and View Details always sit side by side on one row - the wrapper (not the individual buttons) pins to the bottom of the card and lays its children out with flex. */ .comw-pl-actions{margin-top:auto;display:flex;gap:8px;} .comw-pl-actions>*{flex:1 1 0;min-width:0;} .comw-pl-buy-btn{background:var(--comw-pl-accent);color:#fff;border:none;border-radius:10px;padding:11px;font-size:13px;font-weight:700;cursor:pointer;transition:opacity .15s,transform .1s;} .comw-pl-buy-btn:hover{opacity:.92;} .comw-pl-buy-btn:active{transform:scale(.98);} .comw-pl-view-details-btn{display:flex;align-items:center;justify-content:center;background:none;border:1.5px solid var(--comw-pl-border);color:#374151;border-radius:10px;padding:9.5px;font-size:13px;font-weight:700;text-align:center;text-decoration:none;transition:border-color .15s,color .15s,background .15s;} .comw-pl-view-details-btn:hover{border-color:var(--comw-pl-accent);color:var(--comw-pl-accent);background:#f8faff;} .comw-pl-out-of-stock{display:inline-flex;align-items:center;justify-content:center;text-align:center;background:#f3f4f6;color:#6b7280;border-radius:10px;padding:11px;font-size:13px;font-weight:700;} /* WooCommerce's own loop Add to Cart link/button, styled to match comw-pl-buy-btn */ .comw-pl-body .add_to_cart_button, .comw-pl-body a.button{display:flex;align-items:center;justify-content:center;background:var(--comw-pl-accent);color:#fff !important;border:none;border-radius:10px;padding:11px;font-size:13px;font-weight:700;text-align:center;text-decoration:none;cursor:pointer;transition:opacity .15s,transform .1s;} .comw-pl-body .add_to_cart_button:hover, .comw-pl-body a.button:hover{opacity:.92;} .comw-pl-body .added_to_cart{flex-basis:100%;margin-top:8px;font-size:12px;text-align:center;color:var(--comw-pl-accent);text-decoration:none;} /* List view: horizontal cards */ .comw-pl-view-list .comw-pl-grid{grid-template-columns:1fr;gap:12px;} .comw-pl-view-list .comw-pl-card{flex-direction:row;align-items:stretch;} .comw-pl-view-list .comw-pl-thumb{width:120px;flex:0 0 120px;aspect-ratio:auto;} .comw-pl-view-list .comw-pl-body{flex-direction:row;align-items:center;flex-wrap:wrap;gap:14px;} .comw-pl-view-list .comw-pl-title{flex:1 1 auto;-webkit-line-clamp:1;} .comw-pl-view-list .comw-pl-desc{display:none;} .comw-pl-view-list .comw-pl-actions{margin-top:0;flex:0 0 auto;} .comw-pl-view-list .comw-pl-actions>*{flex:0 0 auto;padding:10px 18px;} .comw-pl-loadmore-wrap{display:flex;justify-content:center;margin-top:28px;} .comw-pl-loadmore-btn{background:#fff;border:1.5px solid var(--comw-pl-border);color:#1f2937;border-radius:9px;padding:11px 26px;font-size:14px;font-weight:700;cursor:pointer;transition:border-color .15s,color .15s;} .comw-pl-loadmore-btn:hover{border-color:var(--comw-pl-accent);color:var(--comw-pl-accent);} .comw-pl-loadmore-btn:disabled{opacity:.5;cursor:not-allowed;} /* Infinite scroll: an invisible trigger element the IntersectionObserver watches, plus a bouncing-dots + label spinner shown only while a page is loading, so it's obvious to the visitor that more products are on the way. */ .comw-pl-scroll-sentinel{height:1px;} .comw-pl-scroll-spinner{display:none;justify-content:center;align-items:center;gap:10px;margin-top:28px;padding:14px;border-radius:12px;background:#f9fafb;border:1px solid var(--comw-pl-border);opacity:0;transform:translateY(6px);transition:opacity .2s ease,transform .2s ease;} .comw-pl-scroll-spinner.is-active{display:flex;opacity:1;transform:translateY(0);} .comw-pl-scroll-dots{display:inline-flex;align-items:center;gap:6px;} .comw-pl-scroll-dots span{width:9px;height:9px;border-radius:50%;background:var(--comw-pl-accent);animation:comwPlBounce 1s ease-in-out infinite both;} .comw-pl-scroll-dots span:nth-child(2){animation-delay:.15s;} .comw-pl-scroll-dots span:nth-child(3){animation-delay:.3s;} .comw-pl-scroll-text{font-size:13.5px;font-weight:600;color:#4b5563;} @keyframes comwPlBounce{0%,80%,100%{transform:scale(.6);opacity:.5;}40%{transform:scale(1);opacity:1;}} /* ----------------------------------------------------------------- * Sidebar filters * ------------------------------------------------------------- */ .comw-pl-wrap.comw-pl-has-sidebar{display:grid;grid-template-columns:260px 1fr;gap:30px;align-items:start;} .comw-pl-sidebar{position:sticky;top:20px;} .comw-pl-main{min-width:0;} .comw-pl-results{transition:opacity .2s ease;} /* "Filter" toggle mode (comw_product_list_filter_style = 'toggle') - single column layout (no permanent side column); the sidebar becomes a panel opened/closed by .comw-pl-filter-toggle/.comw-pl-sidebar-close/.comw-pl-sidebar-overlay (see comw-product-list.js). The panel itself is `position:absolute` against .comw-pl-wrap (it visually drops in right at the product list block itself, wherever that is on the page, rather than in a fixed spot disconnected from it), 50px below the block's own top edge, and simply fades in/out in place - no slide-in transform - but the dimming *overlay* stays `position:fixed` against the viewport, deliberately NOT matching the panel's own positioning. An overlay that's `absolute` against the wrap is exactly as tall as the wrap is, and on mobile (where the same products stack into a single column) that wrap can run many screens tall - the overlay then covers that entire tall block (a huge dead gray area far past the visible panel) rather than just the visible screen, and the close button (inside the panel) scrolls out of reach along with it. Keeping only the overlay `fixed` avoids that without changing where the panel itself appears. */ .comw-pl-wrap.comw-pl-filter-drawer{position:relative;} .comw-pl-wrap.comw-pl-filter-drawer .comw-pl-sidebar{ position:absolute; top:50px; left:0; z-index:20; width:300px; max-width:85vw; margin:0; border-radius:0; /* No overflow of its own - see .comw-pl-sidebar-body below for why. */ opacity:0; transition:opacity .25s ease, visibility .25s; visibility:hidden; box-shadow:0 20px 45px rgba(15,23,42,.25); } .comw-pl-wrap.comw-pl-filter-drawer.is-filters-open .comw-pl-sidebar{opacity:1;visibility:visible;} .comw-pl-wrap.comw-pl-filter-drawer .comw-plf{border:none;border-radius:0;} .comw-pl-sidebar-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--comw-pl-border);font-size:14px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:#111827;background:#fff;} /* The scrollable area - kept separate from .comw-pl-sidebar itself (which has no overflow of its own) specifically so .comw-pl-sidebar-close can float as a badge straddling .comw-pl-sidebar's top edge (negative top offset) without an overflow:auto ancestor clipping off whichever half of it pokes past that edge. Only capped/scrollable in 'toggle' mode - the "always visible" inline sidebar keeps scrolling with the page like before, no cap needed since it was never floating a badge over its edge. */ .comw-pl-wrap.comw-pl-filter-drawer .comw-pl-sidebar-body{overflow-y:auto;max-height:calc(100vh - 150px);} /* Floats as a badge straddling the popup's own top edge (position:absolute against .comw-pl-sidebar, the nearest positioned ancestor) rather than sitting inline in the header row next to "FILTER". */ .comw-pl-sidebar-close{position:absolute;top:-16px;right:16px;width:32px;height:32px;border:none;border-radius:50%;background:#fff;color:#4b5563;font-size:18px;line-height:1;cursor:pointer;transition:background .15s,color .15s;box-shadow:0 4px 10px rgba(15,23,42,.15);} .comw-pl-sidebar-close:hover{background:#f3f4f6;color:#111827;} /* top/left/width/height are set inline by positionOverlay() in comw-product-list.js, matching .comw-pl-wrap's own on-screen rect - see that function's own comment for why. */ .comw-pl-sidebar-overlay{position:fixed;z-index:19;background:rgba(15,23,42,.4);opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s;} .comw-pl-wrap.comw-pl-filter-drawer.is-filters-open .comw-pl-sidebar-overlay{opacity:1;visibility:visible;} /* Filter Button Position = right - the panel opens on the right side instead, matching whichever side the button that opens it is on (fades in place either way, no slide). */ .comw-pl-wrap[data-filter-position="right"].comw-pl-filter-drawer .comw-pl-sidebar{left:auto;right:0;} .comw-plf{display:flex;flex-direction:column;gap:22px;border:1px solid var(--comw-pl-border);border-radius:16px;background:#fff;padding:20px;} .comw-plf-block{padding-bottom:20px;border-bottom:1px solid var(--comw-pl-border);} .comw-plf-block:last-of-type{border-bottom:none;padding-bottom:0;} .comw-plf-title{margin:0 0 14px;font-size:13px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#111827;} .comw-plf-search-input{width:100%;box-sizing:border-box;height:38px;padding:0 12px;border:1px solid var(--comw-pl-border);border-radius:9px;font-size:13.5px;color:#111827;background:#fff;} .comw-plf-search-input:focus{outline:none;border-color:var(--comw-pl-accent);box-shadow:0 0 0 3px rgba(37,99,235,.12);} .comw-plf-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;max-height:220px;overflow-y:auto;} .comw-plf-list li label{display:flex;align-items:center;gap:9px;font-size:13.5px;color:#374151;cursor:pointer;} .comw-plf-list li label:hover{color:var(--comw-pl-accent);} .comw-plf-check, .comw-plf-check-stock, .comw-plf-rating-radio{width:16px;height:16px;flex:0 0 auto;accent-color:var(--comw-pl-accent);cursor:pointer;} .comw-plf-count{margin-left:auto;color:#9ca3af;font-size:12px;} .comw-plf-rating-list li label{gap:8px;} .comw-plf-stars{color:#f59e0b;font-size:14px;letter-spacing:1px;} .comw-plf-rating-up{color:#6b7280;font-size:12.5px;} .comw-plf-stock label{font-size:13.5px;color:#374151;cursor:pointer;display:flex;align-items:center;gap:9px;} /* Price range - two overlapping native range inputs faking a dual-handle slider. */ .comw-plf-price-slider{position:relative;height:32px;margin:14px 2px 6px;} .comw-plf-price-slider::before{content:"";position:absolute;top:50%;left:0;right:0;height:4px;transform:translateY(-50%);background:var(--comw-pl-border);border-radius:2px;} .comw-plf-track{position:absolute;top:50%;height:4px;transform:translateY(-50%);background:var(--comw-pl-accent);border-radius:2px;} .comw-plf-range{position:absolute;top:50%;left:0;width:100%;height:32px;margin:0;transform:translateY(-50%);background:none;pointer-events:none;-webkit-appearance:none;appearance:none;} .comw-plf-range::-webkit-slider-runnable-track{background:transparent;} .comw-plf-range::-moz-range-track{background:transparent;border:none;} .comw-plf-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;pointer-events:auto;width:17px;height:17px;border-radius:50%;background:#fff;border:3px solid var(--comw-pl-accent);box-shadow:0 2px 6px rgba(15,23,42,.25);cursor:pointer;} .comw-plf-range::-moz-range-thumb{pointer-events:auto;width:17px;height:17px;border-radius:50%;background:#fff;border:3px solid var(--comw-pl-accent);box-shadow:0 2px 6px rgba(15,23,42,.25);cursor:pointer;} .comw-plf-price-values{display:flex;align-items:center;justify-content:space-between;font-size:13px;font-weight:700;color:#111827;} .comw-plf-price-sep{color:#9ca3af;font-weight:400;} .comw-plf-clear{align-self:flex-start;background:none;border:none;color:var(--comw-pl-accent);font-size:13px;font-weight:700;cursor:pointer;padding:0;text-decoration:underline;text-underline-offset:2px;} .comw-plf-clear:hover{opacity:.8;} @media (max-width:780px){ .comw-pl-wrap.comw-pl-has-sidebar{grid-template-columns:1fr;} .comw-pl-sidebar{position:static;} .comw-plf{flex-direction:row;flex-wrap:wrap;gap:16px;} .comw-plf-block{border-bottom:none;padding-bottom:0;flex:1 1 200px;} .comw-plf-clear{flex:1 1 100%;} } /* Modal (shared shell for both the checkout modal and the image-preview modal) */ @keyframes comwModalOverlayIn{from{opacity:0;}to{opacity:1;}} @keyframes comwModalBoxIn{from{opacity:0;transform:translateY(18px) scale(.96);}to{opacity:1;transform:translateY(0) scale(1);}} .comw-pl-modal{position:fixed;inset:0;z-index:100000;display:none;align-items:flex-start;justify-content:center;padding:5vh 16px;overflow-y:auto;} .comw-pl-modal.is-open{display:flex;} .comw-pl-modal-overlay{position:fixed;inset:0;background:rgba(15,23,42,.6);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);animation:comwModalOverlayIn .2s ease both;} .comw-pl-modal-box{position:relative;background:#fff;border-radius:24px;max-width:720px;width:100%;padding:36px;box-shadow:0 30px 80px -12px rgba(15,23,42,.35),0 0 0 1px rgba(15,23,42,.04);animation:comwModalBoxIn .3s cubic-bezier(.16,1,.3,1) both;} .comw-pl-modal-close{position:absolute;top:18px;right:18px;width:36px;height:36px;border:none;background:#f3f4f6;border-radius:50%;font-size:20px;line-height:1;color:#4b5563;cursor:pointer;z-index:2;transition:background .15s,color .15s,transform .15s;} .comw-pl-modal-close:hover{background:#eef2ff;color:var(--comw-pl-accent);transform:rotate(90deg);} .comw-pl-modal-body .comw-product-box{max-width:none;border:none;padding:0;} .comw-pl-modal-loading,.comw-pl-modal-error{padding:24px 0;text-align:center;color:#6b7280;} .comw-pl-modal-error{color:#991b1b;} /* Wide checkout modal: gallery/title/price on the left, the actual form on the right - like a modern hosted checkout, instead of one long column. */ @media (min-width:720px){ .comw-pl-modal-box .comw-product-box{display:grid;grid-template-columns:280px 1fr;gap:32px;align-items:start;} .comw-pl-modal-box .comw-product-summary{flex-direction:column;align-items:stretch;position:sticky;top:0;} .comw-pl-modal-box .comw-checkout-panel{margin-top:0 !important;padding-top:0 !important;border-top:none !important;border-left:1px solid var(--comw-border);padding-left:32px !important;} .comw-pl-modal-box .comw-product-thumb img{width:100%;height:auto;aspect-ratio:1/1;border-radius:16px;} .comw-pl-modal-box .comw-product-title{font-size:20px;} .comw-pl-modal-box .comw-product-price{font-size:26px;} } @media (max-width:719px){ .comw-pl-modal-box{padding:26px;border-radius:20px;} } /* Image-preview popup */ .comw-pl-preview-box{max-width:420px;} .comw-pl-preview-main{aspect-ratio:1/1;border-radius:14px;overflow:hidden;background:#f3f4f6;} .comw-pl-preview-main img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .2s ease;} .comw-pl-preview-price{margin-top:14px;font-size:20px;font-weight:800;color:var(--comw-pl-accent, #2563eb);} .comw-pl-preview-price .comw-pl-price-was{font-size:15px;font-weight:600;color:#9ca3af;text-decoration:line-through;margin-right:6px;} .comw-pl-preview-price .comw-pl-price-now{font-style:normal;text-decoration:none;color:var(--comw-pl-accent);} .comw-pl-preview-price .comw-price-unit{font-size:13px;font-weight:600;color:#9ca3af;} .comw-pl-preview-buy-btn{width:100%;margin-top:10px;background:var(--comw-pl-accent,#2563eb);color:#fff;border:none;border-radius:10px;padding:12px;font-size:14px;font-weight:700;cursor:pointer;transition:opacity .15s;} .comw-pl-preview-buy-btn:hover{opacity:.92;} .comw-pl-preview-thumbs{display:flex;gap:8px;margin-top:14px;overflow-x:auto;padding-bottom:2px;} .comw-pl-preview-thumb{flex:0 0 auto;width:52px;height:52px;padding:0;border-radius:9px;border:2px solid transparent;overflow:hidden;cursor:pointer;background:none;opacity:.6;transition:opacity .15s,border-color .15s;} .comw-pl-preview-thumb img{width:100%;height:100%;object-fit:cover;display:block;} .comw-pl-preview-thumb:hover{opacity:1;} .comw-pl-preview-thumb.is-active{opacity:1;border-color:var(--comw-pl-accent,#2563eb);}