/* =========================================================================== A Flying Wish — mobile fixes (2026-09-28) Presentation only. Nothing here touches the cart form's markup, nonce, variation matching or submit path — that is the payment path on a shop taking real orders and it stays WooCommerce's. ── THE BUG ────────────────────────────────────────────────────────────────────────────── The Add to cart label carries the price ("Add to cart - $70.00") and the button is a flex row with a FIXED height and `overflow: hidden`. A flex row does not wrap unless told to, so the label cannot break — it is simply cut off. Measured at 390px on 2026-09-28: outfit product button 316px wide, label needs 397-432px plush / variable button 160px wide, label needs 219px ── ⚠️ WHY THE FIRST ATTEMPT SILENTLY DID NOTHING ──────────────────────────────────────── `flex: 1 1 100%` already exists in product.css at <=560px and is not the fix: widening a 316px box does not help a 432px label. The real blocker is a cascade one. Chrome's matched-rules dump named the winner: .afw-p--lux .afw-p-info .afw-p-cart .single_add_to_cart_button.button (0,5,0) height: 52px; min-height: 52px; padding-top: 0; padding-bottom: 0 .afw-p-info .afw-p-cart .single_add_to_cart_button.button (0,4,0) overflow: hidden; padding: 17px 34px The first version of this file used `.afw-p-cart form.cart .single_add_to_cart_button` — (0,3,1). It lost, and losing on specificity produces NO error anywhere: the width rules applied, the padding and height rules did not, and the button still clipped. ⚠️ EVERY SELECTOR BELOW IS (0,6,1) ON PURPOSE. Do not "tidy" them shorter — the length IS the mechanism. If this file ever stops working, dump the matched rules again before editing values. =========================================================================== */ /* ── 1 · let the label wrap, and let the button grow to hold it ─────────────────────────── `height: auto` + `min-height: 52px` keeps the tap target on one-line labels while allowing a second line where the price makes it longer. 52px stays above the accessible tap-target floor. */ .afw-p .afw-p-info .afw-p-cart form.cart .single_add_to_cart_button.button, .afw-p .afw-p-info .afw-p-cart .woocommerce-variation-add-to-cart .single_add_to_cart_button.button { display: flex; flex-wrap: wrap; /* THE fix — a flex row cannot break a line without this */ align-items: center; justify-content: center; gap: 0 8px; height: auto; min-height: 52px; padding: 12px 20px; line-height: 1.25; white-space: normal; text-align: center; overflow: visible; /* nothing is clipped once the box can grow */ text-overflow: clip; hyphens: none; } /* the label and the price are separate nodes; each stays whole, and the break happens between them rather than through the middle of "$70.00" */ .afw-p .afw-p-info .afw-p-cart form.cart .single_add_to_cart_button.button > *, .afw-p .afw-p-info .afw-p-cart .woocommerce-variation-add-to-cart .single_add_to_cart_button.button > * { white-space: nowrap; } /* ── 2 · phones: the action gets its own full-width line ────────────────────────────────── At 390px the quantity stepper takes 126px of a 316px row, leaving 160px for a 219px label. No amount of wrapping makes that read well, so the two stop sharing a line. It also puts the primary action on a full-width target, which is what a thumb wants. */ @media (max-width: 560px) { .afw-p .afw-p-info .afw-p-cart form.cart, .afw-p .afw-p-info .afw-p-cart .woocommerce-variation-add-to-cart { flex-direction: column; align-items: stretch; gap: 10px; } .afw-p .afw-p-info .afw-p-cart form.cart .quantity, .afw-p .afw-p-info .afw-p-cart .woocommerce-variation-add-to-cart .quantity { flex: 0 0 auto; width: 100%; justify-content: space-between; } .afw-p .afw-p-info .afw-p-cart form.cart .single_add_to_cart_button.button, .afw-p .afw-p-info .afw-p-cart .woocommerce-variation-add-to-cart .single_add_to_cart_button.button { width: 100%; flex: 0 0 auto; padding: 14px 16px; /* 34px each side was eating 68px of a 316px box */ font-size: 15px; } } /* ═══════════════════════════════════════════════════════════════════════════════════════════ THE CART ROW — the product name was rendering ONE CHARACTER PER LINE on a phone ═══════════════════════════════════════════════════════════════════════════════════════════ Measured on /shop-cart/ at 390px, 2026-09-28: computed grid-template-columns: 88px 0px 132px 110px 36px ^^^ the product-name track commerce.css already contains the correct mobile layout at line 608 — a three-column, two-row grid with named areas ("media body remove" / "media qty sub"). It never applies, because a LATER rule with HIGHER specificity and NO media query re-declares the desktop template: @media (max-width: 720px) .afw-cartrow (0,1,0) 3 columns <- intended body.afw-cart .afw-cartrow (no media query) (0,2,1) 5 columns <- wins Five fixed tracks (88+132+110+36) plus four 20px gaps need 446px inside a 316px row, so `minmax(0, 1fr)` is squeezed to exactly 0 and every character of the name wraps onto its own line. Nothing overflows and no error is raised — the row simply becomes unreadable. ⚠️ This is the SAME class of bug as the Add-to-cart clipping above: a correct rule losing to a more specific one that forgot its media query. commerce.css carries a comment from a previous round of this ("THE ROW COLLAPSED TO ONE LETTER PER LINE AND THE CAUSE WAS NOT IN OUR CSS") which was true then and is not true now — this time the cause is in our CSS. ⚠️ `.afw-cartrow.afw-cartrow` is a deliberate doubled class. It lifts specificity to (0,3,1), above the (0,2,1) rule that wins today, without inventing an ancestor selector that might not exist in the markup and would then match nothing at all. Do not "clean up" the repetition. ═══════════════════════════════════════════════════════════════════════════════════════════ */ @media (max-width: 720px) { body.afw-cart .afw-cartrow.afw-cartrow { grid-template-columns: 76px minmax(0, 1fr) 30px; grid-template-areas: "media body remove" "media qty sub"; gap: 10px 14px; align-items: start; } body.afw-cart .afw-cartrow.afw-cartrow .afw-cartrow-media { grid-area: media; align-self: start; } body.afw-cart .afw-cartrow.afw-cartrow .afw-cartrow-body { grid-area: body; min-width: 0; } body.afw-cart .afw-cartrow.afw-cartrow .afw-cartrow-qty { grid-area: qty; } body.afw-cart .afw-cartrow.afw-cartrow .afw-cartrow-sub { grid-area: sub; text-align: right; align-self: center; } body.afw-cart .afw-cartrow.afw-cartrow .afw-cartrow-remove { grid-area: remove; align-self: start; } body.afw-cart .afw-cartrow.afw-cartrow .afw-cartrow-media img { width: 76px; height: 76px; } /* the column-label header belongs to the five-column desktop table and means nothing against a two-row card, where every value already sits next to what it describes */ body.afw-cart .afw-cartlist-head { display: none; } /* a long product name must be allowed to break rather than force the track wider */ body.afw-cart .afw-cartrow.afw-cartrow .afw-cartrow-name, body.afw-cart .afw-cartrow.afw-cartrow .afw-cartrow-body > a { overflow-wrap: anywhere; } } /* ═══════════════════════════════════════════════════════════════════════════════════════════ CART PAGE — the "More outfits" cards stuck out past the right edge of their panel ═══════════════════════════════════════════════════════════════════════════════════════════ Measured on /shop-cart/ at 390px, 2026-09-28: ul.afw-reco-list width 280px, but its single grid column computed to 330px li.afw-reco-item 48px | 180px | 58px + gaps + padding = 330px -> right edge at 385 the panel itself ends at 354 The middle (name) column carries a 180px floor, and the list's one column is content-sized, so the card cannot shrink below 330px and overhangs its panel by 31px. Both tracks are made shrinkable here; the name wraps instead of pushing the card wider. Same doubled-class device as the cart row above, for the same reason. Cart page only: the identical cards inside the product page's side drawer have the room and are left alone. */ @media (max-width: 720px) { body.afw-cart .afw-cartpage-main .afw-reco-list.afw-reco-list { grid-template-columns: minmax(0, 1fr); } body.afw-cart .afw-cartpage-main .afw-reco-item.afw-reco-item { grid-template-columns: 48px minmax(0, 1fr) auto; width: auto; min-width: 0; max-width: 100%; } /* every cell may shrink EXCEPT the Add button, which keeps its own 58px floor: the first version of this rule used a bare `> *` and squeezed the button to 48px */ body.afw-cart .afw-cartpage-main .afw-reco-item.afw-reco-item > *:not(.afw-reco-add) { min-width: 0; } body.afw-cart .afw-cartpage-main .afw-reco-item.afw-reco-item a:not(.afw-reco-add) { overflow-wrap: anywhere; } } /* ═══════════════════════════════════════════════════════════════════════════════════════════ "I HAVE TO TAP ADD TO CART TWICE" — the iOS hover trap ═══════════════════════════════════════════════════════════════════════════════════════════ Owner, 2026-09-28, iPhone: the first tap on Add to cart does nothing, the second works. Could not be reproduced in headless Chrome at all — real touch events, real coordinates, throttled network, nothing painted over the button, drawer opened on tap 1 every time. That is the tell. The owner's screenshot is Chrome on iPhone, which is Apple's WebKit engine, and WebKit has a behaviour Chrome's engine does not: When a tap target has a :hover rule that CHANGES ITS APPEARANCE, iOS spends the first tap entering the hover state and does not fire click. The second tap fires click. product.css gives this button a full hover treatment — new background gradient, border, colour, a 1px lift, a box-shadow and a `::after` shine that sweeps across on hover (product.css ~1880-1911). A later mobile block at ~2284 already neutralises the `transform` for exactly this reason, but leaves the colour, border, shadow and the shine sweep in place. iOS counts any of them, so the trap is still armed. THE FIX: hover styling exists for devices that can hover. Under `(hover: none)` — phones and tablets — the :hover state is made visually identical to the resting state, so there is nothing for WebKit to "enter" and the first tap goes straight to click. Desktop is untouched. ⚠️ CANNOT BE VERIFIED FROM THIS MACHINE. Headless Chrome will never reproduce a WebKit-only behaviour, so the pass/fail for this comes only from the owner's own phone. It is safe to ship blind because it is presentation-only and touch-only: the worst case is "still two taps". ⚠️ Specificity (0,7,1) on purpose — the hover rules being neutralised are (0,5,0). Same lesson as the two bugs above: shorter selectors lose silently. ═══════════════════════════════════════════════════════════════════════════════════════════ */ @media (hover: none) { .afw-p .afw-p-info .afw-p-cart form.cart .single_add_to_cart_button.button:hover, .afw-p .afw-p-info .afw-p-cart .woocommerce-variation-add-to-cart .single_add_to_cart_button.button:hover { /* The RESTING look, restated exactly. Nothing may differ from the un-hovered button or iOS still sees a change and the trap stays armed. ⚠️ These are the COMPUTED resting values read from the live page at 390px on 2026-09-28 (scratchpad/tapprobe2.js) — not copied from a source rule, because the resting style is assembled from several rules in product.css and the first draft of this block guessed them wrong (176deg / #7a62a8 / a dark border). If the button's resting design changes, re-read the computed values and update these lines together. */ background: linear-gradient(135deg, rgb(138, 100, 214) 0%, rgb(120, 80, 192) 45%, rgb(91, 59, 163) 100%); border-color: rgb(255, 255, 255); color: rgb(255, 255, 255); transform: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 1px 2px rgba(28, 26, 34, 0.08), 0 8px 22px rgba(95, 74, 138, 0.22); } /* the shine sweep never moves on a touch device */ .afw-p .afw-p-info .afw-p-cart form.cart .single_add_to_cart_button.button:hover::after, .afw-p .afw-p-info .afw-p-cart .woocommerce-variation-add-to-cart .single_add_to_cart_button.button:hover::after { transform: translateX(0); transition: none; } /* the same trap, one button over: Buy it now */ .afw-p .afw-p-info .afw-p-cart form.cart .em-buy-now-button:hover, .afw-p .afw-p-info .afw-p-cart form.cart .buy-now-button:hover { transform: none; background: transparent; } } /* Tells iOS this control has no double-tap gesture, so it stops waiting to see whether a second tap is coming before it delivers the first. Removes the "did it register?" pause that makes a customer tap again even when the first tap did work. Safe everywhere; no effect on desktop. */ .afw-p .afw-p-info .afw-p-cart form.cart .single_add_to_cart_button.button, .afw-p .afw-p-info .afw-p-cart .woocommerce-variation-add-to-cart .single_add_to_cart_button.button, .afw-p .afw-p-info .afw-p-cart form.cart .em-buy-now-button, .afw-p .afw-p-info .afw-p-cart form.cart .buy-now-button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; } /* ── 3 · nothing on a product page may scroll sideways ──────────────────────────────────── One overflowing child drags the whole document wider than the viewport, and on a phone that reads as a broken page even when everything else is right. A guard, not a fix: if it ever starts doing real work, something above it has regressed. */ @media (max-width: 560px) { .afw-p img, .afw-p table { max-width: 100%; } .afw-p { overflow-x: clip; } }