/* ===================================================
   DEWALT Combi Drill — product page (mobile replica)
   Design width: 400px
   =================================================== */

:root{
  --blue:#003399;
  --blue-dark:#002569;
  --top-bar:#12559C;
  --blue-mid:#0B5CAB;
  --bv-blue:#14479E;
  --bv-navy:#0F2C5C;
  --foot-blue:#1C5FA5;
  --foot-blue-dark:#0F4C90;
  --navy:#0F2B5B;
  --promo:#3A17E0;
  --green:#00953B;
  --green-dark:#007c31;
  --red:#E4002B;
  --yellow:#FEBD17;
  --star:#F5A623;
  --text:#1a1a1a;
  --grey:#666;
  --line:#d9d9d9;
  --bg-grey:#f4f4f4;
}

*{margin:0;padding:0;box-sizing:border-box;}

html{-webkit-text-size-adjust:100%;}

body{
  font-family:"Helvetica Neue",Arial,Helvetica,sans-serif;
  color:var(--text);
  background:#e6e6e6;
  font-size:15px;
  line-height:1.45;
}

.phone{
  max-width:400px;
  margin:0 auto;
  background:#fff;
  min-height:100vh;
  overflow:hidden;
}

svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}

a{color:var(--blue);text-decoration:none;}

/* ===================== TOP BLUE BAR ===================== */
.top-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:7px 13px;
  background:var(--top-bar);
  color:#fff;
}

.country{
  display:flex;align-items:center;gap:5px;
  background:none;border:none;padding:0;cursor:pointer;
  color:#fff;font-family:inherit;
}
.country .flag{
  display:block;width:26px;height:17px;
  border:1px solid rgba(255,255,255,.5);
  overflow:hidden;line-height:0;
}
.country .flag svg{width:100%;height:100%;display:block;stroke:none;}
.country .caret{font-size:10px;line-height:1;}

.signin{
  display:flex;align-items:center;gap:6px;
  color:#fff;
  font-size:12.5px;font-weight:400;line-height:1.1;
}
.signin .ico{width:17px;height:17px;color:#fff;stroke-width:1.9;}

/* ===================== UTILITY BAR (VAT) ===================== */
.utility-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:11px 16px 12px;
  background:#fff;
}

.brand-logo{display:flex;align-items:center;}
.brand-logo img{height:26px;width:auto;display:block;}

.vat-toggle{display:flex;align-items:center;gap:7px;}

.vat-label{
  font-size:11.5px;
  font-weight:700;
  line-height:1.05;
  color:#6b6b6b;
  text-align:center;
  letter-spacing:.2px;
}
.vat-label.on{color:var(--text);}

.switch{
  width:46px;height:24px;
  border:none;border-radius:14px;
  background:var(--navy);
  position:relative;cursor:pointer;padding:0;
  transition:background .2s;
}
.switch .knob{
  position:absolute;top:3px;left:3px;
  width:18px;height:18px;border-radius:50%;
  background:#fff;
  transition:transform .2s;
}
.switch.off .knob{transform:translateX(22px);}

/* ===================== MAIN NAV ===================== */
.main-nav{
  display:flex;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:#fff;
}
.nav-item{
  flex:1;
  display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:14px 0 12px;
  color:var(--blue);
  font-size:14px;font-weight:400;
}
.nav-item + .nav-item{border-left:1px solid var(--line);}
.nav-item .ico{width:29px;height:29px;stroke-width:2;}

/* ===================== PROMO STRIPS ===================== */
.promo-delivery{
  background:#fff;
  color:var(--blue);
  text-align:center;
  font-size:13.5px;font-weight:700;
  padding:9px 6px;
  border-bottom:1px solid var(--line);
  letter-spacing:.2px;
}
.promo-delivery .sub{color:var(--grey);font-weight:400;margin-left:3px;}

.promo-blue{
  background:var(--promo);
  color:#fff;
  text-align:center;
  font-size:17px;font-weight:800;
  padding:16px 6px;
  letter-spacing:.2px;
  white-space:nowrap;
}
.promo-blue .chev{margin-left:5px;font-size:16px;}

/* ===================== BREADCRUMB ===================== */
.breadcrumb{
  display:flex;align-items:center;gap:11px;
  padding:14px 14px 13px;
  font-size:14.5px;
  border-bottom:1px solid var(--line);
}
.breadcrumb .bc-arrow{color:var(--text);font-size:16px;line-height:1;}
.breadcrumb a{font-weight:700;text-decoration:underline;}

