/* =====================================================================
   88HARDWARE · Cart / Checkout / Order received · touch layer (touch-pages-20261103 pkg-03-cart)
   Phone / iPad / touch only: everything is inside the inverse of the PC gate, so PC (>=1200 + hover + fine pointer) never applies it.
   Colours / tokens = cart-checkout-pc-v2.css (approved PC v2). No markup, field, price, flow or copy is added.
   Kept as they are (EY): the cart Variations box + bottom sheet, the checkout variation values box, the touch cart layout.
   ===================================================================== */
@media not all and (min-width:1200px) and (hover:hover) and (pointer:fine){

/* ---------- tokens (PC v2 values, scoped) ---------- */
html body.woocommerce-cart,html body.woocommerce-checkout{
  --cm-red:#cf172d; --cm-red-7:#b4010e; --cm-red-50:#fff1f2;
  --cm-navy:#06265f; --cm-navy6:#173958;
  --cm-ink:#181c22; --cm-text:#394655; --cm-muted:#67707b; --cm-dis:#a0a7af;
  --cm-line:#e2e5ea; --cm-line2:#edf0f4; --cm-soft:#f6f7f9; --cm-bg:#f3f4f6;
  --cm-e1:0 1px 2px rgba(16,24,40,.06);
  --cm-font:Inter,"PingFang SC","Hiragino Sans GB",system-ui,sans-serif}

/* ===================== ⑯ CART ===================== */
/* landscape touch: the device-preview canvas (#f3f4f6) showed as a grey band under the white cart page */
html:has(>body.woocommerce-cart){background:#fff!important}

/* -- empty cart: PC v2 empty card (same icon, heading and red button, existing text only); the dead "All / RM0.00 / Check Out (0)" bar is hidden -- */
html:has(>body.woocommerce-cart #hc-selectable-cart>p:first-child+a.button),
html body.woocommerce-cart:has(#hc-selectable-cart>p:first-child+a.button){background:#f3f4f6!important}
html body.woocommerce-cart #hc-selectable-cart:has(>p:first-child+a.button){display:flex!important;flex-direction:column;align-items:center;margin:12px!important;padding:32px 20px!important;background:#fff!important;border-radius:6px;box-shadow:var(--cm-e1);text-align:center;font-family:var(--cm-font)}
html body.woocommerce-cart #hc-selectable-cart>p:first-child:has(+a.button){display:flex!important;flex-direction:column;align-items:center;gap:20px;margin:0!important;padding:0!important;background:none!important;border:0!important;font:800 20px/26px var(--cm-font)!important;letter-spacing:-.02em;color:var(--cm-ink)!important;text-align:center}
html body.woocommerce-cart #hc-selectable-cart>p:first-child:has(+a.button)::before{content:"";display:block;flex:none;width:96px;height:96px;border-radius:50%;background:var(--cm-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a0a7af' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.4'/%3E%3Ccircle cx='18' cy='20' r='1.4'/%3E%3Cpath d='M2.5 3.5h3l2.4 11.2a1.5 1.5 0 0 0 1.5 1.2h8.4a1.5 1.5 0 0 0 1.5-1.1l1.7-6.8H6.6'/%3E%3C/svg%3E") center/48px no-repeat}
html body.woocommerce-cart #hc-selectable-cart>p:first-child+a.button{display:inline-flex!important;align-items:center;justify-content:center;box-sizing:border-box;width:auto!important;min-width:220px;max-width:100%;height:48px!important;min-height:48px!important;margin:20px 0 0!important;padding:0 28px!important;border:0!important;border-radius:3px!important;background:var(--cm-red)!important;box-shadow:0 2px 0 var(--cm-red-7)!important;color:#fff!important;font:700 15px/48px var(--cm-font)!important;letter-spacing:0!important;text-transform:none!important;text-decoration:none!important;-webkit-tap-highlight-color:transparent}
html body.woocommerce-cart #hc-selectable-cart>p:first-child+a.button:active{background:var(--cm-red-7)!important}
html body.woocommerce-cart #hc-selectable-cart>p:first-child+a.button~.hc-cart-order-bar{display:none!important}

/* -- populated cart: touch targets with zero layout change -- */
/* qty − / + : 44px tall hit area (and 44 wide outward on the phone stepper) via ::after; the visible stepper is unchanged */
html body.woocommerce-cart #hc-selectable-cart .hc-qty-controls>button{position:relative;-webkit-tap-highlight-color:transparent}
html body.woocommerce-cart #hc-selectable-cart .hc-qty-controls>button::after{content:"";position:absolute;top:50%;height:44px;margin-top:-22px;left:0;right:0}
html body.woocommerce-cart #hc-selectable-cart .hc-qty-controls>button:first-child::after{left:auto;right:0;width:max(100%,44px)}
html body.woocommerce-cart #hc-selectable-cart .hc-qty-controls>button:last-child::after{left:0;right:auto;width:max(100%,44px)}
/* row tick: 44px wide hit area (it was 20 x 44) */
html body.woocommerce-cart #hc-selectable-cart .hc-row-check{position:relative}
html body.woocommerce-cart #hc-selectable-cart .hc-row-check::after{content:"";position:absolute;top:0;bottom:0;left:-12px;right:-12px}
/* bottom bar "All": 44px tall hit area (it was 22 tall) */
html body.woocommerce-cart #hc-selectable-cart .h88-cart-bar-all{position:relative}
html body.woocommerce-cart #hc-selectable-cart .h88-cart-bar-all::after{content:"";position:absolute;top:50%;height:44px;margin-top:-22px;left:-8px;right:-8px}
/* iPad / landscape rows: the product name was cut to one line with "…"; show up to two lines */
@media (min-width:600px){
html body.woocommerce-cart #hc-selectable-cart .hc-cart-name{display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:normal!important;overflow:hidden!important;text-overflow:clip!important}
}

/* ===================== ⑰ CHECKOUT ===================== */
/* "Returning customer?" notice: PC v2 look (white card, person icon, bold navy link + red ›) instead of the WooCommerce blue notice; whole link 44px tall */
html body.woocommerce-checkout #main-content .woocommerce-form-login-toggle{margin:0 0 8px!important}
html body.woocommerce-checkout #main-content .woocommerce-form-login-toggle .woocommerce-info{display:flex!important;align-items:center;flex-wrap:wrap;column-gap:6px;min-height:52px;margin:0!important;padding:4px 16px 4px 54px!important;border:0!important;border-radius:6px!important;background:#fff!important;box-shadow:var(--cm-e1);font:500 14px/20px var(--cm-font)!important;color:var(--cm-text)!important;position:relative;box-sizing:border-box}
html body.woocommerce-checkout #main-content .woocommerce-form-login-toggle .woocommerce-info::before{content:""!important;position:absolute!important;left:16px!important;top:50%!important;width:28px;height:28px;margin:-14px 0 0!important;border-radius:50%;background:var(--cm-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23173958' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='3.6'/%3E%3Cpath d='M5 20a7 7 0 0 1 14 0'/%3E%3C/svg%3E") center/16px no-repeat;color:transparent!important;font-size:0!important}
html body.woocommerce-checkout #main-content .woocommerce-form-login-toggle a.showlogin{display:inline-flex;align-items:center;min-height:44px;font-weight:700;color:var(--cm-navy6)!important;text-decoration:none!important;-webkit-tap-highlight-color:transparent}
html body.woocommerce-checkout #main-content .woocommerce-form-login-toggle a.showlogin::after{content:"\00a0›";color:var(--cm-red)}

/* Country / State (select2) and Order notes: same field style as the other inputs (#fafafa, 1px #e3e5e8, 6px) instead of black 1px borders */
html body.woocommerce-checkout #main-content .select2-container--default .select2-selection--single{box-sizing:border-box;height:40px!important;border:1px solid #e3e5e8!important;border-radius:6px!important;background:#fafafa!important}
html body.woocommerce-checkout #main-content .select2-container--default .select2-selection--single .select2-selection__rendered{padding:0 36px 0 10px!important;font:400 16px/38px var(--cm-font)!important;color:#000!important}
html body.woocommerce-checkout #main-content .select2-container--default .select2-selection--single .select2-selection__arrow{height:38px!important;right:6px!important}
html body.woocommerce-checkout #main-content .select2-container--default.select2-container--open .select2-selection--single,html body.woocommerce-checkout #main-content .select2-container--default.select2-container--focus .select2-selection--single{border-color:var(--cm-navy)!important;box-shadow:0 0 0 3px rgba(6,38,95,.12)}
html body.woocommerce-checkout #main-content #order_comments{box-sizing:border-box;border:1px solid #e3e5e8!important;border-radius:6px!important;background:#fafafa!important;box-shadow:none!important;outline:0}
html body.woocommerce-checkout #main-content #order_comments:focus{border-color:var(--cm-navy)!important;box-shadow:0 0 0 3px rgba(6,38,95,.12)!important}

/* "Create an account?": 20px red tick and a 44px tall label (was 13px tick, 15px label) */
html body.woocommerce-checkout #main-content .woocommerce-account-fields p.create-account>label.checkbox{display:inline-flex!important;align-items:center;gap:10px;min-height:44px;margin:0!important;padding:0 8px 0 0!important;font:500 14px/20px var(--cm-font)!important;color:var(--cm-text)!important;-webkit-tap-highlight-color:transparent}
html body.woocommerce-checkout #main-content #createaccount{flex:none;width:20px!important;height:20px!important;margin:0!important;accent-color:var(--cm-red)}

/* ===================== ⑱ ORDER RECEIVED (PC v2 design on touch) ===================== */
html:has(>body.woocommerce-order-received),html body.woocommerce-order-received{background:var(--cm-bg,#f3f4f6)!important}
html body.woocommerce-order-received #main-content>article{font-family:var(--cm-font);color:var(--cm-text)}
/* title bar: white + 4px red accent (PC checkout title) */
html body.woocommerce-order-received #main-content>article>h1{display:flex!important;align-items:center;gap:10px;min-height:56px;margin:12px 0!important;padding:0 16px!important;background:#fff;border-radius:6px;box-shadow:var(--cm-e1);font:800 20px/26px var(--cm-font)!important;letter-spacing:-.02em!important;color:var(--cm-ink)!important;text-transform:none!important}
html body.woocommerce-order-received #main-content>article>h1::before{content:"";flex:none;width:4px;height:18px;border-radius:2px;background:var(--cm-red)}
html body.woocommerce-order-received #main-content .woocommerce-order{display:grid!important;grid-template-columns:minmax(0,1fr);gap:12px;align-items:start;margin:0 0 24px!important}
/* thank-you card with the PC airmail stripe */
html body.woocommerce-order-received #main-content .woocommerce-order>p.woocommerce-thankyou-order-received{position:relative;overflow:hidden;margin:0!important;padding:28px 16px 20px!important;background:#fff!important;border:0!important;border-radius:6px 6px 0 0!important;box-shadow:none!important;font:800 20px/26px var(--cm-font)!important;letter-spacing:-.02em;color:var(--cm-ink)!important}
html body.woocommerce-order-received #main-content .woocommerce-order>p.woocommerce-thankyou-order-received::before{content:""!important;position:absolute!important;left:0;right:0;top:0;width:auto!important;height:4px;margin:0!important;background:repeating-linear-gradient(-45deg,var(--cm-red) 0 18px,#fff 18px 24px,var(--cm-navy) 24px 42px,#fff 42px 48px)!important;border:0!important;color:transparent!important;font-size:0!important}
html body.woocommerce-order-received #main-content .woocommerce-order>p.woocommerce-thankyou-order-received:last-child{border-radius:6px!important}
/* overview: cells joined to the thank-you card, 1px lines drawn by the grid gap (2 columns phone, 3 iPad / landscape; email gets a wide cell) */
html body.woocommerce-order-received #main-content ul.woocommerce-order-overview{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin:-12px 0 0!important;padding:1px 0 0!important;list-style:none!important;background:var(--cm-line2);border:0!important;border-radius:0 0 6px 6px;box-shadow:var(--cm-e1);overflow:hidden}
html body.woocommerce-order-received #main-content ul.woocommerce-order-overview::before,html body.woocommerce-order-received #main-content ul.woocommerce-order-overview::after{display:none!important;content:none!important}
html body.woocommerce-order-received #main-content ul.woocommerce-order-overview li{display:flex!important;flex-direction:column;justify-content:flex-start;gap:4px;min-width:0;margin:0!important;padding:14px 16px!important;border:0!important;background:#fff;float:none!important;font:600 12px/16px var(--cm-font)!important;color:var(--cm-muted)!important;text-transform:none!important;text-align:left!important}
html body.woocommerce-order-received #main-content ul.woocommerce-order-overview li.email{grid-column:1/-1}
html body.woocommerce-order-received #main-content ul.woocommerce-order-overview strong{display:block;font:800 16px/22px var(--cm-font)!important;letter-spacing:-.01em;color:var(--cm-ink)!important;text-transform:none!important;overflow-wrap:break-word}
html body.woocommerce-order-received #main-content ul.woocommerce-order-overview li.email strong{overflow-wrap:anywhere}
html body.woocommerce-order-received #main-content ul.woocommerce-order-overview li.total strong{color:var(--cm-red)!important}
/* sections: white cards with the PC red-accent heading */
html body.woocommerce-order-received #main-content section.woocommerce-order-details,html body.woocommerce-order-received #main-content section.woocommerce-customer-details{min-width:0;margin:0!important;padding:0 16px 16px!important;background:#fff;border-radius:6px;box-shadow:var(--cm-e1)}
html body.woocommerce-order-received #main-content section.woocommerce-order-details h2,html body.woocommerce-order-received #main-content section.woocommerce-customer-details h2{display:flex!important;align-items:center;gap:10px;height:52px;margin:0 -16px!important;padding:0 16px!important;border-bottom:1px solid var(--cm-line2);font:800 17px/22px var(--cm-font)!important;letter-spacing:-.02em;color:var(--cm-ink)!important;text-transform:none!important}
html body.woocommerce-order-received #main-content section.woocommerce-order-details h2::before,html body.woocommerce-order-received #main-content section.woocommerce-customer-details h2::before{content:"";flex:none;width:4px;height:18px;border-radius:2px;background:var(--cm-red)}
html body.woocommerce-order-received #main-content table.order_details{width:100%;margin:0!important;border:0!important;border-radius:0!important;border-collapse:collapse!important;table-layout:auto}
html body.woocommerce-order-received #main-content table.order_details th,html body.woocommerce-order-received #main-content table.order_details td{padding:12px 0!important;border:0!important;border-bottom:1px solid var(--cm-line2)!important;background:none!important;font:500 14px/20px var(--cm-font)!important;color:var(--cm-text)!important;text-align:left;vertical-align:middle}
html body.woocommerce-order-received #main-content table.order_details thead th{padding:10px 0!important;font:600 12px/16px var(--cm-font)!important;color:var(--cm-muted)!important}
html body.woocommerce-order-received #main-content table.order_details th:last-child,html body.woocommerce-order-received #main-content table.order_details td:last-child{padding-left:12px!important;text-align:right!important;white-space:nowrap}
html body.woocommerce-order-received #main-content table.order_details td.product-name a{display:inline;color:var(--cm-ink)!important;text-decoration:none!important;font-weight:500}
html body.woocommerce-order-received #main-content table.order_details td.product-name .product-quantity{display:inline-block;margin-left:4px;padding:0 6px;border-radius:3px;background:var(--cm-soft);font:600 12px/20px var(--cm-font)!important;color:var(--cm-muted)!important;white-space:nowrap}
html body.woocommerce-order-received #main-content table.order_details td.product-total{font-weight:700!important;color:var(--cm-ink)!important}
html body.woocommerce-order-received #main-content table.order_details tfoot th{font-weight:500!important}
html body.woocommerce-order-received #main-content table.order_details tfoot td{font-weight:700!important;color:var(--cm-ink)!important;white-space:normal!important}
html body.woocommerce-order-received #main-content table.order_details tfoot tr:last-child th,html body.woocommerce-order-received #main-content table.order_details tfoot tr:last-child td{border-bottom:0!important}
/* billing address: PC pin / phone / mail icons (replace the theme's link-glyph) */
html body.woocommerce-order-received #main-content section.woocommerce-customer-details address{position:relative;margin:14px 0 0!important;padding:0 0 0 26px!important;border:0!important;border-radius:0!important;background:none!important;font:500 14px/22px var(--cm-font)!important;font-style:normal!important;color:var(--cm-text)!important}
html body.woocommerce-order-received #main-content section.woocommerce-customer-details address::before{content:"";position:absolute;left:0;top:3px;width:16px;height:16px;background:center/16px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2367707b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5A7 7 0 0 1 19 9.5C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E")}
html body.woocommerce-order-received #main-content section.woocommerce-customer-details address p{position:relative;margin:10px 0 0!important;padding:0!important;font:500 14px/22px var(--cm-font)!important;font-style:normal!important;color:var(--cm-text)!important;overflow-wrap:anywhere}
html body.woocommerce-order-received #main-content section.woocommerce-customer-details address p::before{content:""!important;position:absolute!important;left:-26px!important;top:3px!important;width:16px!important;height:16px!important;margin:0!important;background:center/16px no-repeat!important;color:transparent!important;font-size:0!important}
html body.woocommerce-order-received #main-content section.woocommerce-customer-details address p.woocommerce-customer-details--phone::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2367707b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2'/%3E%3C/svg%3E")!important}
html body.woocommerce-order-received #main-content section.woocommerce-customer-details address p.woocommerce-customer-details--email::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2367707b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3.5 6.5 8.5 6.5 8.5-6.5'/%3E%3C/svg%3E")!important}
@media (min-width:600px){
/* order · date · total / email (wide) · payment method */
html body.woocommerce-order-received #main-content ul.woocommerce-order-overview{grid-template-columns:repeat(3,minmax(0,1fr))}
html body.woocommerce-order-received #main-content ul.woocommerce-order-overview li{order:2;padding:16px 20px!important}
html body.woocommerce-order-received #main-content ul.woocommerce-order-overview li.email{order:4;grid-column:span 2}
html body.woocommerce-order-received #main-content ul.woocommerce-order-overview li.method{order:5}
html body.woocommerce-order-received #main-content .woocommerce-order>p.woocommerce-thankyou-order-received{padding:32px 20px 24px!important;font-size:22px!important;line-height:28px!important}
html body.woocommerce-order-received #main-content section.woocommerce-order-details,html body.woocommerce-order-received #main-content section.woocommerce-customer-details{padding:0 20px 20px!important}
html body.woocommerce-order-received #main-content section.woocommerce-order-details h2,html body.woocommerce-order-received #main-content section.woocommerce-customer-details h2{height:56px;margin:0 -20px!important;padding:0 20px!important;font-size:18px!important}
}
@media (min-width:1000px){
/* landscape: order details + billing address side by side (PC layout) */
html body.woocommerce-order-received #main-content .woocommerce-order{grid-template-columns:minmax(0,1fr) minmax(300px,36%)}
html body.woocommerce-order-received #main-content .woocommerce-order>p.woocommerce-thankyou-order-received,html body.woocommerce-order-received #main-content ul.woocommerce-order-overview{grid-column:1/-1}
}

}