/* ========================================================================== Curious Mind — WooCommerce ========================================================================== Woo's own three stylesheets are dequeued (inc/woocommerce.php), so this file is the only thing dressing the cart, the checkout, the account pages and the reviews. It does not restyle Woo's design — it maps Woo's markup onto the tokens and shapes already defined in site.css and pages.css, so a checkout field is the same object as a newsletter field. ========================================================================== */ /* ---------- small pieces the PHP templates ask for ---------- */ .bcol-acts { display: flex; gap: 10px; margin-top: 18px } .bcol-acts .savebtn { width: 44px; height: 44px; flex: 0 0 auto } .bcol-acts .btn { flex: 1 } /* ---------- page previews under the cover ---------- The thumbnails are A4 (1:1.414), so the row is sized by aspect-ratio rather than a fixed height — a height would have to change every time the column width does. height:auto is mandatory alongside the width: WordPress prints width/height attributes on these images and a width-only rule stretches them (this shipped a 74x560 sliver in the cart once). */ .pagepeek { margin-top: 26px } .pp-h { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--faint); font-weight: 500; margin: 0 0 10px } .pp-thumbs { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 0; margin: 0 } .pp-thumbs li { min-width: 0 } .pp-t { display: block; width: 100%; padding: 0; border: 1px solid var(--line); background: var(--surface); border-radius: 6px; overflow: hidden; cursor: zoom-in; line-height: 0; transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease) } .pp-t:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); border-color: var(--violet-deep) } .pp-t:focus-visible { outline: 2px solid var(--violet-deep); outline-offset: 3px } .pp-img { width: 100%; height: auto; aspect-ratio: 1 / 1.414; object-fit: cover; display: block } .pp-note { font-size: 11.5px; color: var(--faint); margin: 9px 0 0; line-height: 1.5 } /* the lightbox. Appended to by gallery.js, so it is never inside the sticky column's stacking context. */ .pp-lb { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: rgba(16, 12, 26, .82); padding: max(18px, 3vw); opacity: 0; transition: opacity .22s var(--ease) } .pp-lb.in { opacity: 1 } .pp-lb img { max-width: min(100%, 780px); max-height: 88vh; width: auto; height: auto; border-radius: 8px; box-shadow: 0 24px 70px rgba(0, 0, 0, .5); background: #fff } .pp-lb button { position: absolute; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .22); background: rgba(20, 15, 32, .72); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; display: grid; place-items: center } .pp-lb button:hover { background: rgba(20, 15, 32, .95) } .pp-lb button:focus-visible { outline: 2px solid #fff; outline-offset: 2px } .pp-close { top: max(18px, 3vw); right: max(18px, 3vw) } .pp-prev { left: max(10px, 2vw) } .pp-next { right: max(10px, 2vw) } .pp-count { position: absolute; bottom: max(18px, 3vw); left: 50%; transform: translateX(-50%); color: rgba(255, 255, 255, .82); font-size: 12.5px; letter-spacing: .1em } @media (max-width: 600px) { .pp-lb button { width: 40px; height: 40px } .pp-lb img { max-height: 76vh } } @media (prefers-reduced-motion: reduce) { .pp-t, .pp-lb { transition: none } } .detail-h2 { font-size: 24px; font-weight: 300; margin: 34px 0 16px } .cm-shoppage { padding-bottom: 70px } /* the newsletter honeypot: present for a bot, gone for everyone else */ .cm-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0 } /* Both of these set a display of their own, which would otherwise beat the [hidden] attribute that shelf.js filters with — a filtered-out card would stay on screen. */ .chip[hidden], .bookcard[hidden] { display: none } /* the resume card's cover has no image, so it needs its own query container */ .resume .rc .cover { container-type: inline-size } .cover.mini .ctx { padding: 10% 9% } /* ---------- Woo buttons wear the design's button ---------- */ .woocommerce .button, .woocommerce button.button, .woocommerce input.button, .woocommerce a.button, .woocommerce-page .button, .wc-block-components-button, .woocommerce #respond input#submit { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 13px 24px; border: 0; border-radius: var(--r-pill); font-family: inherit; font-size: 14.5px; font-weight: 400; line-height: 1; background: var(--ink); color: var(--paper); cursor: pointer; white-space: nowrap; box-shadow: var(--shadow-sm); transition: transform .35s var(--ease), background .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease); } .woocommerce .button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce a.button:hover, .woocommerce #respond input#submit:hover { background: var(--violet-deep); color: var(--paper); transform: translateY(-2px); box-shadow: var(--shadow-md); } html[data-theme="dark"] .woocommerce .button, html[data-theme="dark"] .woocommerce button.button, html[data-theme="dark"] .woocommerce input.button, html[data-theme="dark"] .woocommerce a.button { background: var(--violet-deep); color: #1a1622 } html[data-theme="dark"] .woocommerce .button:hover, html[data-theme="dark"] .woocommerce button.button:hover, html[data-theme="dark"] .woocommerce input.button:hover, html[data-theme="dark"] .woocommerce a.button:hover { background: var(--blush); color: #1a1622 } .woocommerce .button:disabled, .woocommerce .button.disabled, .woocommerce button.button:disabled { opacity: .5; pointer-events: none } /* the quieter secondaries Woo puts next to a primary */ .woocommerce a.button.wc-backward, .woocommerce .cart .actions .button[name="update_cart"] { background: var(--surface); color: var(--muted); border: 1.5px solid var(--line); box-shadow: none; } .woocommerce a.button.wc-backward:hover, .woocommerce .cart .actions .button[name="update_cart"]:hover { background: var(--surface); color: var(--ink); border-color: var(--violet); } /* Woo appends this next to a card's Add button once the item is in the bag */ .added_to_cart { display: inline-flex; align-items: center; margin-left: 10px; font-size: 13px; color: var(--violet-deep); border-bottom: 1px solid color-mix(in srgb, var(--violet) 50%, transparent); } .btn.in-bag, .btn.added { background: var(--ok); color: #fff; border-color: var(--ok) } .btn.loading { opacity: .6; pointer-events: none } /* ---------- forms ---------- */ /* Scoped off the checkout for the same reason as the label rule below it — the checkout sets its own tighter rhythm and this one outranks it. */ body:not(.woocommerce-checkout) .woocommerce form .form-row { display: flex; flex-direction: column; gap: 7px; margin: 0 0 18px; padding: 0 } /* Everywhere except the checkout. That rule and the checkout's own label rule further down were fighting: this one is `.woocommerce form .form-row label` at specificity (0,2,2) and the checkout's is (0,2,1), so this one won on the renders where the `.woocommerce` wrapper is present and lost on the ones where it is not — the same field came out uppercase or sentence case depending on how the page had been reached. Scoping it off the checkout removes the contest instead of escalating it. */ body:not(.woocommerce-checkout) .woocommerce form .form-row label { font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); } .woocommerce form .form-row label .required { color: var(--warn); text-decoration: none; border: 0 } .woocommerce form .form-row .optional { color: var(--faint) } .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select, .woocommerce .select2-container .select2-selection--single, .woocommerce-page input[type="text"], .woocommerce-page input[type="email"], .woocommerce-page input[type="tel"], .woocommerce-page input[type="password"], .woocommerce-page input[type="number"] { width: 100%; padding: 14px 18px; border-radius: var(--r-pill); border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; height: auto; transition: border-color .3s, box-shadow .3s; } .woocommerce form .form-row textarea { border-radius: var(--r); min-height: 120px; resize: vertical } .woocommerce form .form-row input.input-text:focus, .woocommerce form .form-row textarea:focus, .woocommerce form .form-row select:focus, .woocommerce-page input:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 4px color-mix(in srgb, var(--violet) 18%, transparent); } .woocommerce form .form-row.woocommerce-invalid input.input-text { border-color: var(--warn) } .woocommerce form .form-row-first, .woocommerce form .form-row-last { width: 100% } .woocommerce-form__label-for-checkbox { flex-direction: row; align-items: center; gap: 10px } .woocommerce-form__label-for-checkbox input { accent-color: var(--violet-deep); width: 17px; height: 17px } .woocommerce-form__label-for-checkbox span { font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--muted); } /* select2, used only by the checkout country field */ .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: inherit; color: var(--ink); padding: 0 } .select2-container--default .select2-selection--single .select2-selection__arrow { top: 50%; transform: translateY(-50%); right: 14px } .select2-dropdown { border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: var(--r-sm); overflow: hidden; } .select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--violet-soft); color: var(--ink) } /* ---------- notices ---------- */ .woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews, .wc-block-components-notice-banner { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; list-style: none; margin: 0 0 26px; padding: 16px 22px; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font-size: 14.5px; } .woocommerce-message { border-color: color-mix(in srgb, var(--ok) 45%, transparent); background: color-mix(in srgb, var(--ok) 8%, var(--surface)) } .woocommerce-info { border-color: color-mix(in srgb, var(--violet) 55%, transparent); background: var(--violet-soft) } .woocommerce-error { border-color: color-mix(in srgb, var(--warn) 45%, transparent); background: color-mix(in srgb, var(--warn) 8%, var(--surface)) } .woocommerce-error li { list-style: none } .woocommerce-message .button, .woocommerce-info .button { margin-left: auto; padding: 9px 17px; font-size: 13.5px } /* ---------- the bag ---------- */ .woocommerce-cart-form { margin-bottom: 30px } .woocommerce table.shop_table { width: 100%; border-collapse: collapse; border: 0; margin: 0; } .woocommerce table.shop_table th { text-align: left; padding: 0 0 12px; border-bottom: 1px solid var(--line); font-family: 'Outfit', system-ui, sans-serif; font-weight: 400; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--faint); } .woocommerce table.shop_table td { padding: 20px 0; border-bottom: 1px solid var(--line-2); vertical-align: middle; } .woocommerce table.shop_table td.product-thumbnail { width: 92px; padding-right: 18px } .woocommerce table.shop_table td.product-thumbnail img { width: 74px; height: 74px; object-fit: cover; border-radius: 4px 10px 10px 4px; box-shadow: var(--shadow-sm) } .woocommerce table.shop_table td.product-name a { font-family: 'Fraunces', serif; font-size: 18px } .woocommerce table.shop_table td.product-name a:hover { color: var(--violet-deep) } .woocommerce table.shop_table td.product-price, .woocommerce table.shop_table td.product-subtotal { text-align: right; white-space: nowrap } .woocommerce table.shop_table td.product-remove { width: 40px; text-align: right } .woocommerce table.shop_table td.product-remove a.remove { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: var(--faint); font-size: 18px; line-height: 1; transition: .3s var(--ease); } .woocommerce table.shop_table td.product-remove a.remove:hover { background: var(--warn); color: #fff } .woocommerce .quantity { display: none } /* every book is sold individually */ .woocommerce .cart .actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; padding-top: 22px } .woocommerce .cart .actions .coupon { display: flex; gap: 8px; flex: 1 1 280px } .woocommerce .cart .actions .coupon input { flex: 1; padding: 11px 16px; border-radius: var(--r-pill); border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; } .woocommerce .cart .actions .coupon .button { padding: 11px 20px; font-size: 13.5px } .cart_totals { position: sticky; top: calc(var(--header-h) + 24px); padding: 26px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-sm); } .cart_totals h2 { font-size: 20px; margin-bottom: 16px } .cart_totals table.shop_table th, .cart_totals table.shop_table td { padding: 8px 0; border: 0; font-size: 15px; color: var(--muted); letter-spacing: 0; text-transform: none; } .cart_totals table.shop_table td { text-align: right; color: var(--ink) } .cart_totals table.shop_table tr.order-total th, .cart_totals table.shop_table tr.order-total td { border-top: 1px solid var(--line); padding-top: 16px; color: var(--ink); font-size: 17px; } .cart_totals table.shop_table tr.order-total td .amount { font-family: 'Fraunces', serif; font-size: 24px; font-weight: 500 } .cart_totals .checkout-button { width: 100%; margin-top: 18px; padding: 16px 30px; font-size: 16px } .cart_totals .cart-discount td { color: var(--ok) } @media (min-width: 901px) { .woocommerce-cart .woocommerce { display: grid; grid-template-columns: 1fr minmax(300px, 370px); gap: 40px; align-items: start } .woocommerce-cart .woocommerce > .woocommerce-notices-wrapper, .woocommerce-cart .woocommerce > .woocommerce-cart-form { grid-column: 1 } .woocommerce-cart .woocommerce > .cart-collaterals { grid-column: 2; grid-row: 2 } } .cart-collaterals .cross-sells { display: none } /* ---------- the bag, on a phone ----------------------------------------- A six-column table does not fit in 390px, and WooCommerce's own `shop_table_responsive` does not rescue it. Measured before this block: the table was 434px wide in a 390px viewport (60px of sideways scroll), the thumbnail column had collapsed to 18px with the covers at **zero** width, and the title column was 100px — which wrapped "30 Day Mindfulness for Better Sleep" one word per line. Below 761px the rows stop being table rows and become cards, laid out to match the checkout's order summary so the bag and the checkout look like the same object: ┌──────┬────────────────┬───┐ │ cover│ title │ × │ │ │ price │ │ └──────┴────────────────┴───┘ ------------------------------------------------------------------------ */ @media (max-width: 760px) { .woocommerce-cart table.shop_table, .woocommerce-cart table.shop_table tbody { display: block; width: 100% } .woocommerce-cart table.shop_table thead { display: none } /* Every selector below carries `table.shop_table` on purpose. The existing rules in "the bag" section above are written as `.woocommerce table.shop_table td.product-thumbnail` — (0,3,2) — and a shorter `.woocommerce-cart td.product-thumbnail` at (0,2,1) loses to them. That would leave `width: 92px` on a 54px grid column, i.e. the overflow this block exists to remove. */ .woocommerce-cart table.shop_table tr.cart_item { display: grid; grid-template-columns: 54px minmax(0, 1fr) 30px; grid-template-areas: "thumb name rm" "thumb sub rm"; column-gap: 14px; row-gap: 3px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line-2); } .woocommerce-cart table.shop_table tr.cart_item > td { display: block; width: auto; padding: 0; border: 0; vertical-align: middle; } .woocommerce-cart table.shop_table td.product-thumbnail { grid-area: thumb; align-self: start; width: 54px; padding-right: 0; } .woocommerce-cart table.shop_table td.product-thumbnail img { width: 54px; height: 70px; object-fit: cover; border-radius: 3px 8px 8px 3px; box-shadow: var(--shadow-sm); } .woocommerce-cart table.shop_table td.product-name { grid-area: name; min-width: 0 } .woocommerce-cart table.shop_table td.product-name a { font-size: 15px; line-height: 1.35 } .woocommerce-cart table.shop_table td.product-subtotal { grid-area: sub; text-align: left; font-size: 14px; color: var(--muted); } .woocommerce-cart table.shop_table td.product-remove { grid-area: rm; width: auto; text-align: right } /* Price and subtotal are the same number on a shop where everything is sold one at a time, and the quantity box is hidden site-wide for the same reason. Two of the six columns were saying nothing. Note the `tr.cart_item >` in front: without it this rule is (0,3,2) and loses to the `tr.cart_item > td { display: block }` rule above it at (0,3,3), which left both cells rendering and auto-placed into implicit grid rows. */ .woocommerce-cart table.shop_table tr.cart_item > td.product-price, .woocommerce-cart table.shop_table tr.cart_item > td.product-quantity { display: none } /* "Update cart" updates quantities, and there are no quantities to update. */ .woocommerce-cart .cart .actions .button[name="update_cart"] { display: none } .woocommerce-cart .cart .actions { padding-top: 16px } .woocommerce-cart .cart_totals { position: static; padding: 20px; border-radius: var(--r) } .woocommerce-cart .cart_totals h2 { font-size: 18px } } /* Woo's own `.woocommerce a.button` is (0,2,1) and beats a bare `.cart_totals .checkout-button` at (0,2,0), which is why the main call to action on this page was rendering at a 41px tap target. */ .woocommerce-cart .cart_totals a.checkout-button { width: 100%; margin-top: 18px; min-height: 52px; padding: 16px 30px; font-size: 16px; } /* ---------- checkout ---------------------------------------------------- Written mobile-first, because that is where it is used and where every one of the measured problems was. The rules below the `min-width: 761px` query are the phone; the query puts the desktop's two-column review back. Three things here are load-bearing: 1. `#order_review`, `#payment`, `.payment_box` and Stripe's own
each carried their own padding and border. Nested, that took a 390px screen down to about 230px of usable width and wrapped "Secure, fast checkout with Link" over three lines inside a card field it had squeezed. On the phone all four are flattened to nothing and the payment element gets the full column. 2. A
has an automatic minimum size of its min-content width, so it will not shrink below whatever Stripe puts inside it however narrow the parent gets. `min-width: 0` is what actually lets it fit. 3. The paybar is a solid fill, not `backdrop-filter`. Live blur is dropped below 900px everywhere else in this theme for the same reason — see the theme README, "Phones". ------------------------------------------------------------------------ */ .woocommerce-checkout .cm-shoppage { padding-bottom: 120px } /* clear of the paybar */ /* the page head shrinks — nobody arrives here to read a subtitle */ .woocommerce-checkout .pagehead { margin-bottom: 20px } .woocommerce-checkout .pagehead h1 { font-size: clamp(28px, 7vw, 40px) } .woocommerce-checkout .pagehead p { display: none } /* ---- steps ---- */ .cm-step-h { display: flex; align-items: center; gap: 11px; font-family: 'Fraunces', serif; font-size: 21px; font-weight: 400; margin: 0 0 6px; } .cm-step-n { display: grid; place-items: center; width: 26px; height: 26px; flex: 0 0 auto; border-radius: 50%; background: var(--violet-soft); color: var(--violet-deep); font-family: 'Outfit', system-ui, sans-serif; font-size: 13px; line-height: 1; } .cm-step-note { font-size: 13px; line-height: 1.5; color: var(--faint); margin: 0 0 18px } .woocommerce-checkout h3 { font-size: 21px; font-weight: 300; margin: 0 0 16px } #cm-step-payment { margin: 26px 0 14px } /* ---- the way back out ---- */ .cm-backrow { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0 0 18px; font-size: 14px; } .cm-backrow a { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); transition: color .25s var(--ease) } .cm-backrow a:hover { color: var(--violet-deep) } .cm-backrow svg { width: 16px; height: 16px; flex: 0 0 auto } .cm-backrow .cm-viewbag { padding: 8px 15px; border: 1.5px solid var(--line); border-radius: var(--r-pill); } .cm-backrow .cm-viewbag:hover { border-color: var(--violet) } /* ---- a cover in Woo's review table ---- */ /* The remove control, in both places a line appears. 34px is the smallest this can be and still be a comfortable target next to a price. */ .cm-rmitem { flex: 0 0 auto; display: grid; place-items: center; width: 34px; height: 34px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--faint); cursor: pointer; transition: background .25s var(--ease), color .25s var(--ease); } .cm-rmitem svg { width: 15px; height: 15px } .cm-rmitem:hover { background: color-mix(in srgb, var(--warn) 12%, transparent); color: var(--warn) } .cm-rmitem:focus-visible { outline: 2px solid var(--violet); outline-offset: 1px } .cm-rmitem.is-going { opacity: .4; pointer-events: none } .cm-revitem { display: flex; align-items: center; gap: 12px } .cm-revitem-thumb { flex: 0 0 auto } .cm-revitem-thumb img { display: block; width: 40px; height: 52px; object-fit: cover; border-radius: 3px 7px 7px 3px; box-shadow: var(--shadow-sm); } .cm-revitem-name { flex: 1 1 auto; min-width: 0 } /* ---- the order summary (the phone's only order display) ---- */ .cm-osum { margin: 0 0 22px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow-sm); } .cm-osum-bar { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 58px; padding: 14px 16px; margin: 0; border: 0; background: none; font: inherit; color: var(--ink); text-align: left; cursor: pointer; } .cm-osum-ico { width: 20px; height: 20px; flex: 0 0 auto; color: var(--violet-deep) } .cm-osum-ico svg { width: 100%; height: 100% } .cm-osum-lbl { display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; min-width: 0; font-size: 15px } .cm-osum-count { font-size: 12.5px; color: var(--faint) } .cm-osum-total { font-family: 'Fraunces', serif; font-size: 19px; white-space: nowrap } .cm-osum-chev { width: 18px; height: 18px; flex: 0 0 auto; color: var(--faint); transition: transform .3s var(--ease) } .cm-osum-chev svg { width: 100%; height: 100% } .cm-osum-bar[aria-expanded="true"] .cm-osum-chev { transform: rotate(180deg) } .cm-osum-body { padding: 0 16px 18px; border-top: 1px solid var(--line-2) } .cm-osum-body[hidden] { display: none } .cm-osum-items { list-style: none; margin: 0; padding: 15px 0 0; display: grid; gap: 14px } .cm-osum-item { display: flex; align-items: center; gap: 12px } .cm-osum-thumb { flex: 0 0 auto } .cm-osum-thumb img { display: block; width: 46px; height: 60px; object-fit: cover; border-radius: 3px 8px 8px 3px; box-shadow: var(--shadow-sm); } .cm-osum-name { flex: 1 1 auto; min-width: 0; font-size: 14px; line-height: 1.35; color: var(--ink-2) } .cm-osum-qty { color: var(--faint) } .cm-osum-price { flex: 0 0 auto; font-size: 14px; white-space: nowrap } .cm-osum-tot { display: grid; grid-template-columns: 1fr auto; gap: 9px 12px; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line-2); font-size: 14px; } .cm-osum-tot dt { color: var(--muted) } .cm-osum-tot dd { margin: 0; text-align: right } .cm-osum-tot .cm-osum-disc { color: var(--ok) } .cm-osum-rm { margin-left: 7px; color: var(--faint); font-size: 15px } .cm-osum-rm:hover { color: var(--warn) } .cm-osum-tot .cm-osum-grand { padding-top: 12px; border-top: 1px solid var(--line); color: var(--ink); font-size: 15px } .cm-osum-tot dd.cm-osum-grand { font-family: 'Fraunces', serif; font-size: 22px } .cm-coupon { margin: 18px 0 0 } .cm-coupon label { display: block; margin-bottom: 7px; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); } .cm-coupon-row { display: flex; gap: 8px } .cm-coupon-row input { flex: 1 1 auto; min-width: 0; padding: 12px 16px; border-radius: var(--r-pill); border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: 16px; /* under 16px iOS zooms the page on focus */ } .cm-coupon-row .button { flex: 0 0 auto; padding: 12px 20px; font-size: 14px } /* ---- the four fields ---- */ /* Deliberately NOT `.woocommerce form .form-row label`, which is how the rest of this file reaches a field. Measured on the live page with CSS.getMatchedStylesForNode, that chain matches the input and not the label, so the label was falling all the way back to the inherited 16px body size. Addressing `.form-row > label` directly is what actually lands. The label is also sentence case here rather than the theme's 12.5px letterspaced uppercase. Uppercase is a fine label for a newsletter box; at checkout, on a phone, it is small, slower to read, and it made "EMAIL ADDRESS *" take a whole line to say one word more quietly. */ .woocommerce-checkout .form-row { display: flex; flex-direction: column; margin: 0 0 14px; padding: 0 } .woocommerce-checkout .form-row > label { display: block; margin: 0 0 6px; font-size: 13.5px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--muted); } .woocommerce-checkout .form-row > label .required { color: var(--warn); text-decoration: none; border: 0 } .woocommerce-checkout .form-row input.input-text, .woocommerce-checkout .form-row select { padding: 13px 17px; font-size: 16px } .woocommerce-checkout .form-row .description { margin: 5px 0 0; font-size: 12.5px; letter-spacing: 0; text-transform: none; color: var(--faint); } /* First and last name share a row: one line instead of two, nothing given up */ .woocommerce-billing-fields__field-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px } .woocommerce-billing-fields__field-wrapper .form-row-wide, .woocommerce-billing-fields__field-wrapper .form-row-full { grid-column: 1 / -1 } .woocommerce-checkout #customer_details { margin-bottom: 0 } .woocommerce-checkout #customer_details .col-1, .woocommerce-checkout #customer_details .col-2 { width: auto; float: none } /* ---- the order review block, flattened on the phone ---- */ #order_review { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none } #order_review_heading { display: none } .woocommerce-checkout-review-order-table { display: none } #payment { margin-top: 0; background: none; border-radius: 0 } #payment ul.payment_methods { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px } #payment ul.payment_methods li { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-width: 0; padding: 13px 15px; border: 1.5px solid var(--line); border-radius: var(--r-sm); background: var(--surface); cursor: pointer; transition: border-color .3s var(--ease); } #payment ul.payment_methods li.cm-chosen { border-color: var(--violet) } #payment ul.payment_methods li input { accent-color: var(--violet-deep); width: 17px; height: 17px; flex: 0 0 auto } #payment ul.payment_methods li label { font-size: 15px; margin: 0; cursor: pointer } #payment ul.payment_methods li img { max-height: 24px; width: auto; margin-left: auto } /* A single gateway is not a choice. The row loses its card, its border and its label, and the payment element is simply what is under the "2 Payment" heading. checkout.js sets the class, because the count is only knowable after Woo has decided which gateways are available for this cart. */ #payment ul.payment_methods.cm-one-method > li { padding: 0; border: 0; border-radius: 0; background: none; } #payment ul.payment_methods.cm-one-method > li > label { display: none } #payment ul.payment_methods.cm-one-method div.payment_box { margin: 0 } #payment div.payment_box { flex: 1 0 100%; min-width: 0; margin: 12px 0 0; padding: 0; background: none; border: 0; border-radius: 0; font-size: 13.5px; color: var(--muted); } #payment div.payment_box::before { display: none } #payment div.payment_box p:last-child { margin: 0 } /* A fieldset will not shrink below its min-content width without this, which is most of why the card field was cramped. */ #payment fieldset, #payment #wc-stripe-upe-form { min-width: 0; margin: 0; padding: 0; border: 0 } #payment .wc-stripe-upe-element, #payment .wc-stripe-upe-element iframe { width: 100% } #payment .woocommerce-SavedPaymentMethods { list-style: none; margin: 0 0 12px; padding: 0 } /* The terms row is a