/*
 * PunkyCat — CART (Mango-like desktop rebuild)
 * ------------------------------------------------------------------
 * Skin only. WC Cart Block markup left untouched (calculations, AJAX,
 * coupon, qty, remove, totals, checkout button stay native). We just
 * remove the default Woo "table + form" feel and rebuild a wide,
 * editorial, fashion-brand layout: items on the left, sticky summary
 * card on the right.
 *
 * Scope: body.pc-cart-page only. Does NOT touch homepage, PLP, PDP,
 * checkout, mini-cart, or admin.
 * Mobile is intentionally left to fall back to WC defaults; the
 * desktop two-column rebuild is the focus of this task.
 */

/* ---------------------------------------------------------------- */
/*  Page wrapper: widen container, drop card chrome on cart article */
/* ---------------------------------------------------------------- */

body.pc-cart-page .pc-site__main{
  padding-top: clamp(28px, 3.4vw, 48px);
  padding-bottom: var(--pc-s-16);
}
/* Tight horizontal inset on the cart so its left/right edges line up with
 * the related-products strip below (clamp(16px, 2.4vw, 32px)). The
 * container max width is generous enough to feel "edge-to-edge" on big
 * screens but capped so that on ultra-wide monitors the cart layout
 * doesn't visually fall apart with one product. */
body.pc-cart-page .pc-site__main > .pc-container{
  max-width: 1600px;
  padding-left: clamp(16px, 2.4vw, 32px);
  padding-right: clamp(16px, 2.4vw, 32px);
  display: block;
}
body.pc-cart-page .pc-cart-article{
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}
body.pc-cart-page .pc-cart-article > header{
  margin: 0 0 var(--pc-s-10) 0;
}
body.pc-cart-page .pc-cart-article > header .pc-h1{
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  font-weight: var(--pc-font-weight-semibold);
  letter-spacing: var(--pc-tracking-tight);
  margin: 0;
  text-transform: none;
}
body.pc-cart-page .pc-prose{
  margin: 0;
}

/* ---------------------------------------------------------------- */
/*  Cart block root + 2-column desktop layout                       */
/* ---------------------------------------------------------------- */

body.pc-cart-page .wp-block-woocommerce-cart{
  width: 100%;
  margin: 0;
}
body.pc-cart-page .wc-block-cart{
  padding: 0;
  margin: 0;
}
body.pc-cart-page .wc-block-components-sidebar-layout{
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
  margin: 0 !important;
}
body.pc-cart-page .wc-block-components-sidebar-layout .wc-block-components-main,
body.pc-cart-page .wc-block-cart__main{
  width: 100% !important;
  padding: 0 !important;
  margin: 0;
  box-sizing: border-box;
}
body.pc-cart-page .wc-block-components-sidebar-layout .wc-block-components-sidebar,
body.pc-cart-page .wc-block-cart__sidebar{
  width: 100% !important;
  padding: 0 !important;
  margin: 0;
}

