/* XShopDigital v2.22.1 — hero artwork, glow and icon refinement */
:root{
  --xsd-racing-red:#DD0200;
  --xsd-black-cherry:#55100D;
  --xsd-coffee:#1A0706;
  --xsd-hero-line:rgba(221,2,0,.26);
  --xsd-hero-glow:rgba(221,2,0,.28);
}

/* Keep the existing hero title colour treatment; only refine the surrounding presentation. */
.xsd-dark-premium .mock-hero{
  position:relative;
  isolation:isolate;
  background:
    radial-gradient(circle at 76% 48%,rgba(221,2,0,.16),transparent 24%),
    radial-gradient(circle at 72% 62%,rgba(85,16,13,.30),transparent 34%),
    linear-gradient(135deg,#111317 0%,#171517 46%,#100e10 100%)!important;
  border-bottom:1px solid rgba(221,2,0,.16)!important;
}
.xsd-dark-premium .mock-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(221,2,0,.035) 1px,transparent 1px),
    linear-gradient(rgba(221,2,0,.028) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(to right,transparent 18%,#000 64%,#000);
  pointer-events:none;
  z-index:0;
}
.xsd-dark-premium .mock-hero::after{
  content:"";
  position:absolute;
  width:430px;
  height:180px;
  right:6%;
  bottom:-75px;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(221,2,0,.22),rgba(85,16,13,.08) 48%,transparent 72%);
  filter:blur(12px);
  pointer-events:none;
  z-index:0;
}
.xsd-dark-premium .mock-hero-grid{position:relative;z-index:2}
.xsd-dark-premium .mock-hero-art{position:relative;isolation:isolate;overflow:visible!important}
.xsd-dark-premium .mock-hero-art::before{
  content:"";
  position:absolute;
  width:72%;
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle,rgba(221,2,0,.25),rgba(85,16,13,.10) 42%,transparent 70%);
  filter:blur(22px);
  z-index:-1;
  animation:xsdHeroPulse 5.5s ease-in-out infinite;
}
.xsd-dark-premium .mock-hero-art picture{display:block;width:100%;position:relative}
.xsd-dark-premium .mock-hero-art img{
  width:100%;
  max-width:650px;
  filter:drop-shadow(0 24px 34px rgba(0,0,0,.52)) drop-shadow(0 0 22px rgba(221,2,0,.17)) saturate(1.08) contrast(1.06)!important;
  transform-origin:50% 70%;
}
@keyframes xsdHeroPulse{0%,100%{opacity:.68;transform:scale(.94)}50%{opacity:1;transform:scale(1.06)}}

