/* ===================================================
   Your Basket — cart page (mobile replica)
   Loads on top of styles.css; design width 400px
   =================================================== */

/* the product page clips its carousel; here that would break position:sticky */
.phone{overflow:visible;}

/* ===================== STICKY NAV ===================== */
.sticky-nav{
  position:sticky;top:0;z-index:30;
  background:#fff;
  border-top:none;
  transition:padding .18s ease;
}
.sticky-nav .nav-item{
  position:relative;
  padding:13px 0 11px;
  transition:padding .18s ease,font-size .18s ease;
}

/* basket cell: icon + red badge, price instead of a text label */
.nav-basket{gap:3px;}
.basket-wrap-ico{position:relative;display:inline-flex;}
.basket-ico{width:29px;height:29px;display:block;}
.basket-badge{
  position:absolute;top:-5px;right:-8px;
  min-width:18px;height:18px;padding:0 4px;
  border-radius:9px;
  background:var(--red);color:#fff;
  font-size:11.5px;font-weight:700;line-height:18px;
  text-align:center;
}
.basket-total{
  color:var(--red);
  font-size:14px;font-weight:700;
  letter-spacing:-.2px;
}

/* shrunken state once the page scrolls */
.sticky-nav.compact .nav-item{padding:6px 0 5px;font-size:11px;gap:2px;}
.sticky-nav.compact .nav-item .ico{width:21px;height:21px;}
.sticky-nav.compact .basket-ico{width:22px;height:22px;}
.sticky-nav.compact .basket-badge{
  min-width:15px;height:15px;line-height:15px;font-size:10px;
  top:-4px;right:-7px;
}
.sticky-nav.compact .basket-total{font-size:12px;}

/* ===================== PAGE SHELL ===================== */
.basket-page{background:var(--bg-grey);padding-bottom:26px;}

.back-row{
  display:flex;align-items:center;gap:10px;
  padding:16px 14px 15px;
  font-size:14.5px;
}
.back-row a{font-weight:700;text-decoration:underline;}

.basket-head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;
  padding:6px 14px 14px;
  border-bottom:1px solid #cfcfcf;
  margin:0 0 16px;
}
.basket-head h1{
  font-size:25px;font-weight:400;
  color:#4a4a4a;line-height:1.1;
}
.saved-lists{
  font-size:14.5px;font-weight:700;
  text-decoration:underline;
  white-space:nowrap;
}

/* ===================== DELIVERY CARD ===================== */
.basket-card{
  background:#fff;
  border:1px solid #cfcfcf;
  border-radius:3px;
  margin:0 12px 26px;
}

.card-head{
  display:flex;align-items:center;gap:13px;
  padding:16px 15px 15px;
}
.truck-ico{
  width:44px;height:29px;flex:0 0 auto;
  color:#9a9a9a;stroke-width:1.8;
}
.card-head span{
  font-size:17px;font-weight:800;
  color:var(--blue);letter-spacing:.2px;
}

.card-band{
  height:12px;
  background:#ededed;
  border-top:1px solid #e2e2e2;
  border-bottom:1px solid #e2e2e2;
  margin:0 9px;
}

/* ===================== BASKET ITEM ===================== */
.basket-item{padding:16px 15px 15px;}

.item-top{display:flex;gap:14px;align-items:flex-start;}
.item-img{
  width:104px;height:104px;flex:0 0 auto;
  border:1px solid #d6d6d6;
  background:#fff;
  display:flex;align-items:center;justify-content:center;
  padding:5px;
}
.item-img img{max-width:100%;max-height:100%;display:block;}

.item-name{
  font-size:15px;font-weight:700;
  color:#4a4a4a;line-height:1.35;
  padding-top:2px;
}
.item-code{font-weight:400;color:#8a8a8a;font-size:13.5px;}

.item-row{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;
  margin-top:22px;
}
.qty-input{
  width:56px;height:34px;
  border:1px solid #b5b5b5;border-radius:2px;
  background:#fff;
  font-family:inherit;font-size:15px;color:var(--text);
  text-align:center;
}
.item-price{
  font-size:27px;font-weight:800;
  color:#4a4a4a;letter-spacing:-.5px;
}

.item-links{
  display:flex;align-items:center;flex-wrap:wrap;gap:9px;
  margin-top:14px;
}
.lnk{
  display:inline-flex;align-items:center;gap:6px;
  background:none;border:none;padding:0;
  font-family:inherit;font-size:13.5px;color:#333;
  text-decoration:underline;cursor:pointer;
}
.lnk-sep{color:#c2c2c2;font-size:13.5px;}
.lnk-update{
  color:#9b9b9b;
  text-decoration:line-through;
  cursor:default;
}
.lnk-update:not([disabled]){
  color:#333;
  text-decoration:underline;
  cursor:pointer;
}
.bin-ico{width:16px;height:16px;color:#333;stroke-width:1.8;}

.basket-empty{
  padding:26px 15px 30px;
  font-size:15px;color:#4a4a4a;text-align:center;
}

/* ===================== TOTALS ===================== */
.totals{
  background:#fff;
  padding:22px 15px 20px;
  margin-bottom:22px;
}
.tot-row{
  display:flex;align-items:baseline;gap:8px;
  padding:6px 0;
}
.tot-lbl{
  font-size:15px;font-weight:700;color:#3d3d3d;
  white-space:nowrap;
}
.tot-lbl em{
  font-style:normal;font-weight:400;
  font-size:13px;color:#7a7a7a;
}
.dots{
  flex:1;
  border-bottom:1px dotted #b9b9b9;
  transform:translateY(-3px);
}
.tot-val{
  font-size:15px;font-weight:700;color:#3d3d3d;
  white-space:nowrap;
}

.tot-val.free{color:var(--green-dark);letter-spacing:.3px;}

.tot-row.grand{padding-top:14px;}
.tot-row.grand .tot-lbl{font-size:25px;}
.tot-row.grand .tot-lbl em{font-size:13px;}
.tot-row.grand .tot-val{font-size:25px;letter-spacing:-.4px;}

/* ===================== CTA ===================== */
.btn-continue{
  display:flex;align-items:center;justify-content:center;
  position:relative;
  width:calc(100% - 30px);
  margin:0 15px;
  height:52px;
  background:linear-gradient(#66b430,#2f8a0d);
  border:1px solid #2b7a0c;border-radius:4px;
  font-family:inherit;font-size:19px;font-weight:700;
  color:#fff;cursor:pointer;
}
.btn-continue:active{background:#2f8a0d;}
.cont-arw{
  position:absolute;right:16px;
  font-size:17px;line-height:1;
}