@media (max-width: 1180px){
  body.pc-cart-page .wc-block-components-sidebar-layout{
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 48px;
  }
}
@media (max-width: 980px){
  body.pc-cart-page .wc-block-components-sidebar-layout{
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* ---------------------------------------------------------------- */
/*  Items table: kill the "table" look, render as clean rows        */
/* ---------------------------------------------------------------- */

body.pc-cart-page table.wc-block-cart-items,
body.pc-cart-page table.wc-block-cart-items > tbody,
body.pc-cart-page table.wc-block-cart-items > thead{
  display: block;
  width: 100%;
  border: 0 !important;
  border-spacing: 0;
  background: transparent;
}

/* Items list section header (we synthesize a clean label) */
body.pc-cart-page .wc-block-cart__main::before{
  content: "Sepetiniz";
  display: block;
  font-size: 0.78rem;
  font-weight: var(--pc-font-weight-semibold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pc-text-tertiary);
  padding-bottom: 14px;
  margin-bottom: 0;
  border-bottom: 1px solid var(--pc-border);
}

/* Hide WC's own header row — we render our own label above */
body.pc-cart-page table.wc-block-cart-items .wc-block-cart-items__header{
  display: none !important;
}

/* Each row: image (left) | product info + qty (under info) | total (right).
 * Mango-like: medium tile image (matches the related-products card size
 * below), all product meta + qty stacked vertically in the middle column;
 * line total stays right-aligned. The image column intentionally tracks
 * the same width as a single related-products card (~320px on desktop)
 * so the page reads as one unified "slider tile" system top-to-bottom. */
body.pc-cart-page table.wc-block-cart-items .wc-block-cart-items__row{
  display: grid !important;
  grid-template-columns: clamp(240px, 17vw, 320px) minmax(0, 1fr) auto;
  grid-template-areas:
    "image product total"
    "image quantity total";
  column-gap: clamp(24px, 2.4vw, 40px);
  row-gap: 18px;
  align-items: start;
  padding: 28px 0 28px 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--pc-border) !important;
  background: transparent !important;
}
body.pc-cart-page table.wc-block-cart-items .wc-block-cart-items__row:last-child{
  border-bottom: 0 !important;
}

body.pc-cart-page table.wc-block-cart-items .wc-block-cart-items__row > td{
  display: block;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

/* Image cell: render as a real "tile / slider card" — visible surface
 * background + thin border + radius so the photo no longer reads as a
 * floating cut-out on the page. Matches the related-products card chrome
 * below (same surface token, same radius, same aspect ratio). */
body.pc-cart-page table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image{
  grid-area: image;
  width: 100%;
  max-width: clamp(240px, 17vw, 320px);
}
body.pc-cart-page table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image > a,
body.pc-cart-page table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image > div{
  display: block;
  aspect-ratio: 3 / 4;
  width: 100%;
  background: var(--pc-surface-2);
  border: 1px solid var(--pc-border);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}
body.pc-cart-page table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image > a:hover{
  border-color: var(--pc-fg);
  transition: border-color .18s ease;
}
body.pc-cart-page table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
}

body.pc-cart-page table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__product{
  grid-area: product;
  padding: 4px 0 0 0 !important;
  align-self: start;
}
body.pc-cart-page .wc-block-cart-item__product .wc-block-cart-item__wrap{
  display: flex;
  flex-direction: column;
  gap: 6px;
}
body.pc-cart-page .wc-block-cart-item__product .wc-block-components-product-name{
  font-size: 0.95rem;
  font-weight: var(--pc-font-weight-semibold);
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--pc-fg);
  text-transform: none;
  text-decoration: none;
  margin: 0 0 2px 0 !important;
  max-width: 100% !important;
}
body.pc-cart-page .wc-block-cart-item__product .wc-block-components-product-name:hover{
  text-decoration: underline;
}
body.pc-cart-page .wc-block-cart-item__product .wc-block-cart-item__prices{
  font-size: 0.8125rem;
  color: var(--pc-text-secondary);
  margin: 2px 0 0 0;
}
body.pc-cart-page .wc-block-cart-item__product .wc-block-cart-item__prices .wc-block-components-product-price__value{
  font-weight: 500;
}
body.pc-cart-page .wc-block-cart-item__product .wc-block-components-product-metadata,
body.pc-cart-page .wc-block-cart-item__product .wc-block-components-product-metadata__variation-data,
body.pc-cart-page .wc-block-cart-item__product .wc-block-components-product-details{
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--pc-text-tertiary);
  margin: 4px 0 0 0;
}
body.pc-cart-page .wc-block-cart-item__product .wc-block-components-product-metadata__variation-data{
  display: block;
}
body.pc-cart-page .wc-block-cart-item__product .wc-block-components-product-details__name{
  font-weight: 500;
  color: var(--pc-text-secondary);
}
body.pc-cart-page .wc-block-cart-item__product .wc-block-components-product-details__value{
  color: var(--pc-text-secondary);
}

/* Quantity row: lives BELOW the product info column (Mango-like rhythm).
 * qty selector + remove icon, side-by-side. */
body.pc-cart-page table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity{
  grid-area: quantity;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  align-self: start;
}
body.pc-cart-page .wc-block-cart-item__quantity .wc-block-components-quantity-selector{
  width: 116px !important;
  border: 1px solid var(--pc-border);
  border-radius: 999px;
  background: #fff;
  height: 38px;
  overflow: hidden;
}
body.pc-cart-page .wc-block-cart-item__quantity .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input{
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--pc-fg);
  padding: 0;
}
body.pc-cart-page .wc-block-cart-item__quantity .wc-block-components-quantity-selector__button{
  font-size: 1rem;
  color: var(--pc-fg);
  opacity: 1;
  font-weight: 400;
  width: 36px;
}
body.pc-cart-page .wc-block-cart-item__quantity .wc-block-components-quantity-selector__button:hover{
  background: var(--pc-surface-2);
}
body.pc-cart-page .wc-block-cart-item__quantity .wc-block-cart-item__remove-link{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 999px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--pc-text-tertiary) !important;
  text-decoration: none !important;
  transition: background-color .18s ease, color .18s ease;
}
body.pc-cart-page .wc-block-cart-item__quantity .wc-block-cart-item__remove-link svg{
  width: 16px;
  height: 16px;
  fill: currentColor;
}
body.pc-cart-page .wc-block-cart-item__quantity .wc-block-cart-item__remove-link:hover{
  color: var(--pc-fg) !important;
  background: var(--pc-surface-2) !important;
}

