/* * Product page — the values of minimal-step/design (README → components.md § Buttons, § Controls, § Shop; * spacing.md; look.md). Enqueued on product pages only (functions.php), safelisted whole for WP Rocket RUCSS * (inc/rucss-safelist.php: open accordions, the open size window and chosen swatches are states a tap makes). * Values that live with their own module stay there: price (style.css, inc/variation-price.php), colour and size * choice (inc/swatches-overrides.php), loyalty box (inc/loyalty-pdp-promo.php), gauges * (css/woocommerce/product-gauges.css), the product card on the related rows (css/product-card.css). The notice look * the size note, the loyalty box, the delivery notes and the gauges box share is set once, here („Notices”). */ /* ---- The page ---------------------------------------------------------------------------------------------- */ /* White on a phone (Mariusz 2026-11-02 preferred it there), the grey band from 768 so the white product photos read as tiles on a computer (on white they had no edge). Secondary lines are #525252 at every width (muted #737373 fails contrast on the band). 48 under the product at every width — the related rows follow it on the same grey from 768, and the first drops its top padding (spacing.md: two sections on one background); no page-wide :has() to tell whether they follow (it re-checks the whole page on every change, t-2021). */ .single-product main { background: #ffffff; } .ms-pdp-main { padding-bottom: 48px; } @media (min-width: 768px) { .single-product main { background: #f5f5f5; } .single-product :not(.ms-related-carousel) + .ms-related-carousel { padding-top: 0; } } /* One column up to 1023 px — the phone layout, photo slider on top (two columns at 768 left a 275 px buy column); from 1024 (lg: a column is added) the photos take 4 of 7 columns and the summary 3, 32 apart. The container is 1024 wide up to 1279, and at 3 : 2 the summary's panel held 330 px: five colour photos (352) wrapped 4 + 1, the discount badge fell under the price-history line and the size note ran to three lines. At 4 : 3 it holds 363. */ .ms-pdp-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; } @media (min-width: 1024px) { .ms-pdp-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 32px; } .ms-pdp-grid__media { grid-column: span 4 / span 4; } .ms-pdp-grid > .summary { grid-column: span 3 / span 3; } } /* The gallery follows the same split: the phone slider up to 1023, the photo grid from 1024 (single-product/product-thumbnails.php; the photos' `sizes` switch at 1024 too). */ @media (min-width: 768px) and (max-width: 1023.98px) { .single-product .images-desktop { display: none; } .single-product .ms-gallery-phone { display: block; } } /* Breadcrumbs 14 muted, each a 44 px tap row (Pattern H), centred between the header and the page: the row's 12 plus 4 makes 16 above the line and 16 below it to the photo / the title block (R4; Mariusz 2026-11-09: „whats up with the breadcrumb spacing … shouldnt it be centered” — it was 12 above, 28 below). */ .single-product .ms-breadcrumb { margin: 4px 0; padding: 0; font-size: 14px; line-height: 20px; color: #525252; } .single-product .ms-breadcrumb a { min-height: 44px; color: #525252; } .single-product .ms-breadcrumb .last { color: #525252; } /* ---- Gallery ----------------------------------------------------------------------------------------------- */ /* Computer: the photos in two columns, 8 apart (R5), square. */ .single-product .images-desktop { gap: 8px; } .single-product .images-desktop img { aspect-ratio: 1 / 1; object-fit: cover; } /* Phone slider: the dots sit over the bottom of the photo, as on the live shop (Mariusz 2026-11-08: „they have to go over it”) — one 44 tall row that is their tap area, each dot an 8 px square in a 16 px slot (8 apart, R5), 8 above the photo's bottom edge, in the photo shade: 30 %, 70 % for the photo shown (Mariusz 2026-11-08: lighter, more transparent, closer to the lower edge). Over the photo, not in the flow: the gallery is as tall before the slider script draws the dots as after, so a first colour switch moves nothing. The sale / „Nowość” badge sits 12 from the first photo's corner, as on cards (style.css .onsale). */ .woocommerce.single-product div.product div.images { margin-bottom: 0 !important; } .single-product .ms-mobile-color-group .splide__pagination { position: absolute; left: 0; right: 0; bottom: 0; height: 44px; padding: 0; } .single-product .ms-mobile-color-group .splide__pagination li { align-items: stretch; height: 44px; } .single-product .ms-mobile-color-group .splide__pagination__page { display: flex; align-items: flex-end; justify-content: center; width: 100%; height: 44px; margin: 0; padding: 0 0 8px; aspect-ratio: auto; border-radius: 0; background: transparent; opacity: 1; transform: none; } .single-product .ms-mobile-color-group .splide__pagination__page::before { content: ""; width: 8px; max-width: 100%; aspect-ratio: 1 / 1; background: var(--brand-shade, rgb(0 0 0 / 0.3)); } .single-product .ms-mobile-color-group .splide__pagination__page.is-active::before { background: var(--brand-shade-strong, rgb(0 0 0 / 0.7)); } /* Full-screen photo viewer: the 70 % shade behind the photo on a computer; a 44 × 44 close button. */ .single-product #flineo-gallery { background: rgb(0 0 0 / 0.7); } .single-product #flineo-gallery-close { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; } /* ---- Title block (components.md § Shop „Product page title block”) ----------------------------------------- */ /* Brand line 16 / 24 #404040, the rating stars at its right → H1 right under it → 16 → price row (Mariusz 2026-11-09: the stars and brand sat „WAYY to close to the gallery”, the brand „too small and too far from the model name” — it was 14 / 20 with 4 above the H1; the live shop's 16 / 24 with the H1 directly under). On a phone 16 under the photos; from 768 the summary is its own padded panel, whose 24 is the gap. The brand link is a 44 px tap row (Pattern H) that overlaps the space around the line instead of moving it. */ .single-product .ms-pdp-brand { min-height: 24px; font-size: 16px; line-height: 24px; color: #404040; } .single-product .ms-pdp-brand__name a { display: inline-flex; align-items: center; min-height: 44px; margin: -10px 0; /* design-ok: the 44 tap row centred on the 24 line */ color: #404040; } .woocommerce div.product .ms-pdp-title { margin: 0; color: #171717; } @media (max-width: 767.98px) { .single-product .ms-pdp-brand { margin-top: 16px; } } .single-product .ms-price-row { margin-top: 16px; } /* The price and the old price beside it, 8 apart on one baseline (R1); 600, never WooCommerce's 700. */ .woocommerce div.product .product-price span.price { display: inline-flex !important; flex-wrap: wrap; align-items: baseline; column-gap: 8px; font-size: 24px; line-height: 32px; } .woocommerce div.product .product-price span.price ins { font-weight: 600; } /* The old price is muted #737373 at full strength (style.css): WooCommerce's stylesheet fades every `div.product span.price del` to 0.7 (2.7 : 1 on a phone), so its opacity is set at that rule's own reach. It sits on white at every width (the page on a phone, the summary panel from 768). */ .woocommerce div.product .product-price span.price del { opacity: 1; } /* ---- Buy block (components.md § Shop „Product page buy block”) --------------------------------------------- */ /* Title block → 32 / 48 → the choices (R8: one group to the next inside the section). */ /* Title block → the colour and size choice: 24 on every width — the choices belong to the product above them (components.md „Product page title block”; 32 / 48 left an empty band, Mariusz 2026-11-02). */ .single-product form.cart.variations_form { margin: 24px 0 0 !important; } /* Each choice: its label row → 4 → the options (R2); colour → 16 → size (R4). */ .single-product .variations tbody tr { margin-top: 0 !important; margin-bottom: 0 !important; } .single-product .variations tbody tr + tr { margin-top: 16px !important; } .single-product .variations th.label { padding: 0 0 4px !important; font-size: 16px; line-height: 24px; color: #171717; } /* At WooCommerce's own reach (woocommerce.css sets this label 700), so its weight is the labels' 500 (look.md § Type). */ .woocommerce div.product form.cart .variations th.label label { font-weight: 500; color: #171717; } .single-product .variations th.label .vi-wpvs-label-selected { font-weight: 400; color: #404040; } .single-product .variations td.value, .single-product .variations tfoot td { padding: 0 !important; } .single-product .woocommerce div.product form.cart .variations, .woocommerce.single-product div.product form.cart .variations { margin-bottom: 0 !important; } /* The returns note under the sizes (inc/sizing-hint.php) is a notice („Notices” below), 16 below the sizes (R4). Where the foot-scan size finder shows, its stylesheet joins the note to the finder's box. */ /* Size choice → 24 → the add-to-cart row (the black button, the heart 48 × 48 beside it, 8 apart). */ .single-product .single_variation_wrap { padding-top: 24px !important; } .single-product .woocommerce-variation:not(:empty) { margin-bottom: 8px; font-size: 14px; line-height: 20px; } /* The black button (components.md § Buttons): 48 tall, label 14 / 500 uppercase 0.1 em, one line, centred, square; ink fill and border; hover opacity 0.85. It fills the row beside the heart, so its sides only set the least gutter around the label: 16, not the button rule's 24, so „POWIADOM O DOSTĘPNOŚCI” (226 px wide) stays on one line on a 360 px phone (t-753); below ~346 px it grows a line rather than cut it. Overrides the site-wide `.button` (50 tall, 15 / 400) for this button only. */ .single-product form.cart .single_add_to_cart_button.button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; height: auto !important; padding: 12px 16px !important; border: 1px solid #171717 !important; border-radius: 0 !important; background-color: #171717 !important; color: #ffffff !important; font-size: 14px !important; font-weight: 500 !important; line-height: 20px !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; text-align: center; transition: opacity .15s ease; } .single-product form.cart .single_add_to_cart_button.button:hover { background-color: #171717 !important; color: #ffffff !important; opacity: 0.85; } /* The quantity stepper (products sold more than one at a time, e.g. gift cards): the control border. */ .single-product .quantity-buttons, .single-product .quantity-buttons .qty-input { border-color: #525252; } /* ---- Notices (components.md „Notice / info box”) ------------------------------------------------------------ */ /* The size note, the loyalty box, the delivery notes and the gauges box are one component, drawn with lines (Mariusz's „B, lines”, 2026-11-05): no fill, no side padding — the summary column's full width, 16 above and below its content, set off from its neighbour by a 1 px line. A line sits only between two things: never two touching (the loyalty box → the notes share one), never beside an accordion's own line (the notes have none under them, the gauges none over them). The size note: size choice → 16 → line → 16 → note → 16 → line → 24 → the add-to-cart row; then 24 → line → loyalty → line → notes → 32 / 48 → the accordions (R8, .ms-pdp-acc--first). */ .single-product .ms-sizing-hint, .single-product .ms-loyalty-promo, .single-product .ms-pdp-notes, .single-product .ms-gauges { width: 100%; padding: 16px 0; border: 0; border-radius: 0; box-shadow: none; background: none; } .single-product .ms-sizing-hint { margin: 16px 0 0; border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; } .single-product .ms-pdp-notes { border-top: 1px solid #e5e5e5; } /* The loyalty box stands out on a warm tint of the gold (Mariusz 2026-11-08: „to stand out more, kinda like it does on prod”), as wide as the column like everything else in it (his pick over reaching into the gutter to keep the notes' icon column), padding 16; the notes under it need no line: add-to-cart → 24 → the box → 8 + 16 → the first note. */ .single-product .ms-loyalty-promo { padding: 16px; background: #f3ede4; } @media (max-width: 767.98px) { .single-product .ms-loyalty-promo { padding: 12px; } } .single-product form.cart ~ .ms-loyalty-promo ~ .ms-pdp-notes { border-top: 0; margin-top: 8px; } .single-product .ms-pdp-notes { padding-bottom: 0; } /* Each box's own style tag sits between it and the form, so these are sibling (~) rules, not adjacent (+) ones. */ .single-product form.cart ~ .ms-loyalty-promo, .single-product form.cart ~ .ms-pdp-notes { margin-top: 24px; } /* The gauges open „Szczegóły produktu”, 8 under its question (FAQ row): the line only under them, before the text. */ .single-product .ms-pdp-acc__a .ms-gauges { padding-top: 0; } .single-product .ms-pdp-acc__a .ms-gauges:not(:last-child) { border-bottom: 1px solid #e5e5e5; } /* The page is grey from 768, where a 1 px #e5e5e5 line all but vanishes, so there the summary column is a white panel (padding 24, box padding computer) and the lines sit inside it. On the white phone page: no panel. The panel scrolls with the page: it used to stick beside the photos, taller than the screen, and pushed itself up or down whenever „Szczegóły produktu” opened or closed (Mariusz 2026-11-09: „do we even need it to be sticky”, „yeah, drop it”). */ @media (min-width: 768px) { .single-product .entry-summary > .ms-pdp-summary { padding: 24px; background: #ffffff; } } /* ---- Delivery and returns notes (single-product/meta.php) -------------------------------------------------- */ /* A notice („Notices” above); notes 14, 8 apart; each note a 44 px tap row: icon → 8 → label (R1); the green badge 4 under its label (R2) at every width — beside it, some badges fit the column and some wrap under, so the rows stop matching; the ⓘ a 44 × 44 tap area at the right. */ .ms-pdp-notes { display: grid; gap: 8px; } .ms-pdp-note { position: relative; } .ms-pdp-note__row { display: flex; align-items: center; gap: 8px; min-height: 44px; padding-right: 48px; } .ms-pdp-note__icon { display: flex; flex: 0 0 24px; justify-content: center; color: #404040; } .ms-pdp-note__text { display: flex; flex: 1 1 auto; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; font-size: 14px; line-height: 20px; color: #171717; } .ms-pdp-note__info { position: absolute; top: 50%; right: 0; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; transform: translateY(-50%); color: #404040; } /* The note's badge (components.md „Badge”): 24 tall, square, sides 8, 12 / 600, no capitals; green = available (look.md Success), ink = not in the stores (js/notify-availability.js). */ /* inline-block, not flex: the badge's text runs into a child span („U Ciebie we wtorek…”), and a flex box would drop the space between them. One line is 24 tall (4 + 16 + 4); a text too long for the column wraps inside the badge instead of running out of the box. */ .ms-pdp-note__badge { display: inline-block; max-width: 100%; min-height: 24px; padding: 4px 8px; background: #2e7d32; color: #ffffff; font-size: 12px; font-weight: 600; line-height: 16px; text-decoration: none; overflow-wrap: anywhere; } .ms-pdp-note__badge--no { background: #171717; } /* The one tappable badge („Tak, zobacz gdzie”, js/notify-availability.js re-renders it): the link itself is a 44 px tall row (Pattern H) with the 24 px green drawn in its middle; the extra height overlaps the space around it instead of moving the note. */ a.ms-pdp-note__badge { display: inline-flex; align-items: center; min-height: 44px; margin: -10px 0; padding: 0 8px; background: linear-gradient(#2e7d32, #2e7d32) center / 100% 24px no-repeat; white-space: nowrap; } /* design-ok: -10 = (44 tap row − 24 badge) / 2, the tap area overlapping its surroundings, not a gap */ a.ms-pdp-note__badge:hover { color: #ffffff; opacity: 0.85; } /* A note's explanation: a tooltip (spacing.md: 12 / 16 padding) in solid ink, square, 14 / 20 white, under the row it explains so it never covers that row's text. */ .ms-pdp-tooltip-wrap { position: absolute; top: 100%; left: 0; right: 0; z-index: 20; } .ms-pdp-tooltip { padding: 12px 16px; background: #171717; color: #ffffff; font-size: 14px; line-height: 20px; } /* ---- Accordions (components.md „FAQ / accordion”) ------------------------------------------------------------ */ /* Notes → 32 / 48 → the rows (R8). Each row: question 16 / 500 ink, 16 above and below, a line under it, chevron 24 at the right; the answer 8 below the question, 16 below the answer. */ .ms-pdp-acc { border-bottom: 1px solid #e5e5e5; } .ms-pdp-acc--first { margin-top: 32px; border-top: 1px solid #e5e5e5; } @media (min-width: 768px) { .ms-pdp-acc--first { margin-top: 48px; } } /* The header is a button (keyboard): no button look of its own */ .ms-pdp-acc__q { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 56px; padding: 16px 0; border: 0; border-radius: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; } .ms-pdp-acc__title { display: block; font-size: 16px; line-height: 24px; font-weight: 500; color: #171717; } .ms-pdp-acc .toggle-icon { display: flex; flex: none; width: 24px; height: 24px; color: #171717; } .ms-pdp-acc .toggle-icon svg { width: 24px; height: 24px; transition: transform .15s ease; } .ms-pdp-acc__a { margin-top: -8px; padding: 0 0 16px; } /* The Kolor / Rozmiar labels: 16 / 24 (WooCommerce's own `.variations th` sets 2em). */ .woocommerce div.product form.cart .variations th.label { line-height: 24px; } /* Open / turned states (single-product/meta.php's script): the -md classes open „Szczegóły produktu” from the first paint on a computer. */ .tab-content.ms-tab-open { display: block !important; height: auto !important; opacity: 1 !important; } .toggle-icon.ms-rotated svg { transform: rotate(180deg); } @media (min-width: 768px) { .tab-content.ms-tab-open-md { display: block !important; } .toggle-icon.ms-rotated-md svg { transform: rotate(180deg); } } /* The answers are running text (components.md „Running text”): body 16 / 24 #404040, paragraphs 16 apart, a list's items 8 apart and 16 from the paragraphs around it, indented 24; bold 600; links ink, underlined 3 px under. */ .ms-pdp-acc__a.prose { max-width: none; font-size: 16px; line-height: 24px; color: #404040; } /* Lines at most 672 wide (the one-column 768–1023 layout is wider); the gauges notice keeps the column's width. */ .ms-pdp-acc__a.prose > :not(.ms-gauges) { max-width: 672px; } .ms-pdp-acc__a.prose :where(p, ul, ol, li) { font-size: 16px; line-height: 24px; color: #404040; } .ms-pdp-acc__a.prose :where(li)::marker { color: #404040; } .ms-pdp-acc__a.prose :where(p) { margin: 0 0 16px; } .ms-pdp-acc__a.prose :where(ul, ol) { margin: 16px 0; padding-left: 24px; } .ms-pdp-acc__a.prose :where(li) { margin: 0; padding-left: 0; } .ms-pdp-acc__a.prose :where(li + li) { margin-top: 8px; } .ms-pdp-acc__a.prose :where(strong, b) { font-weight: 600; color: #171717; } .ms-pdp-acc__a.prose :where(a) { color: var(--brand-sale, #BF360C); text-decoration: underline; text-underline-offset: 3px; } .ms-pdp-acc__a.prose > :last-child, .ms-pdp-acc__a.prose > div:last-child > :last-child { margin-bottom: 0; } /* Product safety („Bezpieczeństwo produktu”, under „Zwroty”) and the reviews („Opinie klientów”) are the last rows of the same group (single-product/meta.php), same row spec, sharing the line above them. The stars beside the reviews question are TrustMate's widget (not restyled). */ .ms-reviews-collapse, .ms-product-description-collapse { margin: 0; border-bottom: 1px solid #e5e5e5; } .woocommerce div.product div.summary { margin-bottom: 0; } .ms-reviews-collapse > summary, .ms-product-description-collapse > summary { display: flex; align-items: center; gap: 16px; min-height: 56px; padding: 16px 0; font-size: 16px; line-height: 24px; font-weight: 500; color: #171717; cursor: pointer; list-style: none; user-select: none; } .ms-reviews-collapse > summary::-webkit-details-marker, .ms-product-description-collapse > summary::-webkit-details-marker { display: none; } .ms-reviews-collapse > div, .ms-product-description-collapse > div { margin-top: -8px; padding: 0 0 16px; } .ms-product-description-collapse .prose { max-width: 672px; font-size: 16px; line-height: 24px; color: #404040; text-align: left; } .ms-product-description-collapse .prose p { margin: 0; } .ms-collapse-icon { flex-shrink: 0; width: 24px; height: 24px; margin-left: auto; color: #171717; transition: transform .2s; } .ms-reviews-collapse[open] > summary .ms-collapse-icon, .ms-product-description-collapse[open] > summary .ms-collapse-icon { transform: rotate(180deg); } .ms-reviews-stars-mirror { display: inline-flex; align-items: center; height: 24px; } .ms-reviews-stars-mirror:empty { display: none; } .ms-reviews-collapse > summary .ms-reviews-stars-mirror:not(:empty) { margin-left: auto; } .ms-reviews-collapse > summary .ms-reviews-stars-mirror:not(:empty) ~ .ms-collapse-icon { margin-left: 0; } /* The rating number TrustMate draws 24 / 600 beside the 16 / 500 question: the row's own label size and ink */ .ms-reviews-stars-mirror .tm-grade-label__text { font-size: 16px !important; line-height: 24px !important; font-weight: 500 !important; color: #171717 !important; } /* ---- Size window (#modal-sizes, woocommerce/content-single-product.php) ------------------------------------- */ /* components.md „Modal”: white, square, padding 24 / 32, the 70 % shade behind, the close button 44 × 44 in the top-right corner; the title a heading (600). The size table: header 600, every other row on the band. */ #modal-sizes { background: rgb(0 0 0 / 0.7) !important; } #modal-sizes > div { border-radius: 0 !important; padding: 24px !important; } @media (min-width: 768px) { #modal-sizes > div { padding: 32px !important; } } #modal-sizes h2 { font-weight: 600 !important; color: #171717; } #modal-sizes .close-modal-sizes { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; margin: -12px -12px 0 0; } #modal-sizes .close-modal-sizes svg { width: 24px; height: 24px; stroke: #171717; } #modal-sizes ul .font-light { font-weight: 400; } #modal-sizes tbody tr:nth-child(odd) { background-color: #f5f5f5; } /* ---- Related rows (woocommerce/single-product/related.php) ---------------------------------------------------- */ /* A section on the grey band that opens with its heading (components.md „Section heading”, no label): 32 / 48 above the heading, 48 / 64 at its foot (R9); heading 24 / 32 (30 / 36 from 768) 600 → 24 / 32 → the cards (R7), 16 / 24 apart (R6), each the band's product card (css/product-card.css). Two rows in a row share the band: the second drops its top padding and the first ends 32 / 48, so the second heading sits as far from the row above as every other heading (spacing.md). From 768 the product above is on the band too: it ends 48 and the first row starts at 0. */ .ms-related-carousel { margin: 0; padding: 32px 0 48px; background: #f5f5f5; border: 0; } .ms-related-carousel:has(+ .ms-related-carousel) { padding-bottom: 32px; } @media (min-width: 768px) { .ms-related-carousel { padding: 48px 0 64px; } .ms-related-carousel:has(+ .ms-related-carousel) { padding-bottom: 48px; } } .ms-related-carousel + .ms-related-carousel { padding-top: 0; } .ms-related-title { margin: 0 0 24px; text-align: center; color: #171717; font-size: 24px; line-height: 32px; font-weight: 600; } @media (min-width: 768px) { .ms-related-title { margin-bottom: 32px; font-size: 30px; line-height: 36px; } } .ms-related-carousel .splide, .ms-related-carousel .splide__track, .ms-related-carousel .splide__list { margin: 0; border: 0; } .ms-related-carousel .splide__list { padding-top: 0 !important; padding-bottom: 0 !important; } .ms-related-carousel .splide__slide { display: flex; margin: 0; border: 0; background: transparent; } /* The carousel's arrows: 44 × 44 white squares with an ink chevron, on the photos' middle line (half a card's width down — the carousel is a size container, so the card width is known: 2 cards 16 apart on a phone, 3 then 4 cards 24 apart from 768 / 1024), never over a card's text. */ .ms-related-carousel .splide { container-type: inline-size; } .ms-related-carousel .splide__arrow { top: calc((100cqw - 16px) / 4); width: 44px; height: 44px; border-radius: 0; background: #ffffff; opacity: 1; box-shadow: none; } @media (min-width: 768px) { .ms-related-carousel .splide__arrow { top: calc((100cqw - 48px) / 6); } } @media (min-width: 1024px) { .ms-related-carousel .splide__arrow { top: calc((100cqw - 72px) / 8); } } /* design-ok: 72 = three 24 gaps, not a spacing value */ .ms-related-carousel .splide__arrow--prev { left: 0; } .ms-related-carousel .splide__arrow--next { right: 0; } .ms-related-carousel .splide__arrow svg { width: 16px; height: 16px; fill: #171717; } .ms-related-carousel .splide__arrow:hover:not(:disabled) svg { fill: #171717; } .ms-related-carousel .splide__arrow:hover:not(:disabled) { opacity: 0.85; } .ms-related-carousel .splide__arrow:focus-visible, .ms-related-carousel .splide.is-focus-in .splide__arrow:focus { outline: 2px solid #171717; outline-offset: 2px; }