s with no height attribute to honour. `height:auto` is the standard companion to `max-width:100%`. With it, the aspect-ratio already on .ph-img decides the shape and object-fit crops the photo to fill rather than squashing it. The hero is deliberately untouched — .hero-slide img.ph-img sets its own height and is more specific, so the slider keeps the behaviour you already signed off. */ img{height:auto} /* ---------- 42. Media boxes: the actual root fix ---------- Setting height:auto and an aspect-ratio on the itself was still the wrong shape of solution. The image remained *in the document flow*, so its intrinsic dimensions still had a say in how tall its parent grew, and any rule that failed to apply — a more specific selector somewhere, an attribute the browser preferred — put a thousand-pixel photo back into the layout. The reliable pattern is to take the image out of the flow entirely. .card-media is a fixed-ratio box; the image inside is absolutely positioned to fill it. An absolutely positioned element contributes nothing to its parent's size, so the card's height is decided by the ratio and by nothing else. Upload a panorama, a portrait, a 5000px scan — the grid does not move. object-fit:cover crops to fill rather than squashing, and object-position:center takes the crop from the middle. */ .card-media{position:relative;display:block;overflow:hidden;background:var(--color-bg)} .card-media > .ph-img, .card-media > img, .card-media > picture{position:absolute;inset:0;width:100%;height:100%;margin:0;border-radius:0;aspect-ratio:auto;object-fit:cover;object-position:center} .card-media > picture img{width:100%;height:100%;object-fit:cover} /* The ratio each context wants. One place, one answer. */ .product-card__link.card-media{aspect-ratio:1/1} .category-card .card-media{aspect-ratio:1/0.66} .post-card .card-media{aspect-ratio:16/10} /* The gallery frames get the same treatment — they had no ratio at all, so `height:100%` on the image was resolving against an auto-height parent, which is no constraint whatsoever. */ .gallery-main, .gallery-thumb{position:relative;overflow:hidden;aspect-ratio:1/1} .gallery-main > .ph-img, .gallery-main > img, .gallery-thumb > .ph-img, .gallery-thumb > img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;border-radius:0} .gallery-badges{z-index:3} @media (max-width:768px){ .category-card .card-media{aspect-ratio:1/0.62} } /* ============================================================ 42. LAYOUT CANNOT BE BROKEN BY AN IMAGE — the root fix ============================================================ Last version I fixed the wrong half of this. `height:auto` stopped a photo being stretched, but it did not stop a photo making its container wider than the layout allows. That is what was still breaking the phone. The mechanism, because it is worth knowing — it catches everyone once: Grid and flex children have `min-width: auto` by default, not zero. "Auto" means *do not shrink below my content*. An image is content, and a 1000px image is 1000px of it. So the card refuses to be 200px wide, the flex item grows to 1000px, the row overflows, and the page looks broken. Placeholders never triggered it because a

has no intrinsic width to defend. There is a second half. A flex item sized only with `min-width: 52%` has no *definite* width — min-width is a floor, not a size. So `width: 100%` on the image inside has nothing to resolve against, the browser falls back to the image's intrinsic width, and that feeds straight back into the flex item. `flex: 0 0 52%` gives a definite basis and the circle is broken. Both fixes below. After this, an image of any dimensions can be uploaded and the layout holds. */ /* 1. Nothing that holds an image may refuse to shrink. */ .product-grid > *, .product-carousel > *, .category-grid > *, .magazine-grid > *, .cart-layout > *, .shop-layout > *, .checkout-layout > *, .account-layout > *, .contact-layout > *, .legal-layout > *, .address-book > *, .request-card > *, .gallery-thumbs > *{min-width:0;min-height:0} /* 2. Carousel cards get a definite width, not just a floor. One rule per breakpoint, in one place, so there is a single answer to "how wide is a card". */ @media (max-width:1024px){ .product-carousel .product-card{flex:0 0 calc(33.333% - var(--space-3));min-width:0} } @media (max-width:768px){ .product-carousel .product-card{flex:0 0 calc(46% - var(--space-3));min-width:0} } @media (max-width:480px){ .product-carousel .product-card{flex:0 0 calc(52% - var(--space-3));min-width:0} } @media (max-width:360px){ .product-carousel .product-card{flex:0 0 calc(58% - 6px);min-width:0} } /* 3. The image itself: fills the box its container defines, never sets the box. object-fit crops; it never distorts. */ .product-card img, .category-card img, .post-card img, .gallery-main img, .gallery-thumb img{width:100%;height:auto;max-width:100%;object-fit:cover;object-position:center} /* Cart thumbnails already have a fixed box from .cart-item .ph-img, so they only need the crop — setting width here would fight that rule. */ .mini-cart-item img, .cart-item img{object-fit:cover;object-position:center;max-width:100%} /* Anything that can be wider than its box, told not to be. .container is deliberately NOT in this list. It carries max-width:var(--container-max) from theme.css, and putting max-width:100% on it here overrode that — every section on the site stretched to the full width of the monitor. The guard is for content that has no width of its own, not for the layout wrapper that does. */ img,video,iframe,table,pre{max-width:100%} /* ---------- 41. Tablet: the 769–1024 gap ---------- Every layout below jumped straight from the desktop rule to the phone rule, so an iPad got the desktop grid squeezed into 800px. These give that range its own answer. */ @media (min-width:769px) and (max-width:1024px){ .contact-layout, .legal-layout, .account-layout{grid-template-columns:minmax(0,220px) minmax(0,1fr)} .return-steps{grid-template-columns:1fr 1fr} .address-book{grid-template-columns:1fr} .woocommerce-MyAccount-content form{grid-template-columns:1fr 1fr} .woocommerce-MyAccount-content .woocommerce-Addresses{grid-template-columns:1fr} .checkout-step__icon{width:48px;height:48px} .hero{padding-inline:var(--space-3)} } /* ---------- 22. Batch 5 responsive ---------- */ @media (max-width:900px){ .contact-layout, .legal-layout, .account-layout{grid-template-columns:1fr} .legal-toc, .account-side{position:static} .return-steps{grid-template-columns:1fr} /* Wrapped pills of different widths left a ragged four-row block that pushed the actual page off the first screen. A two-column grid gives every item the same footprint, so it reads as one tidy panel. */ .account-side{padding:var(--space-3)} .account-nav{display:grid;grid-template-columns:1fr 1fr;gap:8px} .account-nav a{ padding:12px 10px;border:1px solid var(--color-control-border); border-radius:var(--radius-input);font-size:12.5px;font-weight:600; justify-content:flex-start;gap:8px;min-height:46px;line-height:1.4 } .account-nav a svg{width:16px;height:16px} .account-nav a.is-active{border-color:var(--color-secondary)} .account-nav a.is-logout{grid-column:1/-1;margin-top:2px;border-top:1px solid var(--color-control-border);padding-top:12px;border-radius:var(--radius-input);justify-content:center} .account-user{padding-bottom:var(--space-2);margin-bottom:var(--space-3)} .woocommerce-MyAccount-content{padding:var(--space-3)} /* Order tables are five columns of Persian text in 360px. Scrolling a table sideways on a phone is how a row gets missed, so each row becomes its own stacked card with the header as a label. */ .woocommerce-MyAccount-content table thead{display:none} .woocommerce-MyAccount-content table, .woocommerce-MyAccount-content table tbody, .woocommerce-MyAccount-content table tr{display:block;width:100%} /* td is given display:flex just below — listing it here too set a value that never survived to the next rule. */ .woocommerce-MyAccount-content table td{width:100%} .woocommerce-MyAccount-content table tr{ background:var(--color-bg);border-radius:var(--radius-card); padding:var(--space-3);margin-bottom:var(--space-2) } .woocommerce-MyAccount-content table td{ display:flex;align-items:center;justify-content:space-between;gap:var(--space-2); border:0;padding:5px 0;text-align:start } .woocommerce-MyAccount-content table td::before{ content:attr(data-title);font-weight:700;color:var(--color-heading); font-size:12.5px;flex-shrink:0 } .woocommerce-MyAccount-content table td.woocommerce-orders-table__cell-order-actions{ justify-content:stretch;padding-top:var(--space-2) } .woocommerce-MyAccount-content table td.woocommerce-orders-table__cell-order-actions::before{display:none} .woocommerce-MyAccount-content table td .button{width:100%} } @media (max-width:600px){ .post-nav{grid-template-columns:1fr} .post-nav__item--prev{text-align:start} .contact-channels{grid-template-columns:1fr} .search-page-form{flex-direction:column} .search-page-form .btn{width:100%} } .checkout-gateway-note{font-size:12.5px;color:var(--color-muted);text-align:center;line-height:1.9} /* ---------- 43. Sign-in card and account dashboard ------------------ FOUND BY REBUILDING THE DESIGN REFERENCE. Every class below was already in the templates and had no rule anywhere. woocommerce/myaccount/form-login.php has been emitting .auth-card since Batch 4 (and, until 2.9.3, the code-field classes that went out with the theme's own sign-in card), and myaccount/dashboard.php has been emitting .account-card, .stat-grid and .data-table — none of them styled. The sidebar beside them was styled, which is why nobody noticed: the page looked half-finished rather than obviously broken. The consequence was not cosmetic. OTP is the only way a customer signs in to this shop, and the six code boxes were rendering as six full-width inputs stacked down the page. That is the front door. How this was missed: verify.py checks that every function a template calls exists, and phpcheck.py checks that every file parses. Neither has any idea whether a class the markup uses has a rule. Nothing was broken in a way a scanner could see. It took writing an honest mockup — one that had to use the real class names — to surface it. Values below are tokens that already exist. No new colours, no new radii, no new shadows. */ /* --- Sign-in --------------------------------------------------- */ .auth-wrap{max-width:460px;margin-inline:auto} .auth-card{background:var(--color-surface);border-radius:var(--radius-card); box-shadow:var(--shadow-soft);padding:var(--space-5)} .auth-card__head{margin-bottom:var(--space-3)} .auth-card__head h2{font-size:20px;margin-bottom:4px} .auth-card .body-text{font-size:14px;line-height:1.9;margin-bottom:var(--space-4)} .auth-card .field{margin-bottom:var(--space-3)} .input-text{width:100%;min-height:48px;padding:var(--space-2) var(--space-3); border:1.5px solid var(--color-control-border);border-radius:var(--radius-input); background:var(--color-surface);font-family:inherit;font-size:15px; color:var(--color-heading);transition:border-color var(--transition),box-shadow var(--transition)} .input-text:focus{border-color:var(--color-secondary); box-shadow:0 0 0 3px var(--color-secondary-tint);outline:none} .consent-row{display:flex;align-items:flex-start;gap:10px;font-size:13px; line-height:1.9;color:var(--color-body);margin-bottom:var(--space-4);cursor:pointer} .consent-row input{width:18px;height:18px;flex-shrink:0;margin-top:3px;accent-color:var(--color-secondary)} /* The six-box code field, its countdown row and its phone override used to sit here. They dressed the theme's own sign-in card, which was deleted in 2.9.3 — the PARINHALL SMS plugin owns sign-in and ships its own stylesheet for it, on its own phs- classes. Nothing in the theme or the plugin emits .otp-inputs, .otp-digit, .auth-meta or .auth-timer any more, so the rules went with the markup. .consent-row and .auth-resend below stay: form-login.php still emits both. */ .auth-resend,.auth-alt button{font:inherit;font-size:13px;font-weight:600;cursor:pointer; background:none;border:0;color:var(--color-secondary);padding:0} .auth-resend:hover,.auth-alt button:hover{color:var(--color-heading)} .auth-alt{text-align:center;font-size:13px} /* --- Account dashboard ------------------------------------------ */ .account-card{background:var(--color-surface);border-radius:var(--radius-card); box-shadow:var(--shadow-soft);padding:var(--space-4);margin-bottom:var(--space-4)} .account-card:last-child{margin-bottom:0} .account-card__head{display:flex;align-items:center;justify-content:space-between; gap:var(--space-3);flex-wrap:wrap;margin-bottom:var(--space-3)} .account-card__head h2{font-size:17px;margin:0} .account-card .body-text{font-size:14px;line-height:1.9;margin:0} .stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:var(--space-3)} .stat-box{background:var(--color-bg);border-radius:var(--radius-input); padding:var(--space-3);text-align:center} .stat-box strong{display:block;font-size:24px;font-weight:700;color:var(--color-heading);line-height:1.3} .stat-box span{font-size:12.5px;color:var(--color-body)} /* A table on a phone is the classic overflow: it cannot wrap, so it pushes the page sideways. Scrolling the table instead of the document is the fix — see section 41b, which is what this pairs with. */ .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch} .data-table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:460px} .data-table th,.data-table td{padding:12px var(--space-2);text-align:right; border-bottom:1px solid #EDE7DD;vertical-align:middle} .data-table th{font-size:12.5px;font-weight:700;color:var(--color-muted); white-space:nowrap;border-bottom-width:1.5px} .data-table tr:last-child td{border-bottom:0} .data-table td.num{direction:ltr;text-align:right;font-weight:600;color:var(--color-heading)} .data-table .badge{white-space:nowrap} /* The chosen variation, printed beside its attribute label. */ .attr-group__value{font-weight:400;color:var(--color-body);font-size:13px} @media (max-width:480px){ .auth-card{padding:var(--space-4)} } /* The order-summary sentence on My Account → a single order. WooCommerce marks the order number, date and status with , and normally its own stylesheet neutralises the element. inc/enqueue.php dequeues woocommerce-general, -layout and -smallscreen, so nothing was left to do it: three words rendered on the browser's default bright yellow, in the middle of a cream RTL page. Same defect class as the one section 43 above was written to fix, in a template added after it. */ .order-intro{font-size:15px;line-height:2;color:var(--color-body);margin-bottom:var(--space-4)} .order-intro mark{background:none;color:var(--color-heading);font-weight:700;padding:0} .order-intro .order-status{color:var(--color-secondary)} /* ---------- 44. Compare table, and anchors under the sticky header -- Two more gaps from the same sweep as section 43. .contact-aside and .faq-a were also on the list of classes with no rules, and were deliberately left alone: .contact-layout already places the aside, and .acc-panel already animates the FAQ answer. They are semantic hooks, not missing styles. Adding rules "to be safe" is how a stylesheet grows a second owner for a property. These two are different — they are genuinely absent. */ /* --- The compare page ------------------------------------------- page-compare.php has emitted these four classes since Batch 4 with nothing styling them, so the comparison rendered as a browser default table: no borders, no padding, and — because a table cannot wrap — four columns of product pushing the page sideways on a phone. */ .compare-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch; background:var(--color-surface);border-radius:var(--radius-card); box-shadow:var(--shadow-soft);padding:var(--space-3)} .compare-table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:620px} .compare-table th,.compare-table td{padding:var(--space-3) var(--space-2); border-bottom:1px solid #EDE7DD;vertical-align:middle;text-align:center} .compare-table th{width:132px;text-align:start;font-size:12.5px;font-weight:700; color:var(--color-muted);white-space:nowrap;background:var(--color-bg)} .compare-table tr:last-child th,.compare-table tr:last-child td{border-bottom:0} .compare-head-cell{min-width:170px;text-align:center} .compare-head-cell > a{display:block;max-width:130px;margin:0 auto var(--space-2)} .compare-head-cell .product-card__title{margin-bottom:8px;min-height:0} .compare-remove{font:inherit;font-size:12.5px;font-weight:600;cursor:pointer; background:none;border:0;color:var(--color-error);padding:4px} .compare-remove:hover{text-decoration:underline} /* --- Anchors and the sticky header ------------------------------- html has scroll-behavior:smooth and .site-header is position:sticky, and nothing was reserving room for it. So every in-page link landed its target underneath the header: the قوانین table of contents scrolled each heading out of sight, and «۲۴ دیدگاه» on a product page jumped past the reviews tab. scroll-margin-top is the property built for exactly this. The header is 52px of logo plus padding, and the top bar collapses on scroll — 96px clears it in both states without leaving an obvious gap. */ :where([id]){scroll-margin-top:96px} @media (max-width:768px){:where([id]){scroll-margin-top:76px}} /* ---------- 45. Screenshot QA: navigation, trust, cart and checkout -- */ /* The limited-edition card uses the brand orange button on a dark panel. Its label must retain enough contrast in every link state. */ .mega-col--limited a.btn, .mega-col--limited a.btn:visited, .mega-col--limited a.btn:hover, .mega-col--limited a.btn:focus-visible{color:#fff} /* Badge sizing, and the one place that decides it. ------------------------------------------------ This rule used to read `width:80px!important;height:80px!important; object-fit:contain`, which is what was blurring the ZarinPal seal. The artwork the issuers actually serve, measured from the live page: ZarinPal cdn.zarinpal.com/badges/trustLogo/1.png 60 × 85 Enamad trustseal.enamad.ir/logo.aspx 125 × 136 Forcing ZarinPal's 60px-wide source into an 80px box enlarged it by a third, and there is no detail there to enlarge into — 60×85 is the only file that CDN serves. `!important` also meant the number in the client's own snippet was ignored, so changing it from 80px to 60px there appeared to do nothing at all. Both halves of the complaint, one declaration. Height is the controlling dimension now, at 60px: below both native heights, so neither badge is ever scaled up, and a shared baseline makes two logos of different proportions sit as a pair. ZarinPal draws 42×60, Enamad 55×60 — both downscales, which stay sharp. width:auto keeps each aspect ratio, so object-fit has nothing left to correct. One owner, both axes, and this is where !important earns its place. Leaving width to the badge snippet looked like the polite choice and was the wrong one. ZarinPal's code carries `#zarinpal img{width:60px}`, which is an ID selector and beats anything this file can say with classes — so the snippet set the width, this rule set the height, and the seal came out 60×60: a 60×85 logo squashed square. Two owners of one shape is exactly the failure this codebase keeps warning about, and an aspect ratio cannot be co-owned. The theme takes both numbers or neither. 76px, not 60: below both native heights, so still a downscale on each — ZarinPal draws 54×76, Enamad 70×76 — and enough bigger that the Enamad seal reads at a glance again. The client can now delete the