/* ============================== THE CART, ON THE NEW SITE SHELL ==============================
   shop/cart2.php (Claude Design "ADAPT Cart"): a dark head with the steps, white lines, a dark summary.
   ============================================================================================= */
body.hp { background: #f5f5f3; }
.ct2 { color: #0a0a0a; font-family: 'Archivo', sans-serif; }
.ct2 h1, .ct2 h2, .ct2 p { margin: 0; }
.ct2-in { width: min(1280px, 100%); margin: 0 auto; padding: 0 var(--gut, clamp(18px, 4vw, 56px)); box-sizing: border-box; position: relative; }
.ct2-eye { font: 800 10px 'Archivo', sans-serif; letter-spacing: .16em; margin-bottom: 6px !important; }
.ct2-eye.is-g { color: #00FF50; }

/* ---- the head ---- */
.ct2-hero { position: relative; overflow: hidden; background: #0a0a0a; color: #f5f5f3; padding: 100px 0 0; }
.ct2-hero::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(-45deg, rgba(0,255,80,.06) 0 2px, transparent 2px 22px); pointer-events: none; }
.ct2-hero-mark { position: absolute; right: -2%; top: 60px; font: 900 clamp(120px, 16vw, 260px)/.8 'Archivo', sans-serif; letter-spacing: -.07em; color: transparent; -webkit-text-stroke: 1px rgba(0,255,80,.24); white-space: nowrap; pointer-events: none; user-select: none; }
.ct2-kick { display: flex; align-items: center; gap: 12px; margin-bottom: 14px !important; font: 800 11px 'Archivo', sans-serif; letter-spacing: .2em; color: #00FF50; }
.ct2-stripe { width: 46px; height: 12px; background: repeating-linear-gradient(-45deg, #00FF50 0 4px, transparent 4px 8px); }
.ct2-back { font: 800 11px 'Archivo', sans-serif; letter-spacing: .16em; color: #f5f5f3 !important; text-decoration: none; }
.ct2-back:hover { color: #00FF50 !important; }
.ct2-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; margin-top: 16px; }
.ct2-head h1 { font: 900 clamp(48px, 6.4vw, 104px)/.84 'Archivo', sans-serif; letter-spacing: -.065em; flex: 1 1 auto; color: #f5f5f3; }
.ct2-cur { display: flex; align-items: center; gap: 10px; }
.ct2-cur > span { font: 800 10px 'Archivo', sans-serif; letter-spacing: .16em; color: #bdbdb8; }
.ct2-cur button { cursor: pointer; padding: 8px 12px; border: 1px solid #3a3a3a; background: transparent; color: #bdbdb8; font: 800 11px 'Archivo', sans-serif; letter-spacing: .1em; }
.ct2-cur button + button { border-left: 0; }
.ct2-cur button.is-on { background: #f5f5f3; color: #0a0a0a; border-color: #f5f5f3; }
.ct2-cur button:focus-visible { outline: 2px solid #00FF50; outline-offset: 2px; }
.ct2-steps { display: flex; list-style: none; margin: 22px 0 0; padding: 0; border-top: 1px solid #2a2a2a; }
.ct2-steps li { flex: 1; display: flex; gap: 10px; align-items: baseline; padding: 12px 0; margin-top: -1px; border-top: 3px solid transparent; color: #77776f; font: 800 11.5px 'Archivo', sans-serif; letter-spacing: .12em; }
.ct2-steps li b { font: 900 12px 'Archivo', sans-serif; letter-spacing: 0; }
.ct2-steps li.is-on { border-top-color: #00FF50; color: #f5f5f3; }

/* ---- the page ---- */
.ct2-page { padding-top: 28px; padding-bottom: 80px; }
.ct2-notice { margin-bottom: 12px !important; padding: 12px 16px; background: #fff6e0; border-left: 4px solid #ffb020; font: 600 13.5px 'Archivo', sans-serif; }
.ct2-body { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 20px; align-items: start; }
.ct2-main { min-width: 0; display: flex; flex-direction: column; gap: 14px; }

.ct2-line { display: grid; grid-template-columns: 260px minmax(0, 1fr); background: #fff; border: 2px solid #0a0a0a; }
.ct2-art { position: relative; min-height: 220px; background: #141414 center/cover; border-right: 2px solid #0a0a0a; }
.ct2-art.has-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,10,10,.85), rgba(10,10,10,.1)); }
.ct2-art:not(.has-img) { background: repeating-linear-gradient(-45deg, #141414 0 3px, #1b1b1b 3px 6px); display: grid; place-items: center; }
.ct2-art-tag { position: absolute; z-index: 1; left: 14px; bottom: 14px; padding: 5px 9px; background: #00FF50; color: #0a0a0a; font: 900 13px 'Archivo', sans-serif; font-style: normal; }
.ct2-art-lab { font: 900 13px 'Archivo', sans-serif; letter-spacing: .14em; color: #77776f; }
.ct2-l { min-width: 0; padding: 20px 22px; display: flex; flex-direction: column; }
.ct2-l-top { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; }
.ct2-l-top > div:first-child { min-width: 0; flex: 1 1 220px; }
.ct2-line .ct2-eye { color: #1f7a37; }
.ct2-l h2 { font: 900 clamp(26px, 2.6vw, 36px)/1 'Archivo', sans-serif; letter-spacing: -.04em; margin-top: 2px; }
.ct2-sub { font: 600 13px 'Archivo', sans-serif; color: #4a4a46; margin-top: 6px !important; }
.ct2-unit { text-align: right; }
.ct2-unit s { display: block; font: 700 13px 'Archivo', sans-serif; color: #77776f; }
.ct2-unit b { display: block; font: 900 26px/1 'Archivo', sans-serif; letter-spacing: -.03em; }
.ct2-unit small { display: block; font: 700 11.5px 'Archivo', sans-serif; color: #4a4a46; margin-top: 4px; }
.ct2-feat { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0; padding: 0; list-style: none; }
.ct2-feat li { display: inline-flex; gap: 6px; align-items: center; padding: 5px 8px; border: 1px solid #0a0a0a; font: 800 11px 'Archivo', sans-serif; }
.ct2-feat li span { color: #1f7a37; }
.ct2-l-foot { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid #e3e2df; }
.ct2-lab { font: 800 10px 'Archivo', sans-serif; letter-spacing: .16em; }
.ct2-step { display: flex; align-items: center; border: 2px solid #0a0a0a; }
.ct2-step a { width: 38px; height: 38px; display: grid; place-items: center; font: 900 18px 'Archivo', sans-serif; color: #0a0a0a !important; text-decoration: none; }
.ct2-step a:hover { background: #00FF50; }
.ct2-step input { width: 34px; border: 0; text-align: center; font: 900 16px 'Archivo', sans-serif; background: transparent; padding: 0; }
.ct2-total { font: 900 18px 'Archivo', sans-serif; }
.ct2-rm { margin-left: auto; font: 800 11px 'Archivo', sans-serif; letter-spacing: .12em; color: #b3261e !important; text-decoration: none; }
.ct2-rm:hover { text-decoration: underline; }
.ct2-note { margin-top: 10px !important; font: 600 12.5px 'Archivo', sans-serif; color: #4a4a46; }
.ct2-disc { display: flex; justify-content: space-between; margin-top: 8px !important; font: 700 13px 'Archivo', sans-serif; color: #1f7a37; }

.ct2-up { display: flex; align-items: center; gap: 16px; padding: 18px 20px; background: #0a0a0a; color: #f5f5f3; border-left: 8px solid #00FF50; }
.ct2-up > div { min-width: 0; flex: 1; }
.ct2-up p:last-child { font: 600 12.5px/1.45 'Archivo', sans-serif; color: #bdbdb8; }
.ct2-up p:last-child b { display: block; font: 900 20px/1.15 'Archivo', sans-serif; letter-spacing: -.02em; color: #f5f5f3; margin-bottom: 5px; }
.ct2-incl, .ct2-policy { padding: 16px 18px; border: 2px solid #0a0a0a; }
.ct2-incl { background: #00FF50; }
.ct2-incl p:last-child { font: 900 17px/1.2 'Archivo', sans-serif; }
.ct2-policy { background: #fff; }
.ct2-policy p:last-child { font: 600 13px/1.5 'Archivo', sans-serif; color: #2a2a2a; }
.ct2-notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }

.ct2-btn { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 13px 16px; border: 2px solid transparent; font: 800 11.5px 'Archivo', sans-serif; letter-spacing: .12em; text-decoration: none !important; white-space: nowrap; }
.ct2-btn.is-g { background: #00FF50; color: #0a0a0a !important; }
.ct2-btn.is-g:hover { background: #f5f5f3; }
.ct2-btn.is-line { border-color: currentColor; background: transparent; color: inherit; }
.ct2-btn.sm { padding: 0 12px; height: 40px; }
.ct2-btn[disabled] { opacity: .6; cursor: wait; }
.ct2-empty { padding: clamp(30px, 5vw, 56px); background: #fff; border: 2px dashed #0a0a0a; }
.ct2-empty p { font: 900 32px 'Archivo', sans-serif; letter-spacing: -.04em; margin-bottom: 18px !important; }
.ct2-empty .ct2-btn.is-g { border-color: #0a0a0a; }
.ct2-btns { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---- the summary ---- */
.ct2-sum { min-width: 0; position: sticky; top: 90px; background: #0a0a0a; color: #f5f5f3; padding: 0 20px 18px; }
.ct2-sum > .ct2-eye { margin: 0 -20px 0 !important; padding: 16px 20px; border-bottom: 1px solid #262626; color: #00FF50; font-size: 10.5px; letter-spacing: .18em; }
.ct2-rows { padding: 6px 0 4px; }
.ct2-rows p { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid #1e1e1e; font: 700 14px 'Archivo', sans-serif; }
.ct2-rows p span { color: #d0d0cc; }
.ct2-rows b { font: 800 14px 'Archivo', sans-serif; }
.ct2-rows .is-disc b { color: #00FF50; }
.ct2-rows b.is-muted { color: #9a9a95; }
.ct2-promo-btn { margin: 12px 0; padding: 0 0 2px; border: 0; border-bottom: 2px solid #00FF50; background: none; color: #f5f5f3; cursor: pointer; font: 800 11px 'Archivo', sans-serif; letter-spacing: .12em; }
.ct2-promo { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 12px; border-bottom: 1px solid #1e1e1e; }
.ct2-promo[hidden] { display: none; }
.ct2-promo input { flex: 1; min-width: 0; height: 40px; background: #141414; border: 1px solid #3a3a3a; color: #f5f5f3; padding: 0 10px; outline: none; font: 800 13px 'Archivo', sans-serif; letter-spacing: .1em; text-transform: uppercase; border-radius: 0; }
.ct2-promo input:focus { border-color: #00FF50; }
.ct2-msg { display: block; flex: 1 0 100%; font: 700 11.5px 'Archivo', sans-serif; color: #9a9a95; margin-top: 4px !important; }
.ct2-msg:empty { display: none; }
.ct2-msg.is_bad { color: #ff6b5a; }
.ct2-msg a, .ct2-promo-on a { color: #f5f5f3 !important; margin-left: 6px; }
.ct2-promo-on { padding: 12px 0; border-bottom: 1px solid #1e1e1e; font: 700 13px 'Archivo', sans-serif; color: #d0d0cc; }
.ct2-promo-on b { color: #00FF50; }
.ct2-due { display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 0 12px; padding: 18px 0 14px; }
.ct2-due > span { font: 900 20px 'Archivo', sans-serif; grid-row: 1 / 3; align-self: end; white-space: nowrap; }
.ct2-due b { text-align: right; font: 900 clamp(34px, 3.4vw, 46px)/1 'Archivo', sans-serif; letter-spacing: -.05em; }
.ct2-due small { text-align: right; font: 800 11px 'Archivo', sans-serif; color: #9a9a95; margin-top: 4px; }
.ct2-pay { display: block; text-align: center; padding: 18px 20px; background: #00FF50; color: #0a0a0a !important; font: 800 13px 'Archivo', sans-serif; letter-spacing: .14em; text-decoration: none !important; }
.ct2-pay:hover { background: #f5f5f3; }
.ct2-secure { margin-top: 12px !important; text-align: center; font: 600 12px 'Archivo', sans-serif; color: #9a9a95; }

@media (max-width: 1000px){
    .ct2-body { grid-template-columns: minmax(0, 1fr); }
    .ct2-sum { position: static; }
}
@media (max-width: 620px){
    .ct2-line { grid-template-columns: minmax(0, 1fr); }
    .ct2-art { min-height: 150px; border-right: 0; border-bottom: 2px solid #0a0a0a; }
    .ct2-up { flex-direction: column; align-items: flex-start; }
    .ct2-steps li { font-size: 10px; gap: 6px; }
    .ct2-cur { width: 100%; }
}