.cart-page{padding:18px 0 34px;background:#fff}
.cart-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding: 14px 0 12px;
  border-bottom:1px solid rgba(17,17,17,.08);
}
.crumbs{font-size:12px;color:rgba(17,17,17,.65);letter-spacing:.08em;text-transform:uppercase}
.crumbs a{text-decoration:none}
.crumbs span{margin:0 6px}
.ct-title{margin:10px 0 0;font-family:var(--serif);font-size:clamp(26px,3.2vw,44px)}
.ct-sub{margin-top:8px;color:rgba(17,17,17,.65);font-size:13px}

.cart-actions{display:flex;gap:10px;flex-wrap:wrap}

.cart-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:16px;
  margin-top:16px;
}
.cart-card{
  border-radius: var(--r2);
  border:1px solid rgba(17,17,17,.10);
  box-shadow: var(--shadow-md);
  background:#fff;
  overflow:hidden;
}

.cart-table{padding:14px}
.row{
  display:grid;
  grid-template-columns: 1.2fr .6fr .6fr .6fr auto;
  gap:10px;
  align-items:center;
  padding:12px 0;
  border-bottom:1px solid rgba(17,17,17,.08);
}
.row:last-child{border-bottom:0}
.pn{font-weight:900}
.sm{color:rgba(17,17,17,.65);font-size:12px}
.qty{
  display:flex;gap:8px;align-items:center;
}
.qbtn{
  width:36px;height:36px;border-radius:12px;
  border:1px solid rgba(17,17,17,.12);
  background:#fff;cursor:pointer;font-weight:900;
}
.qval{min-width:26px;text-align:center;font-weight:900}
.rm{
  width:40px;height:40px;border-radius:14px;
  border:1px solid rgba(17,17,17,.12);
  background:#fff;cursor:pointer;
}

.cart-summary{padding:16px}
.sum-title{font-weight:900;letter-spacing:.08em;text-transform:uppercase;font-size:12px;color:rgba(17,17,17,.75)}
.sum-row{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid rgba(17,17,17,.08)}
.sum-total{border-bottom:0}
.sum-total b{font-size:18px}
.sum-note{margin-top:12px;color:rgba(17,17,17,.65);font-size:12px;line-height:1.6}

@media(max-width: 980px){
  .cart-grid{grid-template-columns:1fr}
  .row{grid-template-columns: 1fr .7fr .7fr .7fr auto}
}
@media(max-width: 560px){
  .row{grid-template-columns: 1fr; gap:8px}
}

/* =========================================================
   PREMIUM CART THEME (ADD-ON) — safe, non-breaking
   Paste this at the END of pages-cart.css
========================================================= */
.hp-cart, .cart-premium{
  background:
    radial-gradient(900px 450px at 10% 0%, rgba(17,17,17,.05), transparent 60%),
    radial-gradient(900px 450px at 90% 20%, rgba(17,17,17,.04), transparent 55%),
    #fff;
}

.hp-cart .container, .cart-premium .container{
  max-width: 1180px;
}

.hp-cart .crumbs, .cart-premium .crumbs,
.hp-cart .breadcrumbs, .cart-premium .breadcrumbs{
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(17,17,17,.55);
}

.hp-cart h1, .cart-premium h1,
.hp-cart .cart-title, .cart-premium .cart-title{
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-weight: 900;
  letter-spacing: .6px;
  font-size: clamp(34px, 4.2vw, 64px);
  line-height: 1.02;
  margin: 10px 0 6px;
  position: relative;
  display: inline-block;
}

.hp-cart h1::after, .cart-premium h1::after,
.hp-cart .cart-title::after, .cart-premium .cart-title::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-8px;
  height:2px;
  width: clamp(120px, 55%, 220px);
  border-radius: 999px;
  background: linear-gradient(90deg, #111, rgba(17,17,17,.15), #111);
  background-size: 200% 100%;
  animation: cartLine 2.6s ease-in-out infinite;
  opacity: .9;
}
@keyframes cartLine{ 0%{background-position:0 0} 100%{background-position:200% 0} }

.hp-cart .sub, .cart-premium .sub,
.hp-cart .cart-sub, .cart-premium .cart-sub{
  color: rgba(17,17,17,.55);
  font-size: 13px;
  line-height: 1.45;
}

