/* Depozit Policarbonat - product page styles Extracted verbatim from pages/product_details.html.twig. Do not reformat: order and specificity must stay identical. */ /* ---- dp-pdp-v115-styles ---- */ /* ============================================================================ PDP — PRODUCT DETAILS · SINGLE SOURCE OF TRUTH Scope: .page--product-details only (product summary, gallery, support row). Presents MerchantPro native data. Does NOT touch variants, price logic, stock, quantity, add-to-cart, wishlist, gallery init, tracking, URLs, canonical or JSON-LD. !important is used only where theme.scss / product-summary.css / forms.css native rules would otherwise override these selectors. ============================================================================ */ /* ---------------------------------------------------------------- 1. TOKENS */ /* ----------------------------------------------------------------- 2. SHELL */ html body .page--product-details .product-summary.dp-pdp-clean-layout > .product-summary__images, html body .page--product-details .product-summary.dp-pdp-clean-layout > .product-summary__details, /* Gallery column: thin frame, no elevation (no "card" stacking). */ /* Details column: a single panel, everything inside stays flat. */ /* --------------------------------------------------------------- 3. GALLERY */ /* Main image: fills the column width. The native figure already carries aspect-ratio, so height follows the image and no side gap is left. */ html body .page--product-details .dp-pdp-clean-layout .product-summary__main-images, html body .page--product-details .dp-pdp-clean-layout .product-summary__main-images .splide, html body .page--product-details .dp-pdp-clean-layout .product-summary__main-images .splide__track { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; } html body .page--product-details .dp-pdp-clean-layout .product-summary__main-images .splide__list { display: flex; flex-wrap: nowrap; width: 100%; min-width: 0; } html body .page--product-details .dp-pdp-clean-layout .product-summary__main-images .splide__slide { display: flex; flex: 0 0 100%; width: 100%; max-width: 100%; min-width: 0; } /* Height cap on the media frame is a safety net for extreme aspect ratios only; normal images fill the column width. */ html body .page--product-details .dp-pdp-clean-layout .product-summary__main-image-wrapper, /* 360 view keeps the native widget contained. */ html body .page--product-details .dp-pdp-clean-layout .gallery-360 { width: 100%; max-width: 100%; min-width: 0; } /* Thumbnails — styled for both native orientations (config.product.thumbs_location: 'bottom' or 'left'). */ html body .page--product-details .dp-pdp-clean-layout .product-summary__thumbnails .splide, html body .page--product-details .dp-pdp-clean-layout .product-summary__thumbnails .splide__track, html body .page--product-details .dp-pdp-clean-layout .product-summary__thumbnails .splide__list, /* Horizontal rail (thumbs_location = bottom) */ html body .page--product-details .dp-pdp-clean-layout .product-summary__thumbnails:not(.product-summary__thumbnails--ttb) .splide, /* Vertical rail (thumbs_location = left) */ html body .page--product-details .dp-pdp-clean-layout .product-summary__thumbnails--ttb, html body .page--product-details .dp-pdp-clean-layout .product-summary__thumbnails--ttb .splide, /* Gallery column becomes two tracks when the native rail is vertical. */ /* Thumbnail framing + active state */ /* ----------------------------------------------------- 4. BRAND / TITLE / META */ /* The page keeps exactly one H1. */ html body .page--product-details .dp-pdp-clean-layout .product-summary__info--sku, html body .page--product-details .dp-pdp-clean-layout .product-summary__info--sku .info-label, /* ----------------------------------------------------------------- 5. PRICE */ /* The price band is a highlight inside the details panel, not a nested card. */ /* Dominant: the current gross price. */ /* Secondary prices: old / RRP / omnibus. */ html body .page--product-details .dp-pdp-clean-layout .premium-price-block .product-summary__info--old-price-gross, html body .page--product-details .dp-pdp-clean-layout .premium-price-block .product-summary__info--rrp-price-gross, html body .page--product-details .dp-pdp-clean-layout .premium-price-block .product-summary__info--label-rrp-price-gross, html body .page--product-details .dp-pdp-clean-layout .premium-price-block .product-summary__info--tax-price-gross, html body .page--product-details .dp-pdp-clean-layout .premium-price-block .product-summary__info--discount-expiration, html body .page--product-details .dp-pdp-clean-layout .premium-price-block .product-summary__info--shipping, /* ----------------------------------------------------------- 6. CONFIGURATOR */ /* Styling only. Input names, values, ids and data-on-change are untouched. */ /* Was a
; now a real section heading (single instance per configurator). */ /* The selected value never appears in the heading (JS strips it too). */ /* Selected state is unambiguous. */ html body .page--product-details .dp-pdp-clean-layout .variant-attribute__value--selected label, /* Unavailable options are visually distinct from available ones. */ /* Keyboard focus stays visible on the real control. */ /* -------------------------------------------------------- 7. STOCK / QTY */ html body .page--product-details .dp-pdp-clean-layout .dp-stock-zone, html body .page--product-details .dp-pdp-clean-layout .dp-qty-zone, html body .page--product-details .dp-pdp-clean-layout .dp-purchase-quantity, html body .page--product-details .dp-pdp-clean-layout .product-summary__info--quantity { width: 100%; min-width: 0; } html body .page--product-details .dp-pdp-clean-layout .product-summary__info--limited, html body .page--product-details .dp-pdp-clean-layout .product-summary__info--unavailable, /* ------------------------------------------------------------ 8. ACTIONS */ html body .page--product-details .dp-pdp-clean-layout .product-action--add-to-cart, html body .page--product-details .dp-pdp-clean-layout .product-action--price-on-request, html body .page--product-details .dp-pdp-clean-layout .product-action--customize, html body .page--product-details .dp-pdp-clean-layout .product-action--reservation, html body .page--product-details .dp-pdp-clean-layout .premium-whatsapp-action, /* Primary CTA — the dominant action of the right column. */ html body .page--product-details .dp-pdp-clean-layout .product-action--add-to-cart .btn, html body .page--product-details .dp-pdp-clean-layout .product-action--price-on-request .btn, html body .page--product-details .dp-pdp-clean-layout .product-action--customize .btn, html body .page--product-details .dp-pdp-clean-layout .product-action--reservation .btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 56px; padding: 12px 20px; border: 1px solid var(--pdp-blue-dark); border-radius: 12px; background: linear-gradient(145deg, var(--pdp-blue), var(--pdp-blue-dark)); color: #fff; font-size: 15px; font-weight: 850; letter-spacing: .01em; text-align: center; text-decoration: none; cursor: pointer; transition: filter .14s ease, transform .14s ease; } html body .page--product-details .dp-pdp-clean-layout .product-action--add-to-cart .btn:hover, html body .page--product-details .dp-pdp-clean-layout .product-action--price-on-request .btn:hover, html body .page--product-details .dp-pdp-clean-layout .product-action--customize .btn:hover, html body .page--product-details .dp-pdp-clean-layout .product-action--reservation .btn:hover { filter: brightness(1.06); } html body .page--product-details .dp-pdp-clean-layout .product-action--add-to-cart .btn:active, html body .page--product-details .dp-pdp-clean-layout .product-action--price-on-request .btn:active { transform: translateY(1px); } /* Secondary helper action. */ /* ------------------------------------------------------ 9. TRUST STRIP */ /* One framed strip with internal dividers instead of four nested cards. */ /* ------------------------------------------------- 10. PURCHASE SUPPORT */ /* One compact block, left column, under the gallery. Reuses existing site copy only. No inner cards, no elevation. */ /* --------------------------------------- 11. REMAINING INFO BLOCKS */ /* MerchantPro site blocks and promotion blocks keep native markup; only their rhythm inside the panel is normalized. */ html body .page--product-details .dp-pdp-clean-layout .dp-pdp-clean-after-name { margin: 0 0 12px; } html body .page--product-details .dp-pdp-clean-layout .product-summary__info--messages, html body .page--product-details .dp-pdp-clean-layout .product-summary__info--bogo, html body .page--product-details .dp-pdp-clean-layout .product-summary__info--free-shipping, html body .page--product-details .dp-pdp-clean-layout .product-summary__info--bundle, html body .page--product-details .dp-pdp-clean-layout .product-summary__info--gift, html body .page--product-details .dp-pdp-clean-layout .product-summary__info--bulk, html body .page--product-details .dp-pdp-clean-layout .product-summary__info--user-fields, html body .page--product-details .dp-pdp-clean-layout .product-summary__info--gift-card, html body .page--product-details .dp-pdp-clean-layout .product-summary__info--subscriptions, html body .page--product-details .dp-pdp-clean-layout .product-summary__info--variants, html body .page--product-details .dp-pdp-clean-layout .product-summary__info--sellers, html body .page--product-details .dp-pdp-clean-layout .product-summary__info--logged-in, html body .page--product-details .dp-pdp-clean-layout .product-summary__info--discontinued, html body .page--product-details .dp-pdp-clean-layout .product-summary__info--hidden { margin: 0 0 12px; font-size: 12.5px; line-height: 1.5; } /* ============================================================ RESPONSIVE */ /* ------------------------------------------- 12. DESKTOP >= 1025px */ @media (min-width: 1025px) { /* Purchase-support block must start right below the gallery. .product-summary__details spans both rows; when it is taller than gallery + support, CSS Grid has to place the excess somewhere across the two rows, and that is what created the hole between the gallery and the support block. Measured in Chrome on the real stylesheets: max-content auto -> the whole excess lands in ROW 1 (1366px: row1 983.8px vs 568.4px gallery -> 439px hole) max-content 1fr -> the whole excess lands in ROW 2 (1366px: row1 568.4px, row2 581.1px -> 24px gap, equal to the grid gap, and the leftover height sits below the support block where it is empty page background instead of a hole in the column). Row 2 is therefore `1fr`; row 1 stays exactly the gallery height. */ /* Vertical size of the gallery media canvas. The left column is (container - 24px gap) x 1/1.86, so the canvas is derived from the real column width instead of a fixed magic number: 1366px viewport -> 700px column -> 546px canvas 1440px viewport -> 740px column -> 605px canvas (block 13) 1920px viewport -> 740px column -> 680px canvas (block 13) The 78vh cap only protects short screens (e.g. 1366x768 laptops). */ /* Why the gallery was a thin strip: snippets/product/images.html.twig writes an inline `aspect-ratio` (medium-image ratio) on every gallery
and the image itself is rendered with `height: auto`, so the media frame could only ever be as tall as (column width / image ratio) - measured in Chrome on the real stylesheets at 1366px: 154.7px tall for a 3.7:1 photo. The frame therefore gets a canvas height (minimum, not fixed) and the photo is centred inside it. The inline ratio is left in place, so an already-taller portrait photo is never shrunk. */ /* width:100% + height:auto keeps the photo at its own ratio; the flex frame above centres it in the canvas: never stretched, never cropped, never overflowing. The max-height is the same safety cap the theme already intends for extreme aspect ratios, so a very tall photo can never blow the column up; object-fit keeps it letterboxed - not distorted - when that cap is reached. */ } /* --------------------------------- 13. LARGE DESKTOP >= 1440px */ @media (min-width: 1440px) { } /* ------------------------------------------ 14. TABLET 768 - 1024px */ @media (min-width: 768px) and (max-width: 1024px) { } /* ---------------------------------------------- 15. MOBILE <= 767px */ @media (max-width: 767px) { html body .page--product-details .dp-pdp-clean-layout .product-summary__main-image-wrapper figure, /* Horizontal thumbnail rail */ /* MOBILE GALLERY — visual reinterpretation of the native vertical rail. MerchantPro markup stays untouched (config.product.thumbs_location is still 'left': same thumbnails, same Splide instance, same data-slider / data-fancybox / data-splide-lazy attributes, same active state); only the <=767px presentation changes: full-width main image, then a horizontal scrollable thumbnail strip. */ /* The 72px vertical rail becomes a horizontal, scrollable strip. The native theme hides this rail below 768px (product-summary.css: @media (max-width:767.98px) .product-summary__thumbnails{display:none}), so mobile gets the thumbnails back, at the bottom, as a strip. */ html body .page--product-details .dp-pdp-clean-layout .product-summary__thumbnails--ttb, html body .page--product-details .dp-pdp-clean-layout .product-summary__thumbnails--ttb .splide, /* The native vertical arrows cannot drive the reinterpreted strip (it scrolls horizontally instead). */ html body .page--product-details .dp-pdp-clean-layout .product-action--add-to-cart .btn, html body .page--product-details .dp-pdp-clean-layout .product-action--price-on-request .btn, html body .page--product-details .dp-pdp-clean-layout .product-action--customize .btn, html body .page--product-details .dp-pdp-clean-layout .product-action--reservation .btn { min-height: 52px; font-size: 14.5px; } } /* ------------------------------------------------ 16. NARROW <= 390px */ @media (max-width: 390px) { } /* ------------------------------------------------ 17. NARROW <= 320px */ @media (max-width: 320px) { } /* ------------------------------------------------- 18. ACCESSIBILITY */ @media (hover: hover) and (pointer: fine) { } html body .page--product-details .dp-pdp-clean-layout .dp-pdp-clean-wishlist:focus-visible, html body .page--product-details .dp-pdp-clean-layout .product-action--add-to-cart .btn:focus-visible, html body .page--product-details .dp-pdp-clean-layout .product-action--price-on-request .btn:focus-visible, html body .page--product-details .dp-pdp-clean-layout .premium-whatsapp-action a:focus-visible, html body .page--product-details .dp-pdp-clean-layout .product-action--add-to-comparer a:focus-visible, html body .page--product-details .dp-pdp-clean-layout .premium-help-phone:focus-visible { outline: 3px solid #245fae; outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { html body .page--product-details .dp-pdp-clean-layout .variant-attribute__value label, html body .page--product-details .dp-pdp-clean-layout .product-action--add-to-cart .btn, html body .page--product-details .dp-pdp-clean-layout .product-action--price-on-request .btn { transition: none; } html body .page--product-details .dp-pdp-clean-layout .product-action--add-to-cart .btn:active, html body .page--product-details .dp-pdp-clean-layout .product-action--price-on-request .btn:active { transform: none; } } /* ============================================================= PDP CONTENT / TABS — merged from tabs_content for single-source styling ============================================================= */ /* ================================================================ PDP CONTENT — CLEAN RESPONSIVE Scope: description/details/reviews/recommendations only. Native MerchantPro logic remains unchanged. ================================================================ */ /* Tab/scrollspy navigation — compact, clear active state */ html body .page--product-details .dp-product-content-clean .product-content__tabs .nav-link.active, /* Blocks */ /* Description: full-width media, readable text measure */ html body .page--product-details .dp-product-content-clean .dp-product-description__body > p, html body .page--product-details .dp-product-content-clean .dp-product-description__body > ul, html body .page--product-details .dp-product-content-clean .dp-product-description__body > ol, html body .page--product-details .dp-product-content-clean .dp-product-description__body > h3, html body .page--product-details .dp-product-content-clean .dp-product-description__body > h4, html body .page--product-details .dp-product-content-clean .dp-product-description__body > blockquote { max-width:var(--pc-measure); } html body .page--product-details .dp-product-content-clean .dp-product-description__body p { margin:0 0 12px; } html body .page--product-details .dp-product-content-clean .dp-product-description__body p:last-child { margin-bottom:0; } html body .page--product-details .dp-product-content-clean .dp-product-description__body ul, html body .page--product-details .dp-product-content-clean .dp-product-description__body ol { margin:10px 0 14px; padding-left:20px; } html body .page--product-details .dp-product-content-clean .dp-product-description__body li { margin:4px 0; } html body .page--product-details .dp-product-content-clean .dp-product-description__body h3, html body .page--product-details .dp-product-content-clean .dp-product-description__body h4 { margin:18px 0 8px; color:var(--pc-ink); font-size:15.5px; font-weight:700; } html body .page--product-details .dp-product-content-clean .dp-product-description__body img, html body .page--product-details .dp-product-content-clean .dp-product-description__body iframe, html body .page--product-details .dp-product-content-clean .dp-product-description__body table { max-width:100% !important; } html body .page--product-details .dp-product-content-clean .dp-product-description__body img { height:auto !important; } /* Up to three real technical highlights (MerchantPro product attributes), rendered right under the description. No invented values. */ /* Details: premium specification sheet — 2 columns, hairline separators, no zebra striping (native odd/even backgrounds are neutralised). */ html body .page--product-details .dp-product-content-clean .product-details, html body .page--product-details .dp-product-content-clean .product-attributes, html body .page--product-details .dp-product-content-clean .product-tags { width:100% !important; max-width:100% !important; min-width:0 !important; } html body .page--product-details .dp-product-content-clean .product-attributes { margin:0 !important; } html body .page--product-details .dp-product-content-clean .product-attributes__item, html body .page--product-details .dp-product-content-clean .product-tags { display:grid !important; grid-template-columns:minmax(150px,30%) minmax(0,1fr) !important; align-items:baseline; gap:6px 18px; width:100% !important; min-width:0 !important; margin:0 !important; padding:9px 2px !important; box-sizing:border-box !important; border-bottom:1px solid var(--pc-hairline); background-color:transparent !important; } html body .page--product-details .dp-product-content-clean .product-attributes__item:nth-child(odd), html body .page--product-details .dp-product-content-clean .product-attributes__item:nth-child(even), html body .page--product-details .dp-product-content-clean .product-attributes__item--odd, html body .page--product-details .dp-product-content-clean .product-attributes__item--even, html body .page--product-details .dp-product-content-clean .product-tags--invert { background-color:transparent !important; } html body .page--product-details .dp-product-content-clean .product-attributes__item:last-child, html body .page--product-details .dp-product-content-clean .product-tags:last-child { border-bottom:0; } html body .page--product-details .dp-product-content-clean .product-attributes__group { display:block; margin:0; padding:14px 2px 6px; border-bottom:1px solid var(--pc-line); color:var(--pc-blue); font-size:11.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; line-height:1.4; } html body .page--product-details .dp-product-content-clean .product-attributes__group:first-child { padding-top:0; } html body .page--product-details .dp-product-content-clean .product-attributes__label, html body .page--product-details .dp-product-content-clean .product-tags__name { color:var(--pc-muted); font-size:12px; font-weight:700; line-height:1.45; } html body .page--product-details .dp-product-content-clean .product-tags__name::after { content:none !important; } html body .page--product-details .dp-product-content-clean .product-attributes__value, html body .page--product-details .dp-product-content-clean .product-tags__values { min-width:0; color:var(--pc-ink); font-size:13.5px; line-height:1.5; overflow-wrap:break-word; } html body .page--product-details .dp-product-content-clean .product-attributes__value a, html body .page--product-details .dp-product-content-clean .product-tags__values a { color:var(--pc-blue) !important; font-weight:600; text-decoration:none; } html body .page--product-details .dp-product-content-clean .product-attributes__value a:hover, html body .page--product-details .dp-product-content-clean .product-tags__values a:hover { text-decoration:underline; } /* Tags: scannable chips in the value column */ html body .page--product-details .dp-product-content-clean .product-tags__values { display:flex !important; flex-wrap:wrap; align-items:center; gap:6px; } html body .page--product-details .dp-product-content-clean .product-tags__value { max-width:100% !important; margin:0 !important; padding:2px 9px !important; border:1px solid var(--pc-line); border-radius:999px; background:#fff !important; color:var(--pc-ink) !important; font-size:12px !important; font-weight:500; line-height:1.6; white-space:normal; } html body .page--product-details .dp-product-content-clean .product-tags__value:hover { border-color:#c7d8ea; background:#f7fafd !important; } /* Reviews */ html body .page--product-details .dp-product-content-clean .product-reviews { width:100% !important; max-width:100% !important; min-width:0 !important; } /* Recommendations / product slider containment */ html body .page--product-details .dp-product-content-clean .product-content__block--recommendations, html body .page--product-details .dp-product-content-clean .products-slider, html body .page--product-details .dp-product-content-clean .products-slider__items, html body .page--product-details .dp-product-content-clean .splide, html body .page--product-details .dp-product-content-clean .splide__track { width:100% !important; max-width:100% !important; min-width:0 !important; box-sizing:border-box !important; } html body .page--product-details .dp-product-content-clean .products-slider { overflow:visible !important; } html body .page--product-details .dp-product-content-clean .products-slider__items { overflow:hidden !important; } html body .page--product-details .dp-product-content-clean .splide__track { overflow:hidden !important; } html body .page--product-details .dp-product-content-clean .splide__list { min-width:0 !important; margin:0 !important; padding:0 !important; } html body .page--product-details .dp-product-content-clean .splide__slide { min-width:0 !important; box-sizing:border-box !important; } html body .page--product-details .dp-product-content-clean .products-slider img { max-width:100% !important; height:auto; } html body .page--product-details .dp-product-content-clean .splide__arrow { width:36px !important; height:36px !important; border:1px solid var(--pc-line) !important; border-radius:50% !important; background:#fff !important; box-shadow:0 2px 8px rgba(16,47,77,.08) !important; } /* Recommended products: uniform, compact cards (source and slider logic stay MerchantPro native; only presentation is normalised). */ html body .page--product-details .dp-product-content-clean .splide__list { align-items:stretch; } html body .page--product-details .dp-product-content-clean .splide__slide { height:auto; } html body .page--product-details .dp-product-content-clean .products-slider .slider-image__image { position:absolute !important; top:0 !important; left:0 !important; width:100% !important; height:100% !important; max-width:100% !important; max-height:100% !important; object-fit:contain !important; } html body .page--product-details .dp-product-content-clean .products-slider .product__name { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin:9px 0 6px !important; min-height:calc(2 * 1.45em); color:var(--pc-ink) !important; font-size:13.5px !important; font-weight:600; line-height:1.45; text-decoration:none; } html body .page--product-details .dp-product-content-clean .products-slider .product__name:hover { color:var(--pc-blue) !important; text-decoration:underline; } html body .page--product-details .dp-product-content-clean .products-slider .product__info--price-row { margin:0 0 2px !important; } html body .page--product-details .dp-product-content-clean .products-slider .product__info--price-gross { color:var(--pc-ink); font-size:15px; font-weight:700; line-height:1.3; } html body .page--product-details .dp-product-content-clean .products-slider .product__info--old-price-gross { color:var(--pc-muted); font-size:12px; font-weight:500; text-decoration:line-through; } html body .page--product-details .dp-product-content-clean .products-slider .product__info--price-net-row, html body .page--product-details .dp-product-content-clean .products-slider .product__info--price-rrp-gross-row, html body .page--product-details .dp-product-content-clean .products-slider .product__info--package-price-gross-row { color:var(--pc-muted); font-size:11.5px; } /* Smaller, discreet badges */ html body .page--product-details .dp-product-content-clean .products-slider [class*="__badges--"] > * { padding:2px 7px !important; border-radius:999px !important; font-size:10.5px !important; font-weight:700 !important; line-height:1.7 !important; box-shadow:none !important; } /* Discreet card CTA (rendered only for the PDP recommendations slider) */ html body .page--product-details .dp-product-content-clean .products-slider .product__cta { display:inline-flex; align-items:center; justify-content:center; gap:6px; width:100%; margin-top:8px; padding:7px 10px; border:1px solid #d7e4f2; border-radius:9px; background:#fff; color:var(--pc-blue) !important; font-size:14px; font-weight:700; line-height:1.3; text-decoration:none; box-sizing:border-box; transition:background-color .15s ease,border-color .15s ease; } html body .page--product-details .dp-product-content-clean .products-slider .product__cta:hover, html body .page--product-details .dp-product-content-clean .products-slider .product__cta:focus-visible { border-color:#bcd4ee; background:#eef5fd; } /* Prevent child content from creating page-level horizontal scrolling. */ html body .page--product-details .dp-product-content-clean *, html body .page--product-details .dp-product-content-clean *::before, html body .page--product-details .dp-product-content-clean *::after { box-sizing:border-box; } /* Tablet */ @media (max-width:1024px) { html body .page--product-details .dp-product-content-clean .product-attributes__item, html body .page--product-details .dp-product-content-clean .product-tags { grid-template-columns:minmax(132px,34%) minmax(0,1fr) !important; } } /* Mobile */ @media (max-width:767px) { html body .page--product-details .dp-product-content-clean .product-attributes__item, html body .page--product-details .dp-product-content-clean .product-tags { grid-template-columns:1fr !important; gap:3px; padding:9px 2px !important; } html body .page--product-details .dp-product-content-clean .product-attributes__group { padding-top:12px; } html body .page--product-details .dp-product-content-clean .products-slider .product__cta { min-height:46px; } } @media (prefers-reduced-motion: reduce) { html body .page--product-details .dp-product-content-clean .product-content__tabs .nav-link, html body .page--product-details .dp-product-content-clean .products-slider .product--slider, html body .page--product-details .dp-product-content-clean .products-slider .product__cta { transition:none; } } /* ============================================================================ 19. TARGET PDP PRESENTATION LAYER — one consolidated layer ---------------------------------------------------------------------------- This section replaces the incremental PDP layers that used to sit on top of the base shelf (the former sections numbered 20 through 26, one full pass each: 2382 lines, 1236 declarations, 1175 !important). Instead of overriding them a seventh time, the base rules of the components this layer owns are DELETED from the base block (see the build log), so there is exactly one owner per component and the cascade stays predictable. DOM composition implemented here: .dp-pdp-hero > .dp-pdp-hero__gallery (.product-summary__images) ~50% > .dp-pdp-hero__buybox (.product-summary__details) ~50% buy box order: title -> meta/rating -> price + stock -> variants -> quantity -> CTA row -> trust strip content zone: description (left) | real notes + support callout (right) Not touched: Splide, Fancybox, variant inputs/ids/data-on-change, add-to-cart form, quantity spinner logic, price/stock mirroring, JSON-LD, canonical, tracking, site tags. ============================================================================ */ /* ----------------------------------------------------------------- 19.1 TOKENS */ html body .page--product-details { --pdp-ink: #0b2858; --pdp-ink-soft: #33445c; --pdp-blue: #0564c9; --pdp-blue-dark: #04519f; --pdp-green: #0b6b41; --pdp-green-line: #0a9a52; --pdp-red: #e92b35; --pdp-gold: #f0a11b; --pdp-muted: #667b90; --pdp-line: #e6ecf3; --pdp-line-soft: #eef2f7; --pdp-soft: #f5f8fc; /* one container for the hero, the content zone and the sticky bar */ --pdp-container: clamp(1320px, 92vw, 1540px); --pdp-gutter: clamp(20px, 3.4vw, 48px); --pdp-col-gap: clamp(20px, 2.4vw, 36px); --pdp-row-gap: 16px; --pdp-hero-pad: 10px; --pdp-hero-radius: 12px; --pdp-card-radius: 8px; --pdp-ctl-height: 42px; /* variant / quantity controls */ --pdp-cta-height: 52px; /* the CTA row */ --pdp-page-bg: #fff; } @media (max-width: 767px) { html body .page--product-details { --pdp-row-gap: 14px; --pdp-hero-pad: 8px; --pdp-ctl-height: 40px; --pdp-cta-height: 50px; } } /* Target surface: near-white page, soft gray only where it carries meaning (the content navigation bar and the side callout cards). */ html body .page--product-details, html body .page--product-details .page__content-wrapper { background: var(--pdp-page-bg) !important; } /* --------------------------------------- 19.2 SHELL · HERO (gallery | buy box) */ html body .page--product-details .product-summary.dp-pdp-clean-layout { display: block !important; width: min(var(--pdp-container), calc(100% - var(--pdp-gutter))) !important; max-width: var(--pdp-container) !important; min-width: 0 !important; margin: 12px auto 0 !important; padding: 0 !important; background: var(--pdp-page-bg) !important; box-sizing: border-box !important; } html body .page--product-details .dp-pdp-hero { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; grid-template-areas: "gallery buybox" !important; column-gap: var(--pdp-col-gap) !important; row-gap: var(--pdp-row-gap) !important; align-items: start !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; background: transparent !important; } html body .page--product-details .dp-pdp-hero > .dp-pdp-hero__gallery { grid-area: gallery !important; } html body .page--product-details .dp-pdp-hero > .dp-pdp-hero__buybox { grid-area: buybox !important; } html body .page--product-details .dp-pdp-hero > .product-summary__images, html body .page--product-details .dp-pdp-hero > .product-summary__details { position: relative !important; inset: auto !important; transform: none !important; float: none !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; box-sizing: border-box !important; } /* ------------------------------------------------------------------- 19.3 GALLERY */ html body .page--product-details .dp-pdp-hero > .product-summary__images { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto auto !important; row-gap: var(--pdp-hero-pad) !important; padding: var(--pdp-hero-pad) !important; border: 1px solid var(--pdp-line) !important; border-radius: var(--pdp-hero-radius) !important; background: #fff !important; overflow: hidden !important; } html body .page--product-details .product-summary__main-images { position: relative !important; width: 100% !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; } html body .page--product-details .product-summary__main-images .splide, html body .page--product-details .product-summary__main-images .splide__track { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } /* Landscape stage: the real photo keeps its own ratio inside a fixed landscape frame (no crop, no distortion, no portrait column). */ html body .page--product-details .product-summary__main-image-wrapper { display: block !important; width: 100% !important; max-width: none !important; margin: 0 !important; overflow: hidden !important; border-radius: 8px !important; background: #fff !important; } html body .page--product-details .product-summary__main-image-wrapper figure { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; min-height: 0 !important; max-height: none !important; aspect-ratio: auto !important; height: clamp(430px, 33vw, 560px) !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; overflow: hidden !important; } html body .page--product-details img.product-summary__main-image { display: block !important; width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; object-fit: cover !important; object-position: center !important; } /* Badges (real promotion / discount values) — top-left of the stage. */ html body .page--product-details .product-summary__image-badges { position: absolute !important; top: 10px !important; left: 10px !important; z-index: 3 !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 6px !important; pointer-events: none !important; } html body .page--product-details .product-summary__badge { display: inline-flex !important; align-items: center !important; min-height: 20px !important; padding: 2px 8px !important; border-radius: 5px !important; background: var(--pdp-red) !important; color: #fff !important; font-size: 11.5px !important; font-weight: 800 !important; line-height: 1.4 !important; } /* Overlay arrows on the main stage. */ html body .page--product-details .product-summary__main-images .splide__arrow { position: absolute !important; top: 50% !important; z-index: 4 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 38px !important; height: 38px !important; min-width: 38px !important; min-height: 38px !important; margin: 0 !important; padding: 0 !important; transform: translateY(-50%) !important; border: 1px solid var(--pdp-line) !important; border-radius: 50% !important; background: rgba(255, 255, 255, .94) !important; box-shadow: 0 2px 10px rgba(16, 47, 77, .12) !important; opacity: 1 !important; cursor: pointer !important; } html body .page--product-details .product-summary__main-images .splide__arrow svg { width: 15px !important; height: 15px !important; fill: var(--pdp-ink) !important; } html body .page--product-details .product-summary__main-images .splide__arrow--prev { left: 10px !important; } html body .page--product-details .product-summary__main-images .splide__arrow--next { right: 10px !important; } html body .page--product-details .product-summary__main-images .splide__arrow:disabled { opacity: .45 !important; cursor: default !important; } /* Zoom cue — bottom-right, it only triggers the native Fancybox link of the slide that is active, so there is no second gallery and no second source. */ html body .page--product-details .product-summary__zoom { position: absolute !important; right: 14px !important; bottom: 14px !important; z-index: 5 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 40px !important; height: 40px !important; padding: 0 !important; border: 1px solid var(--pdp-line) !important; border-radius: 50% !important; background: rgba(255, 255, 255, .95) !important; box-shadow: 0 2px 10px rgba(16, 47, 77, .12) !important; color: var(--pdp-ink) !important; cursor: zoom-in !important; } html body .page--product-details .product-summary__zoom svg { width: 18px !important; height: 18px !important; fill: currentColor !important; } /* Thumbnails: ONE horizontal row under the main image, at every desktop viewport (1024 / 1280 / 1366 / 1440 / 1600 / 1920) and on mobile. The theme's left rail is never used for this render mode — the template builds the thumbnails slider horizontally (auto_width, no direction). */ html body .page--product-details .product-summary__thumbnails { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; overflow: hidden !important; } html body .page--product-details .product-summary__thumbnails .splide, html body .page--product-details .product-summary__thumbnails .splide__track { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } html body .page--product-details .product-summary__thumbnails .splide__list { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; gap: 8px !important; width: auto !important; min-width: 0 !important; } html body .page--product-details .product-summary__thumbnails .splide__slide { flex: 0 0 76px !important; width: 76px !important; min-width: 76px !important; max-width: 76px !important; height: auto !important; box-sizing: border-box !important; } html body .page--product-details .product-summary__thumbnails .splide__arrow { width: 30px !important; height: 30px !important; min-width: 30px !important; min-height: 30px !important; border: 1px solid var(--pdp-line) !important; border-radius: 8px !important; background: #fff !important; box-shadow: 0 2px 8px rgba(16, 47, 77, .08) !important; } html body .page--product-details .product-summary__thumb-image-wrapper { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 60px !important; padding: 2px !important; box-sizing: border-box !important; border: 1px solid var(--pdp-line) !important; border-radius: 6px !important; background: #fff !important; overflow: hidden !important; cursor: pointer !important; } html body .page--product-details .product-summary__thumb-image-wrapper img { width: 100% !important; height: 100% !important; object-fit: cover !important; } html body .page--product-details .splide__slide.is-active .product-summary__thumb-image-wrapper { border-color: var(--pdp-blue) !important; box-shadow: inset 0 0 0 1px var(--pdp-blue) !important; } html body .page--product-details .gallery-360 { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } /* ------------------------------------------------ 19.4 BUY BOX · RATE & RHYTHM */ html body .page--product-details .dp-pdp-hero > .product-summary__details { display: flex !important; flex-direction: column !important; gap: var(--pdp-row-gap) !important; } html body .page--product-details .dp-pdp-clean-layout .product-summary__form { display: flex !important; flex-direction: column !important; gap: var(--pdp-row-gap) !important; align-self: stretch !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } html body .page--product-details .dp-pdp-clean-layout .product-summary__form > * { margin-top: 0 !important; margin-bottom: 0 !important; } /* ------------------------------------------------- 19.5 TITLE · REVIEWS · META */ html body .page--product-details .dp-pdp-clean-layout .dp-pdp-clean-title-row { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 14px !important; margin: 0 !important; min-width: 0 !important; } html body .page--product-details .dp-pdp-clean-layout h1.product-summary__heading { flex: 1 1 auto !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; color: var(--pdp-ink) !important; font-size: clamp(27px, 2.15vw, 32px) !important; font-weight: 800 !important; line-height: 1.2 !important; letter-spacing: -.015em !important; } html body .page--product-details .dp-pdp-clean-layout .dp-pdp-clean-wishlist { flex: 0 0 auto !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 40px !important; height: 40px !important; border: 1px solid var(--pdp-line) !important; border-radius: 50% !important; background: #fff !important; color: var(--pdp-ink) !important; text-decoration: none !important; } html body .page--product-details .dp-pdp-clean-layout .dp-pdp-clean-wishlist svg { width: 19px !important; height: 19px !important; fill: currentColor !important; } html body .page--product-details .dp-pdp-clean-layout .dp-product-meta { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 6px 16px !important; margin: 0 !important; min-width: 0 !important; } html body .page--product-details .dp-pdp-clean-layout .dp-product-rating { display: inline-flex !important; align-items: center !important; gap: 8px !important; } html body .page--product-details .dp-pdp-clean-layout .dp-rating-static { display: inline-flex !important; align-items: center !important; gap: 2px !important; color: var(--pdp-gold) !important; font-size: 14px !important; line-height: 1 !important; } /* No rating yet: the real "no reviews" state stays neutral grey. */ html body .page--product-details .dp-pdp-clean-layout .dp-product-rating__stars-link .dp-rating-static { color: #cbd6e2 !important; } html body .page--product-details .dp-pdp-clean-layout .dp-product-rating__info { color: var(--pdp-muted) !important; font-size: 12.5px !important; text-decoration: none !important; } html body .page--product-details .dp-pdp-clean-layout .dp-product-rating__cta { color: var(--pdp-blue) !important; font-size: 12.5px !important; font-weight: 700 !important; text-decoration: none !important; } html body .page--product-details .dp-pdp-clean-layout .dp-product-rating__stars-link { display: inline-flex !important; align-items: center !important; padding: 0 !important; border: 0 !important; background: transparent !important; color: inherit !important; text-decoration: none !important; } html body .page--product-details .dp-pdp-clean-layout .dp-pdp-clean-brand { display: inline-flex !important; align-items: center !important; max-height: 30px !important; } html body .page--product-details .dp-pdp-clean-layout .dp-pdp-clean-brand img { display: block !important; max-height: 30px !important; width: auto !important; } html body .page--product-details .dp-pdp-clean-layout .product-summary__info--sku, html body .page--product-details .dp-pdp-clean-layout .product-summary__info--ean { display: inline-flex !important; align-items: baseline !important; gap: 5px !important; margin: 0 !important; color: var(--pdp-muted) !important; font-size: 12px !important; } html body .page--product-details .dp-pdp-clean-layout .product-summary__info--sku .info-label, html body .page--product-details .dp-pdp-clean-layout .product-summary__info--ean .info-label { font-weight: 600 !important; } /* ----------------------------------------- 19.6 PRICE + STOCK (one visual row) */ html body .page--product-details .dp-pdp-clean-layout .dp-price-row { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; align-items: center !important; column-gap: 18px !important; row-gap: 10px !important; margin: 0 !important; padding: 0 0 14px !important; border: 0 !important; border-bottom: 1px solid var(--pdp-line) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } html body .page--product-details .dp-pdp-clean-layout .premium-price-block { display: grid !important; grid-template-columns: auto minmax(0, 1fr) !important; align-items: center !important; justify-items: start !important; column-gap: 8px !important; row-gap: 3px !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; } /* The native price row is only a wrapper: its children are placed on the target lines (old price + discount / new price / unit note). */ html body .page--product-details .dp-pdp-clean-layout .premium-price-block .product-summary__info--price-row { display: contents !important; } html body .page--product-details .dp-pdp-clean-layout .premium-price-block .product-summary__info--old-price-gross, html body .page--product-details .dp-pdp-clean-layout .premium-price-block .product-summary__info--omnibus-price-gross { grid-row: 1 !important; grid-column: 1 !important; color: #94a3b3 !important; font-size: 13.5px !important; font-weight: 600 !important; line-height: 1.2 !important; text-decoration: line-through !important; text-decoration-thickness: 1px !important; } html body .page--product-details .dp-pdp-clean-layout .premium-price-block .dp-price-discount { grid-row: 1 !important; grid-column: 2 !important; justify-self: start !important; display: inline-flex !important; align-items: center !important; min-height: 20px !important; padding: 2px 7px !important; border-radius: 5px !important; background: var(--pdp-red) !important; color: #fff !important; font-size: 11.5px !important; font-weight: 800 !important; line-height: 1.3 !important; white-space: nowrap !important; } html body .page--product-details .dp-pdp-clean-layout .premium-price-block .product-summary__info--price-gross { grid-row: 2 !important; grid-column: 1 / -1 !important; display: block !important; color: var(--pdp-blue) !important; font-size: clamp(36px, 3vw, 44px) !important; font-weight: 850 !important; line-height: 1.05 !important; letter-spacing: -.025em !important; } html body .page--product-details .dp-pdp-clean-layout .premium-price-block .product-summary__info--price-gross span span { font-size: .5em !important; font-weight: 700 !important; } html body .page--product-details .dp-pdp-clean-layout .premium-price-block .product-summary__info--tax-price-gross { grid-row: 3 !important; grid-column: 1 / -1 !important; color: var(--pdp-muted) !important; font-size: 11.5px !important; font-weight: 600 !important; line-height: 1.3 !important; } html body .page--product-details .dp-pdp-clean-layout .premium-price-block .product-summary__info--price-net, html body .page--product-details .dp-pdp-clean-layout .premium-price-block .product-summary__info--installments, html body .page--product-details .dp-pdp-clean-layout .premium-price-block .product-summary__info--package-price-gross, html body .page--product-details .dp-pdp-clean-layout .premium-price-block .product-summary__info--label-omnibus-price-gross, html body .page--product-details .dp-pdp-clean-layout .premium-price-block .product-summary__info--label-package-price-gross, html body .page--product-details .dp-pdp-clean-layout .premium-price-block .product-summary__info--package-label-price-gross { grid-column: 1 / -1 !important; margin: 2px 0 0 !important; color: var(--pdp-muted) !important; font-size: 11.5px !important; font-weight: 600 !important; } /* Right side of the same row: real stock state + the real delivery hint. */ html body .page--product-details .dp-pdp-clean-layout .dp-stock-zone { display: flex !important; flex-direction: column !important; align-items: flex-end !important; gap: 5px !important; min-width: 0 !important; text-align: right !important; } html body .page--product-details .dp-pdp-clean-layout .product-summary__info--availability { display: inline-flex !important; align-items: center !important; gap: 7px !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: var(--pdp-green) !important; font-size: 13.5px !important; font-weight: 700 !important; line-height: 1.25 !important; } html body .page--product-details .dp-pdp-clean-layout .product-summary__info--available, html body .page--product-details .dp-pdp-clean-layout .product-summary__info--limited, html body .page--product-details .dp-pdp-clean-layout .product-summary__info--unavailable { display: inline-flex !important; align-items: center !important; gap: 7px !important; } html body .page--product-details .dp-pdp-clean-layout .product-summary__info--available::before, html body .page--product-details .dp-pdp-clean-layout .product-summary__info--limited::before, html body .page--product-details .dp-pdp-clean-layout .product-summary__info--unavailable::before { content: "" !important; width: 8px !important; height: 8px !important; flex: 0 0 8px !important; border-radius: 50% !important; background: currentColor !important; } html body .page--product-details .dp-pdp-clean-layout .product-summary__info--limited { color: var(--pdp-gold) !important; } html body .page--product-details .dp-pdp-clean-layout .product-summary__info--unavailable, html body .page--product-details .dp-pdp-clean-layout .product-summary__info--message { color: var(--pdp-muted) !important; font-size: 12px !important; font-weight: 600 !important; } html body .page--product-details .dp-pdp-clean-layout .dp-stock-zone .product-summary__info--shipping { max-width: 260px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; color: var(--pdp-muted) !important; font-size: 12px !important; font-weight: 500 !important; line-height: 1.4 !important; text-align: right !important; } /* ----------------------------------------------- 19.7 VARIANTS (label | choices) */ html body .page--product-details .dp-pdp-clean-layout .product-summary__info--variant-attributes { display: block !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; } /* The configurator heading stays in the DOM for assistive tech / the section outline, but the target buy box has no such visible line. */ html body .page--product-details .dp-pdp-clean-layout h2.dp-configurator-heading { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important; } html body .page--product-details .dp-pdp-clean-layout .variant-attribute { display: grid !important; grid-template-columns: minmax(110px, 168px) minmax(0, 1fr) !important; column-gap: 14px !important; row-gap: 6px !important; align-items: start !important; width: 100% !important; min-width: 0 !important; margin: 0 0 10px !important; } html body .page--product-details .dp-pdp-clean-layout .variant-attribute:last-child { margin-bottom: 0 !important; } html body .page--product-details .dp-pdp-clean-layout .variant-attribute__name { display: block !important; grid-column: 1 !important; margin: 0 !important; padding: 11px 0 0 !important; color: var(--pdp-ink) !important; font-size: 12.5px !important; font-weight: 700 !important; letter-spacing: 0 !important; line-height: 1.3 !important; text-transform: none !important; } html body .page--product-details .dp-pdp-clean-layout .variant-attribute__name::after { content: none !important; } html body .page--product-details .dp-pdp-clean-layout .variant-attribute__values { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)) !important; gap: 8px !important; grid-column: 2 !important; width: 100% !important; min-width: 0 !important; } html body .page--product-details .dp-pdp-clean-layout .variant-attribute__value { min-width: 0 !important; width: 100% !important; } html body .page--product-details .dp-pdp-clean-layout .variant-attribute__value label { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-width: 0 !important; min-height: var(--pdp-ctl-height) !important; padding: 6px 9px !important; box-sizing: border-box !important; border: 1px solid #d5dfea !important; border-radius: 6px !important; background: #fff !important; color: var(--pdp-ink-soft) !important; font-size: 13.5px !important; font-weight: 600 !important; line-height: 1.25 !important; text-align: center !important; white-space: normal !important; overflow-wrap: break-word !important; cursor: pointer !important; transition: border-color .14s ease, background-color .14s ease, color .14s ease !important; } html body .page--product-details .dp-pdp-clean-layout .variant-attribute__value label .variant-attribute__price { display: block !important; margin-top: 2px !important; color: var(--pdp-muted) !important; font-size: 10.5px !important; font-weight: 600 !important; } html body .page--product-details .dp-pdp-clean-layout .variant-attribute__value label:hover { border-color: #9dbde2 !important; } html body .page--product-details .dp-pdp-clean-layout .variant-attribute__value input:checked + label { border-color: var(--pdp-blue) !important; background: #f1f7ff !important; color: var(--pdp-blue) !important; box-shadow: inset 0 0 0 1px var(--pdp-blue) !important; } html body .page--product-details .dp-pdp-clean-layout .variant-attribute__value--disabled label { border-style: dashed !important; border-color: #d8e0e8 !important; background: #f5f7fa !important; color: #9aa9b8 !important; opacity: .55 !important; cursor: not-allowed !important; box-shadow: none !important; } html body .page--product-details .dp-pdp-clean-layout .variant-attribute__value--disabled label:hover { border-color: #d8e0e8 !important; } html body .page--product-details .dp-pdp-clean-layout .variant-attribute__value input:focus-visible + label { outline: 3px solid #79a9e6 !important; outline-offset: 2px !important; } /* ------------------------------------------------------- 19.8 QUANTITY */ html body .page--product-details .dp-pdp-clean-layout .dp-stock-qty-row { display: flex !important; align-items: center !important; gap: 14px !important; min-width: 0 !important; margin: 0 !important; } html body .page--product-details .dp-pdp-clean-layout .dp-qty-zone { display: flex !important; align-items: center !important; gap: 10px !important; } html body .page--product-details .dp-pdp-clean-layout .dp-qty-label { color: var(--pdp-ink-soft) !important; font-size: 13px !important; font-weight: 600 !important; white-space: nowrap !important; } html body .page--product-details .dp-pdp-clean-layout .product-summary__info--quantity { width: auto !important; min-width: 0 !important; } html body .page--product-details .dp-pdp-clean-layout .dp-purchase-quantity[hidden] { display: none !important; } html body .page--product-details .dp-pdp-clean-layout .quantity-spinner { display: flex !important; flex-wrap: nowrap !important; width: 148px !important; min-width: 148px !important; min-height: var(--pdp-ctl-height) !important; border: 1px solid #d5dfea !important; border-radius: 6px !important; background: #fff !important; overflow: hidden !important; } html body .page--product-details .dp-pdp-clean-layout .quantity-spinner input { flex: 1 1 0 !important; width: 0 !important; min-width: 0 !important; border: 0 !important; background: #fff !important; color: var(--pdp-ink) !important; text-align: center !important; font-size: 15px !important; font-weight: 700 !important; } html body .page--product-details .dp-pdp-clean-layout .quantity-spinner button { flex: 0 0 40px !important; width: 40px !important; min-height: var(--pdp-ctl-height) !important; border: 0 !important; background: #f2f6fb !important; color: var(--pdp-ink) !important; font-size: 16px !important; line-height: 1 !important; cursor: pointer !important; } html body .page--product-details .dp-pdp-clean-layout .quantity-spinner button:hover { background: #e7eef6 !important; } /* ------------------------------------------ 19.9 CTA ROW (cart | WhatsApp) */ html body .page--product-details .dp-pdp-clean-layout .product-summary__info--actions { display: grid !important; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, .85fr) !important; align-items: stretch !important; gap: 12px !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; } /* The transport hint that used to occupy the first track is rendered once, above the CTA row. Products that hide the Calculator CTA (Sere / Pergole / Saune) leave only two buttons, so the third track is dropped instead of ending the row with an empty column. */ @media (min-width: 1181px) { html body .page--product-details .dp-pdp-clean-layout .product-summary__info--actions:not(:has(> .product-action--calculator)), html body .page--product-details .dp-pdp-clean-layout .product-summary__info--actions:not(:has(> .product-action--add-to-cart)) { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) !important; } } html body .page--product-details .dp-pdp-clean-layout .product-summary__info--actions > .product-action--add-to-cart, html body .page--product-details .dp-pdp-clean-layout .product-summary__info--actions > .premium-whatsapp-action, html body .page--product-details .dp-pdp-clean-layout .product-summary__info--actions > .product-action--calculator { display: flex !important; min-width: 0 !important; margin: 0 !important; } html body .page--product-details .dp-pdp-clean-layout .product-action--add-to-cart .btn, html body .page--product-details .dp-pdp-clean-layout .product-action--add-to-cart button { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-height: var(--pdp-cta-height) !important; padding: 0 18px !important; box-sizing: border-box !important; border: 1px solid var(--pdp-blue) !important; border-radius: 6px !important; background: var(--pdp-blue) !important; background-image: none !important; color: #fff !important; font-size: 15px !important; font-weight: 800 !important; letter-spacing: .005em !important; line-height: 1.15 !important; text-align: center !important; text-decoration: none !important; cursor: pointer !important; box-shadow: none !important; transition: background-color .14s ease !important; } html body .page--product-details .dp-pdp-clean-layout .product-action--add-to-cart .btn:hover, html body .page--product-details .dp-pdp-clean-layout .product-action--add-to-cart button:hover { background: var(--pdp-blue-dark) !important; } html body .page--product-details .dp-pdp-clean-layout .premium-whatsapp-action a { display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; width: 100% !important; min-height: var(--pdp-cta-height) !important; padding: 0 14px !important; box-sizing: border-box !important; border: 1px solid var(--pdp-green-line) !important; border-radius: 6px !important; background: #fff !important; color: var(--pdp-green-line) !important; font-size: 15px !important; font-weight: 800 !important; line-height: 1.15 !important; text-decoration: none !important; text-align: center !important; transition: background-color .14s ease !important; } html body .page--product-details .dp-pdp-clean-layout .premium-whatsapp-action a:hover { background: #f2fbf6 !important; } html body .page--product-details .dp-pdp-clean-layout .premium-whatsapp-action a svg { width: 19px !important; height: 19px !important; flex: 0 0 auto !important; fill: currentColor !important; } html body .page--product-details .dp-pdp-clean-layout .premium-whatsapp-action a span { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } /* Calculator Necesar — third CTA, same height as cart/WhatsApp. */ html body .page--product-details .dp-pdp-clean-layout .product-action--calculator .btn { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-height: var(--pdp-cta-height) !important; height: auto !important; padding: 0 10px !important; box-sizing: border-box !important; border: 1px solid #c5d5e5 !important; border-radius: 8px !important; background: #fff !important; color: #173a5e !important; font-size: 13px !important; font-weight: 800 !important; line-height: 1.15 !important; text-align: center !important; text-decoration: none !important; white-space: normal !important; transition: background-color .14s ease, border-color .14s ease, color .14s ease !important; } html body .page--product-details .dp-pdp-clean-layout .product-action--calculator .btn:hover { border-color: #2b5aa3 !important; background: #f4f8fc !important; color: #0f5ea8 !important; } @media (min-width: 768px) and (max-width: 1180px) { html body .page--product-details .dp-pdp-clean-layout .product-summary__info--actions { grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr) !important; } html body .page--product-details .dp-pdp-clean-layout .product-action--calculator { grid-column: 1 / -1 !important; } html body .page--product-details .dp-pdp-clean-layout .product-action--calculator .btn { min-height: 40px !important; font-size: 12px !important; } } /* Comparer stays available, on its own discreet second row. */ html body .page--product-details .dp-pdp-clean-layout .product-action--add-to-comparer { grid-column: 1 / -1 !important; min-width: 0 !important; } html body .page--product-details .dp-pdp-clean-layout .product-action--add-to-comparer a { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-height: 38px !important; box-sizing: border-box !important; border: 1px solid var(--pdp-line) !important; border-radius: 6px !important; background: #fff !important; color: var(--pdp-muted) !important; font-size: 11.5px !important; font-weight: 700 !important; text-decoration: none !important; } /* ------------------------------------------------ 19.10 TRUST STRIP (4 claims) */ html body .page--product-details .dp-pdp-clean-layout .premium-trust-strip { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 0 14px !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 14px 0 0 !important; border: 0 !important; border-top: 1px solid var(--pdp-line) !important; border-radius: 0 !important; background: transparent !important; overflow: visible !important; } html body .page--product-details .dp-pdp-clean-layout .premium-trust-strip > .premium-trust-item, html body .page--product-details .dp-pdp-clean-layout .premium-trust-strip > div:not(.premium-trust-payment) { display: grid !important; grid-template-columns: 30px minmax(0, 1fr) !important; align-items: center !important; gap: 9px !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; color: var(--pdp-muted) !important; font-size: 11.5px !important; line-height: 1.3 !important; text-align: left !important; } html body .page--product-details .dp-pdp-clean-layout .premium-trust-icon { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 30px !important; height: 30px !important; flex: 0 0 30px !important; border-radius: 50% !important; background: #eef4fd !important; color: var(--pdp-blue) !important; font-size: 13px !important; font-weight: 800 !important; } html body .page--product-details .dp-pdp-clean-layout .premium-trust-icon svg { width: 16px !important; height: 16px !important; fill: currentColor !important; } html body .page--product-details .dp-pdp-clean-layout .premium-trust-copy { display: block !important; min-width: 0 !important; } html body .page--product-details .dp-pdp-clean-layout .premium-trust-copy strong { display: block !important; color: var(--pdp-ink) !important; font-size: 12px !important; font-weight: 700 !important; line-height: 1.25 !important; } html body .page--product-details .dp-pdp-clean-layout .premium-trust-copy small { display: block !important; color: var(--pdp-muted) !important; font-size: 11px !important; font-weight: 500 !important; line-height: 1.3 !important; } /* Payment methods: one discreet secondary line, not a second table. */ html body .page--product-details .dp-pdp-clean-layout .premium-trust-payment { grid-column: 1 / -1 !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; flex-wrap: wrap !important; gap: 6px 12px !important; min-height: 0 !important; margin: 12px 0 0 !important; padding: 9px 0 0 !important; border: 0 !important; border-top: 1px solid var(--pdp-line-soft) !important; color: #8797a8 !important; font-size: 10.5px !important; line-height: 1.35 !important; text-align: left !important; } html body .page--product-details .dp-pdp-clean-layout .premium-payment-badges { display: inline-flex !important; align-items: center !important; gap: 5px !important; } html body .page--product-details .dp-pdp-clean-layout .premium-payment-badges > span { padding: 1px 6px !important; border: 1px solid var(--pdp-line) !important; border-radius: 4px !important; background: #fff !important; color: var(--pdp-muted) !important; font-size: 9.5px !important; font-weight: 700 !important; letter-spacing: .02em !important; } /* --------------------------------- 19.11 SUPPORT / DEBITARE CALLOUT (content) */ html body .page--product-details .dp-pdp-support { display: grid !important; gap: 10px !important; margin: 0 !important; padding: 14px 15px !important; box-sizing: border-box !important; border: 1px solid var(--pdp-line) !important; border-radius: var(--pdp-card-radius) !important; background: var(--pdp-soft) !important; } /* Inside the side column the callout still owns its own surface: it is a callout, not one of the content cards (same specificity as the column's child rule). */ html body .page--product-details .dp-product-content-clean .dp-content-split__side > .dp-pdp-support { grid-column: 1 / -1 !important; display: grid !important; gap: 10px !important; margin: 0 !important; padding: 14px 15px !important; border: 1px solid var(--pdp-line) !important; border-radius: var(--pdp-card-radius) !important; background: var(--pdp-soft) !important; color: var(--pdp-ink-soft) !important; font-size: 13px !important; line-height: 1.5 !important; } html body .page--product-details .dp-pdp-support__list { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 8px 14px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } html body .page--product-details .dp-pdp-support__item { display: flex !important; align-items: center !important; gap: 8px !important; min-width: 0 !important; margin: 0 !important; color: var(--pdp-ink-soft) !important; font-size: 12.5px !important; line-height: 1.35 !important; } html body .page--product-details .dp-pdp-support__item svg { flex: 0 0 16px !important; width: 16px !important; height: 16px !important; fill: var(--pdp-blue) !important; } html body .page--product-details .dp-pdp-support__context { margin: 0 !important; padding: 10px 0 0 !important; border-top: 1px solid var(--pdp-line) !important; color: var(--pdp-muted) !important; font-size: 11.5px !important; line-height: 1.5 !important; } html body .page--product-details .dp-pdp-support__actions { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 8px 14px !important; } html body .page--product-details .dp-pdp-support__cta { display: inline-flex !important; align-items: center !important; gap: 7px !important; min-height: 36px !important; padding: 7px 14px !important; box-sizing: border-box !important; border: 1px solid var(--pdp-blue) !important; border-radius: 6px !important; background: #fff !important; color: var(--pdp-blue) !important; font-size: 12.5px !important; font-weight: 800 !important; text-decoration: none !important; } html body .page--product-details .dp-pdp-support__cta:hover { background: #eef4fd !important; } html body .page--product-details .dp-pdp-support__phone { color: var(--pdp-ink) !important; font-size: 12.5px !important; font-weight: 700 !important; text-decoration: none !important; } html body .page--product-details .dp-pdp-support__hours { color: var(--pdp-muted) !important; font-size: 11.5px !important; } /* --------------------------------------------------- 19.12 CONTENT NAVIGATION */ html body .page--product-details .dp-product-content-clean { --pc-ink: var(--pdp-ink); --pc-blue: var(--pdp-blue); --pc-muted: var(--pdp-muted); --pc-line: var(--pdp-line); --pc-soft: var(--pdp-soft); --pc-ink-soft: var(--pdp-ink-soft); --pc-hairline: var(--pdp-line-soft); --pc-radius: var(--pdp-card-radius); --pc-measure: 74ch; position: relative !important; width: min(var(--pdp-container), calc(100% - var(--pdp-gutter))) !important; max-width: var(--pdp-container) !important; min-width: 0 !important; /* the content navigation starts right after the hero (~16px) */ margin: 16px auto 40px !important; padding: 0 !important; box-sizing: border-box !important; overflow: visible !important; } /* The real configured tabs share the whole bar instead of sitting in a corner; the same rule adapts when the shop configures more tabs. */ html body .page--product-details .dp-product-content-clean > .product-content__tabs { position: relative !important; top: auto !important; bottom: auto !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; align-items: stretch !important; gap: 4px !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 0 16px !important; padding: 4px !important; box-sizing: border-box !important; border: 1px solid var(--pc-line) !important; border-radius: var(--pdp-card-radius) !important; background: var(--pc-soft) !important; } html body .page--product-details .dp-product-content-clean .product-content__tabs .nav-item { width: 100% !important; min-width: 0 !important; margin: 0 !important; text-align: center !important; } html body .page--product-details .dp-product-content-clean .product-content__tabs .nav-link { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-height: 44px !important; padding: 8px 14px !important; box-sizing: border-box !important; border: 0 !important; border-radius: 6px !important; background: transparent !important; color: #4c6076 !important; font-size: 14.5px !important; font-weight: 700 !important; line-height: 1.2 !important; text-decoration: none !important; white-space: normal !important; text-align: center !important; transition: color .15s ease, background-color .15s ease !important; } html body .page--product-details .dp-product-content-clean .product-content__tabs .nav-link:hover { background: #e9eff7 !important; color: var(--pc-ink) !important; } html body .page--product-details .dp-product-content-clean .product-content__tabs .nav-link[aria-current="true"] { background: var(--pc-blue) !important; color: #fff !important; } html body .page--product-details .dp-product-content-clean .product-content__tabs .nav-link:focus-visible { outline: 2px solid var(--pc-blue) !important; outline-offset: 2px !important; } /* ------------------------------------------- 19.13 CONTENT ZONE (description | side) */ html body .page--product-details .dp-product-content-clean .product-content__blocks { display: block !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* Plain blocks separated by hairlines: no card frame around the description. */ html body .page--product-details .dp-product-content-clean .product-content__block { position: relative !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 0 26px !important; padding: 0 !important; box-sizing: border-box !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; scroll-margin-top: 120px !important; overflow: visible !important; } html body .page--product-details .dp-product-content-clean .product-content__block:last-child { margin-bottom: 0 !important; } html body .page--product-details .dp-product-content-clean .product-content__block-heading { margin: 0 0 14px !important; padding: 0 !important; color: var(--pc-ink) !important; font-size: clamp(19px, 1.5vw, 23px) !important; font-weight: 800 !important; line-height: 1.25 !important; letter-spacing: -.01em !important; } html body .page--product-details .dp-product-content-clean .dp-product-description__body { width: 100% !important; max-width: 100% !important; margin: 0 !important; color: var(--pc-ink-soft) !important; font-size: 15px !important; line-height: 1.75 !important; } html body .page--product-details .dp-product-content-clean .dp-product-description__body p { margin: 0 0 12px !important; } html body .page--product-details .dp-product-content-clean .dp-product-description__body p:last-child { margin-bottom: 0 !important; } html body .page--product-details .dp-product-content-clean .dp-product-description__body ol, html body .page--product-details .dp-product-content-clean .dp-product-description__body ul { margin: 10px 0 14px !important; padding-left: 20px !important; } html body .page--product-details .dp-product-content-clean .dp-product-description__body li { margin: 4px 0 !important; } /* The real "Caracteristici principale" list becomes the benefit grid. */ html body .page--product-details .dp-product-content-clean .dp-product-description__body ul { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px 18px !important; margin: 12px 0 16px !important; padding: 0 !important; list-style: none !important; } html body .page--product-details .dp-product-content-clean .dp-product-description__body ul > li { position: relative !important; margin: 0 !important; padding: 0 0 0 24px !important; color: var(--pc-ink-soft) !important; font-size: 14px !important; line-height: 1.5 !important; } html body .page--product-details .dp-product-content-clean .dp-product-description__body ul > li::before { content: "" !important; position: absolute !important; left: 0 !important; top: 3px !important; width: 15px !important; height: 15px !important; border-radius: 50% !important; background: #e9f2fd url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%230564c9' d='M10.3 3.2 4.9 8.6 1.7 5.4l1-1 2.2 2.2 4.4-4.4z'/%3E%3C/svg%3E") center / 11px 11px no-repeat !important; } /* Real attribute highlights, when the product exposes them. */ html body .page--product-details .dp-product-content-clean .dp-product-highlights { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 10px !important; margin: 16px 0 0 !important; padding: 0 !important; list-style: none !important; } html body .page--product-details .dp-product-content-clean .dp-product-highlights__item { display: grid !important; gap: 2px !important; padding: 10px 12px !important; box-sizing: border-box !important; border: 1px solid var(--pc-line) !important; border-radius: var(--pdp-card-radius) !important; background: #fff !important; } html body .page--product-details .dp-product-content-clean .dp-product-highlights__label { color: var(--pc-muted) !important; font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .03em !important; } html body .page--product-details .dp-product-content-clean .dp-product-highlights__value { color: var(--pc-ink) !important; font-size: 13.5px !important; font-weight: 700 !important; } /* Two columns in the description: text + benefits (left) | real notes and the support callout (right). 1.08fr : 1fr = ~52% : 48% of the content width. */ html body .page--product-details .dp-product-content-clean .product-content__block--description.dp-content-split { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; align-content: start !important; column-gap: clamp(20px, 2.2vw, 32px) !important; row-gap: 16px !important; align-items: start !important; } html body .page--product-details .dp-product-content-clean .product-content__block--description.dp-content-split > .product-content__block-heading { grid-column: 1 / -1 !important; grid-row: 1 !important; } html body .page--product-details .dp-product-content-clean .product-content__block--description.dp-content-split > .dp-product-description__body, html body .page--product-details .dp-product-content-clean .product-content__block--description.dp-content-split > .dp-product-highlights { grid-column: 1 !important; min-width: 0 !important; } html body .page--product-details .dp-product-content-clean .product-content__block--description.dp-content-split > .dp-content-split__side { grid-column: 2 !important; grid-row: auto !important; align-self: start !important; display: grid !important; align-content: start !important; gap: 10px !important; min-width: 0 !important; } /* The product's own "Aplicări / Noțiuni / Recomandări" paragraphs as cards. */ html body .page--product-details .dp-product-content-clean .dp-content-split__side > * { margin: 0 !important; padding: 12px 14px !important; border: 1px solid var(--pc-line) !important; border-radius: var(--pdp-card-radius) !important; background: #fff !important; color: var(--pc-ink-soft) !important; font-size: 13px !important; line-height: 1.55 !important; } html body .page--product-details .dp-product-content-clean .dp-content-split__side > *:first-child { background: var(--pc-soft) !important; } html body .page--product-details .dp-product-content-clean .dp-content-split__side > ul, html body .page--product-details .dp-product-content-clean .dp-content-split__side > ol { padding-left: 30px !important; } /* Details / attributes block. */ html body .page--product-details .dp-product-content-clean .product-attributes { display: grid !important; gap: 0 !important; margin: 0 !important; } html body .page--product-details .dp-product-content-clean .product-attributes__group { padding: 12px 0 0 !important; border-top: 1px solid var(--pc-line) !important; } html body .page--product-details .dp-product-content-clean .product-attributes__group:first-child { padding-top: 0 !important; border-top: 0 !important; } html body .page--product-details .dp-product-content-clean .product-attributes__item { display: grid !important; grid-template-columns: minmax(150px, 30%) minmax(0, 1fr) !important; gap: 10px 18px !important; align-items: baseline !important; padding: 9px 0 !important; border-bottom: 1px solid var(--pc-hairline) !important; color: var(--pc-ink-soft) !important; font-size: 13.5px !important; } html body .page--product-details .dp-product-content-clean .product-attributes__item:last-child { border-bottom: 0 !important; } html body .page--product-details .dp-product-content-clean .product-tags { display: grid !important; grid-template-columns: minmax(150px, 30%) minmax(0, 1fr) !important; gap: 4px 18px !important; align-items: baseline !important; padding: 10px 0 0 !important; } /* ------------------------------------------------ 19.14 RECOMMENDATION CARDS */ html body .page--product-details .dp-product-content-clean .products-slider .product--slider { display: flex !important; flex-direction: column !important; height: 100% !important; padding: 10px !important; box-sizing: border-box !important; border: 1px solid var(--pc-line) !important; border-radius: 10px !important; background: #fff !important; box-shadow: none !important; transition: border-color .15s ease, box-shadow .15s ease !important; } html body .page--product-details .dp-product-content-clean .products-slider .product--slider:hover { border-color: #c7d8ea !important; box-shadow: 0 4px 14px rgba(16, 47, 77, .06) !important; } html body .page--product-details .dp-product-content-clean .products-slider .slider-image__image-wrapper { display: block !important; position: relative !important; width: 100% !important; overflow: hidden !important; border-radius: 8px !important; background: var(--pc-soft) !important; } html body .page--product-details .dp-product-content-clean .products-slider .product__data { flex: 1 1 auto !important; width: 100% !important; padding-top: 2px !important; } html body .page--product-details .dp-product-content-clean .products-slider .product__cta { margin-top: 8px !important; min-height: 38px !important; border-radius: 6px !important; } /* ------------------------------------------------------ 19.15 STICKY BUY BAR Presentation overlay only: every value is real native data mirrored from the buy box; "-" / "+" delegate to the native spinner and the cart button clicks the native [data-cart-add-form] button. */ html body .page--product-details .dp-pdp-sticky { position: fixed !important; right: 0 !important; bottom: 0 !important; left: 0 !important; z-index: 60 !important; display: block !important; padding: 10px var(--pdp-gutter) !important; box-sizing: border-box !important; border-top: 1px solid var(--pdp-line) !important; background: rgba(255, 255, 255, .98) !important; box-shadow: 0 -6px 20px -16px rgba(11, 40, 88, .55) !important; backdrop-filter: blur(6px) !important; } html body .page--product-details .dp-pdp-sticky[hidden] { display: none !important; } html body .page--product-details .dp-pdp-sticky__inner { display: grid !important; grid-template-columns: 48px minmax(0, 1fr) auto auto auto !important; align-items: center !important; gap: 14px !important; width: min(var(--pdp-container), 100%) !important; min-height: 52px !important; margin: 0 auto !important; } html body .page--product-details .dp-pdp-sticky__thumb { display: flex !important; align-items: center !important; justify-content: center !important; width: 48px !important; height: 48px !important; border: 1px solid var(--pdp-line) !important; border-radius: 8px !important; background: #fff !important; overflow: hidden !important; } html body .page--product-details .dp-pdp-sticky__thumb img { width: 100% !important; height: 100% !important; object-fit: contain !important; } html body .page--product-details .dp-pdp-sticky__info { display: flex !important; flex-direction: column !important; gap: 2px !important; min-width: 0 !important; } html body .page--product-details .dp-pdp-sticky__name { color: var(--pdp-ink) !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1.25 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } html body .page--product-details .dp-pdp-sticky__stock { display: inline-flex !important; align-items: center !important; gap: 6px !important; color: var(--pdp-green) !important; font-size: 12px !important; font-weight: 700 !important; } html body .page--product-details .dp-pdp-sticky__stock::before { content: "" !important; width: 7px !important; height: 7px !important; flex: 0 0 7px !important; border-radius: 50% !important; background: currentColor !important; } html body .page--product-details .dp-pdp-sticky__price { display: inline-flex !important; align-items: baseline !important; gap: 8px !important; white-space: nowrap !important; } html body .page--product-details .dp-pdp-sticky__old { color: #8a93a0 !important; font-size: 13px !important; font-weight: 600 !important; text-decoration: line-through !important; } html body .page--product-details .dp-pdp-sticky__now { color: var(--pdp-blue) !important; font-size: clamp(19px, 1.6vw, 24px) !important; font-weight: 850 !important; letter-spacing: -.02em !important; } html body .page--product-details .dp-pdp-sticky__now span + span { margin-left: 4px !important; color: var(--pdp-muted) !important; font-size: 12px !important; font-weight: 600 !important; } html body .page--product-details .dp-pdp-sticky__discount { display: inline-flex !important; align-items: center !important; min-height: 19px !important; padding: 0 6px !important; border-radius: 4px !important; background: var(--pdp-red) !important; color: #fff !important; font-size: 11px !important; font-weight: 800 !important; } html body .page--product-details .dp-pdp-sticky__qty { display: inline-flex !important; align-items: center !important; height: 40px !important; border: 1px solid #d5dfea !important; border-radius: 6px !important; background: #fff !important; overflow: hidden !important; } html body .page--product-details .dp-pdp-sticky__qty button { width: 36px !important; height: 38px !important; min-height: 38px !important; border: 0 !important; background: #f2f6fb !important; color: var(--pdp-ink) !important; font-size: 15px !important; cursor: pointer !important; } html body .page--product-details .dp-pdp-sticky__qty-value { min-width: 34px !important; color: var(--pdp-ink) !important; font-size: 13px !important; font-weight: 700 !important; text-align: center !important; } html body .page--product-details .dp-pdp-sticky__cart { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; height: 40px !important; min-height: 40px !important; padding: 0 20px !important; border: 1px solid var(--pdp-blue) !important; border-radius: 6px !important; background: var(--pdp-blue) !important; color: #fff !important; font-size: 14px !important; font-weight: 800 !important; cursor: pointer !important; } html body .page--product-details .dp-pdp-sticky__cart svg { width: 17px !important; height: 17px !important; fill: currentColor !important; } html body .page--product-details .dp-pdp-sticky__wa { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 40px !important; height: 40px !important; border: 1px solid var(--pdp-green-line) !important; border-radius: 6px !important; background: #fff !important; color: var(--pdp-green-line) !important; } html body .page--product-details .dp-pdp-sticky__wa svg { width: 19px !important; height: 19px !important; fill: currentColor !important; } /* ------------------------------------------------------------ 19.16 RESPONSIVE */ /* Tablet and below: one column (gallery, then buy box). */ @media (max-width: 1023px) { html body .page--product-details .dp-pdp-hero { grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: "gallery" "buybox" !important; row-gap: 16px !important; } html body .page--product-details .dp-product-content-clean { margin: 20px auto 32px !important; } html body .page--product-details .dp-pdp-support__list { grid-template-columns: minmax(0, 1fr) !important; } html body .page--product-details .dp-pdp-sticky__qty { display: none !important; } html body .page--product-details .dp-pdp-sticky__inner { grid-template-columns: 46px minmax(0, 1fr) auto auto !important; } } /* Mobile: the target order is gallery, title, price, stock, variants, quantity, CTA, trust, content navigation, content. */ @media (max-width: 767px) { html body .page--product-details .product-summary__main-image-wrapper figure { aspect-ratio: 4 / 3 !important; } html body .page--product-details .product-summary__thumbnails .splide__slide { flex: 0 0 64px !important; width: 64px !important; min-width: 64px !important; max-width: 64px !important; } /* The theme hides this row below 768px (`.product-summary__thumbnails{display:none}` in product-summary.css). The target keeps the same single horizontal row on mobile as on desktop, so the row is stated here explicitly; otherwise the theme rule would win once the base display declaration is gone. */ html body .page--product-details .product-summary__thumbnails { display: block !important; } html body .page--product-details .product-summary__thumb-image-wrapper { height: 52px !important; } html body .page--product-details .dp-pdp-clean-layout .dp-price-row { grid-template-columns: minmax(0, 1fr) !important; row-gap: 10px !important; align-items: start !important; } html body .page--product-details .dp-pdp-clean-layout .dp-stock-zone { align-items: flex-start !important; text-align: left !important; } html body .page--product-details .dp-pdp-clean-layout .dp-stock-zone .product-summary__info--shipping { max-width: none !important; text-align: left !important; } html body .page--product-details .dp-pdp-clean-layout .variant-attribute { grid-template-columns: minmax(0, 1fr) !important; row-gap: 6px !important; } html body .page--product-details .dp-pdp-clean-layout .variant-attribute__name { padding-top: 0 !important; } html body .page--product-details .dp-pdp-clean-layout .variant-attribute__values { grid-column: 1 !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } html body .page--product-details .dp-pdp-clean-layout .dp-stock-qty-row { justify-content: space-between !important; } html body .page--product-details .dp-pdp-clean-layout .quantity-spinner { width: 136px !important; min-width: 136px !important; } html body .page--product-details .dp-pdp-clean-layout .product-summary__info--actions { grid-template-columns: minmax(0, 1fr) !important; gap: 10px !important; } html body .page--product-details .dp-pdp-clean-layout .premium-trust-strip { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px 14px !important; } } @media (max-width: 767px) { html body .page--product-details .dp-product-content-clean .product-content__tabs { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; overflow-y: hidden !important; } html body .page--product-details .dp-product-content-clean .product-content__tabs .nav-item { flex: 0 0 auto !important; width: auto !important; } html body .page--product-details .dp-product-content-clean .product-content__tabs .nav-link { white-space: nowrap !important; min-height: 36px !important; font-size: 12.5px !important; } html body .page--product-details .dp-product-content-clean .product-content__block { margin-bottom: 20px !important; } html body .page--product-details .dp-product-content-clean .product-content__block--description.dp-content-split { grid-template-columns: minmax(0, 1fr) !important; } html body .page--product-details .dp-product-content-clean .product-content__block--description.dp-content-split > .dp-content-split__side { grid-column: 1 !important; grid-row: auto !important; margin-top: 12px !important; } html body .page--product-details .dp-product-content-clean .dp-product-description__body ul, html body .page--product-details .dp-product-content-clean .dp-product-highlights { grid-template-columns: minmax(0, 1fr) !important; } html body .page--product-details .dp-product-content-clean .product-attributes__item, html body .page--product-details .dp-product-content-clean .product-tags { grid-template-columns: minmax(0, 1fr) !important; gap: 2px !important; } html body .page--product-details .dp-product-content-clean .products-slider .product--slider { padding: 8px !important; } html body .page--product-details .dp-pdp-sticky__inner { grid-template-columns: minmax(0, 1fr) auto auto !important; gap: 8px !important; min-height: 46px !important; } html body .page--product-details .dp-pdp-sticky__thumb { display: none !important; } html body .page--product-details .dp-pdp-sticky__name { font-size: 12px !important; } html body .page--product-details .dp-pdp-sticky__now { font-size: 16px !important; } html body .page--product-details .dp-pdp-sticky__cart { height: 38px !important; min-height: 38px !important; padding: 0 14px !important; font-size: 13px !important; } html body .page--product-details .dp-pdp-sticky__wa { width: 38px !important; height: 38px !important; } } @media (max-width: 390px) { html body .page--product-details .product-summary__thumbnails .splide__slide { flex: 0 0 58px !important; width: 58px !important; min-width: 58px !important; max-width: 58px !important; } html body .page--product-details .product-summary__thumb-image-wrapper { height: 48px !important; } html body .page--product-details .dp-pdp-clean-layout .premium-trust-strip { grid-template-columns: minmax(0, 1fr) !important; } } /* PDP-CONVERGENCE-END */ /* V2.3 — repair of the V2 insertion + the two rules that actually remove the hero -> nav gap. Chain: .dp-pdp-clean-layout (summary container) | .page__content-wrapper (grid, theme row-gap 32px) > .page__content (PDP summary) + > .dp-product-content-clean (content, margin-top 16px). The distance is therefore wrapper row-gap + content margin-top. Nothing else is touched. */ html body #main .page--product-details > .page__content-wrapper { row-gap: 0 !important; } html body #main .page--product-details > .page__content-wrapper > .dp-product-content-clean { margin-top: 20px !important; } /* V2.4 — the theme caps .page--product-details at 1500px, which kept the PDP container at 1416px at 1920 (the brief asks for 1500-1560). Lifted for the PDP page only. */ html body #main .page--product-details { max-width: 1600px !important; } /* ================================================================== 27. FINAL VISUAL MATCH — PASS 1: VARIANT DENSITY / HERO HEIGHT. Presentation only: the native radio inputs, ids, names, values and data-on-change hooks are untouched. 27 is appended last, so it wins source order inside this block. ================================================================== */ /* 27.1 Variant group: narrower label rail + denser value grid. Scoped to >=768px on purpose: the shop's own <=767px variant layout is already the tuned mobile one and must not be disturbed. */ @media (min-width: 768px) { html body .page--product-details .dp-pdp-clean-layout .variant-attribute { grid-template-columns: minmax(96px, 148px) minmax(0, 1fr) !important; column-gap: 12px !important; row-gap: 5px !important; margin: 0 0 8px !important; } html body .page--product-details .dp-pdp-clean-layout .variant-attribute__name { padding: 9px 0 0 !important; font-size: 12px !important; line-height: 1.25 !important; } html body .page--product-details .dp-pdp-clean-layout .variant-attribute__values { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)) !important; gap: 6px !important; } /* 27.2 Chip: one compact line, 40px tall (target band 40-46px). The selected and disabled states keep the colours defined in 19.7. */ html body .page--product-details .dp-pdp-clean-layout .variant-attribute__value label { min-height: 40px !important; padding: 4px 8px !important; font-size: 12.5px !important; line-height: 1.2 !important; border-radius: 8px !important; } html body .page--product-details .dp-pdp-clean-layout .variant-attribute__value label .variant-attribute__price { margin-top: 1px !important; font-size: 10px !important; } /* 27.3 The native value wrapper is not part of the chip: the whitespace around the label must not add a strut line to every row (11px x row). */ html body .page--product-details .dp-pdp-clean-layout .variant-attribute__value { display: flex !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; line-height: 0 !important; } html body .page--product-details .dp-pdp-clean-layout .variant-attribute__value label { flex: 1 1 auto !important; } /* The theme's own stylesheet also puts a bottom margin on the chip label, which is what kept every row 11px away from the next one. */ html body .page--product-details .dp-pdp-clean-layout .variant-attribute__values .variant-attribute__value label { margin: 0 !important; } /* Narrow desktop (two-column hero with a 470px buy box): the label moves above its own values so the chips keep the 4-column rhythm instead of collapsing to two. Tablet and mobile keep their own layout. */ } /* end >=768px */ @media (min-width: 1024px) and (max-width: 1199px) { html body .page--product-details .dp-pdp-clean-layout .variant-attribute { grid-template-columns: minmax(0, 1fr) !important; row-gap: 6px !important; } html body .page--product-details .dp-pdp-clean-layout .variant-attribute__name { grid-column: 1 !important; padding: 0 !important; margin: 0 0 2px !important; } html body .page--product-details .dp-pdp-clean-layout .variant-attribute__values { grid-column: 1 !important; } } /* ================================================================== 27.4 PASS 2 — STOCK ROW, PRICE ROW, CTA ROW. ================================================================== */ /* CTA row: the native action wrappers were inflating the row to 78px because they inherited the button's min-height + padding. The real buttons keep the token height; the wrappers stop adding to it. */ html body .page--product-details .dp-pdp-clean-layout .product-summary__info--actions > .product-action--add-to-cart, html body .page--product-details .dp-pdp-clean-layout .product-summary__info--actions > .premium-whatsapp-action { min-height: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; } html body .page--product-details .dp-pdp-clean-layout .product-summary__info--actions .product-action--add-to-cart .btn, html body .page--product-details .dp-pdp-clean-layout .product-summary__info--actions .premium-whatsapp-action a { min-height: var(--pdp-cta-height) !important; height: auto !important; padding: 0 16px !important; border-radius: 8px !important; font-size: 15px !important; } /* Stock row: same native strings, tighter line (dot + real label on one line, then the real admin-configured delivery hint, one step smaller). */ html body .page--product-details .dp-pdp-clean-layout .dp-stock-zone { gap: 4px !important; } html body .page--product-details .dp-pdp-clean-layout .dp-stock-zone .product-summary__info--availability { font-size: 13px !important; line-height: 1.2 !important; } html body .page--product-details .dp-pdp-clean-layout .dp-stock-zone .product-summary__info--available, html body .page--product-details .dp-pdp-clean-layout .dp-stock-zone .product-summary__info--limited, html body .page--product-details .dp-pdp-clean-layout .dp-stock-zone .product-summary__info--unavailable { font-size: 13px !important; font-weight: 700 !important; line-height: 1.2 !important; } html body .page--product-details .dp-pdp-clean-layout .dp-stock-zone .product-summary__info--shipping { max-width: 300px !important; font-size: 11.5px !important; line-height: 1.35 !important; } /* Real promo label next to the old price (the same value the gallery badge shows, from the same source: product.promo_types.price_discount). */ html body .page--product-details .dp-pdp-clean-layout .premium-price-block .dp-price-discount { grid-row: 1 !important; grid-column: 2 !important; justify-self: start !important; display: inline-flex !important; align-items: center !important; min-height: 19px !important; padding: 1px 6px !important; border-radius: 5px !important; background: var(--pdp-red) !important; color: #fff !important; font-size: 11px !important; font-weight: 800 !important; line-height: 1.3 !important; white-space: nowrap !important; } /* Price block keeps its hierarchy, one step tighter. The 36px minimum is the shop's own mobile value, so small screens are not touched. */ html body .page--product-details .dp-pdp-clean-layout .premium-price-block .product-summary__info--price-gross { font-size: clamp(36px, 2.6vw, 40px) !important; line-height: 1.02 !important; } html body .page--product-details .dp-pdp-clean-layout .premium-price-block .product-summary__info--old-price-gross { font-size: 13px !important; } /* Meta row: the real brand logo is capped so the stars stay one line. */ html body .page--product-details .dp-pdp-clean-layout .dp-pdp-clean-brand, html body .page--product-details .dp-pdp-clean-layout .dp-pdp-clean-brand img { max-height: 26px !important; } /* Narrow desktop: the same two buttons inside a ~470px buy box would ellipsize the WhatsApp label, so the label scales down instead of being cut. At 1440 and wider nothing changes. */ @media (min-width: 768px) and (max-width: 1180px) { html body .page--product-details .dp-pdp-clean-layout .product-summary__info--actions .premium-whatsapp-action a { gap: 6px !important; padding: 0 12px !important; } html body .page--product-details .dp-pdp-clean-layout .product-summary__info--actions .premium-whatsapp-action a svg { width: 16px !important; height: 16px !important; } html body .page--product-details .dp-pdp-clean-layout .product-summary__info--actions .premium-whatsapp-action a > span, html body .page--product-details .dp-pdp-clean-layout .product-summary__info--actions .premium-whatsapp-action a .premium-whatsapp-action__label { font-size: 12px !important; } } /* ================================================================== 27.5 PASS 3 — CONTENT NAV (compact intrinsic items) + CONTENT BODY. ================================================================== */ /* The bar stops being three equal thirds: every tab is as wide as its own label, the shop's pill language is kept for the active tab, and any number of tabs keeps flowing from the left. */ html body .page--product-details .dp-product-content-clean > .product-content__tabs { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: flex-start !important; gap: 6px 26px !important; width: 100% !important; margin: 0 0 14px !important; padding: 0 0 12px !important; border: 0 !important; border-bottom: 1px solid var(--pc-line) !important; border-radius: 0 !important; background: transparent !important; } html body .page--product-details .dp-product-content-clean .product-content__tabs .nav-item { flex: 0 0 auto !important; width: auto !important; min-width: 0 !important; margin: 0 !important; text-align: left !important; } html body .page--product-details .dp-product-content-clean .product-content__tabs .nav-link { width: auto !important; min-height: 38px !important; padding: 7px 16px !important; border-radius: 999px !important; font-size: 14px !important; font-weight: 700 !important; white-space: nowrap !important; text-align: left !important; } /* Content body: lighter frame, stronger headings, tighter rhythm. */ html body .page--product-details .dp-product-content-clean .product-content__block { margin: 0 0 22px !important; } html body .page--product-details .dp-product-content-clean .product-content__block-heading { margin: 0 0 12px !important; font-size: clamp(20px, 1.6vw, 24px) !important; letter-spacing: -.015em !important; } html body .page--product-details .dp-product-content-clean .dp-content-split__side > * { padding: 11px 13px !important; border-color: #e9eff6 !important; border-radius: 10px !important; box-shadow: none !important; } html body .page--product-details .dp-product-content-clean .dp-product-description__body { font-size: 14.5px !important; line-height: 1.7 !important; } /* Mobile: the tabs stay one row and scroll horizontally instead of wrapping to a second line. */ @media (max-width: 767px) { html body .page--product-details .dp-product-content-clean > .product-content__tabs { flex-wrap: nowrap !important; overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; padding-bottom: 10px !important; } html body .page--product-details .dp-product-content-clean > .product-content__tabs::-webkit-scrollbar { display: none !important; } } /* ================================================================== 27.6 PASS 4 — TRUST STRIP, GALLERY, STICKY POLISH. ================================================================== */ /* Trust: one flat strip of single-line claims, no card weight. */ html body .page--product-details .dp-pdp-clean-layout .premium-trust-strip { padding: 11px 0 0 !important; } html body .page--product-details .dp-pdp-clean-layout .premium-trust-strip > .premium-trust-item, html body .page--product-details .dp-pdp-clean-layout .premium-trust-strip > div:not(.premium-trust-payment) { grid-template-columns: 26px minmax(0, 1fr) !important; gap: 8px !important; } html body .page--product-details .dp-pdp-clean-layout .premium-trust-icon { width: 26px !important; height: 26px !important; flex: 0 0 26px !important; } html body .page--product-details .dp-pdp-clean-layout .premium-trust-icon svg { width: 14px !important; height: 14px !important; } html body .page--product-details .dp-pdp-clean-layout .premium-trust-payment { margin: 9px 0 0 !important; padding: 7px 0 0 !important; } /* Gallery: the real photo is shown whole (contain) instead of being cropped by the frame; the frame keeps its own size, so the hero geometry does not move. Scoped to >=768px: measured neutral at 1440/1920 (frame 621x475 vs photo 450x337) and the <=767px mobile framing stays exactly as the shop renders it. */ @media (min-width: 768px) { html body .page--product-details .dp-pdp-clean-layout .product-summary__main-images .splide__slide img, html body .page--product-details .dp-pdp-clean-layout .product-summary__main-image-wrapper img { object-fit: contain !important; background: #f7f9fc !important; } } /* Sticky bar: stays in the 64-76px band, flat real content. */ html body .page--product-details .dp-pdp-sticky { box-shadow: 0 -6px 22px rgba(15, 35, 65, .12) !important; } html body .page--product-details .dp-pdp-sticky__name { font-size: 13px !important; } /* Mobile: the 4 real claims in two columns (2x2) instead of one per row. */ @media (max-width: 767px) { html body .page--product-details .dp-pdp-clean-layout .premium-trust-strip { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px 12px !important; } html body .page--product-details .dp-pdp-clean-layout .premium-trust-strip > .premium-trust-item, html body .page--product-details .dp-pdp-clean-layout .premium-trust-strip > div:not(.premium-trust-payment) { grid-template-columns: 24px minmax(0, 1fr) !important; gap: 7px !important; } html body .page--product-details .dp-pdp-clean-layout .premium-trust-icon { width: 24px !important; height: 24px !important; flex: 0 0 24px !important; } } /* ---- dp-pdp-content-rebalance-styles ---- */ /* ============================================================================ DP PDP CONTENT REBALANCE — STAGED LAYER (NOT PUBLISHED) Scope: presentation only. Mobile design untouched except the bottom sticky bar. Applies to: html body .page--product-details Desktop composition hooks are added by desktop_rebalance.js (class dp-cb-ready). ============================================================================ */ /* --------------------------------------------------------------------------- 1. MOBILE — bottom sticky purchase bar removed (single consolidated rule). The theme JS may still unhide the aside on scroll; display:none wins. --------------------------------------------------------------------------- */ @media (max-width: 767px) { html body .page--product-details .dp-pdp-sticky { display: block !important; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)) !important; } html body .page--product-details .dp-pdp-sticky[hidden] { display: none !important; } } /* --------------------------------------------------------------------------- 2. DESKTOP (>=1024px) — content composition. Only active after the sectionizer has run (dp-cb-ready), so a JS failure leaves the current design exactly as it is today. --------------------------------------------------------------------------- */ @media (min-width: 1024px) { html body .page--product-details .dp-product-description__body.dp-cb-ready { display: block !important; } /* lead paragraph keeps the reader's attention, full width */ html body .page--product-details .dp-product-description__body.dp-cb-ready > .dp-cb-lead { max-width: 80ch; font-size: 16px; line-height: 1.54; margin: 0 0 12px; } /* row grid: main column + decision-support column */ html body .page--product-details .dp-product-description__body.dp-cb-ready > .dp-cb-row { display: grid; grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr); gap: 8px 34px; align-items: start; padding: 7px 0; border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent); } html body .page--product-details .dp-product-description__body.dp-cb-ready > .dp-cb-row:first-of-type { border-top: 0; padding-top: 0; } html body .page--product-details .dp-product-description__body.dp-cb-ready > .dp-cb-row.dp-cb-row--single { grid-template-columns: minmax(0, 1fr); } html body .page--product-details .dp-product-description__body.dp-cb-ready > .dp-cb-row.dp-cb-row--wide { grid-template-columns: minmax(0, 1fr); } /* sections */ html body .page--product-details .dp-product-description__body.dp-cb-ready .dp-cb-sec > h3 { margin: 0 0 6px; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; opacity: .72; } html body .page--product-details .dp-product-description__body.dp-cb-ready .dp-cb-sec > p { margin: 0 0 6px; line-height: 1.52; } html body .page--product-details .dp-product-description__body.dp-cb-ready .dp-cb-sec > ul { margin: 4px 0 0; } html body .page--product-details .dp-product-description__body.dp-cb-ready .dp-cb-sec > ul > li { margin: 2px 0; } html body .page--product-details .dp-product-description__body.dp-cb-ready .dp-cb-sec > p:last-child, html body .page--product-details .dp-product-description__body.dp-cb-ready .dp-cb-sec > ul:last-child { margin-bottom: 0; } /* the right column reads as decision support, slightly quieter typography */ html body .page--product-details .dp-product-description__body.dp-cb-ready .dp-cb-row__side { background: color-mix(in srgb, currentColor 4%, transparent); border: 1px solid color-mix(in srgb, currentColor 10%, transparent); border-radius: 12px; padding: 9px 12px; } @media (prefers-reduced-motion: no-preference) { html body .page--product-details .dp-product-description__body.dp-cb-ready .dp-cb-row__side { transition: none; } } /* benefits — compact scan-friendly items (content unchanged) */ html body .page--product-details .dp-product-description__body.dp-cb-ready .dp-cb-sec[data-cb="beneficii"] ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; } html body .page--product-details .dp-product-description__body.dp-cb-ready .dp-cb-sec[data-cb="beneficii"] li { position: relative; padding-left: 20px; line-height: 1.45; } html body .page--product-details .dp-product-description__body.dp-cb-ready .dp-cb-sec[data-cb="beneficii"] li::before { content: "\2713"; position: absolute; left: 0; top: 0; opacity: .55; font-weight: 700; } /* specifications — label / value grid instead of a plain bullet list */ html body .page--product-details .dp-product-description__body.dp-cb-ready .dp-cb-specs { display: grid; grid-template-columns: minmax(150px, max-content) minmax(0, 1fr); gap: 0; margin: 0; padding: 0; list-style: none; border: 1px solid color-mix(in srgb, currentColor 10%, transparent); border-radius: 10px; overflow: hidden; } html body .page--product-details .dp-product-description__body.dp-cb-ready .dp-cb-specs > li { display: contents; } html body .page--product-details .dp-product-description__body.dp-cb-ready .dp-cb-specs > li > .dp-cb-specs__k, html body .page--product-details .dp-product-description__body.dp-cb-ready .dp-cb-specs > li > .dp-cb-specs__v { padding: 4px 10px; border-top: 1px solid color-mix(in srgb, currentColor 8%, transparent); line-height: 1.45; } html body .page--product-details .dp-product-description__body.dp-cb-ready .dp-cb-specs > li:first-child > .dp-cb-specs__k, html body .page--product-details .dp-product-description__body.dp-cb-ready .dp-cb-specs > li:first-child > .dp-cb-specs__v { border-top: 0; } html body .page--product-details .dp-product-description__body.dp-cb-ready .dp-cb-specs > li > .dp-cb-specs__k { font-weight: 600; background: color-mix(in srgb, currentColor 4%, transparent); } html body .page--product-details .dp-product-description__body.dp-cb-ready .dp-cb-specs > li.dp-cb-specs__row--plain > .dp-cb-specs__v { grid-column: 1 / -1; } /* applications — compact tiles instead of a long bullet list */ html body .page--product-details .dp-product-description__body.dp-cb-ready .dp-cb-sec[data-cb="aplicatii"] ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; } html body .page--product-details .dp-product-description__body.dp-cb-ready .dp-cb-sec[data-cb="aplicatii"] li { border: 1px solid color-mix(in srgb, currentColor 14%, transparent); border-radius: 999px; padding: 4px 11px; line-height: 1.35; } /* documents — download cards */ html body .page--product-details .dp-product-description__body.dp-cb-ready .dp-cb-docs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 8px; } html body .page--product-details .dp-product-description__body.dp-cb-ready .dp-cb-doc { display: flex; align-items: center; gap: 10px; border: 1px solid color-mix(in srgb, currentColor 12%, transparent); border-radius: 10px; padding: 8px 12px; text-decoration: none; } html body .page--product-details .dp-product-description__body.dp-cb-ready .dp-cb-doc::before { content: "PDF"; font-size: 10.5px; letter-spacing: .06em; font-weight: 700; border: 1px solid color-mix(in srgb, currentColor 25%, transparent); border-radius: 5px; padding: 2px 5px; opacity: .75; flex: 0 0 auto; } /* FAQ — compact semantic disclosure (details/summary, no JS) */ html body .page--product-details .dp-product-description__body.dp-cb-ready .dp-cb-sec[data-cb="faq"] details { border-top: 1px solid color-mix(in srgb, currentColor 10%, transparent); padding: 6px 0; } html body .page--product-details .dp-product-description__body.dp-cb-ready .dp-cb-sec[data-cb="faq"] details > summary { cursor: pointer; font-weight: 600; line-height: 1.45; list-style: none; } html body .page--product-details .dp-product-description__body.dp-cb-ready .dp-cb-sec[data-cb="faq"] details > summary::-webkit-details-marker { display: none; } html body .page--product-details .dp-product-description__body.dp-cb-ready .dp-cb-sec[data-cb="faq"] details > summary::after { content: "+"; float: right; opacity: .5; font-weight: 700; } html body .page--product-details .dp-product-description__body.dp-cb-ready .dp-cb-sec[data-cb="faq"] details[open] > summary::after { content: "\2212"; } html body .page--product-details .dp-product-description__body.dp-cb-ready .dp-cb-sec[data-cb="faq"] details > .dp-cb-faq__a { padding-top: 4px; } /* consultation affordance inside a decision-support column (only real links) */ html body .page--product-details .dp-product-description__body.dp-cb-ready .dp-cb-cta { margin-top: 8px; padding-top: 8px; border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent); } html body .page--product-details .dp-product-description__body.dp-cb-ready .dp-cb-cta__title { font-weight: 600; display: block; margin-bottom: 6px; } html body .page--product-details .dp-product-description__body.dp-cb-ready .dp-cb-cta__links { display: flex; flex-wrap: wrap; gap: 8px; } html body .page--product-details .dp-product-description__body.dp-cb-ready .dp-cb-cta__links a { display: inline-flex; align-items: center; gap: 6px; border: 1px solid color-mix(in srgb, currentColor 16%, transparent); border-radius: 999px; padding: 5px 12px; text-decoration: none; line-height: 1.35; } } /* ---- dp-pdp-desc-layout-styles ---- */ /* ============================================================================ DP PDP DESCRIPTION LAYOUT — ETAPA D Prezentare doar. Desktop (>=1024px). Mobilul rămâne neatins. Selecatorii includ .dp-product-content-clean pentru a egala specificitatea stratului de bază (blocul este mai jos în sursă, deci câștigă la egalitate). ============================================================================ */ @media (min-width: 1024px) { html body .page--product-details .dp-product-content-clean .product-content__block--description.dp-content-split { grid-template-columns: minmax(0, 1fr) !important; gap: 14px 0 !important; } html body .page--product-details .dp-product-content-clean .product-content__block--description.dp-content-split > .dp-product-description__body, html body .page--product-details .dp-product-content-clean .product-content__block--description.dp-content-split > .dp-content-split__side { grid-column: 1 / -1 !important; max-width: 1080px !important; } html body .page--product-details .dp-product-content-clean .product-content__block--description.dp-content-split > .dp-content-split__side { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 8px 18px !important; height: auto !important; min-height: 0 !important; padding: 12px 16px !important; border: 1px solid rgba(43, 90, 163, .18) !important; border-radius: 12px !important; background: rgba(43, 90, 163, .05) !important; } html body .page--product-details .dp-product-content-clean .product-content__block--description.dp-content-split > .dp-content-split__side > * { margin: 0 !important; } html body .page--product-details .dp-product-content-clean .dp-product-description__body.dp-cb-ready { font-size: 15.5px !important; line-height: 1.62 !important; } html body .page--product-details .dp-product-content-clean .dp-product-description__body.dp-cb-ready > .dp-cb-row { grid-template-columns: minmax(0, 1fr) !important; gap: 6px !important; padding: 14px 0 !important; } html body .page--product-details .dp-product-content-clean .dp-product-description__body.dp-cb-ready > .dp-cb-row > .dp-cb-row__side { padding: 12px 16px !important; } html body .page--product-details .dp-product-content-clean .dp-product-description__body.dp-cb-ready > .dp-cb-lead { max-width: 94ch !important; font-size: 16.5px !important; line-height: 1.6 !important; margin: 0 0 14px !important; } html body .page--product-details .dp-product-content-clean .dp-product-description__body.dp-cb-ready p, html body .page--product-details .dp-product-content-clean .dp-product-description__body.dp-cb-ready li { font-size: 15.5px !important; line-height: 1.62 !important; } html body .page--product-details .dp-product-content-clean .dp-product-description__body.dp-cb-ready .dp-cb-sec > h3 { font-size: 13.5px !important; margin: 0 0 8px !important; } html body .page--product-details .dp-product-content-clean .dp-product-description__body.dp-cb-ready .dp-cb-specs { grid-template-columns: minmax(200px, 32%) minmax(0, 1fr) !important; } html body .page--product-details .dp-product-content-clean .dp-product-description__body.dp-cb-ready .dp-cb-specs > li > .dp-cb-specs__k, html body .page--product-details .dp-product-content-clean .dp-product-description__body.dp-cb-ready .dp-cb-specs > li > .dp-cb-specs__v { padding: 8px 12px !important; } html body .page--product-details .dp-product-content-clean .dp-product-description__body.dp-cb-ready .dp-cb-doc { max-width: 460px !important; } html body .page--product-details .dp-product-content-clean .dp-product-description__body.dp-cb-ready table { width: 100% !important; max-width: 100% !important; } } /* tabele lațe: derulare orizontală doar pe ecrane mici */ @media (max-width: 767px) { html body .page--product-details .dp-product-content-clean .product-content__blocks table { display: block !important; max-width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; } } /* ----------------------------------------------------------------- 60. PĂRERI CLIENȚI (social proof) Randate din snippets/custom/dp_product_reviews.html.twig. Doar CSS de prezentare: fără JS, fără imagini, fără font nou. */ html body .page--product-details .dp-social { margin: 26px 0 0; padding: 22px 22px 6px; background: #fff; border: 1px solid var(--pdp-line); border-radius: 14px; box-shadow: 0 8px 24px rgba(11, 40, 88, .04); } html body .page--product-details .dp-social *, html body .page--product-details .dp-social *::before, html body .page--product-details .dp-social *::after { box-sizing: border-box; } html body .page--product-details .dp-social__head { margin: 0 0 16px; } html body .page--product-details .dp-social__title { margin: 0 0 5px; font-size: 19px; font-weight: 750; line-height: 1.25; color: var(--pdp-ink); } html body .page--product-details .dp-social__sub { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--pdp-muted); } html body .page--product-details .dp-social__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 16px; padding: 0; list-style: none; } /* 5 carduri în 2 coloane: ultimul ocupă toată lățimea, fără celulă goală. */ html body .page--product-details .dp-social__list > .dp-social-card:last-child:nth-child(odd) { grid-column: 1 / -1; } html body .page--product-details .dp-social-card { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 15px 16px; background: var(--pdp-soft); border: 1px solid var(--pdp-line-soft); border-radius: 12px; } html body .page--product-details .dp-social-card__top { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } html body .page--product-details .dp-social-card__avatar { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: #e3edf8; color: var(--pdp-blue); font-size: 12.5px; font-weight: 800; line-height: 1; } html body .page--product-details .dp-social-card__name { font-size: 13.5px; font-weight: 700; color: var(--pdp-ink); } html body .page--product-details .dp-social-card__stars { display: inline-flex; gap: 1px; margin-left: auto; color: var(--pdp-gold); font-size: 13px; line-height: 1; } html body .page--product-details .dp-social-card__text { margin: 0; font-size: 14px; line-height: 1.55; color: var(--pdp-ink-soft); } html body .page--product-details .dp-social-card__date { font-size: 12px; line-height: 1.2; color: var(--pdp-muted); } @media (max-width: 860px) { html body .page--product-details .dp-social { padding: 18px 16px 4px; border-radius: 12px; } html body .page--product-details .dp-social__title { font-size: 17.5px; } html body .page--product-details .dp-social__list { grid-template-columns: 1fr; gap: 10px; } html body .page--product-details .dp-social__list > .dp-social-card:last-child:nth-child(odd) { grid-column: auto; } html body .page--product-details .dp-social-card { padding: 14px; } }