/* ShreeLux 2026 preview theme — signal red, carbon black and warm white. */
:root {
  --primary: #e10600;
  --red: #e10600;
  --green: #e10600;
  --text: #2c2928;
  --heading: #171717;
  --body: #f7f4f1;
  --chalk: #f4f0ec;
  --border: #ded8d3;
  --green-chalk: #fff0ee;
  --green-dark: #470805;
  --intro-bg: #fffaf8;
  --primary-bshadow: 0 18px 50px rgba(23, 23, 23, .1);
}

/* Recolour the legacy green feature/application line art to the new brand red.
   The CRI colour wheel is intentionally left in full colour. */
.legacy-root .apporchCardIn img:not([src$="cri.png"]) {
  filter: brightness(0) saturate(100%) invert(13%) sepia(99%) saturate(6935%)
    hue-rotate(359deg) brightness(94%) contrast(117%);
}

/* Legacy feature lists use a green raster arrow; align it with the red theme. */
.legacy-root .quality-iocnse img[src*="arrow"] {
  filter: brightness(0) saturate(100%) invert(13%) sepia(99%) saturate(6935%)
    hue-rotate(359deg) brightness(94%) contrast(117%);
}

.legacy-root .whyrefurbishment .iconimg img {
  filter: brightness(0) saturate(100%) invert(13%) sepia(99%) saturate(6935%)
    hue-rotate(359deg) brightness(94%) contrast(117%);
}

.legacy-root .led-content h2 {
  color: #e10600 !important;
}

body {
  color: #2c2928;
  background: #f7f4f1;
  font-family: var(--font-body), "Roboto", sans-serif;
}

.legacy-root h1,
.legacy-root h2,
.legacy-root h3,
.legacy-root h4,
.legacy-root h5,
.legacy-root h6 {
  color: #171717;
  font-family: var(--font-display), "Roboto", sans-serif;
  font-weight: 700;
  letter-spacing: -.025em;
}

