/* =============================================================================
   Custom Cart UI v1.3
   Reference layout:
   - White page background
   - Each product = bordered white card
   - Card row: [IMAGE (full height)] [CONTROLS COLUMN outside image]
   - Controls col: X (no box, plain ×), size badge, swatch, +/qty/−, refresh
   - Footer: white, thin top border, category + name left, price right
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700&family=DM+Sans:wght@300;400;500&display=swap');

/* ─── Variables ──────────────────────────────────────────────────────────── */
.ccu-wrap {
  --bg:        #ffffff;
  --card:      #ffffff;
  --border:    #e2e2e2;
  --text:      #111111;
  --muted:     #999999;
  --btn-dis:   #cccccc;
  --fh:        'Barlow Condensed', sans-serif;
  --fb:        'DM Sans', sans-serif;
  --ease:      0.18s ease;

  font-family: var(--fb);
  color:       var(--text);
  background:  var(--bg);
  padding:     32px 28px 64px;
  max-width:   1300px;
  margin:      0 auto;
  box-sizing:  border-box;
}

*, *::before, *::after { box-sizing: inherit; }

/* ─── Tabs ───────────────────────────────────────────────────────────────── */
.ccu-tabs {
  display:     flex;
  align-items: center;
  gap:         0;
  margin-bottom: 0;
}

.ccu-tab {
  font-family:    var(--fh);
  font-size:      12px;
  font-weight:    700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background:     none;
  border:         none;
  border-bottom:  2px solid transparent;
  cursor:         pointer;
  padding:        8px 20px 8px 0;
  color:          var(--muted);
  text-decoration: none;
  display:         inline-flex;
  align-items:     center;
  gap:             7px;
  transition:      color var(--ease);
}

/* Active tab: bordered box */
.ccu-tab--active {
  color:       var(--text);
  border:      1px solid var(--border);
  padding:     7px 14px;
  background:  #fff;
}

/* Favourites tab */
.ccu-tab--link { padding-left: 16px; }

.ccu-tab--link::before {
  content:       '';
  width:         12px;
  height:        12px;
  border:        1px solid currentColor;
  border-radius: 50%;
  display:       inline-block;
  flex-shrink:   0;
  opacity:       0.5;
}

.ccu-tab:hover { color: var(--text); }

.ccu-divider {
  height:        1px;
  background:    var(--border);
  margin-bottom: 24px;
}

/* ─── Page layout ────────────────────────────────────────────────────────── */
.ccu-layout {
  display:     flex;
  gap:         28px;
  align-items: flex-start;
}

.ccu-product-list {
  flex:      1 1 0;
  min-width: 0;
}

/* ─── 2-column product grid ──────────────────────────────────────────────── */
.ccu-grid {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   16px;
}

.ccu-grid-divider {
  height:     1px;
  background: var(--border);
  margin-top: 12px;
}

/* ─── Empty state ────────────────────────────────────────────────────────── */
.ccu-empty {
  padding:    60px 0;
  text-align: center;
}
.ccu-empty p { font-size: 14px; color: var(--muted); margin-bottom: 18px; }
.ccu-return-btn {
  font-family:     var(--fh);
  font-size:       12px;
  font-weight:     700;
  letter-spacing:  0.1em;
  text-transform:  uppercase;
  padding:         10px 26px;
  background:      var(--text);
  color:           #fff;
  text-decoration: none;
  display:         inline-block;
  transition:      opacity var(--ease);
}
.ccu-return-btn:hover { opacity: 0.75; }

/* ─── Product card ───────────────────────────────────────────────────────── */
/*
  Structure:
  .ccu-product-card  (border, white bg)
    .ccu-card-body   (flex row: image | controls)
      .ccu-img-wrap  (fills remaining space)
      .ccu-product-controls  (fixed-width col, NO bg, outside the image)
    .ccu-card-footer (border-top, category + name + price)
*/
.ccu-product-card {
  border:         1px solid var(--border);
  background:     var(--card);
  display:        flex;
  flex-direction: column;
}

