/** * Peregrine for WordPress — layout overrides stylesheet. * * Cross-cutting layout adjustments that depend on Peregrine components * being already loaded: * - .peregrine-centered toggle ("Center the content" inspector panel) * - nested-columns input width fix for auth forms placed side-by-side * - .peregrine-visibility-hidden-in-editor flag for the Site Editor * * Sits inside @layer peregrine-base and is enqueued LAST so the !important * flags on the centering rules win against the grid-template-columns * inline styles emitted by products-container/render.php. * * @package Peregrine\WordPress */ @layer peregrine-base { /* ── SECTION CENTERING (.peregrine-centered) ──────────────────── Injected by the JS extension peregrine-block-extensions.js when the user enables "Center the content" in the "Peregrine layout" panel of any Peregrine block. NOTE: we center the CONTAINERS and their ITEMS in the available space, NOT the text-align of the inner content (text stays aligned normally). To center text, use WordPress' native controls on the relevant block. */ /* Centers the block's wrapper inside its parent (useful when the block has a max width and we want it centered horizontally). */ .peregrine-centered { margin-left: auto; margin-right: auto; } /* Carousel: centers the slides in the viewport when there aren't enough to fill (e.g. 1 slide for 3 SPV → the slide is centered). */ .peregrine-centered .peregrine-carousel__track, .peregrine-centered.peregrine-carousel .peregrine-carousel__track { justify-content: center; } /* Products / categories grid: centers the items when there are few. The products-container render.php applies inline `display:grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))`. The `1fr` stretches each card over the full width → impossible to center a single card. The previous attempt with grid + `auto-fit` + `place-content: center` produced cells that were too narrow (~150px) → squashed cards. We switch to FLEX which is more predictable: fixed-width cards, wrap if several, centered via justify-content. */ .peregrine-centered.peregrine-products-container, .peregrine-centered .peregrine-products-container, .peregrine-centered.peregrine-categories-grid, .peregrine-centered .peregrine-categories-grid, .peregrine-centered.peregrine-products-grid, .peregrine-centered .peregrine-products-grid { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; grid-template-columns: none !important; /* override the render.php grid */ gap: 1.5rem; } /* Each grid item becomes a flex-item with a bounded width. `width: 100%` + `max-width` => the item is MIN(100%, 360px), which naturally handles mobile (viewport < 360px → card 100%). The > * selector targets direct children (cards, wp-block-peregrine-product-card, article.peregrine-tier, etc.) whatever wrapper is used. */ .peregrine-centered.peregrine-products-container > *, .peregrine-centered .peregrine-products-container > *, .peregrine-centered.peregrine-categories-grid > *, .peregrine-centered .peregrine-categories-grid > *, .peregrine-centered.peregrine-products-grid > *, .peregrine-centered .peregrine-products-grid > * { flex: 0 0 auto; width: 100%; max-width: var(--pk-centered-card-max, 360px); /* Cancels the `height: 100%` from the biomebounty skin which makes no sense in flex (no auto-computed height on flex-wrap). */ height: auto; } /* Card-internal headers + flex groups: items centered in their row */ .peregrine-centered .peregrine-tier__product-header, .peregrine-centered .peregrine-tier__feature-limits, .peregrine-centered .peregrine-tier__specs--primary { justify-content: center; } /* Price and cycle variants: centered horizontally */ .peregrine-centered .peregrine-tier__price, .peregrine-centered .peregrine-product-price, .peregrine-centered .peregrine-tier__price-cycle { justify-content: center; } /* Buy buttons (form or ) — flex wrapper to center the button */ .peregrine-centered .peregrine-buy-button, .peregrine-centered form.peregrine-buy-button, .peregrine-centered div.peregrine-buy-button { display: flex; justify-content: center; } /* Cycle filter tabs: centered (reinforces the default) */ .peregrine-centered .peregrine-cycle-filter { justify-content: center; } /* Standalone centered product card (article.peregrine-tier): ONLY when it is NOT inside a products-container or grid (otherwise the > * selector above handles it via flex). :not() prevents the double rule that conflicts with flex layout (margin:auto on a flex-item can break justify-content). */ .peregrine-centered article.peregrine-tier:not(.peregrine-products-container article):not(.peregrine-products-grid article):not(.peregrine-categories-grid article) { max-width: 380px; } /* Auth blocks with intrinsic width (buttons, ToS labels, links): a bare margin:auto does not center them because they are already inline-block / width: auto inside an invisible 100% wrapper. Solution: force display: block + width: fit-content → the block becomes as narrow as its content, and margin-inline: auto centers it inside its parent. Covers every auth CTA: submit register/login, terms, hook-slot (when it contains a single plugin element). */ .peregrine-centered.peregrine-register-submit, .peregrine-centered .peregrine-register-submit, .peregrine-centered.peregrine-login-submit, .peregrine-centered .peregrine-login-submit, .peregrine-centered.peregrine-register-terms, .peregrine-centered .peregrine-register-terms, .peregrine-centered.peregrine-login-options, .peregrine-centered .peregrine-login-options, .peregrine-centered.peregrine-auth-hook-slot, .peregrine-centered .peregrine-auth-hook-slot { display: block; width: fit-content; max-width: 100%; margin-inline: auto; } /* ── FIX OVERLAP OF AUTH INPUTS IN NESTED COLUMNS ────────────── When register-text-field / register-password-field / register- username / register-email are placed side by side inside core/columns (First/Last name, ZIP/City/Country), the inputs overflow and overlap. Cause: flex-children have `min-width: auto` by default → they refuse to shrink below their intrinsic size. Solution: force min-width:0 on the column + box-sizing border-box on the input so it respects padding without overflowing. Selector scoped to .peregrine-register-form-container and to login so we don't affect other core/columns on the site. */ .peregrine-register-form-container .wp-block-column, .peregrine-login-form-container .wp-block-column { min-width: 0; } /* Inputs themselves: 100% width with box-sizing so they NEVER overflow their wrapper. The parent label is also set to display:block so it cleanly stacks label + input (instead of the default inline-block). */ .peregrine-register-text-field, .peregrine-register-password-field, .peregrine-register-username, .peregrine-register-email, .peregrine-login-username, .peregrine-login-password { display: block; width: 100%; max-width: 100%; } .peregrine-register-text-field input, .peregrine-register-password-field input, .peregrine-register-username input, .peregrine-register-email input, .peregrine-login-username input, .peregrine-login-password input { width: 100%; max-width: 100%; box-sizing: border-box; display: block; } /* The label span: display block so it doesn't sit on the same line as the input when the parent label is inline-block. */ .peregrine-register-text-field__label, .peregrine-register-password-field__label { display: block; margin-bottom: 0.25rem; } /* ── VISIBILITY BADGE IN THE EDITOR ──────────────────────────── Blocks with peregrineHideWhenLoggedIn/Out=true are visually flagged in the editor (not on the frontend where they disappear). Reduced opacity + badge at the top right showing the condition. To avoid impacting the frontend, we scope to the Site Editor iframe selector + the classic block editor. */ .peregrine-visibility-hidden-in-editor { opacity: 0.55; position: relative; outline: 1px dashed currentColor; outline-offset: 2px; } .peregrine-visibility-hidden-in-editor::before { content: attr(data-peregrine-visibility-label); position: absolute; top: -10px; right: 6px; z-index: 10; background: var(--pk-accent, var(--wp--preset--color--primary, #4f46e5)); color: #fff; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 4px; letter-spacing: 0.04em; pointer-events: none; white-space: nowrap; } }