/* ===================== BUNDLE BANNER ===================== */
.bundle-banner{
  background:var(--red);
  color:#fff;
  padding:8px 11px;
  font-size:11px;font-weight:800;
  text-align:center;
  line-height:1.45;
  letter-spacing:.15px;
}
.bundle-tag{color:var(--yellow);margin-right:4px;}
.bundle-view{color:#fff;text-decoration:underline;margin-left:3px;}

/* ===================== GALLERY ===================== */
.gallery{position:relative;padding:0 17px 11px;}

.deal-badge{
  position:absolute;
  top:8px;left:17px;
  width:62px;height:62px;
  display:block;
  z-index:2;
}

.hero-img{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  padding:20px 0 8px;
}
.hero-img img{width:88%;max-height:330px;object-fit:contain;display:block;}

.zoom{
  position:absolute;right:2px;bottom:8px;
  width:36px;height:36px;
  border:1px solid var(--line);
  background:#fff;border-radius:3px;
  color:var(--grey);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.zoom svg{width:20px;height:20px;}

.thumbs{
  display:flex;gap:6px;justify-content:center;
  margin-top:6px;
}
.thumb{
  width:52px;height:52px;
  flex:0 0 auto;
  border:1px solid var(--line);
  background:#fff;padding:2px;cursor:pointer;border-radius:2px;
}
.thumb.active{border-color:var(--blue);}
.thumb img{width:100%;height:100%;object-fit:contain;}

/* ===================== PRODUCT INFO ===================== */
.product{padding:6px 17px 20px;}

.title{
  font-size:19px;
  font-weight:800;
  line-height:1.28;
  text-transform:uppercase;
  color:var(--blue-mid);
  margin-bottom:11px;
}
.title .code{font-size:15px;font-weight:800;}

.rating-row{display:flex;align-items:center;gap:8px;margin-bottom:20px;}

.stars{display:inline-flex;gap:1px;}
.stars svg{width:16px;height:16px;fill:var(--star);stroke:none;}
.stars svg.empty{fill:#d5d5d5;}
.stars.lg svg{width:21px;height:21px;}

.rate-count{font-size:14px;color:var(--grey);}
.ask{margin-left:8px;font-size:14.5px;color:var(--blue-mid);}

.price-block{display:flex;align-items:flex-start;margin-bottom:26px;}
.price{
  font-size:44px;font-weight:800;
  color:#3d3d3d;letter-spacing:-1px;line-height:1;
}
/* cap-height alignment: raise "€" and the ".95 / INC VAT" column so their tops
   line up with the top of the 44px digits */
.price .cur{font-size:20px;vertical-align:17px;letter-spacing:0;margin-right:1px;}
.price .tail{
  display:inline-flex;flex-direction:column;
  vertical-align:16px;letter-spacing:0;line-height:1;
}
.price .pence{font-size:22px;line-height:1;}
.vat-note{font-size:11px;font-weight:800;color:#3d3d3d;letter-spacing:.2px;margin-top:3px;}

.qty-row{display:flex;align-items:center;gap:14px;margin-bottom:26px;}
.qty-row label{font-size:15px;font-weight:800;color:var(--blue-mid);}
.select-wrap{position:relative;}
.qty-row select{
  appearance:none;-webkit-appearance:none;
  width:58px;padding:9px 0;
  border:1px solid #bbb;border-radius:3px;
  background:#fff;font-size:15px;font-family:inherit;
  text-align:center;text-align-last:center;
  cursor:pointer;
}

.fulfil{margin-bottom:22px;}
.radio{display:flex;align-items:center;gap:12px;padding:8px 0;cursor:pointer;}
.radio input{display:none;}
.dot{
  width:21px;height:21px;border-radius:50%;
  border:2px solid #b5b5b5;background:#fff;
  flex:0 0 auto;position:relative;
}
.radio input:checked + .dot{border-color:var(--green-dark);}
.radio input:checked + .dot::after{
  content:"";position:absolute;inset:3px;
  border-radius:50%;background:var(--green);
}
.rtxt{font-size:15px;font-weight:700;}

.btn-basket{
  display:block;width:100%;
  background:linear-gradient(#2f9e46,#137d2c);
  color:#fff;
  border:1px solid #0f6e26;border-radius:4px;
  padding:14px;
  font-size:18px;font-weight:700;font-family:inherit;
  cursor:pointer;
  margin-bottom:14px;
}
.btn-basket:active{background:var(--green-dark);}

.btn-saved{
  display:block;width:100%;
  background:linear-gradient(#fbfbfb,#e4e4e4);
  color:var(--text);
  border:1px solid #c2c2c2;border-radius:4px;
  padding:14px;
  font-size:17px;font-weight:700;font-family:inherit;
  cursor:pointer;
  margin-bottom:22px;
}

.desc{
  font-size:14.5px;line-height:1.6;color:#3d3d3d;
  border-top:1px solid var(--line);
  padding-top:20px;
  margin-bottom:22px;
}

.lifecycle{
  display:flex;align-items:center;gap:10px;
  border:1px solid var(--line);border-radius:4px;
  padding:11px 14px;
  font-size:14.5px;font-weight:700;color:var(--text);
  margin-bottom:20px;
}
.lifecycle .leaf{
  width:28px;height:28px;border-radius:50%;
  background:var(--green);
  display:flex;align-items:center;justify-content:center;
  flex:0 0 auto;
}
.lifecycle .leaf svg{width:17px;height:17px;fill:#fff;stroke:none;}
.lifecycle .chev-r{margin-left:auto;color:var(--grey);font-size:19px;}

.specs{list-style:none;margin-bottom:17px;}
.specs li{
  position:relative;
  padding-left:17px;
  font-size:14.5px;
  line-height:1.7;
}
.specs li::before{
  content:"";
  position:absolute;left:3px;top:11px;
  width:4px;height:4px;border-radius:50%;background:var(--text);
}

.viewall{font-size:14.5px;font-weight:700;}
.viewall a{text-decoration:underline;}

/* ===================== TABS ===================== */
.tabs{
  display:flex;align-items:flex-end;gap:5px;
  padding:14px 14px 0;
  background:var(--bg-grey);
  border-top:11px solid #e6e6e6;
  border-bottom:1px solid #c4c4c4;
}
.tab{
  flex:0 0 auto;
  padding:10px 17px;
  background:#e8e8e8;
  border:1px solid #c4c4c4;
  border-radius:4px 4px 0 0;
  margin-bottom:-1px;
  font-family:inherit;font-size:15px;font-weight:700;
  color:#555;cursor:pointer;
}
.tab.active{
  background:#fff;
  color:var(--bv-blue);
  border-bottom-color:#fff;
}

/* ===================== REVIEWS ===================== */
.reviews{padding:22px 17px 42px;}
.reviews.hidden{display:none;}
.reviews .stars svg{fill:var(--bv-blue);}
.reviews .stars svg.empty{fill:#d5d5d5;}

.rv-main-h{font-size:23px;font-weight:700;color:#4a4a4a;margin-bottom:14px;}

.authentic{
  display:flex;align-items:center;gap:9px;
  margin-bottom:26px;
}
.badge-ico{width:30px;height:30px;flex:0 0 auto;}
.badge-ico .shield{fill:var(--bv-navy);stroke:none;}
.badge-ico .tick{stroke:#fff;stroke-width:2.4;}
.authentic strong{display:block;font-size:17px;color:var(--bv-navy);letter-spacing:-.2px;}
.authentic strong sup{font-size:8px;vertical-align:6px;}
.authentic small{
  display:block;font-size:11.5px;color:#7b7b7b;
  letter-spacing:.6px;margin-top:-2px;
}

.rv-h{font-size:16px;font-weight:700;color:#333;margin-bottom:10px;}
.rv-h.sep{border-top:1px solid #c4c4c4;padding-top:20px;margin-top:24px;}
.rv-h.centered{text-align:center;}
.rv-sub{font-size:14px;color:#4a4a4a;margin-bottom:14px;}

/* --- snapshot --- */
.snapshot{margin-bottom:28px;}
.snap-row{display:flex;align-items:center;gap:12px;padding:5px 0;cursor:pointer;}
.snap-lbl{width:52px;font-size:14px;color:#333;}
.snap-bar{
  flex:1;height:15px;
  background:#fff;border:1px solid #c4c4c4;
  border-radius:8px;padding:1px;
}
.snap-bar i{
  display:block;height:100%;min-width:5px;
  background:var(--bv-blue);border-radius:8px;
}
.snap-val{width:32px;font-size:14px;color:#333;}

/* --- overall --- */
.overall{display:flex;align-items:center;gap:13px;margin-bottom:20px;}
.big-rate{font-size:46px;font-weight:400;color:#5a5a5a;line-height:1;}
.overall-side{display:flex;flex-direction:column;gap:3px;}
.overall-count{font-size:13.5px;color:var(--bv-blue);text-decoration:underline;}
.recommend{
  font-size:14px;color:#333;line-height:1.45;
  margin-bottom:4px;
}

/* --- average ratings --- */
.avg-ratings{margin-bottom:25px;}
.avg-row{display:flex;flex-wrap:wrap;align-items:center;gap:11px;padding:7px 0;}
.avg-lbl{width:100%;font-size:14px;color:#333;}
.avg-bar{
  flex:1;height:16px;
  background:#f0f0f0;position:relative;overflow:hidden;
}
.avg-bar i{display:block;height:100%;background:var(--bv-blue);}
/* 4 white dividers split the bar into 5 blocks */
.avg-bar::after{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(
    90deg,
    transparent 0 calc(20% - 3px),
    #fff calc(20% - 3px) 20%
  );
}
.avg-val{width:26px;font-size:14px;color:#333;}
.avg-ratings.inline{margin:11px 0;}

/* --- helpful blocks --- */
.helpful-block{
  border:1px solid #c4c4c4;border-radius:6px;
  padding:17px 16px;margin-bottom:17px;
}
.helpful-h{font-size:15px;font-weight:700;color:#333;margin-bottom:13px;}
.rv-title{font-size:15px;font-weight:700;color:#333;margin:12px 0 0;}
.rv-author{font-size:14px;font-weight:700;color:#333;margin-top:13px;}
.rv-date{font-size:13.5px;color:#4a4a4a;margin-top:13px;}
.rv-text{font-size:14px;line-height:1.5;color:#333;margin-top:13px;}
.show-full{font-size:14px;color:var(--bv-blue);display:inline-block;margin-top:6px;}

.helpful-foot{
  display:flex;align-items:center;gap:8px;
  font-size:14px;color:#333;
  margin-top:38px;margin-bottom:16px;
}
.thumb-ico{width:18px;height:18px;fill:var(--bv-blue);stroke:none;}

.show-more{display:flex;align-items:center;gap:11px;}
.sm-lbl{font-size:14px;color:#333;}
.pill{
  display:inline-flex;align-items:center;gap:4px;
  border:1px solid #c4c4c4;background:#fff;
  border-radius:4px;padding:7px 11px;
  font-family:inherit;font-size:14px;cursor:pointer;color:#333;
}
.mini-star{display:inline-flex;}
.mini-star svg{width:15px;height:15px;fill:var(--bv-blue);stroke:none;}

/* --- customer images --- */
.cust-wrap{position:relative;margin:0 -17px 26px;}
.cust-images{
  display:flex;gap:6px;
  overflow-x:auto;
  padding:0 17px;
  scrollbar-width:none;
  scroll-behavior:smooth;
}
.cust-images::-webkit-scrollbar{display:none;}
.cust-images img{
  width:172px;height:172px;
  flex:0 0 auto;
  object-fit:cover;display:block;
}
.cust-next{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  width:47px;height:47px;
  background:#fff;border:1px solid #c4c4c4;border-radius:5px;
  color:#333;font-size:26px;line-height:1;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}

/* --- filters --- */
.search-wrap{position:relative;margin-bottom:14px;}
.search-wrap input{
  width:100%;
  padding:13px 48px 13px 14px;
  border:1px solid #9a9a9a;border-radius:6px;
  font-family:inherit;font-size:15px;color:#333;
}
.search-wrap input::placeholder{color:#666;}
.search-wrap .ico{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  width:23px;height:23px;color:var(--bv-blue);stroke-width:2.2;
}

.filter-row{display:flex;gap:12px;margin-bottom:18px;}
.filter-btn{
  flex:1;
  display:flex;align-items:center;justify-content:center;gap:9px;
  border:1px solid #6f6f6f;border-radius:3px;background:#fff;
  padding:11px 8px;
  font-family:inherit;font-size:13.5px;color:#333;
  cursor:pointer;text-align:left;line-height:1.3;
  white-space:nowrap;
}
.filter-btn .ico{width:20px;height:20px;color:#333;flex:0 0 auto;}

.results-count{
  font-size:14px;color:#333;text-align:center;
  border-bottom:1px solid #c4c4c4;
  padding-bottom:16px;margin-bottom:20px;
}

/* --- individual reviews --- */
.review{margin-bottom:34px;}
.review .rv-title{font-size:15px;margin-top:8px;}
.review .rv-author{margin-top:6px;}
.review .rv-date{margin-top:10px;font-size:13.5px;}
.review .rv-text{margin-top:12px;}
.verified-chip{color:#333;font-weight:400;margin-left:3px;}
.rv-verified{
  display:flex;align-items:center;gap:7px;
  font-size:11.5px;color:#555;letter-spacing:.4px;
  margin-top:10px;
}
.vp-ico{
  width:21px;height:21px;border-radius:50%;
  background:var(--green);
  display:flex;align-items:center;justify-content:center;
  flex:0 0 auto;
}
.vp-ico svg{width:13px;height:13px;stroke:#fff;stroke-width:3;}

.rv-recommend{
  display:flex;align-items:center;gap:9px;
  font-size:14px;color:#333;
  margin-top:16px;
}
.rec-ico{
  width:20px;height:20px;border-radius:50%;
  background:#111;
  display:flex;align-items:center;justify-content:center;
  flex:0 0 auto;
}
.rec-ico svg{width:12px;height:12px;stroke:#fff;stroke-width:3;}

.rv-photos{margin-top:16px;}
.rv-photos img{
  width:175px;height:155px;
  object-fit:cover;display:block;
}

.rv-foot{display:flex;align-items:center;gap:7px;margin-top:18px;}
.helpful-lbl{font-size:14px;color:#333;margin-right:2px;}
.vote{
  display:flex;align-items:center;
  border:none;background:none;padding:2px;
  cursor:pointer;color:var(--bv-blue);
}
.vote svg{width:20px;height:20px;stroke-width:1.6;}
.vote.down svg{transform:rotate(180deg);}
.vote-count{font-size:14px;color:#333;margin-right:6px;}
.report{font-size:14px;color:var(--bv-blue);margin-left:12px;}

/* --- pagination --- */
.rv-pager{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:34px;
}
.pager-count{font-size:14px;color:#333;}
.pager-btns{display:flex;gap:10px;}
.pager{
  width:52px;height:52px;
  background:#fff;border-radius:4px;
  font-size:24px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.pager.prev{border:1px solid #dcdcdc;color:#b0b0b0;}
.pager.next{border:1px solid #333;color:#333;font-size:28px;}

/* ===================== FOOTER ===================== */
.site-footer{
  border-top:38px solid #e6e6e6;
  background:var(--foot-blue);
  color:#fff;
}

.foot-row{
  display:flex;align-items:center;justify-content:space-between;
  width:100%;
  padding:16px 15px;
  background:none;border:none;
  border-bottom:1px solid #4a86c4;
  font-family:inherit;font-size:15px;font-weight:800;
  letter-spacing:.3px;color:#fff;
  cursor:pointer;text-align:left;
}
.foot-row .pm{font-size:22px;font-weight:400;line-height:1;}

.foot-panel{display:none;padding:4px 15px 14px;}
.foot-panel.open{display:block;}
.foot-panel a{
  display:block;
  padding:7px 0;
  font-size:14px;color:#dbe8f6;
}

.foot-social{
  background:linear-gradient(var(--foot-blue),var(--foot-blue-dark));
  padding:22px 15px 30px;
  text-align:center;
}
.connect{
  font-family:"Bradley Hand","Brush Script MT",cursive;
  font-size:23px;font-weight:700;
  margin-bottom:16px;
}

.social{
  display:flex;justify-content:center;flex-wrap:wrap;gap:9px;
  margin-bottom:24px;
}
.soc{
  width:36px;height:36px;border-radius:50%;
  background:var(--foot-blue-dark);
  border:1px solid #6ea3d6;
  display:flex;align-items:center;justify-content:center;
  color:#fff;
}
.soc svg{width:21px;height:21px;fill:currentColor;stroke:none;}
.soc svg .outline,.soc svg.outline{fill:none;stroke:currentColor;stroke-width:1.7;}

.we-accept{font-size:13px;margin-bottom:11px;}

/* payment marks: official brand SVGs vendored in assets/payments/
   — payment-icons (MPL-2.0) for the card schemes, simple-icons (CC0) for the wallets */
.pays{display:flex;justify-content:center;flex-wrap:wrap;gap:5px;}
.pay{
  width:46px;height:29px;
  background:#fff;border-radius:3px;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.pay img{width:100%;height:100%;object-fit:contain;display:block;}
/* wallet marks are bare glyphs, so they need breathing room inside the badge */
.pay.mark img{padding:4px 5px;}

/* --- spec table --- */
.spec-table{width:100%;border-collapse:collapse;font-size:14.5px;}
.spec-table td{border-bottom:1px solid var(--line);padding:11px 6px;}
.spec-table td:first-child{color:var(--grey);width:46%;}
.spec-table td:last-child{font-weight:700;}