/* product detail page Part of the split style.css. inc/enqueue.php enqueues each file as its own , in filename order -- they are NOT concatenated, so a comment or a rule cut across the join does not heal at the seam. It breaks both files, and the browser drops everything it cannot parse without saying so. Keep every construct whole inside one file. Source order is still the cascade, so moving a rule between files can change which one wins. */ .pet-pdp-price { color: var(--pet-text); font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 900; letter-spacing: -.04em; margin: .55rem 0 .5rem; } /* The variant row must contain its on the Hebrew page: Chromium resolves an RTL select's min-content from its longest option and, unlike LTR, ignores the min-width: 0 the rule above states -- measured 2026-09-02 on family p002-05 at an emulated 360, where the one-column page laid out 762px wide. Capping the track's minimum at 0 removes the whole class: the column is the viewport's width no matter what a child asks for, and the children shrink through their own min-width chain. */ .pet-pdp-hero { grid-template-columns: minmax(0, 1fr); } /* The second half of the same Chromium quirk: an explicit width anchors the RTL select where the flex shrink alone does not. Full-width under its label at these widths -- which is also the easier control to hit with a thumb. */ .pet-pdp-variant-select { width: 100%; } .pet-pdp-purchase { max-width: none; } .pet-pdp-image { height: min(440px, 75vw); } /* One column at these widths, so the thumbnail rail stops being a rail. As a vertical column beside the picture (60-legal.css's 76px track) a six-frame gallery measures ~450px of thumbnails against a ~290px image, and the taller of the two is the gallery's height -- every extra frame pushed the price and the primary action further down a phone screen. Below the picture as one horizontally scrollable row the strip costs a fixed ~76px whatever the frame count. `order` works here because the gallery is a grid and its two children are grid items; the DOM order (thumbnails first) is unchanged, so focus order and the browser-check's selectors see the same document. overflow-x on the strip itself: the row scrolls, the document does not grow. In RTL the row lays out and scrolls right-to-left on its own; nothing to mirror. */ .pet-pdp-gallery { grid-template-columns: minmax(0, 1fr); } .pet-pdp-image-wrap { order: 1; } .pet-pdp-thumbnails { flex-direction: row; gap: .55rem; order: 2; overflow-x: auto; padding: 2px; } .pet-pdp-thumb { flex: 0 0 auto; } .pet-pdp-related-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { /* 48px keeps each frame at ~58px with its padding and border -- still over the 44px touch baseline -- while seven of them plus gaps fit a 360px strip with about one and a half frames peeking past the edge to say the row scrolls. */ .pet-pdp-thumb img { height: 48px; width: 48px; } .pet-pdp-image-wrap { min-height: 290px; } /* The action row is flex, not grid: a grid-template-columns here would have been ignored, which is how the WhatsApp button ended up beside a 150px primary on a narrow phone. Stack them by letting both take the whole line instead, with the dominant one still first. */ .pet-pdp-actions .pet-button, .pet-pdp-cta-whatsapp { flex: 1 1 100%; } .pet-pdp-related-grid { grid-template-columns: 1fr; } .pet-pdp-trust { grid-template-columns: 1fr; } } @media (max-width: 780px) { body:has(.pet-commerce-page) .wp-block-post-content { margin-inline: 12px !important; width: calc(100% - 24px) !important; } .pet-commerce-page { padding-bottom: 110px; } .pet-commerce-page .wc-block-components-sidebar-layout { grid-template-columns: minmax(0, 1fr); } .pet-commerce-page .wc-block-components-main, .pet-commerce-page .wc-block-components-sidebar, .pet-commerce-page .wc-block-cart { min-width: 0; max-width: 100%; } .pet-commerce-page .wc-block-components-sidebar { padding: 1rem; position: static; } .pet-shipping-progress > div { align-items: flex-start; flex-direction: column; } } /* Keep the standalone product template aligned with the site-editor header. Raised from 781px to 1561px to match 60-legal.css's hamburger breakpoint -- this flex layout assumes the full nav is visible and lays it out alongside the logo, which is wrong below that width now that the nav is a hamburger instead (see 60-legal.css's own comment on this breakpoint for why a layout that changes shape at a breakpoint used to move the logo, and why that's the thing being fixed here). */ @media (min-width: 1561px) { .pet-product-detail-page .pet-site-header > .wp-block-group { align-items: center; display: flex !important; gap: 1rem; justify-content: space-between; min-width: 0; } .pet-product-detail-page .pet-site-header > .wp-block-group > .pet-nav-wrap { flex: 1 1 0; min-width: 0; } .pet-product-detail-page .pet-primary-nav { overflow-x: auto; padding-block: 8px 2px; scrollbar-width: none; } .pet-product-detail-page .pet-primary-nav::-webkit-scrollbar { display: none; } .pet-product-detail-page .pet-site-header > .wp-block-group > .pet-wordmark-slot { flex: 0 0 auto; margin: 0; } .pet-product-detail-page .pet-site-header > .wp-block-group > .pet-header-end { flex: 1 1 0; justify-content: flex-end; min-width: 0; } .pet-product-detail-page .pet-header-actions > p { margin: 0; } } /* Below 1561px, product-detail pages fall through to the same 3-column grid + hamburger as every other page (00-base.css's base rule, unset by anything in this file at this width) -- no separate stacking here any more, same reasoning as 60-legal.css's 780px block. */ @media (max-width: 780px) { .pet-product-detail-page .pet-wordmark-slot { padding: 0; } } /* Keep section rhythm compact so content does not get lost in empty space. */ .pet-reviews { padding-block: clamp(2.5rem, 4vw, 4rem); } .pet-section-hero { padding: clamp(2.25rem, 5vw, 4.5rem); } .pet-shop-heading { padding-block: clamp(2.25rem, 4vw, 3.75rem) 1rem; } /* This file's own RTL pass (2026-08-24). The related-strip heading carries a "catalog" arrow: mirrored for Hebrew the same way the six other arrow glyphs already are (see 50-catalog.css's .pet-product-card-link rule -- .pet-shop-card a span, .pet-info-cta, .pet-event-action, .pet-specialty-card-cta, .pet-breadcrumbs are the rest of the family). inline-block because a span only honours transform as a box. Deliberately scoped to the heading link's arrow span: the .pet-pdp-icon glyphs beside it include the sheqel sign and a check mark, which are symbols rather than directional arrows and must never be mirrored. */ [dir="rtl"] .pet-pdp-section-heading a [aria-hidden="true"] { display: inline-block; transform: rotate(180deg); } /* Same white-melt as the grid cards (50-catalog.css): the PDP main image when the template marked it a pack shot, and related cards for every source but bred photographs and seashell cut-outs. This is the rendering site where the exclusion actually earns its keep -- .pet-pdp-related-card img paints --pet-surface-muted behind itself, so multiply here is not the no-op it is against a white card. 50-catalog.css carries the reasoning. */ .pet-img-blend, .pet-pdp-related-card:not([data-source="bred"]):not([data-source="seashell"]) img { mix-blend-mode: multiply; }