/* ============================================================
   Pakistan & Counting — Cart page
   Pixel match to Figma: removed-notice · product table with qty
   steppers + remove · coupon · CART TOTALS box over a green
   watermark panel that bleeds to the right edge.
   Base tokens / header / footer / buttons come from style.css.
   ============================================================ */
:root{ --c-green:#26B685; --c-green-dk:#1E9E73; --c-orange:#FF6B22; --c-yellow:#F9C300;
  --c-pink:#EF2167; --c-dark:#2C2C2C; --c-mint:#EFFAF5; --c-line:#E4E4E4; }
.ct-wrap{position:relative;overflow:hidden;background:#fff;padding:44px 0 70px}
.ct-wrap::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:repeating-linear-gradient(0deg,rgba(0,0,0,.06) 0 1px,transparent 1px 46px),
    repeating-linear-gradient(90deg,rgba(0,0,0,.06) 0 1px,transparent 1px 46px)}
.ct-wrap>.container{position:relative;z-index:1}
.ct-totals-col{position:relative;overflow:visible}
  .ct-panel::before{content: "";position: absolute;z-index: 0;pointer-events: none;top: -40%;height: 132.5%;left: 55%;
    right: -100vw;background: var(--c-green);}
.ct-panel img{position: absolute;top: -15%;right: 8%;height: 132%;width: auto;z-index: 0;pointer-events: none;}

/* ---------- removed / added notice ---------- */
.ct-notice{position:relative;z-index:1;display:flex;align-items:center;gap:12px;
  background:#F2FBF7;border:1.5px dashed var(--c-green);color:var(--c-dark);
  font-family:var(--ff);font-weight:600;font-size:14px;padding:14px 20px;margin-bottom:26px;max-width: 900px}
.ct-notice svg{flex:0 0 auto;color:var(--c-green)}
.ct-notice a{color:var(--c-green);font-weight:800;text-decoration:underline;cursor:pointer}
.ct-notice .ct-notice-x{margin-left:auto;color:#9aa;font-weight:700;font-size:18px;line-height:1;background:none;border:0;cursor:pointer}

/* ---------- layout ---------- */
.ct-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) 580px;gap:48px;align-items:start}
.ct-left{min-width:0}

/* ---------- product table ---------- */
.ct-card{background:#fff;border:1px solid var(--c-line);box-shadow: -10px 10px 0 0 rgba(38, 182, 133, .14);
  padding:22px 26px}
.ct-table{width:100%;border-collapse:separate;border-spacing:0 12px;font-family:var(--ff)}
.ct-table thead th{text-align:left;font-weight:800;text-transform:uppercase;font-size:13.5px;
  letter-spacing:.03em;color:var(--c-dark);padding:6px 10px 12px}
.ct-table thead th:first-child{position:relative}
.ct-th-price,.ct-th-qty,.ct-th-sub{white-space:nowrap}

.ct-row td{background:var(--c-mint);border-top:1px solid rgba(38,182,133,.18);
  border-bottom:1px solid rgba(38,182,133,.18);vertical-align:middle;padding:14px 10px}
.ct-row td:first-child{border-left:1px solid rgba(38,182,133,.18)}
.ct-row td:last-child{border-right:1px solid rgba(38,182,133,.18)}
.ct-prod{position:relative}
.ct-prod-inner{display:flex;align-items:center;gap:14px;padding-left:26px}
.ct-remove{position:absolute;left:-15px;top:50%;transform:translateY(-50%);width:30px;height:30px;
  display:grid;place-items:center;color:var(--c-orange);font-size:30px;line-height:1;background:none;border:0;cursor:pointer}