/* Total / line price */
body.pc-cart-page table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total{
  grid-area: total;
  padding: 6px 0 0 0 !important;
  text-align: right;
  font-size: 0.95rem;
  font-weight: var(--pc-font-weight-semibold);
  letter-spacing: -0.005em;
  color: var(--pc-fg);
  line-height: 1.3;
  white-space: nowrap;
  align-self: start;
}
body.pc-cart-page .wc-block-cart-item__total .wc-block-cart-item__total-price-and-sale-badge-wrapper{
  align-items: flex-end;
}
body.pc-cart-page .wc-block-cart-item__total .wc-block-components-product-price__value{
  font-weight: var(--pc-font-weight-semibold);
}

/* ---------------------------------------------------------------- */
/*  Cross-sells under cart items                                    */
/* ---------------------------------------------------------------- */

body.pc-cart-page .wp-block-woocommerce-cart-cross-sells-block,
body.pc-cart-page .wp-block-woocommerce-product-collection{
  margin-top: clamp(48px, 6vw, 72px);
}
body.pc-cart-page .wp-block-woocommerce-cart-cross-sells-block .wp-block-heading,
body.pc-cart-page .wp-block-woocommerce-product-collection .wp-block-heading{
  font-size: 0.78rem !important;
  font-weight: var(--pc-font-weight-semibold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pc-text-tertiary);
  margin: 0 0 24px 0;
}

/* ---------------------------------------------------------------- */
/*  Sidebar: Mango-like summary card                                */
/* ---------------------------------------------------------------- */

body.pc-cart-page .wc-block-cart__sidebar{
  position: sticky;
  top: calc(var(--pc-header-h, 84px) + 24px);
  align-self: start;
}
body.pc-cart-page .wc-block-cart__sidebar > *{
  background: var(--pc-surface-2);
  border: 1px solid var(--pc-border);
  border-radius: 4px;
  padding: 28px 28px 24px 28px;
}
body.pc-cart-page .wc-block-cart__sidebar > * + *{
  margin-top: 16px;
}

/* "Sepet Toplamları" heading: requested removed.
 * Hide visually but keep accessible (present in DOM for screen readers). */
