/* The Trendy Suitcase — quote list (/cart/), wishlist (/wishlist/) and compare (/compare/).
   Page frame measured from companion.com.pk/cart (25px/800 title, 1px-bordered 10px-radius banner, 14px #969696 empty copy,
   250x48 square black button); the filled states follow Ella's cart anatomy with Trendy's WhatsApp ordering. */

/* ---------- page frame ---------- */
.tpl-cart .news,.tpl-wishlist .news,.tpl-compare .news{display:none}   /* reference hides the newsletter band on every non-home template: the page goes straight to the footer */
.cart-h{padding:14px 0 15px}
.cart-h h1{font-size:25px;letter-spacing:.05em;line-height:1.1}
.cart-page .btn{border-radius:0}
.cart-promo{display:block;min-height:50px;padding:12px 18px;border:1px solid var(--accent);border-radius:10px;font-size:14px;line-height:1.45;text-align:center;color:#000}
.cart-promo b{font-weight:700}
.cart-pill{display:inline-block;margin:0 2px;padding:0 10px;background:var(--accent);color:#fff;font-size:13px;font-weight:800;line-height:25px;text-transform:uppercase;letter-spacing:.3px;border-radius:4px;vertical-align:1px}

/* ---------- empty state (reference: 73px banner→text, 40px text→button, then 120px straight to the footer; 28/17/46 on phones) ---------- */
.cart-empty{padding:72px 0 120px;text-align:center}
.cart-empty-t{margin:0 auto 40px;max-width:560px;font-size:14px;line-height:1.5;color:var(--grey2)}
.cart-empty-t b{color:var(--ink);font-weight:600}
.cart-empty-t a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.cart-empty-t a:hover{color:var(--accent)}
.cart-btn{display:inline-flex;align-items:center;justify-content:center;min-width:250px;height:48px;padding:0 28px;background:var(--ink);color:#fff;border:1px solid var(--ink);
  font-size:15px;font-weight:600;line-height:22px;text-transform:uppercase;letter-spacing:0;transition:background .3s cubic-bezier(.25,.46,.45,.94),color .3s cubic-bezier(.25,.46,.45,.94)}
.cart-btn:hover{background:#fff;color:var(--ink)}
@media(max-width:767px){
  .cart-h{padding:10px 0 12px}
  .cart-promo{padding:10px 14px}
  .cart-empty{padding:28px 0 46px}
  .cart-empty-t{margin-bottom:17px}
  .cart-btn{width:100%;min-width:0;height:44px;font-size:13px}
}

/* state: the inline <script> in each template sets these on <html> before paint, cart.js keeps them in sync */
.cart-body,.wl-body,.cmp-body{display:none}
.tf-has-quote .cart-body{display:grid}
.tf-has-quote .cart-empty{display:none}
.tf-has-wish .wl-body{display:block}
.tf-has-wish .wl-empty{display:none}
.tf-has-cmp .cmp-body{display:block}
.tf-has-cmp .cmp-empty{display:none}

/* ---------- quote list: line items ---------- */
.cart-body{grid-template-columns:minmax(0,1fr) 380px;gap:44px;align-items:start;padding:30px 0 64px}
.wl-body,.cmp-body{padding-bottom:64px}
@media(max-width:767px){.cart-body,.wl-body,.cmp-body{padding-bottom:44px}}
.cart-tbl{width:100%;border-collapse:collapse;color:#3c3c3c}
.cart-tbl th{padding:0 12px 12px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--grey);text-align:left;border-bottom:1px solid var(--line)}
.cart-tbl td{padding:20px 12px;border-bottom:1px solid var(--line);vertical-align:middle;font-size:14px;background:#fff}
.cart-tbl th:first-child,.cart-tbl td:first-child{padding-left:0}
.cart-tbl th:last-child,.cart-tbl td:last-child{padding-right:0;text-align:right}
.cart-p{display:flex;align-items:center;gap:16px;min-width:0}
.cart-thumb{flex:0 0 96px;width:96px;height:96px;background:var(--well);border-radius:var(--r);overflow:hidden;display:flex;align-items:center;justify-content:center}
.cart-thumb img{width:88%;height:88%;object-fit:contain;mix-blend-mode:multiply}
.cart-pi{min-width:0}
.cart-name{display:block;font-weight:600;color:var(--ink);line-height:1.35}
.cart-name:hover{color:var(--accent)}
.cart-var,.cart-out{display:block;margin-top:4px;font-size:12px;line-height:1.4;color:var(--grey)}
.cart-out{color:var(--accent);font-weight:600}
.cart-m-price{display:none}
.cart-price{white-space:nowrap}
.cart-price small,.cart-m-price small{font-size:11.5px;font-weight:500;color:var(--grey)}
.cart-total{font-weight:700;color:var(--ink);white-space:nowrap}
.qty{display:inline-flex;align-items:stretch;border:1px solid #c7c7c7;border-radius:var(--r);overflow:hidden;background:#fff;vertical-align:middle}
.qty button{width:40px;height:40px;display:flex;align-items:center;justify-content:center;font-size:18px;line-height:1;color:var(--ink);transition:background .15s}
.qty button:hover{background:var(--well)}
.qty input{width:46px;height:40px;padding:0;border:0;border-left:1px solid #c7c7c7;border-right:1px solid #c7c7c7;text-align:center;font:700 14px var(--f);color:var(--ink);-moz-appearance:textfield;appearance:textfield;border-radius:0}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qty input:focus{background:var(--bg2)}
.qty input:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}   /* inset: .qty clips overflow */
.cart-del{display:inline-flex;align-items:center;gap:4px;min-height:40px;padding:0 6px;font-size:12.5px;color:var(--grey);text-decoration:underline;text-underline-offset:2px;transition:color .15s}
.cart-del svg{width:14px;height:14px}
.cart-del:hover{color:var(--accent)}
.cart-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:16px}
.cart-link{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0;font-size:13px;font-weight:700;color:var(--ink);text-decoration:underline;text-underline-offset:3px;transition:color .15s}
.cart-link svg{width:16px;height:16px}
.cart-link:hover{color:var(--accent)}
.cart-link--muted{font-weight:600;color:var(--grey)}

/* ---------- quote list: summary ---------- */
.cart-sum{position:sticky;top:calc(var(--hdr) + 16px);border:1px solid var(--line);border-radius:var(--r);padding:24px 26px 26px;background:#fff}
.cart-sum-h{margin:0 0 12px;padding-bottom:12px;border-bottom:1px solid var(--line);font-size:16px;font-weight:800;text-transform:uppercase;letter-spacing:.3px}
.cart-tot{margin:0;padding:0}
.cart-tot div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:6px 0;font-size:14px}
.cart-tot dt{color:var(--grey)}
.cart-tot dd{margin:0;font-weight:600}
.cart-tot-sub{margin-top:6px;padding-top:12px !important;border-top:1px solid var(--line)}
.cart-tot-sub dt{font-size:15px;font-weight:700;color:var(--ink)}
.cart-tot-sub dt small{font-size:12px;font-weight:500;color:var(--grey)}
.cart-tot-sub dd{font-size:19px;font-weight:800;color:var(--ink);white-space:nowrap}
.cart-est{margin:6px 0 18px;font-size:12.5px;line-height:1.5;color:var(--grey)}
.cart-lbl{display:block;margin-bottom:6px;font-size:13px;font-weight:700}
.cart-lbl small{font-weight:500;color:var(--grey)}
.cart-note{display:block;width:100%;min-height:86px;margin-bottom:14px;padding:10px 12px;border:1px solid #c7c7c7;border-radius:var(--r);background:#fff;font:400 14px/1.5 var(--f);color:var(--ink);resize:vertical}
.cart-note::placeholder{color:#868686}
.cart-note:focus{border-color:var(--ink)}   /* keyboard focus keeps the global :focus-visible ring */
.cart-send{height:48px;font-size:14px}
.cart-pay-h{margin:18px 0 8px;font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:1.2px;color:var(--grey2)}
@media(max-width:1199px){   /* tablet + small laptops: the 5-column table needs ~680px, so the summary stacks below it */
  .cart-body{grid-template-columns:1fr;gap:28px}
  .cart-sum{position:static}
}
@media(max-width:767px){
  .cart-body{padding-top:20px}
  .cart-tbl thead{display:none}
  .cart-tbl,.cart-tbl tbody{display:block}
  .cart-row{display:grid;grid-template-columns:1fr auto;grid-template-areas:"p p" "qty total" "rm rm";gap:10px 12px;padding:16px 0;border-bottom:1px solid var(--line)}
  .cart-tbl td,.cart-tbl td:first-child,.cart-tbl td:last-child{display:block;padding:0;border:0;text-align:left}
  .cart-tbl td.cart-p{display:flex;grid-area:p;gap:14px;align-items:flex-start}
  .cart-thumb{flex-basis:84px;width:84px;height:84px}
  .cart-tbl td.cart-price{display:none}
  .cart-m-price{display:block;margin-top:6px;font-weight:700;color:var(--ink)}
  .cart-qty{grid-area:qty}
  .cart-total{grid-area:total;align-self:center;font-size:15px}
  .cart-rm{grid-area:rm;margin-top:-4px}
  .cart-del{margin-left:-6px}
  .cart-sum{padding:20px 16px 22px}
}

/* ---------- compare toggle injected on product cards ---------- */
.pc-cmp{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:40px;margin-top:2px;padding:0 8px;font-size:12px;font-weight:600;color:var(--grey);transition:color .15s}
.pc-cmp svg{width:15px;height:15px}
.pc-cmp:hover,.pc-cmp[aria-pressed=true]{color:var(--accent)}
.pc-cmp[aria-pressed=true] span::after{content:" \2713"}

/* ---------- wishlist ---------- */
.wl-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:26px 0 18px;font-size:14px;color:var(--grey)}
.wl-card .pc-wish{opacity:1;transform:none}
.wl-foot{padding-top:10px}
.wl-foot .btn{height:44px;font-size:12.5px}
.wl-links{display:flex;justify-content:center;gap:6px;margin-top:2px}
.wl-links .cart-link{padding:0 8px;font-size:12.5px;font-weight:600;color:var(--grey)}
.wl-links .cart-link svg{width:14px;height:14px}
.wl-links .cart-link[aria-pressed=true]{color:var(--accent)}
@media(max-width:767px){.wl-bar{padding:18px 0 14px}.wl-foot .btn{height:40px;font-size:11.5px;padding:0 12px}}

/* ---------- compare ---------- */
.cmp-add{display:flex;align-items:flex-end;flex-wrap:wrap;gap:10px;padding:22px 0 0}
.cmp-sel{flex:1 1 320px;min-width:0}
.cmp-sel label{display:block;margin-bottom:6px;font-size:13px;font-weight:700}
.cmp-sel label small{font-weight:500;color:var(--grey)}
.cmp-sel select{width:100%;height:48px;padding:0 12px;border:1px solid #c7c7c7;border-radius:var(--r);background:#fff;font:500 14px var(--f);color:var(--ink)}
.cmp-sel select:focus{border-color:var(--ink)}
.cmp-add .btn{height:48px;padding:0 32px}
.cmp-empty{padding-top:56px}
.cmp-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:26px;padding-bottom:6px;scrollbar-width:thin}
.cmp-tbl{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;font-size:14px;color:#3c3c3c}
.cmp-tbl th,.cmp-tbl td{padding:14px 16px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;line-height:1.5}
.cmp-tbl thead th{padding-top:0;vertical-align:bottom}
.cmp-lblcol{width:150px}   /* <col> - under table-layout:fixed this is what sizes the label column */
.cmp-tbl th[scope=row],.cmp-tbl .cmp-lbl{position:sticky;left:0;z-index:3;width:150px;padding-left:0;background:#fff;border-right:1px solid var(--line);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--grey)}   /* z above .cmp-x so scrolled-away × buttons slide under the sticky labels */
.cmp-col{position:relative;text-align:center !important}
.cmp-x{position:absolute;top:-4px;right:8px;z-index:2;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#fff;color:var(--grey);box-shadow:0 1px 6px rgba(0,0,0,.1);transition:color .15s}
.cmp-x:hover{color:var(--accent)}
.cmp-x svg{width:16px;height:16px}
.cmp-img{display:block;aspect-ratio:1;margin:0 0 12px;background:var(--well);border-radius:var(--r);overflow:hidden}
.cmp-img img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;padding:8%}
.cmp-name{display:block;font-size:14px;font-weight:600;line-height:1.35;color:var(--ink)}
.cmp-name:hover{color:var(--accent)}
.cmp-tbl .pc-price{font-size:15px;text-align:left}
.cmp-na{color:var(--grey2)}
.cmp-colors{display:flex;flex-wrap:wrap;gap:4px 12px}
.cmp-colors span{white-space:nowrap}
.sw{display:inline-block;width:14px;height:14px;margin-right:5px;border:1px solid rgba(0,0,0,.15);border-radius:50%;vertical-align:-2px}
.cmp-ok{font-weight:600;color:#1c7c3a}
.cmp-out{font-weight:600;color:var(--accent)}
.cmp-act{display:flex;flex-direction:column;gap:6px;align-items:stretch}
.cmp-act .btn{height:44px;font-size:12.5px;padding:0 12px}
.cmp-act .cart-link{justify-content:center;font-size:12.5px;font-weight:600;color:var(--grey)}
.cmp-act .cart-link svg{width:15px;height:15px}
.cmp-act .cart-link[aria-pressed=true]{color:var(--accent)}
.cmp-act .cart-link[aria-pressed=true] svg path{fill:currentColor}
.cmp-slot{display:flex;align-items:center;justify-content:center;aspect-ratio:1;width:100%;border:1px dashed #c7c7c7;border-radius:var(--r);font-size:13px;font-weight:600;color:var(--grey);transition:all .15s}
.cmp-slot:hover{color:var(--ink);border-color:var(--ink)}
.cmp-foot{margin:22px 0 0;font-size:13px;color:var(--grey)}
.cmp-foot .cart-link{margin-left:8px}
@media(max-width:767px){
  .cmp-add{padding-top:16px}
  .cmp-add .btn{flex:1}
  .cmp-empty{padding-top:28px}
  .cmp-lblcol,.cmp-tbl th[scope=row],.cmp-tbl .cmp-lbl{width:110px}
  .cmp-tbl th[scope=row],.cmp-tbl .cmp-lbl{font-size:11px;letter-spacing:.5px}
  .cmp-tbl th,.cmp-tbl td{padding:12px 10px;font-size:13px}
  .cmp-x{right:2px}
}