/* Body row: image left, controls right */
.ccu-card-body {
  display: flex;
  flex:    1 1 auto;
}

/* Image — fills left portion */
.ccu-img-wrap {
  flex:         1 1 0;
  min-width:    0;
  aspect-ratio: 2 / 3;
  overflow:     hidden;
  background:   #ffffff;
}

.ccu-img-wrap img,
.ccu-product-img {
  width:           100%;
  height:          100%;
  object-fit:      cover;
  object-position: center top;
  display:         block;
}

/* Controls column — sits OUTSIDE the image, to its right */
.ccu-product-controls {
  width:          48px;
  flex-shrink:    0;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  padding:        10px 0 12px;
  gap:            8px;
  background:     #ffffff;
  border-left:    1px solid var(--border);
}

/* X remove — plain text symbol, no box */
.ccu-remove-btn {
  background:  none;
  border:      none;
  cursor:      pointer;
  font-size:   16px;
  line-height: 1;
  color:       var(--muted);
  padding:     0;
  width:       32px;
  height:      24px;
  display:     flex;
  align-items: center;
  justify-content: center;
  transition:  color var(--ease);
  flex-shrink: 0;
}
.ccu-remove-btn:hover { color: var(--text); }

/* Size badge */
.ccu-attr-badge {
  font-family:    var(--fh);
  font-size:      12px;
  font-weight:    700;
  letter-spacing: 0.05em;
  background:     #fff;
  border:         1px solid var(--border);
  padding:        3px 6px;
  min-width:      28px;
  text-align:     center;
}

/* Colour swatch */
.ccu-attr-swatch {
  width:       26px;
  height:      26px;
  border:      1px solid rgba(0,0,0,0.2);
  flex-shrink: 0;
}

/* Other variation labels */
.ccu-attr-other {
  font-size:   10px;
  color:       var(--muted);
  text-align:  center;
  line-height: 1.3;
}

/* Quantity block */
.ccu-qty-wrap {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  border:         1px solid var(--border);
  width:          30px;
  background:     #fff;
}