body.pc-cart-page .wc-block-cart__totals-title{
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Order summary block: clean rows, no inner borders/cards */
body.pc-cart-page .wc-block-cart .wp-block-woocommerce-cart-order-summary-block{
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0.875rem !important;
  background: transparent !important;
}
body.pc-cart-page .wc-block-cart .wp-block-woocommerce-cart-order-summary-block > *{
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}
body.pc-cart-page .wc-block-cart .wp-block-woocommerce-cart-order-summary-block .wc-block-components-totals-item,
body.pc-cart-page .wc-block-cart .wp-block-woocommerce-cart-order-summary-block .wc-block-components-totals-coupon,
body.pc-cart-page .wc-block-cart .wp-block-woocommerce-cart-order-summary-block .wc-block-components-panel{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Generic totals rows */
body.pc-cart-page .wc-block-components-totals-item{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 10px 0 !important;
  font-size: 0.875rem;
  color: var(--pc-fg);
  border: 0;
}
body.pc-cart-page .wc-block-components-totals-item .wc-block-components-totals-item__label{
  font-weight: 500;
  color: var(--pc-text-secondary);
}
body.pc-cart-page .wc-block-components-totals-item .wc-block-components-totals-item__value{
  font-weight: 500;
  color: var(--pc-fg);
}

/* Coupon panel */
body.pc-cart-page .wc-block-components-totals-coupon{
  border-top: 1px solid var(--pc-border);
  border-bottom: 1px solid var(--pc-border);
  padding: 8px 0 !important;
  margin: 8px 0 !important;
}
body.pc-cart-page .wc-block-components-totals-coupon .wc-block-components-panel__button{
  font-size: 0.78rem;
  font-weight: var(--pc-font-weight-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pc-fg);
  padding: 14px 0 !important;
  margin: 0 !important;
  background: transparent;
  border: 0;
  width: 100%;
  text-align: left;
}
body.pc-cart-page .wc-block-components-totals-coupon .wc-block-components-totals-coupon__form{
  margin-top: 12px;
  margin-bottom: 12px;
  gap: 8px;
}
body.pc-cart-page .wc-block-components-totals-coupon__form .wc-block-components-text-input,
body.pc-cart-page .wc-block-components-totals-coupon__form .wc-block-components-totals-coupon__input{
  flex: 3 1 120px;
}
body.pc-cart-page .wc-block-components-totals-coupon__form input[type="text"]{
  border: 1px solid var(--pc-border);
  border-radius: 999px;
  height: 40px;
  padding: 0 16px;
  font-size: 0.875rem;
  background: #fff;
}
body.pc-cart-page .wc-block-components-totals-coupon__form .wc-block-components-totals-coupon__button{
  background: var(--pc-fg) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 999px !important;
  height: 40px !important;
  min-height: 40px !important;
  font-size: 0.78rem !important;
  font-weight: var(--pc-font-weight-semibold) !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0 18px !important;
}

/* Footer (final total) row — Mango-like:
 *   TOPLAM .................. 3.479,92 TL
 *   Vergiler dahildir
 *
 * The native label ("Tahmini toplam") is rendered by the Cart Block via JS
 * i18n, not PHP gettext, so we cannot rewrite it server-side. Instead we
 * collapse the label text node (font-size: 0) and inject our own "TOPLAM"
 * string via ::before. The native dynamic tax sub-line is hidden in favor
 * of our own static "Vergiler dahildir" caption (placed via grid). */
/* Footer (final total) row — Mango-like:
 *   TOPLAM .................. 3.479,92 TL
 *   Vergiler dahildir
 *
 * The Cart Block renders "Tahmini toplam" via JS i18n (not gettext), so
 * we collapse the original text node and inject "TOPLAM" via ::before on
 * the label element, leaving the native value untouched. The
 * "Vergiler dahildir" caption is rendered as a sibling block right under
 * the footer row — keeping the original WC flex layout intact. */
body.pc-cart-page .wc-block-components-totals-footer-item{
  border-top: 1px solid var(--pc-border);
  padding-top: 18px !important;
  padding-bottom: 0 !important;
  margin-top: 14px !important;
}
body.pc-cart-page .wc-block-components-totals-footer-item .wc-block-components-totals-item__label{
  font-size: 0 !important;
  line-height: 1 !important;
  color: transparent !important;
}
body.pc-cart-page .wc-block-components-totals-footer-item .wc-block-components-totals-item__label::before{
  content: "TOPLAM";
  display: inline-block;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--pc-fg);
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-transform: uppercase;
}
body.pc-cart-page .wc-block-components-totals-footer-item .wc-block-components-totals-item__value{
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: var(--pc-fg) !important;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-align: right;
}
body.pc-cart-page .wc-block-components-totals-footer-item .wc-block-components-totals-item__value .wc-block-formatted-money-amount,
body.pc-cart-page .wc-block-components-totals-footer-item .wc-block-components-totals-footer-item-tax-value{
  font-size: inherit !important;
  font-weight: inherit !important;
  color: inherit !important;
}
/* Hide the native dynamic tax description (the small "Including X in taxes"
 * paragraph). Note: do NOT touch .wc-block-components-totals-footer-item-tax-value
 * — despite the name, that is the FORMATTED TOTAL PRICE element living inside
 * .wc-block-components-totals-item__value. Hiding it would erase the total. */
body.pc-cart-page .wc-block-components-totals-footer-item .wc-block-components-totals-footer-item-tax{
  display: none !important;
}
/* Static "Vergiler dahildir" caption rendered as a flex-wrap child of the
 * footer-item so it sits directly under the TOPLAM line. The native row is
 * already display:flex with flex-wrap:wrap (WC default), so a 100%
 * flex-basis pseudo-element wraps cleanly to a new line. */
body.pc-cart-page .wc-block-components-totals-footer-item::after{
  content: "Vergiler dahildir";
  display: block;
  flex: 0 0 100%;
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--pc-text-tertiary);
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.4;
  margin-top: 6px;
  text-align: left;
  order: 99;
}

/* Shipping / discount blocks */
body.pc-cart-page .wp-block-woocommerce-cart-order-summary-shipping-block .wc-block-components-totals-shipping{
  padding: 6px 0;
}
body.pc-cart-page .wc-block-components-totals-discount__coupon-list{
  margin-top: 6px;
}

/* "Free shipping" label override → "Teslimat".
 * The Cart Block ships this string via JS i18n (not gettext), so we
 * collapse the original text node and inject the Turkish label via
 * ::before. Scoped to the shipping summary block + the shipping totals
 * wrapper to cover both rendering variants. */
