/* =========================================================
   Eshop Cart Overrides
   Scope: #eshop-main-container
   ========================================================= */

#eshop-main-container{
  --cart-bg:#1c2f45;
  --cart-txt:rgba(255,255,255,.92);
  --cart-mut:rgba(255,255,255,.72);
  --cart-line:rgba(255,255,255,.14);
  --cart-soft:rgba(255,255,255,.05);
  --cart-soft-2:rgba(255,255,255,.08);
  --cart-soft-3:rgba(255,255,255,.035);
  --cart-gold:#d7b56d;
  --cart-shadow:0 18px 50px rgba(0,0,0,.28);
  --cart-radius:18px;
  color:var(--cart-txt);
}

/* =========================================================
   Heading
   ========================================================= */

#eshop-main-container > h1{
  margin:0 0 20px;
  font-size:clamp(32px, 4vw, 54px);
  line-height:1.05;
  color:var(--cart-txt);
  font-weight:700;
  letter-spacing:.01em;
}

#eshop-main-container br{
  display:none;
}

/* =========================================================
   Tables – general
   ========================================================= */

#eshop-main-container .table{
  width:100%;
  margin:0;
  color:var(--cart-txt);
  border-collapse:separate;
  border-spacing:0;
  background:linear-gradient(180deg, var(--cart-soft-2), var(--cart-soft));
  border:1px solid var(--cart-line);
  border-radius:var(--cart-radius);
  overflow:hidden;
  box-shadow:var(--cart-shadow);
}

#eshop-main-container .table > :not(caption) > * > *{
  background:transparent !important;
  color:var(--cart-txt);
  border-color:var(--cart-line);
  padding:18px 16px;
  vertical-align:middle;
  box-shadow:none !important;
}

/* =========================================================
   Main cart table
   ========================================================= */

#eshop-main-container .cart-info{
  margin-bottom:18px;
}

#eshop-main-container .cart-info .table thead,
#eshop-main-container .cart-info .table thead tr,
#eshop-main-container .cart-info .table thead th{
  background:rgba(255,255,255,.045) !important;
}

#eshop-main-container .cart-info .table thead th{
  color:rgba(255,255,255,.86) !important;
  font-weight:700;
  font-size:14px;
  letter-spacing:.02em;
  border-bottom:1px solid var(--cart-line);
}

#eshop-main-container .cart-info .table tbody tr{
  background:transparent !important;
}

#eshop-main-container .cart-info .table tbody tr:nth-child(odd),
#eshop-main-container .cart-info .table tbody tr:nth-child(even){
  background:transparent !important;
}

#eshop-main-container .cart-info .table tbody td{
  font-size:15px;
  line-height:1.45;
  background:transparent !important;
}

#eshop-main-container .cart-info .table a{
  color:#fff;
  text-decoration:none;
  transition:opacity .14s ease, color .14s ease;
}

#eshop-main-container .cart-info .table a:hover{
  color:var(--cart-gold);
}

#eshop-main-container .cart-info .table td[data-content="Product Name"] a{
  font-size:18px;
  font-weight:700;
  line-height:1.25;
}

#eshop-main-container .cart-info .table td[data-content="Model"]{
  color:var(--cart-mut);
  font-size:14px;
}

#eshop-main-container .cart-info .table td[data-content="Unit Price"],
#eshop-main-container .cart-info .table td[data-content="Total"]{
  font-weight:700;
  white-space:nowrap;
}

#eshop-main-container .cart-info .table .eshop-center-text{
  text-align:center;
  width:70px;
  min-width:70px;
}

/* =========================================================
   Remove icon – proper x button
   ========================================================= */

#eshop-main-container .eshop-remove-item-cart{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border-radius:12px;
  border:1px solid var(--cart-line);
  background:rgba(255,255,255,.05);
  transition:background .14s ease, transform .14s ease, border-color .14s ease;
  vertical-align:middle;
}

#eshop-main-container .eshop-remove-item-cart:hover{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.24);
  transform:translateY(-1px);
}

#eshop-main-container .eshop-remove-item-cart img{
  display:none !important;
}

#eshop-main-container .eshop-remove-item-cart::before{
  content:"×";
  color:#fff;
  font-size:22px;
  line-height:1;
  font-weight:700;
}

/* =========================================================
   Quantity controls
   ========================================================= */

#eshop-main-container .input-group-append.input-group-prepend{
  display:block;
}

#eshop-main-container .eshop-quantity{
  display:inline-flex;
  align-items:center;
  gap:8px;
}

#eshop-main-container .eshop-quantity-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  padding:0;
  border-radius:999px !important;
  border:1px solid var(--cart-line);
  background:rgba(255,255,255,.08) !important;
  color:#fff !important;
  font-size:22px;
  font-weight:700;
  line-height:1;
  cursor:pointer;
  user-select:none;
  transition:background .14s ease, transform .14s ease, border-color .14s ease;
  box-shadow:none !important;
}

#eshop-main-container .eshop-quantity-button:hover{
  background:rgba(255,255,255,.14) !important;
  border-color:rgba(255,255,255,.24);
  transform:translateY(-1px);
}

#eshop-main-container .eshop-quantity-value{
  width:58px;
  height:42px;
  border-radius:14px !important;
  border:1px solid var(--cart-line);
  background:rgba(255,255,255,.06) !important;
  color:#fff !important;
  text-align:center;
  font-weight:700;
  line-height:42px;
  padding:0 8px;
  outline:none;
  box-shadow:none !important;
  appearance:textfield;
}