.ccu-qty-btn {
  width:           30px;
  height:          24px;
  background:      none;
  border:          none;
  cursor:          pointer;
  font-size:       15px;
  line-height:     1;
  color:           var(--text);
  display:         flex;
  align-items:     center;
  justify-content: center;
  transition:      background var(--ease);
  padding:         0;
}
.ccu-qty-btn:hover { background: #f5f5f5; }

.ccu-qty-val {
  font-family:     var(--fh);
  font-size:       13px;
  font-weight:     600;
  width:           30px;
  height:          28px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  border-top:      1px solid var(--border);
  border-bottom:   1px solid var(--border);
  user-select:     none;
}

/* Refresh */
.ccu-refresh-btn {
  width:           30px;
  height:          30px;
  background:      none;
  border:          none;
  cursor:          pointer;
  color:           var(--muted);
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         0;
  transition:      color var(--ease);
}
.ccu-refresh-btn:hover { color: var(--text); }
.ccu-refresh-btn.spinning svg { animation: ccu-spin 0.55s linear infinite; }
@keyframes ccu-spin { to { transform: rotate(360deg); } }

/* Card footer — white, thin top border */
.ccu-card-footer {
  border-top:  1px solid var(--border);
  background:  #ffffff;
  padding:     10px 12px 12px;
  display:     flex;
  align-items: flex-end;
  justify-content: space-between;
  gap:         8px;
}

.ccu-product-info {
  display:        flex;
  flex-direction: column;
  gap:            2px;
  flex:           1 1 0;
  min-width:      0;
}

.ccu-product-category {
  font-size:   11px;
  color:       var(--muted);
  font-weight: 300;
}

.ccu-product-name {
  font-family:    var(--fh);
  font-size:      13px;
  font-weight:    700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height:    1.25;
  white-space:    nowrap;
  overflow:       hidden;
  text-overflow:  ellipsis;
}

.ccu-product-price {
  font-family:    var(--fh);
  font-size:      13px;
  font-weight:    500;
  letter-spacing: 0.03em;
  white-space:    nowrap;
  flex-shrink:    0;
}

/* Loading */
.ccu-product-card.ccu-loading {
  opacity:        0.5;
  pointer-events: none;
}

/* ─── Order Summary ──────────────────────────────────────────────────────── */
.ccu-summary {
  width:       280px;
  flex-shrink: 0;
  background:  #fff;
  border:      1px solid var(--border);
  padding:     22px 20px 20px;
  position:    sticky;
  top:         24px;
}

.ccu-summary-title {
  font-family:    var(--fh);
  font-size:      13px;
  font-weight:    700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin:         0 0 16px 0;
}

.ccu-summary-row {
  display:         flex;
  justify-content: space-between;
  align-items:     baseline;
  font-size:       13px;
  margin-bottom:   10px;
}

.ccu-summary-row span:first-child { color: var(--muted); font-weight: 300; }
.ccu-summary-row span:last-child  { font-weight: 500; }

.ccu-shipping-free    { color: #2e7d32; font-weight: 700; font-family: var(--fh); letter-spacing: 0.06em; font-size: 12px; }
.ccu-shipping-pending { color: var(--muted); font-style: italic; font-size: 11px; }

.ccu-summary-divider { height: 1px; background: var(--border); margin: 12px 0; }

.ccu-summary-total {
  display:         flex;
  justify-content: space-between;
  align-items:     baseline;
  margin-bottom:   18px;
}

.ccu-total-label {
  font-family:    var(--fh);
  font-size:      14px;
  font-weight:    700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ccu-total-label small {
  font-size:      10px;
  font-weight:    400;
  color:          var(--muted);
  letter-spacing: 0;
  margin-left:    3px;
}

.ccu-summary-total-val {
  font-family: var(--fh);
  font-size:   16px;
  font-weight: 700;
}

/* Terms */
.ccu-terms-wrap { margin-bottom: 14px; }

.ccu-terms-label {
  display:     flex;
  align-items: center;
  gap:         9px;
  cursor:      pointer;
  font-size:   11px;
  color:       var(--muted);
  line-height: 1.4;
  user-select: none;
}

.ccu-terms-checkbox { position: absolute; opacity: 0; width: 0; height: 0; }

.ccu-checkbox-custom {
  width:        14px;
  height:       14px;
  border:       1px solid var(--border);
  flex-shrink:  0;
  background:   #fff;
  position:     relative;
  transition:   background var(--ease), border-color var(--ease);
}

.ccu-terms-checkbox:checked + .ccu-checkbox-custom {
  background:   var(--text);
  border-color: var(--text);
}

.ccu-terms-checkbox:checked + .ccu-checkbox-custom::after {
  content:     '';
  position:    absolute;
  left:        3px;
  top:         1px;
  width:       5px;
  height:      8px;
  border:      2px solid white;
  border-top:  none;
  border-left: none;
  transform:   rotate(45deg);
}

/* Continue button */
.ccu-continue-btn {
  width:          100%;
  padding:        12px;
  font-family:    var(--fh);
  font-size:      12px;
  font-weight:    700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background:     var(--btn-dis);
  color:          var(--text);
  border:         none;
  cursor:         not-allowed;
  transition:     background var(--ease), color var(--ease);
}
.ccu-continue-btn:not([disabled]) { background: var(--text); color: #fff; cursor: pointer; }
.ccu-continue-btn:not([disabled]):hover { background: #333; }

/* WC price */
.ccu-wrap .woocommerce-Price-amount { font-family: inherit; font-size: inherit; font-weight: inherit; }

/* ─── Responsive ─────────────────────────────────────────────────────────── */
@media ( max-width: 1024px ) {
  .ccu-layout  { flex-direction: column; }
  .ccu-summary { width: 100%; position: static; }
}

@media ( max-width: 640px ) {
  .ccu-wrap { padding: 18px 12px 40px; }
  .ccu-grid { grid-template-columns: 1fr; gap: 14px; }
}