body.pc-cart-page .wp-block-woocommerce-cart-order-summary-shipping-block .wc-block-components-totals-item__label,
body.pc-cart-page .wc-block-components-totals-shipping .wc-block-components-totals-item__label,
body.pc-cart-page .wc-block-components-totals-shipping__title{
  font-size: 0 !important;
  line-height: 1 !important;
  color: transparent !important;
}
body.pc-cart-page .wp-block-woocommerce-cart-order-summary-shipping-block .wc-block-components-totals-item__label::before,
body.pc-cart-page .wc-block-components-totals-shipping .wc-block-components-totals-item__label::before,
body.pc-cart-page .wc-block-components-totals-shipping__title::before{
  content: "Teslimat";
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--pc-text-secondary);
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.4;
}

/* ---------------------------------------------------------------- */
/*  Proceed-to-checkout CTA                                         */
/* ---------------------------------------------------------------- */

body.pc-cart-page .wp-block-woocommerce-proceed-to-checkout-block,
body.pc-cart-page .wc-block-cart__submit{
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin-top: 20px !important;
  margin-bottom: 0 !important;
}
body.pc-cart-page .wc-block-cart__submit-container{
  padding: 0 !important;
  background: transparent !important;
  position: static !important;
  box-shadow: none !important;
}
body.pc-cart-page .wc-block-cart__submit-container::before{
  display: none !important;
}
body.pc-cart-page .wc-block-cart__submit-container a,
body.pc-cart-page .wc-block-cart__submit-button,
body.pc-cart-page .wc-block-components-checkout-button{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 52px !important;
  padding: 16px 24px !important;
  background: var(--pc-fg) !important;
  color: #fff !important;
  border: 1px solid var(--pc-fg) !important;
  border-radius: 999px !important;
  font-family: inherit !important;
  font-size: 0.875rem !important;
  font-weight: var(--pc-font-weight-semibold) !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: opacity .18s ease, transform .18s ease;
}
body.pc-cart-page .wc-block-cart__submit-container a:hover,
body.pc-cart-page .wc-block-cart__submit-button:hover,
body.pc-cart-page .wc-block-components-checkout-button:hover{
  opacity: 0.92;
}
body.pc-cart-page .wc-block-cart__submit-container a .wc-block-components-button__text,
body.pc-cart-page .wc-block-cart__submit-button .wc-block-components-button__text,
body.pc-cart-page .wc-block-components-checkout-button .wc-block-components-button__text{
  color: #fff !important;
}

/* Express payment + accepted methods: drop heavy chrome, calm down */
body.pc-cart-page .wp-block-woocommerce-cart-express-payment-block:empty,
body.pc-cart-page .wp-block-woocommerce-cart-accepted-payment-methods-block:empty{
  display: none !important;
}
body.pc-cart-page .wc-block-components-payment-method-icons{
  margin-top: 8px;
  justify-content: flex-start;
}

/* ---------------------------------------------------------------- */
/*  Empty cart state                                                */
/* ---------------------------------------------------------------- */

body.pc-cart-page .wp-block-woocommerce-empty-cart-block{
  text-align: center;
  padding: clamp(48px, 8vw, 96px) 0;
}
body.pc-cart-page .wc-block-cart__empty-cart__title{
  font-size: clamp(1.4rem, 2.2vw, 1.9rem) !important;
  font-weight: var(--pc-font-weight-semibold) !important;
  letter-spacing: var(--pc-tracking-tight);
  margin-bottom: 24px !important;
}

/* ---------------------------------------------------------------- */
/*  Belt and braces: defang any leftover WC cart "table" defaults   */
/* ---------------------------------------------------------------- */

body.pc-cart-page .wc-block-cart .wc-block-cart-items th,
body.pc-cart-page .wc-block-cart .wc-block-cart-items td{
  border: 0 !important;
}
body.pc-cart-page .wc-block-cart-items{
  border: 0 !important;
}

/* ---------------------------------------------------------------- */
/*  "İlgini çekebilir" — related products carousel under the cart   */
/*  Mango-like horizontal strip with prev/next arrow controls.      */
/*  Cards reuse the PLP card markup (.pc-card-product), so size     */
/*  hover-overlay + add-to-cart are wired up by plp.js.             */
/* ---------------------------------------------------------------- */

/* Full-bleed: break out of the .pc-card / .pc-container chain so the
 * strip spans the entire viewport edge-to-edge (Mango look).
 * This works because every ancestor is centered (margin: 0 auto), so
 * `calc(50% - 50vw)` exactly cancels the offset to the viewport edge.
 * `overflow-x` on the article/main prevents the 100vw from creating a
 * horizontal scrollbar when a vertical one is present. */
