html{scroll-behavior:smooth;scroll-padding-top:6rem}:focus-visible{outline:3px solid #d51220;outline-offset:2px}.parallax{background-attachment:fixed;background-position:center;background-size:cover}@media (max-width:768px){.parallax{background-attachment:scroll}}img[loading="lazy"]{transition:opacity .4s ease}.gallery-cell{aspect-ratio:4 / 3;object-fit:cover}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none !important;animation:none !important}}
/* Logo diagonal shine: bright sweep that repeats */
.sr-logo-shine{position:relative;overflow:hidden;display:inline-block}
.sr-logo-shine::after{content:"";position:absolute;top:-30%;bottom:-30%;left:-75%;width:55%;z-index:5;
  background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,.15) 35%,rgba(255,255,255,.85) 50%,rgba(255,255,255,.15) 65%,transparent 100%);
  transform:skewX(-20deg);animation:sr-shine var(--sr-shine-cycle,6s) ease-in-out infinite;pointer-events:none}
@keyframes sr-shine{0%{left:-75%}18%{left:135%}100%{left:135%}}
@media (prefers-reduced-motion:reduce){.sr-logo-shine::after{animation:none}}
/* Industry tiles: secondary-colour hover accent + lift */
.sr-ind-tile{border:2px solid transparent;transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease}
.sr-ind-tile .sr-ind-icon{display:inline-flex;transition:transform .35s ease}
.sr-ind-tile .sr-ind-cta{color:rgba(255,255,255,.7);opacity:0;transition:opacity .3s ease,color .3s ease}
.sr-ind-tile:hover{transform:translateY(-6px);box-shadow:0 16px 34px rgba(0,0,0,.22);border-color:var(--sr-ind-hover,#f4c20d)}
.sr-ind-tile:hover .sr-ind-icon{transform:scale(1.12)}
.sr-ind-tile:hover .sr-ind-cta{opacity:1;color:var(--sr-ind-hover,#f4c20d)}

/* ============================================================================
   2026 DESIGN REFRESH  —  community bar, Grow-Together mega, social rail/slider
   ========================================================================= */

/* ---- 1. Community bar (Jio-style animated announcement strip) ---- */
.du-community-bar{
  background:linear-gradient(90deg,var(--du-cb,#018840),var(--du-cb2,#046b34) 60%,var(--du-cb,#018840));
  color:#fff;overflow:hidden;position:relative;z-index:2}
.du-cb-inner{max-width:80rem;margin:0 auto;display:flex;align-items:center;gap:.75rem;height:34px;padding:0 1rem}
.du-cb-badge{display:inline-flex;align-items:center;gap:.35rem;flex:0 0 auto;font-size:11px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;background:rgba(255,255,255,.16);color:#fff;
  padding:3px 10px;border-radius:999px;white-space:nowrap}
.du-cb-badge svg{opacity:.95}
.du-cb-viewport{flex:1 1 auto;overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.du-cb-track{display:inline-flex;align-items:center;white-space:nowrap;width:max-content;
  animation:du-cb-scroll var(--du-cb-speed,38s) linear infinite;will-change:transform}
.du-community-bar:hover .du-cb-track{animation-play-state:paused}
.du-cb-item{font-size:12.5px;font-weight:600;color:rgba(255,255,255,.95);padding:0 .15rem}
.du-cb-dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.55);margin:0 1.15rem;vertical-align:middle}
.du-cb-cta{flex:0 0 auto;display:inline-flex;align-items:center;gap:.3rem;font-size:12px;font-weight:800;
  text-transform:uppercase;letter-spacing:.04em;color:var(--du-cb,#018840);background:#fff;
  padding:5px 12px;border-radius:999px;white-space:nowrap;transition:transform .15s ease,box-shadow .15s ease}
.du-cb-cta:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.2)}
@keyframes du-cb-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (max-width:768px){.du-cb-badge,.du-cb-cta{display:none}.du-cb-inner{padding:0 .75rem;height:32px}}
@media (prefers-reduced-motion:reduce){.du-cb-track{animation:none}}

/* ---- 2. Grow Together link + mega panel ---- */
.du-grow-link{color:#fff;transition:opacity .15s}
.du-grow-link:hover{opacity:.85}
.du-gt-grid{display:grid;grid-template-columns:1fr 15rem}
.du-gt-list{padding:1.1rem;display:flex;flex-direction:column;gap:.35rem}
.du-gt-row{display:flex;align-items:center;gap:.85rem;padding:.7rem .8rem;border-radius:.85rem;transition:background .18s ease}
.du-gt-row:hover{background:#f3faf5}
.du-gt-ic{flex:0 0 auto;width:42px;height:42px;border-radius:.7rem;display:flex;align-items:center;justify-content:center;
  color:var(--du-g,#018840);background:color-mix(in srgb,var(--du-g,#018840) 12%,#fff);transition:all .18s ease}
.du-gt-row:hover .du-gt-ic{background:var(--du-g,#018840);color:#fff}
.du-gt-title{display:block;font-weight:700;font-size:14.5px;color:#111419;line-height:1.2}
.du-gt-row:hover .du-gt-title{color:var(--du-g,#018840)}
.du-gt-desc{display:block;font-size:12px;color:#777;margin-top:2px;line-height:1.35}
.du-gt-arrow{flex:0 0 auto;color:#c9d3cd;transform:translateX(-4px);opacity:0;transition:all .18s ease}
.du-gt-row:hover .du-gt-arrow{color:var(--du-g,#018840);transform:translateX(0);opacity:1}
.du-gt-aside{padding:1.4rem 1.25rem;color:#fff;display:flex;flex-direction:column;justify-content:center;
  background:linear-gradient(155deg,var(--du-g,#018840),#0c2b1c)}
.du-gt-aside-kicker{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.du-gt-aside-head{font-family:inherit;font-weight:800;font-size:1.35rem;line-height:1.1;margin:.4rem 0 .5rem}
.du-gt-aside-sub{font-size:12.5px;line-height:1.45;color:rgba(255,255,255,.85)}
.du-gt-aside-btn{display:inline-flex;width:max-content;margin-top:1rem;background:#fff;color:var(--du-g,#018840);
  font-weight:700;font-size:13px;padding:8px 16px;border-radius:999px;transition:transform .15s ease}
.du-gt-aside-btn:hover{transform:translateY(-2px)}
@media (max-width:640px){.du-gt-grid{grid-template-columns:1fr}.du-gt-aside{display:none}}

/* ---- 3. Floating social rail (RIGHT-center, green bar, white icons) ---- */
.du-social-rail{position:fixed;right:0;left:auto;top:50%;transform:translateY(-50%);z-index:55;
  display:flex;flex-direction:column;gap:4px;padding:10px 7px;
  background:var(--du-g,#018840);
  border-radius:14px 0 0 14px;box-shadow:0 10px 28px rgba(0,0,0,.2)}
.du-social-rail-label{writing-mode:vertical-rl;text-orientation:mixed;font-size:9px;font-weight:800;
  letter-spacing:.18em;text-transform:uppercase;color:#fff;text-align:center;padding:2px 0 6px;opacity:.9}
.du-social-rail-ic{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  color:#fff;transition:all .18s ease}
.du-social-rail-ic svg{width:19px;height:19px}
.du-social-rail-ic:hover{background:#fff;color:var(--brand,#018840);transform:translateX(-3px) scale(1.05)}
@media (max-width:768px){.du-social-rail{display:none}}
@media print{.du-social-rail{display:none}}

/* ---- 4. Social media integrated slider ---- */
.du-social-slider{padding:4.5rem 0;position:relative;overflow:hidden;
  background:radial-gradient(120% 120% at 0% 0%,color-mix(in srgb,var(--du-g,#018840) 8%,#fff),#fff 55%)}
.du-ss-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.25rem;margin-bottom:2rem}
.du-ss-kicker{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--du-g,#018840)}
.du-ss-title{font-size:clamp(1.6rem,3vw,2.4rem);color:#111419;margin-top:.35rem;line-height:1.1}
.du-ss-sub{color:#5c665f;margin-top:.55rem;max-width:34rem;font-size:.95rem}
.du-ss-follow{display:flex;gap:.55rem;flex-wrap:wrap}
.du-ss-follow-ic{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid #e5e5e5;color:#55605a;transition:all .18s ease;box-shadow:0 2px 8px rgba(0,0,0,.05)}
.du-ss-follow-ic svg{width:19px;height:19px}
.du-ss-follow-ic:hover{background:var(--brand,#018840);border-color:var(--brand,#018840);color:#fff;transform:translateY(-3px)}
.du-ss-viewport{overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
.du-ss-track{display:flex;gap:1.1rem;width:max-content;animation:du-ss-scroll var(--du-ss-speed,40s) linear infinite;will-change:transform}
.du-ss-viewport:hover .du-ss-track{animation-play-state:paused}
.du-ss-card{position:relative;flex:0 0 auto;width:17rem;height:17rem;border-radius:1.1rem;overflow:hidden;
  background:#eef2ef;box-shadow:0 10px 28px rgba(0,0,0,.1);transition:transform .3s ease}
.du-ss-card:hover{transform:translateY(-6px)}
.du-ss-card img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.du-ss-card:hover img{transform:scale(1.07)}
.du-ss-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(6,32,20,.7),transparent 55%)}
.du-ss-badge{position:absolute;top:.7rem;right:.7rem;width:34px;height:34px;border-radius:50%;background:#fff;
  display:flex;align-items:center;justify-content:center;box-shadow:0 3px 10px rgba(0,0,0,.18)}
.du-ss-badge svg{width:17px;height:17px}
.du-ss-handle{position:absolute;left:.85rem;bottom:.75rem;color:#fff;font-weight:700;font-size:13px;
  text-shadow:0 1px 4px rgba(0,0,0,.4)}
@keyframes du-ss-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (max-width:640px){.du-ss-card{width:13.5rem;height:13.5rem}}
@media (prefers-reduced-motion:reduce){.du-ss-track{animation:none}}
/* ============================================================================
   2026 REFINEMENT  —  header search, social rail, premium card hover,
   brands carousel, and light global polish.  (Appended; overrides earlier
   rules where selectors match, so nothing above needs editing.)
   ========================================================================= */

/* ---- Item 1: prominent header search ---- */
.sr-hsearch{position:relative;display:flex;align-items:center;width:100%;max-width:460px;
  background:#fff;border:1.5px solid #e2e7e4;border-radius:10px !important;
  padding:4px 5px 4px 44px;box-shadow:0 1px 2px rgba(17,20,25,.05);
  transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease}
.sr-hsearch-ic{position:absolute;left:15px;top:50%;transform:translateY(-50%);
  width:19px;height:19px;color:#9aa2a0;pointer-events:none;transition:color .25s ease}
.sr-hsearch-ic svg{width:19px;height:19px}
.sr-hsearch-input{flex:1 1 auto;min-width:0;border:0;outline:0;background:transparent;
  -webkit-appearance:none;appearance:none;border-radius:0;
  font-size:14.5px;color:#1b2a22;padding:9px 6px;font-family:inherit;line-height:1.2}
.sr-hsearch-input::placeholder{color:#9aa2a0}
.sr-hsearch-input::-webkit-search-decoration,
.sr-hsearch-input::-webkit-search-results-button{-webkit-appearance:none}
.sr-hsearch-input::-webkit-search-cancel-button{cursor:pointer}
.sr-hsearch-btn{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;border:0;cursor:pointer;
  background:var(--brand-primary,#1f8a4c);color:#fff;border-radius:8px !important;padding:9px 16px;
  font-size:13.5px;font-weight:700;font-family:inherit;transition:filter .2s ease,transform .15s ease}
.sr-hsearch-btn svg{width:16px;height:16px}
.sr-hsearch-btn:hover{filter:brightness(1.07)}
.sr-hsearch-btn:active{transform:scale(.96)}
.sr-hsearch:focus-within{border-color:var(--brand-primary,#1f8a4c);transform:translateY(-1px);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--brand-primary,#1f8a4c) 16%,transparent),0 6px 16px -8px rgba(17,20,25,.25)}
.sr-hsearch:focus-within .sr-hsearch-ic{color:var(--brand-primary,#1f8a4c)}
@media (max-width:1180px){.sr-hsearch-btn-tx{display:none}.sr-hsearch-btn{padding:9px 11px}.sr-hsearch{max-width:340px}}
.sr-hsearch--mobile{max-width:none}
.sr-hsearch--mobile .sr-hsearch-btn-tx{display:none}
@media (prefers-reduced-motion:reduce){.sr-hsearch,.sr-hsearch-btn{transition:none}}

/* ---- Item 3: floating social rail refresh (no "Follow" text) ---- */
.du-social-rail{gap:10px;padding:12px 9px;border-radius:16px 0 0 16px;
  background:linear-gradient(160deg,var(--du-g,#1f8a4c),color-mix(in srgb,var(--du-g,#1f8a4c) 74%,#0c2b1c));
  box-shadow:0 10px 28px rgba(17,20,25,.20),0 2px 6px rgba(17,20,25,.12)}
.du-social-rail-label{display:none}
.du-social-rail-ic{width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.10);
  color:#fff;transition:background .2s ease,color .2s ease,transform .2s ease,box-shadow .2s ease}
.du-social-rail-ic svg{width:20px;height:20px}
.du-social-rail-ic:hover{background:#fff;color:var(--brand,var(--du-g,#1f8a4c));
  transform:translateX(-4px) scale(1.08);box-shadow:0 6px 16px rgba(0,0,0,.22)}

/* ---- Item 6: premium card hover (categories, products, work) ---- */
.sr-lift{transition:transform .4s cubic-bezier(.22,.61,.36,1),box-shadow .4s cubic-bezier(.22,.61,.36,1);
  will-change:transform;backface-visibility:hidden;transform:translateZ(0)}
.sr-lift:hover{transform:translateY(-6px) scale(1.015);box-shadow:0 18px 40px -14px rgba(17,20,25,.30)}
.sr-zoom{transition:transform .5s cubic-bezier(.22,.61,.36,1);will-change:transform;backface-visibility:hidden}
.group:hover .sr-zoom{transform:scale(1.06)}
@media (prefers-reduced-motion:reduce){.sr-lift,.sr-zoom{transition:none}.sr-lift:hover{transform:none}.group:hover .sr-zoom{transform:none}}

/* ---- Item 7: Our Brands auto-scrolling logo carousel (25% bigger & visually equal) ---- */
.sr-brands{padding:4.5rem 0;background:#fff}
.sr-brands-viewport{overflow:hidden;position:relative;cursor:grab;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.sr-brands-viewport.is-drag{cursor:grabbing}
.sr-brands-track{display:flex;align-items:center;gap:2rem;width:max-content;will-change:transform;touch-action:pan-y;padding:10px 0}
.sr-brand-cell{flex:0 0 auto;display:flex;align-items:center;justify-content:center;height:165px;width:240px;padding:20px 26px;background:#ffffff;border:1px solid #e2e8f0;border-radius:18px;box-shadow:0 2px 6px rgba(0,0,0,0.03);transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.sr-brand-cell:hover{transform:translateY(-4px);box-shadow:0 12px 24px -6px rgba(17,20,25,0.12);border-color:rgba(213,18,32,0.3);background:#ffffff}
.sr-brand-logo{max-height:140px;width:auto;max-width:190px;object-fit:contain;
  -webkit-user-drag:none;user-select:none;transition:filter .3s ease,opacity .3s ease,transform .3s ease}
.sr-brands--gray .sr-brand-logo{filter:grayscale(1);opacity:.68}
.sr-brands--gray .sr-brand-cell:hover .sr-brand-logo{filter:grayscale(0);opacity:1}
.sr-brand-cell:hover .sr-brand-logo{transform:scale(1.06)}
@media (max-width:640px){.sr-brands-track{gap:1.2rem}.sr-brand-cell{height:125px;width:175px;padding:12px 16px;border-radius:14px;background:#ffffff}.sr-brand-logo{max-height:105px;max-width:145px}}

/* ---- Light global polish (buttons + focus) ---- */
.sr-cta{transition:transform .2s ease,box-shadow .2s ease,filter .2s ease,background-color .2s ease,color .2s ease,border-color .2s ease}
.sr-cta:hover{transform:translateY(-1px)}
.sr-cta.cta-primary:hover{box-shadow:0 10px 22px -10px rgba(17,20,25,.45)}
@media (prefers-reduced-motion:reduce){.sr-cta:hover{transform:none}}

/* ============================================================================
   GLOBAL PRODUCT & CATEGORY IMAGE CONTAIN-FIT (Fit to width without crop)
   ========================================================================= */
.sr-zoom,
.sr-product-img,
.sr-category-img,
.group .sr-zoom {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}
.sr-brand-logo {
  object-fit: contain !important;
  max-height: 140px !important;
  max-width: 190px !important;
}

/* Background video distraction-free suppression */
#sr-hero iframe,
#sr-hero .sr-hero-yt-holder,
#sr-hero iframe.sr-hero-yt {
  pointer-events: none !important;
  user-select: none !important;
}
#sr-hero video::-webkit-media-controls,
#sr-hero video::-webkit-media-controls-enclosure,
#sr-hero video::-webkit-media-controls-panel,
#sr-hero video::-webkit-media-controls-play-button,
#sr-hero video::-webkit-media-controls-start-playback-button,
#sr-hero video::-webkit-media-controls-overlay-play-button,
#sr-hero video::-webkit-media-controls-overlay-enclosure,
#sr-hero video::-webkit-media-controls-timeline,
#sr-hero video::-webkit-media-controls-current-time-display,
#sr-hero video::-webkit-media-controls-time-remaining-display,
#sr-hero video::-webkit-media-controls-toggle-closed-captions-button,
#sr-hero video::-webkit-media-controls-volume-slider,
#sr-hero video::-webkit-media-controls-mute-button,
#sr-hero video::-internal-media-controls-overlay-cast-button {
  display: none !important;
  -webkit-appearance: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
#sr-hero video {
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

/* Complete Global Native & Browser Media Controls Neutralizer */
video::-webkit-media-controls,
video::-webkit-media-controls-enclosure,
video::-webkit-media-controls-panel,
video::-webkit-media-controls-play-button,
video::-webkit-media-controls-start-playback-button,
video::-webkit-media-controls-overlay-play-button,
video::-webkit-media-controls-overlay-enclosure,
video::-webkit-media-controls-timeline,
video::-webkit-media-controls-current-time-display,
video::-webkit-media-controls-time-remaining-display,
video::-webkit-media-controls-toggle-closed-captions-button,
video::-webkit-media-controls-volume-slider,
video::-webkit-media-controls-mute-button,
video::-internal-media-controls-overlay-cast-button,
*::-webkit-media-controls-start-playback-button,
*::-webkit-media-controls-overlay-play-button {
  display: none !important;
  -webkit-appearance: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
}
.sr-hero-bg video, video.sr-hero-bg-video {
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

[x-cloak] { display: none !important; }

