/* =========================================================
   Gadget Makers Blog — iPhone Chargers in the UK
   Scope: .gmbuk
   ========================================================= */
.gmbuk,
.gmbuk *{
  box-sizing:border-box !important;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif !important;
}
.gmbuk{
  --ink:#0f172a;
  --text:#334155;
  --muted:#64748b;
  --line:#e2e8f0;
  --blue:#2563eb;
  --blue-dark:#1e3a8a;
  --blue-soft:#eff6ff;
  --green:#166534;
  --green-soft:#f0fdf4;
  --orange:#ff9900;
  --amber:#92400e;
  --amber-soft:#fffbeb;
  --red:#991b1b;
  --red-soft:#fef2f2;
  max-width:920px !important;
  margin:0 auto !important;
  color:var(--text) !important;
  font-size:17px !important;
  line-height:1.72 !important;
}
.gmbuk p{margin:0 0 1.05em !important;color:var(--text) !important}
.gmbuk a{color:var(--blue) !important;text-decoration:none !important}
.gmbuk ul,.gmbuk ol{margin:.55em 0 1.25em !important;padding-left:1.25em !important}
.gmbuk li{margin:.42em 0 !important;color:var(--text) !important}
.gmbuk .section-title{
  margin:2.05em 0 .72em !important;
  color:var(--ink) !important;
  font-size:clamp(1.55rem,3vw,1.95rem) !important;
  line-height:1.24 !important;
  font-weight:850 !important;
  letter-spacing:-.02em !important;
}
.gmbuk .sub-title{
  margin:1.25em 0 .5em !important;
  color:var(--ink) !important;
  font-size:1.18rem !important;
  line-height:1.35 !important;
  font-weight:800 !important;
}