/* Stop the parent .pc-card from clipping our full-bleed strip. We use
 * `overflow-x: clip` on <html>/<body> instead so the 100vw width below
 * never produces a horizontal scrollbar, while still letting the strip
 * paint outside its parent's content box. */
html, body.pc-cart-page{
  overflow-x: clip;
}
body.pc-cart-page main.pc-site__main,
body.pc-cart-page main.pc-site__main > .pc-container,
body.pc-cart-page main.pc-site__main article.pc-card,
body.pc-cart-page main.pc-site__main .pc-prose{
  overflow-x: visible !important;
}
body.pc-cart-page .pc-cart-related{
  margin-top: clamp(28px, 3.5vw, 48px);
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
  max-width: 100vw;
}
body.pc-cart-page .pc-cart-related__bar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 20px 0;
  /* Tiny inset so title/arrows don't kiss the viewport edge */
  padding-left: clamp(16px, 2.4vw, 32px);
  padding-right: clamp(16px, 2.4vw, 32px);
}
body.pc-cart-page .pc-cart-related__title{
  font-size: 0.95rem;
  font-weight: var(--pc-font-weight-semibold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pc-fg);
  line-height: 1.3;
  margin: 0;
  padding: 0;
}
body.pc-cart-page .pc-cart-related__nav{
  display: flex;
  align-items: center;
  gap: 8px;
  /* Hide arrows by default; JS adds .has-overflow when needed. */
  visibility: hidden;
  opacity: 0;
  transition: opacity .18s ease;
}
body.pc-cart-page .pc-cart-related.has-overflow .pc-cart-related__nav{
  visibility: visible;
  opacity: 1;
}
body.pc-cart-page .pc-cart-related__btn{
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--pc-border);
  background: #fff;
  color: var(--pc-fg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, opacity .18s ease;
}
body.pc-cart-page .pc-cart-related__btn svg{
  width: 14px;
  height: 14px;
  display: block;
}
body.pc-cart-page .pc-cart-related__btn:hover{
  background: var(--pc-fg);
  color: #fff;
  border-color: var(--pc-fg);
}
body.pc-cart-page .pc-cart-related__btn:focus-visible{
  outline: 2px solid var(--pc-fg);
  outline-offset: 2px;
}
body.pc-cart-page .pc-cart-related__btn:disabled{
  opacity: 0.35;
  cursor: default;
  background: #fff;
  color: var(--pc-fg);
  border-color: var(--pc-border);
}

/* Viewport clips overflow; track is the actual scroller.
 *
 * We give the viewport the SAME horizontal padding the cart container
 * uses (clamp(16px, 2.4vw, 32px)). This pulls the related strip in from
 * the viewport edges so the cards don't crash into the screen sides —
 * which previously made them dominate the page versus the contained
 * cart-item tile above. The strip stays "wide" (still much wider than
 * the cart's two-column layout), but no longer feels like a separate,
 * heavier shelf bolted onto the page.  */
body.pc-cart-page .pc-cart-related__viewport{
  position: relative;
  overflow: hidden;
  padding-left: clamp(16px, 2.4vw, 32px);
  padding-right: clamp(16px, 2.4vw, 32px);
  box-sizing: border-box;
}
body.pc-cart-page .pc-cart-related__track{
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 10px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-snap-type: x mandatory;
}
body.pc-cart-page .pc-cart-related__track::-webkit-scrollbar{
  display: none;
}

/* Each card becomes a fixed-width slide. We render slightly more cards
 * per row than the previous spec (7 → 6 → 5 → 4 → 2 across breakpoints
 * vs. 6 → 5 → 4 → 3 → 2) so each related-card image is a touch smaller
 * and visually balanced against the single cart-item tile above. The
 * gap is also bumped to 10px so cards read as discrete tiles rather
 * than a continuous wall of photos. */
body.pc-cart-page .pc-cart-related__track > li.product{
  flex: 0 0 calc((100% - (10px * 6)) / 7);
  width: calc((100% - (10px * 6)) / 7);
  max-width: calc((100% - (10px * 6)) / 7);
  margin: 0 !important;
  padding: 0 !important;
  scroll-snap-align: start;
}
@media (max-width: 1599px){
  body.pc-cart-page .pc-cart-related__track > li.product{
    flex: 0 0 calc((100% - (10px * 5)) / 6);
    width: calc((100% - (10px * 5)) / 6);
    max-width: calc((100% - (10px * 5)) / 6);
  }
}
@media (max-width: 1279px){
  body.pc-cart-page .pc-cart-related__track > li.product{
    flex: 0 0 calc((100% - (10px * 4)) / 5);
    width: calc((100% - (10px * 4)) / 5);
    max-width: calc((100% - (10px * 4)) / 5);
  }
}
@media (max-width: 979px){
  body.pc-cart-page .pc-cart-related__track > li.product{
    flex: 0 0 calc((100% - (10px * 3)) / 4);
    width: calc((100% - (10px * 3)) / 4);
    max-width: calc((100% - (10px * 3)) / 4);
  }
}
@media (max-width: 719px){
  body.pc-cart-page .pc-cart-related__track > li.product{
    flex: 0 0 calc((100% - 10px) / 2);
    width: calc((100% - 10px) / 2);
    max-width: calc((100% - 10px) / 2);
  }
}

