/* TechPick V3.3 — full-width CMS bottom banner, with ORIGINAL text and button preserved.
   This file replaces V3.2's cms-front.css; only applies when a user image is uploaded. */
.cms-brand-logo{width:100%;height:100%;display:block;object-fit:contain}
.cms-footer-logo{width:100%;height:100%;display:block;object-fit:contain}

.bottom-promo:has(> img[src^="/uploads/"]) {
  display:block;
  position:relative;
  padding:0;
  min-height:0;
  height:auto;
  background:transparent;
  overflow:hidden;
  isolation:isolate;
}

/* Soft dark gradient behind original text so it remains readable. */
.bottom-promo:has(> img[src^="/uploads/"])::before {
  content:"";
  display:block;
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(7,11,21,.78) 0%,rgba(7,11,21,.43) 42%,rgba(7,11,21,0) 90%);
}

/* The uploaded photo is one full, unrotated image—no right-side mini-card. */
.bottom-promo:has(> img[src^="/uploads/"]) > img {
  display:block;
  position:relative;
  inset:auto;
  width:100%;
  height:auto;
  max-width:100%;
  object-fit:contain;
  object-position:center center;
  transform:none;
  filter:none;
  padding:0;
  margin:0;
  border:0;
  z-index:0;
}

/* Overlay, do NOT hide any headline, description or shopping button. */
.bottom-promo:has(> img[src^="/uploads/"]) > div {
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:0;
  flex:none;
  min-width:0;
  width:100%;
  height:100%;
  padding:clamp(12px,3.5vw,34px);
  margin:0;
  box-sizing:border-box;
  pointer-events:none;
}
.bottom-promo:has(> img[src^="/uploads/"]) > div > * {
  display:revert;
  visibility:visible;
  opacity:1;
  color:inherit;
  pointer-events:none;
}
.bottom-promo:has(> img[src^="/uploads/"]) > div > .bottom-kicker {
  display:inline;
  color:#f6e2d5;
  text-shadow:0 1px 5px rgba(0,0,0,.45);
}
.bottom-promo:has(> img[src^="/uploads/"]) h2 {
  display:block;
  color:#fff;
  max-width:65%;
  text-shadow:0 2px 8px rgba(0,0,0,.55);
}
.bottom-promo:has(> img[src^="/uploads/"]) p {
  display:block;
  color:#f4f4f4;
  max-width:65%;
  text-shadow:0 1px 5px rgba(0,0,0,.60);
}
.bottom-promo:has(> img[src^="/uploads/"]) #footerShop {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  position:relative;
  inset:auto;
  width:auto;
  height:auto;
  min-height:0;
  margin-top:8px;
  padding:12px 21px;
  border:0;
  border-radius:999px;
  background:#fff;
  box-shadow:0 4px 12px rgba(0,0,0,.16);
  color:#181f2a;
  font-size:12px;
  line-height:1.25;
  font-weight:760;
  opacity:1;
  transform:none;
  cursor:pointer;
  pointer-events:auto;
  z-index:3;
}
.bottom-promo:has(> img[src^="/uploads/"]) #footerShop:hover {
  background:#f4f8ff;
  transform:translateY(-1px);
}
.bottom-promo:has(> img[src^="/uploads/"]) #footerShop:focus-visible {
  outline:3px solid #7db7ff;
  outline-offset:3px;
}
@media(max-width:700px) {
  .bottom-promo:has(> img[src^="/uploads/"]) > div {
    padding:clamp(11px,4vw,20px);
  }
  .bottom-promo:has(> img[src^="/uploads/"]) h2 {
    max-width:75%;
    font-size:clamp(17px,4.4vw,21px);
    margin:5px 0;
  }
  .bottom-promo:has(> img[src^="/uploads/"]) p {
    max-width:75%;
    font-size:10px;
    margin:3px 0 8px;
    line-height:1.4;
  }
  .bottom-promo:has(> img[src^="/uploads/"]) #footerShop {
    margin-top:3px;
    padding:9px 16px;
    font-size:11px;
  }
}