/* Glenbotal — UX audit remediation, 5 September 2026.
*
* Every rule below maps to a numbered finding from that audit. This sheet is
* enqueued after style.css AND after the Customizer's "Additional CSS"
* (wp-custom-css, printed at wp_head priority 101), so selectors are written to
* win on specificity rather than relying on source order — LiteSpeed combines
* and reorders stylesheets, and source order is not dependable here.
*
* Reverting: delete this file and the enqueue in func/gb-ux-fixes.php.
*/
/* ---------------------------------------------------------------------------
* F-01 — touch targets under the 44px floor.
*
* The three controls in the fixed bottom bar (Menu / Your account / Basket)
* measured 108.2 x 21px. The 21px comes from an explicit `height: 21px` on the
*
(style.css:712-717), not from the anchor, so both have to be raised.
* The bar itself is 63px tall, so 44px fits without changing its height.
*
* Scoped to the widths where that bar IS the primary navigation. The desktop
* header uses the same .user_menu markup with a different layout, and is left
* alone deliberately — pointer targets there are not the failing case.
* ------------------------------------------------------------------------- */
@media (max-width: 1230px) {
ul.user_menu > li:first-child,
ul.user_menu > li:nth-child(2),
ul.user_menu > li:last-child {
height: 44px;
}
}
/* At desktop the same markup is the header menu: the
is already 46px tall
* but the anchor inside it was only 18x21px (account) and 43x21px (basket),
* under the 24x24 minimum as well as the 44px one. The row has the height to
* spare, so the anchor is simply made to fill it. */
ul.user_menu > li > a {
display: flex;
align-items: center;
justify-content: center;
min-height: 44px;
min-width: 44px;
}
/* Second cluster: product-card titles were 24px tall. The card is centred, so
* an inline-flex box keeps the hit area the width of the text but 44px tall. */
.grid__item h3 a,
.bottle__item h3 a {
display: inline-flex;
align-items: center;
min-height: 44px;
}
/* ---------------------------------------------------------------------------
* F-03 — eight article routes scrolled horizontally on a phone.
*
* Cause: comparison tables in the article body sit directly inside
* .page__content, whose overflow-x is `visible`. At 375px the document's
* scrollWidth was 802px against a 786px-wide table. Giving the table its own
* scroll container confines the overflow to the table.
* ------------------------------------------------------------------------- */
.page__content table {
display: block;
width: 100%;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* The sell page overflowed at 768px for a different reason: the reviews
* carousel (.as-slider) lays its .gbrev-card items out in a row but never
* clipped them, so the cards queued off-screen to the right dragged the whole
* document to 936px. A slider viewport should clip; the arrows move it. */
.elementor .as-slider {
overflow: hidden;
}
/* Second cause on the same page, at 768px only: the four-step "how it works"
* row carries a hard-coded width:1104px with flex-wrap:nowrap, inside a 688px
* parent. It is the element that dragged the document out to 936px. Letting it
* take the width it actually has, and wrap, keeps all four steps readable. */
@media (max-width: 1150px) {
.elementor .elementor-element-acf7026 {
width: 100%;
max-width: 100%;
flex-wrap: wrap;
}
}
/* The same template also let a long title run past the viewport edge. */
.page__content h1,
.page__content h2,
.page__content h3,
.page__content h4 {
overflow-wrap: break-word;
}
/* ---------------------------------------------------------------------------
* F-08 — the site-wide body link colour failed AA.
*
* #0070ff measures 4.41:1 on white and 4.20:1 on the #f7faf8 panel, against a
* 4.5:1 floor. It is declared as `.page__content a` in the Customizer's
* Additional CSS. #0063E0 measures 5.44:1 and 5.18:1 on those two grounds.
* :link / :visited raise specificity to (0,2,1) so this wins wherever it lands
* in the cascade.
* ------------------------------------------------------------------------- */
.page__content a:link,
.page__content a:visited {
color: #0063E0;
}
/* ---------------------------------------------------------------------------
* F-13 — catalogue filter panels animated for a full second.
*
* `.mobile .filter_item, .mobile .filter_text { transition: all 1s }`
* (style.css:4217). Measured 1s at 375px, 0s at 1280px — this is a mobile-only
* defect, not the site-wide one the audit described. !important is used rather
* than a specificity war because the value being overridden is a duration and
* carries no layout risk.
* ------------------------------------------------------------------------- */
.mobile .filter_item,
.mobile .filter_text,
.mobile .distillery_filter,
.mobile .region_filter,
.mobile .type_filter {
transition-duration: 0.25s !important;
}
/* ---------------------------------------------------------------------------
* F-11 — the floating WhatsApp button could not be dismissed.
*
* The button itself (50x50, z-index 99999999) passes the tap-target floor; the
* problem is that it permanently occludes page content and offered no way out.
* A dismiss control is added by func/gb-ux-fixes.php; this styles it and
* lifts the button clear of the 63px bottom bar.
* ------------------------------------------------------------------------- */
@media (max-width: 1230px) {
.ht-ctc.ht-ctc-chat {
bottom: 96px !important;
}
}
/* The theme paints every