/* OnlyCards TCG — panier accessible, compact et responsive */
.checkout-page:has(#cartPageItems){max-width:1180px;margin-inline:auto;color:#f7f3e9}
.checkout-page:has(#cartPageItems)>h1{font-size:clamp(2.6rem,7vw,5.2rem);line-height:.96;letter-spacing:-.055em;margin:.2rem 0 1rem}
.checkout-page:has(#cartPageItems)>h1 em{color:#e9bd59;font-family:"Playfair Display",serif;font-weight:500}
.checkout-page:has(#cartPageItems)>#cartIntro{font-size:1rem;line-height:1.65;margin:0 0 2rem;max-width:620px}
.checkout-page:has(#cartPageItems) .cart-items{display:grid;gap:12px;min-width:0}
.checkout-page:has(#cartPageItems) .cart-row{
 display:grid;grid-template-columns:76px minmax(0,1fr) auto;align-items:center;gap:16px;
 padding:15px 17px;border:1px solid rgba(226,184,83,.2);border-radius:17px;
 background:linear-gradient(115deg,rgba(255,255,255,.045),rgba(255,255,255,.018));
 min-width:0;color:#f7f3e9;font-size:14px;overflow:hidden;
}
.checkout-page:has(#cartPageItems) .cart-product-image{
 display:block!important;visibility:visible;width:76px!important;height:106px!important;
 min-width:0;max-width:76px;object-fit:contain;object-position:center;
 background:transparent!important;border:0!important;border-radius:0!important;
 box-shadow:none!important;padding:0!important;margin:0!important;flex:none;
}
.checkout-page:has(#cartPageItems) .cart-row>div:nth-child(2){display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-width:0}
.checkout-page:has(#cartPageItems) .cart-row>div:nth-child(2)>strong{font-size:1.02rem;line-height:1.3;overflow-wrap:anywhere}
.checkout-page:has(#cartPageItems) .cart-row small{display:block;color:#aeb0bc;font-size:.82rem;line-height:1.45;margin:0;overflow-wrap:anywhere}
.checkout-page:has(#cartPageItems) .cart-quantity{margin-top:6px;gap:9px;padding:3px 5px;border-color:rgba(226,184,83,.28);background:rgba(0,0,0,.18)}
.checkout-page:has(#cartPageItems) .cart-quantity button{width:31px;height:31px;min-height:31px;background:rgba(255,255,255,.08);color:#f7f3e9}
.checkout-page:has(#cartPageItems) .cart-quantity button:disabled{opacity:.35}
.checkout-page:has(#cartPageItems) .cart-row>div:last-child{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:10px;min-width:0;white-space:nowrap}
.checkout-page:has(#cartPageItems) .cart-row>div:last-child>strong{color:#e9bd59;font-size:1.02rem;font-variant-numeric:tabular-nums}
.checkout-page:has(#cartPageItems) .cart-remove{min-height:32px;padding:4px 8px;border:1px solid rgba(255,255,255,.12);border-radius:8px;background:transparent;color:#b9bac3;font:inherit;font-size:.75rem;cursor:pointer}
.checkout-page:has(#cartPageItems) .cart-remove:hover{border-color:#e9bd59;color:#e9bd59}
.checkout-page:has(#cartPageItems) #cartPageSummary{margin-top:18px;padding:23px;border:1px solid rgba(226,184,83,.24);border-radius:18px;background:rgba(255,255,255,.025);color:#f7f3e9}
.checkout-page:has(#cartPageItems) #cartPageSummary h2{margin:0 0 22px;font-size:1.4rem}
.checkout-page:has(#cartPageItems) #cartPageSummary>div{display:flex;justify-content:space-between;gap:15px;padding:0 0 18px;border:0;color:#c5c5cf}
.checkout-page:has(#cartPageItems) #cartPageSubtotal{color:#e9bd59;font-size:1.35rem}
.checkout-page:has(#cartPageItems) #shippingHint{padding-top:14px;border-top:1px solid rgba(255,255,255,.1);font-size:.82rem}
.checkout-page:has(#cartPageItems) #goPayment{width:100%;margin:8px 0 12px;border:0;border-radius:12px;background:linear-gradient(110deg,#f4cf6a,#d9ac3e);color:#17151a;font-size:.9rem}
.checkout-page:has(#cartPageItems) #keepShopping{color:#e9bd59;border-bottom-color:rgba(233,189,89,.4)}
.checkout-page:has(#cartPageItems) #cartPageEmpty{margin:20px 0;background:rgba(255,255,255,.025);border-color:rgba(226,184,83,.25);color:#f7f3e9}
@media(min-width:900px){
 .checkout-page:has(#cartPageItems){display:grid;grid-template-columns:minmax(0,1fr) 340px;column-gap:28px;align-items:start}
 .checkout-page:has(#cartPageItems)>#cartEyebrow,.checkout-page:has(#cartPageItems)>h1,.checkout-page:has(#cartPageItems)>#cartIntro{grid-column:1/-1}
 .checkout-page:has(#cartPageItems) #cartPageItems{grid-column:1;grid-row:4 / span 2}
 .checkout-page:has(#cartPageItems) #cartPageEmpty{grid-column:1}
 .checkout-page:has(#cartPageItems) #cartPageSummary{grid-column:2;grid-row:4 / span 2;position:sticky;top:100px;margin-top:0}
}
@media(max-width:560px){
 .checkout-page:has(#cartPageItems){padding:42px 16px 65px}
 .checkout-page:has(#cartPageItems)>h1{font-size:clamp(2.55rem,12vw,4rem);margin-bottom:12px}
 .checkout-page:has(#cartPageItems)>#cartIntro{font-size:.92rem;margin-bottom:1.4rem}
 .checkout-page:has(#cartPageItems) .cart-row{grid-template-columns:64px minmax(0,1fr);gap:12px;padding:12px;border-radius:14px;align-items:start}
 .checkout-page:has(#cartPageItems) .cart-product-image{width:64px!important;height:91px!important;max-width:64px}
 .checkout-page:has(#cartPageItems) .cart-row>div:nth-child(2){padding-top:2px}
 .checkout-page:has(#cartPageItems) .cart-row>div:nth-child(2)>strong{font-size:.96rem}
 .checkout-page:has(#cartPageItems) .cart-row small{font-size:.76rem}
 .checkout-page:has(#cartPageItems) .cart-quantity{margin-top:5px}
 .checkout-page:has(#cartPageItems) .cart-quantity button{width:29px;height:29px;min-height:29px}
 .checkout-page:has(#cartPageItems) .cart-row>div:last-child{grid-column:2;flex-direction:row;align-items:center;justify-content:space-between;width:100%;padding-top:7px;border-top:1px solid rgba(255,255,255,.08);white-space:normal}
 .checkout-page:has(#cartPageItems) .cart-row>div:last-child>strong{font-size:.95rem}
 .checkout-page:has(#cartPageItems) .cart-remove{min-height:30px;font-size:.72rem}
 .checkout-page:has(#cartPageItems) #cartPageSummary{padding:18px;margin-top:16px}
 .checkout-page:has(#cartPageItems) #cartPageSummary h2{font-size:1.25rem}
}

/* Finition qualité : clavier, tactile, petits écrans et préférences de mouvement */
.checkout-page:has(#cartPageItems) .cart-quantity button,
.checkout-page:has(#cartPageItems) .cart-remove,
.checkout-page:has(#cartPageItems) #goPayment {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.checkout-page:has(#cartPageItems) .cart-quantity button:focus-visible,
.checkout-page:has(#cartPageItems) .cart-remove:focus-visible,
.checkout-page:has(#cartPageItems) #goPayment:focus-visible,
.checkout-page:has(#cartPageItems) #keepShopping:focus-visible {
  outline: 3px solid #f4cf6a;
  outline-offset: 3px;
}
.checkout-page:has(#cartPageItems) .cart-row > div:nth-child(2) { overflow-wrap: anywhere; }
.checkout-page:has(#cartPageItems) .cart-row > div:last-child > strong { line-height: 1.35; }
.checkout-page:has(#cartPageItems) #goPayment { min-height: 48px; text-align: center; }
.checkout-page:has(#cartPageItems) .cart-quantity button { min-width: 32px; }
.checkout-page:has(#cartPageItems) .cart-product-image.image-unavailable {
  object-fit: contain;
  border: 1px dashed rgba(233,189,89,.35) !important;
  background: rgba(255,255,255,.035) !important;
}
@media (max-width: 360px) {
  .checkout-page:has(#cartPageItems) { padding-inline: 12px; }
  .checkout-page:has(#cartPageItems) .cart-row { grid-template-columns: 54px minmax(0,1fr); gap: 9px; padding: 10px; }
  .checkout-page:has(#cartPageItems) .cart-product-image { width: 54px !important; height: 78px !important; max-width: 54px; }
  .checkout-page:has(#cartPageItems) #cartPageSummary { padding: 15px; }
  .checkout-page:has(#cartPageItems) #cartPageSubtotal { font-size: 1.12rem; }
}
@media (prefers-reduced-motion: reduce) {
  .checkout-page:has(#cartPageItems) *, .checkout-page:has(#cartPageItems) *::before, .checkout-page:has(#cartPageItems) *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}


/* FIX mobile overflow: constrain every cart descendant to the viewport. */
html:has(#cartPageItems), body:has(#cartPageItems) {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}
body:has(#cartPageItems) main,
body:has(#cartPageItems) .checkout-page,
body:has(#cartPageItems) .checkout-page > *,
.checkout-page:has(#cartPageItems) .cart-items,
.checkout-page:has(#cartPageItems) .cart-row,
.checkout-page:has(#cartPageItems) #cartPageSummary {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
}
@media (max-width: 700px) {
  .checkout-page:has(#cartPageItems) {
    width: 100%;
    max-width: 100%;
    padding-left: clamp(12px, 4vw, 20px);
    padding-right: clamp(12px, 4vw, 20px);
    overflow-x: clip;
  }
  .checkout-page:has(#cartPageItems) > h1 {
    width: 100%;
    max-width: 100%;
    font-size: clamp(2.2rem, 10.5vw, 3.8rem);
    line-height: .98;
    letter-spacing: -.045em;
    overflow-wrap: anywhere;
    hyphens: auto;
  }
  .checkout-page:has(#cartPageItems) > h1 em {
    display: inline;
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  .checkout-page:has(#cartPageItems) > #cartIntro {
    width: 100%;
    max-width: 100%;
    font-size: clamp(.9rem, 3.8vw, 1rem);
    overflow-wrap: anywhere;
  }
  .checkout-page:has(#cartPageItems) .cart-row {
    grid-template-columns: clamp(52px, 17vw, 76px) minmax(0, 1fr);
    gap: clamp(8px, 2.8vw, 12px);
    padding: clamp(10px, 3vw, 14px);
  }
  .checkout-page:has(#cartPageItems) .cart-product-image {
    width: clamp(52px, 17vw, 76px) !important;
    max-width: 100%;
    height: auto !important;
    aspect-ratio: 3 / 4;
    object-fit: contain;
  }
  .checkout-page:has(#cartPageItems) .cart-row > div:nth-child(2) {
    min-width: 0;
    width: 100%;
    overflow-wrap: anywhere;
  }
  .checkout-page:has(#cartPageItems) .cart-row > div:nth-child(2) > strong,
  .checkout-page:has(#cartPageItems) .cart-row small {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: normal;
  }
  .checkout-page:has(#cartPageItems) .cart-quantity {
    max-width: 100%;
    width: max-content;
    gap: clamp(5px, 2vw, 9px);
  }
  .checkout-page:has(#cartPageItems) .cart-row > div:last-child {
    grid-column: 2;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    flex-wrap: wrap;
    gap: 8px;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .checkout-page:has(#cartPageItems) .cart-row > div:last-child > strong {
    white-space: nowrap;
  }
  .checkout-page:has(#cartPageItems) #cartPageSummary {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: clamp(14px, 4vw, 20px);
  }
  .checkout-page:has(#cartPageItems) #cartPageSummary > div {
    flex-wrap: wrap;
    align-items: baseline;
    min-width: 0;
    gap: 8px 12px;
  }
  .checkout-page:has(#cartPageItems) #cartPageSubtotal {
    font-size: clamp(1.05rem, 5vw, 1.35rem);
    overflow-wrap: anywhere;
  }
  .checkout-page:has(#cartPageItems) #shippingHint {
    overflow-wrap: anywhere;
  }
}


/* Final mobile heading fix: force wrapping even when global display rules conflict. */
@media screen and (max-width: 700px) {
  html:has(#cartPageItems) body .checkout-page#cartPageItems,
  html:has(#cartPageItems) body .checkout-page:has(#cartPageItems) {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: clip !important;
  }
  html:has(#cartPageItems) body .checkout-page:has(#cartPageItems) > h1#cartTitle {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    font-size: clamp(1.8rem, 9vw, 3.2rem) !important;
    line-height: 1 !important;
    letter-spacing: -.04em !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }
  html:has(#cartPageItems) body .checkout-page:has(#cartPageItems) > h1#cartTitle em {
    display: block !important;
    max-width: 100% !important;
    font-size: 1em !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }
  html:has(#cartPageItems) body .checkout-page:has(#cartPageItems) > p#cartIntro {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }
  html:has(#cartPageItems) body .checkout-page:has(#cartPageItems) .cart-row > div,
  html:has(#cartPageItems) body .checkout-page:has(#cartPageItems) .cart-row small {
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
}


/* Cart: use the compact single-column layout up to tablet / mobile desktop-mode widths. */
@media screen and (max-width: 1000px) {
  body:has(#cartPageItems) main { width: 100%; max-width: 100%; min-width: 0; }
  body:has(#cartPageItems) .checkout-page:has(#cartPageItems) {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    padding: clamp(24px, 5vw, 48px) clamp(16px, 5vw, 32px) 56px !important;
    overflow-x: clip !important;
  }
  body:has(#cartPageItems) .checkout-page:has(#cartPageItems) > #cartEyebrow,
  body:has(#cartPageItems) .checkout-page:has(#cartPageItems) > #cartTitle,
  body:has(#cartPageItems) .checkout-page:has(#cartPageItems) > #cartIntro,
  body:has(#cartPageItems) .checkout-page:has(#cartPageItems) > #cartPageItems,
  body:has(#cartPageItems) .checkout-page:has(#cartPageItems) > #cartPageSummary {
    grid-column: auto !important;
    grid-row: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  body:has(#cartPageItems) .checkout-page:has(#cartPageItems) > #cartTitle {
    display: block !important;
    font-size: clamp(2.35rem, 8vw, 4.4rem) !important;
    line-height: .98 !important;
    letter-spacing: -.045em !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
  }
  body:has(#cartPageItems) .checkout-page:has(#cartPageItems) > #cartTitle em {
    display: block !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
  body:has(#cartPageItems) .checkout-page:has(#cartPageItems) > #cartIntro {
    font-size: clamp(1rem, 2.5vw, 1.25rem) !important;
    line-height: 1.65 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
  body:has(#cartPageItems) .checkout-page:has(#cartPageItems) .cart-row {
    display: grid !important;
    grid-template-columns: 76px minmax(0, 1fr) !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 12px !important;
    overflow: hidden !important;
  }
  body:has(#cartPageItems) .checkout-page:has(#cartPageItems) .cart-product-image {
    width: 76px !important;
    max-width: 76px !important;
    height: 106px !important;
    object-fit: contain !important;
  }
  body:has(#cartPageItems) .checkout-page:has(#cartPageItems) .cart-row > div:nth-child(2) {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }
  body:has(#cartPageItems) .checkout-page:has(#cartPageItems) .cart-row > div:nth-child(2) > strong,
  body:has(#cartPageItems) .checkout-page:has(#cartPageItems) .cart-row small {
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
  body:has(#cartPageItems) .checkout-page:has(#cartPageItems) .cart-row > div:last-child {
    grid-column: 2 !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
    gap: 8px !important;
    padding-top: 10px !important;
    border-top: 1px solid rgba(255,255,255,.1) !important;
  }
  body:has(#cartPageItems) .checkout-page:has(#cartPageItems) #cartPageSummary {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-top: 16px !important;
    padding: clamp(16px, 4vw, 24px) !important;
  }
  body:has(#cartPageItems) .checkout-page:has(#cartPageItems) #cartPageSummary > div {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 8px 16px !important;
  }
  body:has(#cartPageItems) .checkout-page:has(#cartPageItems) #cartPageSubtotal {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    font-size: clamp(1.15rem, 4vw, 1.5rem) !important;
  }
}


/* Product detail links in cart: preserve the card design while making the image/name tappable. */
.checkout-page:has(#cartPageItems) .cart-product-link {
  color: inherit;
  text-decoration: none;
  min-width: 0;
}
.checkout-page:has(#cartPageItems) .cart-product-image-link {
  display: block;
  width: 100%;
  max-width: 76px;
  line-height: 0;
  border-radius: 2px;
}
.checkout-page:has(#cartPageItems) .cart-product-name-link {
  display: inline;
  color: inherit;
  text-decoration: none;
  text-underline-offset: .18em;
  text-decoration-color: transparent;
  transition: color .15s ease, text-decoration-color .15s ease;
}
.checkout-page:has(#cartPageItems) .cart-product-link:hover,
.checkout-page:has(#cartPageItems) .cart-product-link:focus-visible {
  color: #e9bd59;
  text-decoration: underline;
  text-decoration-color: currentColor;
}
.checkout-page:has(#cartPageItems) .cart-product-link:focus-visible {
  outline: 2px solid #e9bd59;
  outline-offset: 3px;
  border-radius: 3px;
}
@media (max-width: 1000px) {
  .checkout-page:has(#cartPageItems) .cart-product-image-link { max-width: 76px; }
}