/* ================================================================== THE PRODUCT PAGE AT TABLET AND PHONE WIDTHS Its own file rather than more of ux.css: ux.css is render-blocking on every page of the site and is being edited by other hands at the same time as this. AF_Product::assets() queues this at priority 1005 with a dependency on af-ux, so it prints after ux.css and a plain rule of the same specificity wins on source order - the !important here is only where XStore or ux.css already said !important. Every number below was measured in a headless Chrome at a real device viewport (--window-size floors at 500px on this machine and cannot test a phone; the CDP harness sets the metrics directly). The widths checked are 360, 390, 414, 768, 834, 1024, 1440 and 1920. Audience: smallholders mostly past fifty, on a phone, often outdoors. 44px is the floor for anything you have to hit and 13px for anything you have to read; this page mostly holds itself to 48-56px and 15px. ================================================================== */ /* ================================================================== 1. THE BUY ROW - quantity and "Adaugă în coș" What the owner photographed at 390px, and what the measurements say about it: .af-qty-label 296 x 25 "Cantitate", a full-width row of its own .quantity 186 x 56 centred, 55px of nothing either side add-to-cart 200 x 56 centred, 48px of nothing either side and no words on it at all - a green pill with a trolley glyph and nothing else Two faults in the layout, and a third thing that turned out to be a decision rather than a fault: a) Both controls were centred islands. Measured: .quantity at x=102 inside a form at x=47 - (296-186)/2 = 55 - and the button at x=95, (296-200)/2 = 48. Two short pills floating mid-column read as decoration, not as the thing to press. The centring was not a justify-content. The form computed `flex-direction:column` at phone widths, so the two controls were stacked down the cross axis and `align-items:center` - the right value for a row - was centring them across it. Asked the browser for the computed style rather than reading the stylesheets; justify-content was already flex-start and changing it did nothing at all. b) They were wider than they need to be and so could never share a line, which is what forced the stacking. The owner asked for both to be narrower - "in terms of width only" - so the heights stay at the 56px the basket page standardised on, and the widths come in: the number field from 72px to 44, the steppers from 56 wide to 48 (still 56 tall), the button from a pinned 200px to what is left of the row. The two now share one line at every width from 360px up. c) The button carries the trolley and no words on a phone. That was read as a fault first - the primary action of the whole shop as an unlabelled glyph - and the words were put back. The owner looked at both and chose the mark: the same trolley is the add-to-cart control on the grid cards, the list rows and the related shelf, so on a phone it is a symbol this shop's visitors meet everywhere. The words come back the moment the page has room for them. See the button's own section below for how, and for what keeps it usable to somebody who cannot see the glyph. Heights are NOT touched: 56px for the steppers, the number field and the button, exactly as inc/checkout/assets/cart.css sets them, so the two pages are one design rather than three. ================================================================== */ /* Left-aligned, and allowed to wrap only when the words would not fit. The centring was never a justify-content: the form computed `flex-direction:column` on a phone, so the two controls were stacked down the cross axis and `align-items:center` - which is the right value for a row - was centring them horizontally instead. Asked the browser for the computed style rather than reading the stylesheets: justify-content was already flex-start and made no difference. Row, therefore, with wrap: at 360px - still a common Android width - the button drops to a second line at its own natural size, left aligned like everything else, rather than being squeezed or clipped. */ body.single-product .af-buy form.cart{ display:flex!important; flex-direction:row!important; flex-wrap:wrap!important; align-items:center!important; justify-content:flex-start!important; gap:10px 12px!important; } /* "Cantitate" keeps its own line above the controls - it labels both of them, and at 15px beside a 166px pill it wrapped mid-word. */ body.single-product .af-buy form.cart .af-qty-label{ flex:0 0 100%!important; margin:0 0 8px!important; font-size:15px!important; font-weight:600!important; line-height:1.3!important; color:#5a5a5f!important; } /* The pill sizes to its parts and never stretches or centres. */ body.single-product .af-buy form.cart .quantity, body.single-product .af-buy form.cart .quantity-wrapper{ flex:0 0 auto!important; width:auto!important; margin:0!important; } /* The number field is the part the owner named. 68px of field for a value that is "1" on every visit and rarely reaches two digits; 52px still shows three digits at 20px without clipping. Height untouched. min-width has to be said as well as width: ux.css carries `.quantity .qty{min-width:72px}`, and a min-width floors a width however important the width is. That rule is also why the field measured 72px while the stylesheet above it asked for 68. */ body.single-product .af-buy form.cart .quantity-wrapper input.qty{ width:52px!important; min-width:0!important; max-width:none!important; height:56px!important; font-size:20px!important; } /* The steppers keep the basket page's 56x56 exactly. */ body.single-product .af-buy form.cart .quantity-wrapper .minus, body.single-product .af-buy form.cart .quantity-wrapper .plus{ width:56px!important; min-width:56px!important; height:56px!important; } /* ---- the button: a trolley on a phone, words on everything wider ---- The owner looked at both and chose the mark for the phone: the same trolley is already the add-to-cart control on the grid cards, the list rows and the related shelf, so on a phone it is a symbol this shop's visitors meet everywhere rather than an unexplained glyph - and a 200px pill of Romanian is a lot of a 296px column. Nothing is drawn for it. AF_Grid::run() already rewrites this button to `Adaugă în coș`, and sets aria-label and title from the button's own text, so the control keeps its accessible name with or without visible words. That is the same ICON constant the cards use - one trolley, one piece of markup, not a second near-identical glyph. The breakpoint is the page's own, not a round number: 760px is where .af-pdp drops from two columns to one, so the mark is used exactly where the buy card is the full width of a phone and the words come back the moment the page is a two-column layout. Measured at 768px, the narrowest the labelled version ever is: stepper 142 + gap 12 + button 132 = 286px inside a 293px column. */ body.single-product .af-buy form.cart .single_add_to_cart_button.af-cart-icon-btn{ height:56px!important; min-height:56px!important; max-height:56px!important; min-width:0!important; /* ux.css pins this to 200px */ max-width:100%!important; width:auto!important; text-transform:none!important; letter-spacing:0!important; align-self:center!important; } /* ---- phone: the mark ---- Takes what the row has left over rather than a fixed width, so the stepper and the button always share one line, and capped so that on a 600px phone in landscape it does not become a banner. 96px is the floor: twice the 48px this shop holds itself to, on the one control the whole page exists for. */ @media (max-width:760px){ body.single-product .af-buy form.cart .single_add_to_cart_button.af-cart-icon-btn{ flex:1 1 96px!important; min-width:96px!important; max-width:168px!important; padding:0!important; font-size:0!important; /* the label span stays clipped */ } body.single-product .af-buy form.cart .single_add_to_cart_button.af-cart-icon-btn > svg{ width:26px!important; height:26px!important; } } /* ---- tablet and desktop: the words ---- .af-cart-icon-btn sets font-size:0 and clips the label span; both are undone here, and only inside .af-buy above the phone layout, so the grid cards and the quick-view popup keep the icon-only button they were designed for at every width. The trolley comes off when the words go on: the glyph and its gap cost 34px, and a button that says what it does does not also need to draw it. */ @media (min-width:761px){ body.single-product .af-buy form.cart .single_add_to_cart_button.af-cart-icon-btn{ /* Sized to the words. flex:0 1 auto with nowrap text means it can never be made narrower than "Adaugă în coș" - so the label cannot truncate at any width - and when it will not fit beside the stepper it wraps to its own line at its natural width instead. */ flex:0 1 auto!important; padding:0 18px!important; gap:0!important; font-size:17px!important; font-weight:700!important; line-height:1!important; white-space:nowrap!important; } body.single-product .af-buy form.cart .single_add_to_cart_button.af-cart-icon-btn > svg{ display:none!important; } /* The Romanian, unclipped. ux.css clips this span with !important on every property, so every one of them has to be answered. */ body.single-product .af-buy form.cart .single_add_to_cart_button.af-cart-icon-btn .screen-reader-text{ position:static!important; width:auto!important; height:auto!important; margin:0!important; padding:0!important; overflow:visible!important; clip:auto!important; clip-path:none!important; white-space:nowrap!important; border:0!important; font-size:inherit!important; line-height:inherit!important; color:inherit!important; } } /* ---- phones and the narrow tablet column ---- Below 901px the buy column is either the whole phone screen minus its gutters (296px at 390) or one half of a two-column tablet layout (293px at 768) - in both cases too narrow for a 166px pill and a labelled button on one line. The pill loses 24px of width and keeps every pixel of its height: 48x56 steppers and a 44px field. Measured after: pill 142x56, button 134x56, and the two sit on one row from 390px upward. At 360px the button wraps to a second left-aligned row at its own width - never stretched, never centred, never cut. */ @media (max-width:900px){ body.single-product .af-buy form.cart .quantity-wrapper .minus, body.single-product .af-buy form.cart .quantity-wrapper .plus{ width:48px!important; min-width:48px!important; height:56px!important; /* unchanged - width only */ } body.single-product .af-buy form.cart .quantity-wrapper input.qty{ width:44px!important; min-width:0!important; height:56px!important; /* unchanged - width only */ font-size:19px!important; } } /* The labelled button on the narrow two-column tablet band only. Kept out of the block above because below 761px this button carries no words at all, and a 16px font and 32px of side padding on a control whose content is a 26px glyph is 32px of width bought for nothing. */ @media (min-width:761px) and (max-width:900px){ body.single-product .af-buy form.cart .single_add_to_cart_button.af-cart-icon-btn{ padding:0 16px!important; font-size:16px!important; /* still over the 13px floor by a margin */ } } /* ================================================================== 2. THE STICKY BUY BAR Measured at 390px before this: .af-sticky__inner is flex-wrap:nowrap and its scrollWidth was 434px inside a 390px window - 44px of the bar hanging off the right, which is the truncated "Adaugă în" the owner photographed. The left-hand clipping in the same photograph is the other end of the same fault: .af-sticky__meta was squeezed to 0x60 with a scrollWidth of 31, so the tail of "În stoc" spilled out of a zero-width box and showed as a stray glyph in front of the price. The bar was carrying five things on a 390px screen - thumbnail, name and stock, price, a stepper, and the button. Three of them are repetitions of what is a few centimetres up the same page. What it carries now, by width: up to 560px price + "Adaugă în coș" 561-767px price + stepper + "Adaugă în coș" 768px and up unchanged: thumbnail, name, stock, price, stepper, button The stepper is the one worth thinking about before dropping. It is dropped below 561px rather than shrunk because a 142px control cannot be fitted beside a 68px price and a 134px button inside 328px of usable bar, and because the full stepper is still on the page: the bar only appears once the buy card has scrolled past, and the shopper set the quantity there. sticky.js reads that field when its own is not on screen, so a quantity of 3 chosen in the card is still a quantity of 3 when the bar adds it. ================================================================== */ /* Nothing in the bar may spill, whatever the product name is. */ .af-sticky__inner{ min-width:0; } .af-sticky__meta{ min-width:0; overflow:hidden; } /* The name already clips with an ellipsis; the stock line did not, and it is the line that showed through the collapsed box. */ .af-sticky__stock{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* The button is the one thing in the bar that must never be made smaller than its words. */ .af-sticky__cta{ flex:0 0 auto; white-space:nowrap; } @media (max-width:767px){ /* The name is back at the owner's request. A buy bar that does not say what you are buying is a poor trade on a long product page, where the title scrolled off the top a long time ago. The room comes from the thumbnail, the stock line and the stepper standing down instead - see ux.css - so the bar still fits without wrapping. Only the stock line goes: it is the product page's own stock row repeated 30px from where it already is. */ .af-sticky__meta{display:block!important;flex:1 1 auto!important;min-width:0!important} .af-sticky__stock{display:none!important} /* The price leads, the action fills what is left. */ .af-sticky__price{flex:0 0 auto;font-size:18px} .af-sticky__cta{ flex:1 1 auto; justify-content:center; min-height:52px; /* the bar's own floor, over the 44px rule */ padding:0 20px; font-size:16px; } } @media (max-width:560px){ /* Measured at 360px: 32px of padding + 68px price + 10px gap leaves 250px, and "Adaugă în coș" at 16px needs 134px of button. With the stepper still in the row the requirement was 402px against 328px of bar, which is the 44px overflow plus the stepper. */ .af-sticky__qty{display:none!important} } /* ================================================================== 3. "PRODUSE SIMILARE" - the related shelf, uncut Photographed on a phone: each card renders its image, title and price, then the quantity field and the green button are sliced through horizontally and the rest of the card is gone. Read down the card's own tree at 390px rather than guessed at, and it is one box: .swiper-slide 170 x 301 overflow visible .product-hover-slider 160 x 263 overflow visible .content-product 160 x 263 overflow visible .product-details 134 x 118 overflow visible h2.product-title 134 x 60 .af-card-actions 134 x 52 <- 52px tall, 112px of content span.price 134 x 52 .show-quickly 52 x 52 } these two are on a second a.add_to_cart 74 x 52 } line, 60px below the box The action row is laid out for a card wide enough to hold the price and the two icon buttons on one line. In this shelf at 390px a card is 134px wide and 86 + 52 + 74 = 212px of content, so the buttons wrap to a second line - and the row keeps a fixed 52px, so the second line hangs 60px outside it. Everything above it sizes to content and is innocent; the only box with overflow:hidden is .swiper-container, eight levels up, which is what finally does the cutting. That is the green button sliced through the middle in the photograph. So the row is told it may be two lines tall when it has to be. 52px stays as the floor, so a card that does fit on one line is unchanged - measured at 768px and above: "no clip" before this and after it. Scoped to the related shelf on the product page. The same class is on the shop grid and in the list view, which are other modules' files and other modules' measurements. ================================================================== */ /* The box may grow at any width - a long price on a narrow card is not a thing this stylesheet can predict - but it is only told it may take a second line where the card is too narrow to hold one. That gate is measured, not guessed: the row fitted on one line at 768px and above before any of this ("no clip"), and letting it wrap there made the 1920px cards 60px taller for nothing. Below 768px the items shrink rather than wrap, which is what they did before. */ .af-pdp [data-af-pdp="related"] .af-card-actions{ height:auto!important; min-height:52px; } @media (max-width:767px){ .af-pdp [data-af-pdp="related"] .af-card-actions{ flex-wrap:wrap; row-gap:8px; } } /* Nothing between the row and the frame may hold a height of its own either, or the extra line would simply be clipped one level up. */ .af-pdp [data-af-pdp="related"] .swiper-container, .af-pdp [data-af-pdp="related"] .swiper-wrapper, .af-pdp [data-af-pdp="related"] .swiper-entry, .af-pdp [data-af-pdp="related"] .product-hover-slider, .af-pdp [data-af-pdp="related"] .content-product, .af-pdp [data-af-pdp="related"] .product-details{ height:auto!important; max-height:none!important; } /* A card and the frame around it end at the same place. */ .af-pdp [data-af-pdp="related"] .swiper-slide{ height:auto!important; } /* ---- the arrows ---- 50x50 each, which clears the 44px floor, but at 390px they were absolutely positioned at top:150px - which on a 301px card is the product title. Both of them sat on the words, which is what the owner's screenshot shows. They move up onto the photograph, where every carousel this audience has used puts them and where they cover nothing that has to be read. Two values rather than one because the photograph is a different share of the card at each end. Measured from the slide's top edge, the image band runs 23px to 123px at 390px and 23px to about 278px at 1440px. A flat 48px sits inside it on a phone; a percentage sits inside it on a desktop and does not creep down onto the title as the card grows. Both were checked against the title's own box at every width, not assumed. */ .af-pdp [data-af-pdp="related"] .swiper-button-prev, .af-pdp [data-af-pdp="related"] .swiper-button-next{ top:48px!important; margin-top:0!important; } @media (min-width:768px){ .af-pdp [data-af-pdp="related"] .swiper-button-prev, .af-pdp [data-af-pdp="related"] .swiper-button-next{ top:26%!important; } } /* The card's name is a link, and on a wide screen it is a short one. Measured at 1920px: four of the seven titles fit on one line and came out 409x32 - the only targets left under 44px anywhere on this page that are not either an inline link in a sentence or a deliberately hidden input. A two-line title was already 60px, so this only ever adds height to the short ones. */ .af-pdp [data-af-pdp="related"] .product-title a{ display:flex; align-items:center; justify-content:center; /* the cards are centre-aligned in this theme */ min-height:44px; } /* A white disc rather than a bare glyph: on a photograph of a galvanised feeder a grey chevron is invisible. */ .af-pdp [data-af-pdp="related"] .swiper-button-prev, .af-pdp [data-af-pdp="related"] .swiper-button-next{ width:48px!important; height:48px!important; border-radius:999px; background:rgba(255,255,255,.94); box-shadow:0 2px 10px rgba(0,0,0,.16); } /* ================================================================== 4. THE REVIEWS BLOCK Tested with a review present and with the reply form open, because that is the state this section has repeatedly broken in and the two test products both had zero reviews until one was put in. ================================================================== */ /* ---- the five stars you rate with ---- Each star is a 44x44 target already. But at 390px the row needs 5 x 44 plus four 20px gaps = 300px inside 258px of form, so the fifth star wrapped onto a second line: a five-star control that shows four stars and then one on its own, to an audience that will read that as four. An 8px gap brings the row to 252px and all five back onto one line. The targets themselves are untouched. */ @media (max-width:767px){ #reviews #commentform .stars span, #reviews #respond .stars span{ display:inline-flex; flex-wrap:nowrap; gap:8px; } #reviews #commentform .stars a, #reviews #respond .stars a{ margin:0!important; width:44px!important; height:44px!important; } } /* ---- "Salvează-mi numele..." ---- The checkbox measured 20x20 at every width tested - the smallest control anywhere on the product page and less than half the 44px floor. Its