/* WooCommerce extensions styles ----------------------------------------------------------------- */ @import "../../../../css/_mixins.scss"; @import "../../../../css/_theme-vars.scss"; @import "../../css/_skin-vars.scss"; .woocommerce div.product div.images .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image--placeholder { border: none; .wp-post-image { border: 1px solid var(--theme-color-bd_color); } } // breadcrumb .woocommerce .post_item_single .woocommerce-breadcrumb { display: block; clear: both; } // title size (details) body.woo_extensions_present .post_item_single { div.product #comments h2, #review_form #respond #reply-title, #reviews .rating_details .rating_details_title { @include font(24px, 1.2em, 600); letter-spacing: 0; margin-bottom: 25px; display: inline-block; } &.single_product_details_style_accordion { div.product #comments h2, #review_form #respond #reply-title, #reviews .rating_details .rating_details_title { font-size: 20px; } } } /* Main space ----------------------------------------------------------------- */ body.woo_extensions_present { #content div.product div.summary, div.product div.summary, div.product div.images, #content div.product div.images { margin-bottom: 50px; } &.sidebar_hide { .post_type_product { &.single_product_details_position_under_summary div.product div.images { margin-bottom: 0; } &.single_product_details_position_under_gallery div.product div.summary { margin-bottom: 0; } } .single_product_details_position_default { .woocommerce-tabs, .woocommerce-stacks, .woocommerce-accordion { padding-top: 30px; } } } div.product .woocommerce-tabs ul.tabs, #content div.product .woocommerce-tabs ul.tabs { margin: 0 0 40px; } } /* Gallery style "Fullwidth" ----------------------------------------------------------------- */ :root { --theme-var-single-product-gallery-shift: 0; --theme-var-single-product-gallery-shift-indent: 70px; } .woocommerce.sidebar_hide, .woocommerce-page.sidebar_hide, .woocommerce.sidebar_hide, .woocommerce-page.sidebar_hide { .post_item_single.single_product_gallery_style_fullwidth:not(.single_product_gallery_style_fullwidth_inited) { visibility: hidden; } .post_item_single.single_product_gallery_style_fullwidth { // Gallery div.images { @include border-box; width: calc( var(--theme-var-single-product-gallery-width) + var(--theme-var-single-product-gallery-shift) - var(--theme-var-single-product-gallery-shift-indent)); margin-left: calc( -1 * var(--theme-var-single-product-gallery-shift) + var(--theme-var-single-product-gallery-shift-indent)); } } } /* Gallery style "Cascade" ----------------------------------------------------------------- */ .woocommerce .post_item_single.single_product_gallery_style_cascade div.images { padding: 0; .woocommerce-product-gallery__image:nth-child(n+2) { width: 100%; display: block; margin-top: 1em; } } .woocommerce.single_product_gallery_thumbs_left .post_item_single.single_product_gallery_style_cascade div.images.woocommerce-product-gallery--with-thumbs { padding-left: 0; } /* Gallery style "Grid" ----------------------------------------------------------------- */ .woocommerce .post_item_single.single_product_gallery_style_grid div.images { padding: 0; .woocommerce-product-gallery__wrapper { @include flex; @include flex-direction(row); @include flex-justify-content(space-between); @include flex-align-items(flex-start); @include flex-wrap(wrap); margin-right: -1em; .woocommerce-product-gallery__image { @include border-box; width: 50% !important; padding: 0 1em 1em 0 !important; } } } .woocommerce.single_product_gallery_thumbs_left .post_item_single.single_product_gallery_style_grid div.images.woocommerce-product-gallery--with-thumbs { padding-left: 0; } /* Additional info under description ----------------------------------------------------------------- */ .woocommerce, .woocommerce-page { div.product { div.summary .woocommerce-product-details__additional-information, // Moved under the short description .woocommerce-stack-additional_information, // Details as a stack .woocommerce-Tabs-panel--additional_information, // Details as a tabs (default) .woocommerce-accordion-content-additional_information { // Details as an accordion h2 { display: none; } table, th, td { background-color: transparent !important; text-transform: none; padding: 0.1em 0; border: none; width: auto; font-weight: inherit; font-style: normal; vertical-align: middle; } th { &.woocommerce-product-attributes-item__label { font-weight: 600; text-transform: uppercase; } &:after { content: ':'; } padding-right: 1em; } p { padding: 0; } } } } /* Additional tabs ----------------------------------------------------------------- */ .single-product .woocommerce-tabs { .woocommerce-tab-icon { margin-right: 0.5em; } } /* Details style "Default" (Tabs) ----------------------------------------------------------------- */ .single-product .woocommerce-tabs { clear: both; .wc-tab { & > .elementor { margin-left: calc( -1 * var(--theme-var-elm_add_page_margins) / 2 ); margin-right: calc( -1 * var(--theme-var-elm_add_page_margins) / 2 ); } } } /* Details style "Stacked" ----------------------------------------------------------------- */ .single-product .woocommerce-stacks { clear: both; .woocommerce-stack { h2 { margin-top: 0; } & > .elementor { margin-left: calc( -1 * var(--theme-var-elm_add_page_margins) / 2 ); margin-right: calc( -1 * var(--theme-var-elm_add_page_margins) / 2 ); } &.woocommerce-stack-description { & > h2:first-child { display: none; } } & + .woocommerce-stack { margin-top: 30px; padding-top: 30px; border-top: 1px solid var(--theme-color-bd_color); } } } /* Details style "Accordion" ----------------------------------------------------------------- */ .single-product .woocommerce-accordion { clear: both; position: relative; &:after { content: ""; display: block; width: 100%; height: 1px; background: var(--theme-color-bd_color); } .detailx_accordion_content { padding: 0 0 25px 0; > *:last-child { margin-bottom: 0; padding-bottom: 0; } } .woocommerce-accordion-title { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--theme-color-bd_color); margin: 0; padding: 25px 0; cursor: pointer; font-size: 24px; line-height: 1.2em; color: var(--theme-color-text_dark); &:first-child { padding-top: 0; border-top: none; } &:after { font-family: $theme_icons; content: '\e929'; display: block; font-size: 18px; margin-left: auto; padding-left: 15px; } &.ui-state-active:after { content: '\e92c'; } .woocommerce-tab-icon { margin-right: 15px; } } .woocommerce-accordion-title-reviews:not(.ui-state-active) { border-bottom-color: transparent; } .woocommerce-accordion-content { &:not(.ui-accordion-content-active) { display: none; } h2 { margin-top: 0; } & > .elementor { margin-left: calc( -1 * var(--theme-var-elm_add_page_margins) / 2 ); margin-right: calc( -1 * var(--theme-var-elm_add_page_margins) / 2 ); } &.woocommerce-accordion-content-description, &.woocommerce-accordion-content-additional_information { & > h2:first-child { display: none; } } } } /* Details position ----------------------------------------------------------------- */ .single_product_details_position_under_gallery { .woocommerce-tabs, .woocommerce-stacks, .woocommerce-accordion { clear: none; // Fix for sticky summary float: left; width: var(--theme-var-single-product-gallery-width); @include border-box; } } .single_product_details_position_under_summary { .woocommerce-tabs, .woocommerce-stacks, .woocommerce-accordion { clear: right !important; float: right; width: calc( 100% - var(--theme-var-single-product-gallery-width) ); padding-left: 60px; @include border-box; } } /* Product summary ----------------------------------------------------------------- */ body.woo_extensions_present { &.sidebar_hide { #content div.product div.summary, div.product div.summary { padding-left: 60px; } } &.sidebar_show { .woocommerce-tabs, .woocommerce-stacks, .woocommerce-accordion { width: 100%; float: none; padding-left: 0; } } } /* Summary sticky ----------------------------------------------------------------- */ .woocommerce, .woocommerce-page { &.sidebar_hide { .single_product_details_position_under_gallery.single_product_summary_sticky { .summary { @include sticky-top( calc( var(--fixed-rows-height) + 2em ) ); } .single_product_summary_sticky_related_holder { @include box(100%,0); clear: both; } } } } /* 'Add to cart' in the bottom bar (sticky) ----------------------------------------------------------------- */ .single_product_bottom_bar_sticky { @include fixed-lb(0,0,1002); width: 100%; background-color: var(--theme-color-alter_bg_color); border-top: 1px solid var(--theme-color-alter_bd_color); display: none; padding: 0.5em 1em; @include border-box; @include translateY(100%); @include transition-property(transform); @include flex; @include flex-direction(row); @include flex-wrap(nowrap); @include flex-align-items(center); @include flex-justify-content(space-between); body.single_product_bottom_bar_sticky_on & { @include transform-none; } .single_product_bottom_bar_title { @include flex; @include flex-direction(row); @include flex-wrap(nowrap); @include flex-align-items(center); @include flex-justify-content(flex-start); .single_product_bottom_bar_product_image { @include box(4em, 4em, 0); flex-shrink: 0; img { vertical-align: middle; } } .single_product_bottom_bar_product_title { .product_title { margin: 0 1em; font-size: 20px; line-height: 1.2em; font-weight: 600; } } } .single_product_bottom_bar_info { @include flex; @include flex-direction(row); @include flex-wrap(nowrap); @include flex-align-items(center); @include flex-justify-content(flex-end); flex-shrink: 0; .single_product_bottom_bar_product_price { margin-right: 1em; font-size: 20px; font-weight: 500; } .single_product_bottom_bar_product_button { .button { @include box-shadow(none); padding: 0 28px 1px; height: 50px; line-height: 50px; } .out-of-stock { margin: 0; font-weight: 500; color: var(--theme-color-text_dark); } form { @include flex; @include flex-direction(row); @include flex-wrap(nowrap); @include flex-align-items(center); @include flex-justify-content(flex-end); .quantity { margin: 0 10px 0 0; width: 85px; font-size: 1em; height: 50px; input[type="number"] { padding: 0 32px 0 20px; } span { width: 30px; line-height: 1.8em; &.q_dec { line-height: 0.85em; } } } } .tinv-wraper { margin-left: 10px; > .tinvwl_add_to_wishlist_button { @include box(50px, 50px, 51px !important); @include box-shadow(none); background-color: var(--theme-color-bg_color) !important; color: var(--theme-color-text_dark) !important; &:hover { color: var(--theme-color-text_link) !important; } } } } } } .single_product_bottom_bar_sticky_holder { height: 0; } body.single_product_bottom_bar_sticky_on .trx_addons_scroll_to_top.show { bottom: 6em; } /* Sidebar as Filters ---------------------------------------------------- */ body.sidebar_as_filters { .sidebar_overlay { display: none; visibility: visible; position: fixed; z-index: 100001; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; opacity: 0; background-color: var(--theme-color-bg_color_07); @include transition-all(0.4s); } .sidebar:not(.float_anim):not(.opened) ~ .sidebar_overlay { visibility: hidden; } .sidebar.opened ~ .sidebar_overlay { opacity: 1; } .sidebar > .sidebar_close { @include square(30px); left: auto; right: -30px; top: -30px; opacity: 0; background-color: var(--theme-color-alter_bg_color); z-index: 10; display: none; @include transition-all(0.4s); .theme_button_close_icon { @include transition-all(0.3s); font-size: 14px; &:before { color: var(--theme-color-text); @include box(20px, 20px, 20px); display: block; } } &:hover > .theme_button_close_icon { &:before { color: var(--theme-color-text); } } } .sidebar.opened > .sidebar_close { top: 0; opacity: 1; } &.sidebar_right .sidebar > .sidebar_close { left: -30px; right: auto; } } .detailx_woocommerce_filters_button_wrap { position: relative; z-index: 1; float: right; margin-bottom: 1.8em; @include flex; @include flex-direction(row); @include flex-align-items(center); @include flex-justify-content(flex-end); &.detailx_woocommerce_filters_button_no_products { float: none; justify-content: center; .detailx_woocommerce_filters_button { margin: 0; } } .woocommerce & .woocommerce-ordering { float: none; clear: both; margin: 0; } } .detailx_woocommerce_filters_button { display: none; @include flex-direction(row); @include flex-align-items(center); margin-right: 30px; font-size: 16px; line-height: 22px; font-weight: inherit; color: var(--theme-color-text_dark); &:before { font-family: $theme_icons; content: '\e863'; margin: 0 8px 0 0; font-weight: 400; line-height: 0; } &:hover, &:focus { color: var(--theme-color-text); } } /* Text blocks after price and Add to cart ----------------------------------------------------------------- */ .single_product_custom_text_after_price, .single_product_custom_text_after_add_to_cart { margin: -0.5em 0 1.7em; .price + & { margin-top: -1.2em; } p { margin: 0; } p + p { margin-top: 0.3em; } } .summary > .single_product_custom_text_after_add_to_cart:last-child { margin-bottom: 0; } /* Video in gallery ----------------------------------------------------------------- */ .woocommerce-product-gallery .woocommerce-product-gallery__image--with_video { position: relative; --theme-var-video-button-z-index: 2000; &.woocommerce-product-gallery__image--video_present:before { content: ' '; display: block; @include box(0,0,0); padding-top: 56.25%; } &.woocommerce-product-gallery__image--video_ratio_2_1:before { padding-top: 50%; } &.woocommerce-product-gallery__image--video_ratio_17_9:before { padding-top: 52.94%; } &.woocommerce-product-gallery__image--video_ratio_4_3:before { padding-top: 75%; } &.woocommerce-product-gallery__image--video_ratio_1_1:before { padding-top: 100%; } &.woocommerce-product-gallery__image--video_ratio_3_4:before { padding-top: 133.33%; } &.woocommerce-product-gallery__image--video_ratio_9_16:before { padding-top: 177.78%; } &.woocommerce-product-gallery__image--video_ratio_9_17:before { padding-top: 188.89%; } &.woocommerce-product-gallery__image--video_ratio_1_2:before { padding-top: 200%; } .post_video_hover { @include abs-cover; } .trx_addons_video_player { @include abs-cover; .video_embed { @include flex; @include flex-align-items(center); @include flex-justify-content(center); @include abs-cover(3); text-align: center; overflow: hidden; opacity: 1; } } .video_hover { display: block; @include square(2em); @include border-round; @include transition-colors; @include abs-lt(50%, 50%, var(--theme-var-video-button-z-index)); @include transform-none; margin: -1em 0 0 -1em; font-size: 2em; cursor: pointer; overflow: hidden; border: 1px solid var(--theme-color-bd_color); color: #000; background-color: #fff; opacity: 1; &:before { content: '\e8ec'; font-family:$theme_icons; margin: 0; } &:hover { color: var(--theme-color-text_link); background-color: #fff; } } &.woocommerce-product-gallery__image--video_button_lt { .video_hover { @include abs-lt(0.5em, 0.5em, var(--theme-var-video-button-z-index)); margin: 0; } } &.woocommerce-product-gallery__image--video_button_rt { .video_hover { @include abs-rt(0.5em, 0.5em, var(--theme-var-video-button-z-index)); left: auto; margin: 0; } } &.woocommerce-product-gallery__image--video_button_lb { .video_hover { @include abs-lb(0.5em, 0.5em, var(--theme-var-video-button-z-index)); top: auto; margin: 0; } } &.woocommerce-product-gallery__image--video_button_rb { .video_hover { @include abs-rb(0.5em, 0.5em, var(--theme-var-video-button-z-index)); left: auto; top: auto; margin: 0; } } } .post_item_single.single_product_gallery_style_grid { .woocommerce-product-gallery .woocommerce-product-gallery__image--with_video { .woocommerce-product-gallery__image--video_wrap { @include abs-pos(0, 1em, 1em, 0); } &.woocommerce-product-gallery__image--video_button_rt { .video_hover { right: 1em; } } &.woocommerce-product-gallery__image--video_button_lb { .video_hover { bottom: 1em; } } &.woocommerce-product-gallery__image--video_button_rb { .video_hover { right: 1em; bottom: 1em; } } } } /* Attributes in the products list -------------------------------------------------- */ .trx_addons_product_attributes { margin-top: 17px; .trx_addons_product_attribute { @include flex; @include flex-justify-content(left); @include flex-wrap(wrap); gap: 4px; + .trx_addons_product_attribute { margin-top: 15px; } [data-tooltip-text]:after, [data-tooltip-text]:before, .trx_addons_product_attribute_label { display: none; } .trx_addons_product_attribute_item { margin: 0; } // color &.trx_addons_product_attribute_type_color { gap: 8px; padding-bottom: 2px; .trx_addons_product_attribute_item { .trx_addons_product_attribute_item_action_swap:after { display: none; } .trx_addons_product_attribute_item_inner { @include box(15px, 15px, 15px); @include border-box(); @include transition-all(0.2s); border: 1px solid rgba(0,0,0,0.09); position: relative; &:before { content: ''; display: block; position: absolute; top: -4px; left: -4px; z-index: 1; @include border-radius(50%); @include transition-all(0.2s); border: 1px solid transparent; @include box(calc(100% + 8px), calc(100% + 8px), 1); @include border-box(); } } &.trx_addons_product_attribute_item_active .trx_addons_product_attribute_item_inner, &:hover .trx_addons_product_attribute_item_inner { border-color: transparent; &:before { border-color: var(--theme-color-text_dark); } } } } // button & select &.trx_addons_product_attribute_type_button, &.trx_addons_product_attribute_type_select { .trx_addons_product_attribute_item { padding: 4px 6px; min-width: 25px; text-align: center; @include border-box(); @include border-radius(0); @include font(14px, 17px); @include transition-all(0.2s); border: 1px solid var(--theme-color-alter_bd_color); background-color: var(--theme-color-alter_bg_color); cursor: pointer; &, a, a:hover { color: var(--theme-color-alter_text); } &.trx_addons_product_attribute_item_active, &:hover { border-color: var(--theme-color-alter_dark); } .trx_addons_product_attribute_item_action_swap:after { display: none; } } } // image &.trx_addons_product_attribute_type_image { .trx_addons_product_attribute_item { .trx_addons_product_attribute_item_action_swap:after { display: none; } @include box(57px, 57px, 1); @include border-radius(5px); @include transition-all(0.2s); position: relative; z-index: 1; overflow: hidden; border: 1px solid var(--theme-color-alter_bd_color); background-color: var(--theme-color-alter_bg_color); cursor: pointer; &.trx_addons_product_attribute_item_active, &:hover { border-color: var(--theme-color-alter_dark); } img { @include border-radius(0); border: none; @include scale(1, 1); // cover object-fit: cover; height: 100%; } .trx_addons_product_attribute_item_action_link { height: 100%; } } } } } /* Brand -------------------------------------------------- */ .woocommerce_extensions_brand { margin: 0.5em 0 0; @include font(16px, 18px); color: var(--theme-color-text); overflow: hidden; .woocommerce .summary & { margin: -0.2em 0 1.5em 0; } .woocommerce_extensions_brand_label { margin-right: 0.4em; } .woocommerce_extensions_brand_item + .woocommerce_extensions_brand_item:before { content: ','; display: inline; vertical-align: baseline; margin-right: 0.4em; } .woocommerce_extensions_brand_item_image { max-height: 3em; max-width: none; width: auto; vertical-align: middle; margin: 2px 0; & + .woocommerce_extensions_brand_item_label, & + .woocommerce_extensions_brand_item_caption { display: inline-block; margin-left: 0.4em; } } .woocommerce_extensions_brand_item_label + .woocommerce_extensions_brand_item_caption { margin-left: 0.4em; } li.product & { .woocommerce_extensions_brand_item_image { max-height: 2em; } } } /* Rating Details -------------------------------------------------- */ .woocommerce #reviews { .rating_details { @include border-box; padding-left: calc( var(--theme-var-grid_gap) / 2 ); padding-right: calc( var(--theme-var-grid_gap) / 2 ); .rating_details_title { margin-top: 0; } .rating_details_avg { margin: 0 0 10px -2px; @include font(2.8em, 0.9em, 400); color: var(--theme-color-text_link); } .rating_details_avg_stars { .star-rating { float: none; } } .rating_details_table { margin-top: 1em; width: 90%; font-size: 16px; .rating_details_table_row { @include flex; @include flex-direction(row); @include flex-wrap(nowrap); @include flex-justify-content(flex-start); @include flex-align-items(center); .rating_details_table_cell_mark { @include flex-basis(18%); @include border-box; padding-right: 0.5em; } .rating_details_table_cell_bar { @include flex-basis(70%); height: 6px; margin-top: 3px; background-color: var(--theme-color-alter_bg_color); [class*="rating_details_table_cell_bar_fill_"] { height: 6px; background-color: var(--theme-color-text_link); } .rating_details_table_cell_bar_fill_0 { width: 0; } .rating_details_table_cell_bar_fill_1 { width: 20%; } .rating_details_table_cell_bar_fill_2 { width: 40%; } .rating_details_table_cell_bar_fill_3 { width: 60%; } .rating_details_table_cell_bar_fill_4 { width: 80%; } .rating_details_table_cell_bar_fill_5 { width: 100%; } } .rating_details_table_cell_total { @include flex-basis(12%); @include border-box; padding-left: 0.5em; } } } } } .woocommerce .single_product_details_position_default { #reviews { @include flex; @include flex-direction(row); @include flex-wrap(wrap); .rating_details { order: 1; float: none; width: 50%; } .rating_details ~ #review_form_wrapper, .rating_details ~ .woocommerce-verification-required { order: 2; float: none; width: 50%; } .rating_details ~ #comments { order: 3; float: none; width: 100%; margin-top: 60px; } } } .woocommerce .single_product_details_position_under_gallery, .woocommerce .single_product_details_position_under_summary { #reviews { margin-left: 0; margin-right: 0; #comments, .rating_details, #review_form_wrapper, .woocommerce-verification-required { float: none; width: 100%; padding-left: 0; padding-right: 0; } .rating_details ~ #comments, #review_form_wrapper { margin-top: 2.2em; } } } .single-product .woocommerce-accordion #reviews { padding-bottom: 30px; } // custom class for "single_product_custom_text_after_add_to_cart" .single_product_custom_text_style { font-size: 17px; font-weight: 600; text-transform: uppercase; color: var(--theme-color-text_dark); .custom_icons_1 { display: flex; flex-direction: row; flex-wrap: wrap; margin: 1.2em 0 -6px 0; img { @include border-radius(0); background-color: var(--theme-color-alter_bg_color); border: 1px solid var(--theme-color-bd_color); max-width: 53px; margin: 0 6px 6px 0; @include transition-all(0.3s); &:hover { border-color: var(--theme-color-text_dark); } } } .custom_icons_2 { display: flex; margin-top: 2.7em; [class*="icon-"] { text-align: center; line-height: 1.2em; margin-right: 10%; &:last-child { margin-right: 0; } &:before { display: block; width: 100%; margin-bottom: 9px; font-size: 2.3em; font-weight: 400; line-height: 1em !important; color: var(--theme-color-text_link); } } } .custom_icons_3 { display: flex; flex-direction: row; align-items: center; margin-top: 2.5em; padding: 18px 22px; @include border-radius(0); background-color: var(--theme-color-text_dark_003); color: var(--theme-color-text); a { &[href*="tel"] { white-space: nowrap; } color: var(--theme-color-text_dark); &:hover { color: var(--theme-color-text_link); } } [class*="icon-"] { flex: 0 0 auto; font-size: 2.4em; font-weight: 400; margin-right: 7px; opacity: 0.8; } } } @media #{$media_lg} { .single_product_custom_text_style { .custom_icons_1 { margin: 12px 0 -6px 0; } .custom_icons_2 { margin-top: 30px; [class*="icon-"] { margin-right: 30px; &:before { font-size: 2em; } } } .custom_icons_3 { margin-top: 30px; } } } @media #{$media_xs} { .single_product_custom_text_style { .custom_icons_2 { margin-top: 22px; [class*="icon-"] { margin-right: 20px; &:before { font-size: 1.8em; } } } .custom_icons_3 { margin-top: 22px; padding: 15px; } } }