/** Shopify CDN: Minification failed Line 418:4 Unexpected "{" Line 418:5 Expected identifier but found "%" Line 418:23 Unexpected "2026" Line 419:82 Expected identifier but found "%" **/ /* SHOPIFY_STYLESHEETS_VERSION: 1.0 */ /* CSS from section stylesheet tags */ /* START_SECTION:bokja-artisans (INDEX:1) */ /* ---- THE TITLE, in the Collective's own style (James, 2026-09-03: same as the collective titles, left, smaller, less height). It carries .bokja-collective-active, the class the Collective's filtered views put on their heading, so the size, the letterspacing, the uppercase and the hairline rule under it are all inherited from bokja-custom.css rather than restated. Only two things are overridden: the archive intro centres its text and this must sit left, and the intro's bottom margin was sized for a heading plus a standfirst. ---- */ .bokja-artisans .bokja-archive__intro { text-align: start; margin-block-end: 0; } /* Measured against the live Collaborations page rather than read off the stylesheet, after getting it wrong that way once. Two values need restoring because this is an h1 and the Collective's heading is a p: the h1 default weight is 700 against the live 400, and the h1 reset flattens the class's own bottom margin. Everything else matches exactly: 12px / Inter / uppercase / 1.92px tracking / 0.55 opacity / 0.5px rule. The margin needs TWO classes, not one. base.css carries `:last-child:is(p, h1, ...) { margin-block-end: 0 }` at (0,1,1), and with the standfirst empty this h1 is the intro's only child, so it matches. On the live Collaborations page the same heading has the grid after it and never does, which is why it keeps its 34px there and lost it here. Two classes is (0,2,0) and clears the reset. */ .bokja-artisans .bokja-artisans__title { font-weight: 400; margin: 0 0 clamp(20px, 2.5vw, 34px); } /* The former-artisans label: the title's treatment (class shared), pushed down off the first wall by one grid gap and a little air, so the second wall reads as a chapter, not a leftover. */ .bokja-artisans .bokja-artisans__former-label { font-weight: 400; margin: clamp(36px, 5vw, 72px) 0 clamp(20px, 2.5vw, 34px); } /* Top space, measured against both live pages rather than chosen. The gallery section pads clamp(40px, 6vw, 96px), which put the title 91px below the nav; the Collective hub pads clamp(20px, 3.5vw, 56px) and puts its Collaborations heading at 53px. This page wears the Collective's heading, so it takes the Collective's space. Two classes to beat the archive shorthand reliably, whichever order the section stylesheets compile in. */ .bokja-artisans.bokja-archive { padding-block-start: clamp(20px, 3.5vw, 56px); } /* ---- THE CUSTOM LAYOUT (James, 2026-09-03: "more dense, at least seven images wide", and "we can have a custom layout for this page if it's easier"). WHY THE GALLERY'S OWN CYCLE IS WRONG HERE. That cycle varies tile WIDTH, spans of one and two columns, which is right for pieces: a tapestry can earn a bigger tile. Measured on this page at 1512px it put FOUR portraits across and ran 2,765px tall for twenty five people. Two problems, and the second is not about density: on a wall of PEOPLE a wider tile reads as a rank, and we do not mean one artisan to outrank the next. SO: every tile is the SAME WIDTH and only the HEIGHT varies. The wall keeps a masonry rhythm, the count per row is exact and settable, and nobody is promoted by the grid. Everything else is still the gallery's: the same gap token, the same hover label, the same cover crop, no zoom and no scrim. ---- */ @media screen and (min-width: 1100px) { .bokja-artisans .bokja-gallery__grid { grid-template-columns: repeat(var(--art-cols, 8), minmax(0, 1fr)); /* The base row scales with the column count, so tiles keep their shape as the wall gets denser: a column is 1/N of the measure, so the row has to shrink with it. */ grid-auto-rows: calc((100vw - 2 * clamp(16px, 4vw, 56px)) / var(--art-cols, 8) / 4.2); grid-auto-flow: row dense; } .bokja-artisans .bokja-gallery__piece { aspect-ratio: auto; block-size: 100%; grid-column: span 1; } .bokja-artisans .bokja-gallery__piece--s1 { grid-row: span 5; } .bokja-artisans .bokja-gallery__piece--s2 { grid-row: span 4; } .bokja-artisans .bokja-gallery__piece--s3 { grid-row: span 4; } .bokja-artisans .bokja-gallery__piece--s4 { grid-row: span 5; } .bokja-artisans .bokja-gallery__piece--s5 { grid-row: span 4; } .bokja-artisans .bokja-gallery__piece--s6 { grid-row: span 5; } .bokja-artisans .bokja-gallery__piece--s7 { grid-row: span 4; } .bokja-artisans .bokja-gallery__piece--s8 { grid-row: span 4; } /* ---- THE FEATURE TILE (James, 2026-09-03: Huda and Maria two columns wide, more centred). This is the ONE place the wall ranks anybody, and it ranks a different thing: founders against the studio, not artisans against each other. Two columns and six rows, so it reads as a feature by area rather than by ornament. Where it lands horizontally is set by its position in the names list, which is why the two of them sit at the midpoint of the default order rather than at their alphabetical places. ---- */ /* Two columns is 393px wide, and a 2:3 portrait needs about 590px of height to show whole at that width. Six rows gave 336px, a landscape box holding an upright photograph, so both founders were cut top and bottom however their crop was set. Nine rows is 510px, near enough their own shape that the picture survives. */ .bokja-artisans .bokja-gallery__piece--feature { grid-row: span 9; } /* Placed explicitly, and symmetrically: on a seven column wall a four-wide pair cannot be centred, but 1 + [2,3] + 4 + [5,6] + 7 is perfectly balanced about the middle column, with a single portrait between the two founders and one at each end. */ .bokja-artisans .bokja-gallery__piece--feature1 { grid-column: 2 / span 2; } .bokja-artisans .bokja-gallery__piece--feature2 { grid-column: 5 / span 2; } /* Any further featured names fall back to a plain two-wide tile, wherever they land. */ .bokja-artisans .bokja-gallery__piece--feature:not(.bokja-gallery__piece--feature1):not(.bokja-gallery__piece--feature2) { grid-column: span 2; } /* ---- TALL TILES (James, 2026-09-03: Maalim Mahmoud can be longer, we do not need to crop height that much). The size cycle gave him a four unit tile, 220px at 191 wide, which throws away most of a full length studio frame. Six units is 336px. Against a 191px column that box is proportionally TALLER than the source 2:3, so cover scales the image by its height instead of its width: the whole height survives and roughly 15% comes off the sides, which is the trade this asks for. Five units would be the other way round, near enough the source ratio, and would still be cropping the length. ---- */ .bokja-artisans .bokja-gallery__piece--tall { grid-row: span 6; } /* The hover label is the gallery's; at this tile size it wants to be smaller. */ .bokja-artisans .bokja-gallery__name { padding: 5px 7px; font-size: var(--bt-micro, 11px); } } /* Tablet: half the desktop count, same rules. */ @media screen and (min-width: 750px) and (max-width: 1099px) { .bokja-artisans .bokja-gallery__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: calc((100vw - 2 * clamp(16px, 4vw, 56px)) / 4 / 4.2); grid-auto-flow: row dense; } .bokja-artisans .bokja-gallery__piece { aspect-ratio: auto; block-size: 100%; grid-column: span 1; } .bokja-artisans .bokja-gallery__piece--s1, .bokja-artisans .bokja-gallery__piece--s4, .bokja-artisans .bokja-gallery__piece--s6 { grid-row: span 5; } .bokja-artisans .bokja-gallery__piece--s2, .bokja-artisans .bokja-gallery__piece--s3, .bokja-artisans .bokja-gallery__piece--s5, .bokja-artisans .bokja-gallery__piece--s7, .bokja-artisans .bokja-gallery__piece--s8 { grid-row: span 4; } } /* ---- THE COLLABORATIONS LAYOUT AT SEVEN STACKS ---- Inherits .bokja-collective-front wholesale (the AD-derived column stacks, its gap tokens and its border offset). Two changes only: seven equal columns instead of 1fr 2fr 1fr, and a rule in every internal gutter rather than only around the centre, since with seven equal stacks there is no centre to single out. Row gap comes down from 3rem because a portrait column is narrower than a story column. ---- */ @media screen and (min-width: 1100px) { .bokja-artisans-stacks { grid-template-columns: repeat(var(--art-cols, 7), minmax(0, 1fr)); --front-gap: clamp(14px, 1.6vw, 26px); --front-border-offset: calc(var(--front-gap) / 2); } .bokja-artisans-stacks .bokja-collective-front__col { row-gap: clamp(20px, 2.2vw, 38px); } .bokja-artisans-stacks .bokja-collective-front__col + .bokja-collective-front__col { margin-inline-start: calc(var(--front-border-offset) * -1); padding-inline-start: var(--front-border-offset); border-inline-start: 1px solid rgba(26, 26, 26, 0.4); } .bokja-artisans-stacks .bokja-collective-card__title { font-size: var(--bt-h3, 15px); } .bokja-artisans-stacks .bokja-collective-card__rule { margin-block-start: 10px; width: 28px; } .bokja-artisans-stacks .bokja-collective-card__standfirst { font-size: var(--bt-micro, 11px); } } @media screen and (min-width: 750px) and (max-width: 1099px) { .bokja-artisans-stacks { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media screen and (max-width: 749px) { .bokja-artisans-stacks { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* The drawer chassis (.fabric-drawer) is inherited from bokja-custom.css, which loads on every page. Only the pane's own contents are styled here. */ .bokja-artisan-drawer__portrait { display: block; inline-size: 100%; aspect-ratio: 2 / 3; object-fit: cover; margin-block-end: 18px; /* object-position is per portrait, inline */ } .bokja-artisan-drawer__line { margin: 0 0 14px; font-size: var(--bt-micro, 11px); letter-spacing: .1em; text-transform: uppercase; opacity: .65; } .bokja-artisan-drawer__bio { margin: 0; font-size: var(--bt-body, 13px); line-height: 1.65; } /* ---- THE HEADER BAND ---- */ .bokja-artisans__band { display: grid; gap: clamp(18px, 3vw, 44px); margin-block-end: clamp(18px, 2.2vw, 32px); } .bokja-artisans__band-media { margin: 0; } /* The WHOLE photograph, scaled down. No crop: it is a group portrait and every face in it is somebody, so it is made smaller by narrowing its column, not by trimming its edges. */ .bokja-artisans__band-media img { display: block; inline-size: 100%; block-size: auto; } .bokja-artisans__band-text { font-size: var(--bt-body, 13px); line-height: 1.7; max-inline-size: 56ch; /* Justified, no hyphenation. The rivers a justified column opens are a function of the measure, not of hyphens: at 46ch there was not enough room to distribute the slack, so the text now fills its column instead of being capped, and the spacing evens out on its own. Wider measure, no broken words. */ text-align: justify; hyphens: none; } .bokja-artisans__band-text > :first-child { margin-block-start: 0; } .bokja-artisans__band-text > :last-child { margin-block-end: 0; } .bokja-artisans__break { border: 0; border-block-start: 0.5px solid rgba(26, 26, 26, 0.18); margin: 0 0 clamp(18px, 2.2vw, 32px); } @media screen and (min-width: 750px) { /* Picture left, words right. The text sits at the FOOT of its column so its last line lands on the photograph's bottom edge, which is where the eye leaves the band and enters the wall. */ .bokja-artisans__band { /* 0.93fr against 1fr puts the photograph at about 645px wide, a further 10% on the 586px it was, and about 430px tall at its own 3:2. Still the whole frame, nothing cut. */ grid-template-columns: minmax(0, 0.93fr) minmax(0, 1fr); align-items: end; } } /* Editorial: the portraits' own shape, so no face is cropped at the chest. */ .bokja-artisans .bokja-collective-card__media { aspect-ratio: 2 / 3; overflow: hidden; } .bokja-artisans .bokja-collective-card__image { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 50% 22%; } .bokja-artisans .bokja-collective-card { cursor: default; } /* Editorial gets the same density: the Collective's three columns are sized for stories. */ @media screen and (min-width: 1100px) { .bokja-artisans .bokja-collective-grid { grid-template-columns: repeat(var(--art-cols, 8), minmax(0, 1fr)); column-gap: var(--bokja-gap, 10px); row-gap: clamp(20px, 2vw, 34px); } .bokja-artisans .bokja-collective-card__title { font-size: var(--bt-h3, 15px); } .bokja-artisans .bokja-collective-card__rule { margin-block-start: 10px; width: 28px; } .bokja-artisans .bokja-collective-card__standfirst { font-size: var(--bt-micro, 11px); } } /* END_SECTION:bokja-artisans */ /* START_SECTION:bokja-bestsellers (INDEX:3) */ .bokja-bestsellers { display: flex; flex-direction: column; align-items: center; /* Side inset uses the shared --bokja-edge token so the four products ALWAYS line up to the same width as the three gateway panels above (James, 2026-06-30). Top/bottom keep the larger frame that separates the strip from the full-height gateway. */ padding: clamp(28px, 3.5vw, 56px) var(--bokja-edge); background: var(--color-background); } .bokja-bestsellers__head { font-size: var(--bt-label); letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-foreground); opacity: 0.5; text-align: center; margin: 0 0 18px; } .bokja-bestsellers__headlink { color: inherit; text-decoration: none; } .bokja-bestsellers__headlink:hover { text-decoration: underline; text-underline-offset: 0.3em; } .bokja-bestsellers__row { display: flex; justify-content: center; gap: var(--bokja-gap); width: 100%; margin-inline: auto; } .bokja-bestsellers__item { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: inherit; } .bokja-bestsellers__media-wrap { position: relative; } .bokja-bestsellers__image-link { display: block; color: inherit; text-decoration: none; } .bokja-bestsellers__media { display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--bokja-product-media-background, var(--color-background)); } .bokja-bestsellers__img { width: 100%; height: 100%; object-fit: cover; object-position: center var(--bokja-bestsellers-crop-y, 100%); display: block; } .bokja-bestsellers__info { color: inherit; text-decoration: none; /* TWO-COLUMN GRID, not a flex row (James 2026-08-16: "the name of the item and the price seem to come on the same line ... the price ends up on the left underneath the name"). One rule, three sections: storygroup, catgroup and this one. This row was the worst instance because it is on the HOMEPAGE and it failed on desktop too. This SUPERSEDES the 2026-08-09 Safari large-text guard that used to sit here. That guard was a correct read of a real bug - name and nowrap price overlapping when they no longer fit one line - but letting the row wrap moved the failure instead of removing it. Once it could wrap, the price took flex line 2 on its own, and "justify-content: space-between" resolves a lone item to flex-START: hard left, under the name. Measured live on bokja.com before this change: 6/6 cards at 375px and 320px, and 3/6 at 1440px. "min-width: 0" on the name (already present below) does not prevent it. Flex line breaking uses each item's MAX-CONTENT hypothetical size, which min-width does not reduce; min-width only governs shrinking after the lines are decided. A grid removes the choice. Track placement is fixed, so the price can never leave its column and can never fall below the name. "minmax(0, 1fr)" lets the name take the rest of the card and wrap; "max-content" means the price column is exactly as wide as the price, so it is never shrunk and never wrapped mid-value. The overlap the 08-09 guard was written against cannot return either: the name track has a zero minimum, so it yields to the price rather than growing into it. These are the same three declarations as .bokja-product-card-caption in assets/bokja-custom.css, which has been a grid since it was written and has never had this bug. */ display: grid; grid-template-columns: minmax(0, 1fr) max-content; align-items: baseline; column-gap: 12px; row-gap: 0; /* Lift the caption so the gap under a picture EQUALS the gap beside it (James's rule, extended to the vertical, 2026-08-09). Measured on the page: at a 13px caption the capitals are 9.46px tall, the font's ascent is 13.0px and the line box is 20.8px. So the space sitting above the capitals inside the box is 3.9px of half-leading PLUS 3.54px of ascender, 7.44px in total, and a 10px flex gap was reading as 17.44px. As a ratio of the caption's own size that is 0.572em, so this scales if the caption size ever changes. NOTE the unit: this must be calculated from the CAPTION token, not in `em`. An em here resolves against this row's own inherited font-size (16.1px), not the caption's 13px, which overshot the lift by 1.8px and pulled the text too close. Verified by measuring the rendered page, twice. text-box: trim-start was tried first and is the right tool in principle, but it computed to `none` on the live engine and silently did nothing, which is worse than a number that works. */ margin-block-start: calc(var(--bt-card) * -0.572); } .bokja-bestsellers__name { font-size: var(--bt-card); letter-spacing: 0.01em; color: var(--color-foreground); /* allow the name to shrink and wrap inside its own box rather than overflow into the price column (min-width:auto is what let it collide in Safari) */ min-width: 0; /* Residual edge case (2026-08-09): the wrap fix pairs name and price correctly, but one long single word still overflowed. "Pomegranate" renders 158px inside a 145px card at 320/200 and was the last 3px of document scroll. A word can only break when it cannot fit. */ overflow-wrap: anywhere; hyphens: auto; } .bokja-bestsellers__price { font-family: var(--font-body--family); font-size: var(--bt-card); font-weight: 400; letter-spacing: 0.01em; color: var(--bokja-price-ink); /* Safe unconditionally now: the name track is minmax(0, 1fr), so a nowrap price can only overflow the card if the price alone is wider than the card. Widest real value is "$9,200.00" at 63.5px against a 145px card at 320px. */ white-space: nowrap; justify-self: end; text-align: end; } /* ---- TABLET (750-1099): four across, two rows of the six (Malou 2026-08-19 — the row held 6-across all the way down to 750px, then snapped to 2-up; the phone grid, not the desktop flex row, is the model here). Same grid mechanics as the phone block below so the 750px edge is a column-count change only, not a layout-model change: a card never changes from a grid cell to a flex item at a breakpoint, which is what stops the picture ratio jumping. Two rows of three would also fit six, but the catalogue's own call everywhere else at this width is four (product grids, the Gallery band added yesterday), and six-as-4+2 reads as "more below", where 3+3 reads as the end. ---- */ @media screen and (min-width: 750px) and (max-width: 1099px) { .bokja-bestsellers__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px var(--bokja-gap); } } @media screen and (max-width: 749px) { /* Two-up on mobile with side borders exactly as thin as the picture gap (James 2026-08-06 second pass; full bleed reverted). Grid, not flex: the flex-basis pairing rendered one-up on real phones. */ .bokja-bestsellers { padding: clamp(14px, 1.9vw, 30px) var(--bokja-gap); } .bokja-bestsellers__row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px var(--bokja-gap); } } /* END_SECTION:bokja-bestsellers */ /* START_SECTION:bokja-category-groups (INDEX:4) */ .bokja-catgroups { display: flex; flex-direction: column; gap: clamp(36px, 4.5vw, 72px); padding: clamp(28px, 3.5vw, 56px) var(--bokja-edge); background: var(--color-background); } /* Sticky group names on All Homeware, same behaviour as the cushion families (James 2026-08-06): held just below the sticky trail, measured offsets. PINNED CLEARANCE (James 2026-08-08): "the spacing is correct before the menu locks into place, and then you lose height." Measured on the live theme before touching it: pinned, this title's box top landed at the locked trail's bottom edge (clearance -0.33px at 1280, -0.09px at 390) so the word butted straight onto the bar, and 4 product cards sat inside the head's own box because nothing painted below the text - the 18px underneath was MARGIN, which is transparent and does not travel with a sticky element. Two changes, both invisible in normal flow: 1. `top` gains --bokja-group-clear, so the pinned word keeps that much air under the bar. 2. the 18px below the text moves from margin to PADDING. Identical block geometry (18px either way), but padding is inside the sticky box, so it paints the background and holds the cards off the title while they scroll past. The ::before apron does the same job above. Trail z-index is 12 against this head's 5, so the apron always paints UNDER the bar. No transforms anywhere near the header (tear-guard). */ .bokja-catgroup__head { position: sticky; {%- comment -%} v6 2026-08-25: the header is static and scrolls away — the head clears only the pinned strip. Pinning at the header var was the stuck-CUSHIONS bug. {%- endcomment -%} top: calc(var(--bokja-trail-height, 44px) + var(--bokja-group-clear, 18px)); z-index: 5; background: var(--color-background); margin: 0; padding-block-end: 18px; } /* Opaque apron above the stuck title: covers the clearance strip plus 10px of slack for the few-px variance in the trail's measured height across viewports and zoom levels. */ .bokja-catgroup__head::before { content: ''; position: absolute; left: 0; right: 0; top: calc(-1 * (var(--bokja-group-clear, 18px) + 10px)); height: calc(var(--bokja-group-clear, 18px) + 10px); background: var(--color-background); } .bokja-catgroup__title { font-size: var(--bt-label); letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-foreground); opacity: 0.5; text-align: center; margin: 0; font-weight: inherit; } .bokja-catgroup__grid { display: grid; grid-template-columns: repeat(4, 1fr); /* Generous ROW gap, tight columns (James, 05-08 second pass): with contained images the 10px shared gap left captions sandwiched between frames and rows read cramped. */ gap: clamp(32px, 3.5vw, 56px) var(--bokja-gap); } .bokja-catgroup__item { position: relative; min-width: 0; } .bokja-catgroup__link { display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: inherit; min-width: 0; } /* Card gallery (James, 05-08): every image stacked in the frame, arrows step through, hover reveals the CLOSE-UP only (never the back — registration between front and back shots is unreliable). The wishlist heart reuses the global bokja-card-controls classes and the delegated bokja-wishlist.js. */ .bokja-catgroup__img { opacity: 0; transition: opacity 180ms ease; } .bokja-catgroup__img.is-current { opacity: 1; } .bokja-catgroup__item:not([data-nav]):hover .bokja-catgroup__img--hover { opacity: 1; z-index: 1; } .bokja-catgroup__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; background: transparent; border: 0; padding: 4px 10px; cursor: pointer; color: var(--color-foreground); font-size: 26px; line-height: 1; opacity: 0; transition: opacity 150ms ease; } .bokja-catgroup__arrow--prev { left: 2px; } .bokja-catgroup__arrow--next { right: 2px; } .bokja-catgroup__item:hover .bokja-catgroup__arrow, .bokja-catgroup__arrow:focus-visible { opacity: 0.75; } @media (hover: none) { .bokja-catgroup__arrow { opacity: 0.75; } } .bokja-catgroup__save { position: absolute; top: 10px; right: 10px; z-index: 2; background: transparent; border: 0; padding: 6px; cursor: pointer; color: var(--color-foreground); opacity: 0; transition: opacity 150ms ease; } .bokja-catgroup__item:hover .bokja-catgroup__save, .bokja-catgroup__save.is-saved, .bokja-catgroup__save:focus-visible { opacity: 1; } @media (hover: none) { .bokja-catgroup__save { opacity: 1; } } /* Uniform 4:5 frame with the FULL image contained (James, 05-08): the catalogue mixes 4:5, 2:3 and two landscape sofa shots — natural heights made the rows ragged. contain letterboxes on the off-white ground instead of cropping; 4:5 matches the dominant format so most images fill the frame edge to edge. The img is absolutely pinned: an in-flow img taller than the frame stretches the aspect-ratio box (live-observed 453px vs 375px rows); absolute positioning makes the frame the hard boundary. */ .bokja-catgroup__media { display: block; position: relative; aspect-ratio: 4 / 5; background: var(--bokja-product-media-background, var(--color-background)); } .bokja-catgroup__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; } .bokja-catgroup__info { /* TWO-COLUMN GRID, not a flex row (James 2026-08-16: "the name of the item and the price seem to come on the same line ... the price ends up on the left underneath the name"). One rule, three sections: storygroup, bestsellers and this one. This SUPERSEDES the 2026-08-09 wrap guard that used to sit here. That guard was a correct read of a real bug - a nowrap price being pushed out of its own card into the neighbour's column, 39px over at 375 and 67px at 320 - but the cure moved the failure instead of removing it. Once the row could wrap, any name wider than the card took flex line 1 on its own and the price fell to line 2, where "justify-content: space-between" resolves a lone item to flex-START: hard left, under the name. Measured live before this change: 94/94 cards on /collections/homeware at 320px, 89/94 at 375px, and 1/94 even at 1440px. "min-width: 0" on the name (already present below) does not prevent it. Flex line breaking uses each item's MAX-CONTENT hypothetical size, which min-width does not reduce; min-width only governs shrinking after the lines are decided. A grid removes the choice. Track placement is fixed, so the price can never leave its column and can never fall below the name. "minmax(0, 1fr)" lets the name take the rest of the card and wrap; "max-content" means the price column is exactly as wide as the price, so it is never shrunk and never wrapped mid-value. The original overflow the 08-09 guard was written against cannot return either: the name track has a zero minimum, so it yields to the price rather than pushing it out. These are the same three declarations as .bokja-product-card-caption in assets/bokja-custom.css, which has been a grid since it was written and has never had this bug. */ display: grid; grid-template-columns: minmax(0, 1fr) max-content; align-items: baseline; column-gap: 12px; row-gap: 0; /* Lift the caption so the gap under a picture EQUALS the gap beside it (James's rule, extended to the vertical, 2026-08-09). Measured on the page: at a 13px caption the capitals are 9.46px tall, the font's ascent is 13.0px and the line box is 20.8px. So the space sitting above the capitals inside the box is 3.9px of half-leading PLUS 3.54px of ascender, 7.44px in total, and a 10px flex gap was reading as 17.44px. As a ratio of the caption's own size that is 0.572em, so this scales if the caption size ever changes. NOTE the unit: this must be calculated from the CAPTION token, not in `em`. An em here resolves against this row's own inherited font-size (16.1px), not the caption's 13px, which overshot the lift by 1.8px and pulled the text too close. Verified by measuring the rendered page, twice. text-box: trim-start was tried first and is the right tool in principle, but it computed to `none` on the live engine and silently did nothing, which is worse than a number that works. */ margin-block-start: calc(var(--bt-card) * -0.572); } .bokja-catgroup__name { font-size: var(--bt-card); letter-spacing: 0.01em; color: var(--color-foreground); /* min-width:auto is what let the name overflow into the price column */ min-width: 0; overflow-wrap: anywhere; } .bokja-catgroup__price { font-family: var(--font-body--family); font-size: var(--bt-card); font-weight: 400; letter-spacing: 0.01em; color: var(--bokja-price-ink); /* Safe unconditionally now: the name track is minmax(0, 1fr), so a nowrap price can only overflow the card if the price alone is wider than the card. Widest real value is "$9,200.00" at 63.5px against a 145px card at 320px. */ white-space: nowrap; justify-self: end; text-align: end; } @media screen and (max-width: 749px) { .bokja-catgroups { /* Side borders as thin as the picture gap (James 2026-08-06 second pass). */ padding: clamp(14px, 1.9vw, 30px) var(--bokja-gap); } /* STRICT two-up (James 2026-08-08, supersedes his 08-06 no-orphan mixes: "It should only be two up"). A trailing lone card is accepted. This landed first as an !important block in assets/bokja-custom.css because this section was on a worker branch that night; it is folded in here now and removed there, so the rule has ONE home. The price overflow this rule was paired with is the same bug: 3-up cards at 117px could not hold a nowrap "$5,000.00", two prices overflowed the document by 18px, and every touch swipe panned the page sideways - which broke image swiping on the PDP. Two-up widens the card, and since 2026-08-16 the caption row is a grid whose NAME track has a zero minimum, so the name yields to the price instead of pushing it out. The mobile ".bokja-catgroup__price { white-space: normal }" escape hatch that used to sit here is therefore gone: it was the thing that let a price break mid-value, and it is no longer load-bearing. Re-measured live at 320px after the change - 0 of 94 cards overflow. */ .bokja-catgroup__grid { grid-template-columns: repeat(2, 1fr); } /* FAMILY ROWS (James 2026-08-08, supersedes the even-index doctrine on MOBILE ONLY: "on mobile it's better to have the pairs together, and sometimes have one on a single row... It's less important to have a space, and more important to keep the pairs together.") The first card of a declared family run starts in column 1, so a run can never straddle two rows. When the arithmetic does not line up, the card before it sits alone and column 2 of that row stays EMPTY - that gap is the intended outcome, not a bug to pack away. With two columns, column 1 is the only start that guarantees it. DESKTOP IS UNTOUCHED: the rule lives inside the phone query, so the published 4-up even-index layout is byte-for-byte what it was. */ .bokja-catgroup__item--famlead { grid-column-start: 1; } } /* END_SECTION:bokja-category-groups */ /* START_SECTION:bokja-category-nav (INDEX:5) */ .bokja-category-nav { z-index: 12; /* Side padding matches the homepage's near-full-bleed margins. Top padding halved (James, 05-08), then trimmed again same day ("a little bit more"). */ padding: clamp(6px, 0.8vw, 12px) var(--bokja-edge, 30px) 12px; background: var(--color-background); position: relative; } .bokja-category-nav.is-sticky { position: sticky; /* Measured, never guessed: the header's real height (megamenu keeps the var honest), so the trail meets the header underside on every page and breakpoint. */ top: var(--bokja-header-height, 60px); } .bokja-category-nav__inner { display: flex; flex-wrap: wrap; gap: 12px 22px; width: 100%; margin-inline: auto; padding-block-end: 4px; } .bokja-category-nav__link { color: var(--color-foreground); opacity: 0.58; text-decoration: none; text-transform: uppercase; letter-spacing: 0.04em; font-size: var(--bt-label); line-height: 1.3; padding-block-end: 2px; border-block-end: 0.5px solid transparent; transition: opacity 150ms ease, border-color 150ms ease; } .bokja-category-nav__link:hover, .bokja-category-nav__link:focus-visible, .bokja-category-nav__link.is-active { opacity: 1; } .bokja-category-nav__link.is-active { border-block-end-color: currentColor; } @media screen and (max-width: 749px) { .bokja-category-nav { padding: 8px var(--bokja-edge, 14px) 10px; } .bokja-category-nav.is-sticky { top: var(--bokja-header-height, 50px); } .bokja-category-nav__inner { flex-wrap: nowrap; gap: 18px; overflow-x: auto; scrollbar-width: none; white-space: nowrap; } .bokja-category-nav__inner::-webkit-scrollbar { display: none; } } /* ---- cushion filter dropdown (2026-08-24) ---- */ /* The trigger is a .bokja-category-nav__link in button form: same word styling, pushed to the end of the row. Button element defaults need flattening the link class never had to. */ .bokja-cfilters-toggle { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 7px; background: none; border: none; border-block-end: 0.5px solid transparent; padding: 0 0 2px; font-family: inherit; cursor: pointer; } .bokja-cfilters-toggle.is-open, .bokja-cfilters-toggle.is-active { opacity: 1; } /* No underline on the trigger in ANY state (Malou 2026-08-25, third pass of "remove the little lines around the arrow") - the active signal is the echoed pick itself (colour dot or word) at full opacity, nothing more. The trigger wears the nav-link class, so `.bokja-category-nav__link.is-active` above still coloured the button's bottom border - arrow included - whenever a filter was active. Same specificity, later in the sheet, so this wins. */ .bokja-cfilters-toggle.is-active { border-block-end-color: transparent; } .bokja-cfilters-toggle__caret { display: block; transition: transform 150ms ease; } .bokja-cfilters-toggle.is-open .bokja-cfilters-toggle__caret { transform: rotate(180deg); } /* Active colour echoed in the trigger summary as a smaller dot (built by the engine). The engine builds it as a SPAN while the panel's dots are BUTTONs: a span is display:inline, which ignores width/height and painted as a thin vertical red bar beside the arrow - the second of Malou's "little lines". inline-block makes it the round dot it was always meant to be. */ .bokja-cfilters-toggle .bokja-cfilters__dot--mini { display: inline-block; width: 7px; height: 7px; } /* The panel hangs off .bokja-category-nav (position: relative / sticky), so it travels with the sticky trail. Doubled class: the .bokja-cfilters base rule (row flex, align-items center) sits in bokja-story-groups' stylesheet, which compiles AFTER this one - equal specificity loses and the rows collapse to centred shrink-to-fit instead of stretching label-left/options-right. */ .bokja-cfilters.bokja-cfilters--panel { position: absolute; top: 100%; inset-inline-end: var(--bokja-edge, 30px); z-index: 20; flex-direction: column; align-items: stretch; gap: 14px; min-width: 250px; background: var(--color-background); border: 0.5px solid rgba(0, 0, 0, 0.16); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.08); padding: 16px 18px 13px; } .bokja-cfilters--panel[hidden] { display: none; } .bokja-cfilters__row { display: flex; align-items: center; justify-content: space-between; gap: 18px; } /* An axis none of the cushions carry offers nothing - hide its whole row, label included (progressive: without :has support the label just sits alone). */ .bokja-cfilters__row:not(:has(button:not([hidden]))) { display: none; } .bokja-cfilters__row--foot { justify-content: flex-end; border-block-start: 0.5px solid rgba(0, 0, 0, 0.08); padding-block-start: 10px; } .bokja-cfilters__axis { font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.38; } .bokja-cfilters--panel .bokja-cfilters__set { flex-wrap: wrap; justify-content: flex-end; } @media screen and (max-width: 749px) { /* The row scrolls sideways on phones; the trigger stays pinned at the right edge (sticky inside the scroll row), fading the words sliding under it. */ .bokja-cfilters-toggle { position: sticky; inset-inline-end: -1px; background: linear-gradient(to right, transparent, var(--color-background) 24px); padding-inline-start: 30px; /* The trigger wears the nav-link class, whose 0.58 opacity made the WHOLE button translucent: the words sliding under it showed straight through the word FILTER (James 2026-09-23, "the Filter button overlaps Furniture"). The button itself is opaque so its fade actually hides them; the dimming moves to what it contains. */ opacity: 1; } .bokja-cfilters-toggle > * { opacity: 0.58; transition: opacity 150ms ease; } .bokja-cfilters-toggle.is-open > *, .bokja-cfilters-toggle.is-active > * { opacity: 1; } .bokja-cfilters.bokja-cfilters--panel { inset-inline: 0; border-inline: none; padding: 16px var(--bokja-edge, 14px) 13px; } } /* END_SECTION:bokja-category-nav */ /* START_SECTION:bokja-drops-timeline (INDEX:10) */ .bokja-drops { --drop-gap: clamp(64px, 9vw, 140px); display: flex; flex-direction: column; gap: var(--drop-gap); padding-block: clamp(32px, 5vw, 72px); } .bokja-drops__intro { max-inline-size: 40ch; margin-inline: auto; text-align: center; font-size: var(--bt-body); letter-spacing: 0.04em; line-height: 1.6; opacity: 0.7; } .bokja-drop { display: flex; flex-direction: column; } .bokja-drop__hero { display: block; inline-size: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: var(--color-background); } .bokja-drop__img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; } .bokja-drop__intro { text-align: center; max-inline-size: 52ch; margin-inline: auto; padding-block: clamp(20px, 3vw, 40px); padding-inline: 16px; } .bokja-drop__eyebrow { margin: 0 0 14px; font-size: var(--bt-label); letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.6; } .bokja-drop__title { margin: 0; font-size: var(--bt-hero); font-weight: 400; line-height: 1.08; letter-spacing: -0.01em; } .bokja-drop__dek { margin: 16px auto 0; max-inline-size: 44ch; font-size: var(--bt-h3); line-height: 1.65; opacity: 0.78; } .bokja-drop__cta { display: inline-block; margin-block-start: 22px; font-size: var(--bt-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-foreground); text-decoration: none; border-block-end: 1px solid var(--color-foreground); padding-block-end: 4px; } .bokja-drop__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(8px, 1.4vw, 18px); list-style: none; margin: 0; padding-inline: clamp(16px, 3vw, 48px); max-inline-size: var(--full-page-grid-central-column-width, 1400px); margin-inline: auto; inline-size: 100%; } .bokja-drop__item { margin: 0; } .bokja-drop__product { display: block; text-decoration: none; color: var(--color-foreground); } .bokja-drop__thumb { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--color-background); } .bokja-drop__pimg { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; } .bokja-drop__name { display: block; margin-block-start: 8px; font-size: var(--bt-card); line-height: 1.3; } .bokja-drop__price { display: block; margin-block-start: 2px; font-family: var(--font-body--family); font-size: var(--bt-card); font-weight: 400; letter-spacing: 0.01em; color: var(--bokja-price-ink); } @media screen and (max-width: 749px) { .bokja-drop__hero { aspect-ratio: 4 / 5; } .bokja-drop__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* END_SECTION:bokja-drops-timeline */ /* START_SECTION:bokja-flora-fauna (INDEX:11) */ /* FULL WIDTH, like the homepage (James, 2026-09-15): the hero runs edge to edge as the homepage video does, and the head and the grid sit on the same gutter the bestsellers row uses (--bokja-edge). No page-width column: the schema class is deliberately NOT "section", which would pull in base.css's centred grid. */ .bokja-ff { padding: clamp(28px, 3.5vw, 56px) 0 clamp(56px, 7vw, 110px); color: var(--color-foreground); } .bokja-ff__head { max-width: 760px; margin: 0 0 clamp(28px, 4vw, 56px); padding-inline: var(--bokja-edge); } .bokja-ff__eyebrow { font-size: var(--bt-label); letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.5; margin: 0 0 14px; } .bokja-ff__title { font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 400; font-size: clamp(34px, 4.6vw, 58px); line-height: 1.05; letter-spacing: 0; margin: 0; } .bokja-ff__intro { margin: 18px 0 0; font-size: var(--bt-body); line-height: 1.6; max-width: 62ch; } .bokja-ff__hero { margin: 0 0 clamp(32px, 4.5vw, 64px); } .bokja-ff__hero img { display: block; width: 100%; height: auto; } .bokja-ff__grid { list-style: none; margin: 0; padding: 0 var(--bokja-edge); display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(32px, 3.5vw, 56px) var(--bokja-gap, 10px); } .bokja-ff__item { margin: 0; } .bokja-ff__link { display: block; color: inherit; text-decoration: none; } .bokja-ff__media { margin: 0 0 12px; aspect-ratio: 4 / 5; overflow: hidden; background: rgba(26, 26, 26, 0.04); } .bokja-ff__media img { display: block; width: 100%; height: 100%; object-fit: cover; } .bokja-ff__name, .bokja-ff__price, .bokja-ff__caption { display: block; font-size: var(--bt-body); letter-spacing: 0.02em; line-height: 1.4; } .bokja-ff__price { opacity: 0.6; } .bokja-ff__caption { margin-top: 6px; font-family: Georgia, 'Times New Roman', serif; font-style: italic; opacity: 0.75; } @media (max-width: 989px) { .bokja-ff__grid { grid-template-columns: repeat(2, 1fr); } } /* END_SECTION:bokja-flora-fauna */ /* START_SECTION:bokja-footer (INDEX:12) */ .bokja-footer { background: var(--color-background); color: var(--color-foreground); padding: clamp(56px, 7vw, 110px) clamp(16px, 3vw, 48px) 0; border-block-start: 0.5px solid rgba(26, 26, 26, 0.12); } .bokja-footer__inner { max-width: 1440px; margin-inline: auto; display: flex; flex-wrap: wrap; gap: 48px 80px; justify-content: space-between; align-items: flex-start; padding-block-end: clamp(48px, 6vw, 88px); } .bokja-footer__cta { flex: 1 1 340px; max-width: 460px; } .bokja-footer__eyebrow { font-size: var(--bt-label); letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.5; margin: 0 0 14px; } .bokja-footer__head { font-size: var(--bt-h2); font-weight: 400; letter-spacing: -0.005em; margin: 0 0 10px; } .bokja-footer__dek { font-size: var(--bt-body); line-height: 1.6; opacity: 0.75; margin: 0 0 22px; max-width: 36ch; } .bokja-footer__field { display: flex; align-items: center; max-width: 380px; border-block-end: 1px solid rgba(26, 26, 26, 0.3); } .bokja-footer__field input { flex: 1; min-width: 0; background: none; border: none; color: var(--color-foreground); font-family: inherit; font-size: var(--bt-body); letter-spacing: 0.02em; padding: 10px 0; outline: none; } .bokja-footer__field input::placeholder { color: rgba(26, 26, 26, 0.45); } .bokja-footer__names { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; max-width: 380px; } .bokja-footer__names input { min-width: 0; background: none; border: none; border-block-end: 1px solid rgba(26, 26, 26, 0.3); color: var(--color-foreground); font-family: inherit; font-size: var(--bt-body); letter-spacing: 0.02em; padding: 10px 0; outline: none; } .bokja-footer__names input::placeholder { color: rgba(26, 26, 26, 0.45); } .bokja-footer__names input:focus { border-block-end-color: var(--color-foreground); } /* The salutation pills: sr-only radios, labels as quiet toggle pills (the size-pill grammar). Shared between footer and membership dialog - the dialog carries no copy of these rules, its stylesheet only adjusts spacing. */ .bokja-signup-address { border: none; margin: 14px 0 4px; padding: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } .bokja-signup-address legend { float: inline-start; padding: 0; margin-inline-end: 4px; font-size: var(--bt-label); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(26, 26, 26, 0.6); } .bokja-signup-address label { cursor: pointer; } .bokja-signup-address input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .bokja-signup-address span { display: inline-block; padding: 4px 10px; border: 1px solid rgba(26, 26, 26, 0.3); font-size: var(--bt-label); letter-spacing: 0.04em; color: var(--color-foreground); } .bokja-signup-address input:checked + span { border-color: var(--color-foreground); background: var(--color-foreground); color: #FBFBF6; } .bokja-signup-address input:focus-visible + span { outline: 2px solid var(--color-foreground); outline-offset: 1px; } .bokja-footer__field button { background: none; border: none; color: var(--color-foreground); font-size: var(--bt-h3); line-height: 1; cursor: pointer; padding-block: 0; padding-inline: 12px 2px; } .bokja-footer__field:focus-within { border-block-end-color: var(--color-foreground); } /* TWO STEPS, v2 (James, 2026-09-07): step 2 REPLACES step 1 in place. Shared by every signup surface the way the pills are. The wrapper clips; is-leaving slides step 1 off to the left, then the module swaps the panels (is-step2) and step 2 slides in from the right where step 1 stood. The echoed email at the top of step 2 is the way back. */ .bokja-signup-steps { position: relative; overflow: clip; overflow-clip-margin: 6px; } .bokja-signup-step1 { transition: transform 0.26s ease, opacity 0.26s ease; } .bokja-signup-steps.is-leaving .bokja-signup-step1 { transform: translateX(-100%); opacity: 0; } .bokja-signup-steps.is-step2 .bokja-signup-step1 { display: none; } .bokja-signup-step2 { display: none; } .bokja-signup-steps.is-step2 .bokja-signup-step2 { display: block; animation: bokja-signup-enter 0.3s ease both; } @keyframes bokja-signup-enter { from { transform: translateX(100%); opacity: 0; } to { transform: none; opacity: 1; } } .bokja-signup-back { display: inline-block; margin: 0 0 4px; padding: 0; border: 0; background: none; font-family: inherit; font-size: var(--bt-label); letter-spacing: 0.02em; color: inherit; opacity: 0.6; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .bokja-signup-back:hover, .bokja-signup-back:focus-visible { opacity: 1; outline: none; } .bokja-signup-join { display: inline-block; margin-top: 18px; padding: 9px 18px; border: 1px solid var(--color-foreground, #1a1a1a); background: var(--color-foreground, #1a1a1a); color: #FBFBF6; font-family: inherit; font-size: var(--bt-label); font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; } .bokja-signup-join:focus-visible { outline: 2px solid var(--color-foreground, #1a1a1a); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .bokja-signup-step1 { transition: none; } .bokja-signup-steps.is-step2 .bokja-signup-step2 { animation: none; } } .bokja-footer__ok { font-size: var(--bt-body); opacity: 0.75; } .bokja-footer__cols { display: flex; flex-wrap: wrap; gap: clamp(40px, 5vw, 88px); } .bokja-footer__col { display: flex; flex-direction: column; gap: 11px; } .bokja-footer__col-head { font-size: var(--bt-label); letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.5; margin-block-end: 5px; } .bokja-footer__col a { color: var(--color-foreground); text-decoration: none; font-size: var(--bt-card); opacity: 0.75; } .bokja-footer__col a:hover { opacity: 1; } .bokja-footer__base { max-width: 1440px; margin-inline: auto; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-block: 24px 36px; } .bokja-footer__copy { font-size: var(--bt-micro); letter-spacing: 0.04em; opacity: 0.45; } .bokja-footer__social { display: flex; gap: 22px; } .bokja-footer__social a { color: var(--color-foreground); opacity: 0.55; text-decoration: none; text-transform: uppercase; letter-spacing: 0.14em; font-size: var(--bt-label); } .bokja-footer__social a:hover { opacity: 1; } @media screen and (max-width: 749px) { .bokja-footer { padding-inline: 20px; } .bokja-footer__inner { flex-direction: column; gap: 36px; } /* Keep the newsletter usable: full width, sitting above the link grid. */ .bokja-footer__cta, .bokja-footer__field { max-width: none; } /* Enlarged-text fix (2026-08-09). The column-direction flex item kept its automatic minimum inline size, so at 200% text its intrinsic width grew to ~453px and the nowrap social row to ~468px, forcing the WHOLE DOCUMENT to 488px wide on a 375px phone: every page scrolled sideways, not just the footer. */ .bokja-footer__cta { min-width: 0; width: 100%; } .bokja-footer__social { flex-wrap: wrap; row-gap: 12px; } /* The link groups become a tidy, EVEN grid rather than a stack of rows, so the column count tracks the number of groups: it was 3 for five groups (3+2), and is 2 for the four groups of the 2026-08-15 restructure (2+2). Three would leave a 3+1 orphan. */ .bokja-footer__cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 16px; } .bokja-footer__col { gap: 9px; min-width: 0; } .bokja-footer__col-head { font-size: var(--bt-label); letter-spacing: 0.16em; margin-block-end: 3px; } .bokja-footer__col a { font-size: var(--bt-card); line-height: 1.35; } /* At 320px on the old three-column grid each column got ~83px, while at 200% text a single label like THE COLLECTIVE needs 183px and a link like "Exchanges and returns" needs 127px, so all three drew through one another. Two columns give ~132px each, which is better but still short of 183px, so the rule stays. It only changes wrapping when an individual WORD cannot fit; the grid is untouched wherever the words do. */ .bokja-footer__col a, .bokja-footer__col-head { min-width: 0; overflow-wrap: anywhere; hyphens: auto; } .bokja-footer__base { flex-direction: column; align-items: flex-start; } } /* END_SECTION:bokja-footer */ /* START_SECTION:bokja-gallery-forward (INDEX:13) */ .bokja-gallery-forward { margin: 0; padding: clamp(48px, 10vw, 140px) clamp(16px, 4vw, 56px); text-align: center; font-size: var(--bt-body); letter-spacing: 0.04em; color: var(--color-foreground, #1a1a1a); } /* END_SECTION:bokja-gallery-forward */ /* START_SECTION:bokja-gallery (INDEX:14) */ /* ========================================================================== Container + intro: still James's June archive frame (snippets/bokja-archive-gallery.liquid, commit 0f51189) so the Gallery and the Archive page share one page rhythm. The GRID below is no longer his CSS-columns masonry - it is v4 of the grid comparison (see header comment). ========================================================================== */ .bokja-archive { max-inline-size: var(--page-width, 1400px); margin-inline: auto; padding: clamp(40px, 6vw, 96px) clamp(16px, 4vw, 56px); } .bokja-archive__intro { text-align: center; margin-block-end: clamp(32px, 5vw, 72px); } .bokja-archive__title { margin: 0 0 12px; font-size: var(--bt-h1); font-weight: 400; letter-spacing: 0.02em; color: var(--color-foreground, #1a1a1a); } .bokja-archive__dek { max-inline-size: 56ch; margin-inline: auto; font-size: var(--bt-body); line-height: 1.65; opacity: 0.7; color: var(--color-foreground, #1a1a1a); } /* His snippet takes a plain string dek; this one takes richtext, so the wrapping

margins are flattened. Additive only - it changes none of his values. */ .bokja-archive__dek > :first-child { margin-block-start: 0; } .bokja-archive__dek > :last-child { margin-block-end: 0; } /* ---- The grid: v4 "mixed framing" ---- PHONES FIRST (<=749px): two-up, uniform 4:5 tiles, pure pictures. No labels, no hover, no size cycle - the name lives in the drawer that a tap opens. Even gap both ways. */ .bokja-gallery__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--bokja-gap, 10px); } .bokja-gallery__piece { position: relative; display: block; inline-size: 100%; margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: start; cursor: pointer; overflow: hidden; aspect-ratio: 4 / 5; } .bokja-gallery__piece:focus-visible { outline: 2px solid var(--color-foreground, #1a1a1a); outline-offset: -2px; } /* cover, centred, no zoom and no scrim (house rule). The tile ratio is set by the span cycle, so cover is what lets one 4:5 photograph sit in a tall, a square-ish and a wide box. The drawer shows every image whole (object-fit: contain), so nothing is lost to the crop. */ .bokja-gallery__img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; } .bokja-gallery__img--placeholder { background: var(--color-border, rgba(26, 26, 26, 0.06)); } /* The hover name: a solid off-white label inset in the tile's bottom-left corner, not a wash over the photograph. Hidden entirely on phones. Never a price. */ .bokja-gallery__name { display: none; } @media screen and (min-width: 750px) { /* v4's mechanics: 6 columns, fixed row height, one even gap. Row height is v4's 110px expressed as 8.6vw (= 110px at 1280, where v4 was measured) and clamped, so the tile ratios hold as the column width scales with the viewport. `dense` only ever backfills a hole an earlier span left; it does not reorder the pieces visually for this cycle. */ .bokja-gallery__grid { grid-template-columns: repeat(6, 1fr); grid-auto-rows: clamp(64px, 8.6vw, 118px); grid-auto-flow: row dense; } .bokja-gallery__piece { aspect-ratio: auto; block-size: 100%; } /* The 8-step size cycle, verbatim from v4 (.c1 - .c8). */ .bokja-gallery__piece--s1 { grid-column: span 2; grid-row: span 5; } .bokja-gallery__piece--s2 { grid-column: span 2; grid-row: span 3; } .bokja-gallery__piece--s3 { grid-column: span 2; grid-row: span 2; } .bokja-gallery__piece--s4 { grid-column: span 1; grid-row: span 3; } .bokja-gallery__piece--s5 { grid-column: span 1; grid-row: span 3; } .bokja-gallery__piece--s6 { grid-column: span 2; grid-row: span 5; } .bokja-gallery__piece--s7 { grid-column: span 2; grid-row: span 3; } .bokja-gallery__piece--s8 { grid-column: span 2; grid-row: span 2; } /* ---- TABLET (750-1099): the same mosaic on FOUR columns (Malou 2026-08-18 — the page stepped 6 straight to 2 with nothing between, because 750px was its only breakpoint). The span cycle is deliberately UNCHANGED. Its eight steps span 2,2,2,1,1,2,2,2 columns, which lands on 4 exactly as readily as on 6: 2+2, then 2+1+1, then 2+2, with the eighth step's remainder paired by the next cycle's first — and `dense` (inherited from the rule above) backfills anything a tall neighbour leaves open. So the tablet view is the same composition at a different measure, not a second design to keep in step with the first. Row height is the one thing that MUST move. A span-2 piece is a third of the width at 6 columns and a half at 4, so holding 8.6vw would squash every tile by the same ~1.5x the columns grew. 12.9vw restores the ratio (0.5 / (0.33 / 0.086)); the clamp bounds are set outside the band's own range so they never bind inside it, and exist only to stop an extreme zoom or a narrow embed from producing a 40px or a 300px row. ---- */ @media screen and (max-width: 1099px) { .bokja-gallery__grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(90px, 12.9vw, 145px); } } .bokja-gallery__name { display: block; position: absolute; inset-inline-start: var(--bokja-gap, 10px); inset-block-end: var(--bokja-gap, 10px); max-inline-size: calc(100% - (2 * var(--bokja-gap, 10px))); /* Enlarged-text fix (2026-08-09): narrow pieces are ~109px wide with overflow hidden, so at 150% text a name like "Art Installation" was clipped when the label appeared on hover or keyboard focus. The accessible name was always intact; this repairs the visible one. */ overflow-wrap: anywhere; hyphens: auto; padding: 7px 10px; background: var(--bokja-background, #fbfbf6); color: var(--color-foreground, #1a1a1a); font-size: var(--bt-label); letter-spacing: 0.02em; line-height: 1.35; opacity: 0; transition: opacity 140ms ease; pointer-events: none; } .bokja-gallery__piece:focus-visible .bokja-gallery__name { opacity: 1; } } /* Pointer devices only: a touch tap must not leave a label stuck on the tile it opened. */ @media screen and (min-width: 750px) and (hover: hover) and (pointer: fine) { .bokja-gallery__piece:hover .bokja-gallery__name { opacity: 1; } } /* ---- The piece drawer ---- */ .bokja-gal-drawer { padding-block-end: var(--padding-2xl, 24px); } /* The shared shell's close button is position:fixed at the panel's top corner, so a long two-part piece name ("Tapestry · How Do Things Travel") runs under the X. Reserve the corner. Scoped to the gallery drawers with :has() so no other drawer shifts. */ .fabric-drawer__dialog:has(.bokja-gal-drawer) .fabric-drawer__heading { padding-inline-end: 44px; } .bokja-gal-drawer__viewer { position: relative; } /* Native scroll-snap: swipe on touch, arrows/keyboard on desktop, no carousel script. */ .bokja-gal-drawer__track { display: flex; margin: 0; padding: 0; list-style: none; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-inline: contain; scrollbar-width: none; -ms-overflow-style: none; } .bokja-gal-drawer__track::-webkit-scrollbar { display: none; } .bokja-gal-drawer__track:focus-visible { outline: 2px solid var(--color-foreground); outline-offset: -2px; } /* Every slide is the same 4:5 box, so the track's height does not jump between a portrait and a taller shot (an auto-height track sizes to the TALLEST slide and leaves dead space under the shorter ones). The photo is CONTAINED in that box, letterboxed on the off-white ground — the same call the PDP fabric drawer makes: show the whole piece, crop nothing. */ .bokja-gal-drawer__slide { flex: 0 0 100%; margin: 0; aspect-ratio: 4 / 5; scroll-snap-align: center; } .bokja-gal-drawer__img { display: block; inline-size: 100%; block-size: 100%; object-fit: contain; } .bokja-gal-drawer__nav { position: absolute; inset-block: 0; inset-inline: 0; display: flex; justify-content: space-between; pointer-events: none; } .bokja-gal-drawer__arrow { pointer-events: auto; inline-size: 46px; min-block-size: 46px; align-self: center; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; position: relative; } .bokja-gal-drawer__arrow::before { content: ''; position: absolute; inset-block-start: 50%; inset-inline-start: 50%; inline-size: 9px; block-size: 9px; border-inline-end: 1.4px solid var(--color-foreground, #1a1a1a); border-block-start: 1.4px solid var(--color-foreground, #1a1a1a); opacity: 0.62; transition: opacity 140ms ease; } .bokja-gal-drawer__arrow--next::before { transform: translate(-50%, -50%) rotate(45deg); } .bokja-gal-drawer__arrow--prev::before { transform: translate(-50%, -50%) rotate(-135deg); } [dir='rtl'] .bokja-gal-drawer__arrow--next::before { transform: translate(-50%, -50%) rotate(-135deg); } [dir='rtl'] .bokja-gal-drawer__arrow--prev::before { transform: translate(-50%, -50%) rotate(45deg); } .bokja-gal-drawer__arrow:hover::before, .bokja-gal-drawer__arrow:focus-visible::before { opacity: 1; } .bokja-gal-drawer__count { margin: 10px 0 0; text-align: center; font-size: var(--bt-label); letter-spacing: 0.14em; opacity: 0.5; color: var(--color-foreground, #1a1a1a); } .bokja-gal-drawer__story { padding: var(--padding-xl, 20px) var(--padding-xl, 20px) 0; font-size: var(--bt-body); line-height: 1.7; color: var(--color-foreground, #1a1a1a); } .bokja-gal-drawer__story > :first-child { margin-block-start: 0; } .bokja-gal-drawer__story > :last-child { margin-block-end: 0; } .bokja-gal-drawer__note { margin: var(--padding-xl, 20px) 0 0; padding-inline: var(--padding-xl, 20px); font-size: var(--bt-label); letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.5; color: var(--color-foreground, #1a1a1a); } @media screen and (min-width: 750px) { .bokja-gal-drawer__story { padding-inline: var(--padding-2xl, 24px); } .bokja-gal-drawer__note { padding-inline: var(--padding-2xl, 24px); } } /* END_SECTION:bokja-gallery */ /* START_SECTION:bokja-gateway (INDEX:15) */ .bokja-gateway { display: flex; justify-content: center; /* Near-full-bleed per the V1 homepage mock: ~30px side margins at desktop, panels stretch the full line instead of capping at 1440px. No top padding: the panels sit directly under the header (which carries its own 18px bottom padding), so the menu row isn't separated from the images by a large gap. */ padding: 0 var(--bokja-edge) 0; background: var(--color-background); } .bokja-gateway__panels { display: flex; justify-content: center; align-items: flex-start; gap: var(--bokja-gap); width: 100%; margin-inline: auto; } .bokja-gateway__panel { position: relative; flex: 1 1 0; aspect-ratio: 4 / 5; min-width: 0; max-width: none; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; text-decoration: none; } .bokja-gateway__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .bokja-gateway__img--ph { background: #c7bfb0; } .bokja-gateway__panel:nth-child(1) .bokja-gateway__img--ph { background: #c3baa8; } .bokja-gateway__panel:nth-child(2) .bokja-gateway__img--ph { background: #d0c8b9; } .bokja-gateway__panel:nth-child(3) .bokja-gateway__img--ph { background: #b9b0a0; } .bokja-gateway__cap { position: relative; z-index: 2; text-align: center; color: #ffffff; padding: 0 24px 10%; opacity: 0; transition: opacity 0.35s ease; } .bokja-gateway__panel:hover .bokja-gateway__cap, .bokja-gateway__panel:focus-visible .bokja-gateway__cap { opacity: 1; } /* The ready-to-wear photography sits on a near-white studio ground, so the white caption is illegible there: this panel captions in the house black, shadows off (a dark glow under dark text reads as mud). */ .bokja-gateway__panel--rtw .bokja-gateway__cap { color: #1a1a1a; } .bokja-gateway__panel--rtw .bokja-gateway__name, .bokja-gateway__panel--rtw .bokja-gateway__sub, .bokja-gateway__panel--rtw .bokja-gateway__enter { text-shadow: none; } .bokja-gateway__name { display: block; font-weight: 500; font-size: var(--bt-h2); letter-spacing: 0.14em; text-transform: uppercase; text-shadow: 0 1px 20px rgba(0, 0, 0, 0.5); } .bokja-gateway__sub { display: block; margin-top: 10px; font-size: var(--bt-label); letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.88; text-shadow: 0 1px 16px rgba(0, 0, 0, 0.5); } .bokja-gateway__enter { display: inline-block; margin-top: 16px; font-size: var(--bt-micro); letter-spacing: 0.22em; text-transform: uppercase; opacity: 0; transform: translateY(6px); transition: opacity 0.3s ease, transform 0.3s ease; text-shadow: 0 1px 16px rgba(0, 0, 0, 0.5); } .bokja-gateway__panel:hover .bokja-gateway__enter { opacity: 0.95; transform: translateY(0); } @media screen and (max-width: 749px) { .bokja-gateway { /* Side borders as thin as the panel gap (James 2026-08-06 second pass). */ padding: clamp(12px, 3vw, 18px) var(--bokja-gap) 0; } .bokja-gateway__panels { gap: var(--bokja-gap); height: calc(100svh - 74px); min-height: 560px; } .bokja-gateway__panel { height: 100%; max-width: none; aspect-ratio: auto; } /* Vertical strips: label rotated to read up the strip, always visible. */ .bokja-gateway__cap { position: absolute; top: 50%; left: 50%; padding: 0; opacity: 1; white-space: nowrap; transform: translate(-50%, -50%) rotate(-90deg); transform-origin: center; } html[dir='rtl'] .bokja-gateway__cap { transform: translate(-50%, -50%) rotate(90deg); } .bokja-gateway__name { font-size: var(--bt-h3); letter-spacing: 0.22em; } .bokja-gateway__sub, .bokja-gateway__enter { display: none; } } /* END_SECTION:bokja-gateway */ /* START_SECTION:bokja-header (INDEX:16) */ .bokja-nav { position: sticky; top: 0; /* Above the PDP/collection sticky category trail (z-index 29): the inline-search results panel lives inside this header, so the header's stacking context must clear the trail or the trail pokes through the top of the open panel (James, 2026-06-17). */ z-index: 31; display: flex; align-items: center; justify-content: space-between; padding: 18px var(--bokja-edge, 28px); /* one edge token everywhere (James 2026-08-06) */ background: var(--color-background); } /* Lead group: the wordmark and, on the homepage, the cascade words sit together on the inline-start (Arket places the departments under the logo, left-aligned). On every other template the lead holds only the logo, so the bar is unchanged there. */ .bokja-nav__lead { display: flex; align-items: center; gap: clamp(18px, 2.6vw, 38px); min-width: 0; } .bokja-nav__logo { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: inherit; flex: 0 0 auto; } .bokja-nav__logo-img { height: 29px; width: auto; display: block; } .bokja-nav__logo-img--arabic-lettering { height: 32px; } .bokja-nav__wordmark { display: none; font-family: 'Marcellus', serif; font-size: 32px; font-weight: 400; line-height: 29px; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; } @media screen and (min-width: 750px) { .bokja-nav__wordmark { display: block; } .bokja-nav__logo--lockup:not(.bokja-nav__logo--lockup-ar) .bokja-nav__logo-picture { display: none; } /* Arabic desktop keeps its SVG wordmark */ } .bokja-nav__since { font-size: var(--bt-micro); letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-foreground); opacity: 0.5; font-weight: 400; margin-inline-start: 6px; } .bokja-nav__mark-link { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1; display: inline-flex; align-items: center; justify-content: center; } .bokja-nav__mark { height: 33.22px; width: auto; display: block; } /* Homepage (cascade) variant: a TWO-ROW header. Row 1 = wordmark (inline-start) + the centred birds mark + the utilities (inline-end); row 2 = the cascade section words, full width, left-aligned at the page gutter (roughly where the collection filter strip sits). Every other template keeps the single-row bar; the mark stays centred there too. */ @media screen and (min-width: 750px) { .bokja-nav--mega { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-items: center; row-gap: clamp(8px, 1.1vw, 16px); column-gap: 16px; } .bokja-nav--mega .bokja-nav__lead { grid-column: 1; grid-row: 1; } .bokja-nav--mega .bokja-nav__right { grid-column: 2; grid-row: 1; justify-self: end; } /* The centred birds mark sits in row 1, horizontally centred between the wordmark and the utilities (placed in the grid rather than absolutely, so it never overlaps the menu row). */ .bokja-nav--mega .bokja-nav__mark-link { position: static; grid-column: 1 / -1; grid-row: 1; justify-self: center; align-self: center; inset: auto; transform: none; } /* Row 2: the cascade spans both columns and sits at the inline-start gutter (the header's own 28px padding does the aligning, so the first word lines up under the wordmark / with the collection filter strip). */ .bokja-nav--mega .bokja-mega { grid-column: 1 / -1; grid-row: 2; } } .bokja-nav__right { display: flex; align-items: center; gap: 20px; } .bokja-nav__menu { display: flex; gap: 22px; /* Push "The Collective" off the search box: it had a big void on its left (to the centred mark) but sat tight against the utilities. This balances it (James 2026-06-17). */ margin-inline-end: clamp(20px, 3vw, 56px); } .bokja-nav__menu a { font-size: var(--bt-nav); text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-foreground); font-weight: 500; text-decoration: none; } /* Search icon: same quiet weight as the cart/locale icons. Opens the predictive-search overlay. */ .bokja-nav__search { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; min-height: 18px; margin: 0; padding: 0; border: 0; background: none; color: var(--color-foreground); cursor: pointer; -webkit-tap-highlight-color: transparent; } .bokja-nav__search .svg-wrapper { display: inline-flex; inline-size: 17px; block-size: 17px; } .bokja-nav__search svg { inline-size: 100%; block-size: 100%; display: block; } .bokja-nav__search:focus { outline: none; } .bokja-nav__search:focus-visible { outline: 2px solid var(--color-foreground); outline-offset: 2px; } /* The cart trigger lives inside , which computes display:block - so the trigger pinned to the wrapper's top and sat ~3px above the account / wishlist icons. Make the header instance a centring flex so the bag aligns on the icon line. */ .bokja-nav__right .cart-drawer { display: inline-flex; align-items: center; } .bokja-nav__cart { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 21px; min-height: 21px; color: var(--color-foreground); font-size: var(--bt-micro); line-height: 1; letter-spacing: 0; text-decoration: none; } /* HEADER UTILITY ICON SIZE — one number, three icons (James, 2026-08-13: the person icon "seems very small"). All three boxes were 18px, so the whole set went up ~17% to 21px rather than the person alone, which would have left the row uneven. The phone loupe in bokja-search-inline moved with them (its own comment binds it to these two), and the phone gap clamp below was RE-DERIVED for the wider row. */ .bokja-nav__cart-icon { display: inline-flex; width: 21px; height: 21px; } .bokja-nav__cart-icon svg { display: block; width: 100%; height: 100%; } .bokja-nav__cart-count { display: inline-block; min-width: 1ch; font-size: var(--bt-micro); line-height: 1; text-align: end; } /* Account + wishlist utilities (Arket order: account, wishlist, cart). Quiet line icons matching the cart's weight; the wishlist count sits inline like the cart count, hidden when empty. ACCOUNT ICON SHRANK TO A DOT (James, 2026-08-13: "totally invisible"; fixed the same day). The person icon was NOT too small — it was being CRUSHED. The button carried `button-unstyled`, and the only property of that base.css class the section rules here do not already override is `overflow: hidden`. On a flex item, overflow other than visible makes the automatic minimum size `min-width: auto` resolve to ZERO instead of the content minimum — so the account button was the one item in this row that could shrink below its 21px box, and it absorbed the row's entire over-constraint. Measured on preview 188315402568 before the fix: button 12.7px wide at 1440w, 4.3px at 645w, 5.4px at 375w, with the head circle down to 1.29px — the faint dot on screen. The svg is untouched and was never the problem: viewBox "0 0 24 24" with the default preserveAspectRatio simply scales the whole drawing into whatever box it is given. The wishlist heart, byte-for-byte the same construction in a bare