.hp-cart .cart-wrap, .cart-premium .cart-wrap,
.hp-cart .cart-grid, .cart-premium .cart-grid{
  display: grid;
  grid-template-columns: 1.4fr .9fr;
  gap: 18px;
  align-items: start;
}

@media (max-width: 980px){
  .hp-cart .cart-wrap, .cart-premium .cart-wrap,
  .hp-cart .cart-grid, .cart-premium .cart-grid{
    grid-template-columns: 1fr;
  }
}

/* Cards / Panels */
.hp-cart :is(.cart-card,.cart-panel,.cart-box,.order-summary,.summary,.cart-left,.cart-right),
.cart-premium :is(.cart-card,.cart-panel,.cart-box,.order-summary,.summary,.cart-left,.cart-right){
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(17,17,17,.18);
  border-radius: 18px;
  box-shadow: 0 22px 55px rgba(17,17,17,.06);
  backdrop-filter: blur(10px);
}

/* Make product table area premium outline */
.hp-cart :is(.cart-items,.cart-table,.cart-list),
.cart-premium :is(.cart-items,.cart-table,.cart-list){
  border: 1px solid rgba(17,17,17,.38);
  border-radius: 18px;
  overflow: hidden;
}

/* Head row styling */
.hp-cart :is(.cart-head,.thead,.cart-table-head),
.cart-premium :is(.cart-head,.thead,.cart-table-head){
  background: linear-gradient(180deg, rgba(17,17,17,.03), transparent);
  border-bottom: 1px solid rgba(17,17,17,.10);
}

/* Row separators */
.hp-cart :is(.cart-row,.tr,.cart-item),
.cart-premium :is(.cart-row,.tr,.cart-item){
  border-bottom: 1px solid rgba(17,17,17,.10);
}
.hp-cart :is(.cart-row,.tr,.cart-item):last-child,
.cart-premium :is(.cart-row,.tr,.cart-item):last-child{
  border-bottom: 0;
}

/* Product name premium */
.hp-cart :is(.pname,.product-name,.cart-product-title),
.cart-premium :is(.pname,.product-name,.cart-product-title){
  font-weight: 800;
  letter-spacing: .2px;
  color: #111;
}

/* Size chip */
.hp-cart :is(.size-pill,.cart-size,.badge-size),
.cart-premium :is(.size-pill,.cart-size,.badge-size){
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(17,17,17,.20);
  background: rgba(17,17,17,.03);
  font-size: 12px;
  color: rgba(17,17,17,.75);
}

/* Qty controls */
.hp-cart :is(.qty,.cart-qty,.qty-wrap),
.cart-premium :is(.qty,.cart-qty,.qty-wrap){
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(17,17,17,.14);
  background: #fff;
}

