/**
 * Cart drawer (offcanvas mini-cart).
 *
 * There is no static design reference for this panel — the site design
 * only shows a "Cart <i>0</i>" header button with no built-out drawer —
 * so this is new CSS. It deliberately mirrors the visual language already
 * used elsewhere in the theme:
 *  - the offcanvas mechanics (fixed overlay + sliding `.con` panel with a
 *    `.close_box` header) mirror header nav's mobile menu pattern
 *    (public.css `header nav` inside the max-width:1024px media query),
 *  - the item list / totals inside `.cart_drawer_body` reuse checkout.css's
 *    `.order_card`/`.orders`/`.price-lis` "order summary" classes verbatim
 *    (only the surrounding `.checkout_main` page chrome is neutralised here
 *    so it fits a narrow panel instead of a full section).
 */
.cart_drawer {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
  --radius: 8px;
}
.cart_drawer.active {
  pointer-events: auto;
}
.cart_drawer.active > .close {
  opacity: 1;
}
.cart_drawer.active .con {
  transform: translate(0);
}
.cart_drawer > .close {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  transition: all 0.3s;
  background-color: rgba(0, 0, 0, 0.75);
}
.cart_drawer .con {
  position: relative;
  width: min(440px, 100%);
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: all 0.3s;
  transform: translateX(100%);
  background-color: #fff;
}
.cart_drawer .close_box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2rem 2.4rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.cart_drawer .close_box strong {
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--title);
}
.cart_drawer .close_box strong .count {
  color: var(--primary);
}
.cart_drawer .close_box .close {
  display: block;
  width: 44px;
  height: 44px;
  cursor: pointer;
  border: 0;
  padding: 0;
  margin-left: auto;
  transition: all 0.3s;
  border-radius: var(--radius);
  background: url('../img/close.svg') no-repeat center / 12px;
}
.cart_drawer .close_box .close:hover {
  background-color: rgba(0, 0, 0, 0.05);
}
.cart_drawer_body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 2rem 2.4rem 3rem;
  display: flex;
  flex-direction: column;
}

/* Reuse checkout.css's `.checkout_main .order_card` "order summary" look
   for the item list + totals, without its full-page section chrome.
   checkout.css itself is only enqueued on the cart/checkout/account
   pages, but the drawer is present on every page, so the `.orders` /
   `.price-lis` sizing rules it depends on (grid columns, icon size,
   qty badge, totals) are duplicated here rather than assumed present.
   Selectors are anchored on `#cart_drawer` so they always outrank
   checkout.css's pure-class `.checkout_main .order_card …` rules when
   both stylesheets load on cart/checkout (specificity tie / load-order
   was previously letting the sticky sidebar card chrome leak in). */