.ct-remove:hover{color:var(--c-pink)}
.ct-thumb{width:52px;height:52px;flex:0 0 auto;object-fit:cover;border:1px solid rgba(0,0,0,.06)}
.ct-name{font-weight:700;font-size:14px;color:var(--c-dark);line-height:1.3}
.ct-price,.ct-sub{font-weight:700;font-size:14px;color:var(--c-dark);white-space:nowrap}
.ct-price{color:#555;font-weight:600}

/* qty stepper (Figma) — cream −/+ cells with gold glyphs, white number cell w/ full gold border */
.ct-stepper{display:inline-flex;align-items:stretch;width:max-content}
.ct-stepper button,.ct-stepper a{display:grid;place-items:center;width:30px;height:38px;font-size:18px;font-weight:700;
  color:var(--c-yellow);background:#FFF8E4;line-height:1;cursor:pointer;text-decoration:none;border:0}
.ct-stepper button:hover,.ct-stepper a:hover{background:#FBEFC4}
.ct-stepper input{width:44px;text-align:center;border:1.5px solid var(--c-yellow);
  font-family:var(--ff);font-weight:800;font-size:14px;color:var(--c-dark);background:#fff;-moz-appearance:textfield}
.ct-stepper input::-webkit-outer-spin-button,.ct-stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* ---------- coupon ---------- */
/* coupon spans the FULL left column width (same as the table) — Figma */
.ct-coupon{margin-top:22px;display:flex;align-items:center;border:1.5px dashed var(--c-green);background:#fff;
  width:100%;padding:8px 8px 8px 4px;box-shadow: -10px 10px 0 0 rgba(38, 182, 133, .14);}
.ct-coupon input{flex:1;min-width:0;border:0;outline:0;padding:12px 16px;font-family:var(--ff);font-size:14px;color:var(--c-dark);background:transparent}
.ct-coupon__btn{flex:0 0 auto;background:var(--c-green);color:#fff;font-family:var(--ff);font-weight:900;
  text-transform:uppercase;font-size:12.5px;letter-spacing:.04em;padding:13px 22px;border:0;cursor:pointer;
  box-shadow:4px 4px 0 0 var(--c-yellow)}
.ct-coupon__btn:hover{background:var(--c-green-dk)}
.ct-coupon-msg{position:relative;z-index:1;margin-top:10px;font-family:var(--ff);font-size:13px;font-weight:700}
.ct-coupon-msg.err{color:var(--c-pink)}
.ct-coupon-msg.ok{color:var(--c-green)}
/* applied-coupon state */
.ct-coupon--applied{justify-content:space-between;gap:12px;border-style:solid;background:var(--c-mint,#eafaf4);padding:12px 14px}
.ct-coupon__tag{font-family:var(--ff);font-size:13.5px;font-weight:700;color:var(--c-green-dk,#0f7a58)}
.ct-coupon__tag b{font-weight:900;letter-spacing:.03em}
.ct-coupon__btn--remove{background:var(--c-pink);box-shadow:4px 4px 0 0 rgba(0,0,0,.12);padding:11px 18px}
.ct-coupon__btn--remove:hover{filter:brightness(.94);background:var(--c-pink)}
.ct-totals__grid .ct-totals__disc{color:var(--c-green)}

/* ---------- cart totals ---------- */
.ct-totals{position:relative;width:380px;background:#fff;border:2px solid #26b685;padding:26px 28px 28px}
.ct-totals::after {
    content: "";
    position: absolute;
    top: 12px;
    right: 12px;
    width: 100%;
    height: 100%;
    background: url("../images/checkout/Green-backgroudn-bg.svg") no-repeat;
    background-size: cover;
    z-index: -1;
}
.ct-totals__title{position:relative;font-family:var(--ff);font-weight:900;text-transform:uppercase;font-size:21px;
  color:var(--c-dark);padding-bottom:14px;margin-bottom:22px}
/* heading underline removed (client request) */
.ct-totals__title::after{content:none;display:none}
/* label + value in an aligned 2-column grid, both LEFT-aligned (Figma) */
.ct-totals__grid{display:grid;grid-template-columns:max-content auto;column-gap:26px;row-gap:16px;
  align-items:baseline;font-family:var(--ff);font-size:15.5px;color:var(--c-dark);margin-bottom:24px}
.ct-totals__grid b{font-weight:800}
.ct-totals__grid span{font-weight:500}
.ct-checkout{display:block;text-align:center;background:var(--c-orange);color:#fff;
  font-family:var(--ff);font-weight:900;text-transform:uppercase;letter-spacing:.03em;font-size:14px;
  padding:16px 18px;box-shadow:5px 5px 0 0 var(--c-yellow);transition:transform .12s ease,box-shadow .12s ease}
.ct-checkout:hover{transform:translate(1px,1px);box-shadow:3px 3px 0 0 var(--c-yellow)}

/* ---------- empty cart ---------- */
.ct-empty{position:relative;z-index:1;text-align:center;padding:60px 20px 70px;max-width:560px;margin:0 auto}
.ct-empty h2{font-family:var(--ff);font-weight:900;text-transform:uppercase;font-size:clamp(22px,3vw,30px);color:var(--c-dark)}
.ct-empty p{margin:14px 0 26px;color:#666;font-weight:500}
.ct-empty__actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .ct-grid{grid-template-columns:1fr;justify-items:center}
  /* totals column matches the box so it stays centred */
  .ct-totals-col{width:100%;max-width:420px}
  .ct-totals{width:100%}
  .ct-left{width:100%}
  /* Drop the right-bleeding green watermark once the layout stacks: it's purely
     decorative (aria-hidden) and its absolute ::before (top:-40%, right:-100vw)
     otherwise bleeds UP and LEFT over the coupon. The totals box keeps its own
     green backdrop via .ct-totals::after. */
  .ct-panel,.ct-panel::before{display:none}
}
@media (max-width:640px){
  .ct-card{padding:16px 14px}
  .ct-table thead{position:absolute;left:-9999px}      /* stacked card layout on mobile */
  .ct-table,.ct-table tbody,.ct-row,.ct-row td{display:block;width:100%}
  .ct-row td{border:0;padding:8px 12px}
  .ct-row{background:var(--c-mint);border:1px solid rgba(38,182,133,.22);margin-bottom:16px;padding:8px 6px 12px;position:relative}
  .ct-prod-inner{padding-left:24px}
  .ct-row td:before{content:attr(data-label);display:inline-block;min-width:80px;font-weight:800;
    text-transform:uppercase;font-size:11px;color:#888;letter-spacing:.03em}
  .ct-prod td:before,.ct-prod:before{display:none}
  .ct-row td.ct-prod:before{display:none}
}