/* ============================================================================= LOOP SUBSCRIPTIONS — MY CUSTOM BUNDLE BUILDER STYLES ----------------------------------------------------------------------------- Structure (top to bottom, general -> specific): 1. PAGE LAYOUT container width/centring 2. HEADER / BANNER full-bleed hero strip 3. BUTTONS global button styling 4. PRODUCT CARDS card, image, price, quantity stepper 5. FOOTER discount bar, helper text, add-to-cart SPECIFICITY & SOURCE ORDER — READ THIS BEFORE EDITING. Loop's stylesheet loads AFTER this file, so any rule of mine that TIES on specificity loses. Single-class selectors (0,1,0) are therefore fragile: if a declaration appears to do nothing, that's nearly always the reason, not a typo. Two fixes, in order of preference: 1. Chain a second class from the element (0,2,0) — e.g. `.loop-card.loop-bundle-product-card`, `.loop-card-body.text-center` 2. !important, only where the element has no second class to chain — e.g. .loop-card-header, .loop-bundle-product-wrapper I've flagged the rules hardened either way in place. Don't "tidy" them back. ORDER MATTERS: the quantity stepper (section 4) must stay BELOW the global .loop-btn rule (section 3) or its corner radii will be lost. Search "REVIEW:" for items I still want to verify against the live page. ========================================================================== */ /* ============================================================================= 1. PAGE LAYOUT ========================================================================== */ /* Body content: contained and centred, capped at 1440px. !important is needed to beat Loop's own container width. */ .loop-container.loop-bs-container { max-width: 1440px !important; margin-left: auto !important; margin-right: auto !important; } /* ============================================================================= 2. HEADER / BANNER ========================================================================== */ /* Kills the horizontal scrollbar caused by the full-bleed banner below. vw units include the scrollbar width, so a 100vw element is ~15px wider than the space actually available and pushes the page sideways. Clipping the overflow at the root absorbs that. I'm using `clip`, NOT `hidden`: `hidden` turns the body into a scroll container, which breaks any `position: sticky` header and lets JS scroll the overflow back into view. `clip` is a hard cut with no scroll container, and is the one overflow value allowed to pair with `visible` on the other axis — so vertical scrolling is unaffected. Trade-off: the banner is 100vw but only 100vw-minus-scrollbar is visible, so roughly 15px of its right edge is cut off. Invisible on a photographic background; if I ever centre text or a logo in this banner it will sit ~7px left of true centre. */ body { overflow-x: clip; } /* Top banner: break out of the 1440px container to full viewport width. With width:auto, the two negative margins expand the box to exactly 100vw: W - 2 x (0.5W - 0.5V) = V. Both margins are therefore load-bearing here — unlike the earlier width:100vw version, where margin-right was inert. */ .loop-bundle-header-wrapper { width: auto !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; } /* Remove the default gap above the banner */ .loop-background { padding-top: 0; } /* Hero banner: lifestyle photo, square corners, uncapped height. NOTE THE `div` PREFIX — IT IS LOAD-BEARING. Loop puts the SAME class on the wrapper AND on the inside it:
An unqualified `.loop-bundle-image-container` therefore styles both, painting a second, differently-cropped copy of the photo onto the img, which showed through the transparent areas of the PNG. Qualifying with `div` scopes this to the wrapper only. FIXED: `object-fit` does nothing on this div (it only applies to replaced elements) — `background-size` is the background-image equivalent. NO HEIGHT SET HERE, DELIBERATELY: the banner height is configured in the Loop app under the bundle's style settings, currently 300px. I change it there, not here, so the two can't drift apart. I removed `max-height: none` because `none` is the initial value anyway, so it was a no-op. Don't write `max-height: auto` — that's invalid CSS and gets discarded silently. REVIEW: background-size:cover crops to fill, so the image may lose its edges at narrow widths. Change background-position if the crop favours the wrong part of the photo, or use `contain` to fit the whole image with letterboxing. */ div.loop-bundle-image-container { background-image: url("https://cdn.shopify.com/s/files/1/0967/4902/7656/files/Paleo-Food-Co-Sept-lifestyle1.jpg?v=1780933184"); background-size: cover; background-position: center; background-repeat: no-repeat; border-radius: 0; } /* Hide the PALEO logo overlay sitting on top of the banner. This is Loop's uploaded heading image (Heading.png on cdn.loopwork.co), set in the bundle's settings in the Loop app. CSS IS THE ONLY OPTION HERE: the same asset doubles as the bundle image in the cart, so I can't delete it in Loop's settings. That also means the browser will still download Heading.png on this page — unavoidable, and harmless since it's already cached for the cart. `visibility: hidden` NOT `display: none` — DELIBERATE, and robust either way: it hides the pixels while keeping the element's layout box, so the banner holds its height whether Loop's 300px is applied to the wrapper div or to this img. `display: none` would collapse the banner in the latter case. It also drops the element from the accessibility tree, so screen readers skip it. SCOPE — CHECKED, NO SCOPING NEEDED: the selector is unqualified and would hide this image anywhere the class appears, so the cart was the obvious risk given the same asset doubles as the bundle thumbnail there. I tested it: the thumbnail still renders in both the cart drawer and the cart page, so the cart markup doesn't reuse this class. Leave the selector as is. If a future Loop update ever blanks the cart thumbnail, this rule is the first place to look — scope it to a builder-only ancestor to fix, e.g. .loop-bundle-header-wrapper img.loop-bundle-image-container */ img.loop-bundle-image-container { visibility: hidden; } /* Bundle heading ("Subscribe & Save") - put it back on the theme's type scale. Loop borrows the theme's h1 tokens for family/style/line-height/letter-spacing but substitutes its own `font-size: 1.75em`, so the heading carries the site's typography without its type scale. --font-h1--size is clamp(3rem, 7.2vw, 4.5rem). For theme-consistent but smaller, I'd swap in var(--font-size--h2). */ .loop-h1.loop-bundle-title { font-size: var(--font-h1--size) !important; } /* Intro copy under the SUBSCRIBE AND SAVE heading. Stops the text running edge-to-edge on narrow viewports. PADDING, NOT MARGIN: this element also carries the `m-0` utility class, which is a Bootstrap-style helper that sets `margin: 0 !important`. Any margin rule here would lose to it without adding !important of its own, so padding is the cleaner lever — it does the same job with no specificity fight. Applied at all widths: the text is centred, so symmetric padding shortens the line slightly on desktop but doesn't shift it off-centre. To make it mobile-only, wrap the rule in `@media (max-width: 768px) { ... }`. */ .loop-bundle-description { padding-inline: 1rem; } /* The three rules below are spaced in --spacing units (Tailwind's scale token, currently 0.25rem/4px), so a multiplier of 8 = 2rem = 32px. Using the token rather than a literal keeps them in step if the theme's scale ever changes. */ /* Spacing below frequency selector label - change numeric multiplier */ .loop-frequency-size-selector-label { margin-bottom: calc(var(--spacing) * 8); } /* Spacing of frequency selector buttons - change numeric multiplier (default = 2) */ .loop-frequency-selector { gap: calc(var(--spacing) * 8); } /* Spacing below bundle select label ("Select Your Items") - change numeric multiplier (default = 4) */ .loop-bundle-select-product-title-container { margin-bottom: calc(var(--spacing) * 2); } /* ============================================================================= 3. BUTTONS (GLOBAL) ----------------------------------------------------------------------------- REVIEW — FONT FALLBACK: "sans-serif" below is a placeholder. My theme's real stacks are exposed as variables — swap them in when convenient: "Poleno", sans-serif -> var(--font-accent--family) "Click Clack", sans-serif -> var(--font-subheading--family) Each resolves to the full stack ('Poleno', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif) and would track the theme automatically if I ever swap fonts. Five rules use these: .loop-btn, .loop-bundle-product-card-title, .loop-display-product-price, .loop-higher-discount-rate, .loop-show-more-less-text. REVIEW — FIXED HEIGHT: `height: 50px` will clip or overflow if a button label ever wraps to two lines (narrow mobile, long product name on an ADD button). `min-height: 50px` gives the same look but lets tall content grow. Swap if I see clipping. Note the stepper input below is pinned to the same 50px. ========================================================================== */ /* Base style for all Loop buttons. I folded the old .loop-btn-add-product rule in here — it only added height and font-size, both of which are now set globally. */ .loop-btn { border-radius: 12px; border-width: 4px; height: 50px; font-family: "Poleno", sans-serif; font-size: 18px; text-transform: uppercase; } /* ============================================================================= 4. PRODUCT CARDS ========================================================================== */ /* ----------------------------------------------------------------------------- CARD LAYOUT — matched to the site's product cards. Target shape, three stacked pieces with gaps between them: [ rounded image tile, no border ] [ bordered white text box ] [ full-width dark button ] Loop's actual DOM. NOTE THE NESTING — .loop-card-body is INSIDE .loop-card-header, not a sibling of it. This is easy to misread and it broke my first stretch chain, which was built on the wrong assumption: .loop-card .loop-card-header <- wraps image AND body .loop-bundle-product-image-container .loop-image-product-lg > img -> image tile .loop-card-body -> text box (gets the border) .loop-product-card-description-body .loop-product-title / .loop-product-description / .loop-display-product-price .loop-body-footer-wrapper <- button, sibling of the HEADER .loop-card-footer > .loop-add-product-btn > button MY DESIGN TOKENS (confirmed against the site, not guessed): vertical gap between the three pieces 4px border radius, everywhere 12px border width, everywhere 4px solid Section 3's buttons and the quantity stepper already use the same 12px/4px, so those values are consistent across the whole file — change them together. -------------------------------------------------------------------------- */ /* Stretch chain: .loop-bundle-product-wrapper > .loop-bundle-product-container > .loop-card > .loop-card-header > .loop-card-body FLEX, NOT `height: 100%` — DELIBERATE, AFTER THE PERCENTAGE VERSION FAILED ON ME. A percentage height resolves against the parent's height, so it only works if EVERY ancestor already has a definite height. One shrink-to-fit link anywhere in the chain and the whole thing silently collapses to content height, which is what kept happening. Flex stretching has no such requirement: a flex item with `flex: 1` grows to fill its container whether or not that container has an explicit height. Each level below just has to be a flex column so the next level down can grow inside it. !important IS JUSTIFIED HERE, NOT LAZY. Loop's stylesheet loads AFTER this file, so its equally-specific rules win on source order — that's the proven cause of the .loop-card failure below. Both of these elements carry exactly one class each, so unlike .loop-card there's no second class to chain for extra specificity, and !important is the only lever left. My outline diagnostic confirmed .loop-bundle-product-wrapper already reaches full height and is equal across cards, so the stretch arrives here correctly; these rules pass it down to the card. */ .loop-bundle-product-wrapper { display: flex !important; flex-direction: column !important; } .loop-bundle-product-container { display: flex !important; flex-direction: column !important; flex: 1 !important; } /* Card shell: border moves to .loop-card-body below, so strip it here and turn the card into a simple vertical stack with even gaps. SELECTOR MUST STAY DOUBLE-CLASSED — DON'T SIMPLIFY TO `.loop-card`. This element is `class="loop-card loop-bundle-product-card"`. Loop ships its own single-class rule setting `display: block`, and because its stylesheet loads after this file, an equally-specific `.loop-card` here LOSES on source order. The card then stayed display:block, which silently disabled the `flex: 1` on .loop-card-body — flex-grow does nothing unless the parent is actually a flex container. Chaining both classes reaches specificity 0,2,0, which beats any single-class rule no matter what order it loads in. Being double-classed is also why this rule's `gap` survives while the .loop-card-header one below needs !important to do the same job. gap IS AN HONEST 4px AGAIN. It briefly ran at 3px compensating a mystery extra pixel in the box-to-button gap; console measurement then traced that pixel to a 1px TRANSPARENT border Loop draws on .loop-card-header (see that rule below — border-width:0 removes it at source). With the border gone, 4px here renders as 4px, matching the collection cards and the image-to-box gap. If this gap ever looks 1px too wide again, check the header border first. */ .loop-card.loop-bundle-product-card { border-width: 0; background: transparent; display: flex; flex-direction: column; gap: 4px; flex: 1; } /* Image tile: full-bleed square with rounded corners. overflow:hidden on the wrapper is what clips the img to the radius. height:auto in case Loop's product-image height setting lands on a wrapper rather than the img itself — a fixed-height wrapper would either clip the square image or leave a gap under it. margin:0 IS LOAD-BEARING, NOT INSURANCE — Loop puts a margin on the image container, and `gap` adds space between flex items but can't subtract a margin, so that margin stacks on top of the 4px gap and reopens the image-to-box gap. QUALIFIED WITH THE PARENT AND FLAGGED — DON'T SIMPLIFY EITHER PART. I escalated twice to get here, so both parts are load-bearing: - bare `.loop-bundle-product-image-container` (0,1,0) tied with Loop and lost on source order; - qualifying with the parent (0,2,0) still didn't win, which means Loop's own rule is either !important or an inline style. 0,2,0 + !important beats a 0,1,0 !important rule and any normal declaration, so this is the level that actually holds. */ .loop-card-header .loop-bundle-product-image-container, .loop-card-header .loop-image-product-lg { height: auto !important; max-height: none !important; min-height: 0 !important; margin: 0 !important; } /* THE 6.4px MYSTERY GAP — I MEASURED THIS, NOT GUESSED. My console audit showed the container at 232.4px around a 226px child with zero margins and padding everywhere. The fractional overshoot is the signature of DESCENDER SPACE: the -lg wrapper was being laid out as an inline-level box, so the container wrapped it in a text line box and reserved ~6.4px below the baseline for letter tails (g, y, p) — the classic "gap under an image", one level up from the img itself. It's not a margin, padding, height or gap, which is why zeroing all of those did nothing. display:flex is the fix because flex containers don't generate line boxes, so the descender space ceases to exist. flex-direction:column keeps the single child stacking normally. */ .loop-card-header .loop-bundle-product-image-container { display: flex !important; flex-direction: column !important; } .loop-image-product-lg { border-radius: 12px; overflow: hidden; } /* THE MISSING LINK IN THE STRETCH CHAIN. .loop-card-header wraps both the image tile and .loop-card-body, so the body grows inside THIS element, not inside .loop-card. Without the header being a flex column that itself grows, `flex: 1` on the body has no growable parent and silently does nothing — exactly what happened while my chain was built on the assumption that body and header were siblings. EVERY DECLARATION HERE NEEDS !important, gap INCLUDED. Single class, and Loop loads later, so every tie goes to Loop. I left `gap` un-flagged at first and Loop's larger gap won it — which is why the image-to-box gap sat visibly wider than the box-to-button gap despite both rules asking for 4px. The .loop-card version wins on specificity because it's double-classed; this one can't be, so it needs the flag. border-width:0 KILLS AN INVISIBLE 1px BORDER — MEASURED, THEN TRACED. Console audit: body bottom sat exactly 1.00px above the header's bottom edge. Loop sets --loop-product-card-header-border-color: transparent with a 1px border-size, i.e. it draws a border on this header and hides it by colour. A transparent border still occupies layout space: the body fills the header's CONTENT box, the border sits outside that, so the visible box-to-button gap ran 1px wider than the gap asked for. No margin/padding/gap fix could ever touch it. Removing the border restores the true 4px everywhere. */ .loop-card-header { display: flex !important; flex-direction: column !important; flex: 1 !important; gap: 4px !important; border-width: 0 !important; } /* Text box: the bordered white panel. .text-center is a utility class Loop puts on this element. Rather than fight it with !important, my selector adds that same class to reach specificity 0,2,0 — one higher than the utility's 0,1,0, so it simply wins. */ /* `flex: 1` IS THE EQUAL-HEIGHT FIX. Without it this box sizes to its content, so a two-line title produces a shorter white box than a five-line one and the leftover space pools below it — the cards line up at top and bottom while the boxes themselves are ragged. Growing the body absorbs that space instead. */ /* margin FLAGGED: this is the OTHER side of the image-to-box gap. Specificity is irrelevant against an !important declaration — an unflagged `margin: 0` here loses to a flagged Loop rule however specific my selector is. */ .loop-card-body.text-center { flex: 1; display: flex; flex-direction: column; margin: 0 !important; border: 4px solid #A34200; border-radius: 12px; padding: 12px; text-align: left; background: #FFFFFF; } /* Inner column: Loop sets `items-center` (Tailwind align-items:center) here, which is what was centring the title and price. Same specificity trick. With this in place, the `margin-right: auto` on the title and price below is belt-and-braces rather than load-bearing — harmless, and keeps them left if this rule ever stops matching. */ .loop-product-card-description-body.items-center { align-items: flex-start; width: 100%; flex: 1; } .loop-product-price, .loop-discounted-price { font-size: 20px; } /* Button: detached below the text box, spanning the full card width. I MEASURED 5.0px body-to-button against the card's 4px gap — 1px of extra space lives in these wrappers. Likely source: Loop's --loop-card-header-footer-border-color is `transparent`, i.e. it draws a border on the footer and hides it by colour. A transparent border still occupies layout space. Rather than hunt which wrapper holds the pixel, I zeroed every space-capable property on all three — they're pure plumbing between the card and the button, so nothing legitimate is lost. The button's own 4px border is untouched (it's part of the button, inside its box). */ .loop-body-footer-wrapper, .loop-card-footer, .loop-add-product-btn { width: 100%; margin: 0 !important; padding: 0 !important; border-width: 0 !important; } /* margin:0 — chasing the last 1px of the body-to-button gap. Zeroing the three wrappers above didn't remove it, and the button element itself was the only thing between the gap and the pixel that I hadn't flagged. A margin here sits INSIDE the zeroed wrappers, so it survives everything applied to them. If the gap still reads 5px after this, the fallback is compensating on .loop-card.loop-bundle-product-card with `gap: 3px` — works visually, but it's a magic number masking an unlocated pixel, so it's the last resort. */ .loop-btn-add-product { width: 100%; margin: 0 !important; } /* Card title. NO min-height ANY MORE — DON'T REINSTATE IT. This rule used to carry `min-height: 4.725rem`, reserving a fixed three-line block so the price below started at the same height on every card. That was a workaround from before I knew the container was a flex column, and it had two real faults: the value was a magic number derived from font-size x line-height x 3, so it went stale the moment either changed; and a title wrapping to FOUR lines overflowed the reserve and knocked its card out of alignment anyway. The price is now pinned with `margin-top: auto` instead (see .loop-display-product-price below), which works for any number of lines and needs no maintenance. */ .loop-bundle-product-card-title { font-family: "Poleno", sans-serif; font-size: 1.75rem; line-height: 0.9; margin-right: auto; text-align: left; } /* Card short description text */ .loop-text-p3, .loop-bundle-product-card-description { font-size: 1.25rem; color: #3C1900; line-height: 1; } /* Product image: forced square, fills the tile. FIXED — THIS RULE WAS DEAD. It previously read `.loop-image-product img`, but the wrapper's actual class is `loop-image-product-lg`. Class selectors match whole tokens, so `.loop-image-product` never matched `loop-image-product-lg` and nothing in this block was ever applied. The radius now lives on the wrapper above (which clips via overflow:hidden), so it's not repeated here. object-fit:cover stops the square aspect-ratio from distorting a non-square source image; display:block removes the few px of inline whitespace under the img that would otherwise show inside the tile. WHY height:auto CARRIES !important — THE RESPONSIVE FIX. Loop's style settings apply a fixed pixel height to the product image. A fixed height can't stay square while the card width flexes: it's square at exactly one viewport and increasingly letterboxed either side of it (this is what produced ~456x404 tiles instead of squares). `aspect-ratio` is only consulted when the other dimension is `auto`, so as long as Loop's pixel height applies, aspect-ratio is ignored completely. Forcing height:auto hands control back to aspect-ratio, which recalculates from the real rendered width at every breakpoint — square at all sizes. !important because Loop's generated rule may outrank this selector; it also makes the app-side height setting a no-op, so I ignore that control now rather than trying to tune it. */ .loop-image-product-lg img { display: block; width: 100%; height: auto !important; max-height: none !important; aspect-ratio: 1; object-fit: cover; border-width: 0 !important; } /* Price — left-aligned, while the card title above stays left too. CONFIRMED A FLEX ITEM. I tried `text-align: left` and `display: block` first and they did nothing: flex containers position their children by flex properties, not text-align, and flex items are blockified automatically so `display: block` was redundant. An auto margin is the flex mechanism — it absorbs all free space on that side, so `margin-right: auto` pushes the item hard left. `margin-top: auto` IS THE BOTTOM-ALIGNMENT FIX, replacing the title's old min-height hack. An auto margin on a flex item absorbs ALL free space on that side, so this pushes the price to the bottom of its column and the space collects above it instead — under the title, where it's invisible. The result holds for any title length, two lines or five, with no magic numbers. It needs an unbroken column of growable parents to have any free space to absorb, which is why these three exist above: .loop-card-body.text-center display:flex + column + flex:1 .loop-product-card-description-body flex:1 (this rule) margin-top:auto .loop-product-card-description-body was already `flex flex-col` in Loop's own markup — I only had to add the `flex: 1` to make it fill the white box. */ .loop-display-product-price { font-family: "Click Clack", sans-serif; margin-right: auto; margin-top: auto; } /* Quantity stepper — number field. Matches the 50px button height in section 3 so the -/number/+ group lines up as one pill. If I change one height, change the other. REVIEW — SCOPE: .loop-form-input looks like a generic input class rather than a stepper-specific one. If Loop reuses it elsewhere (email capture, gift note, discount code), this 50px will hit those too. Confirm in DevTools; if it's global, move this rule to its own section or target the stepper's wrapper. */ .loop-form-input { height: 50px; } /* Quantity stepper — flatten the inner edges so the +/- buttons and the number field read as one pill. MUST stay below .loop-btn (section 3) — equal specificity, source order wins. */ .loop-btn-input-decrease { border-radius: 12px 0 0 12px; } .loop-btn-input-increase { border-radius: 0 12px 12px 0; } /* ============================================================================= 5. FOOTER ========================================================================== */ /* Discount bar — brand rust/orange (#A34200) DON'T REMOVE border-color — IT IS LOAD-BEARING. Loop applies its own border style, width AND a green colour to this element. Matching the border to the fill is what hides it; delete this line and a thin green outline reappears around the bar (I've seen it). `border-width: 0` would also remove it, but shrinks the box by the border width and can nudge the surrounding layout — matching the colour has no such side effect. */ .loop-bundle-footer-discount-section { background-color: #A34200; border-color: #A34200; } /* Next-tier discount prompt — sits ON the rust bar above, so the text must contrast against #A34200, not match it. HISTORY, SO I DON'T "FIX" THIS BACK: this rule originally read `font-color: #A34200`. That's not a real CSS property, so the browser threw it away and the text inherited Loop's default white — which happened to look fine. Correcting the typo to `color` made the declaration valid and applied rust text to a rust background, rendering it invisible. The colour was always wrong; being invalid was the only thing hiding that. White on #A34200 measures 6.3:1, which passes WCAG AA for normal text (4.5:1) and large text (3:1); it falls just short of AAA (7:1). REVIEW: if this class is also used somewhere with a light background, white will disappear there instead. Check before assuming this is settled. */ .loop-higher-discount-rate { font-family: "Poleno", sans-serif; color: #FFFFFF; } /* Helper / counter text */ .loop-show-more-less-text, .loop-bundle-number-of-products-quantity-added-text { font-family: "Click Clack", sans-serif; font-size: 14px; } /* Add to cart: remove Loop's default drop shadow */ .loop-btn-add-to-cart { box-shadow: none !important; } /* ============================================================================= OPTIONAL NEXT STEP ----------------------------------------------------------------------------- #A34200 appears three times (card border, footer background, footer border) and the two font families five times between them. I could lift these into custom properties for single-point editing. Note Loop already exposes some of these as its own variables — --loop-product-card-border-color is #A34200, --loop-product-card-border-radius is 12px — so setting those in the Loop app may be cleaner than hardcoding here. Defining my own on :root is untested: Loop's custom CSS may be injected into a scoped context where :root doesn't apply, so try one throwaway variable before committing to the pattern. ========================================================================== */