/* Pikkuvihreä 2027 — Phase 3: product page (design 2d desktop, 2e mobile). * Loaded on single products after pv2027-catalog.css (breadcrumb, card, help box). * The buy box keeps plugin markup (WooThumbs, Bundles, B2BKing, CusRev, Omnibus): * these rules restyle it, they do not replace it. */ .single-product #masthead.pv-header { margin-bottom: 0; } .pv-product { font: var(--pv-body); color: #000; } .pv-product :focus-visible { outline: 3px solid var(--pv-green-dark); outline-offset: 2px; } /* ---- top: gallery | buy box ---- */ .pv-pdp { padding-top: 18px; padding-bottom: 40px; } .pv-pdp .pv-crumbs { margin-bottom: 20px; } .pv-pdp__top { display: grid; grid-template-columns: minmax(0, 1fr) 520px; gap: 56px; align-items: start; } .pv-pdp__gallery { position: relative; min-width: 0; } .pv-pdp__buy { min-width: 0; display: flex; flex-direction: column; gap: 14px; float: none !important; width: auto !important; } .pv-pdp__buy > * { margin-top: 0 !important; margin-bottom: 0 !important; } .pv-pdp__eyebrow { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .pv-pill { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; background: var(--pv-green-ink); color: #fff; font: 700 12px var(--pv-font); letter-spacing: .2px; } .pv-pill--sale { background: var(--pv-sale); } .pv-pdp__brand { font: 600 13px var(--pv-font); color: #444; text-transform: uppercase; letter-spacing: .6px; } .pv-pdp__buy .product_title { font: 700 32px/1.2 var(--pv-font) !important; letter-spacing: -.6px; color: var(--pv-green-dark); text-align: left; padding: 0; } /* rating (CusRev summary next to Woo's star widget) */ .pv-pdp__buy .woocommerce-product-rating { display: flex; align-items: center; gap: 10px; cursor: pointer; font: 500 14px var(--pv-font); } .pv-pdp__buy .woocommerce-product-rating .star-rating { margin: 0 !important; float: none; color: var(--pv-green-dark); } .pv-pdp__buy .pv-rating-summary { display: inline-flex; gap: 6px; } .pv-pdp__buy .pv-rating-count { color: #444; text-decoration: underline; } /* price: once, black */ .pv-pdp__buy > p.price { font: 700 36px/1.15 var(--pv-font) !important; color: #000 !important; } .pv-pdp__buy p.price .woocommerce-price-suffix { font: 400 14px var(--pv-font); color: #444; } .pv-pdp__buy p.price del { font-size: 20px; font-weight: 400; color: #666; } .pv-pdp__buy p.price ins { text-decoration: none; color: var(--pv-sale); } .pv-pdp__buy .price .b2bking_retail_price_text { display: none; } .pv-pdp__buy .price .b2bking_retail_price_price br { display: none; } .pv-pdp__buy .price .b2bking_b2b_price_text { display: block; margin-top: 4px; font: 500 13px var(--pv-font); color: #555; } .pv-pdp__buy .price .b2bking_b2b_price_price { font: 500 13px var(--pv-font); color: #555; } .pv-pdp__buy .price .b2bking_b2b_price_price del { font-size: 12px; } .pv-pdp__buy .price .b2bking_b2b_price_price ins { color: #555; } .pv-pdp__buy .prod-offer-length { font: 600 14px var(--pv-font); color: var(--pv-sale); } .pv-pdp__buy [data-target="#omnibusCenter"] { padding: 0; font: 500 13px var(--pv-font); color: var(--pv-green-dark) !important; display: inline-flex !important; gap: 6px; align-items: center; align-self: flex-start; } /* key facts */ .pv-pdp__facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font: 500 15px/1.4 var(--pv-font); } .pv-pdp__facts li { display: flex; gap: 12px; align-items: center; padding: 0; } .pv-pdp__facts li::before { content: none !important; } .pv-pdp__facticon { width: 32px; height: 32px; flex: none; display: inline-flex; align-items: center; justify-content: center; background: #E2EFDC; color: var(--pv-green-dark); font-size: 14px; } /* Product Bundles: optional items as full-width selectable rows */ .pv-pdp__subhead { font: 700 16px var(--pv-font) !important; margin: 6px 0 -4px !important; padding: 0; text-align: left; } .pv-pdp__buy form.cart { margin: 0 !important; display: flex; flex-direction: column; gap: 14px; } .pv-pdp__buy .bundled_product { display: grid !important; grid-template-columns: 64px minmax(0, 1fr); gap: 6px 14px; align-items: center; border: 1px solid #CFCFCF; padding: 12px 14px; margin: 0 !important; width: auto !important; float: none !important; cursor: pointer; background: #fff; } .pv-pdp__buy .bundled_product:hover { border-color: var(--pv-green-dark); } .pv-pdp__buy .bundled_product:has(.bundled_product_checkbox:checked) { border-color: var(--pv-green-dark); box-shadow: inset 0 0 0 1px var(--pv-green-dark); background: #F6FAF4; } .pv-pdp__buy .bundled_product_images { grid-row: 1 / span 3; width: 64px !important; margin: 0 !important; float: none !important; } .pv-pdp__buy .bundled_product_images img { width: 64px; height: 64px; object-fit: cover; display: block; } .pv-pdp__buy .bundled_product .details { min-width: 0; width: auto !important; float: none !important; padding: 0 !important; display: flex; flex-direction: column; gap: 4px; } .pv-pdp__buy .bundled_product_title { font: 600 15px/1.3 var(--pv-font) !important; margin: 0 !important; } .pv-pdp__buy .bundled_product_excerpt { font: 400 13px/1.45 var(--pv-font); color: #444; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .pv-pdp__buy .bundled_product_excerpt p { margin: 0; } .pv-pdp__buy .bundled_product_optional_checkbox { display: flex !important; gap: 8px; align-items: center; flex-wrap: wrap; font: 500 14px var(--pv-font); margin: 0; cursor: pointer; } .pv-pdp__buy .bundled_product_optional_checkbox input { width: 18px; height: 18px; accent-color: var(--pv-green-dark); margin: 0; } .pv-pdp__buy .bundled_product_optional_checkbox .price { font-weight: 700; } .pv-pdp__buy .bundled_product .price del { color: #666; font-weight: 400; } .pv-pdp__buy .bundled_product .price ins { color: var(--pv-sale); text-decoration: none; } .pv-pdp__buy .bundled_product .b2bking_retail_price_text, .pv-pdp__buy .bundled_product .b2bking_b2b_price_text, .pv-pdp__buy .bundled_product .b2bking_b2b_price_price { display: none; } .pv-pdp__buy .bundled_product .variations { margin: 4px 0 0 !important; } .pv-pdp__buy .bundle_price .price { font: 700 20px var(--pv-font); color: #000; } /* stock + delivery */ .pv-stockrow { display: flex; flex-wrap: wrap; gap: 6px 20px; font: 500 14px var(--pv-font); } .pv-stockrow p { margin: 0 !important; display: inline-flex; gap: 8px; align-items: center; } .pv-stockrow .stock.in-stock { color: var(--pv-green-dark) !important; font-weight: 600; } .pv-stockrow .stock::before, .pv-stockrow .stock::after { content: none !important; display: none !important; } /* the parent adds its own tick: two icons */ .pv-stockrow .stock.out-of-stock { color: var(--pv-sale) !important; font-weight: 600; } .pv-stockrow .stock.available-on-backorder { color: #8A5A00 !important; font-weight: 600; } .pv-stockrow__eta { color: #222; } .pv-stockrow__eta i { color: var(--pv-green-dark); } /* quantity + add to cart: square, flat, 58 px */ .pv-pdp__buy .quantity { margin: 0 !important; } .pv-pdp__buy .quantity .qty { height: 58px; width: 76px; border: 1px solid #CFCFCF; border-radius: 0; font: 600 16px var(--pv-font); text-align: center; } .pv-pdp__buy .single_add_to_cart_button { height: 58px; min-width: 240px; border-radius: 0 !important; background: var(--pv-green-ink) !important; background-image: none !important; box-shadow: none !important; border: 0 !important; color: #fff !important; font: 700 16px var(--pv-font) !important; text-transform: none !important; padding: 0 28px !important; flex: 1; } .pv-pdp__buy .single_add_to_cart_button:hover, .pv-pdp__buy .single_add_to_cart_button:focus { background: var(--pv-green-dark) !important; } .pv-pdp__buy .single_add_to_cart_button.disabled { opacity: .5; } /* Quantity and button on ONE row (review #10: on simple products the parent's .quantity took the whole width and its 238 px button cap stacked the cart icon above a squeezed label). The parent's own up/down arrows stay, inside the box. */ .pv-pdp__buy .woocommerce-variation-add-to-cart, .pv-pdp__buy .bundle_button, .pv-pdp__buy form.cart:not(.bundle_form):not(.variations_form) { display: flex !important; flex-direction: row !important; gap: 12px; align-items: stretch; flex-wrap: nowrap !important; } .pv-pdp__buy form.cart .quantity { position: relative; flex: 0 0 96px !important; width: 96px !important; max-width: 96px !important; height: 58px; display: block !important; float: none !important; padding: 0 !important; border: 0 !important; background: #fff; } .pv-pdp__buy form.cart .quantity .qty { width: 100% !important; height: 58px !important; margin: 0 !important; padding: 0 30px 0 6px !important; float: none !important; -moz-appearance: textfield; } .pv-pdp__buy form.cart .quantity .qty::-webkit-outer-spin-button, .pv-pdp__buy form.cart .quantity .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .pv-pdp__buy form.cart .quantity-nav { position: absolute !important; top: 1px !important; right: 1px !important; bottom: 1px !important; left: auto !important; width: 28px !important; height: auto !important; display: flex !important; flex-direction: column; border-left: 1px solid #E3E3E3; margin: 0 !important; transform: none !important; } .pv-pdp__buy form.cart .quantity-button { position: static !important; flex: 1; width: auto !important; height: auto !important; display: flex !important; align-items: center; justify-content: center; margin: 0 !important; transform: none !important; border: 0 !important; background: #fff !important; color: var(--pv-green-dark) !important; font-size: 11px !important; line-height: 1 !important; cursor: pointer; } .pv-pdp__buy form.cart .quantity-button + .quantity-button { border-top: 1px solid #E3E3E3 !important; } .pv-pdp__buy form.cart .quantity-button:hover { background: #F4F4F4 !important; } .pv-pdp__buy .single_add_to_cart_button { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 10px; width: auto !important; max-width: none !important; min-height: 58px; height: 58px !important; align-self: center; line-height: 1.2 !important; margin: 0 !important; float: none !important; white-space: nowrap; } .pv-pdp__buy .single_add_to_cart_button i { position: static !important; margin: 0 !important; transform: none !important; font-size: 18px !important; line-height: 1 !important; display: inline-block !important; } .pv-pdp__buy .single_add_to_cart_button .add-to-cart_text { position: static !important; margin: 0 !important; display: inline !important; } .pv-pdp__buy .bundle_button .quantity, .pv-pdp__buy .woocommerce-variation-add-to-cart .quantity { flex: 0 0 96px !important; } .pv-pdp__buy .bundle_data .bundle_wrap { display: flex; flex-direction: column; gap: 12px; } .pv-pdp__expert { font: 400 14px var(--pv-font); color: #333; display: flex; gap: 8px; align-items: center; } .pv-pdp__expert i { color: var(--pv-green-dark); } .pv-pdp__expert a, .pv-pdp__expert a:visited { color: var(--pv-green-dark); font-weight: 600; text-decoration: underline; } .pv-pdp__buy .deliverypriceform { margin: 4px 0 !important; max-width: none; background: var(--pv-grey); } /* ---- anchor nav ---- */ .pv-anchors { position: sticky; top: 0; z-index: 20; background: #fff; border-top: 1px solid #E3E3E3; border-bottom: 1px solid #E3E3E3; } .admin-bar .pv-anchors { top: 32px; } .pv-anchors ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 36px; } .pv-anchors li::before { content: none !important; } .pv-anchors a, .pv-anchors a:visited { display: block; padding: 16px 0 13px; border-bottom: 3px solid transparent; font: 600 14px var(--pv-font); color: #000; text-decoration: none; } .pv-anchors a:hover, .pv-anchors a.is-active { border-bottom-color: var(--pv-green-dark); color: var(--pv-green-dark); } /* ---- sections ---- */ .pv-sec { padding: 48px 0 8px; scroll-margin-top: 70px; } .pv-sec__title { font: 700 26px/1.25 var(--pv-font) !important; letter-spacing: -.4px; color: #000; margin: 0 0 20px !important; padding: 0; text-align: left; } .pv-sec__title.is-plain { margin-bottom: 24px !important; } .pv-sec__sub { font: 700 17px var(--pv-font) !important; margin: 24px 0 10px !important; } .pv-sec__toggle { display: none; } .pv-pdp__info.has-two { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 56px; } /* spec table: the editors' existing table, made calm */ .pv-specs { overflow-x: auto; font: 400 14px/1.5 var(--pv-font); } .pv-specs table { width: 100%; border-collapse: collapse; margin: 0 0 12px; border: 0; } .pv-specs th, .pv-specs td { border: 0 !important; border-bottom: 1px solid #E3E3E3 !important; padding: 11px 12px 11px 0 !important; text-align: left; vertical-align: top; background: none !important; } .pv-specs th, .pv-specs tr:first-child td { font-weight: 600; color: #444; } .pv-specs td { color: #000; } .pv-specs p { margin: 0 0 10px; } .pv-specs a { color: var(--pv-green-dark); text-decoration: underline; } .pv-specs img { max-width: 100%; height: auto; } /* documents */ .pv-docs { list-style: none; margin: 0; padding: 0; border-top: 1px solid #E3E3E3; } .pv-docs li { padding: 0; border-bottom: 1px solid #E3E3E3; } .pv-docs li::before { content: none !important; } .pv-docs a, .pv-docs a:visited { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 4px; color: #000; text-decoration: none; } .pv-docs a:hover .pv-docs__name { text-decoration: underline; } .pv-docs__type { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: var(--pv-beige); color: var(--pv-green-dark); font: 700 12px var(--pv-font); } .pv-docs__name { font: 600 15px/1.35 var(--pv-font); display: flex; flex-direction: column; gap: 2px; } .pv-docs__name small { font: 400 12px var(--pv-font); color: #555; } .pv-docs i { color: var(--pv-green-dark); } /* description (+ video) */ .pv-desc { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; } .pv-desc.has-video { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: start; } .pv-desc__text { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; } .pv-desc__body { font: 400 15px/1.7 var(--pv-font); max-width: 780px; } .pv-desc__body.is-collapsed { max-height: 360px; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent); } .pv-desc__body h2, .pv-desc__body h3 { font: 700 18px/1.3 var(--pv-font) !important; text-transform: none; letter-spacing: 0; margin: 24px 0 8px !important; text-align: left; } .pv-desc__body p { margin: 0 0 12px; } .pv-desc__body ul { margin: 0 0 12px; padding-left: 20px; } .pv-desc__body a { color: var(--pv-green-dark); text-decoration: underline; } .pv-desc__body img { max-width: 100%; height: auto; } .pv-desc__body iframe { max-width: 100%; } .pv-desc__video { position: sticky; top: 80px; } .pv-desc__video .embed-responsive { background: var(--pv-grey); } .pv-desc__video .embed-responsive-cookie-notice { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px; font: 500 14px/1.5 var(--pv-font); } .pv-desc__video .embed-responsive-cookie-notice a { color: var(--pv-green-dark); text-decoration: underline; } /* other tabs (FAQ, extra videos) as accordions */ .pv-more { margin-top: 28px; border-top: 1px solid #E3E3E3; max-width: 900px; } .pv-more__item { border-bottom: 1px solid #E3E3E3; } .pv-more__item summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 4px; font: 600 16px var(--pv-font); cursor: pointer; } .pv-more__item summary::-webkit-details-marker { display: none; } .pv-more__item summary i { color: var(--pv-green-dark); transition: transform .15s; } .pv-more__item[open] summary i { transform: rotate(180deg); } .pv-more__body { padding: 0 4px 18px; font: 400 15px/1.7 var(--pv-font); } .pv-more__body p { margin: 0 0 10px; } .pv-more__body a { color: var(--pv-green-dark); text-decoration: underline; } .pv-more__body iframe, .pv-more__body img { max-width: 100%; } /* mosaic: 2×2 cards on beige */ .pv-mosaic { background: var(--pv-beige); padding: 56px 0; margin-top: 48px; } .pv-mosaic__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } .pv-mosaic__card { background: #fff; display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: 220px; } .pv-mosaic__card:not(:has(.pv-mosaic__img)) { grid-template-columns: minmax(0, 1fr); } .pv-mosaic__img img { width: 100%; height: 100%; object-fit: cover; display: block; } .pv-mosaic__body { padding: 24px 26px; font: 400 14px/1.6 var(--pv-font); } .pv-mosaic__body h2 { font: 700 19px/1.3 var(--pv-font) !important; color: var(--pv-green-dark); margin: 0 0 8px !important; text-align: left; text-transform: none; } .pv-mosaic__body p { margin: 0 0 8px; } /* accessories (2027 card), reviews, help */ .pv-pdp-acc { padding-top: 56px; scroll-margin-top: 70px; } .pv-pdp-reviews { padding-top: 56px; scroll-margin-top: 70px; } .pv-pdp-reviews__body > * { margin-left: 0 !important; margin-right: 0 !important; } .pv-pdp-help { padding: 48px 0 64px; } .pv-pdp-help .pv-contactbox { margin: 0; } /* mobile buy bar */ .pv-buybar { display: none; } @media (max-width: 1199px) { .pv-pdp__top { grid-template-columns: minmax(0, 1fr) 440px; gap: 36px; } .pv-mosaic__card { grid-template-columns: 160px minmax(0, 1fr); } } @media (max-width: 991px) { .pv-pdp { padding-top: 12px; padding-bottom: 8px; } .pv-pdp__top { grid-template-columns: minmax(0, 1fr); gap: 20px; } .pv-pdp__buy { gap: 12px; } .pv-pdp__buy .product_title { font-size: 24px !important; } .pv-pdp__buy > p.price { font-size: 28px !important; } .pv-pdp__facts { font-size: 14px; } .pv-pdp__buy .single_add_to_cart_button { min-width: 0; } .pv-wrap:has(> #pv-desc) { border-top: 1px solid #E3E3E3; margin-top: 12px; } .pv-wrap:has(> #pv-desc) + .pv-pdp__info { border-top: 0; margin-top: 0; } /* sections as accordions */ .pv-pdp__info.has-two { display: block; } .pv-sec { padding: 0; border-bottom: 1px solid #E3E3E3; } .pv-pdp__info .pv-sec:first-child, .pv-pdp__info + .pv-wrap .pv-sec, .pv-pdp__info:not(.has-two) .pv-sec { border-top: 0; } .pv-pdp__info { border-top: 1px solid #E3E3E3; margin-top: 12px; } .pv-sec.is-collapsible > .pv-sec__title { display: none; } .pv-sec__toggle { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 0; background: none; border: 0; font: 700 17px var(--pv-font); color: #000; text-align: left; cursor: pointer; } .pv-sec__toggle i { color: var(--pv-green-dark); transition: transform .15s; } .pv-sec__count { font-weight: 500; color: #555; } .pv-sec.is-open .pv-sec__toggle i { transform: rotate(180deg); } .pv-sec.is-collapsible:not(.is-open) > .pv-sec__body { display: none; } .pv-sec.is-collapsible > .pv-sec__body { padding-bottom: 20px; } .pv-desc, .pv-desc.has-video { grid-template-columns: minmax(0, 1fr); gap: 20px; } .pv-desc__video { position: static; } .pv-specs th, .pv-specs td { font-size: 13px; } /* horizontal scrollers */ .pv-mosaic { padding: 32px 0; margin-top: 32px; } .pv-mosaic__grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin: 0 -16px; padding: 0 16px 4px; } .pv-mosaic__card { flex: 0 0 82%; scroll-snap-align: start; grid-template-columns: minmax(0, 1fr); grid-template-rows: 160px auto; } .pv-mosaic__card:not(:has(.pv-mosaic__img)) { grid-template-rows: auto; } .pv-mosaic__body { padding: 18px; } .pv-pdp-acc, .pv-pdp-reviews { padding-top: 36px; } .pv-sec__title.is-plain { font-size: 21px !important; margin-bottom: 16px !important; } .pv-grid--scroll { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin: 0 -16px !important; padding: 0 16px 4px !important; } .pv-grid--scroll > .pv-card { flex: 0 0 46% !important; scroll-snap-align: start; } .pv-pdp-help { padding: 32px 0 40px; } /* the bar appears when the real button scrolls away (assets/pv2027.js) */ .pv-buybar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; background: #fff; border-top: 1px solid #DADADA; box-shadow: 0 -4px 16px rgba(0,0,0,.08); padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); gap: 12px; align-items: center; justify-content: space-between; transform: translateY(110%); transition: transform .2s; } .pv-buybar[hidden] { display: flex; visibility: hidden; } .pv-buybar.is-shown { transform: none; visibility: visible; } .pv-buybar__info { display: flex; flex-direction: column; min-width: 0; } .pv-buybar__name { font: 500 12px/1.3 var(--pv-font); color: #444; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pv-buybar__total { font: 700 18px var(--pv-font); } .pv-buybar__btn { height: 48px; flex: none; } body.pv-buybar-on { padding-bottom: 72px; } } /* ---------- 0.7.3: production review 2026-10-21 ---------- */ /* #4 sale price: the parent floats ins/del to the right and colours ins orange */ .pv-pdp__buy > p.price del, .pv-pdp__buy > p.price ins { float: none !important; display: inline !important; } .pv-pdp__buy > p.price ins { color: var(--pv-sale) !important; margin-left: 8px; } /* old price first, as on the cards */ .pv-pdp__buy > p.price del, .pv-pdp__buy > p.price del .amount { color: #666 !important; } /* #5 "Lue koko kuvaus": white on dark green (was dark green on the parent's green button) */ .pv-product .pv-desc__more, .pv-product .pv-desc__more:visited { background: var(--pv-green-dark) !important; border-color: var(--pv-green-dark) !important; color: #fff !important; } .pv-product .pv-desc__more:hover, .pv-product .pv-desc__more:focus { background: #26471F !important; border-color: #26471F !important; color: #fff !important; } /* #12a bundle add-on: WooThumbs' gallery class shrank the image to ~18 px, and the phone title size for the product h1 also hit the add-on's h4.product_title */ .pv-pdp__buy .bundled_product_images .bundled_product_image, .pv-pdp__buy .bundled_product_images img { width: 64px !important; max-width: none !important; height: 64px !important; } @media (max-width: 991px) { .pv-pdp__buy .bundled_product_title { font-size: 15px !important; } } /* #13a the parent caps every