) page container * .product-back "Go Back" breadcrumb * .product-detail gallery + info card grid * .product-gallery * .product-info * .product-showcase-header * .product-showcase image/text rows * ------------------------------------------------------------------ */ .product-page-body { margin: 0; color: #fff; background: #0F121B; font-family: "Barlow", sans-serif; min-height: 100vh; overflow-x: hidden; } .product-page-body *, .product-page-body *::before, .product-page-body *::after { box-sizing: border-box; } /* ──────────── HERO BACKDROP ──────────── */ .product-hero-bg { position: absolute; top: 0; left: 0; right: 0; height: 1080px; pointer-events: none; overflow: hidden; z-index: 0; opacity: 0.31; /* No CSS mask — the SVG ships with its own built-in fade-down * mask, so layering another mask on top just hides the image. */ } .product-hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; } /* Union decoration — sits between the hero image and the dark veil. * The SVG itself is 1920×613, anchored to the top of the page. All * three hero layers (bg, union, veil) share z-index: 0; the source * order in the twig (bg → union → veil) controls front-to-back * stacking so the page content (z-index: 1) stays above them. */ .product-hero-union { position: absolute; top: 0; left: 0; right: 0; height: 613px; pointer-events: none; overflow: hidden; z-index: 0; mix-blend-mode: overlay; } .product-hero-union img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; } /* Rectangle 3 from the original design — top-down navy → transparent * gradient, layered above the hero image and union overlay so the top * of the page blends seamlessly into the navbar. */ .product-hero-veil { position: absolute; top: 0; left: 0; width: 100%; height: 1080px; pointer-events: none; z-index: 0; background: linear-gradient(180deg, #0F121B 0%, rgba(15, 18, 27, 0.7) 40%, rgba(15, 18, 27, 0.85) 100%); } /* ──────────── PAGE CONTAINER ──────────── */ /* No fixed max-width: the layout is fully fluid like the rest of the * site (matches .products-section in products.css). Padding scales * with viewport width via clamp() so the page fills any resolution. */ .product-page { position: relative; z-index: 1; width: 100%; margin: 0 auto; padding: 140px clamp(20px, 6vw, 96px) 80px; display: flex; flex-direction: column; gap: clamp(40px, 5vw, 80px); } /* ──────────── GO BACK BREADCRUMB ──────────── */ .product-back { display: inline-flex; align-items: center; gap: 12px; color: rgba(255, 255, 255, 0.35); text-decoration: none; font-family: "GTA Art Deco", sans-serif; font-weight: 500; font-size: 20px; line-height: 28px; width: fit-content; /* Cancel out the .product-page flex `gap` (clamp(40px, 5vw, 80px)) between the breadcrumb and the detail card, leaving ~16px instead. */ margin-bottom: calc(46px - clamp(40px, 5vw, 80px)); transition: color 0.18s ease; } .product-back svg { flex-shrink: 0; } .product-back:hover { color: #fff; } /* ──────────── MAIN DETAIL GRID ──────────── */ /* Two-column flex layout: gallery left, info card right. * Using percentage flex-basis (not fr units) so the columns stay * proportional even when the row has lots of content on one side. */ .product-detail { display: flex; flex-direction: row; gap: clamp(20px, 2vw, 32px); align-items: flex-start; } .product-detail .product-gallery { flex: 1 1 45%; min-width: 0; max-width: 880px; } .product-detail .product-info { flex: 1 1 55%; min-width: 0; } /* ──────────── LEFT: GALLERY ──────────── */ .product-gallery { display: flex; flex-direction: column; min-width: 0; } /* Aspect ratio bumped from 780/479 to 780/608 so the main image now * fills the entire vertical space the gallery used to occupy * (previously: main image + 20px gap + thumbnails strip). */ .product-gallery__main { width: 100%; aspect-ratio: 16 / 9; border-radius: 16px; background-color: rgba(255, 255, 255, 0.04); background-size: contain; background-position: center; background-repeat: no-repeat; } /* ──────────── GALLERY ACTION BUTTONS ──────────── */ /* Two side-by-side buttons (YouTube + Documentation) below the * main product image. Each has a subtle radial fill plus two * blurred diagonal "light streaks" for the glassy material feel. */ .product-gallery__actions { display: flex; gap: 12px; margin-top: 20px; width: 100%; } .product-action { position: relative; flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px; border-radius: 8px; overflow: hidden; text-decoration: none; color: #fff; background: radial-gradient(ellipse 50% 100% at 50% 50%, rgba(115, 115, 115, 0) 0%, rgba(217, 217, 217, 0.10) 100%); border: 1px solid rgba(255, 255, 255, 0.06); transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease; } .product-action:hover { border-color: rgba(255, 255, 255, 0.14); transform: translateY(-1px); background: radial-gradient(ellipse 50% 100% at 50% 50%, rgba(115, 115, 115, 0) 0%, rgba(217, 217, 217, 0.18) 100%); } .product-action:hover .product-action__arrow { transform: translate(2px, -2px); } /* Diagonal light streaks (decorative). Both rotate at -42deg from * the top-left corner; the blue is offset slightly inward, the * white sits behind/below it for a layered glow. */ .product-action__glow { position: absolute; top: 0; left: 0; width: 35px; height: 200px; border-radius: 9999px; filter: blur(50px); pointer-events: none; } .product-action__glow--blue { background: rgba(198, 212, 255, 0.20); transform: translate(-10px, 30px) rotate(-42deg); transform-origin: top left; } .product-action__glow--white { background: rgba(255, 255, 255, 0.55); transform: translate(40px, 70px) rotate(-42deg); transform-origin: top left; } .product-action__main { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 16px; min-width: 0; } .product-action__icon { flex-shrink: 0; width: 40px; height: 40px; padding: 8px; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; background: radial-gradient(ellipse 117.5% 117.5% at 50% 50%, rgba(255, 255, 255, 0.15) 0%, rgba(153, 153, 153, 0) 100%); } .product-action__icon img { width: 100%; height: 100%; object-fit: contain; display: block; } .product-action__label { font-family: "GTA Art Deco", sans-serif; font-weight: 400; font-size: 18px; line-height: 28px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .product-action__arrow { position: relative; z-index: 1; flex-shrink: 0; color: #fff; transition: transform 0.2s ease; } /* ──────────── RIGHT: INFO + LINKS ──────────── */ .product-info { display: flex; flex-direction: column; gap: 20px; min-width: 0; } /* Info card */ .product-info__card { position: relative; overflow: hidden; border-radius: 12px; background: radial-gradient(ellipse 50% 100% at 50% 50%, rgba(217, 217, 217, 0.15) 0%, rgba(115, 115, 115, 0) 100%); border: 1px solid rgba(255, 255, 255, 0.08); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; flex-direction: column; } .product-info__card-top { padding: 20px 20px 16px; display: flex; flex-direction: column; gap: 2px; flex: 1; } .product-info__card-bottom { padding: 0 20px 20px; } .product-info__price-section { display: flex; flex-direction: column; gap: 12px; min-width: 0; } .product-info__stripe { position: absolute; left: calc(50% - 50px); width: 101px; height: 5px; pointer-events: none; } .product-info__stripe svg { position: absolute; top: 0; left: 0; display: block; } .product-info__stripe svg:nth-child(2) { left: 25px; filter: drop-shadow(0 4px 24px rgb(250, 64, 57)); } .product-info__stripe--top { top: 0; } .product-info__stripe--bot { bottom: 0; transform: rotate(180deg); } .product-info__title { position: relative; z-index: 1; font-family: "GTA Art Deco", sans-serif; font-weight: 500; font-size: clamp(20px, 1.6vw, 26px); line-height: 1.15; color: #fff; margin: 0; font-family: 2rem; } .product-info__features { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .product-info__feature { display: flex; align-items: center; gap: 12px; color: #fff; font-size: 14px; line-height: 1.2; } .product-info__feature-icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; color: #FA4039; } .product-info__feature-icon .feature-icon { width: 100%; height: 100%; display: block; } .product-info__feature-text { display: inline-flex; align-items: baseline; gap: 6px; flex-wrap: wrap; } .product-info__feature-title { font-weight: 700; color: #fff; } .product-info__feature-detail { font-weight: 400; color: rgba(255, 255, 255, 0.65); } .product-info__tags { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 6px; } .product-info__tag { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 4px; background: rgba(198, 212, 255, 0.15); outline: 1px solid rgba(198, 212, 255, 0.15); outline-offset: -1px; font-family: "GTA Art Deco", sans-serif; font-weight: 500; font-size: 16px; color: #fff; line-height: 1; height: 33px; } .product-info__tag-icon { width: 18px; height: 18px; object-fit: contain; flex-shrink: 0; } /* Description sits inside the card, just below the title */ .product-info__description { position: relative; z-index: 1; font-family: "GTA Art Deco", sans-serif; font-size: clamp(14px, 1vw, 16px); line-height: 1.6; color: rgba(255, 255, 255, 0.55); } .product-info__description :first-child { margin-top: 0; } .product-info__description :last-child { margin-bottom: 0; } /* ──────────── DESCRIPTION FEATURE LISTS ──────────── * * Pattern: write a plain

in the Tebex description with * Term Detail * The CSS below turns it into the feature-list look (red FA icon, * bold term in a fixed-width column, dim detail text). No inline * styles or wrapper divs needed in the description HTML. */ .product-info__description ul { list-style: none; margin: 14px 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .product-info__description ul li { display: flex; align-items: baseline; gap: 12px; margin: 0; color: rgba(255, 255, 255, 0.62); line-height: 1.5; } /* Any FontAwesome icon at the start of an
. We match by * any class starting with "fa-" so users don't need a wrapper * span — just . */ .product-info__description ul li > i, .product-info__description ul li > [class*="fa-"]:first-child { flex: 0 0 22px; color: #FA4039; font-size: 17px; text-align: center; /* Nudge the glyph onto the same baseline as the text. */ transform: translateY(2px); } /* Bold term sits in a fixed-width column so all rows align * regardless of term length. min-width adapts to the longest * term naturally; for very long terms it grows past 110px. */ .product-info__description ul li strong, .product-info__description ul li b { flex: 0 0 auto; min-width: 110px; color: #fff; font-weight: 500; } /* Framework tag chips for the description. Paste a flat *
with
children * — see the user-facing snippet for the exact markup. The icon * inside is any Font Awesome or a small . */ .product-info__description .desc-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; } .product-info__description .desc-tag { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 4px; background: rgba(198, 212, 255, 0.15); outline: 1px solid rgba(198, 212, 255, 0.15); outline-offset: -1px; font-family: "GTA Art Deco", sans-serif; font-weight: 500; font-size: 18px; color: #fff; line-height: 1; } .product-info__description .desc-tag i, .product-info__description .desc-tag [class*="fa-"] { font-size: 14px; color: #fff; width: auto; text-align: left; transform: none; flex: none; } .product-info__description .desc-tag img { width: 27px; height: 27px; object-fit: contain; flex-shrink: 0; } /* ──────────── SMALL FEATURES (marketing bullets) ──────────── * Driven by _product_small_features.twig — one
with rows of * Term detail * Visual matches the manual feature-list pattern documented for * the description, just slightly larger so it reads as a "key * highlights" callout under the prose. */ .product-info__small-features { list-style: none; margin: 14px 0 4px; padding: 0; display: flex; flex-direction: column; gap: 10px; } .product-info__small-features li { display: flex; align-items: baseline; gap: 14px; margin: 0; color: rgba(255, 255, 255, 0.72); line-height: 1.5; font-family: "GTA Art Deco", sans-serif; font-size: clamp(15px, 1.15vw, 17px); } .product-info__small-features li > i, .product-info__small-features li > [class*="fa-"]:first-child { flex: 0 0 24px; color: #FA4039; font-size: clamp(17px, 1.3vw, 19px); text-align: center; transform: translateY(2px); } .product-info__small-features li strong { flex: 0 0 auto; min-width: 140px; color: #fff; font-weight: 500; } .product-info__small-features__detail { color: rgba(255, 255, 255, 0.65); } /* Faint "comes with escrowed dependency" disclaimer for open-source * packages — barely-readable gray, italic, sits under the bullets. */ .product-info__opensource-note { margin: 14px 0 0; font-family: "GTA Art Deco", sans-serif; font-size: 12px; font-style: italic; color: rgba(255, 255, 255, 0.28); line-height: 1.4; } /* Headings inside the description (when the editor uses h2/h3). */ .product-info__description h2, .product-info__description h3, .product-info__description h4 { margin: 1em 0 0.5em; font-family: "GTA Art Deco", sans-serif; font-weight: 500; color: #fff; line-height: 1.2; } .product-info__description h2 { font-size: 22px; } .product-info__description h3 { font-size: 18px; } .product-info__description h4 { font-size: 16px; } .product-info__description p { margin: 0 0 0.8em; } .product-info__description a { color: #FA4039; text-decoration: none; border-bottom: 1px solid rgba(250, 64, 57, 0.4); transition: color 0.15s, border-color 0.15s; } .product-info__description a:hover { color: #ff6b65; border-bottom-color: #ff6b65; } .product-info__price-label { font-family: "GTA Art Deco", sans-serif; font-size: 16px; line-height: 1; color: rgba(255, 255, 255, 0.55); } .product-info__price-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; color: rgb(250, 64, 57); } .product-info__price-icon { width: 22px; height: 22px; object-fit: contain; flex-shrink: 0; } .product-info__price-val { font-family: "GTA Art Deco", sans-serif; font-weight: 500; font-size: 32px; line-height: 1; color: rgb(250, 64, 57); } /* Old price uses a diagonal strike instead of the default horizontal * line-through. Implemented with a rotated pseudo-element so the * angle is independent of the text width. */ .product-info__price-old { position: relative; display: inline-block; font-family: "GTA Art Deco", sans-serif; font-size: 18px; color: rgba(255, 255, 255, 0.35); text-decoration: none; } .product-info__price-old::after { content: ""; position: absolute; left: -3px; right: -3px; top: 50%; height: 1.5px; background-color: currentColor; transform: translateY(-50%) rotate(-15deg); transform-origin: center; pointer-events: none; } .product-info__discount { display: inline-flex; align-items: center; gap: 4px; padding: 6px 8px; border-radius: 4px; background: rgba(45, 255, 123, 0.15); color: rgb(45, 255, 123); font-family: "GTA Art Deco", sans-serif; font-weight: 500; font-size: 14px; line-height: 1; } /* ──────────── ADD-TO-CART BUTTON ──────────── */ /* Liquid-glass-flavoured CTA — same motion language as the navbar * (standalone translate / scale, bouncy cubic-bezier easing, * top-bright / bottom-shadow inset rim) but kept in the product's * brand-red gradient so it still reads as the primary action. * On hover a soft white gloss strip sweeps diagonally across the * button, like light catching the surface of a curved glass tile. */ .product-info__add-btn { position: relative; width: 100%; height: 52px; padding: 12px 16px; border: 0; border-radius: 12px; text-decoration: none; background: radial-gradient(ellipse 77.46% 320.85% at 50% 50%, #fa4039 0%, #942622 100%); /* Outer red glow + inset highlights — matches the cart-pill / * navbar rim language so the whole UI reads as one material. */ box-shadow: 0 6px 40px 0 rgba(250, 64, 57, 0.57), inset 0 1px 0 rgba(255, 255, 255, 0.30), inset 0 -1px 0 rgba(0, 0, 0, 0.18); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: "GTA Art Deco", sans-serif; font-weight: 600; font-size: 18px; line-height: 1; /* Standalone props (NOT `transform` shorthand) so the toss/ * flash animations and the press squish compose cleanly with * each other without fighting for `transform`. */ translate: 0 0; scale: 1; transition: translate 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), scale 0.15s ease, filter 0.2s ease, box-shadow 0.3s ease; } .product-info__add-btn svg, .product-info__add-btn-icon { width: 20px; height: 20px; object-fit: contain; /* Icon owns its own scale + rotate so the micro-bounce on hover * doesn't stomp on the button's own translate. */ transition: scale 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), rotate 0.35s ease; } .product-info__add-btn:hover { translate: 0 -3px; filter: brightness(1.10) saturate(115%); box-shadow: 0 14px 52px 0 rgba(250, 64, 57, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -1px 0 rgba(0, 0, 0, 0.20); } .product-info__add-btn:hover svg { scale: 1.15; rotate: -8deg; } .product-info__add-btn:active { translate: 0 0; scale: 0.97; filter: brightness(0.95); transition: translate 0.05s ease, scale 0.05s ease; } /* While the toss-to-cart animation is running, the button briefly * flashes brighter and more saturated like a recoil spark. */ .product-info__add-btn[data-tossing="true"] { animation: addBtnFlash 0.42s ease; } @keyframes addBtnFlash { 0% { filter: brightness(1) saturate(100%); } 30% { filter: brightness(1.4) saturate(140%); } 100% { filter: brightness(1) saturate(100%); } } /* Product gallery "kick" — a tiny squash-and-stretch played at the * moment the toss ghost spawns from it, so the whole interaction * feels physical: the gallery flings the item, the ghost arcs up, * the cart catches and wobbles. Same gooey easing as the navbar * hover lens, so the motion language is consistent. */ @keyframes productGalleryKick { 0% { scale: 1 1; } 20% { scale: 1.04 0.94; } 50% { scale: 0.97 1.04; } 100% { scale: 1 1; } } .product-gallery__main[data-tossing="true"] { animation: productGalleryKick 0.42s cubic-bezier(0.34, 1.56, 0.64, 1); } /* The flying ghost — a circular thumbnail clone of the product * gallery that travels along an arc to the cart pill. JS positions * + animates it via the Web Animations API; this rule just sets * the visual treatment (glow, rim, layering). */ .product-toss-ghost { position: fixed; background-size: cover; background-position: center; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4), 0 0 60px rgba(250, 64, 57, 0.5), inset 0 0 0 2px rgba(255, 255, 255, 0.4); pointer-events: none; /* Above the navbar (z-index 1000) so the arc stays visible * even as the ghost passes over the bar on the way up. */ z-index: 2000; will-change: transform, opacity, border-radius; } /* ──────────── LINK ROWS ──────────── */ .product-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .product-link { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 72px; padding: 0 16px; border-radius: 8px; /* Same glass-morphism treatment as the info card: translucent * fill, soft inner highlight, frosted border, backdrop blur. */ background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.015) 100%), rgba(15, 18, 27, 0.22); border: 1px solid rgba(255, 255, 255, 0.07); backdrop-filter: blur(2px) saturate(140%); -webkit-backdrop-filter: blur(2px) saturate(140%); color: #fff; text-decoration: none; overflow: hidden; transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } .product-link:hover { background: linear-gradient(180deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.03) 100%), rgba(15, 18, 27, 0.28); border-color: rgba(255, 255, 255, 0.12); transform: translateX(2px); } .product-link__icon { width: 40px; height: 40px; border-radius: 5px; background: radial-gradient(ellipse 100% 100% at 50% 50%, rgba(255, 255, 255, 0.15) 0%, rgba(153, 153, 153, 0) 100%); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: rgba(255, 255, 255, 0.85); } .product-link__icon svg { width: 20px; height: 20px; display: block; } .product-link__label { flex: 1; font-family: "GTA Art Deco", sans-serif; font-size: 20px; line-height: 1.4; color: #fff; } .product-link__arrow { color: #fff; flex-shrink: 0; opacity: 0.85; transition: transform 0.2s ease; } .product-link:hover .product-link__arrow { transform: translate(2px, -2px); } /* ──────────── PRODUCT SHOWCASE HEADING ──────────── */ .product-showcase-header { display: flex; align-items: center; gap: clamp(16px, 3vw, 40px); margin-top: 24px; } .product-showcase-header__text h2 { font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: clamp(28px, 4vw, 48px); line-height: 1; color: #fff; letter-spacing: 0.01em; margin: 0; } .product-showcase-header__text p { font-family: "Barlow", sans-serif; font-size: clamp(14px, 1.6vw, 20px); line-height: 1.4; color: rgba(255, 255, 255, 0.45); margin-top: 12px; max-width: 723px; } /* ──────────── SHOWCASE ROWS ──────────── */ .product-showcase { position: relative; border-radius: 12px; background: radial-gradient(ellipse 100% 100% at 50% 50%, rgba(217, 217, 217, 0.05) 0%, rgba(115, 115, 115, 0) 100%); padding: clamp(24px, 3vw, 44px); display: flex; flex-direction: column; gap: clamp(28px, 3vw, 44px); } .product-showcase__divider { width: 100%; height: 0; border-top: 2px dashed rgba(255, 255, 255, 0.1); } /* Each row is a horizontal flex container with one image and one * text block. The image gets a fluid width that grows with the * viewport (40% of the row, clamped between 320px and 760px) so it * stays visibly large at any resolution but never collapses. */ .showcase-row { display: flex; flex-direction: row; align-items: center; gap: clamp(24px, 3vw, 55px); } .showcase-row--image-right { flex-direction: row-reverse; } .showcase-row__image { flex: 0 0 auto; width: clamp(320px, 40%, 760px); aspect-ratio: 1920 / 1080; border-radius: 10px; background-color: rgba(255, 255, 255, 0.04); background-size: cover; background-position: center; background-repeat: no-repeat; } .showcase-row__text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 24px; } .showcase-row__title { font-family: "GTA Art Deco", sans-serif; font-weight: 500; font-size: clamp(24px, 2.2vw, 32px); line-height: 1.2; color: #fff; border-left: 3px solid rgb(250, 64, 57); padding: 12px 20px; width: fit-content; max-width: 100%; } .showcase-row__body { font-family: "GTA Art Deco", sans-serif; font-weight: 400; font-size: clamp(16px, 1.25vw, 19px); line-height: 1.6; color: rgba(255, 255, 255, 0.65); margin: 0; } .showcase-row__bullets { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; font-family: "GTA Art Deco", sans-serif; font-weight: 400; font-size: clamp(16px, 1.2vw, 19px); line-height: 1.55; color: rgba(255, 255, 255, 0.72); } .showcase-row__bullets li::marker { color: #FA4039; } .showcase-row__bullets strong { color: #fff; font-weight: 600; } /* ──────────── RESPONSIVE ──────────── */ /* Tablet / narrow desktop: detail + showcase stack vertically and * the image expands to the full row width. */ @media (max-width: 1280px) { .product-detail { flex-direction: column; gap: 24px; } .product-detail .product-gallery, .product-detail .product-info { flex: 1 1 auto; max-width: none; width: 100%; } .showcase-row, .showcase-row--image-right { flex-direction: column; gap: 24px; align-items: stretch; } .showcase-row__image { width: 100%; max-width: none; } } @media (max-width: 760px) { /* Body already pushes content below the announcement bar — keep * this tight so the back-link sits just under the navbar. */ .product-page { padding: 60px 16px 60px; } }