/* ── Tablets & phones (≤ 781px) ── */
@media (max-width: 781px){
html{ -webkit-text-size-adjust: 100%; }
/* Kill horizontal scroll without breaking the sticky header (clip keeps sticky) */
body{ overflow-x: clip; }
/* Media never overflows its container */
img, svg{ max-width: 100% !important; height: auto !important; }
/* ── GOLD FOILED & UV, AND EXCLUSIVELY CUSTOMISED CREATIONS ───────
Both bands are the same tile grid, and both were ragged on a phone:
one column running far below the other, rows not lining up, big
gaps of white between them.
That is my doing. The blanket rule above says `height: auto
!important` on every image, and these tiles are built the other way
round — a fixed tile height with object-fit: cover, so that every
photograph, whatever its shape, fills a box the same size as its
neighbour. My !important cancelled that, so each tile fell back to
its own proportions and the grid came apart.
Rather than hand the fixed pixel height back, the tiles get a shape:
4:5, applied to the width they actually have. Uniform rows at any
phone width, no number to go stale, and the hover photograph is given
the same shape so nothing jumps when it swaps. ─────────────────── */
.random-product-grid .random-product-item img,
.af-gfs-grid .random-product-item img,
.random-product-grid .random-product-item .hover-image{
width: 100% !important;
aspect-ratio: 4 / 5 !important;
height: auto !important;
object-fit: cover !important;
}
/* ── THE FIVE STARS ON "WHAT CLIENTS SAY" ──────────────────────────
The Google reviews plugin draws that rating as five separate
files, one per star. The rule directly above lets each one grow to
the full width of its container, so on a phone they stack into a
column of five enormous stars instead of a rating.
The owner found the right number by hand in the browser: 17%. Five
of those sit in a row with room to breathe. But they found it on the
`img, svg` rule above, which matches EVERY picture on the site —
applied there it would shrink every product photo to a sixth of its
width. Same number, aimed only at the stars it was measured for. */
.grwp_stars-wrapper img,
#g-review .grwp_header-inner .grwp_stars-wrapper img{
max-width: 17% !important;
width: auto !important;
height: auto !important;
display: inline-block !important;
vertical-align: middle !important;
}
.grwp_stars-wrapper{
display: flex !important;
justify-content: center !important;
align-items: center !important;
gap: 4px !important;
flex-wrap: nowrap !important;
}
/* ── THE ROOM PHOTO ON "SEE IT ON YOUR WALL" ───────────────────────
Third time the blanket rule above has caught something, and the same
way each time: `height: auto !important` on every image cancels a
layout built the other way round, on a box of a fixed height with
object-fit: cover filling it.
Measured on the live page at 390px: the stage is 420px tall and the
room photograph computed to 159.6px - which is exactly its own
1376x768 proportions applied to the 286px it had to work with. With
the image pinned to top, left and right, the remaining 260px showed
the stage's bare cream background, and the room looked cut in half.
768px had the same fault at 88%, less obvious but no more correct.
The wall preview is the one place on the site where the picture MUST
fill its frame: the artwork is positioned over it in percentages of
that frame, so a photograph covering only part of it puts the piece
on the wrong part of the wall. The camera feed beside it is the same
geometry and is given the same treatment. Both are named exactly, so
the blanket rule keeps protecting every other image on the page. */
.af-tow-stage .af-tow-wallimg,
.af-tow-stage .af-tow-cam{
width: 100% !important;
height: 100% !important;
max-width: none !important;
object-fit: cover !important;
}
video, iframe{ max-width: 100% !important; }
/* Long words / URLs wrap instead of forcing width */
p, h1, h2, h3, h4, h5, h6, a, span, li, td, th{ overflow-wrap: break-word; word-wrap: break-word; }
/* Wide tables scroll inside their own box */
.entry-content table, .woocommerce table.shop_table, .af-faq-a table, table{ display: block; width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Elementor containers go full-width on mobile (prevents fixed-width overflow) */
.elementor-section .elementor-container, .e-con-inner, .e-con{ max-width: 100% !important; }
/* Our custom sections collapse gracefully */
.af-pp-row{ grid-template-columns: 1fr 1fr !important; }
.af-hs-row{ grid-template-columns: 1fr 1fr !important; }
.af-rv-row, .af-blog-row{ grid-template-columns: 1fr !important; }
.af-trust-inner{ flex-wrap: wrap !important; }
.af-tow-grid{ grid-template-columns: 1fr !important; }
/* The wall preview's box gets the shape of a photograph rather than a
fixed height, and it is written HERE rather than beside the image
rule above, because this line used to read `height: 420px !important`
and sits later in the same block - written above, `height:auto` lost
to it. The check caught that: with the height still pinned at 420 and
a 4:3 ratio in force, the ratio derived the WIDTH from the height and
the stage came out 560px wide inside a 390px screen.
Height from width, then: a phone gets 286x215, the photograph fills
it, and 74% of the room survives. Filling the old 286x420 box instead
would have cropped the room to about a third of its width, which is
why both were rendered and compared before choosing. */
.af-tow-stage{
width: 100% !important;
height: auto !important;
aspect-ratio: 4 / 3 !important;
min-height: 0 !important;
max-height: none !important;
}
.af-footer-inner{ grid-template-columns: 1fr 1fr !important; }
.af-listing-toolbar .af-lt-controls{ overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Hide our floating quick-access panel on mobile — it overlaps content
and is redundant with the theme's bottom mobile nav + Click-to-Chat. */
.af-quickpanel{ display: none !important; }
}
/* ── Phones (≤ 480px) ── */
@media (max-width: 480px){
.af-pp-row, .af-hs-row{ grid-template-columns: 1fr !important; }
.af-footer-inner{ grid-template-columns: 1fr !important; }
.af-tow-title{ font-size: 28px !important; }
.af-pp-sec h2, .af-hs-head h2{ font-size: 20px !important; }
}
/* ── TOUCH AND LEGIBILITY, SITE-WIDE ──────────────────────────────────
From a measurement of sixteen pages at 390px, 2026-09-14 — the whole
customer journey from the home page to checkout, plus the footer pages
and the staff tools.
The structural faults are gone: not one page scrolls sideways and no
text is crushed any more. What the audit found instead was the same
handful of things on every single page — links a finger cannot
reliably hit, and labels too small to read at arm's length:
footer links 15-19px tall
social icons 18x18
header cart link 42x24
mobile menu close 15x26 (fifteen pixels wide)
try-on-wall controls 10.5-11.7px type
A link is not "too small" because of its font: it is too small because
of the box around it. So these rules add room rather than shouting —
padding and a min-height, which grow the target without changing type
size, weight or colour. Nothing here paints anything new; the footer
simply breathes a little on a phone, which it should anyway.
Everything is inside a media query. Large screens keep the spacing they
were designed with. ─────────────────────────────────────────────── */
@media (max-width: 781px){
/* Footer: the biggest offender, and the easiest to fix well. Give each
link its own comfortable row instead of stacking 15px text.
`line-height: 40px` was a mistake here and the next audit caught it:
the fixed bottom navigation bar lives inside