.legacy-root p { color: #625e5b; }
.legacy-root ::selection { color: #fff; background: #e10600; }

/* Global frame */
.legacy-root .container-fluid { max-width: 1440px; margin-inline: auto; }
.legacy-root .my-section { padding-bottom: 52px; }
.legacy-root .my-section2 { padding-top: 52px; }
.legacy-root .colortext { color: #e10600 !important; }

/* Header and primary navigation */
.legacy-root .header-top {
  padding: 7px 0;
  background: #e10600;
  border: 0;
}
.legacy-root .header-top-list { gap: 4px; }
.legacy-root .header-top-list li { margin-left: 6px; }
.legacy-root .header-top-list li a {
  padding: 5px 11px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  border-radius: 999px;
}
.legacy-root .header-top-list li a:hover { background: rgba(255,255,255,.18); }
.legacy-root .header-part,
.legacy-root .header-part.active {
  background: #fff !important;
  border-bottom: 1px solid #e8e2de;
  box-shadow: none;
}
.legacy-root .header-content {
  min-height: 96px;
  justify-content: space-between;
  gap: 36px;
}
.legacy-root .header-logo { margin: 0; flex: 0 0 auto; }
.legacy-root .header-logo img {
  width: 250px;
  height: 78px;
  object-fit: contain;
}
.legacy-root .header-form {
  max-width: 520px;
  margin: 0 auto;
  background: #f7f4f1;
  border: 1px solid #ded8d3;
  border-radius: 999px;
}
.legacy-root .header-form:focus-within { border-color: #e10600; box-shadow: 0 0 0 4px rgba(225,6,0,.09); }
.legacy-root .header-form input { background: transparent !important; border-radius: 999px; }
.legacy-root .header-form button i { color: #e10600; }
.legacy-root .header-widget-group { display: none; }
.legacy-root .navbar-part {
  position: sticky;
  top: 0;
  z-index: 90;
  background: #171717;
  border-bottom: 4px solid #e10600;
  box-shadow: 0 12px 32px rgba(0,0,0,.16);
}
.legacy-root .navbar-content { min-height: 58px; }
.legacy-root .navbar-list { justify-content: center; width: 100%; gap: clamp(14px, 2vw, 30px); }
.legacy-root .navbar-item { margin: 0; }
.legacy-root .navbar-link {
  position: relative;
  padding: 19px 0 16px;
  color: rgba(255,255,255,.9);
  font-size: 13px;
  font-weight: 750;
  letter-spacing: .045em;
  text-transform: uppercase;
}
.legacy-root .navbar-link::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 10px;
  left: 0;
  height: 2px;
  background: #e10600;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
.legacy-root .navbar-link:hover { color: #fff; }
.legacy-root .navbar-link:hover::after { transform: scaleX(1); }
.legacy-root .dropdown-position-list {
  padding: 10px;
  background: #fff;
  border: 0;
  border-top: 3px solid #e10600;
  box-shadow: 0 20px 55px rgba(0,0,0,.16);
}
.legacy-root .dropdown-position-list li a { border-radius: 6px; }
.legacy-root .dropdown-position-list li a:hover { color: #e10600; background: #fff1ef; }

/* Hero: keep product photography, add brand depth */
.legacy-root .home-index-slider {
  position: relative;
  margin: 0;
  background: #171717;
  border-bottom: 6px solid #e10600;
}
.legacy-root .home-index-slider::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(18,18,18,.22), transparent 42%, rgba(225,6,0,.08));
}
.legacy-root .home-index-slider img {
  width: 100%;
}
.legacy-root .home-index-slider .banner-part { margin: 0; background: #171717; }
.legacy-root .brand-hero-image {
  position: relative;
  height: clamp(470px, 43vw, 680px);
  overflow: hidden;
}
.legacy-root .brand-hero-image > img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.legacy-root .brand-hero-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(10,10,10,.94) 0%, rgba(10,10,10,.62) 35%, rgba(10,10,10,.08) 67%);
}
.legacy-root .brand-hero-copy {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: clamp(28px, 7vw, 110px);
  width: min(610px, 45vw);
  color: #fff;
  transform: translateY(-50%);
}
.legacy-root .brand-hero-copy > span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.legacy-root .brand-hero-copy > span::before { content: ""; width: 32px; height: 3px; background: #e10600; }
.legacy-root .brand-hero-copy h2 {
  margin: 17px 0 18px;
  color: #fff;
  font-size: clamp(2.5rem, 5vw, 5rem);
  line-height: .98;
  letter-spacing: -.055em;
  text-transform: none;
}
.legacy-root .brand-hero-copy p { max-width: 540px; margin-bottom: 26px; color: rgba(255,255,255,.76); font-size: 17px; line-height: 1.65; }
.legacy-root .brand-hero-copy a {
  padding: 12px 18px;
  color: #fff;
  background: #e10600;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.legacy-root .brand-hero-copy a i { margin-left: 9px; }
.legacy-root .home-index-slider .slick-arrow,
.legacy-root .homebaner .swiper-button-next,
.legacy-root .homebaner .swiper-button-prev {
  z-index: 3;
  color: #fff !important;
  background: #e10600 !important;
  border-radius: 50% !important;
  box-shadow: 0 8px 25px rgba(225,6,0,.28);
}

/* Product and editorial surfaces */
.legacy-root .bgset48,
.legacy-root .About-us-section,
.legacy-root .seteee,
.legacy-root .Product_feature_section,
.legacy-root .blogs-section,
.legacy-root .certifiactes-section,
.legacy-root .seo-facts-section { background: #f7f4f1 !important; }
.legacy-root .About-us-section { border-top: 1px solid #e1dbd6; border-bottom: 1px solid #e1dbd6; }
.legacy-root .common-headings h3,
.legacy-root .common-headings1 h3 {
  color: #171717;
  font-size: clamp(1.35rem, 2.2vw, 2rem);
  font-weight: 800;
  letter-spacing: .04em;
}
.legacy-root .common-headings h3::before,
.legacy-root .common-headings h3::after,
.legacy-root .common-headings1 h3::before,
.legacy-root .common-headings1 h3::after { height: 4px; background: #e10600; }
.legacy-root .product-gallery .grid-box,
.legacy-root .blog-card,
.legacy-root .product-Categories .blog-card,
.legacy-root .productFeature-box,
.legacy-root .testimoinalCard,
.legacy-root .seo-topic-grid article {
  background: #fff;
  border: 1px solid #e0dad5 !important;
  border-radius: 12px !important;
  box-shadow: 0 14px 36px rgba(23,23,23,.065) !important;
  overflow: hidden;
}
.legacy-root .product-gallery .grid-box { border-radius: 4px !important; }
.legacy-root .product-gallery .grid-box .hovershow { background: rgba(20,20,20,.84) !important; }
.legacy-root .product-gallery .grid-box .show-text { background: rgba(23,23,23,.88); border-left: 4px solid #e10600; }
.legacy-root .product-Categories .blog-card .blog-card-img .hovertext { background: rgba(225,6,0,.9) !important; }
.legacy-root .productFeature-box { padding: 22px !important; }
.legacy-root .tabcontent { border-color: #e10600 !important; }
.legacy-root .Product_feature_section::before { background: #ede7e2 !important; }
.legacy-root .Product_feature_section .pf-content h4,
.legacy-root .Product_feature_section .pf-content a { color: #e10600; border-color: #e10600; }
.legacy-root .common-btn,
.legacy-root .commonbtn {
  min-height: 42px;
  padding: 9px 20px;
  color: #171717 !important;
  background: #fff;
  border: 1px solid #e10600;
  border-radius: 6px;
  box-shadow: none;
  font-weight: 750;
}
.legacy-root .common-btn:hover,
.legacy-root .commonbtn:hover { color: #fff !important; background: #e10600; }
.legacy-root .commonbtn::before { background: #e10600; }

/* Dark industrial proof band */
.legacy-root .whychoose-ussection {
  position: relative;
  padding-top: 58px;
  background-image: linear-gradient(110deg, rgba(20,20,20,.98), rgba(20,20,20,.88)), url(../images/why-choose-us.png) !important;
  border-top: 6px solid #e10600;
}
.legacy-root .whychoose-ussection h2,
.legacy-root .whychoose-ussection h3,
.legacy-root .whychoose-ussection h4,
.legacy-root .whychoose-ussection p { color: #fff; }
.legacy-root .whychoose-ussection .content-points {
  margin: 7px;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  box-shadow: none;
}
.legacy-root .whychoose-ussection .content-points p { color: #e10600; border-color: #e10600; }
.legacy-root .whychoose-ussection .content-points p i { color: #e10600; }

/* Supporting sections */
.legacy-root .reach-developemnt { background: #fff; }
.legacy-root .testiSection { background: #f7f4f1 !important; }
.legacy-root .testiSection .swiper-button-next,
.legacy-root .testiSection .swiper-button-prev { background: #e10600; }
.legacy-root .clientBg { background: #171717; border-top: 5px solid #e10600; }
.legacy-root .image-box { border: 4px solid #e10600; }
.legacy-root .seo-topic-section { background: #f0ebe6; }
.legacy-root .seo-topic-kicker,
.legacy-root .seo-topic-section a,
.legacy-root .seo-facts dt { color: #c90500; }
.legacy-root .seo-topic-faqs details { border-color: #d7cec8; }

/* Conversion band and footer */
.legacy-root .mapSection { border-top: 6px solid #e10600; }
.legacy-root .mapSection .mapLeft {
  background-image: linear-gradient(90deg, rgba(20,20,20,.9), rgba(20,20,20,.66)), url(https://magik-1b063.kxcdn.com/images/store-bg.jpg);
}
.legacy-root .mapSection .mapLeft a { border-color: #e10600; background: #e10600; }
.legacy-root .mapSection .mapRight { background: #e10600; }
.legacy-root .footer-part {
  color: #fff;
  background: #171717;
  border-top: 1px solid rgba(255,255,255,.08);
}
.legacy-root .footer-part h3,
.legacy-root .footer-part a { color: #fff; }
.legacy-root .footer-part .footer-title::after { background: #e10600; }
.legacy-root .footer-part .footer-desc,
.legacy-root .footer-part .footer-contact span { color: rgba(255,255,255,.68); }
.legacy-root .footer-part .footer-social a:hover { background: #e10600; }
.legacy-root .footer-bottom { border-top-color: rgba(255,255,255,.1); }

/* Floating actions and enquiry */
.legacy-root .enquiry-toggle,
.legacy-root .enquiry-header,
.legacy-root .enquiry-form-container form button { background: #e10600 !important; }
.legacy-root .enquiry-toggle { box-shadow: 0 10px 28px rgba(225,6,0,.28); }
.legacy-root .enquiry-form-container { border: 1px solid #ded8d3; border-radius: 12px; overflow: hidden; }
.legacy-root .enquiry-form-container form input,
.legacy-root .enquiry-form-container form textarea { border-color: #d5cec9; }

@media (max-width: 991px) {
  .legacy-root .header-part,
  .legacy-root .header-part.active { background: #fff !important; }
  .legacy-root .header-content { min-height: 78px; }
  .legacy-root .header-media-group a img { width: 185px; height: 62px; object-fit: contain; }
  .legacy-root .header-user i,
  .legacy-root .header-src i { color: #fff; background: #171717; }
}

@media (max-width: 767px) {
  .legacy-root .container-fluid { padding-inline: 18px !important; }
  .legacy-root .my-section { padding-bottom: 34px; }
  .legacy-root .my-section2 { padding-top: 34px; }
  .legacy-root .home-index-slider { border-bottom-width: 4px; }
  .legacy-root .brand-hero-image { height: 470px; }
  .legacy-root .brand-hero-image > img { object-position: 65% center; }
  .legacy-root .brand-hero-image::after { background: linear-gradient(90deg, rgba(10,10,10,.93), rgba(10,10,10,.48)); }
  .legacy-root .brand-hero-copy { left: 24px; width: calc(100% - 48px); }
  .legacy-root .brand-hero-copy h2 { font-size: clamp(2.15rem, 11vw, 3.3rem); }
  .legacy-root .brand-hero-copy p { font-size: 14px; line-height: 1.55; }
  .legacy-root .common-headings h3,
  .legacy-root .common-headings1 h3 { font-size: 1.25rem; }
  .legacy-root .mapSection .mapLeft,
  .legacy-root .mapSection .mapRight { padding: 54px 26px; }
}

/* --------------------------------------------------------------------------
   Premium motion layer — cinematic, tactile, and intentionally brand-led.
   -------------------------------------------------------------------------- */

body:has(.legacy-root) {
  --premium-ease: cubic-bezier(.2,.8,.2,1);
  overflow-x: hidden;
}

body:has(.legacy-root)::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
}

body:has(.legacy-root)::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 3px;
  pointer-events: none;
  background: linear-gradient(90deg, #e10600, #ff625d 72%, #fff);
  box-shadow: 0 0 18px rgba(225,6,0,.68);
  transform: scaleX(0);
  transform-origin: left;
  animation: premium-scroll-progress linear;
  animation-timeline: scroll();
}

.legacy-root .header-logo,
.legacy-root .header-media-group > a {
  position: relative;
  isolation: isolate;
}

.legacy-root .header-logo::before,
.legacy-root .header-media-group > a::before {
  content: "";
  position: absolute;
  inset: 12% -5%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle at 64% 28%, rgba(225,6,0,.22), transparent 48%);
  filter: blur(12px);
  opacity: 0;
  animation: premium-logo-aura 2.8s var(--premium-ease) both;
}

.legacy-root .header-logo::after,
.legacy-root .header-media-group > a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: 8px;
  background: linear-gradient(104deg, transparent 35%, rgba(255,35,28,.08) 43%, rgba(255,255,255,.82) 49%, rgba(255,35,28,.34) 53%, transparent 62%);
  background-size: 240% 100%;
  background-position: 145% center;
  mix-blend-mode: screen;
  opacity: 0;
  animation: premium-logo-inner-flow 2.65s var(--premium-ease) both;
}

.legacy-root .header-logo img,
.legacy-root .header-media-group > a img {
  transform-origin: 48% 55%;
  filter: drop-shadow(0 10px 15px rgba(23,23,23,.1));
  transition: filter .35s ease, transform .35s var(--premium-ease);
}

.legacy-root .header-logo:hover img,
.legacy-root .header-media-group > a:hover img {
  filter: drop-shadow(0 12px 20px rgba(225,6,0,.2));
  transform: translateY(-1px) scale(1.01);
}

.legacy-root .logo-bolt-mask,
.legacy-root .logo-tagline-mask,
.legacy-root .logo-bolt-fx,
.legacy-root .logo-tagline-fx {
  position: absolute;
  display: block;
  pointer-events: none;
}

.legacy-root .logo-bolt-mask {
  top: 18%;
  left: 61.7%;
  z-index: 3;
  width: 5.8%;
  height: 17%;
  background: #fff;
  border-radius: 50%;
}

.legacy-root .logo-tagline-mask {
  right: 5.5%;
  bottom: 7%;
  left: 6.8%;
  z-index: 3;
  height: 22%;
  background: #fff;
}

.legacy-root .logo-bolt-fx,
.legacy-root .logo-tagline-fx {
  inset: 0;
  z-index: 4;
  background: url("/images/logo/shreelux-ridhi.png") center / contain no-repeat;
}

.legacy-root .logo-bolt-fx {
  clip-path: polygon(61% 17%, 68.2% 17%, 68.2% 36%, 61% 36%);
  filter: drop-shadow(0 0 0 rgba(225,6,0,0));
  transform-origin: 64.6% 27%;
  animation: premium-bolt-lock 2.75s var(--premium-ease) both;
}

.legacy-root .logo-tagline-fx {
  clip-path: inset(72% 94% 5% 6%);
  filter: drop-shadow(0 3px 6px rgba(23,23,23,.12));
  animation: premium-tagline-reveal 2.75s var(--premium-ease) both;
}

.legacy-root :is(.header-logo, .header-media-group > a):hover .logo-bolt-fx {
  animation: premium-bolt-hover .72s var(--premium-ease) both;
}

.legacy-root .navbar-part {
  background: rgba(15,15,15,.93) !important;
  backdrop-filter: blur(18px) saturate(145%);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
}

.legacy-root .navbar-link {
  transition: color .3s ease, transform .3s var(--premium-ease), text-shadow .3s ease;
}

.legacy-root .navbar-link:hover {
  text-shadow: 0 0 22px rgba(255,255,255,.32);
  transform: translateY(-2px);
}

.legacy-root .home-index-slider::before,
.legacy-root .bredcrumb::after {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: -28%;
  z-index: 2;
  width: 22%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.23), rgba(225,6,0,.16), transparent);
  filter: blur(10px);
  transform: skewX(-16deg);
  animation: premium-light-sweep 7.5s ease-in-out infinite 1.2s;
}

.legacy-root .bredcrumb {
  position: relative;
  overflow: hidden;
  background: #171717;
}

.legacy-root .bredcrumb img {
  transform: scale(1.018);
  animation: premium-banner-enter 1.25s var(--premium-ease) both,
    premium-banner-breathe 13s ease-in-out 1.25s infinite alternate;
}

.legacy-root .brand-hero-image > img {
  animation: premium-hero-zoom 14s ease-in-out infinite alternate;
}

.legacy-root .brand-hero-copy > span,
.legacy-root .brand-hero-copy h2,
.legacy-root .brand-hero-copy p,
.legacy-root .brand-hero-copy a {
  opacity: 0;
  animation: premium-copy-rise .85s var(--premium-ease) forwards;
}
.legacy-root .brand-hero-copy > span { animation-delay: .18s; }
.legacy-root .brand-hero-copy h2 { animation-delay: .28s; }
.legacy-root .brand-hero-copy p { animation-delay: .4s; }
.legacy-root .brand-hero-copy a { animation-delay: .52s; }

.legacy-root .common-btn,
.legacy-root .commonbtn,
.legacy-root .brand-hero-copy a,
.legacy-root .downloadpdf1 a {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform .3s var(--premium-ease), box-shadow .3s ease, color .3s ease, background-color .3s ease;
}

.legacy-root .common-btn::after,
.legacy-root .commonbtn::after,
.legacy-root .brand-hero-copy a::after,
.legacy-root .downloadpdf1 a::after {
  content: "";
  position: absolute;
  inset: -100% auto -100% -45%;
  z-index: -1;
  width: 35%;
  background: rgba(255,255,255,.42);
  transform: skewX(-18deg);
  transition: left .65s var(--premium-ease);
}

.legacy-root .common-btn:hover,
.legacy-root .commonbtn:hover,
.legacy-root .brand-hero-copy a:hover,
.legacy-root .downloadpdf1 a:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(225,6,0,.28);
}

.legacy-root .common-btn:hover::after,
.legacy-root .commonbtn:hover::after,
.legacy-root .brand-hero-copy a:hover::after,
.legacy-root .downloadpdf1 a:hover::after { left: 120%; }

.legacy-root [data-premium-reveal] {
  opacity: 0;
  transform: translate3d(0,34px,0) scale(.985);
  filter: blur(7px);
  transition: opacity .78s var(--premium-ease) var(--reveal-delay,0ms),
    transform .78s var(--premium-ease) var(--reveal-delay,0ms),
    filter .78s ease var(--reveal-delay,0ms);
}

.legacy-root [data-premium-reveal].is-visible {
  opacity: 1;
  transform: translate3d(0,0,0) scale(1);
  filter: blur(0);
}

.legacy-root .premium-tilt {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --glow-x: 50%;
  --glow-y: 50%;
  position: relative;
  transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transform-style: preserve-3d;
  transition: transform .18s ease-out, box-shadow .32s ease, border-color .32s ease;
  will-change: transform;
}

.legacy-root .premium-tilt::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at var(--glow-x) var(--glow-y), rgba(255,255,255,.42), transparent 34%);
  transition: opacity .28s ease;
}

.legacy-root .premium-tilt:hover {
  z-index: 5;
  border-color: rgba(225,6,0,.48) !important;
  box-shadow: 0 28px 65px rgba(23,23,23,.16), 0 0 0 1px rgba(225,6,0,.1) !important;
}
.legacy-root .premium-tilt:hover::after { opacity: .5; }

.legacy-root .common-headings h3,
.legacy-root .common-headings1 h3,
.legacy-root .colortext {
  text-wrap: balance;
  text-shadow: 0 8px 28px rgba(225,6,0,.08);
}

.legacy-root .apporchCardIn,
.legacy-root .whyrefurbishment .iconimg {
  transition: transform .4s var(--premium-ease), box-shadow .4s ease, border-color .4s ease;
}
.legacy-root .apporchCard:hover .apporchCardIn,
.legacy-root .whyrefurbishment:hover .iconimg {
  transform: translateY(-8px) rotate(-2deg);
  border-color: rgba(225,6,0,.72);
  box-shadow: 0 18px 42px rgba(225,6,0,.15);
}

.legacy-root .enquiry-toggle {
  animation: premium-enquiry-pulse 2.8s ease-in-out infinite;
}

@keyframes premium-scroll-progress { to { transform: scaleX(1); } }
@keyframes premium-logo-aura {
  0%,12% { opacity: 0; transform: scale(.72); }
  34% { opacity: .86; transform: scale(1.08); }
  66% { opacity: .28; transform: scale(.96); }
  100% { opacity: 0; transform: scale(1); }
}
@keyframes premium-logo-inner-flow {
  0%,22% { background-position: 145% center; opacity: 0; }
  38% { opacity: .72; }
  68% { opacity: .22; }
  100% { background-position: -145% center; opacity: 0; }
}
@keyframes premium-bolt-lock {
  0%,12% { opacity: 1; transform: translate3d(0,0,0) rotate(0) scale(1); filter: drop-shadow(0 0 0 rgba(225,6,0,0)); }
  26% { opacity: 1; transform: translate3d(-2px,-18px,0) rotate(-7deg) scale(1.08); filter: drop-shadow(0 7px 8px rgba(225,6,0,.32)); }
  38% { opacity: 1; transform: translate3d(3px,-27px,0) rotate(9deg) scale(1.13); filter: drop-shadow(0 0 11px rgba(225,6,0,.82)); }
  52% { transform: translate3d(1px,-10px,0) rotate(-3deg) scale(1.055); filter: drop-shadow(0 5px 7px rgba(225,6,0,.42)); }
  63% { transform: translate3d(0,3px,0) rotate(1deg) scale(.965); filter: drop-shadow(0 0 9px rgba(225,6,0,.66)); }
  71%,100% { opacity: 1; transform: translate3d(0,0,0) rotate(0) scale(1); filter: drop-shadow(0 0 0 rgba(225,6,0,0)); }
}
@keyframes premium-tagline-reveal {
  0%,57% { opacity: 0; clip-path: inset(72% 94% 5% 6%); filter: blur(3px); transform: translateY(3px); }
  66% { opacity: 1; }
  84%,100% { opacity: 1; clip-path: inset(72% 5% 5% 6%); filter: blur(0); transform: translateY(0); }
}
@keyframes premium-bolt-hover {
  0%,100% { transform: translate3d(0,0,0) scale(1); filter: drop-shadow(0 0 0 rgba(225,6,0,0)); }
  44% { transform: translate3d(0,-4px,0) scale(1.08); filter: drop-shadow(0 0 8px rgba(225,6,0,.72)); }
}
@keyframes premium-light-sweep { 0%,54% { left: -28%; opacity: 0; } 60% { opacity: 1; } 86%,100% { left: 118%; opacity: 0; } }
@keyframes premium-banner-enter { from { opacity: .15; transform: scale(1.08); filter: saturate(.5); } to { opacity: 1; transform: scale(1.018); filter: saturate(1); } }
@keyframes premium-banner-breathe { to { transform: scale(1.045); } }
@keyframes premium-hero-zoom { to { transform: scale(1.055); } }
@keyframes premium-copy-rise { from { opacity: 0; transform: translateY(28px); filter: blur(6px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }
@keyframes premium-enquiry-pulse { 0%,100% { box-shadow: 0 10px 28px rgba(225,6,0,.28); } 50% { box-shadow: 0 10px 38px rgba(225,6,0,.55), 0 0 0 7px rgba(225,6,0,.08); } }

@media (max-width: 767px) {
  body:has(.legacy-root)::before { opacity: .02; }
  .legacy-root .bredcrumb img { animation-duration: .9s, 16s; }
  .legacy-root .apporchCard:hover .apporchCardIn,
  .legacy-root .whyrefurbishment:hover .iconimg { transform: translateY(-4px); }
}

@media (prefers-reduced-motion: reduce) {
  body:has(.legacy-root)::after,
  .legacy-root .header-logo::before,
  .legacy-root .header-logo::after,
  .legacy-root .header-logo img,
  .legacy-root .header-media-group > a::before,
  .legacy-root .header-media-group > a::after,
  .legacy-root .header-media-group > a img,
  .legacy-root .logo-bolt-fx,
  .legacy-root .logo-tagline-fx,
  .legacy-root .home-index-slider::before,
  .legacy-root .bredcrumb::after,
  .legacy-root .bredcrumb img,
  .legacy-root .brand-hero-image > img,
  .legacy-root .brand-hero-copy > span,
  .legacy-root .brand-hero-copy h2,
  .legacy-root .brand-hero-copy p,
  .legacy-root .brand-hero-copy a,
  .legacy-root .enquiry-toggle { animation: none !important; }
  .legacy-root [data-premium-reveal] { opacity: 1; transform: none; filter: none; transition: none; }
  .legacy-root .premium-tilt { transform: none !important; transition: box-shadow .2s ease; }
  .legacy-root .logo-tagline-fx { opacity: 1; clip-path: inset(72% 5% 5% 6%); filter: none; }
  .legacy-root .logo-bolt-fx { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Editorial typography + flagship product-card system.
   -------------------------------------------------------------------------- */

body:has(.legacy-root) {
  font-family: var(--font-body), "Manrope", sans-serif;
  font-kerning: normal;
  font-synthesis: none;
  letter-spacing: -.012em;
}

.legacy-root h1,
.legacy-root h2,
.legacy-root h3,
.legacy-root h4,
.legacy-root h5,
.legacy-root h6 {
  font-family: var(--font-display), "Sora", sans-serif;
  font-optical-sizing: auto;
  letter-spacing: -.045em;
}

.legacy-root p,
.legacy-root li,
.legacy-root td,
.legacy-root input,
.legacy-root textarea { letter-spacing: -.012em; }

.legacy-root .navbar-link,
.legacy-root .header-top-list li a,
.legacy-root .brand-hero-copy > span,
.legacy-root .common-btn,
.legacy-root .commonbtn,
.legacy-root .downloadpdf1 a,
.legacy-root .seo-topic-kicker {
  font-family: var(--font-accent), "Arial Narrow", sans-serif;
  font-stretch: condensed;
  letter-spacing: .105em;
}

.legacy-root .brand-hero-copy h2 {
  font-weight: 750;
  letter-spacing: -.07em;
  text-wrap: balance;
}

.legacy-root .common-headings,
.legacy-root .common-headings1 {
  position: relative;
  padding: 12px 0 17px;
  margin-bottom: 12px;
}

.legacy-root .common-headings h3,
.legacy-root .common-headings1 h3 {
  position: relative;
  z-index: 1;
  display: inline-block;
  font-size: clamp(2rem, 3.3vw, 3.6rem);
  font-weight: 750;
  line-height: 1;
  letter-spacing: -.065em;
  text-transform: none;
}

.legacy-root .common-headings::before,
.legacy-root .common-headings1::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(42vw, 460px);
  height: 90px;
  pointer-events: none;
  background: radial-gradient(ellipse, rgba(225,6,0,.11), transparent 70%);
  transform: translate(-50%,-50%);
}

.legacy-root .testiSection > .container-fluid > .swiper > p,
.legacy-root .product-Categories + p {
  max-width: 760px;
  margin-inline: auto;
  font-size: 15px;
  line-height: 1.75;
}

.legacy-root .product-Categories {
  counter-reset: premium-product;
  padding: 20px 12px 45px;
}

.legacy-root .product-Categories .swiper-slide {
  counter-increment: premium-product;
  height: auto;
  padding: 4px 0 18px;
}

.legacy-root .product-Categories .blog-card {
  position: relative;
  min-height: 100%;
  padding: 10px 10px 0 !important;
  color: #171717;
  background: linear-gradient(155deg, #fff 0%, #fff 58%, #f5efeb 100%) !important;
  border: 1px solid rgba(23,23,23,.1) !important;
  border-radius: 22px !important;
  box-shadow: 0 18px 42px rgba(23,23,23,.09), inset 0 1px 0 rgba(255,255,255,.9) !important;
  isolation: isolate;
}

.legacy-root .product-Categories .blog-card::before {
  content: "0" counter(premium-product);
  position: absolute;
  top: 22px;
  left: 22px;
  z-index: 6;
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  color: #fff;
  background: rgba(15,15,15,.92);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  box-shadow: 0 8px 22px rgba(0,0,0,.18);
  font-family: var(--font-accent), sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  transition: color .35s ease, background .35s ease, transform .35s var(--premium-ease);
}

.legacy-root .product-Categories .blog-card::after {
  content: "";
  position: absolute;
  right: -44px;
  bottom: -46px;
  z-index: -1;
  width: 135px;
  height: 135px;
  border: 26px solid rgba(225,6,0,.07);
  border-radius: 50%;
  transition: transform .55s var(--premium-ease), border-color .4s ease;
}

.legacy-root .product-Categories .blog-card:hover::before {
  color: #fff;
  background: #e10600;
  transform: rotate(-8deg) scale(1.08);
}
.legacy-root .product-Categories .blog-card:hover::after {
  border-color: rgba(225,6,0,.15);
  transform: scale(1.22) rotate(18deg);
}

.legacy-root .product-Categories .blog-card-img {
  display: block;
  overflow: hidden;
  min-height: 210px;
  background:
    radial-gradient(circle at 50% 35%, #fff 0%, #f7f5f3 55%, #e8e2dd 100%);
  border: 1px solid rgba(23,23,23,.06);
  border-radius: 14px !important;
}

.legacy-root .product-Categories .product-img12 {
  min-height: 210px;
  overflow: hidden;
  background: transparent !important;
}

.legacy-root .product-Categories .product-img12::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(112deg, transparent 30%, rgba(255,255,255,.82) 46%, transparent 62%);
  transform: translateX(-135%);
  transition: transform .85s var(--premium-ease);
}
.legacy-root .product-Categories .blog-card:hover .product-img12::after { transform: translateX(135%); }

.legacy-root .product-Categories .product-img12 img {
  width: 100% !important;
  height: 210px;
  object-fit: contain;
  padding: 20px;
  filter: drop-shadow(0 20px 22px rgba(23,23,23,.13));
  transform: scale(.94);
  transition: opacity .42s ease, transform .65s var(--premium-ease), filter .5s ease !important;
}
.legacy-root .product-Categories .blog-card:hover .product-img12 img {
  filter: drop-shadow(0 26px 30px rgba(225,6,0,.14));
  transform: scale(1.035) translateY(-4px);
}

.legacy-root .product-Categories .blog-content {
  display: flex;
  min-height: 215px;
  margin: 0 !important;
  padding: 25px 18px 24px;
  flex-direction: column;
  align-items: flex-start;
  text-align: left !important;
}

.legacy-root .product-Categories .blog-content h4 {
  position: relative;
  width: 100%;
  margin: 0 0 13px;
  color: #171717;
  font-size: clamp(1.15rem, 1.65vw, 1.5rem);
  font-weight: 700;
  line-height: 1.15;
  text-align: left !important;
  letter-spacing: -.045em;
}
.legacy-root .product-Categories .blog-content h4::after {
  content: "";
  display: block;
  width: 34px;
  height: 3px;
  margin-top: 12px;
  background: #e10600;
  transition: width .4s var(--premium-ease);
}
.legacy-root .product-Categories .blog-card:hover .blog-content h4::after { width: 72px; }

.legacy-root .product-Categories .seo-category-copy {
  min-height: 0;
  margin: 0 0 22px !important;
  padding: 0 !important;
  color: #6b6663 !important;
  border: 0 !important;
  font-size: 13px;
  line-height: 1.65;
  text-align: left !important;
}

.legacy-root .product-Categories .blog-content > p:last-child {
  display: inline-flex;
  min-height: 36px;
  margin: auto 0 0 !important;
  padding: 8px 14px !important;
  align-items: center;
  gap: 9px;
  color: #fff !important;
  background: #171717;
  border: 0 !important;
  border-radius: 999px;
  font-family: var(--font-accent), sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .11em;
  line-height: 1;
  text-transform: uppercase;
  transition: background .32s ease, transform .32s var(--premium-ease), box-shadow .32s ease;
}
.legacy-root .product-Categories .blog-content > p:last-child::after {
  content: "\2197";
  font-size: 15px;
  transition: transform .32s var(--premium-ease);
}
.legacy-root .product-Categories .blog-card:hover .blog-content > p:last-child {
  background: #e10600;
  box-shadow: 0 9px 24px rgba(225,6,0,.24);
  transform: translateY(-2px);
}
.legacy-root .product-Categories .blog-card:hover .blog-content > p:last-child::after { transform: translate(2px,-2px); }

@media (max-width: 767px) {
  .legacy-root .common-headings h3,
  .legacy-root .common-headings1 h3 { font-size: clamp(1.8rem, 9vw, 2.55rem); }
  .legacy-root .product-Categories { padding-inline: 5px; }
  .legacy-root .product-Categories .blog-card-img,
  .legacy-root .product-Categories .product-img12 { min-height: 235px; }
  .legacy-root .product-Categories .product-img12 img { height: 235px; }
  .legacy-root .product-Categories .blog-content { min-height: 190px; padding: 22px 16px; }
}

/* Premium carousel navigation
   One control language for Swiper, Slick and gallery overlays. The chevrons are
   drawn in CSS so a missing icon font can never bring the blue legacy arrows back. */
.legacy-root :is(.swiper-button-prev, .swiper-button-next),
.legacy-root :is(.dandik, .bamdik) {
  --premium-arrow-shift: 0px;
  position: absolute;
  z-index: 18;
  display: grid !important;
  width: 46px !important;
  height: 46px !important;
  margin: 0 !important;
  padding: 0 !important;
  place-items: center;
  overflow: hidden;
  color: #fff !important;
  background:
    radial-gradient(circle at 28% 18%, rgba(255,255,255,.18), transparent 34%),
    linear-gradient(145deg, #292929 0%, #111 72%) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  border-radius: 50% !important;
  box-shadow:
    0 10px 28px rgba(0,0,0,.22),
    0 0 0 3px rgba(225,6,0,.10),
    inset 0 1px 0 rgba(255,255,255,.18) !important;
  cursor: pointer;
  opacity: 1;
  visibility: visible;
  transition:
    background .28s ease,
    border-color .28s ease,
    box-shadow .28s ease,
    opacity .28s ease,
    transform .38s var(--premium-ease) !important;
}

.legacy-root :is(.swiper-button-prev, .swiper-button-next)::before,
.legacy-root :is(.dandik, .bamdik)::after {
  content: "" !important;
  position: absolute;
  inset: 5px;
  z-index: 0;
  border: 1px solid rgba(225,6,0,.5);
  border-radius: inherit;
  opacity: .7;
  transition: border-color .28s ease, transform .38s var(--premium-ease);
}

.legacy-root :is(.swiper-button-prev, .swiper-button-next)::after,
.legacy-root :is(.dandik, .bamdik)::before {
  content: "" !important;
  position: relative;
  z-index: 2;
  display: block;
  width: 10px;
  height: 10px;
  color: transparent !important;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  font-family: inherit !important;
  font-size: 0 !important;
  transition: transform .32s var(--premium-ease) !important;
}

.legacy-root .swiper-button-prev::after,
.legacy-root .bamdik::before { transform: translateX(2px) rotate(-135deg); }

.legacy-root .swiper-button-next::after,
.legacy-root .dandik::before { transform: translateX(-2px) rotate(45deg); }

.legacy-root .swiper-navigation-icon { display: none !important; }

.legacy-root :is(.swiper-button-prev, .swiper-button-next, .dandik, .bamdik):hover {
  background:
    radial-gradient(circle at 28% 18%, rgba(255,255,255,.25), transparent 35%),
    linear-gradient(145deg, #ff1b14 0%, #bd0500 78%) !important;
  border-color: rgba(255,255,255,.72) !important;
  box-shadow:
    0 14px 34px rgba(225,6,0,.34),
    0 0 0 4px rgba(225,6,0,.13),
    inset 0 1px 0 rgba(255,255,255,.3) !important;
  transform: translateY(-2px) scale(1.055) !important;
}

.legacy-root .swiper-button-prev:hover::after,
.legacy-root .bamdik:hover::before { transform: translateX(-2px) rotate(-135deg); }

.legacy-root .swiper-button-next:hover::after,
.legacy-root .dandik:hover::before { transform: translateX(2px) rotate(45deg); }

.legacy-root :is(.swiper-button-prev, .swiper-button-next, .dandik, .bamdik):active {
  transform: translateY(0) scale(.94) !important;
}

.legacy-root :is(.swiper-button-disabled, .slick-disabled) {
  cursor: default !important;
  opacity: .32 !important;
  filter: grayscale(1);
  pointer-events: none;
}

/* Lower-right hero navigation reads as a deliberate paired control. */
.legacy-root .homebaner .swiper-button-prev,
.legacy-root .homebaner .swiper-button-next {
  top: auto !important;
  bottom: 20px !important;
}
.legacy-root .homebaner .swiper-button-prev { right: 76px !important; left: auto !important; }
.legacy-root .homebaner .swiper-button-next { right: 20px !important; left: auto !important; }

/* Gallery/lightbox navigation follows the same visual system. */
.legacy-root .fancybox-navigation .fancybox-button {
  width: 48px;
  height: 48px;
  margin: 0 16px;
  padding: 13px;
  color: #fff;
  background: rgba(17,17,17,.9);
  border: 1px solid rgba(225,6,0,.72);
  border-radius: 50%;
  box-shadow: 0 12px 30px rgba(0,0,0,.28);
  transition: background .25s ease, transform .25s var(--premium-ease);
}
.legacy-root .fancybox-navigation .fancybox-button:hover {
  background: #e10600;
  transform: scale(1.06);
}

@media (max-width: 767px) {
  .legacy-root :is(.swiper-button-prev, .swiper-button-next),
  .legacy-root :is(.dandik, .bamdik) {
    width: 40px !important;
    height: 40px !important;
  }
  .legacy-root .homebaner .swiper-button-prev,
  .legacy-root .homebaner .swiper-button-next { bottom: 12px !important; }
  .legacy-root .homebaner .swiper-button-prev { right: 60px !important; }
  .legacy-root .homebaner .swiper-button-next { right: 12px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .legacy-root :is(.swiper-button-prev, .swiper-button-next, .dandik, .bamdik),
  .legacy-root :is(.swiper-button-prev, .swiper-button-next, .dandik, .bamdik)::before,
  .legacy-root :is(.swiper-button-prev, .swiper-button-next, .dandik, .bamdik)::after {
    transition-duration: .01ms !important;
  }
}

/* Native image / PDF viewer ------------------------------------------------ */
html.premium-viewer-open,
html.premium-viewer-open body { overflow: hidden !important; }

.legacy-root .project-block-one:has(a.lightbox-image),
.legacy-root a[data-fancybox] { cursor: zoom-in; }

.premium-media-viewer[hidden] { display: none !important; }
.premium-media-viewer {
  position: fixed;
  inset: 0;
  z-index: 100500;
  display: grid;
  padding: clamp(10px, 2.3vw, 34px);
  place-items: center;
  opacity: 0;
  transition: opacity .22s ease;
}
.premium-media-viewer.is-open { opacity: 1; }

.premium-media-viewer__backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 18%, rgba(225,6,0,.18), transparent 36%),
    rgba(8,8,8,.94);
  backdrop-filter: blur(14px) saturate(80%);
  -webkit-backdrop-filter: blur(14px) saturate(80%);
}

.premium-media-viewer__panel {
  position: relative;
  display: grid;
  width: min(1180px, 96vw);
  height: min(880px, 94vh);
  grid-template-rows: auto 1fr;
  overflow: hidden;
  background: #121212;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 18px;
  box-shadow: 0 34px 100px rgba(0,0,0,.58), 0 0 0 1px rgba(225,6,0,.18);
  transform: translateY(16px) scale(.975);
  transition: transform .32s var(--premium-ease);
}
.premium-media-viewer.is-open .premium-media-viewer__panel { transform: translateY(0) scale(1); }

.premium-media-viewer__bar {
  position: relative;
  z-index: 5;
  display: flex;
  min-height: 68px;
  padding: 11px 14px 11px 20px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  color: #fff;
  background: linear-gradient(90deg, #181818, #242020);
  border-bottom: 1px solid rgba(255,255,255,.11);
}
.premium-media-viewer__bar > div:first-child { min-width: 0; }
.premium-media-viewer__eyebrow {
  display: block;
  margin-bottom: 2px;
  color: #ff3933;
  font: 700 10px/1.2 var(--font-accent), sans-serif;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.premium-media-viewer__title {
  display: block;
  overflow: hidden;
  max-width: min(60vw, 620px);
  color: #fff;
  font: 650 clamp(14px, 1.7vw, 19px)/1.25 var(--font-display), sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: capitalize;
}
.premium-media-viewer__actions { display: flex; align-items: center; gap: 9px; }
.premium-media-viewer__original {
  display: inline-flex;
  min-height: 38px;
  padding: 0 15px;
  align-items: center;
  color: #fff !important;
  background: #e10600;
  border-radius: 999px;
  font: 700 11px/1 var(--font-accent), sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.premium-media-viewer__actions button {
  display: grid;
  width: 40px;
  height: 40px;
  padding: 0 0 3px;
  place-items: center;
  color: #fff;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 50%;
  font: 300 28px/1 Arial, sans-serif;
  transition: background .2s ease, transform .2s ease;
}
.premium-media-viewer__actions button:hover { background: #e10600; transform: rotate(90deg); }

.premium-media-viewer__stage {
  position: relative;
  display: grid;
  min-height: 0;
  padding: 18px;
  place-items: center;
  overflow: auto;
  background:
    linear-gradient(45deg, rgba(255,255,255,.018) 25%, transparent 25% 75%, rgba(255,255,255,.018) 75%),
    #0d0d0d;
  background-size: 24px 24px;
}
.premium-media-viewer__stage img,
.premium-media-viewer__stage video {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  margin: auto;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 20px 54px rgba(0,0,0,.34);
}
.premium-media-viewer__stage .premium-media-viewer__document-preview {
  max-height: none;
  margin-block: auto;
  background: #fff;
  border: 8px solid #fff;
  border-radius: 4px;
  box-shadow: 0 24px 70px rgba(0,0,0,.48);
}
.premium-media-viewer__document-fallback {
  display: grid;
  width: min(420px, 90%);
  min-height: 220px;
  padding: 32px;
  place-content: center;
  gap: 10px;
  color: #fff;
  background: linear-gradient(145deg, #242424, #141414);
  border: 1px solid rgba(225,6,0,.45);
  border-radius: 14px;
  text-align: center;
}
.premium-media-viewer__document-fallback strong { font: 700 24px/1.2 var(--font-display), sans-serif; }
.premium-media-viewer__document-fallback span { color: rgba(255,255,255,.68); font-size: 13px; }
.premium-media-viewer__stage iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 420px;
  background: #fff;
  border: 0;
  border-radius: 9px;
}

.premium-media-viewer__nav {
  position: absolute;
  top: 50%;
  z-index: 6;
  width: 48px;
  height: 48px;
  padding: 0;
  background: rgba(18,18,18,.9);
  border: 1px solid rgba(225,6,0,.75);
  border-radius: 50%;
  box-shadow: 0 12px 28px rgba(0,0,0,.35);
  transform: translateY(-50%);
  transition: background .2s ease, transform .25s var(--premium-ease);
}
.premium-media-viewer__nav::after {
  content: "";
  position: absolute;
  top: 17px;
  width: 11px;
  height: 11px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
}
.premium-media-viewer__prev { left: 24px; }
.premium-media-viewer__next { right: 24px; }
.premium-media-viewer__prev::after { left: 19px; transform: rotate(-135deg); }
.premium-media-viewer__next::after { right: 19px; transform: rotate(45deg); }
.premium-media-viewer__nav:hover { background: #e10600; transform: translateY(-50%) scale(1.07); }
.premium-media-viewer__count {
  position: absolute;
  right: 22px;
  bottom: 18px;
  z-index: 6;
  min-width: 48px;
  padding: 6px 10px;
  color: #fff;
  background: rgba(12,12,12,.82);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  font: 700 11px/1 var(--font-accent), sans-serif;
  text-align: center;
  letter-spacing: .12em;
}

@media (max-width: 767px) {
  .premium-media-viewer { padding: 6px; }
  .premium-media-viewer__panel { width: 100%; height: 96dvh; border-radius: 13px; }
  .premium-media-viewer__bar { min-height: 61px; padding: 9px 10px 9px 14px; }
  .premium-media-viewer__eyebrow { display: none; }
  .premium-media-viewer__title { max-width: 43vw; font-size: 13px; }
  .premium-media-viewer__original { min-height: 34px; padding-inline: 11px; font-size: 9px; }
  .premium-media-viewer__actions button { width: 36px; height: 36px; }
  .premium-media-viewer__stage { padding: 8px; }
  .premium-media-viewer__stage iframe { min-height: 360px; }
  .premium-media-viewer__nav { top: auto; bottom: 14px; width: 42px; height: 42px; transform: none; }
  .premium-media-viewer__nav:hover { transform: scale(1.05); }
  .premium-media-viewer__nav::after { top: 14px; }
  .premium-media-viewer__prev { left: 14px; }
  .premium-media-viewer__next { right: 14px; }
  .premium-media-viewer__prev::after { left: 17px; }
  .premium-media-viewer__next::after { right: 17px; }
  .premium-media-viewer__count { right: 50%; bottom: 19px; transform: translateX(50%); }
}

@media (prefers-reduced-motion: reduce) {
  .premium-media-viewer,
  .premium-media-viewer__panel,
  .premium-media-viewer__nav { transition: none !important; }
}