.hp-cart :is(.qty button,.cart-qty button,.qty-wrap button),
.cart-premium :is(.qty button,.cart-qty button,.qty-wrap button){
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(17,17,17,.16);
  background: #fff;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.hp-cart :is(.qty button:hover,.cart-qty button:hover,.qty-wrap button:hover),
.cart-premium :is(.qty button:hover,.cart-qty button:hover,.qty-wrap button:hover){
  transform: translateY(-1px);
  border-color: rgba(17,17,17,.35);
  box-shadow: 0 10px 22px rgba(17,17,17,.08);
}

/* Remove (X) button */
.hp-cart :is(.rm,.remove,.cart-remove,button[data-remove]),
.cart-premium :is(.rm,.remove,.cart-remove,button[data-remove]){
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(17,17,17,.18);
  background: #fff;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.hp-cart :is(.rm:hover,.remove:hover,.cart-remove:hover,button[data-remove]:hover),
.cart-premium :is(.rm:hover,.remove:hover,.cart-remove:hover,button[data-remove]:hover){
  transform: rotate(-2deg) translateY(-1px);
  box-shadow: 0 14px 30px rgba(17,17,17,.10);
}

/* Buttons (Continue/Checkout etc.) */
.hp-cart :is(.btn,button,a.btn),
.cart-premium :is(.btn,button,a.btn){
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: .2px;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}
.hp-cart :is(.btn:hover,button:hover,a.btn:hover),
.cart-premium :is(.btn:hover,button:hover,a.btn:hover){
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(17,17,17,.10);
}

/* Make primary CTA more premium */
.hp-cart :is(.btn-primary,.checkout-btn,.proceed-btn),
.cart-premium :is(.btn-primary,.checkout-btn,.proceed-btn){
  background: #111;
  color: #fff;
  border: 1px solid #111;
}

/* Sticky summary on desktop */
@media (min-width: 981px){
  .hp-cart .cart-summary-card, .cart-premium .cart-summary-card{
    position: sticky;
    top: 18px;
  }
}

/* Mobile: spacing + better tap */
@media (max-width: 560px){
  .hp-cart h1, .cart-premium h1{ font-size: 34px; }
  .hp-cart :is(.qty button,.cart-qty button,.qty-wrap button),
  .cart-premium :is(.qty button,.cart-qty button,.qty-wrap button){
    width: 38px; height: 38px;
  }
}

/* ================================
   PREMIUM COLORFUL CART (ADD-ON)
   Paste at END of pages-cart.css
================================ */
:root{
  --cart-bg1: #ffffff;
  --cart-bg2: #f6f3ff;
  --cart-ink: #111111;
  --cart-muted: rgba(17,17,17,.60);
  --cart-g1: #ff7a18;
  --cart-g2: #7c3aed;
  --cart-g3: #06b6d4;
  --cart-card: rgba(255,255,255,.92);
  --cart-b: rgba(17,17,17,.14);
  --cart-b-strong: rgba(17,17,17,.28);
  --cart-shadow: 0 26px 60px rgba(17,17,17,.10);
}
body{
  background:
    radial-gradient(900px 520px at 10% 0%, rgba(124,58,237,.10), transparent 60%),
    radial-gradient(900px 520px at 90% 20%, rgba(6,182,212,.10), transparent 55%),
    radial-gradient(900px 520px at 50% 100%, rgba(255,122,24,.08), transparent 55%),
    linear-gradient(180deg, var(--cart-bg1), var(--cart-bg2));
}
h1, .cart-title{
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-weight: 900;
  letter-spacing: .4px;
  color: var(--cart-ink);
  position: relative;
  display: inline-block;
}
h1::after, .cart-title::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-10px;
  height:3px;
  width: min(240px, 62%);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--cart-g1), var(--cart-g2), var(--cart-g3));
  background-size: 220% 100%;
  animation: cartLineMove 2.8s ease-in-out infinite;
  opacity: .95;
}
@keyframes cartLineMove{ 0%{background-position:0 0} 100%{background-position:220% 0} }

