/* ==========================================================================
   Satvikly custom Side Cart (slide-out mini-cart). No plugin.
   ========================================================================== */

/* The theme adds an inline transform:translateZ(0) on body.single-product (a
   perf hack) which reparents position:fixed to the body and breaks the side
   cart on product pages. Neutralise it (matches the rudrabhishek fix). */
body.single-product { transform: none !important; will-change: auto !important; }

.sv-sc-overlay {
  position: fixed;
  inset: 0;
  background: rgba(35, 20, 12, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity .28s ease, visibility .28s ease;
  z-index: 100000;
}
.sv-sc {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: 390px;
  max-width: 90vw;
  background: #fffdf9;
  box-shadow: -18px 0 46px -24px rgba(60, 26, 14, .45);
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
  z-index: 100001;
  display: flex;
  flex-direction: column;
  font-family: inherit;
}
body.sv-sc-open { overflow: hidden; }
body.sv-sc-open .sv-sc-overlay { opacity: 1; visibility: visible; }
body.sv-sc-open .sv-sc { transform: translateX(0); }
.sv-sc.is-loading { pointer-events: none; }
.sv-sc.is-loading::after {
  content: ""; position: absolute; inset: 0; background: rgba(255, 253, 249, .55);
  z-index: 5;
}

/* ---- Head ---- */
.sv-sc__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px; border-bottom: 1px solid #f0e5d1; flex: 0 0 auto;
}
.sv-sc__title { font-size: 18px; font-weight: 700; color: #5c2415; letter-spacing: .2px; }
.sv-sc__close {
  border: 0; background: #f4e9d7; color: #7d1f14; width: 34px; height: 34px;
  border-radius: 50%; font-size: 22px; line-height: 1; cursor: pointer; transition: background .15s;
}
.sv-sc__close:hover { background: #ecdcc2; }

/* ---- Content (scrolls) + sticky footer ---- */
.sv-sc .widget_shopping_cart_content {
  flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0;
}
.sv-sc ul.woocommerce-mini-cart {
  list-style: none; margin: 0; padding: 6px 22px; flex: 1 1 auto; overflow-y: auto;
}
/* WooCommerce puts the image + name inside one <a>, so we position the image
   absolutely on the LEFT and pad the content column around it. !important beats
   WooCommerce's default product_list_widget rules (img{float:right;width:32px}
   and the li padding), which have higher specificity than our scoped selectors. */
.sv-sc .woocommerce-mini-cart-item {
  position: relative !important;
  padding: 16px 88px 16px 74px !important;
  margin: 0 !important;
  border-bottom: 1px solid #f3e9d6 !important;
  list-style: none !important;
}
.sv-sc .woocommerce-mini-cart-item img {
  position: absolute !important; left: 0 !important; top: 16px !important; right: auto !important;
  float: none !important;
  width: 58px !important; height: 58px !important; max-width: none !important;
  object-fit: cover; border-radius: 10px; border: 1px solid #f0e5d1; margin: 0 !important;
}
.sv-sc .woocommerce-mini-cart-item > a:not(.remove) {
  display: block !important; float: none !important;
  color: #4a382b; font-size: 14.5px; font-weight: 600; line-height: 1.35; text-decoration: none; padding: 0 !important;
}
.sv-sc .woocommerce-mini-cart-item > a:not(.remove):hover { color: #7d1f14; }
.sv-sc .woocommerce-mini-cart-item .quantity {
  display: block !important; float: none !important;
  font-size: 13.5px; color: #8a7660; margin-top: 5px;
}
/* item meta (Weight, variation) -> hidden; the value is shown small in the title instead */
.sv-sc .woocommerce-mini-cart-item dl,
.sv-sc .woocommerce-mini-cart-item .variation {
  display: none;
}
.sv-sc .woocommerce-mini-cart-item .sv-attr { font-size: 12px; font-weight: 500; color: #8a7660; white-space: nowrap; }
.sv-sc .woocommerce-mini-cart-item dl dt,
.sv-sc .woocommerce-mini-cart-item dl dd { display: inline; margin: 0; font-weight: 500; }
.sv-sc .woocommerce-mini-cart-item dl dd p { display: inline; margin: 0; }
.sv-sc .woocommerce-mini-cart-item a.remove {
  position: absolute; top: 48px; right: 14px; width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: #faf1ef; color: #c0392b !important;
  text-decoration: none; line-height: 1; transition: background .15s;
}
.sv-sc .woocommerce-mini-cart-item a.remove svg { width: 15px; height: 15px; display: block; }
.sv-sc .woocommerce-mini-cart-item a.remove:hover { background: #f6ddd7; }

/* line total (side cart) */
.sv-sc .sv-sc-qtyrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 9px; }
.sv-sc .sv-sc-linetotal { position: absolute; top: 16px; right: 14px; font-size: 15px; font-weight: 800; color: #7d1f14; white-space: nowrap; }
.sv-sc .sv-sc-linetotal .woocommerce-Price-amount { color: #7d1f14; }

/* quantity stepper — shared by the side cart AND the checkout order summary */
.sv-sc-qty { display: inline-flex; align-items: center; border: 1px solid #e6d8c2; border-radius: 9px; overflow: hidden; background: #fff; }
.sv-qtybtn {
  width: 28px; height: 28px; border: 0; background: #faf3e7; color: #7d1f14;
  font-size: 16px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.sv-qtybtn:hover { background: #f2e6cf; }
.sv-qtyval { min-width: 32px; text-align: center; font-size: 14px; font-weight: 600; color: #4a382b; }

/* checkout "Order Summary" per-item controls (stepper + remove) */
.sv-co-controls { display: inline-flex; align-items: center; gap: 12px; margin-top: 8px; }
.sv-co-remove {
  width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: #faf1ef; color: #c0392b !important; font-size: 18px; line-height: 1;
  text-decoration: none; transition: background .15s;
}
.sv-co-remove:hover { background: #f6ddd7; }

.sv-sc .woocommerce-mini-cart__empty-message {
  padding: 60px 22px; text-align: center; color: #8a7660; font-size: 15px;
}

/* ---- Footer (subtotal + buttons) ---- */
.sv-sc .woocommerce-mini-cart__total {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  margin: 0; padding: 16px 22px; border-top: 1px solid #f0e5d1;
  font-size: 16px; color: #5c2415; background: #faf3e7;
}
.sv-sc .woocommerce-mini-cart__total strong { font-weight: 700; }
.sv-sc .woocommerce-mini-cart__total .woocommerce-Price-amount { font-weight: 800; color: #7d1f14; }

.sv-sc .woocommerce-mini-cart__buttons {
  flex: 0 0 auto; display: flex; gap: 10px; margin: 0; padding: 0 22px 22px; background: #faf3e7;
}
.sv-sc .woocommerce-mini-cart__buttons .button {
  flex: 1 1 0; text-align: center; padding: 13px 10px; border-radius: 10px;
  font-weight: 600; font-size: 15px; border: 0; cursor: pointer; text-decoration: none; line-height: 1.2;
  transition: filter .15s ease, background .15s ease;
}
/* enforce the button design on every screen (beats any generic .button override, incl. mobile) */
.sv-sc .woocommerce-mini-cart__buttons a.sv-sc__continue,
.sv-sc .woocommerce-mini-cart__buttons .sv-sc__continue { background: #fff !important; color: #662f1e !important; border: 1.5px solid #d9c4b8 !important; }
.sv-sc .woocommerce-mini-cart__buttons .sv-sc__continue:hover { background: #f7efe8 !important; }
.sv-sc .woocommerce-mini-cart__buttons a.sv-sc__checkout,
.sv-sc .woocommerce-mini-cart__buttons .sv-sc__checkout { background: #662f1e !important; color: #fff !important; border: 0 !important; }
.sv-sc .woocommerce-mini-cart__buttons .sv-sc__checkout:hover { background: #7d3d28 !important; }

@media (max-width: 480px) {
  .sv-sc { width: 100%; max-width: 100%; }
}