/* User asked for a clean look here: NO color swatches, NO “seçenekleri gör”
 * action button. Hover already reveals sizes / add-to-cart from the PLP
 * markup. */
body.pc-cart-page .pc-cart-related .pc-plp-row,
body.pc-cart-page .pc-cart-related .pc-plp-row--colors,
body.pc-cart-page .pc-cart-related .pc-plp-hint,
body.pc-cart-page .pc-cart-related .pc-card-product__actions{
  display: none !important;
}

/* Re-enable the inline prev/next gallery arrows on cart-related cards
 * (previously fully hidden). Per task spec: small, subtle, card-sized
 * arrows that switch images STAY scoped inside that single card.
 * The click handlers are already wired by plp.js's bindVariableCard(),
 * we just give them a Mango-like minimal skin and a hover-only reveal.
 *
 * No giant slider, no enlarged cards: pure 28×28 pill buttons that sit
 * inside the image area on the left/right edges, only fading in when the
 * card itself is hovered/focused.  */
body.pc-cart-page .pc-cart-related .pc-card-product__gallery-dots{
  display: none !important;
}
body.pc-cart-page .pc-cart-related .pc-card-product__gallery-btn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(17, 17, 17, 0.08);
  background: rgba(255, 255, 255, 0.94);
  color: var(--pc-fg);
  font-size: 14px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  cursor: pointer;
  z-index: 4;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease, visibility .18s, background-color .18s ease;
  box-shadow: 0 1px 2px rgba(17, 17, 17, 0.06);
}
body.pc-cart-page .pc-cart-related .pc-card-product__gallery-btn--prev{
  left: 8px;
}
body.pc-cart-page .pc-cart-related .pc-card-product__gallery-btn--next{
  right: 8px;
}
body.pc-cart-page .pc-cart-related .pc-card-product__gallery-btn:hover{
  background: #ffffff;
  border-color: rgba(17, 17, 17, 0.18);
}
body.pc-cart-page .pc-cart-related .pc-card-product__gallery-btn:focus-visible{
  outline: 2px solid var(--pc-fg);
  outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine){
  body.pc-cart-page .pc-cart-related .pc-card-product--has-gallery .pc-card-product__media:hover .pc-card-product__gallery-btn,
  body.pc-cart-page .pc-cart-related .pc-card-product--has-gallery .pc-card-product__media:focus-within .pc-card-product__gallery-btn{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}
@media (hover: none), (pointer: coarse){
  body.pc-cart-page .pc-cart-related .pc-card-product--has-gallery .pc-card-product__gallery-btn{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}

/* Tighten card body so the strip stays compact next to the larger cart
 * row above. */
body.pc-cart-page .pc-cart-related .pc-card-product__body{
  padding-top: 10px;
}

/* Subtle card chrome — bring the related card image into the same
 * "premium tile" family as the cart item image above (which already has
 * a surface bg + 1px border + 6px radius). Without this, the related
 * cards read as raw, edge-to-edge photos and visually overpower the
 * single cart item. We keep the existing aspect ratio and gallery
 * behavior; the only addition is a quiet surface frame around each card
 * media. Cards are NOT enlarged.
 *
 * Hover-only beden şeridi (Mango davranışı). Sizes overlay'i Mango'daki
 * gibi imajın ALT kenarına yerleştiriyoruz — kart hover edildiğinde alt
 * şerit içerikten yukarı kayarak çıkar. Üst kısım (kartın ~%75'i) her
 * zaman dokunulmaz/temiz kalır, böylece kullanıcı görsele tıkladığında
 * doğrudan PDP'ye yönlendirilir; bedeni seçmek isterse alttaki şeride
 * tıklar. Dokunmatikte hover yok, varsayılan görünür kalır.
 *
 * IMPORTANT: overlay container itself is `pointer-events: none` so its
 * transparent (background) area never blocks the underlying image link.
 * Only the actual size buttons re-enable `pointer-events: auto`. This way
 * the entire image surface stays a clickable link, while sizes still work
 * on the bottom strip.  */
body.pc-cart-page .pc-cart-related .pc-card-product__media{
  position: relative;
  background: var(--pc-surface-2);
  border: 1px solid var(--pc-border);
  border-radius: 6px;
  overflow: hidden;
  isolation: isolate;
  transition: border-color .18s ease;
}
body.pc-cart-page .pc-cart-related .pc-card-product__media:hover{
  border-color: rgba(17, 17, 17, 0.18);
}
body.pc-cart-page .pc-cart-related .pc-plp-hover-overlay[data-plp-image-overlay]{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: auto;
  display: block;
  background: rgba(255, 255, 255, 0.96);
  /* Eskiden 10px 8px idi; arşivden gelen min-height: 40px ile beraber
   * ~60px yüksekliğe çıkıyor ve görselin altını fazla kapatıyordu.
   * Kullanıcı geri bildirimi: "beden çıkan beyaz kutucuk çok yüksek".
   * Dikey padding'i ve içerideki min-height'ı kıstık → ~38px. */
  padding: 5px 8px;
  border-top: 1px solid var(--pc-border);
  pointer-events: none;
  z-index: 3;
}
body.pc-cart-page .pc-cart-related .pc-plp-hover-overlay .pc-plp-sizes--overlay{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 4px;
  margin: 0;
  padding: 0;
  /* archive.css'teki 40px min-height'ı override et. */
  min-height: 28px;
  /* Critical: archive.css gives this strip pointer-events: auto and a
   * solid white background, which absorbs every click in the bottom
   * ~40-60px of each card image — making the image link feel "broken"
   * for that whole band. The actual size buttons re-enable interaction
   * for themselves below. */
  pointer-events: none !important;
  background: transparent !important;
  box-shadow: none !important;
}
body.pc-cart-page .pc-cart-related .pc-plp-hover-overlay .pc-plp-sizes--overlay .pc-plp-size{
  pointer-events: auto;
  background: transparent;
  border: 0;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--pc-fg);
  letter-spacing: 0.04em;
  padding: 0 6px;
  min-width: 24px;
  /* archive.css'in 40px min-height/line-height'ını override et. */
  min-height: 28px;
  line-height: 28px;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 2px;
  transition: background-color .15s ease, color .15s ease;
}
body.pc-cart-page .pc-cart-related .pc-plp-hover-overlay .pc-plp-sizes--overlay .pc-plp-size:hover:not(:disabled){
  background: var(--pc-fg);
  color: #fff;
}
body.pc-cart-page .pc-cart-related .pc-plp-hover-overlay .pc-plp-sizes--overlay .pc-plp-size:disabled,
body.pc-cart-page .pc-cart-related .pc-plp-hover-overlay .pc-plp-sizes--overlay .pc-plp-size.is-unavailable{
  color: var(--pc-text-tertiary);
  text-decoration: line-through;
  cursor: not-allowed;
}

@media (hover: hover) and (pointer: fine){
  body.pc-cart-page .pc-cart-related .pc-plp-hover-overlay[data-plp-image-overlay]{
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, 100%, 0);
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
  }
  body.pc-cart-page .pc-cart-related .pc-card-product__media:hover .pc-plp-hover-overlay[data-plp-image-overlay],
  body.pc-cart-page .pc-cart-related .pc-card-product__media:focus-within .pc-plp-hover-overlay[data-plp-image-overlay]{
    opacity: 1;
    visibility: visible;
    transform: translate3d(0, 0, 0);
  }
}

/* Make sure the card image always opens the PDP — the underlying link
 * stretches across the ENTIRE media area so any click on the photo
 * lands on it. We give the link an explicit absolute layer that fills
 * the parent .pc-card-product__media (which is position: relative).
 * Decorative layers (size strip background, etc.) all have
 * pointer-events: none. Only real interactive controls (size buttons,
 * favorite button on the body, gallery prev/next arrows) re-enable
 * pointer-events on themselves and sit on top via higher z-index. */
body.pc-cart-page .pc-cart-related .pc-card-product__imglink{
  position: absolute;
  inset: 0;
  display: block;
  z-index: 2;
  cursor: pointer;
}
body.pc-cart-page .pc-cart-related .pc-card-product__imglink img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------------------------------------------------------------- */
/*  Optimistic price update visual cue                              */
/* ---------------------------------------------------------------- */

@keyframes pc-cart-money-pulse{
  0%   { opacity: 0.55; }
  50%  { opacity: 1; }
  100% { opacity: 0.78; }
}
body.pc-cart-page .pc-cart-money--optimistic{
  animation: pc-cart-money-pulse .9s ease-in-out infinite;
}