/* ========================================================================== Liquicity Store — child theme stylesheet Version 8. CHANGED IN V8 P06 Badges moved back to the TOP RIGHT, on the owner's call. The left-hand corner was chosen to keep the right free for a wishlist control that does not exist yet; the corner is wanted now and the wishlist can move when it arrives. On the product page a plain right inset would land on the SECOND photograph, because the anchor wraps the whole two column grid, so that rule is pushed past the midpoint instead. See PATCH 06. F1 FIXED the archive title sitting 32px further in than the header and the product grid. .hero-section carries Blocksy's is-width-constrained and reads --theme-container-width, and it is nested inside the .ct-container that already read it, so the 32px gutter came off twice. Confirmed in the DOM. The variable is reset to 100% on that one element. CHANGED IN V7 P13 The card track is no longer drag-scrolled. It only ever ran for a mouse, which is where the hover advance already moves it, and it made the product photograph a drag surface competing with the click that the whole card exists for. CHANGED IN V6 P13 The second photograph is back inside the rows that scroll sideways, on pointer devices only. Hover is not a gesture, so it cannot compete with the row's own swipe; the track is simply closed to hand movement there and the hover advance still drives it. On touch the extra slide stays hidden, and being display: none it is never even requested. CHANGED IN V5 P13 Checked the last unverified selector in this patch against the live DOM and cleared its marker, 23 down to 22, and recorded that the product link sits inside the slide rather than around the media. P13 The indicator is mobile only. The hover advance in functions.php brings the second photograph in by itself on a pointer device, which leaves the bar answering a question that was never asked, and a black rule under every card in a four-across grid is a lot of furniture for that. The arrows are off by default now for the same reason, behind liq_card_swiper_arrows, and their styling stays here so turning them back on at three slides needs no CSS. CHANGED IN V4 §5 Category chips are generated from the term tree by functions.php instead of pasted into a Content Block per category, restyled to measured values, always a scroller, and carrying a current state. P12 FIXED a rule with no declaration block. .lq-cat-tiles.is-dragging a ended in a comma and joined the swatch rule below it, so the homepage tiles went display: none while being dragged. P13 Indicator and arrows now appear on hover where there is a pointer that can hover, and stay visible where there is not. FIXED an initial jump to the last slide, caused by an end-aligned final slide under mandatory snapping while the lazy second image was still loading. Card image swiper. Blocksy has no slider on the product card, only a hover swap of one extra image, and hover does not exist on touch. This is native overflow plus scroll-snap, driven by the shared liqDragScroll, with a proportional thumb rather than a segmented bar so the slide count lives in one PHP filter and nowhere in CSS. Two images to start. Downloads, the [liq_products] rows and the related-products row are all excluded in PHP, so the swiper is a category-page and search thing, matching the reference. What is left here is a backstop for the opt-in case. Needs the matching block in functions.php. CHANGED IN V3 §2 Rewritten. Every body.product_cat-* selector matched nothing: on a single product that class sits on the product wrapper, not the body. The download gallery is now one column, sized through the variable Blocksy reads. §4 Still owns the space inside the hero band, without !important: 12 below everywhere, 32 above on the product page and 64 above on archives, split on Blocksy's own data-prefix. Blocksy exposes no padding control for a type-1 hero; handing it over was tried and the band collapsed to the text. The block lists all four gaps around a hero, says which two are Customizer settings, and carries a table for dialling the archive value without measuring again. P06 Badges restyled from Tomorrowland to Patta, and NEW became a secondary badge that sits beside a primary one. Needs the matching change to liq_get_product_badges() in the WPCode snippet. The inverted badge has no border; one was tried and rejected, and the reason it might look like it needs one is written into the rule. Version 2 notes follow. Roughly one third the size of v1. SCOPE RULE This file contains ONLY what Blocksy cannot express as a Customizer setting. Anything with a control in the Customizer belongs there, because settings are visible to whoever maintains the site and they survive a stylesheet rewrite. Removed in v2, now Customizer settings: typography, button colour/height/radius, form colours, link colour, gallery ratio, gallery type, sticky summary, swatch shape, out-of-stock swatch, pagination, sort visibility, card container. WHY A FILE AND NOT "ADDITIONAL CSS" WordPress prints Additional CSS inline in on every request, so it costs bytes even on a cache HIT. A file is cached by browser and CDN and is free from the second page onwards. Blocksy makes the same choice for its own output (dynamic_css_file = file). Use Additional CSS as a scratchpad while iterating, then move anything permanent into this file. [VERIFY] marks a Blocksy-internal class not confirmed against a live install. Check in devtools and correct here. WooCommerce core selectors are correct as written. Sections match liquicity-design-spec.md. ========================================================================== */ /* -------------------------------------------------------------------------- TOKENS Duplicated from the Customizer palette so the rules below can reference them. Keep in sync with Customizer > Colors. -------------------------------------------------------------------------- */ :root { --lq-ink: #0A0A0A; --lq-paper: #FFFFFF; --lq-canvas: #EFEFEF; --lq-rule: #E2E2E2; --lq-muted: #767676; --lq-accent: #1B4DE4; --lq-sale: #C8102E; --lq-popular: #6B3FD9; --lq-t-xs: 0.6875rem; --lq-t-sm: 0.8125rem; --lq-t-base: 0.9375rem; --lq-s1: 4px; --lq-s2: 8px; --lq-s3: 12px; --lq-s4: 16px; --lq-s6: 24px; --lq-s8: 32px; --lq-s12: 48px; --lq-s16: 64px; } /* -------------------------------------------------------------------------- §3 SQUARE EVERYTHING Blocksy exposes border radius per element (buttons, forms, gallery), not globally. This catches everything else: badges, notices, swatches, images, cards, dropdowns, the search field. The single highest-impact rule in the design. -------------------------------------------------------------------------- */ *, *::before, *::after { border-radius: 0 !important; box-shadow: none !important; } .avatar, [class*="rounded-full"] { border-radius: 50% !important; } /* Keep keyboard navigation visible. The blanket box-shadow removal above would otherwise destroy focus indication. */ :focus-visible { outline: 2px solid var(--lq-accent) !important; outline-offset: 2px; } /* -------------------------------------------------------------------------- §4 ARCHIVE GRID Column count is a Customizer setting; gutter width is not. One value for both axes was wrong. Measured against the reference: Tomorrowland staging column gutter 20px 8px image bottom to title 20px 28px price to next row's image 34px 12px A column gutter separates two things of equal standing. A row gutter has to detach a caption from an image it does not belong to. At 8px on both axes the title and price sat closer to the row BELOW them than to their own photo, so every caption in the grid had to be read twice. -------------------------------------------------------------------------- */ .products { column-gap: var(--lq-s6) !important; /* 24, was 8 */ row-gap: var(--lq-s8) !important; /* 32, was 8 */ } /* Aspect ratio, the honest version. An earlier draft of this file claimed merch and music had to share one ratio because WooCommerce has a single global cropping setting. That is true of CROPPING and not of DISPLAY. With cropping set to "uncropped" the original file is preserved, and CSS picks the ratio per context: merch 4/5 portrait garments read better standing up music 1/1 square artwork is square by nature object-fit: cover fills the box. A portrait photo in a 4/5 box loses almost nothing; a square cover in a 1/1 box loses nothing at all. */ .products .product img, .wc-block-grid__product-image img { background: var(--lq-canvas); aspect-ratio: 4 / 5; object-fit: cover; width: 100%; height: auto; } /* -------------------------------------------------------------------------- §6 CARD: TITLE AND PRICE ON ONE BASELINE Blocksy stacks card layers vertically with no option to pair two on a row. This is New Amsterdam's move and it makes the row read as a line of type rather than a stack of boxes. THERE IS NO CARD INNER WRAPPER. An earlier version of this block targeted .ct-woo-card-inner, which does not exist. With shop_cards_type on type-1 Blocksy renders every layer as a direct child of the li:
  • display: flex

    …

    …
    • So the li itself is the container, and it is flex rather than grid, which is why the grid-column on the title and the price did nothing and the price sat on its own line. Turning the card element into a two-column grid rather than adding a wrapper keeps the markup Blocksy's business. Everything defaults to spanning both columns, so any layer switched on later (rating, stock, add to cart) lands full width and behaves as before; only the title and the price are pulled onto one row. THE SELECTOR REPEATS .product ON PURPOSE. It was li.product, which read better and worked on the archive, and silently missed the related-products scroller: that row renders its cards as something other than an li, so the captions there stayed stacked while the archive was on one line. Repeating the class buys the same specificity (0,3,0) without asserting anything about the tag, and beats Blocksy's own (0,2,0) without !important. Deliberate: display here is static, and forcing it is what broke the waitlist notice in P9.1. This now governs the archive, the related-products scroller and the up-sells row, which is the point: one caption layout everywhere. -------------------------------------------------------------------------- */ .products .product.product { display: grid; grid-template-columns: 1fr auto; align-items: start; /* align-content, not align-items. They are different properties and only one of them causes this bug. A card is stretched to the height of the tallest in its row. align-content defaults to normal, which for grid behaves as stretch, so the auto-sized rows grow to absorb that extra height. A card with three rows (image, caption, sizes) spreads it over three; a card with two spreads it over two. The result is captions sitting at different heights across one row, and the card with LESS content sitting lower, which is the opposite of what anyone would predict from looking at it. start pins the rows to their natural height and lets the leftover space collect at the bottom, where it is invisible. */ align-content: start; column-gap: var(--lq-s3); /* Image to caption. Measured 47px with row-gap at 16, because the
    still carried the browser default margin (1em 40px) underneath the image and the title's line box adds its own leading on top of that. The figure margin is zeroed below, so this value is now the whole distance plus a few pixels of leading. Reference is 20. */ row-gap: var(--lq-s2); } /* The image sits in a
    . Left alone that is 16px of margin above and below from the UA stylesheet, which lands between the photo and the caption and makes the caption look detached from its own product. */ .products .product.product > figure { margin: 0; } .products .product.product > * { grid-column: 1 / -1; } .products .product.product > .woocommerce-loop-product__title { grid-column: 1; align-self: baseline; margin: 0; } .products .product.product > .price { grid-column: 2; align-self: baseline; white-space: nowrap; margin: 0; /* Blocksy ships the card price at --theme-font-weight: 600. The reference runs it regular and muted, so the title carries the row and the price answers it. Delete these two lines to put the emphasis back. */ font-weight: 400; color: var(--lq-muted); } /* Sale price: struck original muted, current in the one sale red. */ .price del { color: var(--lq-muted); margin-right: var(--lq-s2); } .price ins { color: var(--lq-sale); text-decoration: none; } /* -------------------------------------------------------------------------- §6 BADGES INSIDE THE IMAGE Blocksy renders NEW and the custom BESTSELLER badge and positions them with its own defaults. This pins them to the reference: solid rectangle, white uppercase, tight padding. -------------------------------------------------------------------------- */ .products .product .onsale, .woocommerce-product-gallery .onsale, .ct-product-badge, /* [VERIFY] */ .ct-label-container { /* [VERIFY] */ background: var(--lq-ink) !important; color: #fff !important; font-size: var(--lq-t-xs); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; padding: 6px 10px; line-height: 1; min-width: 0; min-height: 0; } /* Discount badges use the sale red; status badges stay ink. */ .products .product .onsale, .woocommerce-product-gallery .onsale { background: var(--lq-sale) !important; } /* -------------------------------------------------------------------------- §4 HERO BAND, ALL TEMPLATES Blocksy hangs the breadcrumb, and on archives the title as well, inside the same .hero-section wrapper on every template. This block owns the space INSIDE that band. Keep it that way: the moment a second rule sets spacing on the breadcrumb or on the wrapper, the band differs per page and there is no single number left to turn. WHY THESE TWO NUMBERS ARE NOT IN THE CUSTOMIZER, HAVING BEEN TRIED TWICE Blocksy exposes no padding control for a type-1 hero. Measured on both templates with these declarations removed: Archive header ends 109, title ink 116.5 (7.5px, all of it leading) Product header ends 105.5, breadcrumb 110.5 to 123, gallery at 129 The band collapsed to the text itself at every Customizer value then set, including woo_categories_hero_height at 6px, which is bound to something else. There is no setting to prefer here, so the rule stays. FOUR GAPS, AND ONLY TWO OF THEM LIVE HERE above the band .ct-container[data-vertical-spacing], per prefix, times the global contentAreaSpacing. Customizer. above the text padding-top below. Here. below the text padding-bottom below. Here. below the band product_hero_margin / woo_categories_hero_margin, a real number per prefix. Customizer. Worth knowing before reaching for the first one: contentAreaSpacing is 90px and it is the only value there is. Switching a prefix to top-and-bottom buys 90px above the band or nothing, with no number in between. That is why the two tunable gaps ended up in CSS and not because nobody looked. ARCHIVES GET MORE AIR ABOVE, AND THAT IS NOT A SCOPED EXCEPTION One number served both templates until the archive title needed more room than the product breadcrumb. That is not a per-page special case, it is two different contents: a 40px Fraunces H1 and a 13px breadcrumb do not want the same space above them, and pretending otherwise short-changes one of them. Split on data-prefix, which Blocksy puts on the body and which is the same axis every per-template Customizer control uses. Confirmed in the DOM: DIALLING IT. Measured on the T-Shirts archive the header ends at 94.5 and the title's line box sits 7px above its ink, so the gap you will see is the token plus 7: --lq-s6 24 -> 31 --lq-s8 32 -> 39 --lq-s12 48 -> 55 --lq-s16 64 -> 71 Change the one token below rather than measuring again. For reference, 90px of Content Area Spacing on top of --lq-s8 gives 129, which was too much. 32 ABOVE, 12 BELOW, AND THE REASONING FLIPPED It was 16 and 24, on the argument that the extra weight underneath ties the band to what follows rather than to what came before. That reads the band as a lead-in. The opposite reading is better and is the one in force: a breadcrumb saying Home > Merchandise > T-Shirts is a LABEL for the thing beneath it, and a label belongs against what it labels. Same for a category title. Pushing the band down away from the header and pulling the content up under it says that out loud, where an evenly padded band says only that it is a band. Both numbers are on the existing scale rather than free values, so the band keeps step with everything else in the file. MARGIN is not set here. Blocksy's own rule is margin-bottom: var(--margin-bottom, 40px), from a Customizer control per prefix, with product_hero_margin at 0px and woo_categories_hero_margin at 20px. An earlier version of this block pinned the margin to 0 with !important, which was defensible when nothing was set and became wrong the moment it was. That 20px on archives stacks on the 12 below, so the archive currently sits looser under the title than the product page does under the breadcrumb; take it to 0 in the Customizer rather than shaving padding here. NO !important. It was there against a Blocksy default said to be 48px above this band. Measured with the rule gone, the padding was zero, so there is nothing to fight and the child stylesheet wins on load order anyway. If this band ever comes out taller than the numbers below, check whether Blocksy started emitting a value, and whether a control finally exists, in which case these two lines belong there instead. BACKGROUND is already a setting: woo_categories_pageTitleBackground points at palette color-8. .page-header and [class*="ct-hero"] used to be in this selector list. Both carried a [VERIFY] marker, neither was ever confirmed against a DOM, and .hero-section is confirmed on both the archive and the PDP. If a template turns up using one of them, add it back with a measurement next to it. -------------------------------------------------------------------------- */ .hero-section { padding-top: var(--lq-s8); /* 32, was --lq-s4 */ padding-bottom: var(--lq-s3); /* 12, was --lq-s6 */ /* Guard. Blocksy's Height control belongs to the type-2 hero and both prefixes are on type-1, so this should be inert. It stays because a band inheriting a min-height it was never given is the one failure here that is invisible until someone opens devtools. */ min-height: 0; } /* Archives only. See the dialling table above: this is the one token to change if the category title wants more or less room. The product page keeps 32, which is right for a breadcrumb and would be mean under an H1. Requires Content Area Vertical Spacing on BOTTOM ONLY for this prefix. contentAreaSpacing is 90px and switching the prefix to top and bottom adds all 90 of it above this padding, with no value in between. */ [data-prefix="woo_categories"] .hero-section { padding-top: var(--lq-s16); } /* -------------------------------------------------------------------------- §4 ARCHIVE CONTROL ROW Filter left, product count beside it, sort right. Blocksy renders sort as a bordered select; Tomorrowland uses plain text, which reads lighter and stops it competing with the products. -------------------------------------------------------------------------- */ .woocommerce-result-count { color: var(--lq-muted); font-size: var(--lq-t-base); margin: 0; } .woocommerce-ordering select { border: none !important; background: transparent !important; padding: 0 var(--lq-s6) 0 0; font-size: var(--lq-t-base); color: var(--lq-ink); cursor: pointer; } /* Filter button: outlined square, matching the reference */ .ct-filter-canvas-trigger, /* [VERIFY] */ .ct-filters-trigger { /* [VERIFY] */ border: 1px solid var(--lq-rule) !important; background: transparent !important; color: var(--lq-ink) !important; padding: var(--lq-s3) var(--lq-s6); font-size: var(--lq-t-base); } .ct-filter-canvas-trigger:hover, .ct-filters-trigger:hover { border-color: var(--lq-ink) !important; } /* -------------------------------------------------------------------------- §6 WAITLIST LINK OFF THE ARCHIVE WooCommerce Waitlist prints a "SIGN UP" link under every out-of-stock card. On a page where most items are sold out that becomes the loudest repeated element. The SOLD OUT badge already carries the information, and the waitlist form lives on the product page. -------------------------------------------------------------------------- */ .products .product .wcwl_add_to_waitlist, .products .product .wcwl_wrap { /* [VERIFY] */ display: none !important; } /* -------------------------------------------------------------------------- §5 CATEGORY CHIPS Tomorrowland's answer to a large catalogue. No Blocksy equivalent. NOW BUILT BY functions.php, not by hand in a Content Block. The previous version of this comment asked for the markup to be pasted into a Content Block per category, which meant every new subcategory needed someone to remember to add a chip, and a renamed or emptied one stayed on the page pointing nowhere. The terms already know their own names, thumbnails and order; a hand-built copy of that is a second source of truth that can only ever drift. For music this is the format entry point (Digital, CD, Vinyl), which is the most useful cut of that catalogue and comes out of the tree for free. MEASURED off the reference at 3x, converted to CSS px: chip height 54 (1 + 6 + 40 + 6 + 1) border 1px, and the SAME width in both states inactive border #E6E6E6 -> --lq-rule, #E2E2E2 current border #000000 -> --lq-ink padding 6 / 16 / 6 / 12 thumbnail 40 x 40 on #F1F1F1 -> --lq-canvas thumbnail to label 12 chip to chip 10 label ~14px, regular, #1A1A1A THE BORDER WIDTH DOES NOT CHANGE BETWEEN STATES, and that is worth keeping. The current chip reads as heavier because it is black next to hairline grey, not because it is thicker. Measured both at 3 device pixels. A 2px border on the current one would move every chip after it by a pixel the moment the page changed, which is a layout shift bought for nothing. CHIP TO CHIP IS 10 AND THIS FILE USES 12. --lq-s2 is 8 and --lq-s3 is 12, so the measured value is off the scale in a way the badge gap was not. Two pixels either side of a 54px chip is below the point where the difference reads, and staying on the scale is worth more than being right to the pixel here. If it ever looks wrong, the token is on the next line. -------------------------------------------------------------------------- */ .lq-chips { display: flex; flex-wrap: wrap; gap: var(--lq-s3); margin: var(--lq-s8) 0; } .lq-chips a { display: flex; align-items: center; gap: var(--lq-s3); border: 1px solid var(--lq-rule); /* 6 top and bottom, 12 left, 16 right. Asymmetric because the thumbnail brings its own visual margin and the label does not, so equal padding put the image closer to the edge than the text was. */ padding: 6px var(--lq-s4) 6px var(--lq-s3); color: var(--lq-ink); text-decoration: none; font-size: var(--lq-t-base); /* A chip that wraps stops being a chip. Required once this is a scroller, where there is no width to wrap into anyway. */ white-space: nowrap; transition: border-color .15s ease; } .lq-chips a:hover { border-color: var(--lq-ink); } /* WHERE YOU ARE. The strip shows siblings on a child archive, so one of them is always the page you are on, and without this it reads as a link to nowhere. Border colour only: see the note above about width. */ .lq-chips a[aria-current] { border-color: var(--lq-ink); } .lq-chips img { width: 40px; height: 40px; object-fit: contain; background: var(--lq-canvas); /* Chips without a thumbnail sit beside chips with one, and a 40px box of nothing keeps them the same height. Term thumbnails are optional and half the tree does not have them. */ flex: 0 0 auto; } /* -------------------------------------------------------------------------- §7 BREADCRUMBS Wayfinding, not a call to action. Blocksy applies the link colour, which makes them accent blue. Mute them. -------------------------------------------------------------------------- */ .ct-breadcrumbs, .woocommerce-breadcrumb { font-size: var(--lq-t-sm); color: var(--lq-muted); } .ct-breadcrumbs a, .woocommerce-breadcrumb a { color: var(--lq-muted); text-decoration: none; } .ct-breadcrumbs a:hover, .woocommerce-breadcrumb a:hover { color: var(--lq-ink); text-decoration: underline; } .ct-breadcrumbs > *:last-child, .woocommerce-breadcrumb > *:last-child { color: var(--lq-ink); } /* -------------------------------------------------------------------------- §7 BUTTON HIERARCHY ON OUT-OF-STOCK PRODUCTS Out of stock renders a waitlist button beside a disabled add-to-cart. Without this the inert button draws the most attention. Primary action is always ink. Secondary is always outlined. -------------------------------------------------------------------------- */ .single_add_to_cart_button:disabled, .single_add_to_cart_button.disabled { background: var(--lq-rule) !important; color: var(--lq-muted) !important; border-color: var(--lq-rule) !important; cursor: not-allowed; } .wcwl_add_to_waitlist button, /* [VERIFY] */ button[name="wcwl_submit"] { /* [VERIFY] */ background: transparent !important; color: var(--lq-ink) !important; border: 1px solid var(--lq-ink) !important; width: 100%; } .wcwl_add_to_waitlist button:hover, button[name="wcwl_submit"]:hover { background: var(--lq-ink) !important; color: #fff !important; } /* Out of stock notice: informative, not alarming. */ .stock.out-of-stock { font-size: var(--lq-t-sm); color: var(--lq-muted); } /* -------------------------------------------------------------------------- §7 ASTRONAUTS UPSELL Rendered by functions.php in this theme, after the add-to-cart form, where Tomorrowland puts its Klarna line. Merch categories only, and never shown to someone who is already a member. -------------------------------------------------------------------------- */ .liq-astronaut-upsell { border-top: 1px solid var(--lq-rule); margin: var(--lq-s6) 0 0; padding-top: var(--lq-s4); font-size: var(--lq-t-sm); color: var(--lq-muted); line-height: 1.6; } .liq-astronaut-upsell__link { color: var(--lq-ink); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; } .liq-astronaut-upsell__link:hover { color: var(--lq-accent); } /* -------------------------------------------------------------------------- §7 REASONS TO BUY Blocksy Pro element. Layout and icon sizing are not exposed as settings. -------------------------------------------------------------------------- */ .ct-product-reasons-to-buy { /* [VERIFY] */ display: flex; flex-direction: column; gap: var(--lq-s3); font-size: var(--lq-t-sm); list-style: none; padding: 0; } .ct-product-reasons-to-buy li { display: flex; align-items: center; gap: var(--lq-s3); margin: 0; } .ct-product-reasons-to-buy svg { width: 18px; height: 18px; flex: 0 0 18px; } /* -------------------------------------------------------------------------- §2 PER-CATALOGUE OVERRIDES Blocksy's Single Product settings are global, so the element stack is a superset and each catalogue hides what it does not need. CORRECTED AGAINST THE LIVE DOM. The previous version of this section opened with: WooCommerce puts product_cat- on the body. It does not, at least not here. On a single product the body carries only wp-singular product-template-default single single-product postid-103628 and the category classes sit on the product wrapper instead:
    So all three body.product_cat-* blocks matched nothing and had been doing nothing since they were written. The two body.tax-product_cat.term-downloads blocks further down are correct and are left alone: on a TAXONOMY ARCHIVE WordPress does put those classes on the body. That split is why the music archive looked right while the music product page did not, and why the problem read as a gallery bug rather than as a selector that never fired. Scoped on downloads rather than music on purpose. This product carries both classes. A CD or a vinyl is a physical object that can have several photographs and wants the merch treatment; only the download is guaranteed to be one square cover. -------------------------------------------------------------------------- */ .product_cat-downloads .lq-fit-note { display: none; } /* THE GALLERY IS A GRID, AND THAT IS THE ACTUAL PROBLEM. Measured before touching anything: .woocommerce-product-gallery is 1016.83 x 500.91 and the artwork inside it is 501 x 500. The artwork is not small because it is a small file (the source is 2048 square, served here at 1200) and not because a width was missed. product_view_stacked_columns is 2, .ct-stacked-gallery-container is a two column grid, and one image fills one cell and leaves the other empty. Capping the gallery alone would therefore have made this WORSE, not better: a 620px gallery still split in two is a 300px cover. The old max-width rule here would have been the wrong fix even if its selector had matched. One column first. Everything else follows from it. */ .product_cat-downloads .ct-stacked-gallery-container { grid-template-columns: 1fr; } /* THEN THE WIDTH, VIA THE VARIABLE BLOCKSY READS. .product-entry-wrapper sets --product-gallery-width: 60% and .woocommerce-product-gallery reads width: var(--product-gallery-width, 50%). Setting width or max-width on the gallery would work, and it would also be the second time this stylesheet fought a Blocksy custom property instead of setting it. See the --theme-container-width entry in the handover. Overriding the variable also inherits the right responsive behaviour for free: the width declaration only exists inside @media (min-width: 1000px), so below that this does nothing and the gallery goes full width on its own. 38% of the 1735px container is roughly 660, against a 625px summary column. A single cover at the full 1016 would outweigh the text beside it, and a tracklist is the reason anyone scrolls a music product page. */ @media (min-width: 1000px) { .product_cat-downloads .product-entry-wrapper { --product-gallery-width: 38%; } } /* SQUARE, AGAINST AN INLINE STYLE. product_gallery_ratio is a global 3/4 and Blocksy writes it onto the img as an inline style="aspect-ratio: 3/4". Inline beats any selector, so this needs !important. That is the one place in this file where !important is not a shortcut: there is no specificity high enough to beat an inline style. contain rather than cover, because a cover is the whole artwork and cropping one is closer to defacing it than to framing it. */ .product_cat-downloads .woocommerce-product-gallery img { aspect-ratio: 1 / 1 !important; object-fit: contain; } /* The badge needed no rule. .liq-badge-anchor--single wraps .ct-stacked-gallery-container, not the figure, so it measured 1016 wide while the artwork measured 501 and the badge sat 435px to the right of the cover in open space. With the grid down to one column the anchor and the image are the same box and the badge lands back on the artwork. Left here as a note rather than deleted: the next person to see a badge floating beside an image should look at what the anchor wraps before writing a position rule. */ /* -------------------------------------------------------------------------- ARCHIVE RULES BELOW ARE UNCHANGED AND WERE ALREADY CORRECT. body.tax-product_cat.term-downloads is a real body class on a taxonomy archive. Keep them as they are. -------------------------------------------------------------------------- */ /* Music archive: denser grid. Blocksy's column count is global. */ body.tax-product_cat.term-downloads .products { grid-template-columns: repeat(5, 1fr) !important; gap: var(--lq-s4) !important; } @media (min-width: 1600px) { body.tax-product_cat.term-downloads .products { grid-template-columns: repeat(6, 1fr) !important; } } /* Artwork is square and fills its cell edge to edge, no canvas behind it. */ body.tax-product_cat.term-downloads .products .product img { aspect-ratio: 1 / 1; background: none; object-fit: cover; } /* -------------------------------------------------------------------------- §9 HEADER MARQUEE Optional. A scrolling ticker suits a drum and bass label. Static text reads calmer, and Tomorrowland uses static. -------------------------------------------------------------------------- */ .lq-marquee { overflow: hidden; background: var(--lq-ink); color: #fff; font-size: var(--lq-t-xs); letter-spacing: 0.08em; text-transform: uppercase; padding: var(--lq-s2) 0; } .lq-marquee__track { display: inline-flex; gap: var(--lq-s16); white-space: nowrap; animation: lq-scroll 40s linear infinite; } .lq-marquee:hover .lq-marquee__track { animation-play-state: paused; } @keyframes lq-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .lq-marquee__track { animation: none; justify-content: center; width: 100%; } } /* -------------------------------------------------------------------------- §12 DELIBERATELY SUPPRESSED Kept as one block so the intent is obvious and nobody re-enables them by accident. Wrong register for this brand, and Tomorrowland avoids them too. -------------------------------------------------------------------------- */ .ct-countdown, /* [VERIFY] countdown timers */ .ct-stock-scarcity, /* [VERIFY] "only 2 left" urgency */ .woocommerce-store-notice { display: none !important; } /* No star ratings on the grid. Ratings belong on the product page. */ .products .product .star-rating { display: none; } /* -------------------------------------------------------------------------- §5 CATEGORY CHIP CARROUSEL Always a scroller now, rather than a class somebody adds by hand. Whether the chips fit is a function of the viewport and of how many children the category has, and neither of those is known when the page is built. NO ARROWS, though the reference has them and an earlier version of this comment asked for them. Two reasons, and the second is the real one. The strip sits directly under the category title, so it already has an owner; the reference needs a "Discover Lifestyle Categories" heading to give its arrows somewhere to live, and that heading under an H1 that already says T-Shirts is a label for a label. And a partial chip at the edge is the affordance. That is the same argument --lq-per-view makes in P12.4 with its fractional card counts, and the same one PATCH 13 makes for the card swiper: the thing half in view needs no explaining and no control. The strip scrolls the current chip into view on load, which is why the reference screenshot has one cut off at the left, and that partial chip is doing the work an arrow would. proximity rather than mandatory. Chips are different widths, so mandatory snapping fights a drag that lands between two of them, and there is no page-sized unit here for it to be right about. -------------------------------------------------------------------------- */ .lq-chips--scroll { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; -ms-overflow-style: none; /* Vertical swipe must still scroll the page. */ touch-action: pan-x pan-y; /* Room for the border of a chip that is mid-transition, and nothing more. A scrollbar is suppressed above, so this is not making space for one. */ padding-bottom: var(--lq-s2); } .lq-chips--scroll::-webkit-scrollbar { display: none; } .lq-chips--scroll a { flex: 0 0 auto; scroll-snap-align: start; } /* Mouse drag comes from the shared liqDragScroll. Nothing in the native overflow model says a row is draggable, so the cursor says it. Unlike the card swiper in PATCH 13, this strip is not itself a link: the chips are, and the space between them is not, so a grab cursor here is not lying about what a click will do. */ @media (hover: hover) and (pointer: fine) { .lq-chips--scroll.is-draggable { cursor: grab; } .lq-chips--scroll.is-dragging { cursor: grabbing; user-select: none; } } /* The click that ends a drag is killed in the P12.4 list, alongside the other three scrollers, rather than here. */ /* -------------------------------------------------------------------------- §4 CATEGORY INTRO The WooCommerce category description, set full width under the title. Tomorrowland uses this for real copy about the collection, which carries genuine SEO weight rather than reading as filler. -------------------------------------------------------------------------- */ .term-description, .woocommerce-product-category-description { max-width: none; font-size: var(--lq-t-base); line-height: 1.6; margin: 0 0 var(--lq-s8); } /* ========================================================================== PDP PATCH 02 Fixes found by comparing the staging product page against the reference after importing v4. ========================================================================== */ /* -------------------------------------------------------------------------- VARIATION SWATCHES — moved An earlier version of this section styled .ct-swatch and .variable-items-wrapper .variable-item. Neither class exists in Blocksy's output, so none of it ever applied. The working rules, based on the actual markup, are in P7.3 further down. -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- WAITLIST "SIGN UP" LINK — REVERTED An earlier version of this file hid .wcwl_add_to_waitlist > a globally, to get rid of a loose "SIGN UP" appearing under the gallery. That was wrong twice over. The loose text was not the waitlist plugin at all, it was the site's own liq-badge--signup rendering unpositioned because its CSS had not been ported yet. And because the rule was not scoped to archives, it also hid the real waitlist form on the product page, which is exactly the thing that is supposed to be there when a size is sold out. Nothing to hide here. The archive-scoped rule further up handles the card. -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- ADDITIONAL INFORMATION TABLE Attribute values render as accent-blue links. They are data, not navigation, so they should read as plain text. -------------------------------------------------------------------------- */ .woocommerce-product-attributes a, .shop_attributes a { color: var(--lq-ink); text-decoration: none; pointer-events: none; } .woocommerce-product-attributes, .shop_attributes { font-size: var(--lq-t-base); } .woocommerce-product-attributes th, .shop_attributes th { font-weight: 500; color: var(--lq-ink); } /* -------------------------------------------------------------------------- RELATED PRODUCTS The "SALE" label renders as loose text above the title. Make it a badge consistent with the rest of the grid, and mute the struck original price. -------------------------------------------------------------------------- */ .related.products h2, .up-sells h2 { font-size: var(--lq-t-lg, 1.75rem); margin-bottom: var(--lq-s6); } .related.products .onsale, .up-sells .onsale { background: var(--lq-sale) !important; color: #fff !important; } /* ========================================================================== PDP PATCH 03 Container width, related products, and the two-ratio image system. ========================================================================== */ /* -------------------------------------------------------------------------- RELATED PRODUCTS Staging showed landscape thumbnails, ragged title heights and a "SALE" label floating loose above each title. Tomorrowland's equivalent row is four identical cells. The aspect-ratio rule above already fixes the shape. These rules fix the alignment: every card gets the same internal rhythm regardless of whether the title wraps to one line or three. -------------------------------------------------------------------------- */ .related.products .products, .up-sells .products { align-items: start; } .related.products .product, .up-sells .product { display: flex; flex-direction: column; } .related.products .woocommerce-loop-product__title, .up-sells .woocommerce-loop-product__title { font-size: var(--lq-t-base) !important; font-weight: 500 !important; font-family: var(--lq-font-ui, system-ui, sans-serif) !important; line-height: 1.35; margin: var(--lq-s2) 0 var(--lq-s1); } /* Loose "SALE" text becomes a badge inside the image, like the main grid. */ .related.products .onsale, .up-sells .onsale { position: absolute; top: var(--lq-s3); left: var(--lq-s3); z-index: 2; } /* -------------------------------------------------------------------------- CONTAINER WIDTH Blocksy does not size containers with max-width. It sets width: var(--theme-container-width) on the inner .ct-container / .ct-container-narrow / .is-width-constrained element, and that variable computed to: min(100%, calc(90vw - 0px * 2)) read off body on the category page. So the container is 90vw, i.e. 5% of empty page on each side at every width, and maxSiteWidth never enters the formula below 2400px. Raising maxSiteWidth therefore did nothing on a 1800px screen: measured 90px of margin per side against the reference's 32. The previous rule here set max-width on those same elements inside a min-width: 1700px query. It matched, and it did nothing, because a max-width above the computed width cannot narrow anything. It did have one side effect: [class*="ct-container"] scoped to a body class outranks .ct-container-narrow, so it silently overrode the narrow container's own max-width and stretched the archive title header to the full 1620 instead of narrowContainerWidth. Both problems disappear by setting the variable Blocksy actually reads. Fixed 32px edges rather than a percentage, which is what the reference does: the gutter stays the same on a laptop and on a 5K display instead of growing to 128px. maxSiteWidth still caps it at the top end. Desktop only. Below 1200px the percentage is the better behaviour, since 32px on a phone is a wider margin than 5%. -------------------------------------------------------------------------- */ @media (min-width: 1200px) { :root { --theme-container-width: min(2400px, calc(100% - 64px)) !important; } } /* -------------------------------------------------------------------------- THE GUTTER CAME OFF TWICE, AND THE RULE ABOVE IS WHY Confirmed in the DOM on the Sweaters & Hoodies archive: div.ct-container[data-vertical-spacing="bottom"] section div.hero-section.is-width-constrained[data-type="type-1"] header.entry-header > h1.page-title header.woocommerce-products-header ul.products.columns-4 Blocksy's own main.min.css gives .is-width-constrained margin-inline: auto width: var(--theme-container-width) max-width: var(--theme-block-max-width) so the hero reads the same variable the container it already sits inside read a moment earlier. The old value was viewport based, min(100%, calc(90vw - 0px * 2)), and 90vw is 90vw however deep you nest it. The value above is parent based, so the 32px per side comes off the container and then off the hero again. Measured off a 1430px viewport: header and ul.products both run 32 to 1398, the hero runs 64 to 1365.5. 1366 - 64 = 1302, which is the hero to within half a pixel. Centred, that is invisible. It shows the moment the title is aligned left, which is what it was mistaken for. NO !important, and that is not an oversight. The declaration above is on :root and this one is on the hero, so they are not competing for the same element. An inherited value never beats a declared one, whatever importance it carried where it was declared. ONE ELEMENT, not [class*="ct-container"] .is-width-constrained. The product page carries the same class on .product-entry-wrapper and is very likely inset the same 32px for the same reason, and it has not been measured. If the product gallery does not line up with the logo either, this is the rule to widen, with the measurement written next to it. IF THE TITLE STILL DOES NOT REACH THE LOGO after this, the next variable is --theme-block-max-width in the max-width above, which was not binding at 1302 and could become so at full width. -------------------------------------------------------------------------- */ .hero-section.is-width-constrained { --theme-container-width: 100%; } /* -------------------------------------------------------------------------- HERO TYPE-2 DEFAULTS Blocksy's type-2 hero is the band built to hold a title over a background, and its inner container carries two defaults that type-1 does not: padding: var(--container-padding, 50px 0) min-height: var(--min-height, 250px) Measured on the category archive while it was still type-2: the h1 is 33px tall and sat vertically centred inside a 250px box, which produced 125px of empty white above the title and 132px below it. The band was 290px tall to show one line of type, and no amount of padding on .hero-section could fix that, because the space was inside a deeper element. THAT PAGE IS NOW TYPE-1, set in the Customizer (woo_categories_hero_section), which is the better fix and the reason this rule no longer fires there. It stays because these are variables with fallbacks rather than hard values, so any template still on type-2 gets the same geometry as the rest of the site instead of a 250px band nobody asked for. If you ever want a real hero band back, with a photo or a colour behind a category title, this is the block to delete first. -------------------------------------------------------------------------- */ .hero-section[data-type="type-2"] [class*="ct-container"] { --min-height: 0; --container-padding: 0; } /* ========================================================================== FOUNDATION PATCH Systematic spacing, sizing and rhythm differences measured against the Tomorrowland product page. These are not individual bugs, they are the baseline the rest of the design sits on, so this block is worth reading before adding anything else. ========================================================================== */ /* -------------------------------------------------------------------------- F1. ALIGNMENT — SOLVED WITH A SETTING, NOT WITH CSS Three rounds of CSS tried to line up the header with the page content by guessing at Blocksy's container class names. None of them fired, and the page kept rendering three different left edges: header logo / nav 85px breadcrumb 128px gallery 168px The cause is structural rather than cosmetic: the header rows are set to full width while the content sits in a container capped at maxSiteWidth and centred. Those two only line up by coincidence at one specific viewport. THE FIX IS IN THE CUSTOMIZER: Header > (each row) > Container width > Boxed Both rows inherit maxSiteWidth, Blocksy aligns everything itself, and this block can stay empty. maxSiteWidth (2400) then becomes the single control for how wide the site runs. IF YOU WANT TRUE FULL-BLEED INSTEAD, the reverse also works, but it needs the real container class from devtools rather than another guess. Inspect the wrapper around the header row and the one around the gallery, and both can take the same --lq-gutter. -------------------------------------------------------------------------- */ :root { --lq-gutter: clamp(16px, 1.8vw, 48px); } /* max-width: none WAS here, from when the plan was full-bleed. With the header set to boxed it does the opposite of what is wanted: the product wrapper escapes maxSiteWidth and starts ~50px to the left of the logo. Nothing to override. Blocksy's own container governs both. */ /* -------------------------------------------------------------------------- F2. DEAD SPACE BELOW THE HEADER — moved to a setting This section guessed at .page-header and [class*="ct-hero"] on single products. Neither exists there, so it never did anything. The real cause was product_content_area_spacing set to "both", which pads the product content area at the top as well as the bottom. It is now "bottom" in the Customizer import. One setting, no CSS. -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- F3. BREADCRUMBS Blocksy renders them uppercase and letterspaced, which makes wayfinding look like a heading. The reference uses plain sentence case in grey. -------------------------------------------------------------------------- */ .ct-breadcrumbs, .woocommerce-breadcrumb { text-transform: none !important; letter-spacing: 0 !important; font-size: var(--lq-t-sm) !important; font-weight: 400 !important; /* No margin here. The hero band that wraps the breadcrumb owns the spacing (§4). A margin on this element stacks on top of that padding and, because it was declared twice with different scopes, it stacked differently per template. */ margin-bottom: 0; } /* -------------------------------------------------------------------------- F4. COLUMN SPLIT Gallery 62%, summary 38%, matching the reference. productGalleryWidth is 60 in the Customizer; the remaining difference comes from container padding, which F1 already corrects. The indent is desktop only. Below 768px the two columns stack, so that padding stopped being a gutter between them and became a 24px indent on the text alone: measured on a 488px screen, the photo started at x=27 and the title at x=52. Two left edges on one screen, which is the same problem F1 solved for the header. -------------------------------------------------------------------------- */ @media (min-width: 768px) { /* Zero here because the two columns sit side by side and the gallery ends where the summary ends. Below this width they stack, and this same rule welded the title to the gallery: measured 4px between the slide indicator and the product title. */ .single-product div.product .woocommerce-product-gallery { margin-bottom: 0; } .single-product div.product .summary { padding-left: clamp(24px, 3vw, 64px); } } @media (max-width: 767px) { .single-product div.product .woocommerce-product-gallery { margin-bottom: var(--lq-s6); } } /* -------------------------------------------------------------------------- F5. VERTICAL RHYTHM IN THE SUMMARY The reference keeps a consistent 28 to 32px gap between every block. Staging varies, which is what makes it feel loose. Setting one gap on the flex container is more reliable than margins on each child. -------------------------------------------------------------------------- */ .single-product div.product .summary { display: flex; flex-direction: column; gap: var(--lq-s6); } .single-product div.product .summary > * { margin-top: 0 !important; margin-bottom: 0 !important; } /* -------------------------------------------------------------------------- F6. TITLE AND PRICE Price renders bold on staging and regular in the reference. Bold pulls the eye away from the title, which should lead. THE PRICE RULE IS GONE. It set font-size, font-weight and colour on .single-product .summary .price with !important, which meant the price typography controls in the Customizer appeared to do nothing. Blocksy has real controls for that element, and a setting beats a rule. Set size, weight and colour there. The card price in §6 is a different element and stays in CSS: that one is about the relationship between title and price inside a grid cell, not about type scale. -------------------------------------------------------------------------- */ .single-product .product_title { font-size: clamp(1.75rem, 2.6vw, 2.5rem) !important; font-weight: 400 !important; line-height: 1.08; letter-spacing: -0.015em; } /* -------------------------------------------------------------------------- F7. VARIATION LAYOUT WooCommerce renders variations as a table: label in a cell on the left, swatches in a cell on the right. The reference stacks them, label above. Unsetting the table display is the only way to get there. -------------------------------------------------------------------------- */ .variations, .variations tbody, .variations tr, .variations td, .variations th { display: block !important; width: 100% !important; padding: 0 !important; border: none !important; text-align: left !important; } .variations th.label, .variations .label { margin-bottom: var(--lq-s3) !important; font-size: var(--lq-t-sm); font-weight: 500; } .variations tr + tr { margin-top: var(--lq-s4) !important; } /* Swatch row */ .variations td.value, .variations .value { display: flex !important; flex-wrap: wrap; gap: var(--lq-s2); } /* -------------------------------------------------------------------------- F8. ADD TO CART ROW Reference: full-width button at 64px, uppercase and letterspaced, with a square wishlist button beside it. Staging runs 72px with a quantity stepper taking a third of the row. -------------------------------------------------------------------------- */ .single-product form.cart { display: flex; flex-wrap: wrap; gap: var(--lq-s3); align-items: stretch; margin: 0 !important; } .single-product form.cart .quantity { flex: 0 0 auto; } .single-product form.cart .quantity input, .single-product form.cart .quantity .qty { height: 64px; } .single-product .single_add_to_cart_button { flex: 1 1 auto; min-height: 64px; font-size: var(--lq-t-sm) !important; font-weight: 500 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; } /* -------------------------------------------------------------------------- F9. HAIRLINE DIVIDERS The reference separates the CTA from the trust list with a single hairline and equal space above and below. Blocksy's divider element defaults to a heavier treatment. -------------------------------------------------------------------------- */ .single-product .summary hr, .single-product .ct-divider { /* [VERIFY] */ border: none; border-top: 1px solid var(--lq-rule); margin: 0 !important; height: 0; } /* -------------------------------------------------------------------------- F10. HEADER Reference logo sits close to the edge and the whole header is compact. Container padding is handled in F1; this trims the row height. -------------------------------------------------------------------------- */ header [data-row] { /* [VERIFY] */ --header-height: auto; } .site-logo img, [data-id="logo"] img { /* [VERIFY] */ max-height: 64px; width: auto; } /* ========================================================================== PATCH 04 — REAL CLASS NAMES Blocksy's actual markup, read from the DOM on staging: .product-entry-wrapper.is-width-constrained outer wrapper .ct-product-gallery-container gallery wrapper .ct-stacked-gallery-container the image grid .ct-media-container each
    .ct-woo-badges badge wrapper .out-of-stock-badge[data-shape="type-2"] the SOLD OUT badge .product.product_cat- category is on the product div, not only on THE INLINE STYLE PROBLEM Blocksy writes style="aspect-ratio: 3/4;" directly onto every . Inline styles beat stylesheet rules, so every aspect-ratio rule aimed at product images needs !important or it silently does nothing. That is why the related products row stayed landscape. ========================================================================== */ /* -------------------------------------------------------------------------- P4.1 ASPECT RATIO, ENFORCED -------------------------------------------------------------------------- */ .products .product img, .related.products .product img, .up-sells .product img, .ct-media-container img { aspect-ratio: 4 / 5 !important; object-fit: cover !important; width: 100% !important; height: auto !important; } /* Music artwork stays square. The category class sits on the product div as well as the body, so both are covered. */ .product.product_cat-downloads .ct-media-container img, body.product_cat-downloads .ct-media-container img, .product.product_cat-downloads .products .product img, body.tax-product_cat.term-downloads .products .product img { aspect-ratio: 1 / 1 !important; object-fit: contain !important; background: none; } /* -------------------------------------------------------------------------- P4.2 WIDTH CONSTRAINT — merged into F1 is-width-constrained is what makes the product page read as boxed. It is now handled in F1 together with the header gutter, so that both use the same value and cannot drift apart. -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- P4.3 BLOCKSY BADGES: OFF Switched off in the Customizer import because the site has its own badge system. This hides any that slip through, for instance on a template the setting does not reach. .ct-woo-badges alone was not enough. The out-of-stock badge sits outside that wrapper under its own class, which is why a second, slightly larger #25292E rectangle kept showing behind every SIGN UP badge, offset about 10px down and right. It only ever appeared there because both are driven by the same stock condition, which is what made it look like a styling quirk of that one badge rather than a second element. Still worth switching off properly at Blocksy > WooCommerce > badges, on both the archive and the single product. Hiding leaves it in the DOM. -------------------------------------------------------------------------- */ .ct-woo-badges, .out-of-stock-badge, [class*="ct-woo-badge-"] { display: none !important; } /* ========================================================================== PATCH 05 — RELATED PRODUCTS AS A FULL-BLEED SCROLLER Portrait images, edge to edge, with the next card deliberately half cut off at the right so it is obvious the row scrolls. This is the same pattern Tomorrowland uses for "Similar Products", except theirs has arrows. Native scrolling plus scroll-snap needs no JavaScript, works with touch, trackpad, shift-scroll and keyboard, and degrades gracefully. NOTE: leave Blocksy's own related-products slideshow OFF. Two scroll mechanisms on the same element fight each other. ========================================================================== */ /* The scroller used to break out to 100vw, which put its heading and first card at the viewport edge while everything above them sat inside the boxed container. That is a third left edge on the same page. It now stays in the container. The peek at the right-hand edge still works: it happens at the container boundary instead of the screen boundary, which is what the reference does too. */ .related.products, .up-sells.products { overflow: hidden; } /* Heading stays aligned with the rest of the page content. */ .related.products > h2, .up-sells.products > h2 { margin-bottom: var(--lq-s6); } .related.products > .products, .up-sells.products > .products { display: flex !important; grid-template-columns: none !important; flex-wrap: nowrap !important; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-left: 0; gap: var(--lq-s2) !important; padding: 0 0 var(--lq-s4); margin: 0; /* Thin scrollbar rather than none: a hidden scrollbar removes the only affordance a mouse-only visitor has. */ scrollbar-width: thin; scrollbar-color: var(--lq-rule) transparent; /* Horizontal panning only, so a vertical swipe still scrolls the page instead of getting swallowed by the carousel. */ touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch; } /* Mouse and pen get drag-to-scroll from functions.php. The cursor is the only hint that this is possible, so it matters. */ .related.products > .products.is-draggable, .up-sells.products > .products.is-draggable { cursor: grab; } .related.products > .products.is-dragging, .up-sells.products > .products.is-dragging { cursor: grabbing; scroll-snap-type: none; /* snapping mid-drag feels like the row is fighting back */ user-select: none; } /* Kills the click that ends a drag, so releasing the mouse over a product does not open it. is-dragging is added by functions.php only AFTER the pointer has actually moved past the threshold, never on pointerdown. That distinction is the whole reason links work: the click target is worked out from the hit test at press and release, so an anchor with pointer-events: none at the moment of pressing never becomes the target and the link silently stops working on every click, drag or not. The gallery is in this list because it shares the same drag helper. Listed explicitly rather than as a bare .is-dragging, so switching a third row to drag-scroll is a deliberate line here and not something that happens by accident to any element that borrows the class name. */ .related.products > .products.is-dragging a, .up-sells.products > .products.is-dragging a, .ct-stacked-gallery-container.is-dragging a { pointer-events: none; } /* Never let the browser drag the image itself. */ .related.products img, .up-sells.products img { -webkit-user-drag: none; user-select: none; } .related.products > .products::-webkit-scrollbar, .up-sells.products > .products::-webkit-scrollbar { height: 4px; } .related.products > .products::-webkit-scrollbar-thumb, .up-sells.products > .products::-webkit-scrollbar-thumb { background: var(--lq-rule); } /* Card width tuned so roughly 4.5 fit on a wide screen, which leaves the fifth visibly cut off. */ .related.products > .products > .product, .up-sells.products > .products > .product { flex: 0 0 clamp(200px, 21vw, 360px) !important; width: auto !important; max-width: none !important; scroll-snap-align: start; margin: 0 !important; } /* Mobile: one card at roughly 70% with the next peeking at 30%. Two equal columns fill the screen exactly and give no hint that the row scrolls, which is the trap the Blocksy "2 columns" setting falls into. Note that the Customizer column count does not apply here at all, since flex-basis overrides the grid. */ @media (max-width: 767px) { .related.products > .products > .product, .up-sells.products > .products > .product { flex: 0 0 70vw !important; } } /* Tablet: two full cards plus a peek. */ @media (min-width: 768px) and (max-width: 1099px) { .related.products > .products > .product, .up-sells.products > .products > .product { flex: 0 0 40vw !important; } } /* NO FADE ON THE RIGHT EDGE. There was a 48px linear-gradient ::after here, meant to reinforce that the row continues past the container. It reads as a soft blur against the photography rather than as an edge, and the half-cut card already says "there is more" without dressing it up. A hard cut is also honest about where the container ends, which is the same edge everything else on the page lines up with. If it ever comes back, note that it needs pointer-events: none, and that position: relative on the parent below is what it was anchored to. */ .related.products, .up-sells.products { position: relative; } /* Keyboard users need the scroller itself to be focusable. Paired with tabindex="0" added in functions.php. */ .related.products > .products:focus-visible, .up-sells.products > .products:focus-visible { outline: 2px solid var(--lq-accent); outline-offset: 4px; } /* ========================================================================== PATCH 06 — NATIVE BADGE SYSTEM Styling for liq_get_product_badges(), the snippet written to replace YITH Badge Management. The markup is: …product image… Both wrappers are . The snippet already returns a for .liq-badges; the previous version of this comment still described a
    and asked for it to be changed, which had already happened. REFERENCE CHANGED: Tomorrowland to Patta. Measured off four 2x screenshots, converted to CSS px. The Tomorrowland badge is a label placed on a photograph. The Patta badge is a marker in the corner of one. Everything below follows from that one difference. WAS (Tomorrowland) NOW (Patta) height 23px 16px font-size 11px 10px padding 6px 10px 3px 6px letter-spacing 0.08em 0.02em corner radius 0 2px position top right 16px top right 8px The height is the number to hold on to. Patta renders NEW, SOLD OUT and SALE at exactly 16px each, and the widths follow from the text: SOLD OUT measured 58px against 46.5px of type plus 2x6px of padding. One badge height across every state is most of what makes the system read as a system rather than as three separate decisions. TOP RIGHT, AND THIS HAS NOW BEEN BOTH V7 moved these to the left. The reason given was that a wishlist control conventionally sits in the right-hand corner, so putting the badge on the left settled a collision in advance rather than deferring it. Reversed on the owner's call. That reasoning was pre-empting a control that does not exist and is not scoped: the wishlist on the open list is the one beside the CTA on the PRODUCT PAGE, not one on the card. Choosing a corner today against a card control nobody has drawn is a guess dressed as a decision. If a card wishlist ever lands, it takes the left corner or it sits under the badge, and that is a decision for the day it is drawn. The arrows in P13.2 are the only other thing living in this corner. They are off by default, they span the full height of the media box and centre their chevron vertically, so a 16px tall badge at the top does not cover one, and .liq-badges takes no pointer events at any time. ORDER IS UNCHANGED and still reads left to right, SIGN UP then NEW, which puts NEW in the corner. To put the primary badge against the edge instead, add flex-direction: row-reverse to .liq-badges. That is safe: the inversion in .liq-badge + .liq-badge--new is a DOM sibling selector and row-reverse changes only the visual order, so the white badge stays the white one. BADGE COLOURS are unchanged. The measured Patta red came out at #B82A24 against #B82B35 for ours in the same screenshot pipeline, which is the same colour once the profile shift is taken off both. There was nothing to fix. ========================================================================== */ .liq-badge-anchor { display: block; position: relative; } .liq-badges { position: absolute; top: var(--lq-s2); /* Right. See the note above: this was left in v7 and is back on the right on the owner's call. One value, and the product page rule below is the only place that needs anything more than this. */ right: var(--lq-s2); z-index: 3; display: flex; /* Row, not column. Patta puts a second marker BESIDE the first rather than under it (NEW followed by IN-STORE EXCLUSIVE, 10px apart). The snippet still returns at most one badge, so this changes nothing today; it means that if it ever returns two, the default is the one the reference uses. */ flex-direction: row; align-items: center; /* 4px, measured between the reference pair. --lq-s2 (8px) was a guess made before there was a two-badge screenshot to measure. */ gap: var(--lq-s1); pointer-events: none; } .liq-badge { display: inline-block; background: var(--lq-ink); color: #fff; font-family: var(--lq-font-ui, system-ui, sans-serif); /* 10px rather than --lq-t-xs (11px). Deliberately not a token change: --lq-t-xs is used elsewhere in this stylesheet and this is the only place that wants 10. */ font-size: 10px; /* 600, up from 500. At 10px the badge loses weight faster than it loses size, and the measured reference is heavier than it looks. */ font-weight: 600; /* Was 0.08em. Patta tracks at roughly 0.02em: "NEW" measured 19.5px wide at 10px, which is close to untracked. 0.08em at this size pushes SOLD OUT past 60px and the badge stops reading as a marker. */ letter-spacing: 0.02em; text-transform: uppercase; line-height: 1; /* 3px 6px, with line-height 1, gives exactly the measured 16px. */ padding: 3px 6px; /* THE ONE EXCEPTION TO §3. §3 squares everything, on the reasoning that Blocksy exposes radius per element and the design has no rounded corners in it. That is still true of buttons, forms and the gallery. It is not true of the badge: the reference rounds all four corners by a measured 2px, on every badge, and at 16px tall a hard corner is the difference between a marker and a sticker. 2px, not more. This is a hairline, not a pill. Set to 0 to fold the badge back under §3 and nothing else in the file needs touching. */ border-radius: 2px; white-space: nowrap; } /* Sold out is a dead end, so it reads quieter than the others. NOT the reference value. Patta renders this at #B0B0B0 with #E3E3E3 text, which measures 1.6:1 and is below any threshold worth naming. The intent is right and the execution is not legible, so the intent is what gets copied: --lq-muted on white is 4.7:1 and still visibly quieter than the ink badges next to it. */ .liq-badge--soldout { background: var(--lq-muted); } /* Sign up is an invitation, not a refusal. Full weight. */ .liq-badge--signup { background: var(--lq-ink); } /* One red, used here and for the sale price. */ .liq-badge--sale { background: var(--lq-sale); } /* NEW ON ITS OWN is a primary badge and stays ink. A white badge over a photograph has no edge: the fill disappears into a bright sky and only the letters survive. Every card on this store sits on a festival photograph rather than on the flat grey the reference uses, so white can never be the only badge. */ .liq-badge--new { background: var(--lq-ink); } /* NEW ALONGSIDE ANOTHER BADGE inverts. The reference pairs a filled black marker with a filled white one. Two ink badges side by side are two identical boxes and the reader has to compare the words to work out which one matters; swapping the fill answers that before anything is read. Which one gives way is not arbitrary. The primary badge says whether you can buy this and at what price. NEW says when it arrived, which is context rather than a decision, so NEW is the one that goes quiet. Scoped with the sibling combinator rather than a modifier class, so the snippet stays free to decide only WHICH badges apply and never how they are ranked. Order in the DOM is the ranking, and that already comes out of liq_get_product_badges() with the primary first. */ .liq-badge + .liq-badge--new { background: var(--lq-paper); color: var(--lq-ink); /* NO BORDER, AND THAT IS DELIBERATE. A 1px ink border was here briefly and was taken out on looks. Do not add it back thinking you have found a bug, because there is a real observation underneath it: over a bright photograph the white fill and the picture are the same white, so the badge loses its box and only the letters survive. Measured on the Solarsystem product page, where at x=330 the white ran 55px tall against a 16px badge, because the mirror behind it was reflecting sky. That was judged the better trade. The badge is the quiet half of a pair and the black one beside it already carries the shape; an outline next to a filled marker reads as two competing objects rather than one statement with a footnote. Letters alone over a bright frame is a softer failure than a boxed badge that is always slightly too loud. If it ever does need an edge, use border rather than box-shadow: §3 kills shadows globally with !important, which is how the first POPULAR badge disappeared. And carve the 1px out of the padding, 2px 5px instead of 3px 6px, so the box stays 16px and still lines up with the black one. */ } /* Its own colour rather than a variation on one of the others. Black is availability, red is price; a recommendation is a third kind of thing and borrowing either would say something untrue about it. The violet is a deliberate sibling of --lq-accent rather than a new hue from nowhere. The reference has no equivalent: Patta's palette here is black, grey and red only, because Patta has no recommendation badge to place. That is an absence of a decision rather than a decision against, so the violet stays. Filled, like the rest. The first version drew an outline with an inset box-shadow, which §3 kills globally: *, *::before, *::after { box-shadow: none !important; } So it rendered as bare letterspaced text with no box at all. White on this violet measures about 6.3:1, comfortably past AA at this size, and it holds up over a photograph the way a light badge would not. Inside the Popular row this badge repeats the heading on every card. It is left on because the row is not where it earns its place, archives and search are. To drop it there: .liq-product-row .liq-badge--popular { display: none; } */ .liq-badge--popular { background: var(--lq-popular); } /* Product page: same badge, further in, and NOT simply right: 16px. The previous rule scaled the badge up here, on the reasoning that there was room for it. The reference does not: one badge size across archive, search, rows and the product page, and only the inset changes with the size of the image it sits on. A badge that grows with its container is measuring the container rather than saying anything about the product. THE ANCHOR IS THE WHOLE GRID, WHICH IS WHY THIS IS A CALC. liq_wrap_gallery_image_with_badges() wraps .ct-stacked-gallery-container, not the figure. product_view_stacked_columns is 2, so on desktop that element is a two column grid measuring the full gallery width, and the note in §2 records what a plain inset did there: the badge sat 435px away from the artwork in open space. On the left that never showed, because column one starts at the container's left edge. On the right it lands on the SECOND photograph, or in the gap beside it on a product with one photo. So the badge is pushed back past the midpoint. With two equal columns and a gap g, column one ends at 50% - g/2 from the left, which is 50% + g/2 from the right. Setting right: calc(50% + 16px) therefore lands the badge inside column one with 16 - g/2 of inset, which is between 6 and 11px for any gap Blocksy ships. Close enough to the intended 16 not to need g measured, and it self-corrects if the gallery width changes, which a fixed value would not. IF THE GALLERY EVER GOES TO THREE COLUMNS this is wrong by a third of the width and the 50% becomes 66.6%. That is the one thing to change here, and product_view_stacked_columns is where to look first. */ .liq-badge-anchor--single .liq-badges { top: var(--lq-s4); right: calc(50% + var(--lq-s4)); } /* One column, so the plain inset is correct again. Downloads is forced to a single column in §2, on the reasoning that an album cover is one image and not a set. */ .product_cat-downloads .liq-badge-anchor--single .liq-badges { right: var(--lq-s4); } /* Below 768px PATCH 11 turns the same grid into a full width scroller, so every slide is the whole container and the midpoint calc would push the badge into the middle of the photograph. Last in the file on purpose: this has to win over both rules above. */ @media (max-width: 767px) { .liq-badge-anchor--single .liq-badges { right: var(--lq-s4); } } /* The anchor must not interfere with the aspect-ratio rules in P4.1. */ .liq-badge-anchor img { display: block; } /* ========================================================================== PATCH 07 — ADD TO CART AREA Five fixes measured against the Tomorrowland product page. ========================================================================== */ /* -------------------------------------------------------------------------- P7.1 NO QUANTITY STEPPER Tomorrowland has none. Almost everyone buys one of a garment, and someone who wants two clicks the button twice, which is fewer interactions than finding a stepper, incrementing it and then clicking. Hidden rather than removed: the input still exists and still submits value 1, so nothing in the cart logic changes and reverting is one line. The button then takes the full row width, because F8 gives it flex: 1 1 auto. -------------------------------------------------------------------------- */ .single-product form.cart .quantity { display: none !important; } /* -------------------------------------------------------------------------- P7.2 "IN STOCK" IS NOISE If the button is active, the item is in stock. Saying so adds a line above the primary action for no information. Out of stock DOES stay: that one changes what the customer can do. -------------------------------------------------------------------------- */ .single-product .stock.in-stock { display: none !important; } .single-product .stock.out-of-stock { font-size: var(--lq-t-sm); color: var(--lq-muted); margin: 0; } /* -------------------------------------------------------------------------- P7.3 SOLD-OUT SIZES NEED TO BE DISTINGUISHABLE When every size is unavailable, muting them all makes the row look like a style choice rather than a stock state. A hairline through the swatch reads as "this one specifically is gone" at a glance, without shouting like the red cross Blocksy draws by default. -------------------------------------------------------------------------- */ /* EXACT SELECTORS, read from the DOM. Three earlier attempts guessed at class names containing "disabled"; Blocksy uses ct-out-of-stock instead, so none of them could ever have matched. Real markup:
    Join Waitlist
    Two things that broke earlier attempts: the submit is an , not a
    Earlier rules styled the anchor as the button. Blocksy also styles the inner