/* ========================================================= HPD PRODUCT PAGE MASTER PRODUCT STYLES ========================================================= */ /* ========================================================= 01 - BUY AT KC HARDWARE BUTTON ========================================================= */ .hpd-product-master .single_add_to_cart_button { background-color: #ff8a00 !important; color: #ffffff !important; border: 2px solid #ff8a00 !important; min-height: 52px !important; padding: 0 26px !important; font-size: 15px !important; font-weight: 700 !important; line-height: 1 !important; border-radius: 4px !important; box-shadow: none !important; transition: background-color 0.15s ease, border-color 0.15s ease; } .hpd-product-master .single_add_to_cart_button:hover { background-color: #e97d00 !important; color: #ffffff !important; border-color: #e97d00 !important; } /* ========================================================= 02 - PRODUCT TITLE ========================================================= */ .hpd-product-master .et_pb_wc_title { margin-bottom: 6px !important; } .hpd-product-master .et_pb_wc_title h1 { font-size: 30px !important; line-height: 1.12 !important; font-weight: 700 !important; color: #111111 !important; margin-bottom: 0 !important; } /* ========================================================= 03 - PRODUCT PRICES ========================================================= */ .hpd-product-master .et_pb_wc_price { margin-top: 0 !important; margin-bottom: 10px !important; } .hpd-product-master .et_pb_wc_price .price, .hpd-product-master .et_pb_wc_price .woocommerce-Price-amount, .hpd-product-master .woocommerce-variation-price .price, .hpd-product-master .woocommerce-variation-price .woocommerce-Price-amount { color: #1f5ebe !important; font-weight: 700 !important; } .hpd-product-master .et_pb_wc_price .price { font-size: 22px !important; line-height: 1.2 !important; } .hpd-product-master .woocommerce-variation-price { margin: 2px 0 12px 0 !important; } .hpd-product-master .woocommerce-variation-price .price { font-size: 20px !important; line-height: 1.2 !important; } /* ========================================================= 04 - PRODUCT BODY TYPOGRAPHY ========================================================= */ .hpd-product-master .et_pb_wc_description { margin-top: 0 !important; margin-bottom: 14px !important; } .hpd-product-master .et_pb_wc_description, .hpd-product-master .et_pb_wc_description p, .hpd-product-master .et_pb_wc_description li { font-size: 15px !important; line-height: 1.55 !important; color: #333333 !important; } .hpd-product-master .et_pb_wc_description p { margin-bottom: 10px !important; } .hpd-product-master .et_pb_wc_description ul, .hpd-product-master .et_pb_wc_description ol { margin-top: 5px !important; margin-bottom: 12px !important; padding-left: 20px !important; } .hpd-product-master .et_pb_wc_description li { margin-bottom: 3px !important; } .hpd-product-master .et_pb_wc_description strong { color: #111111 !important; font-weight: 700 !important; } /* ========================================================= 05 - SHORT PRODUCT INTRO Stays on right above Buy Box ========================================================= */ .hpd-product-master .hpd-product-intro { margin: 0 !important; padding: 0 !important; } .hpd-product-master .hpd-product-intro p:last-child { margin-bottom: 0 !important; } /* ========================================================= 06 - DETAILS MOVED BELOW GALLERY Features / Specs / What's Included ========================================================= */ .hpd-product-master .hpd-product-details-below-gallery { margin-top: 18px !important; padding: 18px 20px !important; background-color: #ffffff !important; border: 1px solid #dfe4e8 !important; border-radius: 6px !important; box-shadow: 0 2px 8px rgba(14, 42, 71, 0.04); } .hpd-product-master .hpd-product-details-below-gallery h2, .hpd-product-master .hpd-product-details-below-gallery h3, .hpd-product-master .hpd-product-details-below-gallery h4, .hpd-product-master .hpd-product-details-below-gallery h5, .hpd-product-master .hpd-product-details-below-gallery h6 { margin-top: 0 !important; margin-bottom: 8px !important; font-size: 16px !important; line-height: 1.3 !important; font-weight: 700 !important; color: #111111 !important; } .hpd-product-master .hpd-product-details-below-gallery p, .hpd-product-master .hpd-product-details-below-gallery li { font-size: 14px !important; line-height: 1.55 !important; color: #333333 !important; } .hpd-product-master .hpd-product-details-below-gallery ul, .hpd-product-master .hpd-product-details-below-gallery ol { margin-top: 5px !important; margin-bottom: 14px !important; padding-left: 20px !important; } .hpd-product-master .hpd-product-details-below-gallery li { margin-bottom: 3px !important; } .hpd-product-master .hpd-product-details-below-gallery > *:last-child { margin-bottom: 0 !important; } /* ========================================================= 07 - BUY BOX Variation + purchase area ========================================================= */ .hpd-product-master .et_pb_wc_add_to_cart { margin-top: 12px !important; padding: 20px 22px 18px 22px !important; background-color: #f8fafc !important; border: 1px solid #d9e0e7 !important; border-radius: 6px !important; box-shadow: 0 2px 8px rgba(14, 42, 71, 0.06) !important; } .hpd-product-master .et_pb_wc_add_to_cart form.cart { margin-top: 0 !important; margin-bottom: 0 !important; } /* ========================================================= 08 - VARIATION BUTTON SYSTEM ========================================================= */ .hpd-product-master .hpd-hide-native-label { display: none !important; } .hpd-product-master .hpd-native-variation-select { position: absolute !important; left: -99999px !important; top: auto !important; width: 1px !important; height: 1px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important; background: none !important; background-image: none !important; border: 0 !important; } .hpd-product-master .et_pb_wc_add_to_cart table.variations { width: 100% !important; margin-top: 0 !important; margin-bottom: 0 !important; } .hpd-product-master .et_pb_wc_add_to_cart table.variations tr { display: block !important; width: 100% !important; } .hpd-product-master .et_pb_wc_add_to_cart table.variations td.value { display: block !important; width: 100% !important; padding: 0 !important; } .hpd-product-master .hpd-variation-group { display: block; width: 100%; margin: 0 0 17px 0; } .hpd-product-master .hpd-variation-title { display: block; margin: 0 0 8px 0; font-size: 15px; line-height: 1.3; font-weight: 700; color: #17202a; } .hpd-product-master .hpd-variation-buttons { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; } .hpd-product-master .hpd-variation-button { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 8px 17px; background-color: #ffffff; color: #222222; border: 1px solid #aeb8c2; border-radius: 4px; font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.2; box-shadow: none; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } .hpd-product-master .hpd-variation-button:hover:not(.is-selected):not(:disabled) { background-color: #f3f6f9; color: #0e2a47; border-color: #0e2a47; } .hpd-product-master .hpd-variation-button.is-selected { background-color: #0e2a47 !important; color: #ffffff !important; border-color: #0e2a47 !important; font-weight: 700; box-shadow: 0 0 0 1px #0e2a47 !important; } .hpd-product-master .hpd-variation-button.is-disabled, .hpd-product-master .hpd-variation-button:disabled { opacity: 0.35; cursor: not-allowed; } .hpd-product-master .hpd-variation-button.is-unavailable { opacity: 0.45; } /* ========================================================= 09 - SELECTED VARIATION PRICE AREA ========================================================= */ .hpd-product-master .single_variation_wrap { margin-top: 2px !important; } .hpd-product-master .woocommerce-variation { margin-top: 0 !important; } .hpd-product-master .woocommerce-variation-price { padding-top: 2px !important; } .hpd-product-master .woocommerce-variation-description { margin-bottom: 8px !important; } .hpd-product-master .woocommerce-variation-availability { margin-bottom: 8px !important; } /* ========================================================= 10 - REMOVE NATIVE DIVI / WOOCOMMERCE ARROWS ========================================================= */ .hpd-product-master table.variations td.value::before, .hpd-product-master table.variations td.value::after, .hpd-product-master table.variations .value::before, .hpd-product-master table.variations .value::after, .hpd-product-master table.variations tr::before, .hpd-product-master table.variations tr::after, .hpd-product-master table.variations td.value > span::before, .hpd-product-master table.variations td.value > span::after { content: none !important; display: none !important; } /* ========================================================= 11 - PURCHASE ACTIONS ========================================================= */ .hpd-product-master .hpd-purchase-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; width: 100%; margin-top: 3px; padding-top: 14px; border-top: 1px solid #dce2e8; } .hpd-product-master .hpd-purchase-actions .single_add_to_cart_button { margin: 0 !important; } .hpd-product-master .hpd-reset-options { display: inline-flex !important; align-items: center; justify-content: center; min-height: 52px; padding: 0 18px; background-color: #ffffff !important; color: #0e2a47 !important; border: 1px solid #0e2a47 !important; border-radius: 4px; font-size: 14px !important; font-weight: 700 !important; line-height: 1 !important; text-decoration: none !important; box-shadow: none !important; transition: background-color 0.15s ease, color 0.15s ease; } .hpd-product-master .hpd-reset-options:hover { background-color: #0e2a47 !important; color: #ffffff !important; } /* ========================================================= 12 - PURCHASE NOTE ========================================================= */ .hpd-product-master .hpd-kc-purchase-note, .hpd-product-master .hpd-purchase-note { display: block; width: 100%; margin-top: 10px !important; padding-top: 9px; border-top: 1px solid #e3e7eb; font-size: 12px !important; line-height: 1.45 !important; color: #666f78 !important; } /* ========================================================= 13 - HIDE LOCAL WOO QUANTITY ========================================================= */ .hpd-product-master form.cart .quantity { display: none !important; } /* ========================================================= 14 - PRODUCT GALLERY BASE ========================================================= */ .hpd-product-master .woocommerce-product-gallery { position: relative !important; margin-bottom: 0 !important; } .hpd-product-master .woocommerce-product-gallery__wrapper { margin-bottom: 0 !important; } .hpd-product-master .woocommerce-product-gallery__image { background-color: #ffffff; } .hpd-product-master .woocommerce-product-gallery__image img { display: block; width: 100%; height: auto; } .hpd-product-master .woocommerce-product-gallery__trigger { z-index: 20 !important; } /* ========================================================= 15 - THUMBNAIL BASE ========================================================= */ .hpd-product-master .woocommerce-product-gallery .flex-control-thumbs { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; margin-top: 10px !important; margin-bottom: 0 !important; padding: 0 !important; list-style: none !important; } .hpd-product-master .woocommerce-product-gallery .flex-control-thumbs li { margin: 0 !important; padding: 0 !important; width: calc(25% - 5px) !important; overflow: hidden; background-color: #ffffff; border: 1px solid #dfe4e8; border-radius: 4px; } .hpd-product-master .woocommerce-product-gallery .flex-control-thumbs li img { display: block !important; width: 100% !important; height: auto !important; margin: 0 !important; opacity: 0.76; cursor: pointer; transition: opacity 0.15s ease, border-color 0.15s ease; } .hpd-product-master .woocommerce-product-gallery .flex-control-thumbs li img:hover { opacity: 1; } .hpd-product-master .woocommerce-product-gallery .flex-control-thumbs li img.flex-active { opacity: 1; } /* ========================================================= 16 - THUMBNAIL WINDOW STATES ========================================================= */ .hpd-product-master .hpd-thumb-hidden { display: none !important; } .hpd-product-master .hpd-thumb-visible { display: block !important; } /* ========================================================= 17 - THUMBNAIL NAVIGATION BUTTONS ========================================================= */ .hpd-product-master .hpd-thumb-nav { display: none; align-items: center; justify-content: center; width: 72px; height: 28px; margin: 0; padding: 0; background-color: #ffffff; color: #0e2a47; border: 1px solid #cfd6dd; border-radius: 4px; font-size: 12px; line-height: 1; cursor: pointer; box-shadow: none; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .hpd-product-master .hpd-thumb-nav:hover:not(:disabled) { background-color: #0e2a47; color: #ffffff; border-color: #0e2a47; } .hpd-product-master .hpd-thumb-nav:disabled { opacity: 0.32; cursor: default; } /* ========================================================= 18 - DESKTOP VERTICAL GALLERY 5 thumbnails maximum visible ========================================================= */ @media only screen and (min-width: 981px) { .hpd-product-master .woocommerce-product-gallery { display: grid !important; grid-template-columns: 72px minmax(0, 1fr) !important; grid-template-rows: 28px auto 28px !important; column-gap: 14px !important; row-gap: 7px !important; align-items: start !important; width: 100% !important; } /* Main image */ .hpd-product-master .woocommerce-product-gallery .flex-viewport { grid-column: 2 !important; grid-row: 1 / 4 !important; width: 100% !important; margin: 0 !important; } /* Fallback if FlexSlider viewport is absent */ .hpd-product-master .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper { grid-column: 2 !important; grid-row: 1 / 4 !important; } /* Thumbnail rail */ .hpd-product-master .woocommerce-product-gallery .flex-control-thumbs { grid-column: 1 !important; grid-row: 2 !important; display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; gap: 7px !important; width: 72px !important; margin: 0 !important; padding: 0 !important; } /* Thumbnail */ .hpd-product-master .woocommerce-product-gallery .flex-control-thumbs li { flex: 0 0 auto !important; width: 72px !important; max-width: 72px !important; margin: 0 !important; padding: 0 !important; background-color: #ffffff !important; border: 1px solid #d7dde3 !important; border-radius: 4px !important; } .hpd-product-master .woocommerce-product-gallery .flex-control-thumbs li img { display: block !important; width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important; } /* Active thumbnail */ .hpd-product-master .woocommerce-product-gallery .flex-control-thumbs li:has(img.flex-active) { border-color: #0e2a47 !important; box-shadow: 0 0 0 1px #0e2a47 !important; } /* Up arrow */ .hpd-product-master .hpd-thumb-nav-up { display: inline-flex !important; grid-column: 1 !important; grid-row: 1 !important; align-self: end !important; } /* Down arrow */ .hpd-product-master .hpd-thumb-nav-down { display: inline-flex !important; grid-column: 1 !important; grid-row: 3 !important; align-self: start !important; } } /* ========================================================= 19 - PRODUCT META ========================================================= */ .hpd-product-master .product_meta { margin-top: 18px !important; padding-top: 12px !important; border-top: 1px solid #e1e4e8; font-size: 12px !important; line-height: 1.5 !important; color: #666666 !important; } .hpd-product-master .product_meta a { color: #1f5ebe !important; text-decoration: none !important; } .hpd-product-master .product_meta a:hover { text-decoration: underline !important; } /* Hide WooCommerce product tags on all devices */ .hpd-product-master .product_meta .tagged_as { display: none !important; } /* ========================================================= 20 - DESKTOP PRODUCT AREA ========================================================= */ @media only screen and (min-width: 981px) { .hpd-product-master .et_pb_wc_title h1 { max-width: 620px; } .hpd-product-master .et_pb_wc_description { max-width: 640px; } .hpd-product-master .et_pb_wc_add_to_cart { max-width: 640px; } } /* ========================================================= 21 - TABLET ========================================================= */ @media only screen and (min-width: 768px) and (max-width: 980px) { .hpd-product-master .et_pb_wc_title h1 { font-size: 27px !important; } .hpd-product-master .et_pb_wc_price .price { font-size: 21px !important; } .hpd-product-master .et_pb_wc_add_to_cart { padding: 18px 20px 17px 20px !important; } .hpd-product-master .woocommerce-product-gallery { display: block !important; } .hpd-product-master .woocommerce-product-gallery .flex-control-thumbs { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; gap: 6px !important; width: 100% !important; margin-top: 10px !important; } .hpd-product-master .woocommerce-product-gallery .flex-control-thumbs li { width: calc(25% - 5px) !important; max-width: none !important; } .hpd-product-master .hpd-thumb-nav { display: none !important; } } /* ========================================================= 22 - MOBILE ========================================================= */ @media only screen and (max-width: 767px) { .hpd-product-master .et_pb_wc_title h1 { font-size: 25px !important; line-height: 1.15 !important; } .hpd-product-master .et_pb_wc_price .price { font-size: 20px !important; } .hpd-product-master .et_pb_wc_description, .hpd-product-master .et_pb_wc_description p, .hpd-product-master .et_pb_wc_description li { font-size: 15px !important; line-height: 1.55 !important; } .hpd-product-master .et_pb_wc_add_to_cart { margin-top: 8px !important; padding: 17px 15px 16px 15px !important; border-radius: 5px !important; } .hpd-product-master .hpd-variation-group { margin-bottom: 16px; } .hpd-product-master .hpd-variation-buttons { gap: 7px; } .hpd-product-master .hpd-variation-button { min-height: 44px; padding: 9px 14px; font-size: 14px; } .hpd-product-master .hpd-purchase-actions { width: 100%; gap: 8px; padding-top: 13px; } .hpd-product-master .hpd-purchase-actions .single_add_to_cart_button { min-height: 50px !important; } .hpd-product-master .hpd-reset-options { min-height: 50px; padding: 0 14px; } .hpd-product-master .product_meta { margin-top: 16px !important; } /* Mobile gallery: one horizontal swipeable thumbnail row */ .hpd-product-master .woocommerce-product-gallery { display: block !important; } .hpd-product-master .woocommerce-product-gallery .flex-control-thumbs { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: 8px !important; width: 100% !important; margin-top: 10px !important; margin-bottom: 0 !important; padding: 0 0 4px 0 !important; overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; scrollbar-width: none; } .hpd-product-master .woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar { display: none; } .hpd-product-master .woocommerce-product-gallery .flex-control-thumbs li { flex: 0 0 78px !important; width: 78px !important; max-width: 78px !important; scroll-snap-align: start; } .hpd-product-master .hpd-thumb-nav { display: none !important; } /* Title + price are moved here by JS on phones only */ .hpd-product-master .hpd-mobile-title-price { width: 100% !important; margin: 0 0 10px 0 !important; padding: 0 !important; } .hpd-product-master .hpd-mobile-title-price .et_pb_wc_title { margin-bottom: 4px !important; } .hpd-product-master .hpd-mobile-title-price .et_pb_wc_price { margin-top: 0 !important; margin-bottom: 8px !important; } .hpd-product-master .hpd-product-details-below-gallery { margin-top: 16px !important; padding: 16px !important; } /* Mobile short description: keep visible, but move the entire Divi description module upward */ .hpd-product-master .et_pb_wc_description { margin-top: -24px !important; margin-bottom: 10px !important; } .hpd-product-master .hpd-product-intro { margin: 0 !important; } } /* ========================================================= 23 - SMALL MOBILE ========================================================= */ @media only screen and (max-width: 480px) { .hpd-product-master .hpd-purchase-actions { align-items: stretch; } .hpd-product-master .hpd-purchase-actions .single_add_to_cart_button { flex: 1 1 100%; width: 100%; } .hpd-product-master .hpd-reset-options { flex: 1 1 100%; width: 100%; } .hpd-product-master .woocommerce-product-gallery .flex-control-thumbs li { flex: 0 0 74px !important; width: 74px !important; max-width: 74px !important; } } /* ========================================================= 24 - CONTROLLED MAIN PRODUCT TEXT Title: maximum 3 lines + reserved View full title row Price: maximum 1 line Intro description: maximum 4 lines ========================================================= */ /* --------------------------------------------------------- MAIN PRODUCT TITLE - 3 LINES MAXIMUM JavaScript keeps the control row on every product. Long titles are blue/clickable; short titles are gray/disabled. --------------------------------------------------------- */ .hpd-product-master .et_pb_wc_title h1.hpd-product-title-clamped { display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 3 !important; overflow: hidden !important; max-height: 3.36em !important; } .hpd-product-master .et_pb_wc_title h1.hpd-product-title-expanded { display: block !important; -webkit-line-clamp: unset !important; max-height: none !important; overflow: visible !important; } .hpd-product-master .hpd-product-title-toggle-wrap { display: block; width: 100%; min-height: 16.2px; margin: 5px 0 0 0; padding: 0; } .hpd-product-master .hpd-product-title-toggle { display: inline-flex; align-items: center; justify-content: flex-start; gap: 5px; margin: 0; padding: 0; background: transparent !important; color: #1f5ebe !important; border: 0 !important; border-radius: 0 !important; font-family: inherit; font-size: 12px !important; line-height: 1.35 !important; font-weight: 700 !important; text-decoration: none !important; box-shadow: none !important; cursor: pointer; } .hpd-product-master .hpd-product-title-toggle:hover { color: #0e2a47 !important; text-decoration: underline !important; } .hpd-product-master .hpd-product-title-toggle:focus-visible { outline: 2px solid rgba(14, 42, 71, 0.18); outline-offset: 3px; } .hpd-product-master .hpd-product-title-toggle.is-disabled, .hpd-product-master .hpd-product-title-toggle:disabled { color: #b6bdc5 !important; cursor: default !important; opacity: 1 !important; } .hpd-product-master .hpd-product-title-toggle.is-disabled:hover, .hpd-product-master .hpd-product-title-toggle:disabled:hover { color: #b6bdc5 !important; text-decoration: none !important; } .hpd-product-master .hpd-product-title-toggle-icon { display: inline-block; font-size: 9px; line-height: 1; } /* --------------------------------------------------------- MAIN PRODUCT PRICE - ONE LINE MAXIMUM --------------------------------------------------------- */ .hpd-product-master .et_pb_wc_price .price, .hpd-product-master .woocommerce-variation-price .price { display: block !important; max-width: 100% !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* --------------------------------------------------------- RIGHT-SIDE INTRO DESCRIPTION - FOUR LINES MAXIMUM JavaScript measures the rendered text and physically moves anything after line 4 into the details card below the gallery. These rules are a visual safety net and measurement state. --------------------------------------------------------- */ .hpd-product-master .hpd-product-intro { display: block !important; overflow: hidden !important; max-height: 6.2em !important; margin: 0 !important; padding: 0 !important; } .hpd-product-master .hpd-product-intro p { display: block !important; margin-top: 0 !important; margin-bottom: 10px !important; padding: 0 !important; } .hpd-product-master .hpd-product-intro p:last-child { margin-bottom: 0 !important; } /* Temporarily reveal the full description while JS finds line 5. */ .hpd-product-master .hpd-product-intro.hpd-product-intro-measuring { display: block !important; max-height: none !important; overflow: visible !important; -webkit-line-clamp: unset !important; } /* After JS splits the content, show the remaining right-side intro naturally. It has already been reduced to four lines. */ .hpd-product-master .hpd-product-intro.hpd-product-intro-split-ready { display: block !important; max-height: none !important; overflow: visible !important; -webkit-line-clamp: unset !important; } /* ========================================================= 25 - RELATED PRODUCTS 3-line title clamp + stronger price IMPORTANT: This section is intentionally NOT limited to .hpd-product-master because the Divi Related Products module can sit outside that wrapper. ========================================================= */ /* ========================================================= RELATED PRODUCTS - TITLE Maximum 3 visible lines ========================================================= */ body.single-product .et_pb_wc_related_products ul.products li.product .woocommerce-loop-product__title, body.single-product .et_pb_wc_related_products ul.products li.product h2, body.single-product .related.products ul.products li.product .woocommerce-loop-product__title, body.single-product .related.products ul.products li.product h2 { display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 3 !important; overflow: hidden !important; max-height: 3.9em !important; min-height: 3.9em !important; margin-top: 8px !important; margin-bottom: 8px !important; padding: 0 !important; font-size: 15px !important; line-height: 1.3 !important; font-weight: 400 !important; color: #17202a !important; } /* ========================================================= RELATED PRODUCTS - TITLE LINKS Keep inherited title styling ========================================================= */ body.single-product .et_pb_wc_related_products ul.products li.product .woocommerce-loop-product__title a, body.single-product .et_pb_wc_related_products ul.products li.product h2 a, body.single-product .related.products ul.products li.product .woocommerce-loop-product__title a, body.single-product .related.products ul.products li.product h2 a { color: #17202a !important; font-weight: 400 !important; text-decoration: none !important; } /* ========================================================= RELATED PRODUCTS - PRICE Stronger / bolder blue price ========================================================= */ body.single-product .et_pb_wc_related_products ul.products li.product .price, body.single-product .related.products ul.products li.product .price { display: block !important; margin-top: 0 !important; margin-bottom: 0 !important; color: #1f5ebe !important; font-size: 16px !important; line-height: 1.3 !important; font-weight: 700 !important; } /* Force WooCommerce amount elements to inherit bold weight */ body.single-product .et_pb_wc_related_products ul.products li.product .price *, body.single-product .et_pb_wc_related_products ul.products li.product .woocommerce-Price-amount, body.single-product .et_pb_wc_related_products ul.products li.product .woocommerce-Price-amount bdi, body.single-product .related.products ul.products li.product .price *, body.single-product .related.products ul.products li.product .woocommerce-Price-amount, body.single-product .related.products ul.products li.product .woocommerce-Price-amount bdi { color: #1f5ebe !important; font-weight: 700 !important; } /* ========================================================= RELATED PRODUCTS - SALE PRICE ========================================================= */ body.single-product .et_pb_wc_related_products ul.products li.product .price ins, body.single-product .related.products ul.products li.product .price ins { color: #1f5ebe !important; font-weight: 700 !important; text-decoration: none !important; } body.single-product .et_pb_wc_related_products ul.products li.product .price del, body.single-product .related.products ul.products li.product .price del { color: #7b858e !important; font-weight: 400 !important; opacity: 0.75; } /* ========================================================= RELATED PRODUCTS - RATINGS Only styles real WooCommerce ratings when they exist. Does not create fake ratings. ========================================================= */ body.single-product .et_pb_wc_related_products ul.products li.product .star-rating, body.single-product .related.products ul.products li.product .star-rating { display: block !important; margin: 0 0 7px 0 !important; color: #ff8a00 !important; font-size: 13px !important; } body.single-product .et_pb_wc_related_products ul.products li.product .star-rating::before, body.single-product .related.products ul.products li.product .star-rating::before { color: #d6dce2 !important; } /* ========================================================= RELATED PRODUCTS - IMAGES ========================================================= */ body.single-product .et_pb_wc_related_products ul.products li.product img, body.single-product .related.products ul.products li.product img { opacity: 1 !important; filter: none !important; } /* ========================================================= RELATED PRODUCTS - MOBILE Keep 3-line title clamp ========================================================= */ @media only screen and (max-width: 767px) { body.single-product .et_pb_wc_related_products ul.products li.product .woocommerce-loop-product__title, body.single-product .et_pb_wc_related_products ul.products li.product h2, body.single-product .related.products ul.products li.product .woocommerce-loop-product__title, body.single-product .related.products ul.products li.product h2 { -webkit-line-clamp: 3 !important; max-height: 3.9em !important; min-height: 3.9em !important; font-size: 15px !important; line-height: 1.3 !important; } body.single-product .et_pb_wc_related_products ul.products li.product .price, body.single-product .related.products ul.products li.product .price { font-size: 16px !important; font-weight: 700 !important; } } /* ========================================================= 26 - EXPANDABLE PRODUCT DETAILS Match left card bottom to Product Support panel Read More button stays INSIDE the card ========================================================= */ /* * Keep the original HPD light border and subtle shadow. */ .hpd-product-master .hpd-product-details-below-gallery { position: relative; box-sizing: border-box; border-color: #dfe4e8 !important; box-shadow: 0 2px 8px rgba(14, 42, 71, 0.04) !important; } /* ========================================================= MATCHED DESKTOP HEIGHT JS supplies --hpd-details-matched-height from the bottom of the Product Support panel. ========================================================= */ @media only screen and (min-width: 981px) { .hpd-product-master .hpd-product-details-below-gallery.hpd-details-height-matched { height: var( --hpd-details-matched-height, auto ) !important; min-height: var( --hpd-details-matched-height, auto ) !important; } } /* ========================================================= COLLAPSIBLE CONTENT AREA Only the content region clips — the button remains visible. ========================================================= */ .hpd-product-master .hpd-product-details-below-gallery.hpd-details-collapsible { display: flex; flex-direction: column; overflow: hidden; } .hpd-product-master .hpd-product-details-below-gallery .hpd-details-content { position: relative; min-height: 0; flex: 1 1 auto; } .hpd-product-master .hpd-product-details-below-gallery.hpd-details-collapsible .hpd-details-content { overflow: hidden; } /* Soft fade at the bottom of clipped content */ .hpd-product-master .hpd-product-details-below-gallery.hpd-details-collapsible:not(.hpd-details-expanded) .hpd-details-content::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 54px; pointer-events: none; background: linear-gradient( to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.90) 62%, #ffffff 100% ); } /* ========================================================= EXPANDED STATE Full content is shown naturally. ========================================================= */ .hpd-product-master .hpd-product-details-below-gallery.hpd-details-expanded { height: auto !important; min-height: 0 !important; overflow: visible !important; } .hpd-product-master .hpd-product-details-below-gallery.hpd-details-expanded .hpd-details-content { overflow: visible !important; } .hpd-product-master .hpd-product-details-below-gallery.hpd-details-expanded .hpd-details-content::after { display: none !important; } /* ========================================================= READ MORE / SHOW LESS INSIDE CARD - full-width secondary control ========================================================= */ .hpd-product-master .hpd-product-details-below-gallery .hpd-details-toggle-wrap { flex: 0 0 auto; width: 100%; margin: 12px 0 0 0; padding: 0; } .hpd-product-master .hpd-product-details-below-gallery .hpd-details-toggle { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; min-height: 30px; margin: 0; padding: 0 14px; background-color: #f7f8f9; color: #17202a; border: 1px solid #cfd6dd; border-radius: 3px; font-family: inherit; font-size: 12px; line-height: 1; font-weight: 700; text-transform: none; letter-spacing: 0; cursor: pointer; box-shadow: none; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .hpd-product-master .hpd-product-details-below-gallery .hpd-details-toggle:hover { background-color: #eef1f4; color: #0e2a47; border-color: #aeb8c2; } .hpd-product-master .hpd-product-details-below-gallery .hpd-details-toggle:focus { outline: 2px solid rgba(14, 42, 71, 0.13); outline-offset: 2px; } .hpd-product-master .hpd-product-details-below-gallery .hpd-details-toggle-icon { display: inline-block; font-size: 10px; line-height: 1; } /* ========================================================= TABLET / MOBILE Do not force desktop panel matching. Use a controlled natural cap instead. ========================================================= */ @media only screen and (min-width: 768px) and (max-width: 980px) { .hpd-product-master .hpd-product-details-below-gallery.hpd-details-collapsible:not(.hpd-details-expanded) { max-height: 430px; } } @media only screen and (max-width: 767px) { .hpd-product-master .hpd-product-details-below-gallery.hpd-details-collapsible:not(.hpd-details-expanded) { max-height: 230px; } .hpd-product-master .hpd-product-details-below-gallery .hpd-details-toggle { min-height: 32px; font-size: 12px; } } /* ========================================================= 26 - PRODUCT DETAILS CARD HEADING Consistent label for content continued below the gallery. ========================================================= */ .hpd-product-master .hpd-product-details-below-gallery .hpd-product-details-heading { margin: 0 0 12px 0 !important; padding: 0 0 9px 0 !important; border-bottom: 1px solid #e3e7eb; font-size: 16px !important; line-height: 1.3 !important; font-weight: 700 !important; color: #17202a !important; } /* ========================================================= 27 - RECENTLY VIEWED PRODUCTS Match the existing Related Products presentation. Desktop: 6 columns. ========================================================= */ body.single-product .hpd-recently-viewed { width: 100% !important; margin: 0 !important; padding: 0 !important; } body.single-product .hpd-recently-viewed ul.products { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 20px !important; width: 100% !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } body.single-product .hpd-recently-viewed ul.products::before, body.single-product .hpd-recently-viewed ul.products::after { display: none !important; content: none !important; } body.single-product .hpd-recently-viewed ul.products li.product { float: none !important; clear: none !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } /* Product image — same clean bordered treatment as Related Products. */ body.single-product .hpd-recently-viewed ul.products li.product a img { display: block !important; width: 100% !important; height: auto !important; aspect-ratio: 1 / 1 !important; margin: 0 !important; padding: 0 !important; object-fit: contain !important; background-color: #ffffff !important; border: 1px solid #dfe4e8 !important; border-radius: 2px !important; opacity: 1 !important; filter: none !important; box-sizing: border-box !important; } /* Product title — same 3-line treatment as Related Products. */ body.single-product .hpd-recently-viewed ul.products li.product .woocommerce-loop-product__title, body.single-product .hpd-recently-viewed ul.products li.product h2 { display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 3 !important; overflow: hidden !important; max-height: 3.9em !important; min-height: 3.9em !important; margin-top: 8px !important; margin-bottom: 8px !important; padding: 0 !important; font-size: 15px !important; line-height: 1.3 !important; font-weight: 400 !important; color: #17202a !important; } body.single-product .hpd-recently-viewed ul.products li.product .woocommerce-loop-product__title a, body.single-product .hpd-recently-viewed ul.products li.product h2 a { color: #17202a !important; font-weight: 400 !important; text-decoration: none !important; } /* Price — same bold HPD blue as Related Products. */ body.single-product .hpd-recently-viewed ul.products li.product .price { display: block !important; margin-top: 0 !important; margin-bottom: 0 !important; color: #1f5ebe !important; font-size: 16px !important; line-height: 1.3 !important; font-weight: 700 !important; } body.single-product .hpd-recently-viewed ul.products li.product .price *, body.single-product .hpd-recently-viewed ul.products li.product .woocommerce-Price-amount, body.single-product .hpd-recently-viewed ul.products li.product .woocommerce-Price-amount bdi { color: #1f5ebe !important; font-weight: 700 !important; } body.single-product .hpd-recently-viewed ul.products li.product .price ins { color: #1f5ebe !important; font-weight: 700 !important; text-decoration: none !important; } body.single-product .hpd-recently-viewed ul.products li.product .price del { color: #7b858e !important; font-weight: 400 !important; opacity: 0.75; } /* Keep real WooCommerce ratings consistent when present. */ body.single-product .hpd-recently-viewed ul.products li.product .star-rating { display: block !important; margin: 0 0 7px 0 !important; color: #ff8a00 !important; font-size: 13px !important; } body.single-product .hpd-recently-viewed ul.products li.product .star-rating::before { color: #d6dce2 !important; } /* Tablet: 3 columns. */ @media only screen and (min-width: 768px) and (max-width: 980px) { body.single-product .hpd-recently-viewed ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 18px !important; } } /* Mobile: 2 columns for compact product browsing. */ @media only screen and (max-width: 767px) { body.single-product .hpd-recently-viewed ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px 12px !important; } body.single-product .hpd-recently-viewed ul.products li.product .woocommerce-loop-product__title, body.single-product .hpd-recently-viewed ul.products li.product h2 { -webkit-line-clamp: 3 !important; max-height: 3.9em !important; min-height: 3.9em !important; font-size: 15px !important; line-height: 1.3 !important; } body.single-product .hpd-recently-viewed ul.products li.product .price { font-size: 16px !important; font-weight: 700 !important; } }