/* Overlay / backdrop */
  .cart-overlay {
    position: fixed;
    inset: 0;
    background: var(--cart-overlay-bg);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 320ms var(--cart-ease);
    z-index: 9999;
  }

  /* Cart panel */
  .cart-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: var(--cart-width);
    max-width: 96%;
    height: 100vh;
    background: linear-gradient(180deg,#ffffff,#fbfdff);
    box-shadow: -8px 24px 60px rgba(11,20,40,0.18);
    transform: translateX(110%); /* hidden off-screen */
    transition: transform 420ms var(--cart-ease);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    border-radius: 12px 0 0 12px;
    overflow: auto;
    will-change: transform;
  }

  /* Active states */
  .cart-overlay.cart-active {
    opacity: 1;
    pointer-events: auto;
  }
  .cart-panel.cart-active {
    transform: translateX(0);
    z-index: 9999;
  }

  /* Header */
  .cart-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding: 18px;
    border-bottom: 1px solid rgba(0,0,0,0.04);
  }
  .cart-title {
    margin:0;
    font-size:18px;
    font-weight:700;
    color:#0f172a;
  }
  .cart-close-btn {
    background:transparent;
    border:0;
    font-size:22px;
    line-height:1;
    cursor:pointer;
    padding:6px;
    border-radius:6px;
  }
  .cart-close-btn:focus,
  #cart-open-btn:focus {
    outline: 3px solid rgba(11,116,255,0.16);
    outline-offset: 2px;
  }

  /* Content */
  .cart-content {
    padding: 16px;
    color:#071029;
    flex:1;
  }

  /* Footer (checkout) */
  .cart-footer {
    padding: 16px 15px 15% 15px;
    border-top: 1px solid rgba(0,0,0,0.04);
    display:flex;
    gap:10px;
  }
  .cart-btn {
    padding:10px 14px;
    border:0;
    border-radius:8px;
    cursor:pointer;
  }
  .cart-btn--primary {
    background:#0b74ff; color:#fff; flex:1;
  }
  .cart-btn--secondary {
    background:#c7c7c7; color:#111;
  }

  /* Prevent body scroll when open (class applied to html) */
  .cart-body-locked {
    overflow: hidden;
    height: 100%;
  }
  .cart-btn{
    text-transform: none;
  }
  @media (max-width:520px){
    :root{ --cart-width: 92%; }
    .cart-panel { border-radius: 12px; } /* full width look on mobile */
    .cart-btn{
        font-size: 12px;
    }
  }