/* 10.8 Checkout — cart / checkout / order-received. Loaded only on those pages while tp8-checkout is active. */
.tp8co-cart, .tp8co-checkout, .tp8co-thankyou {
/* Same palette as 10.8 Storefront (tp8s.css) */
--ink:#1b1f1c; --ink-2:#3f4541; --muted:#6f7570; --line:#e9e7e2; --line-2:#dedbd4;
--bg:#f6f5f2; --band:#f1efea; --card:#ffffff; --accent:#a8432c; --accent-bg:#fbf1ee;
--sage:#3d5244; --sage-bg:#eef2ec; --danger:#c0392b; --danger-bg:#fdf2f1; --ok:#2f7d4f;
--r-card:18px; --r-ctl:30px; --r-opt:14px;
--font:"Work Sans","IBM Plex Sans Arabic",system-ui,sans-serif;
}
body.tp8co-cart, body.tp8co-checkout, body.tp8co-thankyou { background: var(--bg); overflow-x: clip; }
/* ---------- theme chrome ---------- */
body.tp8co-checkout header.bwp-header, body.tp8co-checkout .bwp-mobile_offcanvas, body.tp8co-checkout .bwp-mobile_toolbar,
body.tp8co-cart .bwp-mobile_toolbar,
body.tp8co-checkout #bwp-main > .page-title.bwp-title, body.tp8co-cart #bwp-main > .page-title.bwp-title, body.tp8co-thankyou #bwp-main > .page-title.bwp-title,
body.tp8co-checkout .back-top, body.tp8co-cart .back-top, body.tp8co-thankyou .back-top,
body.tp8co-checkout .popupshadow, body.tp8co-checkout #newsletterpopup, body.tp8co-cart .popupshadow, body.tp8co-cart #newsletterpopup,
body.tp8co-thankyou .popupshadow, body.tp8co-thankyou #newsletterpopup, body.tp8co #fire_work,
body.tp8co #coupons_list:not(:has(.coupon-container)) { display: none !important; }
/* ---------- base ---------- */
.tp8co-co, .tp8co-coh, .tp8co-band, .tp8co-cartpage, .tp8co-empty, .tp8co-ty { font-family: var(--font); color: var(--ink); font-size: 15px; line-height: 1.6; }
.tp8co-co *, .tp8co-coh *, .tp8co-cartpage *, .tp8co-ty * { box-sizing: border-box; }
.tp8co-ic { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; vertical-align: middle; }
.tp8co-ic.is-sm { width: 16px; height: 16px; } .tp8co-ic.is-xs { width: 14px; height: 14px; }
[dir="rtl"] .tp8co-flip { transform: scaleX(-1); }
.tp8co-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tp8co-hidden { display: none !important; }
.tp8co-muted { color: var(--muted); font-size: 12.5px; }
.tp8co-link { color: var(--ink-2); display: inline-flex; gap: 6px; align-items: center; text-decoration: none; font-size: 13px; }
.tp8co-link:hover { color: var(--ink); }
/* ---------- checkout header ---------- */
.tp8co-coh { background: #fff; border-bottom: 1px solid var(--line); width: 100vw; margin-inline: calc(50% - 50vw); margin-top: -1px; }
.tp8co-coh-in { max-width: 1180px; margin: 0 auto; padding: 14px 24px; display: grid; grid-template-columns: 180px 1fr 250px; align-items: center; gap: 20px; }
.tp8co-logo img { height: 46px; width: auto; display: block; }
.tp8co-coh-aside { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 12.5px; }
.tp8co-secure { display: inline-flex; align-items: center; gap: 6px; color: var(--ok); font-weight: 600; font-size: 13px; }
.tp8co-help { color: var(--ink-2); text-decoration: none; display: inline-flex; gap: 6px; align-items: center; }
/* ---------- steps ---------- */
.tp8co-steps { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 13.5px; color: var(--muted); }
.tp8co-st { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; color: inherit; text-decoration: none; }
.tp8co-c { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid var(--line-2); font-size: 12.5px; font-weight: 600; background: #fff; }
.tp8co-st.is-done { color: var(--sage); } .tp8co-st.is-done .tp8co-c { background: var(--sage); border-color: var(--sage); color: #fff; }
.tp8co-st.is-cur { color: var(--ink); font-weight: 600; } .tp8co-st.is-cur .tp8co-c { background: var(--ink); border-color: var(--ink); color: #fff; }
.tp8co-sep { width: 40px; height: 1.5px; background: var(--line-2); } .tp8co-sep.is-done { background: var(--sage); }
/* ---------- checkout layout ---------- */
.tp8co-co { max-width: 1180px; margin: 24px auto 40px; padding: 0 24px; }
.tp8co-co-form { display: grid; grid-template-columns: minmax(0, 1fr) 410px; grid-template-areas: "main aside"; gap: 28px; align-items: start; }
.tp8co-co-main { grid-area: main; min-width: 0; }
.tp8co-co-aside { grid-area: aside; position: sticky; top: 20px; min-width: 0; }
.tp8co-sum-toggle { display: none; }
.tp8co-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: 22px 24px; }
.tp8co-card + .tp8co-card, #customer_details + .tp8co-card, #customer_details .tp8co-card + .tp8co-card { margin-top: 16px; }
.tp8co-sh { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.tp8co-sh h3 { margin: 0; font: 600 17px/1.4 var(--font); color: var(--ink); text-transform: none; letter-spacing: 0; }
.tp8co-num { width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: #fff; font-weight: 600; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.tp8co-sh-aside { margin-inline-start: auto; display: inline-flex; gap: 6px; align-items: center; font-size: 12.5px; color: var(--muted); }
.tp8co-sh-aside.is-ok { color: var(--ok); }
/* ---------- fields (WooCommerce markup) ---------- */
.tp8co-grid-fields { display: flex; flex-wrap: wrap; gap: 0 14px; }
.tp8co-grid-fields .form-row { margin: 0 0 14px; padding: 0; flex: 1 1 100%; min-width: 0; }
.tp8co-grid-fields .form-row-first, .tp8co-grid-fields .form-row-last { flex: 1 1 calc(50% - 7px); }
.tp8co-co .form-row label { display: flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 500; color: var(--ink-2); margin: 0 0 6px; }
.tp8co-co .form-row label .required { color: var(--accent); text-decoration: none; border: 0; }
.tp8co-co .form-row label .optional { color: var(--muted); font-weight: 400; }
.tp8co-co .form-row .input-text, .tp8co-co .form-row select, .tp8co-cartpage select, .tp8co-coupon-input {
width: 100%; height: 50px; border: 1px solid var(--line-2); border-radius: var(--r-ctl); background: #fff; padding: 0 18px;
font: 400 15px var(--font); color: var(--ink); box-shadow: none; outline: 0; transition: border-color .15s, box-shadow .15s; }
.tp8co-co .form-row .input-text:focus, .tp8co-co .form-row select:focus, .tp8co-coupon-input:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(51,51,51,.08); }
.tp8co-co .form-row.woocommerce-validated .input-text { border-color: #cfdccb; }
.tp8co-co .form-row.tp8co-has-error .input-text, .tp8co-co .form-row.tp8co-has-error select, .tp8co-co .form-row.tp8co-has-error .select2-selection { border-color: var(--danger) !important; background: var(--danger-bg); }
.tp8co-co .form-row .description { display: flex !important; gap: 6px; font-size: 12.5px; color: var(--muted); margin-top: 6px; position: static; background: none; padding: 0; }
.tp8co-co .form-row .description::before, .tp8co-co .form-row .description::after { display: none; }
.tp8co-err { display: flex; align-items: center; gap: 6px; color: var(--danger); font-size: 12.5px; font-weight: 500; margin: 6px 0 0; }
.tp8co-phone .input-text { direction: ltr; text-align: start; letter-spacing: .3px; }
[dir="rtl"] .tp8co-phone .input-text, [dir="rtl"] #billing_email { text-align: right; }
.tp8co-co .select2-container .select2-selection--single { height: 50px; border: 1px solid var(--line-2); border-radius: var(--r-ctl); display: flex; align-items: center; padding: 0 12px; }
.tp8co-co .select2-container .select2-selection__rendered { line-height: 48px; padding-inline: 6px 24px; color: var(--ink); }
.tp8co-co .select2-container .select2-selection__arrow { height: 48px; inset-inline-end: 12px; }
.select2-dropdown { border-color: var(--line-2) !important; border-radius: 14px !important; overflow: hidden; }
.tp8co-acct-bar { display: flex; align-items: center; gap: 8px; background: var(--band); border-radius: 12px; padding: 10px 14px; font-size: 13.5px; color: var(--ink-2); margin-bottom: 14px; }
.tp8co-acct-bar a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.tp8co-check { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; cursor: pointer; margin: 4px 0 0; position: relative; }
.tp8co-check input { position: absolute; opacity: 0; width: 20px; height: 20px; margin: 0; }
.tp8co-cb { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid #bdbdbd; background: #fff; flex: none; margin-top: 1px; display: inline-flex; align-items: center; justify-content: center; }
.tp8co-check input:checked + .tp8co-cb { background: var(--ink); border-color: var(--ink); }
.tp8co-check input:checked + .tp8co-cb::after { content: ""; width: 10px; height: 6px; border: 2px solid #fff; border-top: 0; border-inline-end: 0; transform: rotate(-45deg) translate(1px, -1px); }
.tp8co-check input:focus-visible + .tp8co-cb { outline: 2px solid var(--ink); outline-offset: 2px; }
.tp8co-check b { display: block; font-weight: 600; color: var(--ink); } .tp8co-check small { display: block; color: var(--muted); font-size: 12px; line-height: 1.55; }
.tp8co-hint { display: flex; gap: 6px; align-items: center; font-size: 12.5px; color: var(--muted); margin: 4px 0 0; } .tp8co-hint.is-ok { color: var(--ok); }
/* ---------- saved address ---------- */
.tp8co-addr { width: 100%; display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--line-2); border-radius: var(--r-opt); padding: 14px 16px; margin-bottom: 10px; background: #fff; text-align: start; font: inherit; color: inherit; }
.tp8co-addr.is-on { border: 1.5px solid var(--ink); background: #fcfcfb; }
.tp8co-addr--add { align-items: center; border-style: dashed; color: var(--ink-2); cursor: pointer; font-size: 13.5px; }
.tp8co-addr-b { display: flex; flex-direction: column; font-size: 13.5px; color: var(--ink-2); line-height: 1.65; }
.tp8co-addr-b b { color: var(--ink); font-size: 14.5px; }
.tp8co-addr-edit { margin-inline-start: auto; display: inline-flex; gap: 5px; align-items: center; font-size: 13px; color: var(--ink); background: none; border: 0; cursor: pointer; padding: 4px; }
.tp8co-addr-fields { margin-top: 14px; }
/* ---------- radio ---------- */
.tp8co-radio { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid #bdbdbd; flex: none; position: relative; background: #fff; }
.tp8co-pm.is-on .tp8co-radio, .tp8co-addr.is-on .tp8co-radio { border-color: var(--ink); }
.tp8co-pm.is-on .tp8co-radio::after, .tp8co-addr.is-on .tp8co-radio::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--ink); }
/* ---------- payment ---------- */
.tp8co-payment { background: none; border-radius: 0; }
.tp8co-pms { list-style: none; margin: 0 0 12px; padding: 0; border: 0; }
.tp8co-pm { border: 1px solid var(--line-2); border-radius: var(--r-opt); margin: 0 0 10px; background: #fff; overflow: hidden; }
.tp8co-pm.is-on { border: 1.5px solid var(--ink); background: #fcfcfb; }
.tp8co-pm-h { display: flex; align-items: center; gap: 12px; padding: 14px 16px; min-height: 60px; margin: 0; cursor: pointer; }
.tp8co-pm-h > .tp8co-ic { color: var(--ink-2); }
.tp8co-pm-t b { display: block; font-weight: 600; font-size: 14.5px; } .tp8co-pm-t small { display: block; color: var(--muted); font-size: 12px; }
.tp8co-logos { margin-inline-start: auto; display: flex; gap: 6px; align-items: center; direction: ltr; }
.tp8co-lg { height: 26px; min-width: 40px; padding: 0 6px; border: 1px solid var(--line); border-radius: 6px; background: #fff; display: inline-flex; align-items: center; justify-content: center; }
.tp8co-lg svg { display: block; }
.tp8co-pm-b { padding: 0 16px 14px; padding-inline-start: 48px; margin: 0; background: none; font-size: 13px; color: var(--ink-2); }
.tp8co-pm-b::before { display: none; }
.tp8co-pm-desc { display: flex; gap: 8px; align-items: flex-start; margin: 0; } .tp8co-pm-desc .tp8co-ic { color: var(--ok); margin-top: 2px; }
.tp8co-payment .place-order { padding: 0; margin: 0; }
.tp8co-payment .woocommerce-terms-and-conditions-wrapper { font-size: 13.5px; color: var(--ink-2); margin: 6px 0 16px; }
.tp8co-payment .woocommerce-privacy-policy-text p { font-size: 12.5px; color: var(--muted); margin: 0 0 10px; }
.tp8co-payment .woocommerce-terms-and-conditions-wrapper .form-row { margin: 0; }
.tp8co-payment .woocommerce-form__label-for-checkbox { display: flex !important; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--ink-2); cursor: pointer; }
.tp8co-payment .woocommerce-form__input-checkbox { width: 20px; height: 20px; accent-color: var(--ink); flex: none; margin: 1px 0 0; }
.tp8co-payment .woocommerce-terms-and-conditions-wrapper a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.tp8co-cta, .tp8co-co #place_order { width: 100%; height: 56px; border: 0; border-radius: 999px; background: var(--ink); color: #fff !important; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
font: 700 16px "Karla","IBM Plex Sans Arabic",sans-serif; text-transform: none; letter-spacing: .2px; cursor: pointer; text-decoration: none; transition: background .15s; }
.tp8co-cta:hover, .tp8co-co #place_order:hover { background: #1f1f1f; }
.tp8co-co #place_order::before { content: ""; width: 18px; height: 18px; background: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; }
.tp8co-cta.is-ghost { background: #fff; color: var(--ink) !important; border: 1.5px solid var(--ink); height: 48px; }
.tp8co-cta.is-loading, .tp8co-co #place_order.is-loading { background: var(--ink-2); pointer-events: none; }
.tp8co-cta.is-loading::after, .tp8co-co #place_order.is-loading::after { content: ""; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; animation: tp8co-spin .8s linear infinite; }
@keyframes tp8co-spin { to { transform: rotate(360deg); } }
.tp8co-cta-note { text-align: center; font-size: 12.5px; color: var(--muted); margin: 10px 0 0; display: flex; gap: 6px; justify-content: center; align-items: center; }
/* ---------- summary ---------- */
.tp8co-summary .tp8co-sh { margin-bottom: 8px; }
.tp8co-it { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.tp8co-th { position: relative; width: 64px; height: 64px; border-radius: 12px; background: #f7f7f5; border: 1px solid var(--line); flex: none; display: inline-block; }
.tp8co-th img { width: 100%; height: 100%; object-fit: contain; border-radius: 12px; mix-blend-mode: multiply; }
.tp8co-q { position: absolute; top: -7px; inset-inline-end: -7px; min-width: 22px; height: 22px; border-radius: 11px; background: var(--ink-2); color: #fff; font-size: 11.5px; display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; }
.tp8co-it-name { font-size: 13.5px; line-height: 1.45; flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.tp8co-it-name dl { margin: 2px 0 0; font-size: 12px; color: var(--muted); }
.tp8co-it-price { font-weight: 600; font-size: 14px; white-space: nowrap; }
.tp8co-totals { padding: 12px 0 4px; }
.tp8co-row { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--ink-2); margin-bottom: 8px; }
.tp8co-row small { display: block; font-size: 12px; color: var(--muted); }
.tp8co-row--total { color: var(--ink); font-size: 18px; font-weight: 700; border-top: 1px solid var(--line); padding-top: 12px; margin-top: 6px; }
.tp8co-row--total small { font-weight: 400; }
.tp8co-row .woocommerce-remove-coupon { color: var(--accent); font-size: 12px; margin-inline-start: 6px; }
.tp8co-coupon { border-top: 1px solid var(--line); padding: 12px 0; }
.tp8co-coupon-toggle { width: 100%; display: flex; align-items: center; gap: 8px; background: none; border: 0; padding: 4px 0; font: inherit; font-size: 13.5px; color: var(--ink-2); cursor: pointer; }
.tp8co-coupon-toggle .tp8co-end { margin-inline-start: auto; }
.tp8co-coupon-toggle[aria-expanded="true"] .tp8co-end { transform: rotate(45deg); }
.tp8co-coupon-row { display: flex; gap: 8px; margin-top: 10px; }
.tp8co-coupon-input { height: 44px; }
.tp8co-coupon-apply { height: 44px; padding: 0 18px; border-radius: 999px; border: 1.5px solid var(--ink); background: #fff; color: var(--ink); font-weight: 600; cursor: pointer; }
.tp8co-coupon.is-busy { opacity: .6; pointer-events: none; }
.tp8co-coupon-msg .woocommerce-error, .tp8co-coupon-msg .woocommerce-message { margin: 8px 0 0; padding: 8px 12px; border-radius: 10px; font-size: 12.5px; list-style: none; }
.tp8co-coupon-msg .woocommerce-error { background: var(--danger-bg); color: var(--danger); } .tp8co-coupon-msg .woocommerce-message { background: var(--sage-bg); color: #3f5a3a; }
.tp8co-trust { margin-top: 12px; background: var(--band); border-radius: 14px; padding: 12px 14px; display: grid; gap: 9px; }
.tp8co-tr { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-2); } .tp8co-tr .tp8co-ic { color: var(--sage); }
.tp8co-paylogos { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: 12px; direction: ltr; }
/* ---------- notices & banners ---------- */
.tp8co-co .woocommerce-NoticeGroup, .tp8co-co > .woocommerce-notices-wrapper, .tp8co-cartpage .woocommerce-notices-wrapper { margin-bottom: 16px; }
.tp8co-co .woocommerce-error, .tp8co-cartpage .woocommerce-error, .tp8co-co .woocommerce-message, .tp8co-cartpage .woocommerce-message, .tp8co-co .woocommerce-info, .tp8co-cartpage .woocommerce-info {
list-style: none; margin: 0 0 10px; padding: 12px 16px; border-radius: 14px; font-size: 13.5px; border: 1px solid var(--line); background: #fff; color: var(--ink); }
.tp8co-co .woocommerce-error, .tp8co-cartpage .woocommerce-error { background: var(--danger-bg); border-color: #f2c9c3; color: #7c2a20; }
.tp8co-co :is(.woocommerce-message, .woocommerce-info), .tp8co-cartpage :is(.woocommerce-message, .woocommerce-info) { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; line-height: 1.6; text-transform: none !important; letter-spacing: normal !important; border-top-width: 1px !important; }
.tp8co-co :is(.woocommerce-message, .woocommerce-info, .woocommerce-error)::before, .tp8co-cartpage :is(.woocommerce-message, .woocommerce-info, .woocommerce-error)::before { display: none !important; content: none !important; }
.tp8co-co :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) li, .tp8co-cartpage :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) li { list-style: none; margin: 0; padding: 0; }
.tp8co-co :is(.woocommerce-message, .woocommerce-info) .button, .tp8co-cartpage :is(.woocommerce-message, .woocommerce-info) .button { order: 3; margin: 0 !important; margin-inline-start: auto !important; float: none !important; height: 36px !important; line-height: 1 !important; padding: 0 16px !important; border-radius: 999px !important; font-size: 13px !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: normal !important; background: var(--ink) !important; color: #fff !important; border: 0 !important; display: inline-flex !important; align-items: center; gap: 6px; }
.tp8co-cartpage .woocommerce-message .wc-forward { display: none !important; }
.tp8co-co .woocommerce-message, .tp8co-cartpage .woocommerce-message { background: var(--sage-bg); border-color: #d4e0d0; color: #3f5a3a; }
.tp8co-banner { display: flex; gap: 10px; align-items: flex-start; border-radius: 14px; padding: 12px 16px; margin: 0 0 16px; font-size: 13.5px; line-height: 1.6; }
.tp8co-banner b { display: block; }
.tp8co-banner.is-error { background: var(--danger-bg); border: 1px solid #f2c9c3; color: #7c2a20; } .tp8co-banner.is-error .tp8co-ic { color: var(--danger); }
.tp8co-banner.is-warn { background: var(--accent-bg); border: 1px solid #f3d3c6; color: #7a2f15; } .tp8co-banner.is-warn a { color: var(--accent); font-weight: 600; }
/* ---------- theme resets (Calma styles WooCommerce payment/review markup) ---------- */
.tp8co-co .tp8co-payment ul.tp8co-pms { background: none; padding: 0; margin: 0 0 12px; border: 0; }
/* Calma gives later payment s a top padding and no border, and labels a bottom margin */
.tp8co-co ul.tp8co-pms > li.tp8co-pm { border: 1px solid var(--line-2) !important; padding: 0 !important; margin: 0 0 10px !important; }
.tp8co-co ul.tp8co-pms > li.tp8co-pm.is-on { border: 1.5px solid var(--ink) !important; }
.tp8co-co ul.tp8co-pms > li.tp8co-pm > .tp8co-pm-h { margin: 0 !important; padding: 14px 16px !important; }
.tp8co-co .tp8co-pm-h::before, .tp8co-co .tp8co-pm-h::after { content: none !important; display: none !important; }
.tp8co-summary .tp8co-totals .tp8co-row, .tp8co-co .tp8co-review .tp8co-row { padding: 0 !important; border: 0 !important; margin: 0 0 8px !important; background: none; }
.tp8co-summary .tp8co-totals .tp8co-row--total, .tp8co-co .tp8co-review .tp8co-row--total { border-top: 1px solid var(--line) !important; padding-top: 12px !important; margin-top: 6px !important; }
.tp8co-summary .tp8co-row .amount, .tp8co-summary .tp8co-row .woocommerce-Price-amount, .tp8co-summary .tp8co-row strong { font-size: inherit !important; font-weight: inherit !important; color: inherit !important; font-family: inherit !important; }
.tp8co-summary .tp8co-row--total { font-size: 18px !important; font-weight: 700 !important; color: var(--ink) !important; }
/* ---------- sticky bar (mobile) ---------- */
.tp8co-sticky { display: none; }
/* ---------- cart page ---------- */
.tp8co-band { background: var(--band); border-bottom: 1px solid var(--line); width: 100vw; margin-inline: calc(50% - 50vw); }
.tp8co-band-in { max-width: 1180px; margin: 0 auto; padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.tp8co-pg { margin: 0; font: 600 24px/1.3 var(--font); color: var(--ink); text-transform: none; }
.tp8co-pg span { font-size: 15px; color: var(--muted); font-weight: 400; }
.tp8co-cartpage { max-width: 1180px; margin: 24px auto 40px; padding: 0 24px; }
.tp8co-grid { display: grid; grid-template-columns: minmax(0, 1fr) 410px; gap: 28px; align-items: start; }
.tp8co-cart-list { padding: 8px 24px; }
.tp8co-cl-head { display: grid; grid-template-columns: 88px minmax(0,1fr) 150px 110px 36px; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--muted); font-weight: 500; }
.tp8co-cl-head span:first-child { grid-column: span 2; }
.tp8co-ci { display: grid; grid-template-columns: 88px minmax(0,1fr) 150px 110px 36px; align-items: center; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.tp8co-th--lg { width: 88px; height: 88px; border-radius: 14px; }
.tp8co-ci-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tp8co-ci-name { font-weight: 600; font-size: 14.5px; color: var(--ink); line-height: 1.45; text-decoration: none; overflow-wrap: anywhere; }
.tp8co-ci-meta { font-size: 12.5px; color: var(--muted); }
.tp8co-stock { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ok); font-weight: 500; } .tp8co-stock.is-low { color: var(--accent); }
.tp8co-ci-tot { font-size: 15px; white-space: nowrap; }
.tp8co-rm { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--ink-2) !important; display: inline-flex !important; align-items: center; justify-content: center; font-size: 0 !important; }
.tp8co-rm:hover { border-color: var(--danger); color: var(--danger) !important; }
.tp8co-cartpage .quantity { display: inline-flex; align-items: center; border: 1px solid var(--line-2); border-radius: 999px; height: 44px; padding: 0 4px; width: 128px; justify-content: space-between; background: #fff; }
.tp8co-cartpage .quantity .minus { order: 1; } .tp8co-cartpage .quantity .qty { order: 2; } .tp8co-cartpage .quantity .plus { order: 3; }
.tp8co-cartpage .quantity button { width: 36px; height: 36px; border-radius: 50%; border: 0; background: transparent; color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.tp8co-cartpage .quantity button:hover { background: var(--band); }
.tp8co-cartpage .quantity .qty { width: 40px; border: 0; text-align: center; font-weight: 600; font-size: 15px; background: transparent; -moz-appearance: textfield; appearance: textfield; padding: 0; height: 36px; }
.tp8co-cartpage .quantity .qty::-webkit-inner-spin-button, .tp8co-cartpage .quantity .qty::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.tp8co-cl-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 16px 0 10px; }
.tp8co-cl-foot .tp8co-muted { display: inline-flex; gap: 6px; align-items: center; }
.tp8co-cart-aside .cart_totals { width: 100% !important; float: none !important; }
.tp8co-est { background: var(--band); border-radius: 12px; padding: 12px; margin: 4px 0 10px; display: grid; gap: 8px; }
.tp8co-calc select { height: 44px; font-size: 14px; }
.tp8co-cart-aside .wc-proceed-to-checkout { padding: 14px 0 0; }
/* ---------- empty cart ---------- */
.tp8co-empty { max-width: 520px; margin: 40px auto 60px; padding: 0 20px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.tp8co-empty-ic { width: 84px; height: 84px; border-radius: 50%; background: var(--band); display: inline-flex; align-items: center; justify-content: center; color: var(--sage); margin-bottom: 16px; }
.tp8co-empty-ic .tp8co-ic { width: 36px; height: 36px; stroke-width: 1.4; }
.tp8co-empty h2 { margin: 0 0 4px; font: 600 22px/1.4 var(--font); color: var(--ink); text-transform: none; }
.tp8co-empty p { margin: 0 0 16px; color: var(--muted); font-size: 14px; }
.tp8co-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 22px; }
.tp8co-chips a { border: 1px solid var(--line-2); border-radius: 999px; padding: 8px 16px; min-height: 44px; display: inline-flex; align-items: center; font-size: 13.5px; background: #fff; color: var(--ink); text-decoration: none; }
.tp8co-empty .tp8co-cta { max-width: 320px; margin-bottom: 12px; }
/* ---------- order received ---------- */
.tp8co-ty { max-width: 980px; margin: 24px auto 48px; padding: 0 24px; }
.tp8co-ty .tp8co-steps { margin-bottom: 20px; }
.tp8co-ty-head { text-align: center; padding: 30px 24px; }
.tp8co-ty-ok { width: 64px; height: 64px; border-radius: 50%; background: var(--sage-bg); color: var(--ok); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 10px; }
.tp8co-ty-ok .tp8co-ic { width: 30px; height: 30px; stroke-width: 2.2; }
.tp8co-ty-head h1 { margin: 0 0 4px; font: 600 24px/1.4 var(--font); color: var(--ink); text-transform: none; }
.tp8co-ty-head p { margin: 0 0 10px; color: var(--ink-2); }
.tp8co-pill { display: inline-flex; gap: 6px; align-items: center; border-radius: 999px; padding: 4px 12px; font-size: 13px; font-weight: 600; }
.tp8co-pill.is-ok { background: var(--sage-bg); color: #3f5a3a; } .tp8co-pill.is-wait { background: var(--accent-bg); color: #7a2f15; }
.tp8co-ty-head.is-failed .tp8co-ty-ok { background: var(--danger-bg); color: var(--danger); }
.tp8co-ty-head .tp8co-cta { max-width: 280px; margin-top: 12px; }
.tp8co-ty-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.tp8co-ty-grid .tp8co-card { margin: 0; }
.tp8co-ty address { font-style: normal; color: var(--ink-2); line-height: 1.7; font-size: 14px; }
.tp8co-ty-next { margin-top: 16px; }
.tp8co-ty-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.tp8co-ty-step { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; font-size: 13.5px; color: var(--ink-2); }
.tp8co-ty-step .tp8co-ic { width: 26px; height: 26px; color: var(--sage); }
.tp8co-ty-actions { display: flex; gap: 12px; justify-content: center; margin: 20px 0 8px; flex-wrap: wrap; }
.tp8co-ty-actions .tp8co-cta { width: auto; min-width: 220px; padding: 0 24px; height: 50px; }
.tp8co-ty-help { text-align: center; color: var(--muted); font-size: 13px; }
.tp8co-ty-help a { color: var(--ink); }
/* ---------- responsive ---------- */
@media (max-width: 1024px) {
.tp8co-coh-in { grid-template-columns: 1fr auto; }
.tp8co-coh-in .tp8co-steps { grid-column: 1 / -1; order: 3; }
.tp8co-help { display: none; }
}
@media (max-width: 900px) {
.tp8co-co-form, .tp8co-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "aside" "main"; gap: 12px; }
.tp8co-co { padding: 0 12px; margin-top: 10px; padding-bottom: 110px; }
.tp8co-co-aside { position: static; }
.tp8co-sum-toggle { display: flex; width: 100%; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; font: 500 13.5px var(--font); color: var(--ink); cursor: pointer; }
.tp8co-sum-toggle .tp8co-live-total { margin-inline-start: auto; font-weight: 700; }
.tp8co-sum-toggle[aria-expanded="true"] .tp8co-caret { transform: rotate(180deg); }
.tp8co-co .tp8co-summary { display: none; margin-top: 10px; }
.tp8co-co.is-sum-open .tp8co-summary { display: block; }
.tp8co-card { padding: 16px; border-radius: 16px; }
.tp8co-sh h3 { font-size: 15.5px; }
.tp8co-grid-fields .form-row-first, .tp8co-grid-fields .form-row-last { flex: 1 1 calc(50% - 7px); }
.tp8co-co .form-row .input-text, .tp8co-co .form-row select { font-size: 16px; height: 48px; }
.tp8co-co #place_order { display: none; }
.tp8co-cta-note { display: none; }
.tp8co-sticky { display: block; position: fixed; inset-inline: 0; bottom: 0; z-index: 9990; background: #fff; border-top: 1px solid var(--line); padding: 10px 14px calc(12px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 20px rgba(0,0,0,.06); }
.tp8co-sticky-l { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--ink-2); margin-bottom: 8px; }
.tp8co-sticky-l .tp8co-live-total { color: var(--ink); font-size: 15px; font-weight: 700; }
.tp8co-sticky .tp8co-cta { height: 52px; font-size: 15px; }
.tp8co-cartpage { padding: 0 12px 120px; margin-top: 12px; }
.tp8co-cl-head { display: none; }
.tp8co-cart-list { padding: 4px 14px; }
.tp8co-ci { grid-template-columns: 72px minmax(0,1fr) auto; grid-template-areas: "th info rm" "th qty tot"; gap: 8px 12px; padding: 14px 0; }
.tp8co-ci .tp8co-th { grid-area: th; width: 72px; height: 72px; } .tp8co-ci-info { grid-area: info; } .tp8co-rm-wrap { grid-area: rm; justify-self: end; }
.tp8co-ci-qty { grid-area: qty; } .tp8co-ci-tot { grid-area: tot; justify-self: end; align-self: center; }
.tp8co-cartpage .quantity { width: 112px; height: 40px; }
.tp8co-ty-grid, .tp8co-ty-steps { grid-template-columns: 1fr; }
.tp8co-steps { gap: 6px; font-size: 12px; }
.tp8co-steps .tp8co-sep { width: 14px; }
.tp8co-steps .tp8co-c { width: 22px; height: 22px; font-size: 11px; }
.tp8co-band-in { padding: 14px 12px; }
}
/* Phones: card logos move under the method name so the name keeps one line */
@media (max-width: 600px) {
.tp8co-pm-h { flex-wrap: wrap; row-gap: 8px; }
.tp8co-pm-t { flex: 1 1 0; min-width: 0; }
.tp8co-logos { flex-basis: 100%; margin-inline-start: 0; padding: 0 0 0 64px; justify-content: flex-start; }
[dir="rtl"] .tp8co-logos { padding: 0 64px 0 0; justify-content: flex-end; }
}
@media (max-width: 420px) {
.tp8co-grid-fields .form-row-first, .tp8co-grid-fields .form-row-last { flex: 1 1 100%; }
.tp8co-logos .tp8co-lg { min-width: 34px; padding: 0 4px; }
}
@media (prefers-reduced-motion: reduce) { .tp8co-cta.is-loading::after, .tp8co-co #place_order.is-loading::after { animation: none; } }
/* Touch targets: controls keep the mockup's visual size; the tap area grows to 44×44. */
.tp8co-cartpage .quantity { overflow: visible; }
.tp8co-cartpage .quantity button, .tp8co-cartpage a.tp8co-rm { position: relative; }
.tp8co-cartpage .quantity button::after, .tp8co-cartpage a.tp8co-rm::after { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
.tp8co-coupon-toggle { min-height: 44px; }
/* Cart page summary: its rows sit directly in .cart_totals (no .tp8co-totals wrapper), so the theme's
.cart_totals row/cell rules (50% cells, .order-total 15px 30px padding) and .button caps reach them. */
.tp8co-cartpage .cart_totals > .tp8co-row { padding: 0 !important; border: 0 !important; margin: 0 0 8px !important; background: none; }
.tp8co-cartpage .cart_totals > .tp8co-row--total { border-top: 1px solid var(--line) !important; padding-top: 12px !important; margin-top: 6px !important; }
.tp8co-cartpage .cart_totals .tp8co-row > * { width: auto !important; }
.tp8co-cartpage .cart_totals .tp8co-row > :last-child { text-align: end !important; }
.tp8co-cartpage .wc-proceed-to-checkout .tp8co-cta { display: flex !important; gap: 10px; font: 700 16px "Karla","IBM Plex Sans Arabic",sans-serif !important; text-transform: none !important; }
/* The cart page's content sits in a legacy flex column (.nasa-col.large-12) that shrank to its content and hugged
the start edge, so the page and its full-bleed band were off-centre on desktop. */
body.tp8co-cart .row > .nasa-col.large-12 { flex: 0 0 100%; max-width: 100%; }
/* Checkout opened with cart errors (templates/checkout/cart-errors.php). */
.tp8co-co.tp8co-co-errors { max-width: 560px; margin: 32px auto 60px; padding-bottom: 0; }
.tp8co-co-errors .tp8co-banner { margin-bottom: 18px; }
.tp8co-addr[data-tp8co-mode="saved"] { cursor: pointer; }