/* Diamond strip - desktop feature layout (owner 2026-09-03, design canvas "Diamond Strip"; homepage added and auto-play 2026-09-04). Category pages and the homepage: both strip templates mark the strip data-layout="feature" and the plugin's inline script (carousel_for_osclass/index.php, setupFeature) builds one big tile + two rows of three from the cards it already has when at least seven Diamonds are on the page; this sheet lays that out. Linked from header.php with media="screen and (min-width: 769px)" on search + home pages, and every rule is inside @media (min-width: 769px) as well - mobile (<= 768px) never matches anything here, and a strip with fewer than seven Diamonds keeps the plugin's rows (no .dg-page, so nothing below applies). Geometry: the strip is at most 1230px wide (plugin css/slideshow5.css:175-180). .dg-page = a 15px-equivalent left padding + a 462fr / 15fr / 738fr grid, so at 1230 the tile is 462 wide, the gutter 15 and the rows 738 = 3 cards of 216 + 15 + 15 (the li keeps its 15px side padding); the tile's first image edge sits on the intro card's left edge and the first row image 30px right of the tile. Below 1230 everything scales in proportion (owner: "scale it down"). Plan + verification record: docs/plans/diamond-feature-desktop-plan-2026-09-03.md */ @media (min-width: 769px) { /* page container: [tile] [gutter] [rows] */ #carouselbox.diamond-strip[data-layout="feature"] .dg-page { display: grid; grid-template-columns: 462fr 15fr 738fr; align-items: stretch; padding-left: 1.2195%; box-sizing: border-box; } /* tile slot: at least the design's 536/462 aspect, stretched to the rows column when that is taller */ #carouselbox.diamond-strip[data-layout="feature"] .dg-feature-slot { grid-column: 1; position: relative; min-height: 0; } #carouselbox.diamond-strip[data-layout="feature"] .dg-feature-slot::before { content: ""; display: block; padding-top: 116.017%; } #carouselbox.diamond-strip[data-layout="feature"] .dg-feature { position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 24px; overflow: hidden; background: #111; } #carouselbox.diamond-strip[data-layout="feature"] .dg-feature__link { display: block; position: relative; width: 100%; height: 100%; color: #fff; text-decoration: none; } #carouselbox.diamond-strip[data-layout="feature"] .dg-feature__img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; } #carouselbox.diamond-strip[data-layout="feature"] .dg-feature__img[src$="no_photo.gif"] { object-fit: contain; } /* legibility scrim under the name */ #carouselbox.diamond-strip[data-layout="feature"] .dg-feature__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; top: 55%; background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.55)); pointer-events: none; } /* tier pill (extends the plugin's .dg-tier-pill: slideshow5.css:256-269) */ #carouselbox.diamond-strip[data-layout="feature"] .dg-feature__pill { top: 14px; left: 14px; padding: 4px 10px; gap: 6px; } #carouselbox.diamond-strip[data-layout="feature"] .dg-feature__pill .dg-tier-icon { width: 17px !important; height: 17px !important; flex: 0 0 17px; } #carouselbox.diamond-strip[data-layout="feature"] .dg-feature__pill .dg-tier-text { font-size: 10px; font-weight: 500; } /* video badge: top right, mirrors the pill, never over the name block (the theme's .videoico supplies the glyph) */ #carouselbox.diamond-strip[data-layout="feature"] .dg-feature__video { position: absolute; float: none; margin: 0; top: 14px; right: 14px; z-index: 2; } /* name block inside the photo */ #carouselbox.diamond-strip[data-layout="feature"] .dg-feature__meta { position: absolute; left: 24px; right: 24px; bottom: 24px; display: flex; flex-direction: column; gap: 6px; z-index: 2; } #carouselbox.diamond-strip[data-layout="feature"] .dg-feature__name { display: flex; align-items: center; gap: 8px; min-width: 0; font: 500 30px/34px "S\00F6hne", sans-serif; letter-spacing: -0.6px; color: #fff; } #carouselbox.diamond-strip[data-layout="feature"] .dg-feature__name-text { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #carouselbox.diamond-strip[data-layout="feature"] .dg-feature__name .verifiedimg { position: static; display: block; flex: 0 0 auto; width: 22px; height: 22px; margin: 0; } #carouselbox.diamond-strip[data-layout="feature"] .dg-feature__line { font: 400 15px/20px "S\00F6hne", sans-serif; color: rgba(255, 255, 255, 0.8); } #carouselbox.diamond-strip[data-layout="feature"] .dg-feature__line .seller_txt { font-size: 15px !important; } #carouselbox.diamond-strip[data-layout="feature"] .dg-feature__line .seller_online-container { justify-content: flex-start; } /* rows: two fixed rows of three, no scrolling, no per-row arrows */ #carouselbox.diamond-strip[data-layout="feature"] .dg-page .dgrows { grid-column: 3; display: flex; flex-direction: column; gap: 30px; margin: 0; min-width: 0; } #carouselbox.diamond-strip[data-layout="feature"] .dg-page .dgrows[hidden] { display: none; } #carouselbox.diamond-strip[data-layout="feature"] .dg-page .dgrow .dgtrack { overflow: visible; scroll-snap-type: none; cursor: default; } #carouselbox.diamond-strip[data-layout="feature"] .dg-page .dgrow .dgtrack > li { width: calc((100% - 90px) / 3) !important; height: auto !important; padding-top: 0 !important; padding-bottom: 0 !important; scroll-snap-align: none; } #carouselbox.diamond-strip[data-layout="feature"] .dg-page .dg-arrow { display: none !important; } /* an empty row keeps a slot exactly as tall as a filled one: one card's image box + the 33px name block */ #carouselbox.diamond-strip[data-layout="feature"] .dg-page .dgrow.dg-empty .dgtrack::before { content: ""; display: block; flex: 0 0 auto; width: calc((100% - 90px) / 3); margin: 0 15px 33px; aspect-ratio: 216 / 220; } /* cards: 216x220 image at 1230 and proportional below, single-line name 12px under it */ #carouselbox.diamond-strip[data-layout="feature"] .dg-page .diamond_box img { height: auto; aspect-ratio: 216 / 220; } #carouselbox.diamond-strip[data-layout="feature"] .dg-page .dgtrack > li > a > img { display: block; width: 100%; height: auto; aspect-ratio: 216 / 220; object-fit: contain; background: #111; border-radius: 20px; } #carouselbox.diamond-strip[data-layout="feature"] .dg-page .dgtrack > li .cleaner { display: none; } #carouselbox.diamond-strip[data-layout="feature"] .dg-page .diamondname { margin: 0; padding-top: 12px; line-height: 21px; font-size: 18px; } #carouselbox.diamond-strip[data-layout="feature"] .dg-page .diamondnamebox { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* paging arrows inside the intro card (built by the script, desktop only) */ #carouselbox.diamond-strip[data-layout="feature"] .diamond-intro-card .dg-page-nav { display: flex; gap: 10px; margin-left: auto; flex: 0 0 auto; } #carouselbox.diamond-strip[data-layout="feature"] .dg-page-btn { width: 40px; height: 40px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.04); color: #f5f5f7; display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; } #carouselbox.diamond-strip[data-layout="feature"] .dg-page-btn:hover { background: rgba(255, 255, 255, 0.1); } #carouselbox.diamond-strip[data-layout="feature"] .dg-page-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } #carouselbox.diamond-strip[data-layout="feature"] .dg-page-btn svg { display: block; } #carouselbox.diamond-strip[data-layout="feature"] .dg-page-btn svg[hidden] { display: none; } /* play / pause glyph swap */ }