/* ============================================================
   LUMÉA — cart.css
   Only what the cart page adds on top of pages.css (loaded by
   layout/theme.html.twig on every page, so every rule is scoped
   to the cart page). Colours come from the palette tokens in
   theme.css (--bg, --line, --gold-deep, --ink-soft…), so all
   three palettes work without a second set of rules.
   ============================================================ */

/* ---------- page head ---------- */
.cart-head .crumbs{justify-content:center;color:var(--ink-soft)}
.cart-head .h1{margin-top:.5rem}

/* ---------- page body ---------- */
.cart-page{padding-bottom:clamp(3rem,7vw,5.5rem)}
.cart-main{min-width:0} /* a table inside a grid column must be allowed to shrink */

/* ---------- line items ---------- */
.cart-page .ci-media{
  flex:none;display:block;width:84px;height:100px;
  overflow:hidden;background:var(--bg-tile);
}
.cart-page .ci-media img{display:block;width:100%;height:100%;object-fit:cover}
.cart-page .ci-info{min-width:0}

/* variant / SKU / unit price: one quiet meta line, separated by space, not dots */
.cart-page .ci-cat{display:flex;flex-wrap:wrap;gap:.1rem .95rem;color:var(--ink-soft)}
.cart-page .ci-cat span{white-space:nowrap}

.cart-page .ci-line-price{font-size:.98rem;font-variant-numeric:tabular-nums;white-space:nowrap}

.cart-page .cart-remove{
  display:inline-flex;align-items:center;gap:.4rem;
  color:var(--ink-soft);cursor:pointer;
}
.cart-page .cart-remove svg{width:13px;height:13px;stroke:currentColor;flex:none}
.cart-page .cart-remove:hover{color:var(--danger)}

/* the platform number input keeps its native spinners out of the frame */
.cart-page .qty input{-moz-appearance:textfield;appearance:textfield;font-variant-numeric:tabular-nums}
.cart-page .qty input::-webkit-outer-spin-button,
.cart-page .qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.cart-page .qty button svg{width:12px;height:12px;stroke:currentColor}

/* the column labels are read as text, so they need AA contrast */
.cart-page .cart-table th{color:var(--ink-soft)}

/* first and last cells sit flush with the table edges */
.cart-page .cart-table th:first-child,
.cart-page .cart-table td:first-child{padding-left:0}
.cart-page .cart-table th:last-child,
.cart-page .cart-table td:last-child{padding-right:0}

/* ---------- under the table ---------- */
.cart-page .cart-foot{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:1rem;padding-top:1.4rem;
}
.cart-page .text-link--back{color:var(--ink)}
.cart-page .text-link--back:hover{color:var(--gold-deep)}
.cart-page .text-link--back svg{transform:rotate(180deg)}
.cart-page .text-link--back:hover svg{transform:rotate(180deg) translateX(4px)}

/* ---------- summary ---------- */
.cart-page .summary .sum-cut{color:var(--success)}
@supports (color: color-mix(in srgb, red, blue)){
  /* the success green is under AA on white at this size; darken it with ink */
  .cart-page .summary .sum-cut{color:color-mix(in srgb, var(--success) 78%, var(--ink))}
}
.cart-page .summary .sum-note{
  font-size:.78rem;line-height:1.55;color:var(--ink-soft);
  margin-top:.9rem;
}
.cart-page .summary-actions{display:grid;gap:.65rem;margin-top:1.5rem}
.cart-page .summary .cart-note{
  display:flex;align-items:center;justify-content:center;gap:.45rem;
  color:var(--ink-soft);
}
.cart-page .summary .cart-note svg{width:13px;height:13px;flex:none;stroke:currentColor}

/* the amount inside the shipping note is small text: ink instead of gold */
.cart-page .ship-note b{color:var(--ink)}

/* complimentary shipping meter, inside .ship-note */
.cart-page .ship-meter{
  position:relative;display:block;height:3px;margin-top:.6rem;
  background:var(--line);overflow:hidden;
}
.cart-page .ship-meter > span{
  position:absolute;inset:0 auto 0 0;
  background:var(--gold-deep);
}

/* ---------- stock notice ---------- */
.cart-page .form-alert ul{margin:.45rem 0 0 1.1rem;font-size:.85rem;list-style:disc}

/* ---------- related products ---------- */
.cart-related{border-top:1px solid var(--line-soft)}

/* ---------- focus ---------- */
.cart-page :focus-visible,
.cart-head :focus-visible{outline:2px solid var(--gold-deep);outline-offset:2px}

/* ---------- narrow: the table becomes a stack of lines ---------- */
@media (max-width:760px){
  .cart-page .cart-table thead{
    position:absolute;width:1px;height:1px;margin:-1px;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;
  }
  .cart-page .cart-table,
  .cart-page .cart-table tbody,
  .cart-page .cart-table tr,
  .cart-page .cart-table td{display:block;width:100%}

  .cart-page .cart-table tr{padding:1.15rem 0;border-bottom:1px solid var(--line-soft)}
  .cart-page .cart-table td{padding:0;border:0;text-align:left}

  .cart-page .cart-item{align-items:flex-start}
  .cart-page .cart-table td.ci-qty{margin-top:.85rem}
  .cart-page .cart-table td.ci-line{margin-top:.25rem}
  .cart-page .cart-table td.ci-remove{text-align:left;margin-top:.6rem}
}

@media (max-width:600px){
  .cart-page .ci-media{width:64px;height:78px}
  .cart-page .cart-foot{flex-direction:column;align-items:stretch}
  .cart-page .cart-foot .btn{width:100%}
  /* a long label on one line, at 360px */
  .cart-page .summary .btn{font-size:.66rem;letter-spacing:.16em;padding-inline:1rem}
}