/*! * SMCstylus_Slider – shop integration of the library: carousels with their controls row under the cards, * the gallery frame reserved before the script runs, album captions. A theme can fine-tune the look with * the --ss-* / --ssg-* custom properties of the library on .smc-ss and .smc-ssg. * * @author Mihai Calin Simion | https://smcstylus.com * @copyright Copyright (c) 2026 Mihai Calin Simion * @license MIT, see the LICENSE file * @link https://github.com/smcstylus/magento2-slider */ .smc-ss-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 20px;margin-bottom:18px}.smc-ss-head>.smc-ss-title{flex:1 1 auto;min-width:0;margin:0;text-align:start}.smc-ss-controls{display:flex;align-items:center;gap:8px;margin-inline-start:auto}.smc-ss-controls>.smc-ss-dots{display:flex;min-width:0;margin-inline-end:6px}.smc-ss:has(>.ss.ss-static) .smc-ss-controls{visibility:hidden}.smc-ss>.ss>.ss-viewport>.ss-track{margin:0;padding:0 0 8px;list-style:none}.smc-ss>.ss>.ss-viewport>.ss-track>*{flex:0 0 var(--smc-ss-card,240px);width:var(--smc-ss-card,240px);max-width:85vw}:is(.smc-ss,.smc-ssg,.smc-ss-hero) button:is(.ss-arrow,.ss-play,.ss-dot,.ssg-btn,.ssg-thumb,.ssg-playv):is(:not(.primary),:hover,:focus,:active){min-height:0;margin:0;padding:0;line-height:1;text-shadow:none;text-transform:none;letter-spacing:normal;font-weight:400;border:1px solid var(--ss-border);background:var(--ss-surface);color:var(--ss-ink);box-shadow:none}:is(.smc-ss,.smc-ssg,.smc-ss-hero) button.ss-arrow:is(:not(.primary),:hover,:focus,:active){height:var(--ss-btn);box-shadow:var(--ss-shadow)}:is(.smc-ss,.smc-ssg,.smc-ss-hero) button:is(.ss-arrow,.ssg-btn):hover{background:var(--ss-accent);border-color:var(--ss-accent);color:var(--ss-on-accent)}:is(.smc-ss,.smc-ssg,.smc-ss-hero) .ss-arrows-edge>button.ss-arrow:is(:not(.primary),:hover,:focus,:active){height:auto;border:0;background:0 0;box-shadow:none}:is(.smc-ss,.smc-ssg,.smc-ss-hero) .ss-arrows-edge>button.ss-arrow:hover{color:var(--ss-on-accent)}:is(.smc-ss,.smc-ssg,.smc-ss-hero) button.ss-play:is(:not(.primary),:hover,:focus,:active){height:34px}:is(.smc-ss,.smc-ssg,.smc-ss-hero) button.ss-dot:is(:not(.primary),:hover,:focus,:active){height:22px;padding:0 3px;border:0;background:0 0}:is(.smc-ss,.smc-ssg,.smc-ss-hero) button.ssg-btn:is(:not(.primary),:hover,:focus,:active){height:40px}:is(.smc-ss,.smc-ssg,.smc-ss-hero) button.ssg-btn:not(:hover){background:color-mix(in srgb,var(--ss-surface) 82%,transparent)}:is(.smc-ss,.smc-ssg,.smc-ss-hero) button.ssg-thumb:is(:not(.primary),:hover,:focus,:active){height:auto}:is(.smc-ss,.smc-ssg,.smc-ss-hero) button.ssg-playv:is(:not(.primary),:hover,:focus,:active){height:72px;border:0;background:var(--ss-accent);color:#fff}.smc-ssg{--ssg-thumb:100px;--ssg-tgap:12px;position:relative}@media (max-width:767px){.smc-ssg.ssg,.smc-ssg{--ssg-thumb:72px;--ssg-tgap:8px}}.smc-ssg:not(.smc-ssg--ready)>:is(picture,img){display:block;width:100%;aspect-ratio:var(--ssg-ratio,1/1)}.smc-ssg:not(.smc-ssg--ready) img{display:block;width:100%;height:100%;object-fit:contain}.smc-ssg--many:not(.smc-ssg--ready){padding-bottom:calc(var(--ssg-thumb) + 6px + var(--ssg-tgap) + 42px)}.smc-ssg:not(.ssg-fs) .ssg-main:has(.ss-play){padding-bottom:42px}.smc-ssg:not(.ssg-fs) .ssg-stage:has(.ss-play){overflow:visible}.smc-ssg:not(.ssg-fs) .ssg-stage:has(.ss-play)>.ss-viewport{border-radius:var(--ss-radius)}.smc-ssg:not(.ssg-fs) .ssg-stage>.ss-bar:has(.ss-play){position:absolute;top:100%;right:0;left:auto;bottom:auto;justify-content:flex-end;margin:4px 0 0}.smc-ssg .ssg-caption{display:flex;flex-direction:column;gap:4px;padding:0 2px}.smc-ssg .ssg-caption[hidden]{display:none}.smc-ssg .ssg-caption strong{font-size:1.1em}.smc-ssg .ssg-caption a{text-decoration:underline}.smc-ssg.ssg-fs .ssg-caption{color:var(--ss-ink)}.smc-ss{--smc-ss-img-ratio:3/2;--smc-ss-sale:#d32f2f}.smc-ss--blog_product_posts{--smc-ss-img-ratio:1/1}.smc-ss .ss-track>.ss-card{height:auto}.smc-ss .ss-card{text-align:start}.smc-ss .ss-card .ss-card-img{position:relative;aspect-ratio:var(--smc-ss-img-ratio)}.smc-ss .ss-card .ss-card-img picture{display:contents}.smc-ss .ss-card h3{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;min-height:2.8em;margin:0;font-size:15px;font-weight:600;line-height:1.4;text-align:start;text-transform:none;letter-spacing:normal}.smc-ss .ss-card p{margin:6px 0 0;text-align:start;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.smc-ss .ss-card p del{margin-inline-end:6px}.smc-ss .ss-card p ins{text-decoration:none;color:var(--smc-ss-sale)}.smc-ss:has(>.ss.ss-static) .smc-ss-head:not(:has(.smc-ss-title)){display:none}.smc-ss-slide{display:flex;flex-direction:column;gap:8px}.smc-ss-slide>.ss-card{flex:1 1 auto;height:auto}.smc-ss a.ss-card:is(:link,:visited,:hover,:focus,:active){color:var(--ss-ink);text-decoration:none}.smc-ss a.ss-card:is(:link,:visited,:hover,:focus,:active) h3{color:var(--ss-ink)}.smc-ss a.ss-card:is(:hover,:focus-visible) h3{text-decoration:underline}.smc-ssg .ssg-caption a:is(:link,:visited){color:inherit}@media (prefers-reduced-motion:reduce){.smc-ss .ss-card,.smc-ss .ss-card .ss-card-img img,.smc-ss .ss-card h3{transition:none}.smc-ss .ss-card:hover .ss-card-img img{transform:none}}.smc-ss-strip{--ss-per:6;--ss-gap:6px;margin-top:8px}@media (max-width:559px){.smc-ss-strip{--ss-per:4}}.smc-ss-strip.ss-static>.ss-viewport>.ss-track{justify-content:center}.smc-ss-tn{aspect-ratio:1;border-radius:4px;overflow:hidden;opacity:.55;cursor:pointer;transition:opacity .25s}.smc-ss-tn img{display:block;width:100%;height:100%;object-fit:cover}.smc-ss-tn:hover,.smc-ss-tn.ss-nav-on{opacity:1}.smc-ss-tn.ss-nav-on{outline:2px solid var(--ss-accent);outline-offset:-2px}.smc-ss-strip button.ss-arrow:is(:not(.primary),:hover,:focus,:active){min-height:0;height:auto;margin:0;padding:0;border:0;background:0 0;box-shadow:none;line-height:1}@media (prefers-reduced-motion:reduce){.smc-ss-tn{transition:none}}