.crumbs, .breadcrumbs{
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(17,17,17,.55);
}
.cart-card, .cart-panel, .cart-box, .order-summary, .summary, .cart-left, .cart-right{
  background: var(--cart-card);
  border: 1px solid var(--cart-b);
  border-radius: 18px;
  box-shadow: var(--cart-shadow);
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
}
.cart-card::before, .cart-panel::before, .cart-box::before, .order-summary::before, .summary::before, .cart-left::before, .cart-right::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: 20px;
  padding:2px;
  background: linear-gradient(110deg, rgba(255,122,24,.55), rgba(124,58,237,.55), rgba(6,182,212,.55));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .35;
  pointer-events: none;
}
.cart-items, .cart-table, .cart-list{
  border: 1px solid var(--cart-b-strong);
  border-radius: 18px;
  overflow: hidden;
}
.cart-head, .thead, .cart-table-head{
  background: linear-gradient(180deg, rgba(17,17,17,.035), transparent);
  border-bottom: 1px solid rgba(17,17,17,.10);
}
.cart-row, .tr, .cart-item{
  border-bottom: 1px solid rgba(17,17,17,.10);
}
.cart-row:last-child, .tr:last-child, .cart-item:last-child{
  border-bottom: 0;
}
.pname, .product-name, .cart-product-title{
  font-weight: 800;
  letter-spacing: .2px;
  color: var(--cart-ink);
}
.size-pill, .cart-size, .badge-size{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(17,17,17,.18);
  background: rgba(124,58,237,.06);
  color: rgba(17,17,17,.72);
  font-size: 12px;
}
.total, .cart-total, .summary-total b{
  background: linear-gradient(90deg, var(--cart-g2), var(--cart-g1));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 900;
}
.qty, .cart-qty, .qty-wrap{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(17,17,17,.12);
  background: #fff;
}
.qty button, .cart-qty button, .qty-wrap button{
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(17,17,17,.16);
  background: #fff;
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.qty button:hover, .cart-qty button:hover, .qty-wrap button:hover{
  transform: translateY(-1px);
  border-color: rgba(17,17,17,.32);
  box-shadow: 0 14px 28px rgba(17,17,17,.10);
}
.rm, .remove, .cart-remove, button[data-remove]{
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(17,17,17,.16);
  background: #fff;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.rm:hover, .remove:hover, .cart-remove:hover, button[data-remove]:hover{
  transform: rotate(-2deg) translateY(-1px);
  border-color: rgba(255,122,24,.55);
  box-shadow: 0 18px 34px rgba(17,17,17,.12);
}
.btn, button, a.btn{
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: .2px;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.checkout-btn, .proceed-btn, .btn-primary{
  background: linear-gradient(90deg, var(--cart-g1), var(--cart-g2));
  color:#fff !important;
  border: 0;
  box-shadow: 0 16px 40px rgba(124,58,237,.18);
}
.checkout-btn:hover, .proceed-btn:hover, .btn-primary:hover{
  transform: translateY(-1px);
  filter: brightness(1.03);
}
.btn-ghost, .btn-secondary, .clear-btn{
  background: #fff;
  border: 1px solid rgba(17,17,17,.18);
}
.btn-ghost:hover, .btn-secondary:hover, .clear-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(17,17,17,.10);
}
@media (max-width: 980px){
  .cart-wrap, .cart-grid{
    display:grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }
}
@media (max-width: 560px){
  h1, .cart-title{ font-size: 34px; }
  .qty button, .cart-qty button, .qty-wrap button{ width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce){
  h1::after, .cart-title::after{ animation: none; }
}

/* =========================================================
   ✅ IMPORTANT FIX (REAL CART SELECTORS) — MUST BE LAST
   This is the block that will ACTUALLY apply colors on your page
========================================================= */
.cart-page{
  background:
    radial-gradient(900px 520px at 10% 0%, rgba(124,58,237,.12), transparent 60%),
    radial-gradient(900px 520px at 90% 20%, rgba(6,182,212,.12), transparent 55%),
    radial-gradient(900px 520px at 50% 100%, rgba(255,122,24,.10), transparent 55%),
    linear-gradient(180deg, #ffffff, #f7f4ff) !important;
}

/* Gradient line under "Your Cart" */
.cart-page .ct-title{
  position: relative;
  display: inline-block;
}
.cart-page .ct-title::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-10px;
  height:3px;
  width: min(260px, 62%);
  border-radius:999px;
  background: linear-gradient(90deg, #ff7a18, #7c3aed, #06b6d4);
  background-size: 220% 100%;
  animation: cartLineMove2 2.8s ease-in-out infinite;
  opacity:.95;
}
@keyframes cartLineMove2{ 0%{background-position:0 0} 100%{background-position:220% 0} }

/* Premium cards (force override) */
.cart-page .cart-card{
  background: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(17,17,17,.18) !important;
  box-shadow: 0 26px 60px rgba(17,17,17,.10) !important;
  border-radius: 18px !important;
}

/* Animated gradient ring */
.cart-page .cart-card{
  position: relative;
  overflow: hidden;
}
.cart-page .cart-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: 20px;
  padding:2px;
  background: linear-gradient(110deg, rgba(255,122,24,.55), rgba(124,58,237,.55), rgba(6,182,212,.55));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .28;
  pointer-events: none;
}

/* Table border stronger (premium feel) */
.cart-page .cart-table{
  border: 1px solid rgba(17,17,17,.30);
  border-radius: 16px;
  padding: 14px;
  background: rgba(255,255,255,.65);
}

/* Row hover subtle */
.cart-page .row{
  border-bottom: 1px solid rgba(17,17,17,.10) !important;
}
.cart-page .row:hover{
  background: linear-gradient(90deg, rgba(124,58,237,.05), rgba(6,182,212,.05), rgba(255,122,24,.04));
  border-radius: 12px;
}

/* Make product name / meta more premium */
.cart-page .pn{ letter-spacing:.2px; }
.cart-page .sm{ color: rgba(17,17,17,.62) !important; }

/* Qty buttons premium hover */
.cart-page .qbtn{
  border-radius: 999px !important;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.cart-page .qbtn:hover{
  transform: translateY(-1px);
  border-color: rgba(124,58,237,.45);
  box-shadow: 0 14px 28px rgba(17,17,17,.10);
}

/* Remove button highlight */
.cart-page .rm{
  border-radius: 999px !important;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.cart-page .rm:hover{
  transform: rotate(-2deg) translateY(-1px);
  border-color: rgba(255,122,24,.55);
  box-shadow: 0 18px 34px rgba(17,17,17,.12);
}

/* Summary title accent */
.cart-page .sum-title{
  color: rgba(17,17,17,.78) !important;
}
.cart-page .sum-total b{
  background: linear-gradient(90deg, #7c3aed, #ff7a18);
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
  font-weight: 900;
}

/* Top action buttons: make last one (Checkout) primary */
.cart-page .cart-actions > *{
  border-radius: 999px;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.cart-page .cart-actions > *:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(17,17,17,.10);
}
.cart-page .cart-actions > *:last-child{
  background: linear-gradient(90deg, #ff7a18, #7c3aed) !important;
  color:#fff !important;
  border: 0 !important;
}

/* Summary buttons: first button primary (Proceed), second ghost */
.cart-page .cart-summary button,
.cart-page .cart-summary a{
  border-radius: 999px;
}
.cart-page .cart-summary button:first-child,
.cart-page .cart-summary a:first-child{
  background: linear-gradient(90deg, #ff7a18, #7c3aed) !important;
  color:#fff !important;
  border: 0 !important;
}

/* Mobile touch spacing */
@media(max-width:560px){
  .cart-page .cart-table{ padding: 12px; }
  .cart-page .ct-title{ font-size: 34px; }
  .cart-page .qbtn{ width: 40px; height: 40px; }
}
/* =========================================================
   CART TABLE — PRO LOOK (NO HTML CHANGE)
   Paste at the VERY END of pages-cart.css
========================================================= */

/* Make overall cart typography more professional (less bold) */
.cart-page .pn{ font-weight:700 !important; letter-spacing:.12px; }
.cart-page .row{ font-weight:500; }
.cart-page .qval{ font-weight:700 !important; }
.cart-page .sum-title{ font-weight:800 !important; }
.cart-page .sum-row b{ font-weight:700 !important; }

/* Product meta (SKU + Size) ko mini-table style */
.cart-page .sm{
  font-weight:500 !important;
  color: rgba(17,17,17,.68) !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 10px;
  border: 1px solid rgba(17,17,17,.14);
  background: rgba(255,255,255,.78);
  margin-top: 6px;
  width: fit-content;
}

/* Label (Size:) ko heavy bold na rakho */
.cart-page .sm b{
  font-weight:600 !important;
  color: rgba(17,17,17,.78) !important;
}

/* Cart rows ko more "table" feel */
.cart-page .cart-table{
  padding: 0 !important;            /* before padding remove */
  background: transparent;
  border: 1px solid rgba(17,17,17,.24) !important;
  border-radius: 16px;
  overflow: hidden;
}

.cart-page .row{
  padding: 14px 16px !important;
  border-bottom: 1px solid rgba(17,17,17,.10) !important;
  background: rgba(255,255,255,.82);
}

.cart-page .row:nth-child(even){
  background: rgba(255,255,255,.68);
}

/* columns alignment */
.cart-page .row > :nth-child(2),
.cart-page .row > :nth-child(4){
  font-weight:600;
}

/* qty controls slightly lighter */
.cart-page .qbtn{
  font-weight:800 !important;
}

/* Remove X button less harsh */
.cart-page .rm{
  border-color: rgba(17,17,17,.14) !important;
}

/* Mobile: meta chips wrap nicely */
@media(max-width:560px){
  .cart-page .sm{
    max-width: 100%;
    white-space: normal;
  }
}