/* Hero */
.gmbuk .hero{
  margin:0 0 24px !important;
  padding:30px !important;
  border:1px solid #bfdbfe !important;
  border-radius:24px !important;
  background:
    radial-gradient(circle at 92% 10%,rgba(37,99,235,.16),transparent 31%),
    linear-gradient(135deg,#eff6ff 0%,#ffffff 58%,#f0fdf4 100%) !important;
  box-shadow:0 14px 38px rgba(15,23,42,.07) !important;
}
.gmbuk .eyebrow{
  display:inline-block !important;
  margin:0 0 11px !important;
  padding:6px 11px !important;
  border-radius:999px !important;
  background:#dbeafe !important;
  color:#1d4ed8 !important;
  font-size:12px !important;
  line-height:1.2 !important;
  font-weight:850 !important;
  letter-spacing:.06em !important;
  text-transform:uppercase !important;
}
.gmbuk .hero-title{
  margin:0 0 .45em !important;
  color:var(--ink) !important;
  font-size:clamp(1.8rem,4vw,2.45rem) !important;
  line-height:1.15 !important;
  font-weight:900 !important;
  letter-spacing:-.035em !important;
}
.gmbuk .hero-lead{margin:0 !important;color:#334155 !important;font-size:1.04rem !important}
.gmbuk .facts{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:11px !important;
  margin-top:19px !important;
}
.gmbuk .fact{
  padding:14px 10px !important;
  border:1px solid #dbeafe !important;
  border-radius:13px !important;
  background:rgba(255,255,255,.97) !important;
  text-align:center !important;
}
.gmbuk .fact strong{
  display:block !important;
  color:#1d4ed8 !important;
  font-size:1.05rem !important;
  line-height:1.25 !important;
  font-weight:850 !important;
}
.gmbuk .fact span{
  display:block !important;
  margin-top:3px !important;
  color:var(--muted) !important;
  font-size:12px !important;
  line-height:1.35 !important;
}

/* Boxes */
.gmbuk .disclosure,.gmbuk .note,.gmbuk .tip,.gmbuk .warning,.gmbuk .summary{
  margin:19px 0 !important;
  padding:16px 18px !important;
  border-radius:14px !important;
}
.gmbuk .disclosure{
  border:1px solid #fed7aa !important;
  border-left:4px solid #f59e0b !important;
  background:#fffbeb !important;
  color:#713f12 !important;
  font-size:13px !important;
}
.gmbuk .note{border:1px solid #bfdbfe !important;background:var(--blue-soft) !important}
.gmbuk .tip{border:1px solid #bbf7d0 !important;background:var(--green-soft) !important}
.gmbuk .tip strong{color:var(--green) !important}
.gmbuk .warning{border:1px solid #fecaca !important;background:var(--red-soft) !important;color:var(--red) !important}
.gmbuk .summary{border:2px solid #bfdbfe !important;background:var(--blue-soft) !important}

/* Decision cards */
.gmbuk .pick-grid{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:15px !important;
  margin:24px 0 31px !important;
}
.gmbuk .pick{
  display:flex !important;
  flex-direction:column !important;
  gap:10px !important;
  padding:19px !important;
  border:1px solid var(--line) !important;
  border-radius:17px !important;
  background:#fff !important;
  box-shadow:0 8px 24px rgba(15,23,42,.055) !important;
}
.gmbuk .pick.featured{
  border:2px solid var(--blue) !important;
  box-shadow:0 11px 28px rgba(37,99,235,.12) !important;
}
.gmbuk .badge{
  display:inline-block !important;
  align-self:flex-start !important;
  padding:5px 9px !important;
  border-radius:999px !important;
  background:#dbeafe !important;
  color:#1e40af !important;
  font-size:11px !important;
  line-height:1.2 !important;
  font-weight:850 !important;
  letter-spacing:.04em !important;
  text-transform:uppercase !important;
}
.gmbuk .pick-name,.gmbuk .product-title{
  margin:0 !important;
  color:var(--ink) !important;
  font-size:1.12rem !important;
  line-height:1.35 !important;
  font-weight:850 !important;
}
.gmbuk .pick p{margin:0 !important;font-size:14px !important;line-height:1.58 !important}
.gmbuk .best-for{margin-top:auto !important;color:#475569 !important;font-size:13px !important;font-weight:750 !important}

/* CTA */
.gmbuk .cta{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  min-height:48px !important;
  padding:12px 18px !important;
  border:0 !important;
  border-radius:10px !important;
  background:var(--orange) !important;
  color:#111827 !important;
  font-size:15px !important;
  line-height:1.2 !important;
  font-weight:850 !important;
  text-align:center !important;
  text-decoration:none !important;
  box-shadow:0 5px 14px rgba(255,153,0,.24) !important;
}
.gmbuk .cta.dark{background:#111827 !important;color:#fff !important;box-shadow:none !important}

/* Product cards without fragile remote images */
.gmbuk .product-grid{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:16px !important;
  margin:24px 0 30px !important;
}
.gmbuk .product{
  display:flex !important;
  flex-direction:column !important;
  padding:20px !important;
  border:1px solid #bfdbfe !important;
  border-radius:18px !important;
  background:linear-gradient(135deg,#fff 0%,#eff6ff 100%) !important;
  box-shadow:0 10px 28px rgba(15,23,42,.06) !important;
}
.gmbuk .product-visual{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:145px !important;
  margin-bottom:15px !important;
  border-radius:14px !important;
  background:#fff !important;
}
.gmbuk .plug-icon{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:115px !important;
  height:115px !important;
  border-radius:26px !important;
  background:linear-gradient(135deg,#0f172a,#2563eb) !important;
  color:#fff !important;
  font-size:2.2rem !important;
  font-weight:900 !important;
  letter-spacing:-.04em !important;
  box-shadow:0 12px 24px rgba(37,99,235,.2) !important;
}
.gmbuk .product p{font-size:14px !important;line-height:1.58 !important}
.gmbuk .product .cta{margin-top:auto !important}

/* Tables */
.gmbuk .table-wrap{
  width:100% !important;
  margin:22px 0 28px !important;
  overflow-x:auto !important;
  border:1px solid var(--line) !important;
  border-radius:15px !important;
  background:#fff !important;
  box-shadow:0 6px 18px rgba(15,23,42,.04) !important;
}
.gmbuk table{
  width:100% !important;
  min-width:700px !important;
  margin:0 !important;
  border-collapse:collapse !important;
}
.gmbuk th{
  padding:14px 16px !important;
  border:0 !important;
  background:#0f1f42 !important;
  color:#fff !important;
  text-align:left !important;
  vertical-align:middle !important;
  font-size:14px !important;
  line-height:1.4 !important;
  font-weight:850 !important;
}
.gmbuk td{
  padding:14px 16px !important;
  border:0 !important;
  border-top:1px solid var(--line) !important;
  background:#fff !important;
  color:var(--text) !important;
  vertical-align:top !important;
  font-size:14px !important;
  line-height:1.58 !important;
}
.gmbuk tbody tr:nth-child(even) td{background:#f8fafc !important}

/* Steps */
.gmbuk .steps{
  list-style:none !important;
  counter-reset:gmbuk-step !important;
  padding:0 !important;
}
.gmbuk .steps li{
  position:relative !important;
  margin:0 0 12px !important;
  padding:16px 17px 16px 56px !important;
  border:1px solid var(--line) !important;
  border-radius:13px !important;
  background:#fff !important;
}
.gmbuk .steps li:before{
  counter-increment:gmbuk-step !important;
  content:counter(gmbuk-step) !important;
  position:absolute !important;
  top:16px !important;
  left:16px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:28px !important;
  height:28px !important;
  border-radius:50% !important;
  background:var(--blue) !important;
  color:#fff !important;
  font-size:14px !important;
  font-weight:850 !important;
}

/* FAQ */
.gmbuk .faq details{
  margin:10px 0 !important;
  overflow:hidden !important;
  border:1px solid var(--line) !important;
  border-radius:13px !important;
  background:#fff !important;
}
.gmbuk .faq summary{
  position:relative !important;
  cursor:pointer !important;
  list-style:none !important;
  padding:16px 48px 16px 18px !important;
  color:var(--ink) !important;
  font-size:16px !important;
  line-height:1.45 !important;
  font-weight:800 !important;
}
.gmbuk .faq summary::-webkit-details-marker{display:none !important}
.gmbuk .faq summary:after{
  content:"+" !important;
  position:absolute !important;
  top:50% !important;
  right:18px !important;
  transform:translateY(-50%) !important;
  color:var(--blue) !important;
  font-size:24px !important;
}
.gmbuk .faq details[open] summary:after{content:"−" !important}
.gmbuk .faq-answer{padding:0 18px 17px !important}

/* Sticky + final */
.gmbuk .sticky-cta{
  position:sticky !important;
  bottom:12px !important;
  z-index:20 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:14px !important;
  margin:24px 0 !important;
  padding:12px 14px !important;
  border:1px solid #bfdbfe !important;
  border-radius:14px !important;
  background:rgba(255,255,255,.96) !important;
  box-shadow:0 10px 28px rgba(15,23,42,.14) !important;
}
.gmbuk .sticky-copy{color:var(--ink) !important;font-size:14px !important;font-weight:800 !important}
.gmbuk .sticky-cta .cta{width:auto !important;min-width:190px !important;min-height:43px !important;padding:10px 15px !important;font-size:14px !important}
.gmbuk .final{
  margin:31px 0 8px !important;
  padding:27px !important;
  border-radius:20px !important;
  background:linear-gradient(135deg,#0b1739 0%,#1e3a8a 100%) !important;
  color:#fff !important;
  text-align:center !important;
}
.gmbuk .final-title{margin:0 0 9px !important;color:#fff !important;font-size:1.58rem !important;font-weight:850 !important}
.gmbuk .final p{color:#dbeafe !important}
.gmbuk .final .cta{width:auto !important;min-width:240px !important}

/* Mobile */
@media(max-width:760px){
  .gmbuk{font-size:16px !important}
  .gmbuk .hero{padding:21px !important;border-radius:18px !important}
  .gmbuk .facts{grid-template-columns:1fr 1fr !important}
  .gmbuk .pick-grid,.gmbuk .product-grid{grid-template-columns:1fr !important}
  .gmbuk .final .cta{width:100% !important;min-width:0 !important}
  .gmbuk .sticky-cta{flex-direction:column !important;align-items:stretch !important;text-align:center !important}
  .gmbuk .sticky-cta .cta{width:100% !important;min-width:0 !important}
  .gmbuk table,.gmbuk thead,.gmbuk tbody,.gmbuk th,.gmbuk td,.gmbuk tr{display:block !important;min-width:0 !important}
  .gmbuk thead{position:absolute !important;width:1px !important;height:1px !important;overflow:hidden !important;clip:rect(0 0 0 0) !important}
  .gmbuk tbody tr{padding:12px 14px !important;border-bottom:1px solid var(--line) !important;background:#fff !important}
  .gmbuk td{
    display:grid !important;
    grid-template-columns:42% 58% !important;
    gap:10px !important;
    padding:9px 0 !important;
    border:0 !important;
    border-bottom:1px dashed #e5e7eb !important;
    background:#fff !important;
  }
  .gmbuk td:before{content:attr(data-label) !important;color:var(--ink) !important;font-weight:800 !important}
}