/* Premium Tech Deals V1.6 — hero-only visual refinement.
   The rest of the layout, language keys, product/checkout JS and admin are unchanged.
   This file is loaded after site.css and is scoped to .hero-personalized. */
.hero-personalized{
  isolation:isolate;
  background:linear-gradient(118deg,#f9fcff 0%,#eff7ff 44%,#e7f1ff 100%);
}
.hero-personalized::before{
  inset:-25% -14% -12% 32%; width:auto;height:auto;
  border-radius:42% 58% 28% 70%;
  background:radial-gradient(ellipse at 30% 50%,rgba(255,255,255,.95),rgba(220,234,255,.48) 45%,transparent 78%);
  transform:rotate(-13deg);
}
.hero-personalized .hero-copy{width:55%;}
.hero-personalized .hero-tag{
  color:#fff;
  background:linear-gradient(100deg,#0787ff 0%,#0765f7 52%,#7868f0 100%);
  box-shadow:0 5px 13px rgba(33,105,236,.18),inset 0 1px 1px rgba(255,255,255,.5);
  border:1px solid rgba(255,255,255,.85);
  font-weight:780;letter-spacing:.05px;
}
.hero-personalized .hero-tag-dot{background:#f5fcff;box-shadow:0 0 0 3px rgba(255,255,255,.12)}
.hero-personalized .hero-headline{position:relative;display:block;max-width:max-content;margin:13px 0 16px;transform:skew(-5deg);transform-origin:left center}
.hero-personalized .hero-headline em{
  display:inline;
  color:#0d172d;
  background:linear-gradient(91deg,#071226 0%,#0e1730 44%,#0a6cf9 51%,#116bf4 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  text-shadow:none;
}
.hero-personalized .hero-headline:after{content:"";position:absolute;left:38%;bottom:-6px;width:57%;height:8px;border-bottom:3px solid #2786fe;border-radius:50%;transform:rotate(-5deg);opacity:.8}
.hero-personalized .hero-discount-wrap{
  background:linear-gradient(100deg,#fffaff,#fff4fb);
  border:1.5px solid #ffc7e4;border-radius:999px;
  box-shadow:0 0 0 3px rgba(255,255,255,.72),0 7px 19px rgba(239,54,133,.13);
}
.hero-personalized .hero-discount{color:#ec1754;font-weight:850;letter-spacing:-.6px}
.hero-personalized .hero-discount-spark{font-size:0}
.hero-personalized .hero-discount-spark:after{content:"🔥";font-size:16px;line-height:1;vertical-align:middle}
.hero-personalized .hero-features{display:flex;flex-wrap:wrap;gap:7px 12px;color:#4e698b;font-weight:700;line-height:1.28}
.hero-personalized .hero-feature-icon{color:#0877f9}
.hero-personalized .hero-copy>p{display:none}
.hero-personalized .btn-pill{
  margin-top:15px;
  background:linear-gradient(110deg,#099cff 0%,#0678ff 40%,#0757ef 100%);
  border:1px solid rgba(255,255,255,.8);border-radius:999px;
  box-shadow:0 7px 17px rgba(5,97,237,.24),inset 0 1px 1px rgba(255,255,255,.45);
  font-weight:780;letter-spacing:.15px;
}
.hero-personalized .hero-art{filter:drop-shadow(0 13px 12px rgba(44,78,131,.07))}
@media(max-width:700px){
  .hero-personalized{height:307px;padding:25px 15px}
  .hero-personalized .hero-copy{width:61%}
  .hero-personalized .hero-tag{font-size:10px;padding:5px 9px}
  .hero-personalized .hero-headline{font-size:35px;line-height:1.09;margin:15px 0 16px;letter-spacing:-1px}
  .hero-personalized .hero-headline:after{border-bottom-width:2px;bottom:-4px}
  .hero-personalized .hero-discount-wrap{padding:7px 11px;gap:5px}
  .hero-personalized .hero-discount{font-size:21px;letter-spacing:-.7px}
  .hero-personalized .hero-discount-spark:after{font-size:13px}
  .hero-personalized .hero-features{display:flex;gap:4px 8px;margin-top:11px;font-size:9px}
  .hero-personalized .hero-feature-icon{font-size:11px}
  .hero-personalized .btn-pill{font-size:13px;padding:10px 21px;margin-top:14px}
  .hero-personalized .hero-art{right:-83px;width:92%;height:100%;bottom:-3px}
}
@media(max-width:470px){
  .hero-personalized{height:296px;padding:23px 15px}
  .hero-personalized .hero-copy{width:65%}
  .hero-personalized .hero-headline{font-size:31px;margin:15px 0 17px}
  .hero-personalized .hero-discount{font-size:19px}
  .hero-personalized .hero-features{display:flex;gap:3px 7px;font-size:8px;margin-top:10px}
  .hero-personalized .hero-feature-icon{font-size:10px}
  .hero-personalized .btn-pill{margin-top:13px}
  .hero-personalized .hero-art{right:-92px;width:93%;opacity:1}
}
@media(max-width:390px){
  .hero-personalized .hero-copy{width:67%}
  .hero-personalized .hero-headline{font-size:28px}
  .hero-personalized .hero-discount{font-size:17px}
  .hero-personalized .hero-discount-wrap{padding:6px 9px}
  .hero-personalized .hero-features{font-size:7.6px;column-gap:6px}
  .hero-personalized .hero-art{right:-103px}
}
@media(max-width:355px){
  .hero-personalized{height:288px}
  .hero-personalized .hero-headline{font-size:26px;margin-bottom:15px}
  .hero-personalized .hero-discount{font-size:16px}
  .hero-personalized .hero-tag{font-size:9px}
  .hero-personalized .hero-features{font-size:7px}
  .hero-personalized .btn-pill{font-size:12px;padding:9px 17px}
}
@media(prefers-reduced-motion:reduce){.hero-personalized .btn-pill{transition:none}}


/* TechPick V3.4: display entire uploaded HOME HERO image without crop.
   CMS recommends 1200 x 900 (4:3). Preserve existing copy and CTA.
   Scope applies only to admin-uploaded main hero, NOT default SVG or bottom promo. */
.hero-personalized:has(> img.hero-art[src^="/uploads/"]) {
  display:block;
  position:relative;
  height:auto !important;
  min-height:0 !important;
  aspect-ratio:4 / 3;
  background:#f7fbff;
  padding:clamp(12px,2.3vw,27px) clamp(12px,2.5vw,28px);
  overflow:hidden;
}
/* Prevent decorative overlays from covering the original uploaded picture. */
.hero-personalized:has(> img.hero-art[src^="/uploads/"])::before,
.hero-personalized:has(> img.hero-art[src^="/uploads/"])::after {
  content:none !important;
  display:none !important;
}
.hero-personalized:has(> img.hero-art[src^="/uploads/"]) > img.hero-art {
  position:absolute !important;
  display:block !important;
  inset:0 !important;
  top:0 !important;
  right:0 !important;
  bottom:0 !important;
  left:0 !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 !important;
  object-fit:contain !important;
  object-position:50% 50% !important;
  transform:none !important;
  filter:none !important;
  opacity:1 !important;
  z-index:0 !important;
}
/* Existing text and original CTA stay on top of the photo. */
.hero-personalized:has(> img.hero-art[src^="/uploads/"]) > .hero-copy {
  position:relative;
  z-index:2;
  width:65%;
  max-width:65%;
  margin:0;
}
@media(max-width:700px) {
  .hero-personalized:has(> img.hero-art[src^="/uploads/"]) {
    padding:clamp(11px,3.4vw,22px) clamp(11px,3.6vw,20px);
  }
  .hero-personalized:has(> img.hero-art[src^="/uploads/"]) > .hero-copy {
    width:67%;
    max-width:67%;
  }
}
@media(max-width:390px) {
  .hero-personalized:has(> img.hero-art[src^="/uploads/"]) {
    padding:10px 10px;
  }
  .hero-personalized:has(> img.hero-art[src^="/uploads/"]) > .hero-copy {
    width:70%;
    max-width:70%;
  }
  .hero-personalized:has(> img.hero-art[src^="/uploads/"]) .hero-tag {
    font-size:9px;
    padding:4px 8px;
  }
  .hero-personalized:has(> img.hero-art[src^="/uploads/"]) .hero-headline {
    font-size:clamp(22px,6vw,26px);
    margin:10px 0 10px;
  }
  .hero-personalized:has(> img.hero-art[src^="/uploads/"]) .hero-discount-wrap {
    padding:5px 8px;
  }
  .hero-personalized:has(> img.hero-art[src^="/uploads/"]) .hero-discount {
    font-size:clamp(14px,4.3vw,17px);
  }
  .hero-personalized:has(> img.hero-art[src^="/uploads/"]) .btn-pill {
    margin-top:10px;
    padding:8px 14px;
  }
}