/* Refined eyebrow — same copy, now aligned to the concept art. */
.xsd-dark-premium .mock-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:7px;
  width:max-content;
  color:#ff6a64!important;
  background:rgba(85,16,13,.32)!important;
  border:1px solid rgba(221,2,0,.35)!important;
  box-shadow:inset 0 0 20px rgba(221,2,0,.04),0 0 18px rgba(221,2,0,.06);
}
.xsd-dark-premium .mock-eyebrow svg{color:#ff3933;filter:drop-shadow(0 0 5px rgba(221,2,0,.55))}

/* Hero trust icons: dark glass tile + red outline glow. */
.xsd-dark-premium .mock-trust-row{gap:12px}
.xsd-dark-premium .mock-trust{
  position:relative;
  border-radius:10px;
  padding:7px 9px 7px 5px;
}
.xsd-dark-premium .mock-trust>span,
.xsd-dark-premium .mock-trust>svg{
  color:#ff3933!important;
  filter:drop-shadow(0 0 6px rgba(221,2,0,.45));
}
.xsd-dark-premium .mock-trust svg{stroke-width:1.9}

/* Sitewide icon family — white/graphite line icons with intentional red accent. */
.xsd-dark-premium .category-icon,
.xsd-dark-premium .service-icon,
.xsd-dark-premium .round-icon,
.xsd-dark-premium .feature-icon,
.xsd-dark-premium .quick-contact-card>span,
.xsd-dark-premium .support-topic>span,
.xsd-dark-premium .hosting-benefit>span{
  color:#f5f3f2!important;
  background:linear-gradient(180deg,#282527,#1b191b)!important;
  border:1px solid rgba(221,2,0,.28)!important;
  box-shadow:inset 0 0 18px rgba(221,2,0,.045),0 0 18px rgba(221,2,0,.055)!important;
}
.xsd-dark-premium .category-icon svg,
.xsd-dark-premium .service-icon svg,
.xsd-dark-premium .round-icon svg,
.xsd-dark-premium .feature-icon svg,
.xsd-dark-premium .quick-contact-card>span svg,
.xsd-dark-premium .support-topic>span svg,
.xsd-dark-premium .hosting-benefit>span svg{
  color:#ff3933!important;
  stroke:currentColor;
  filter:drop-shadow(0 0 5px rgba(221,2,0,.32));
}
.xsd-dark-premium .mock-category-tile:hover .category-icon,
.xsd-dark-premium .mock-service-card:hover .service-icon{
  border-color:rgba(255,52,46,.58)!important;
  box-shadow:0 0 24px rgba(221,2,0,.14),inset 0 0 20px rgba(221,2,0,.08)!important;
}

/* Header signed-in account control: remove solid-red block. */
.xsd-dark-premium .header-user-dropdown .account-action{
  min-height:46px;
  padding:5px 11px 5px 7px;
  gap:8px;
  color:#f7f3f2!important;
  background:linear-gradient(180deg,#242124,#1a181a)!important;
  border:1px solid #4b3a39!important;
  border-radius:11px!important;
  box-shadow:inset 0 1px rgba(255,255,255,.025),0 6px 18px rgba(0,0,0,.18)!important;
}
.xsd-dark-premium .header-user-dropdown .account-action:hover{
  background:linear-gradient(180deg,#2a2426,#20191b)!important;
  border-color:#7e2925!important;
  box-shadow:0 0 0 1px rgba(221,2,0,.12),0 9px 22px rgba(0,0,0,.25)!important;
  transform:translateY(-1px);
}
.xsd-dark-premium .header-user-dropdown .account-action>svg{
  width:30px;
  height:30px;
  padding:5px;
  border-radius:50%;
  color:#fff!important;
  background:#171517;
  border:1px solid rgba(221,2,0,.55);
  filter:drop-shadow(0 0 6px rgba(221,2,0,.28));
}
.xsd-dark-premium .header-user-dropdown .account-action span{gap:2px;min-width:0}
.xsd-dark-premium .header-user-dropdown .account-action b{
  max-width:122px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#fff!important;
  font-size:10px;
}
.xsd-dark-premium .header-user-dropdown .account-action small{color:#aaa4a2!important;font-size:8px}

/* Signed-out account button follows the same quiet dark language. */
.xsd-dark-premium .mock-header-actions>a.account-action{
  background:linear-gradient(180deg,#242124,#1a181a)!important;
  color:#fff!important;
  border:1px solid #4b3a39!important;
  box-shadow:none!important;
}
.xsd-dark-premium .mock-header-actions>a.account-action:hover{border-color:#7e2925!important;background:#2b2021!important}

/* Make the search/cart red accents feel like part of one system. */
.xsd-dark-premium .mock-header-search button{box-shadow:0 0 16px rgba(221,2,0,.16)}
.xsd-dark-premium .header-cart span{box-shadow:0 0 0 2px #111317,0 0 10px rgba(221,2,0,.35)}

@media(max-width:900px){
  .xsd-dark-premium .mock-hero-art img{max-width:580px}
  .xsd-dark-premium .mock-hero-art::before{width:68%}
}
@media(max-width:560px){
  .xsd-dark-premium .mock-hero-art{margin-top:2px}
  .xsd-dark-premium .mock-hero-art img{width:110%;max-width:none;margin-left:-5%}
  .xsd-dark-premium .mock-hero::after{width:300px;height:130px;right:-6%;bottom:-55px}
  .xsd-dark-premium .mock-trust{padding:5px}
  .xsd-dark-premium .header-user-dropdown .account-action{padding:5px;border-radius:10px!important}
  .xsd-dark-premium .header-user-dropdown .account-action>svg{width:30px;height:30px}
}

/* v2.23.10 raster hero artwork refinement */
.xsd-dark-premium .mock-hero-art picture{display:flex;align-items:center;justify-content:center}
.xsd-dark-premium .mock-hero-art img[src*="-v2240.webp"]{border-radius:28px;object-fit:contain;max-height:520px;background:#090b0e;box-shadow:0 28px 60px rgba(0,0,0,.34),0 0 44px rgba(221,2,0,.12)}
/* v2.23.11 transparent hero canvas: artwork/glow remains, raster rectangle is removed. */
.xsd-dark-premium .mock-hero-art img[src*="-v2311.webp"]{border-radius:0;object-fit:contain;max-height:520px;background:transparent!important;box-shadow:none!important;filter:drop-shadow(0 24px 44px rgba(0,0,0,.28)) drop-shadow(0 0 24px rgba(221,2,0,.10))}
@media(max-width:900px){.xsd-dark-premium .mock-hero-art img[src*="-v2240.webp"],.xsd-dark-premium .mock-hero-art img[src*="-v2311.webp"]{max-height:460px}}
@media(max-width:560px){.xsd-dark-premium .mock-hero-art img[src*="-v2240.webp"]{width:100%;margin-left:0;max-height:330px;border-radius:20px}.xsd-dark-premium .mock-hero-art img[src*="-v2311.webp"]{width:100%;margin-left:0;max-height:330px;border-radius:0}}