/* Cart page, checkout and order confirmation */ .two-col { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: clamp(20px, 4vw, 48px); align-items: start; } .cart-lines { border-top: 1px solid var(--line); } .cart-lines .cart-line { grid-template-columns: 96px minmax(0, 1fr); } .cart-lines .cart-line .th { width: 96px; height: 110px; } .cart-lines .cart-line.addon { padding-left: 32px; } .cart-lines .cart-line.addon .th { width: 64px; height: 74px; } .cart-lines .cart-line .bottom { align-items: center; } .cart-actions { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: var(--s4) 0; } .co-section { background: var(--glass); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s5); margin-bottom: var(--s4); } .co-section > h2 { font-size: 1.4rem; margin-bottom: var(--s4); display: flex; justify-content: space-between; align-items: center; gap: 10px; } .co-section > h2 .n { font-family: var(--sign); color: var(--core); text-shadow: var(--glow-xs); font-size: 1.3rem; margin-right: 8px; } .co-section .signed { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--brass-2); border-radius: var(--r-md); background: var(--info-bg); font-size: var(--fs-sm); } .provider { border: 1px dashed var(--brass-2); border-radius: var(--r-md); padding: var(--s4); background: rgba(201,154,99,.05); display: flex; flex-direction: column; gap: 10px; } .provider .who { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: var(--fs-sm); } .provider .who .logo { font-family: var(--display); font-weight: 900; text-transform: uppercase; letter-spacing: .04em; padding: 4px 8px; border: 1px solid var(--brass-2); border-radius: var(--r-sm); color: var(--brass); font-size: .9rem; } .provider .box { min-height: 140px; border-radius: var(--r); background: repeating-linear-gradient(-45deg, rgba(255,255,255,.02) 0 12px, transparent 12px 24px), var(--wall); border: 1px solid var(--line-2); display: grid; place-items: center; text-align: center; padding: 16px; color: var(--muted); font-size: var(--fs-sm); } .provider .box b { display: block; color: var(--cream-2); margin-bottom: 4px; } .rates { display: grid; gap: 8px; } .rates .loading { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: var(--fs-sm); padding: 8px 0; } .rates .loading i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line-2); border-top-color: var(--brass); animation: spin .8s linear infinite; flex: none; } .agree { display: flex; flex-direction: column; gap: 6px; margin: var(--s4) 0; } .summary .lines { border-bottom: 1px solid var(--line); margin-bottom: 8px; padding-bottom: 8px; display: flex; flex-direction: column; gap: 10px; } .summary .line { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: var(--fs-sm); } .summary .line .th { width: 52px; height: 60px; border-radius: var(--r-sm); background: #0B0708; border: 1px solid var(--line); display: grid; place-items: end center; overflow: hidden; position: relative; } .summary .line .th img { width: 84%; height: 92%; object-fit: contain; object-position: bottom; mix-blend-mode: screen; } .summary .line .th.light { background: var(--paper); place-items: center; } .summary .line .th.light img { mix-blend-mode: multiply; object-position: center; } .summary .line .th .pill { position: absolute; top: -6px; right: -6px; } .summary .line small { display: block; color: var(--muted); font-size: var(--fs-xs); } .summary .line.addon { padding-left: 16px; } .summary .line.addon::before { content: "↳"; color: var(--brass); } .summary .line.addon { grid-template-columns: auto 52px minmax(0, 1fr) auto; } /* confirmation */ .confirm-head { text-align: center; padding: var(--s7) 0 var(--s5); } .confirm-head .sign { margin-bottom: var(--s3); } .confirm-head p { color: var(--cream-2); max-width: 54ch; margin: var(--s3) auto 0; } .ref { display: inline-flex; align-items: center; gap: 12px; margin-top: var(--s4); padding: 10px 16px; border: 1px solid var(--brass-2); border-radius: var(--r-md); background: var(--glass); font-size: var(--fs-sm); } .ref b { font-family: var(--display); font-size: 1.4rem; letter-spacing: .04em; color: var(--cream); } .next-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .next-steps .step { background: var(--glass); border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px; } .next-steps .k { font-family: var(--sign); color: var(--core); text-shadow: var(--glow-xs); font-size: 1.5rem; display: block; margin-bottom: 8px; } .next-steps b { display: block; margin-bottom: 4px; } .next-steps p { margin: 0; color: var(--muted); font-size: var(--fs-sm); } @media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } .summary { position: static; } .cart-lines .cart-line { grid-template-columns: 72px minmax(0, 1fr); } .cart-lines .cart-line .th { width: 72px; height: 84px; } .next-steps { grid-template-columns: 1fr; } .co-section { padding: var(--s4); } } /* 0.5.28 classic checkout (Shane 27 Sep: PUDO on, like KKC; PUDO 1.5.3 only works with the classic checkout). WooCommerce's own sheets load here. Its form colours are CSS variables, so point them at the Neon tokens (fixes the white order-notes box and the grey province text). */ .woocommerce { --wc-form-color-background: var(--glass); --wc-form-color-text: var(--cream); --wc-form-border-color: var(--line-2); } .woocommerce form .form-row textarea.input-text { background: var(--glass); color: var(--cream); min-height: 110px; line-height: 1.5; padding: 12px 14px; } .woocommerce form .form-row .input-text::placeholder { color: var(--muted); } .select2-container--default .select2-selection--single { display: flex; align-items: center; } .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--cream); line-height: 1.4; padding-left: 0; } .select2-container--default .select2-selection--single .select2-selection__arrow { top: 50%; transform: translateY(-50%); } .select2-dropdown { background: var(--glass); border-color: var(--line-2); color: var(--cream); } .select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option--highlighted[data-selected] { background: var(--glass-3); color: var(--core); } .select2-container--default .select2-search--dropdown .select2-search__field { background: var(--night); color: var(--cream); border-color: var(--line-2); } form.checkout.woocommerce-checkout .col2-set .col-1, form.checkout.woocommerce-checkout .col2-set .col-2 { float: none; width: 100%; } form.checkout #order_review_heading, form.checkout .woocommerce-billing-fields > h3, form.checkout #ship-to-different-address { margin: 0 0 var(--s4); } @media (min-width: 1000px) { form.checkout.woocommerce-checkout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 420px); column-gap: clamp(24px, 3vw, 44px); align-items: start; } form.checkout.woocommerce-checkout > .woocommerce-NoticeGroup { grid-column: 1 / -1; grid-row: 1; } form.checkout.woocommerce-checkout > #customer_details { grid-column: 1; grid-row: 2 / span 2; } form.checkout.woocommerce-checkout > #order_review_heading { grid-column: 2; grid-row: 2; } form.checkout.woocommerce-checkout > #order_review { grid-column: 2; grid-row: 3; position: sticky; top: 96px; } /* 0.5.32: clear the WordPress toolbar for signed-in staff (see shell.css). */ .admin-bar form.checkout.woocommerce-checkout > #order_review { top: calc(96px + var(--wp-admin--admin-bar--height, 32px)); } } /* Order summary as stacked rows: delivery names like "Cape Town/Stellenbosch/Somerset West" have no spaces and forced the table wider than a phone screen. */ .woocommerce table.shop_table.woocommerce-checkout-review-order-table { display: block; margin: 0 0 var(--s4); padding: 4px var(--s4); } .woocommerce-checkout-review-order-table thead, .woocommerce-checkout-review-order-table tbody, .woocommerce-checkout-review-order-table tfoot { display: block; } .woocommerce-checkout-review-order-table tr { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-bottom: 1px solid var(--line); } .woocommerce-checkout-review-order-table tfoot tr:last-child { border-bottom: 0; } .woocommerce table.shop_table.woocommerce-checkout-review-order-table th, .woocommerce table.shop_table.woocommerce-checkout-review-order-table td { display: block; border: 0; padding: 12px 0; } .woocommerce-checkout-review-order-table .product-name { flex: 1 1 auto; min-width: 0; line-height: 1.4; } .woocommerce-checkout-review-order-table .product-total, .woocommerce-checkout-review-order-table tfoot td { text-align: right; white-space: nowrap; } .woocommerce-checkout-review-order-table thead th { font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--brass); } .woocommerce table.shop_table.woocommerce-checkout-review-order-table thead th { padding-bottom: 8px; } .woocommerce-checkout-review-order-table tr > td[colspan] { flex: 1 1 100%; text-align: left; white-space: normal; } .woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals { flex-direction: column; align-items: stretch; gap: 4px; } .woocommerce table.shop_table.woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals td { text-align: left; white-space: normal; padding-top: 0; } .woocommerce ul#shipping_method { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; } .woocommerce ul#shipping_method li { margin: 0; display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--night); line-height: 1.4; text-indent: 0; } .woocommerce ul#shipping_method li input { margin: 3px 0 0; flex: none; accent-color: var(--neon); } .woocommerce ul#shipping_method li label { display: block; font-weight: 600; font-size: var(--fs-sm); overflow-wrap: anywhere; } .woocommerce ul#shipping_method li:has(input:checked) { border-color: var(--brass); } .woocommerce-checkout-review-order-table .order-total th, .woocommerce-checkout-review-order-table .order-total td { font-size: 1.15rem; color: var(--core); } .woocommerce-checkout-review-order-table .order-total .includes_tax { display: block; font-size: var(--fs-xs); color: var(--muted); font-weight: 400; } .woocommerce-checkout #payment { border-radius: var(--r-lg); } .woocommerce #payment #place_order { float: none; width: 100%; min-height: 52px; font-size: 1rem; } .woocommerce-checkout .woocommerce-privacy-policy-text p { font-size: var(--fs-xs); color: var(--muted); } /* 0.5.30 (switch day, Shane: "I dont see PUDO as a shipping option"). PUDO 1.5.3 prints its own choices (Locker / Door / Other shipping) as bare rows inside the totals, so they came out right-aligned like prices. Give them the same cards as the delivery list above. checkout.js links each label to its radio, makes the whole card clickable and puts "PUDO" in the wording. */ .woocommerce-checkout-review-order-table tr:has(> td > input[name="shipping_method[0]"][value$="-pudo"]) { border-bottom: 0; padding: 0 0 8px; } .woocommerce-checkout-review-order-table tr:has(> td > input[name="shipping_method[0]"][value$="-pudo"]) > th { display: none; } .woocommerce table.shop_table.woocommerce-checkout-review-order-table tr:has(> td > input[name="shipping_method[0]"][value$="-pudo"]) > td { flex: 1 1 100%; display: flex; gap: 10px; align-items: flex-start; text-align: left; white-space: normal; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--night); line-height: 1.4; cursor: pointer; } .woocommerce-checkout-review-order-table tr:has(> td > input[name="shipping_method[0]"][value$="-pudo"]) input { margin: 3px 0 0; flex: none; accent-color: var(--neon); } .woocommerce-checkout-review-order-table tr:has(> td > input[name="shipping_method[0]"][value$="-pudo"]) label { display: block; font-weight: 600; font-size: var(--fs-sm); cursor: pointer; } .woocommerce table.shop_table.woocommerce-checkout-review-order-table tr:has(> td > input[name="shipping_method[0]"][value$="-pudo"]:checked) > td { border-color: var(--brass); } /* 0.5.30: PUDO's locker picker is a white modal; the theme's cream text was inherited and nearly invisible (the same trap as KKC 0.1.11). Dark ink inside the modal, a white search box and a light table header. */ #pudoModal, #pudoModal .pudo-modal-content, #pudoModal h1, #pudoModal h2, #pudoModal h3, #pudoModal h4, #pudoModal .pudo-h4, #pudoModal p, #pudoModal td, #pudoModal li, #pudoModal label, #pudoModal span:not([class*=marker]) { color: var(--ink); } #pudoModal th { color: var(--ink); background: #efe4d3; } #pudoModal td { border-color: #e5d9c8; } #pudoModal input, #pudoModal select { color: var(--ink); background: #fff; border: 1px solid #cbbba6; border-radius: 8px; min-height: 40px; padding: 6px 10px; } #pudoModal input::placeholder { color: #7a6a5e; } #pudoModal button:not(.leaflet-control-zoom-in):not(.leaflet-control-zoom-out) { color: var(--ink); } /* 0.5.30 (Shane: "much better contrast ... the text inside the block is horrible"). PUDO's map popup is a