#eshop-main-container .eshop-quantity-value:focus{
  border-color:rgba(215,181,109,.65);
  box-shadow:0 0 0 2px rgba(215,181,109,.15) !important;
}

#eshop-main-container .eshop-quantity-value::-webkit-outer-spin-button,
#eshop-main-container .eshop-quantity-value::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}

/* =========================================================
   Totals rows
   ========================================================= */

#eshop-main-container .cart-info .table tbody tr:nth-last-child(2) td,
#eshop-main-container .cart-info .table tbody tr:last-child td{
  background:var(--cart-soft-3) !important;
}

#eshop-main-container .cart-info .table tbody tr:last-child td{
  font-size:16px;
}

#eshop-main-container .cart-info .table tbody tr:last-child td strong{
  color:#fff;
  font-size:18px;
}

/* =========================================================
   Action buttons row
   ========================================================= */

#eshop-main-container .cart-buttons{
  display:flex;
  justify-content:center;
  gap:12px;
  margin:18px 0;
}

#eshop-main-container .btn{
  border:none;
  border-radius:14px;
  padding:11px 16px;
  font-weight:700;
  line-height:1.2;
  box-shadow:none !important;
  transition:transform .14s ease, opacity .14s ease, filter .14s ease, background .14s ease;
}

#eshop-main-container .btn:hover{
  transform:translateY(-1px);
  filter:brightness(1.03);
}

#eshop-main-container .btn.btn-primary{
  background:linear-gradient(180deg, rgba(215,181,109,.24), rgba(215,181,109,.12)) !important;
  color:#fff !important;
  border:1px solid rgba(215,181,109,.55) !important;
}

/* =========================================================
   Coupon box
   ========================================================= */

#eshop-main-container > table.table{
  margin-top:18px;
  margin-bottom:16px;
}

#eshop-main-container > table.table td.form-horizontal{
  padding:18px;
}

#eshop-main-container label[for="coupon_code"]{
  color:var(--cart-mut);
  font-weight:700;
}

#eshop-main-container #coupon_code{
  width:100%;
  min-height:46px;
  border-radius:14px;
  border:1px solid var(--cart-line);
  background:rgba(255,255,255,.06) !important;
  color:#fff !important;
  padding:10px 14px;
  outline:none;
  box-shadow:none !important;
}

#eshop-main-container #coupon_code:focus{
  border-color:rgba(215,181,109,.65);
  box-shadow:0 0 0 2px rgba(215,181,109,.15) !important;
}

#eshop-main-container #apply-coupon{
  margin-top:12px;
}

/* =========================================================
   Bottom CTA row
   ========================================================= */

#eshop-main-container > a.btn.btn-primary{
  min-width:180px;
}

#eshop-main-container > a.btn.btn-primary:first-of-type{
  background:rgba(255,255,255,.06) !important;
  border:1px solid var(--cart-line) !important;
  color:#fff !important;
}

#eshop-main-container > a.btn.btn-primary.float-end{
  float:none !important;
  margin-left:auto;
  background:linear-gradient(180deg, rgba(215,181,109,.24), rgba(215,181,109,.12)) !important;
  border:1px solid rgba(215,181,109,.6) !important;
}

#eshop-main-container > a.btn.btn-primary:first-of-type,
#eshop-main-container > a.btn.btn-primary.float-end{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

#eshop-main-container{
  display:block;
}

#eshop-main-container::after{
  content:"";
  display:block;
  clear:both;
}

#eshop-main-container > a.btn.btn-primary:first-of-type{
  margin-top:4px;
}

#eshop-main-container > a.btn.btn-primary.float-end{
  margin-top:4px;
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width:991px){
  #eshop-main-container .cart-buttons{
    flex-wrap:wrap;
  }
}

@media (max-width:767px){
  #eshop-main-container .table > :not(caption) > * > *{
    padding:14px 12px;
  }

  #eshop-main-container .cart-info .table td[data-content="Product Name"] a{
    font-size:16px;
  }

  #eshop-main-container > a.btn.btn-primary,
  #eshop-main-container > a.btn.btn-primary.float-end{
    width:100%;
    margin:10px 0 0;
  }

  #eshop-main-container #apply-coupon{
    width:100%;
  }

  #eshop-main-container .eshop-quantity{
    gap:6px;
  }

  #eshop-main-container .eshop-quantity-button{
    width:38px;
    height:38px;
  }

  #eshop-main-container .eshop-quantity-value{
    width:50px;
    height:38px;
    line-height:38px;
    border-radius:12px !important;
  }

  /* stop weird stacked white mobile row behavior */
  #eshop-main-container .cart-info .table tbody tr,
  #eshop-main-container .cart-info .table tbody td{
    background:transparent !important;
  }

  /* keep remove icon in its own place */
  #eshop-main-container .cart-info .table td[data-content="Remove"]{
    text-align:center;
    vertical-align:middle;
  }
}

/* =========================================================
   Bottom CTA Layout Fix
   ========================================================= */

#eshop-main-container > a.btn.btn-primary:first-of-type,
#eshop-main-container > a.btn.btn-primary.float-end{
  margin-top:24px;
}

#eshop-main-container{
  position:relative;
}

/* Button Wrapper Simulation */
#eshop-main-container > a.btn.btn-primary:first-of-type{
  float:left !important;
}

#eshop-main-container > a.btn.btn-primary.float-end{
  float:right !important;
}

/* Clear floats clean */
#eshop-main-container::after{
  content:"";
  display:block;
  clear:both;
}