/* Sri Ayyanar Cold Storage – own additions (replace effects that needed the old plugin scripts) */
/* page was faded in by the theme script */
#page { opacity: 1 !important; }

/* banner */
.sc-banner { position: relative; width: 100%; aspect-ratio: 1920 / 650; overflow: hidden; background: #eef3f6; }
.sc-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease; }
.sc-slide.is-active { opacity: 1; z-index: 1; }
.sc-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sc-banner-nav { position: absolute; top: 0; bottom: 0; width: 8%; z-index: 3; border: 0; background: transparent; color: #fff; cursor: pointer; opacity: .7; font-size: 34px; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.sc-banner-nav:hover { opacity: 1; }
.sc-prev { left: 0; } .sc-next { right: 0; }
.sc-banner-nav .icon-prev:before { content: '\2039'; } .sc-banner-nav .icon-next:before { content: '\203a'; }

/* products grid (was a grid plugin) */
.sc-filters { text-align: center; margin: 0 0 15px; }
.sc-filters .sc-filter, .sc-filters .sc-page, .sc-filters .sc-dots { color: #fff !important; margin: 0 5px 5px 0 !important; cursor: pointer; padding: 0 16px !important; border: 1px solid #fff !important;
  line-height: 38px !important; height: auto !important; border-radius: 5px !important; font-size: 12px !important; letter-spacing: normal !important; text-transform: none !important;
  font-weight: 700 !important; font-family: "Open Sans", sans-serif !important; display: inline-block !important; width: auto !important; min-width: 0 !important;
  background: #1e91cf !important; box-shadow: none; transition: all .2s; vertical-align: top; }
.sc-filters .sc-dots { background: #fff !important; color: #999 !important; border-color: #e5e5e5 !important; cursor: default; }
.sc-filters .sc-page { padding: 0 13px !important; }
.sc-filters .sc-filter:hover, .sc-filters .sc-filter.is-active, .sc-filters .sc-page:hover, .sc-filters .sc-page.is-active { background: #fff !important; border-color: #bbb !important; color: #333 !important; box-shadow: 0 3px 5px rgba(0,0,0,.13); }
.sc-pages { display: inline-block; margin-left: 6px; }
.sc-grid-stage { position: relative; }
.sc-grid { display: grid; grid-template-columns: repeat(var(--cols, 5), 1fr); gap: 5px; }
.sc-item { position: relative; display: block; overflow: hidden; background: #fff; text-decoration: none; }
.sc-item-img { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.sc-item-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; }
.sc-item:hover .sc-item-img img { transform: scale(1.05); }
.sc-item-cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; text-align: center; font-size: 17px; line-height: 24px; color: #fff; font-weight: 500;
  padding: 4px 12px 3px; background: rgba(118,191,78,1); text-shadow: 0 1px 3px rgba(0,0,0,.1); text-transform: capitalize; transition: transform .3s; }
.sc-item:hover .sc-item-cap { transform: translateY(100%); }
.sc-item-zoom { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: rgba(118,191,78,1);
  opacity: 0; transform: translateY(20px); transition: all .3s; z-index: 2; }
.sc-item-zoom:before { content: '\f002'; font-family: FontAwesome; color: #fff; font-size: 18px; position: absolute; left: 0; right: 0; top: 50%; margin-top: -11px; text-align: center; line-height: 22px; }
.sc-item:hover .sc-item-zoom { opacity: 1; transform: none; }
.sc-item-zoom:hover { background: #000; }
.sc-grid-stage .sc-grid-nav { position: absolute; top: 50%; z-index: 5; width: 26px !important; min-width: 0 !important; height: 40px !important; margin: -20px 0 0 !important; border: 0 !important;
  border-radius: 0 !important; background: #1e91cf !important; color: #fff !important; font-size: 26px !important; line-height: 38px !important; padding: 0 !important; cursor: pointer; letter-spacing: 0 !important; }
.sc-grid-prev { left: 0; } .sc-grid-next { right: 0; }
@media (max-width: 767px) { .sc-item-cap { font-size: 15px; } }

/* lightbox */
.sc-lightbox { position: fixed; inset: 0; z-index: 100000; background: rgba(0,0,0,.88); display: none; align-items: center; justify-content: center; flex-direction: column; }
.sc-lightbox.is-open { display: flex; }
.sc-lightbox img { max-width: 92vw; max-height: 82vh; box-shadow: 0 5px 30px rgba(0,0,0,.5); }
.sc-lb-cap { color: #fff; font: 700 15px/1.4 "Open Sans", sans-serif; margin-top: 10px; }
.sc-lightbox button { position: absolute; background: none; border: 0; color: #fff; font-size: 46px; cursor: pointer; line-height: 1; padding: 10px; }
.sc-lb-close { top: 10px; right: 18px; } .sc-lb-prev { left: 10px; top: 50%; margin-top: -30px; } .sc-lb-next { right: 10px; top: 50%; margin-top: -30px; }

/* contact form */
.sc-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sc-form .is-invalid { border-color: #f00 !important; }
.sc-form-msg { margin: 12px 15px 0; font-size: 14px; line-height: 1.5; clear: both; }
.sc-form-msg:empty { display: none; }
.sc-form-msg.is-ok { border: 2px solid #398f14; color: #fff; padding: 8px 12px; }
.sc-form-msg.is-error { border: 2px solid #f7e700; color: #fff; padding: 8px 12px; }
.sc-submit[disabled] { opacity: .6; cursor: wait; }

/* phone menu (was moved/opened by the theme script) */
#header.mobile #nav.mobile-nav { display: block; clear: both; }
#header.mobile #nav.mobile-nav > .menu { display: none; }
#header.mobile.sc-open #nav.mobile-nav > .menu { display: block; }

/* back to top */
.sc-top { position: fixed; right: 20px; bottom: 20px; z-index: 999; width: 40px; height: 40px; line-height: 40px; text-align: center; font-size: 22px;
  background: rgba(0,0,0,.25); color: #fff !important; border-radius: 3px; opacity: 0; pointer-events: none; transition: opacity .3s; }
.sc-top.is-visible { opacity: 1; pointer-events: auto; }
@media (max-width: 991px) { html, body { overflow-x: hidden; } }