#cart_drawer .cart_drawer_body .checkout_main,
#cart_drawer .cart_drawer_body .order_card {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
#cart_drawer .cart_drawer_body .checkout_main {
  padding: 0;
  margin: 0;
  border-top: 0;
  background: none;
}
#cart_drawer .cart_drawer_body .order_card {
  position: static;
  top: auto;
  width: auto;
  min-width: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  background: none;
}
#cart_drawer .cart_drawer_body .order_card .caption {
  display: none;
}
#cart_drawer .cart_drawer_body .orders {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}
#cart_drawer .cart_drawer_body .orders li {
  display: grid;
  grid-template-columns: 5.2rem 1fr auto;
  align-items: center;
  gap: 1.6rem;
  padding: 1.6rem 0;
}
#cart_drawer .cart_drawer_body .orders li + li {
  border-top: 1px solid #e5eae9;
}
#cart_drawer .cart_drawer_body .orders .icon {
  border-radius: 0.9rem;
  background-image: linear-gradient(45deg, #e7eae9 14%, #d9dedd 86%);
}
#cart_drawer .cart_drawer_body .orders .icon img {
  transform: scale(0.57692308);
}
#cart_drawer .cart_drawer_body .orders .num {
  position: absolute;
  right: 0;
  top: 0;
  transform: translate(50%, -50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 500;
  color: #fff;
  background-color: #1c6b57;
  width: 1.43em;
  height: 1.43em;
  min-width: max-content;
  white-space: nowrap;
  border-radius: 0.7143em;
  padding: 0 0.3em;
}
#cart_drawer .cart_drawer_body .orders .info .title {
  display: block;
  font-size: 1.4rem;
  font-weight: 600;
}
#cart_drawer .cart_drawer_body .orders .info a.title {
  vertical-align: top;
  text-decoration: underline transparent;
  transition: all 0.3s;
}
#cart_drawer .cart_drawer_body .orders .info a.title:hover {
  text-decoration-color: var(--title);
}
#cart_drawer .cart_drawer_body .orders .info .metas {
  font-size: 1.3rem;
  color: var(--text);
  margin-top: 0.4rem;
}
#cart_drawer .cart_drawer_body .orders .amount {
  font-size: 1.5rem;
  font-weight: 600;
  color: #16201e;
  margin-bottom: 0.6rem;
  text-align: right;
}
#cart_drawer .cart_drawer_body .price-lis {
  flex-shrink: 0;
  border-top: 1px solid #e5eae9;
  padding-top: 1.6rem;
  margin-top: auto;
}
#cart_drawer .cart_drawer_body .price-lis li + li {
  margin-top: 1.2rem;
}
#cart_drawer .cart_drawer_body .price-lis li {
  display: grid;
  grid-template-columns: 2fr 1fr;
  align-items: center;
  font-size: 1.5rem;
  color: #6b756f;
  gap: 1rem;
  letter-spacing: -0.0024em;
}
#cart_drawer .cart_drawer_body .price-lis li .amount {
  font-size: 1.6rem;
  font-weight: 500;
  color: #3c4843;
  text-align: right;
}
#cart_drawer .cart_drawer_body .price-lis .coupon-line .wpta-remove-coupon {
  display: inline-block;
  margin-left: 0.5rem;
  font-size: 1.2rem;
  font-weight: 500;
  color: #e96a04;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
#cart_drawer .cart_drawer_body .price-lis .coupon-line .wpta-remove-coupon:hover {
  color: #c45703;
}
#cart_drawer .cart_drawer_body .price-lis .total {
  border-top: 1px dashed #e5eae9;
  color: #16201e;
  font-size: 1.7rem;
  font-weight: 500;
  padding-top: 1.6rem;
  letter-spacing: 0.005em;
}
#cart_drawer .cart_drawer_body .price-lis .total .amount {
  font-size: 2.2rem;
  font-weight: 600;
  color: #16201e;
  letter-spacing: 0.02069em;
}

.cart_drawer_empty {
  margin: auto;
  text-align: center;
  color: var(--text);
}
.cart_drawer_empty .btn {
  display: inline-flex;
  margin-top: 1.6rem;
}

.cart_qty {
  display: inline-flex;
  align-items: center;
  margin-top: 0.6rem;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: var(--radius);
  overflow: hidden;
  width: fit-content;
}
.cart_qty button {
  width: 2.8rem;
  height: 2.8rem;
  border: 0;
  background: #f7f7f7;
  cursor: pointer;
  font-size: 1.6rem;
  line-height: 1;
}
.cart_qty button:hover {
  background: rgba(0, 0, 0, 0.06);
}
.cart_qty input {
  width: 3.6rem;
  height: 2.8rem;
  border: 0;
  border-left: 1px solid rgba(0, 0, 0, 0.12);
  border-right: 1px solid rgba(0, 0, 0, 0.12);
  text-align: center;
  font-size: 1.4rem;
  -moz-appearance: textfield;
}
.cart_qty input::-webkit-outer-spin-button,
.cart_qty input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.cart_item_remove {
  display: inline-block;
  font-size: 1.2rem;
  color: #a3a3a3;
  text-decoration: underline;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  margin-top: 0.6rem;
}
.cart_item_remove:hover {
  color: #c0392b;
}

.cart_drawer_actions {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 1rem;
  margin-top: 1.6rem;
}

body.cart_drawer_open {
  overflow: hidden;
}

@media screen and (max-width: 576px) {
  .cart_drawer .con {
    width: 100%;
  }
}