/* Control Panel Settings */
.quickview .mfp-iframe-holder .mfp-content { height:563px }
.quickview.product-page .heading-title { font-weight: 700;font-family: "Roboto Condensed";font-style: normal;font-size: 19px;text-transform: uppercase;color: rgb(42, 43, 46);padding-left:10px }
#more-details[data-hint]:after { border-radius: 3px;color: rgb(255, 255, 255);background-color: rgb(241, 196, 15) }
#more-details i:before { content: '\e056';font-size: 20px;color: rgb(255, 255, 255);left: -4px }
.quickview #content { background-color: rgb(255, 255, 255) }
.quickview #tab-description { padding-right:10px;padding-left:10px;padding-top:10px;padding-bottom:10px }
.quickview h1.heading-title { text-align:left }
.label-latest { color: rgb(255, 255, 255);border-radius: 50%;width: 40px;height: 40px; line-height: 40px; padding-top:0; padding-bottom:0;background-color: rgb(43, 176, 227) }
.label-sale { color: rgb(255, 255, 255);border-radius: 50%;width: 40px;height: 40px; line-height: 40px; padding-top:0; padding-bottom:0;background-color: rgb(241, 196, 15) }
.label-outofstock { background-color:rgb(43, 176, 227) }
.hide-cart .cart.outofstock .button { opacity:.5 }
header .links a, .links .no-link, .mm-header-link a { color: rgb(104, 85, 81) }
.drop-down ul li a, .fly-drop-down ul li a { font-weight: 400;font-family: "Roboto Condensed";font-size: 15px;color: rgb(255, 255, 255) }
.mega-menu div > h3 { font-weight: 700;font-family: "Roboto Condensed";font-style: normal;font-size: 15px;text-transform: none;color: rgb(255, 255, 255);border-left-width: 3px;border-style: solid;border-color: rgb(214, 174, 12);padding-left:7px }
.mega-menu-categories .mega-menu-item ul li a { font-weight: 400;font-family: "Roboto Condensed";font-size: 16px;color: rgb(233, 232, 211);padding-left:10px }
.mega-menu-categories .mega-menu-item ul li a:hover { color: rgb(241, 196, 15) }
.mega-menu-brands div > h3 { color: rgb(255, 255, 255);text-align:left }
.mega-menu-html div > h3, .mega-menu-mixed .mega-menu-html > h3 { text-align:center }
.mega-menu-html .mega-menu-item .wrapper { color: rgb(68, 67, 73);padding-top:8px }
.super-menu > li > a { font-weight: 700;font-family: "Roboto Condensed";font-style: normal;font-size: 15px;text-transform: uppercase;letter-spacing: 1px;color: rgb(255, 255, 255);line-height:50px }
.super-menu > li, .super-menu > li:last-of-type, .journal-desktop .menu-floated .float-right { border-style:solid }
.drop-down ul li, .mobile-menu .drop-down ul li, .flyout-menu .fly-drop-down ul li { border-bottom-style:dashed;border-color: rgb(85, 61, 55) }
.mega-menu-categories .mega-menu div > h3 { text-align:left }
.mega-menu-categories .mega-menu-item > div { border-color: rgb(85, 61, 55) }
.mega-menu-categories .mega-menu-item img { border-width: 1px;border-style: solid;border-color: rgb(76, 59, 44) }
.mobile-trigger:before { content: '\e618';font-size: 20px;color: rgb(250, 250, 250);top: -1px }
.drop-down .menu-plus:before { content: '\e620';font-size: 10px;top: -3px }
.mega-menu-categories .mega-menu-item ul li a:before, html[dir='rtl'] .mega-menu-categories .mega-menu-item ul li a::after { content: '\e6ae';font-size: 18px }
.mobile-trigger, .mobile-menu-on-tablet .mobile-trigger { font-style: normal;font-size: 16px;text-transform: uppercase;color: rgb(255, 255, 255) }
.journal-menu .mobile-menu > li .mobile-plus, .tablet.mobile-menu-on-tablet header .journal-menu .mobile-menu > li .mobile-plus, .mobile.mobile-menu-on-tablet header .journal-menu .mobile-menu > li .mobile-plus { background-color: rgb(135, 137, 117);color: rgb(255, 255, 255) }
header .links li:hover a, .mm-header-link li:hover a { color: rgb(255, 255, 255) }
.super-menu { border-top-left-radius: 3px;border-top-right-radius: 3px }
.mega-menu div > h3:hover > a { color: rgb(255, 255, 255) }
.journal-menu .mobile-trigger { background-color: rgb(104, 85, 81) }
.mega-menu .product-grid-item .price { display:inline-block }
.mega-menu-item > div, #header .mega-menu .product-wrapper { margin-right:15px }
.mega-menu-categories .mega-menu-item ul li.view-more a { font-weight: bold;font-family: Helvetica, Arial, sans-serif;font-style: normal;font-size: 11px;text-transform: none }
.mega-menu-column.mega-menu-html .wrapper p, .mega-menu-column.mega-menu-html .wrapper p span, .mega-menu .mega-menu-column .menu-cms-block { color: rgb(0, 0, 0) }
.mega-menu-column > div > h3, .mega-menu-column > h3 { padding-bottom:5px;margin-bottom:15px;font-weight: 400;font-family: "Roboto Condensed";font-style: normal;font-size: 17px;text-transform: none;color: rgb(0, 0, 0);border-bottom-width: 1px;border-style: dashed;border-color: rgb(105, 185, 207) }
.mega-menu .product-wrapper { background-color: rgb(115, 110, 95) }
.product-info .left .image a img { border-width: 1px;border-style: solid;border-color: rgb(204, 204, 204) }
.product-info .left .image-additional a img { border-width: 1px;border-style: solid;border-color: rgb(204, 204, 204) }
.product-info .left .image-additional a { padding:0 15px 15px 0 }
.product-info .image .label-latest { display: block }
.product-info .image .label-sale { display: block }
.product-info .image .label-outofstock { display: block }
.product-options > div, .product-options > ul { font-weight: 400;font-family: "Comfortaa";font-size: 13px;background-color: rgb(255, 255, 255) }
.product-options > div a, .product-options > ul a { font-weight: 400;font-family: "Comfortaa";font-size: 13px }
.product-info .product-options > div, .product-info .product-options > ul, #content .product-info .options h3, .ms-sellerprofile.description h3 { border-width: 1px;border-style: solid;border-color: rgb(204, 204, 204) }
.product-options > div, .product-options > ul, .skin-11 .right .heading-title { margin-bottom:10px }
.product-info .right .description .instock { color: rgb(51, 153, 101) }
.product-info .right .description .outofstock { color: rgb(234, 35, 73) }
.product-info .right .price .price-new, .product-info .right .price .product-price, .product-info .right .price li.price-new, .product-info .right .price li.product-price { font-weight: 700;font-family: "Oswald";font-style: normal;font-size: 32px;text-transform: none;letter-spacing: -1px;color: rgb(63, 62, 75) }
.product-info .right .price .price-old, .product-info .right .price li.price-old { font-weight: 400;font-family: "Fira Sans";font-style: normal;font-size: 22px;text-transform: none;color: rgb(255, 255, 255) }
.product-info .right .price-old { border-radius: 3px;background-color: rgb(221, 0, 23) }
.product-info .option > ul > li:active, .product-info .option > ul > li.selected { box-shadow:inset 0 0 8px rgba(0, 0, 0, 0.7) }
#content .product-info .options h3, .ms-sellerprofile.description h3 { font-weight: 400;font-family: "Roboto Condensed";font-style: normal;font-size: 16px;text-transform: none;background-color: rgb(228, 228, 228) }
.product-info .option > ul > li { color: rgb(255, 255, 255);background-color: rgb(43, 176, 227);border-radius: 3px }
.product-info .right .cart div .qty { border-radius: 3px }
#button-cart, .product-info .right .cart div .button.enquiry-button { font-weight: 700;font-family: "Roboto Condensed";font-style: normal;font-size: 16px;text-transform: uppercase;color: rgb(255, 255, 255) }
.product-info .right .wishlist-compare .links a { font-weight: 300;font-family: "Comfortaa";font-style: normal;font-size: 13px;text-transform: none;color: rgb(104, 85, 81) }
.product-info .right .wishlist-compare .links a:hover { color: rgb(241, 196, 15) }
#tabs a, #tabs li a { font-weight: 700;font-family: "Roboto Condensed";font-style: normal;font-size: 14px;text-transform: uppercase;color: rgb(255, 255, 255);background-color: rgb(104, 85, 81);box-shadow:inset 0 -3px 6px -2px rgba(0, 0, 0, 0.5) }
.product-info .tab-content, .tab-content { border-width: 1px;border-style: solid;border-color: rgb(204, 204, 204);padding:15px }
.product-info .left .journal-custom-tab h3 { font-weight: 400 ;font-family: "Roboto Condensed" ;font-style: normal ;font-size: 17px ;text-transform: none }
.product-info .left .journal-custom-tab { border-radius: 3px }
.product-info .right .journal-custom-tab h3 { font-weight: 400;font-family: "Roboto Condensed";font-style: normal;font-size: 17px;text-transform: none }
.product-info .right .journal-custom-tab { border-radius: 3px }
.product-info .gallery-text:before { content: '\e015';font-size: 16px }
#product-gallery .swiper-button-prev::before { content: '\e61f';font-size: 20px;color: rgb(43, 176, 227) }
#product-gallery .swiper-button-next::before { content: '\e620';font-size: 20px;color: rgb(66, 139, 202) }
#button-cart .button-cart-text:before, #button-cart .button-cart-text:after { content: '\e180';font-size: 22px;color: rgb(255, 255, 255);top: 3px;left: 2px }
.product-info .right .wishlist-compare .links a:before { content: '\e662';font-size: 14px }
.product-info .right .wishlist-compare .links a+a:before { content: '\e025';font-size: 14px }
.product-info .right .options .option { border-color: rgb(255, 255, 255) }
.product-info .option > ul > li.selected, .product-info .option > ul > li:hover { color: rgb(255, 255, 255);background-color: rgb(241, 196, 15) }
.product-info .right .cart div .journal-stepper { color: rgb(255, 255, 255);background-color: rgb(43, 176, 227) }
.product-info .right .cart div .journal-stepper:hover { color: rgb(255, 255, 255);background-color: rgb(241, 196, 15) }
.product-info .right .wishlist-compare { background-color: rgb(255, 255, 255) }
#tabs a:hover, #tabs a.selected, #tabs li a:hover, #tabs li.active a { color: rgb(255, 255, 255);background-color: rgb(241, 196, 15) }
.product-info .tab-content, .tab-content, .quickview .tab-content { background-color: rgb(255, 255, 255) }
.tags { text-align:left }
.tags a, .tags b { border-radius: 15px }
.tags b { background-color: rgb(0, 0, 0);color: rgb(255, 255, 255) }
.tags a { background-color: rgb(244, 244, 244) }
.tags a:hover { color: rgb(255, 255, 255);background-color: rgb(241, 196, 15) }
#product-gallery .swiper-button-prev, #product-gallery .swiper-button-next { border-radius: 50%;margin-top:-2px;height:25px; line-height:25px;width:25px }
.product-info .right > div > div, .product-info .right > div > ul { padding-left:15px;padding-right:15px;padding-bottom:15px;padding-top:15px }
.product-info .right .options .option b, .product-info .right .options .option .control-label { font-weight: 400;font-family: "Ubuntu";font-style: normal;font-size: 14px;text-transform: none }
.product-info .right .options .option label:hover { color: rgb(241, 196, 15) }
#product-gallery .swiper-button-prev:hover::before, #product-gallery .swiper-button-next:hover::before { color: rgb(241, 196, 15) }
.product-info .right .options .option label { color: rgb(66, 139, 202) }
.attribute tbody td { text-align:left }
.product-info .right .options.push-1 .option-image li span img:hover, .product-info .right .options.push-image .option-image li span img:hover, .product-info .right .options.push-select .option-image li.selected span img, .product-info .right .options.push-image .option-image li.selected span img, .product-info .right .options.push-checkbox .option-image li.selected span img, .product-info .right .options.push-radio .option-image li.selected span img { border-color: rgb(56, 56, 56) }
#product .product-sold-count-text { padding-right:5px;padding-top:5px;padding-left:5px;padding-bottom:5px }
.product-info .right .options.push-1 .option-image li span img, .product-info .right .options.push-image .option-image li span img { border-width: 3px;border-radius: 3px;border-style: solid;border-color: rgb(169, 184, 192) }
.product-sold-count-text { font-weight: normal;font-family: Helvetica, Arial, sans-serif;font-style: normal;font-size: 14px;text-transform: none }
.product-page .heading-title { text-align:left;border-width: 1px;border-radius: 0px;border-style: solid;border-color: rgb(204, 204, 204);margin-bottom:15px;padding-right:15px;padding-left:15px;font-weight: 700;font-family: "Roboto Condensed";font-size: 30px;color: rgb(104, 85, 81);background-color: rgb(255, 255, 255);line-height:80px; min-height:80px; }
#tabs { border-top-left-radius: 3px;border-top-right-radius: 3px }
body { font-weight: 400;font-family: "Comfortaa";font-size: 12px;color: rgb(85, 61, 55);background-color: rgb(135, 137, 117) }
.heading-title, .box-heading, #blogArticle .articleHeader h1, .oc-filter .panel-heading { text-align:left;border-width: 1px;border-style: solid;border-color: rgb(204, 204, 204);line-height:40px; min-height:40px;;background-color: rgb(255, 255, 255) }
.secondary-title, #content #review-title, #content legend, .checkout-content h2 { text-align:left;font-weight: 700;font-family: "Roboto Condensed";font-style: normal;font-size: 24px;text-transform: none;color: rgb(135, 137, 117);border-width: 1px;border-style: solid;border-color: rgb(204, 204, 204);padding-top:10px; padding-bottom:10px;padding-left:15px; padding-right:15px }
.heading-title, .box-heading, #blogArticle .articleHeader h1, #swipebox-caption, .journal-carousel .htabs.single-tab a:hover, .journal-carousel .htabs.single-tab a.selected, .oc-filter .panel-heading { font-weight: 700;font-family: "Roboto Condensed";font-style: normal;font-size: 30px;text-transform: none;color: rgb(104, 85, 81) }
.button, .side-column .box-content a.button, #quickcheckout .button, .modal-footer .btn { font-weight: 700;font-family: "Roboto Condensed";font-style: normal;font-size: 14px;text-transform: uppercase;color: rgb(255, 255, 255) }
.button, #quickcheckout .button, .modal-footer .btn { border-radius: 0px;padding:0 16px;line-height:31px;background-color: rgb(104, 85, 81) }
.breadcrumb { font-family: Helvetica, Arial, sans-serif;font-weight: bold;font-style: normal;font-size: 12px;text-transform: none;color: rgb(85, 61, 55);background-color: rgba(255, 255, 255, 0.8);border-width: 1px;border-top-width: 0px;border-right-width: 1px;border-bottom-width: 1px;border-left-width: 1px;border-style: solid;border-color: rgb(204, 204, 204) }
.scroll-top:before { content: '\e021';font-size: 45px;color: rgb(255, 255, 255) }
.extended-layout .extended-container { background-color: rgba(255, 255, 255, 0.8) }
a { color: rgb(104, 85, 81) }
a:hover { color: rgb(226, 194, 25) }
.secondary-title, #content #review-title,#content legend, .checkout-content h2 { background-color: rgba(255, 255, 255, 0.8) }
.button:hover, .side-column .box-content a.button:hover, #quickcheckout .button:hover, .modal-footer .btn:hover { color: rgb(255, 255, 255) }
.button:hover, #quickcheckout .button:hover, .modal-footer .btn:hover { background-color: rgb(241, 196, 15) }
.breadcrumb a:hover { color: rgb(241, 196, 15) }
.scroll-top:hover:before { color: rgb(241, 196, 15) }
.heading-title, .box-heading, #blogArticle .articleHeader h1, .journal-carousel .htabs.single-tab a, .oc-filter .panel-heading, .journal-carousel .htabs.single-tab a { padding-left:15px }
.home-page.extended-layout .extended-container { background-color: rgba(255, 255, 255, 0.9) }
body::after { content:''; background-color: rgba(0, 0, 0, 0.15) }
.box-sections ul li, .custom-sections .box-heading.box-sections { border-style:dashed;border-color: rgb(119, 119, 119) }
.custom-sections .box-heading { border-bottom-width: 0px;border-style: solid;background-color: rgb(68, 67, 73) }
.box-sections ul li a { font-weight: 700;font-family: "Roboto Condensed";font-style: normal;font-size: 15px;text-transform: uppercase;color: rgb(255, 255, 255) }
.box-sections, .box-sections ul li a, #top-modules .journal2_custom_sections::before, #bottom-modules .journal2_custom_sections::before { line-height:38px; min-height:38px; }
.box-sections ul li a:hover, .box-sections ul li a.selected { color: rgb(255, 255, 255);background-color: rgb(241, 196, 15) }
#footer { margin-top:20px;margin-bottom:0px }
footer .column > h3 { border-bottom-style:dashed;text-align:left;font-weight: 400;font-family: "Roboto Condensed";font-style: normal;font-size: 18px;text-transform: none;color: rgb(255, 255, 255);border-color: rgb(119, 119, 119) }
footer .column-menu-wrap > ul li { color: rgb(255, 255, 255) }
footer .contacts { box-shadow:none;border-top-width: 1px;border-bottom-width: 1px;border-style: dashed;border-color: rgb(119, 119, 119) }
footer .contacts [data-hint]:after { border-radius: 3px;color: rgb(255, 255, 255);background-color: rgb(43, 176, 227) }
.bottom-footer { box-shadow:none;background-color: rgba(255, 255, 255, 0.49) }
.fullwidth-footer { background-color: rgba(63, 62, 75, 0.8) }
footer .column-menu-wrap > ul li:hover a { color: rgb(241, 196, 15) }
footer .contacts > div > span > .contact-icon { background-color: rgb(68, 67, 73) }
footer a .contacts-text:hover { color: rgb(241, 196, 15) }
footer .contacts-text { color: rgb(255, 255, 255) }
.column.products .product-grid-item { border-color: rgb(119, 119, 119);border-bottom-style:dashed;padding:4px 0 }
.column.products .product-grid-item .price-old { color: rgb(241, 196, 15) }
.column.products .product-grid-item .name a:hover { color: rgb(43, 176, 227) }
.column.products .product-grid-item .price, .column.products .product-grid-item .price-new { color: rgb(255, 255, 255) }
.column.products .product-grid-item .name a, .footer-post-title { color: rgb(255, 255, 255) }
.column.products .product-grid-item .name a { white-space:nowrap }
footer .column-text-wrap p { line-height:15px }
footer .column-text-wrap h1, footer .column-text-wrap h2, footer .column-text-wrap h3 { padding-bottom:2px;font-weight: 400;font-family: "Roboto Condensed";font-style: normal;font-size: 16px;text-transform: none;color: rgb(255, 255, 255) }
footer .column-text-wrap { color: rgb(255, 255, 255) }
.footer-post .comment-date .p-comment:before { color: rgb(66, 139, 202) }
.footer-post { border-color: rgb(119, 119, 119);border-bottom-style:dashed }
.footer-post-title:hover { color: rgb(43, 176, 227) }
.footer-post-title { color: rgb(255, 255, 255) }
.footer-post .comment-date .p-date:before { color: rgb(66, 139, 202) }
#cart .heading i { border-left-style:none;background-color: rgb(241, 196, 15);border-color: rgba(244, 244, 244, 0) }
.mini-cart-info table tr { border-bottom-style:solid;border-bottom-color: rgb(104, 85, 81) }
#cart .heading, .ie9 #cart button.heading { font-weight: 700;font-family: "Roboto Condensed";font-style: normal;font-size: 15px;text-transform: none;letter-spacing: 1px;color: rgb(104, 85, 81) }
.journal-header-center #cart { border-radius: 0px;background-color: rgba(255, 255, 255, 0.6) }
.journal-header-center #cart .heading i { border-radius: 0px;border-top-left-radius: 0px;border-top-right-radius: 0px;border-bottom-right-radius: 0px;border-bottom-left-radius: 0px }
.mini-cart-info, #cart .empty { font-weight: 700;font-family: "Roboto Condensed";font-size: 13px;color: rgb(104, 85, 81) }
.mini-cart-info table tr td.image img { border-radius: 0px;border-color: rgb(204, 204, 204) }
.mini-cart-info { max-height:355px }
.mini-cart-total { font-weight: 700;font-family: "Roboto Condensed";font-size: 14px;color: rgb(255, 255, 255);background-color: rgb(104, 85, 81) }
.button-search, .journal-header-center .button-search { border-right-style:solid }
#search input { font-weight: 700!important;font-family: "Roboto Condensed"!important;font-style: normal!important;font-size: 15px!important;text-transform: none!important;letter-spacing: 1px!important;color: rgb(104, 85, 81)!important;background-color: rgb(42, 43, 46) }
.journal-header-center #search input { background-color: rgba(255, 255, 255, 0.6) }
.journal-header-center .autocomplete2-suggestions { border-radius: 4px }
.autocomplete2-suggestions > div { max-height:395px }
.journal-header-center #language, .journal-header-center #currency { border-style:dashed;border-color: rgb(211, 173, 20) }
.journal-language .dropdown-menu, .journal-currency .dropdown-menu { background-color: rgb(255, 255, 255);box-shadow:0 2px 2px rgba(0, 0, 0, 0.15) }
.journal-currency form .currency-symbol { border-radius: 50%;background-color: rgb(255, 255, 255) }
#cart .heading i:before { content: '\e69a';font-size: 24px;color: rgb(255, 255, 255) }
.button-search i:before { content: '\e697';font-size: 22px;color: rgb(255, 255, 255);top: -2px;left: -2px }
.journal-top-header { background-color: rgb(226, 194, 25) }
.header, .boxed-header.default-header .journal-login { background-color: rgba(0, 0, 0, 0.3) }
.journal-header-default #logo, .journal-header-compact #logo { background-color: rgb(42, 43, 46) }
.journal-header-default #cart { background-color: rgb(42, 43, 46) }
#cart .content .cart-wrapper, .oc2 #cart .checkout { background-color: rgb(255, 255, 255) }
.mini-cart-info table tr td.remove i { color: rgb(221, 0, 23) }
.mini-cart-info table tr td.remove i:hover, .firefox .mini-cart-info table tr td.remove button:hover i { color: rgb(241, 196, 15) }
.autocomplete2-suggestion { border-bottom-style:solid;border-color: rgb(228, 228, 228) }
.autocomplete2-suggestion:hover { background-color: rgb(244, 244, 244) }
.button-search { background-color: rgb(241, 196, 15) }
.autocomplete2-suggestions { background-color: rgb(255, 255, 255);box-shadow: 0px 2px 15px -2px rgba(0, 0, 0, 0.15) }
.journal-language .dropdown-menu > li > a, header .journal-currency .dropdown-menu > li > a { color: rgb(0, 0, 0) }
.journal-language .dropdown-menu > li > a:hover, header .journal-currency .dropdown-menu > li > a:hover { color: rgb(0, 0, 0) }
.journal-language .dropdown-menu > li > a:hover, .journal-currency .dropdown-menu > li > a:hover { background-color: rgb(244, 244, 244) }
.journal-language .dropdown-menu > li, .journal-currency .dropdown-menu > li { border-top-style:solid }
.journal-header-center .journal-top-header, .journal-header-center .journal-secondary { border-bottom-style:solid; border-top-style:solid; }
.autocomplete2-suggestion .p-image { display:block }
html:not(.home-page) .header, html:not(.home-page).boxed-header.default-header .journal-login { background-color: rgba(0, 0, 0, 0.29) }
.is-sticky header .header { background-color: rgba(135, 137, 117, 0.85) }
.is-sticky .header { box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, 0.4) }
#cart .cart-wrapper { box-shadow: 0px 2px 15px -2px rgba(0, 0, 0, 0.15) }
.product-wrapper { padding: 15px }
.product-grid-item .image > a { border-top-width: 1px;border-right-width: 1px;border-left-width: 1px;border-style: solid;border-color: rgba(63, 62, 75, 0.29) }
.product-grid-item .image .label-latest { display: block }
.product-grid-item .image .label-sale { display: block }
.product-grid-item .image .label-outofstock { display: block }
.product-grid-item .name a, .posts h2 a { white-space:normal;font-weight: 400;font-family: "Comfortaa";font-size: 12px;color: rgb(207, 200, 192) }
.product-grid-item .price { display:inline-block;;display:inline-block }
.product-details:before { font-size: 23px;margin-left: -10px;top: -19px;color: rgb(244, 244, 244) }
.product-grid-item .cart .button[data-hint]:after { color: rgb(255, 255, 255);background-color: rgb(221, 0, 23) }
.product-grid-item .quickview-button .button { border-radius: 50% }
.product-grid-item .quickview-button .button[data-hint]:after { border-radius: 3px;color: rgb(255, 255, 255);background-color: rgb(241, 196, 15) }
.product-grid-item.display-icon .wishlist > a, .product-grid-item.display-icon .compare > a { border-radius: 50%;width:30px;height:30px; padding:0;;background-color: rgb(43, 176, 227) }
.product-grid-item .wishlist [data-hint]:after, .product-grid-item .compare [data-hint]:after { border-radius: 3px;color: rgb(255, 255, 255);background-color: rgb(241, 196, 15) }
.product-grid-item .cart:not(.enquiry-button) i::before { content: '\e180';font-size: 19px;color: rgb(255, 255, 255) }
.product-grid-item .quickview-button .button-left-icon:before, .product-grid-item .quickview-button .button-right-icon:before { content: '\e056';font-size: 20px;color: rgb(255, 255, 255) }
.product-grid-item .wishlist-icon:before { content: '\e663';font-size: 16px;color: rgb(255, 255, 255);top: 1px }
.product-grid-item .compare-icon:before { content: '\e025';font-size: 16px;color: rgb(255, 255, 255) }
.product-grid-item .price, .product-grid-item .price-new { font-weight: 700;font-family: "Oswald";font-size: 24px;color: rgb(255, 255, 255) }
.product-grid-item .price-old, .compare-info .price-old, .autocomplete2-suggestion span.p-price .price-old { font-weight: 700;font-family: "Fira Sans";font-size: 18px;color: rgb(241, 196, 15) }
.product-grid-item .wishlist a, .product-grid-item .compare a { font-weight: normal;font-family: Helvetica, Arial, sans-serif;font-style: normal;font-size: 11px;text-transform: none;color: rgb(51, 55, 69) }
.product-grid-item .name a:hover, .side-column .product-grid-item .name a:hover, .posts h2 a:hover { color: rgb(255, 255, 255) }
.product-grid-item.display-icon .wishlist > a:hover, .product-grid-item.display-icon .compare > a:hover { background-color: rgb(241, 196, 15) }
.soft-shadow .product-wrapper { box-shadow:1px 1px 0 0 rgba(0,0,0,.05) }
.product-grid-item .rating { margin-left:-47px;top:-35px }
.category-list ul li a, .refine-category-name { font-weight: 400;font-family: "Comfortaa";font-size: 11px;color: rgb(207, 200, 192) }
.category-list ul li:after { content: '/';color: rgb(241, 196, 15) }
.category-list { background-color: rgb(63, 62, 75) }
.refine-image a { border-radius: 3px;background-color: rgb(244, 244, 244) }
.refine-image a:hover { background-color: rgb(228, 228, 228) }
.product-filter, .product-compare a { font-weight: 400;font-family: "Comfortaa";font-style: normal;font-size: 11px;text-transform: none;color: rgb(255, 255, 255) }
.pagination b, .pagination a:hover, .pagination .active { color: rgb(255, 255, 255) }
.category-list ul li a:hover, .refine-image a:hover .refine-category-name { color: rgb(255, 255, 255) }
.pagination { border-radius: 3px;background-color: rgb(244, 244, 244);box-shadow:none }
.product-filter .display a i:hover, .product-filter .display a.active i { color:rgb(241, 196, 15) !important }
.product-filter { background-color: rgb(135, 137, 117) }
.product-compare a:hover { color: rgb(241, 196, 15) }
.pagination a { background-color: rgb(255, 255, 255);color: rgb(0, 0, 0) }
.pagination b, .pagination a:hover, .pagination li.active { background-color: rgb(241, 196, 15) }
.pagination .results, .dataTables_info { font-weight: 700;font-family: "Ubuntu";font-style: normal;font-size: 13px;text-transform: none }
.category-page .heading-title { text-align:left }
.tp-bannertimer, .tp-bannertimer.tp-bottom { height:3px;background-color: rgb(241, 196, 15) }
.tp-bullets.tp-thumbs .bullet:before { opacity:.4 }
.tp-bullets.tp-thumbs .bullet.selected:before, .tp-bullets.tp-thumbs .bullet:hover:before { opacity:0 }
.tp-bullets.tp-thumbs { border-top-width: 7px;border-right-width: 7px;border-left-width: 7px;border-style: solid;border-color: rgb(255, 255, 255) }
.tp-leftarrow:before, .tp-leftarrow.default:before, .journal-simple-slider .owl-controls .owl-buttons .owl-prev:before { content: '\e62b';font-size: 65px;color: rgb(255, 255, 255) }
.tp-rightarrow:before, .tp-rightarrow.default:before, .journal-simple-slider .owl-controls .owl-buttons .owl-next:before { content: '\e62c';font-size: 65px;color: rgb(255, 255, 255) }
.tp-bullets.simplebullets.round .bullet.selected, .tp-bullets.simplebullets.round .bullet:hover, .journal-simple-slider .owl-controls .owl-page.active span, .journal-simple-slider .owl-controls.clickable .owl-page:hover span { background-color: rgb(241, 196, 15) }
.tp-bullets.simplebullets.round .bullet, .journal-simple-slider .owl-controls .owl-page span { background-color: rgb(255, 255, 255);border-radius: 50%;margin-left:7px;width:12px;height:12px }
.tp-leftarrow:hover:before, .tp-leftarrow.default:hover:before, .tp-rightarrow:hover:before, .tp-rightarrow.default:hover:before, .journal-simple-slider .owl-controls .owl-buttons .owl-prev:hover:before, .journal-simple-slider .owl-controls .owl-buttons .owl-next:hover:before { color: rgb(241, 196, 15) }
.journal-carousel .htabs a, .side-column .journal-carousel .htabs a { border-right-style:solid;border-color: rgb(255, 255, 255) }
.journal-carousel .htabs a, .journal-carousel .htabs.single-tab a:hover, .journal-carousel .htabs.single-tab a.selected { font-weight: 400;font-family: "Roboto Condensed";font-style: normal;font-size: 24px;text-transform: none }
.journal-carousel .htabs a { line-height:37px; min-height:37px; }
.journal-carousel.arrows-top .swiper-button-prev::before { content: '\e60f';font-size: 20px;color: rgb(0, 0, 0) }
.journal-carousel.arrows-top .swiper-button-next::before { content: '\e60e';font-size: 20px;color: rgb(0, 0, 0) }
.swiper-pagination-bullet { background-color: rgb(68, 67, 73);border-radius: 50%;width:10px;height:10px }
.journal-carousel.arrows-top .swiper-button-prev:hover::before, .journal-carousel.arrows-top .swiper-button-next:hover::before { color: rgb(241, 196, 15) }
.swiper-pagination-bullet:hover, .swiper-pagination-bullet.swiper-pagination-bullet-active { background-color: rgb(241, 196, 15) }
.journal-carousel .htabs a:hover, .journal-carousel .htabs a.selected { color: rgb(255, 255, 255);background-color: rgb(43, 176, 227) }
.journal-carousel:not(.arrows-top) .swiper-button-next::before { content: '\e60e';font-size: 22px;color: rgb(241, 196, 15) }
.journal-carousel:not(.arrows-top) .swiper-button-prev::before { content: '\e60f';font-size: 22px;color: rgb(241, 196, 15) }
.product-list-item { background-color: rgba(255, 255, 255, 0.8) }
.product-list-item .image > a { border-width: 1px;border-style: solid;border-color: rgba(63, 62, 75, 0.29) }
.product-list-item .image .label-latest { display: block }
.product-list-item .image .label-sale { display: block }
.product-list-item .image .label-outofstock { display: block }
.product-list-item .name a { font-weight: 400;font-family: "Roboto Condensed";font-size: 25px;color: rgb(42, 43, 46) }
.product-list-item .price, .product-list-item .price-new { font-weight: 700;font-family: "Oswald";font-size: 24px;color: rgb(63, 62, 75) }
.product-list-item .description { font-weight: 400;font-family: "Arimo";font-size: 14px;color: rgb(120, 107, 93);display:block }
.product-list-item .cart .button[data-hint]:after { border-radius: 3px;color: rgb(255, 255, 255);background-color: rgb(66, 139, 202) }
.product-list-item .quickview-button { margin-left: -20px;margin-top: -20px }
.product-list-item .quickview-button .button { border-radius: 50px }
.product-list-item .quickview-button .button[data-hint]:after { border-radius: 3px;color: rgb(255, 255, 255);background-color: rgb(241, 196, 15) }
.product-list-item .wishlist a, .product-list-item .compare a { color: rgb(51, 55, 69) }
.product-list-item .cart:not(.enquiry-button) i:before { content: '\e180';font-size: 20px;color: rgb(255, 255, 255) }
.product-list-item .quickview-button .button-left-icon:before, .product-list-item .quickview-button .button-right-icon:before { content: '\e056';font-size: 20px;color: rgb(255, 255, 255) }
.product-list-item .wishlist-icon:before { content: '\e662';font-size: 11px }
.product-list-item .compare-icon:before { content: '\e025';font-size: 11px }
.product-list-item .wishlist a:hover, .product-list-item .compare a:hover { color: rgb(241, 196, 15) }
.side-column .box-content li a, .side-column .box-category li a, .flyout-menu .flyout > ul > li > a, .journal-sf ul li, .side-column .oc-module .product-grid-item, #column-right .recentArticles li, #column-right .popularArticles li, #column-left .recentArticles li, #column-left .popularArticles li, .side-post + hr { border-bottom-style:solid }
.side-column .box-category li a img, .side-column .oc-module .product-grid-item .image img { border-radius: 3% }
.side-column .side-category-accordion i { border-radius: 50%;color: rgb(0, 0, 0);background-color: rgb(69, 115, 143) }
.side-column .side-category-accordion i:hover { color: rgb(255, 255, 255);background-color: rgb(241, 196, 15) }
.side-column .box-category li a:before, .flyout-menu .flyout > ul > li > a:before, .side-column .box-content li a:before { content: '\e62c';font-size: 15px;color: rgb(169, 184, 192);top: -1px }
.side-column, .side-column .oc-module .product-grid-item .price, .journal-sf ul li label, .side-post-title { color: rgb(0, 0, 0) }
.side-column .box-content li a:hover, .side-column .box-category li a:hover, .flyout-menu .flyout > ul > li:hover > a, .flyout-menu .flyout > ul > li > a:active, .side-column .box-content li a.active, .side-column .box-category li a.active, .side-column .oc-module .product-grid-item .name a:hover, #column-right .recentArticles li > a:hover, #column-right .popularArticles li > a:hover, #column-left .recentArticles li > a:hover, #column-left .popularArticles li > a:hover { color: rgb(241, 196, 15) }
.side-column .box-content li a, .side-column .box-category li a, .flyout-menu .flyout > ul > li > a, .journal-sf ul li, .side-column .oc-module .product-grid-item, #column-right .recentArticles li, #column-right .popularArticles li, #column-left .recentArticles li, #column-left .popularArticles li, .side-post + hr { border-color:rgba(255, 255, 255, 0) }
.side-column .heading-title, .side-column .box-heading, .side-column #blogArticle .articleHeader h1, .side-column .journal-carousel .htabs.single-tab a.selected, .oc-filter .panel-heading, .oc-filter a.list-group-item { font-weight: 400;font-family: "Roboto Condensed";font-style: normal;font-size: 20px;text-transform: none }
.side-column .box-content li a, .side-column .box-category li a { padding-left:0px;padding-top:10px;padding-bottom:2px;padding-right:20px }
.side-column .oc-module .product-grid-item { padding-left:0px;padding-right:0px;padding-bottom:0px;padding-top:7px }
.side-column .side-category i { width:20px;height:20px;font-weight: normal;font-family: Helvetica, Arial, sans-serif;font-style: normal;font-size: 18px;text-transform: none;color: rgb(255, 255, 255) }
.side-column .box-content li a, .side-column .box-category li a, .flyout-menu .flyout > ul > li > a, #column-right .recentArticles li > a, #column-right .popularArticles li > a, #column-left .recentArticles li > a, #column-left .popularArticles li > a, .side-post-title { color: rgb(68, 67, 73) }
.side-column .oc-module .product-grid-item .name a { white-space:nowrap }
.cart-info tbody td, .wishlist-info tbody td, .compare-info td, .journal-checkout .checkout-cart tbody td, .journal-checkout .checkout-cart tbody td:first-of-type { border-bottom-style:dashed }
.login-content > div { border-width: 1px;border-style: solid;border-color: rgb(204, 204, 204);padding:15px }
.action-area h3 { font-weight: 400;font-family: "Roboto Condensed";font-style: normal;font-size: 15px;text-transform: uppercase;color: rgb(255, 255, 255);background-color: rgb(135, 137, 117) }
.checkout-page .checkout, .oc2 .checkout #accordion, .route-checkout-checkout #accordion { border-radius: 3px }
.buttons { border-radius: 3px;padding-top:15px; padding-bottom:15px;;padding-left:15px; padding-right:15px;background-color: rgb(244, 244, 244) }
.cart-info table, .wishlist-info table, .compare-info td, table.list tbody td, .order-list .order-content { background-color: rgba(255, 255, 255, 0.8) }
.cart-info tbody td, .wishlist-info tbody td, .compare-info td, table.list tbody td, .order-list .order-content { color: rgb(51, 55, 69) }
.cart-info thead td, .wishlist-info thead td, .compare-info thead td, .manufacturer-heading, table.list thead td, .order-list .order-id, .order-list .order-status { color: rgb(255, 255, 255);background-color: rgb(135, 137, 117) }
.cart-info tbody td, .wishlist-info tbody td, .compare-info td, .journal-checkout .checkout-cart tbody td, .journal-checkout .checkout-cart tbody td:first-of-type, .account-page table.list td, .account-page table.list { border-color: rgb(153, 153, 153) }
.login-content > div, .sitemap-info > div > ul { background-color: rgba(255, 255, 255, 0.8) }
.login-content hr { background-color: rgb(228, 228, 228) }
#content.sc-page .content p, #content.sc-page .action-area p, .cart-total, table.list tfoot td { background-color: rgba(255, 255, 255, 0.8) }
table.radio .highlight:hover td label, .action-area .panel-title:hover a { color: rgb(255, 255, 255) }
table.radio .highlight td, .action-area .panel-heading { background-color: rgb(135, 137, 117) }
table.radio .highlight:hover td, .action-area .panel-heading:hover { background-color: rgb(241, 196, 15) }
#content.sc-page .content table.radio .highlight td { border-color: rgb(228, 228, 228) }
.checkout-heading, .checkout .panel-heading, .route-checkout-checkout .panel-heading:hover { background-color: rgb(69, 115, 143) }
.checkout-heading { border-color: rgb(91, 142, 174);border-bottom-style:solid }
.checkout-product thead td, .checkout-product tfoot td { color: rgb(51, 55, 69);background-color: rgb(255, 255, 255) }
.checkout-product tbody td { border-color: rgb(244, 244, 244) }
.checkout-content, .checkout-page .panel-body { background-color: rgb(244, 244, 244) }
.checkout-content, .checkout-page .panel-body { padding:10px }
.checkout-heading, .checkout .panel-title, .route-checkout-checkout .panel-title { font-weight: bold;font-family: Helvetica, Arial, sans-serif;font-style: normal;font-size: 13px;text-transform: none;color: rgb(255, 255, 255) }
table.radio .highlight td label, .action-area .panel-title { font-weight: 700;font-family: "Comfortaa";font-size: 14px;color: rgb(255, 255, 255) }
.information-page #content h1.heading-title { text-align:left }
.sf-icon:after { background-color: rgb(241, 196, 15);color: rgb(255, 255, 255);border-radius: 3px }
.sf-reset:hover { color: rgb(241, 196, 15) }
.sf-price .ui-widget-header { background-color: rgb(69, 115, 143) }
.sf-price .value { color: rgb(255, 255, 255);background-color: rgb(43, 176, 227);border-radius: 3px }
.sf-reset { color: rgb(68, 67, 73) }
.sf-price .ui-slider-handle:hover { background-color: rgb(241, 196, 15) }
.sf-price .ui-slider-handle { background-color: rgb(68, 67, 73);width:15px;height:15px;top:-6px;border-radius: 50% }
.journal-sf ul label.sf-checked img, .journal-sf ul label:hover img { border-color: rgb(68, 67, 73) }
.sf-icon .sf-reset-icon::after, .sf-reset .sf-reset-icon::after { content: '\e602';font-size: 16px;color: rgb(68, 67, 73) }
.side-column .journal-sf .box ul li label.sf-checked, .side-column .journal-sf .box ul li label:hover { color: rgb(241, 196, 15) }
.journal-sf ul label img { border-width: 2px;border-radius: 3%;border-style: solid;border-color: rgb(244, 244, 244) }
.side-column .journal-sf .box ul li { padding-top:1px;padding-bottom:1px;border-bottom-style:solid;border-color: rgba(255, 255, 255, 0) }
.sf-price .box-content { padding-left:17px;padding-bottom:35px;padding-top:20px;padding-right:17px }
.side-column .journal-sf .box { margin-bottom:10px }
.sf-price .ui-widget-content { background: rgb(241, 196, 15) }
.journal-sf .sf-image .box-content ul li { padding-bottom:7px;padding-right:7px;width:12.5% }
.journal-sf .sf-image .box-content { padding-top:5px }
.sf-price .ui-slider-horizontal { height:2px }
.side-column .journal-sf .box-heading, .oc-filter a.list-group-item { color: rgb(43, 176, 227) }
.journal-sf .box-content { max-height:185px }
.side-column .journal-sf .box ul { padding-top:5px }
.journal-sf .sf-category.sf-image .box-content ul li { width:20% }
.journal-sf .sf-manufacturer.sf-image .box-content ul li { width:25% }
.open-filter { background-color: rgb(1, 23, 69) }
.nav-numbers a { width:10px;height:10px;border-radius: 50%;background-color: rgb(51, 55, 69) }
.nav-numbers a:hover, .nav-numbers li.active a { background-color: rgb(241, 196, 15) }
.ui-pnotify { display: block !important;background-color: rgb(68, 67, 73) }
.ui-pnotify-text img { display: block }
.ui-pnotify-title { font-weight: 400;font-family: "Roboto Condensed";font-style: normal;font-size: 17px;text-transform: none;color: rgb(255, 255, 255);background-color: rgb(43, 176, 227) }
.ui-pnotify-text { font-weight: normal;font-family: Helvetica, Arial, sans-serif;font-style: normal;font-size: 14px;text-transform: none;color: rgb(255, 255, 255) }
.ui-pnotify-closer { color: rgb(255, 255, 255) }
.ui-pnotify-closer:hover { color: rgb(241, 196, 15) }
.ui-pnotify-text a { color: rgb(43, 176, 227) }
.ui-pnotify-text a:hover { color: rgb(241, 196, 15) }
.notification-buttons .notification-checkout { color: rgb(255, 255, 255) }
.notification-buttons .notification-checkout:hover { color: rgb(255, 255, 255) }
.notification-buttons .notification-cart:hover { color: rgb(255, 255, 255) }
.notification-buttons { display:block }
.notification-buttons .notification-cart { color: rgb(255, 255, 255) }
.side-column .block-content { border-radius: 3px;padding:0px }
.block-content { padding:15px;background-color: rgba(255, 255, 255, 0.7);border-width: 1px;border-style: solid;border-color: rgb(204, 204, 204) }
.block-content, .side-block-content, .block-content p, .side-block-content p, .block-content p span, .side-block-content p span { font-weight: normal ;font-family: Helvetica, Arial, sans-serif ;font-style: ;font-size: 12px ;text-transform: }
.editor-content h1, .editor-content h2, .editor-content h3, .side-block-content h1, .side-block-content h3, .side-block-content h3 { font-weight: 400 ;font-family: "Roboto Condensed" ;font-style: normal ;font-size: 20px ;text-transform: none ;padding-bottom:7px }
.editor-content p, .side-block-content p { padding-bottom:7px }
.side-column .editor-content h1, .side-column .editor-content h2, .side-column .editor-content h3 { font-weight: 400 !important;font-family: "Roboto Condensed" !important;font-style: normal !important;font-size: 17px !important;text-transform: none !important }
.side-column .box.cms-blocks .cms-block { margin-bottom:10px }
.side-column .block-content p { font-weight: normal;font-family: Helvetica, Arial, sans-serif;font-style: normal;font-size: 12px;text-transform: none }
.gallery-thumb a:before { content: '\e056';font-size: 30px;color: rgb(255, 255, 255) }
.gallery-thumb .item-hover { background-color: rgba(51, 55, 69, 0.5) }
.lg-backdrop { background-color: rgba(0, 0, 0, 0.75) }
.lg-toolbar, .lg-sub-html { background-color: rgb(69, 115, 143) }
.lg-toolbar .lg-icon:hover, #lg-intense-zoom:hover { color: rgb(241, 196, 15) }
.lg-sub-html { font-weight: 400;font-family: "Roboto Condensed";font-style: normal;font-size: 21px;text-transform: none;color: rgb(255, 255, 255) }
.side-column .journal-gallery .box-content { padding:0px !important }
#content .welcome h1, .side-column .welcome h1 { text-align:left;font-weight: 400;font-family: "Roboto Condensed";font-style: normal;font-size: 25px;text-transform: none;color: rgb(51, 55, 69);border-bottom-style:solid;border-color: rgb(228, 228, 228) }
#content .welcome p, .side-column .welcome p { text-align:left }
.welcome p { line-height:16px }
.product-grid-item .compare, .product-filter .product-compare { display:none; }
.product-grid-item .wishlist { display:none }
.product-info .product-options > .cart { display:block }
.product-info .right .description { display:block }
.product-info .right > div > .price { display:block }
.product-info .right > div > .options { display:block }
.product-info .right .wishlist-compare .links a + a { display:none }
.product-info .right .wishlist-compare .links a:first-of-type { display:inline-block; }
.product-grid-item .name { display:table }
.journal-carousel .product-grid-item .cart { display:block }
.journal-carousel .product-grid-item .wishlist { display:none }
.journal-carousel .product-grid-item .compare { display:none }
.journal-carousel .product-grid-item .price { display:inline-block }
.journal-carousel .product-grid-item .name { display:table }
.side-column .journal-carousel .product-grid-item .cart { display:block }
.side-column .journal-carousel .product-grid-item .wishlist { display:none }
.side-column .journal-carousel .product-grid-item .compare { display:none }
.side-column .journal-carousel .product-grid-item .price { display:inline-block }
.side-column .journal-carousel .product-grid-item .name { display:table }
.custom-sections .product-grid-item .cart { display:block }
.custom-sections .product-grid-item .wishlist { display:none }
.custom-sections .product-grid-item .compare { display:none }
.custom-sections .product-grid-item .price { display:inline-block }
.custom-sections .product-grid-item .name { display:table }
.mega-menu .product-grid-item .cart { display:none }
.mega-menu .product-grid-item .wishlist { display:none }
.mega-menu .product-grid-item .compare { display:none }
.mega-menu .product-grid-item .name { display:table }
.product-list-item .cart { display:block }
.product-list-item .wishlist { display:none }
.product-list-item .compare { display:none }
.product-list-item .price { display:inline-block }
.product-list-item .name { display:table }
.product-info .right > div .countdown > span { border-style:solid }
.countdown > span { border-style:solid }
.expire-text { padding-bottom:8px;text-align:left }
.product-page .countdown, .expire-text { max-width:200px }
.side-post, .side-post + hr { margin-bottom:10px }
.side-blog .box-post { padding-left:0px;padding-right:0px;padding-bottom:0px;padding-top:10px }
.side-blog .side-post + hr { border-bottom-style:dashed;border-color: rgb(228, 228, 228) }
.post-module .post-wrapper .post-item-details h2 a { white-space:nowrap }
.side-post-image img { border-radius: 50% }
.post-module .post-item-details { text-align:left }
span.p-author:before { content: '\e1b8';font-size: 13px;color: rgb(43, 176, 227) }
span.p-date:before { content: '\e6b3';font-size: 13px;color: rgb(43, 176, 227) }
span.p-comment:before { content: '\e1ae';font-size: 13px;color: rgb(43, 176, 227) }
.post-wrapper { background-color: rgba(255, 255, 255, 0.5);border-width: 1px;border-style: solid;border-color: rgb(204, 204, 204);box-shadow:none }
.post-wrapper:hover { background-color: rgb(255, 255, 255) }
.posts.blog-list-view .post-item-details h2 a { white-space:nowrap }
.post-item-details .comment-date { border-top-width: 1px;border-bottom-width: 1px;border-style: dashed;border-color: rgb(204, 204, 204);color: rgb(119, 119, 119) }
.post-item-details { padding-left:15px;padding-bottom:0px;padding-right:15px;padding-top:0px;text-align:center }
.post-item-details .post-text { font-weight: 400;font-family: "Comfortaa";font-size: 11px }
.post-image img { border-width: 1px;border-style: solid;border-color: rgb(204, 204, 204) }
.posts .post-wrapper h2 a { white-space:normal;font-weight: 700;font-family: "Roboto Condensed";font-style: normal;font-size: 16px;text-transform: none;color: rgb(104, 85, 81) }
.posts.blog-list-view .post-image { width:30% }
.posts.blog-list-view .post-item-details h2 a span { border-bottom-style:solid }
.post-details .tags a:hover, .side-blog-tags .box-tag a:hover { background-color: rgb(241, 196, 15) }
.reply-form h3 { margin-bottom:20px;margin-top:20px;background-color: rgb(43, 176, 227);padding-left:10px;padding-bottom:10px;padding-right:10px;padding-top:10px;text-align:left;font-weight: 700;font-family: "Roboto Condensed";font-style: normal;font-size: 16px;text-transform: uppercase;color: rgb(255, 255, 255);border-radius: 3px }
.post-details .tags b { color: rgb(255, 255, 255) }
.post-details .tags a, .side-blog-tags .box-tag a { background-color: rgb(43, 176, 227);color: rgb(255, 255, 255) }
.post-comment h3 { padding-left:10px;padding-bottom:10px;padding-right:10px;background-color: rgb(43, 176, 227);margin-bottom:20px;margin-top:20px;padding-top:10px;font-weight: 700;font-family: "Roboto Condensed";font-style: normal;font-size: 16px;text-transform: uppercase;color: rgb(255, 255, 255);text-align:left }
.comments > h3 { margin-top:10px;background-color: rgb(43, 176, 227);font-weight: 700;font-family: "Roboto Condensed";font-style: normal;font-size: 16px;text-transform: uppercase;color: rgb(255, 255, 255);text-align:left;border-radius: 3px;padding-top:10px;margin-bottom:20px;padding-bottom:10px;padding-left:10px;padding-right:10px }
.post-stats.comment-date { padding-bottom:10px }
.post-details h3 { font-weight: 400;font-family: "Roboto Condensed";font-style: normal;font-size: 20px;text-transform: none }
.reply-form .comment-form form { border-radius: 3px }
blockquote { border-color: rgb(43, 176, 227) }
.post-details h2 { font-weight: 400;font-family: "Roboto Condensed";font-style: normal;font-size: 24px;text-transform: none }
.post-details { padding:20px;background-color: rgba(255, 255, 255, 0.8) }
.post-details h1, .post-details h1 font { font-weight: 400;font-family: "Roboto Condensed";font-style: normal;font-size: 30px;text-transform: none }
.comments > .comment { border-radius: 3px }
.comment-form form { border-radius: 3px }
.blog-post .heading-title { text-align:left;font-weight: 700;font-family: "Roboto Condensed";font-size: 30px;color: rgb(104, 85, 81);border-width: 1px;border-radius: 0px;border-style: solid;border-color: rgb(204, 204, 204);padding-left:15px;padding-right:15px;line-height:40px; min-height:40px;;background-color: rgba(255, 255, 255, 0.8) }
.comments .user-name { font-weight: 400;font-family: "Roboto Condensed";font-style: normal;font-size: 20px;text-transform: none }
.comments .reply { border-width: 1px;border-radius: 3px;border-style: dashed;border-color: rgb(238, 238, 238) }
.blog-post .post-stats.comment-date { border-bottom-width: 1px;border-style: dashed;border-color: rgb(228, 228, 228) }
.post-details .tags { text-align:left }
.blog-post .post-stats .p-category:before { content: '\e6b2';font-size: 14px;color: rgb(241, 196, 15) }
.blog-post .social { text-align:left;border-color: rgb(204, 204, 204);border-top-style:dashed }
.post-details, .post-details p, .post-details font, .post-details > span, .post-details p font, .post-details p span { font-weight: 400;font-family: "Comfortaa";font-size: 13px }
.comments > .comment:nth-of-type(odd) { background-color: rgb(244, 244, 244) }
.comments .reply:nth-of-type(odd) { background-color: rgb(255, 255, 255) }
.comments > .comment:nth-of-type(even) { background-color: rgb(244, 244, 244) }
.comments .reply:nth-of-type(even) { background-color: rgb(255, 255, 255) }
.journal-checkout .checkout-product thead td, .journal-checkout .checkout-product tfoot td { background-color: rgb(244, 244, 244) }
.one-page-checkout h1.heading-title { text-align:center;border-bottom-width: 0px;border-style: solid;font-weight: 400;font-family: "Roboto Condensed";font-style: normal;font-size: 30px;text-transform: uppercase }
.journal-checkout .left .login-box .radio label, .journal-checkout .spw > div .radio label, .journal-checkout .confirm-order, .journal-checkout .checkout-login .form-group:last-of-type, .is-customer .journal-checkout .checkout-payment-form #payment-new, .is-customer .journal-checkout .checkout-shipping-form #shipping-new, .journal-checkout #payment-confirm-button fieldset legend, .journal-checkout .customer-group label.control-label, .journal-checkout .customer-group { border-style:solid;border-color: rgb(228, 228, 228) }
.journal-checkout .checkout-content { border-width: 1px;border-style: dashed;border-color: rgb(204, 204, 204);background-color: rgb(250, 250, 250) }
.journal-checkout .secondary-title { border-radius: 0px;text-align:left }
.journal-checkout .checkout-cart tbody tr td, .journal-checkout .checkout-cart tbody td:first-of-type, .one-page-checkout .journal-checkout .checkout-product tbody td, .journal-checkout .checkout-cart thead td, .journal-checkout .checkout-cart thead td:first-of-type, .journal-checkout .checkout-cart thead td:last-of-type, .journal-checkout .checkout-cart tfoot tr:last-of-type td, .journal-checkout .checkout-cart tfoot td:first-of-type, .journal-checkout .checkout-cart tfoot td:last-of-type { border-style:dashed;border-color: rgb(204, 204, 204) }
.journal-checkout .table-responsive { max-height:361px }
.journal-checkout .confirm-order { text-align:left }
.form-group.company-input { display:none !important }
.form-group.address-2-input { display:none }
#content.one-page-checkout div fieldset > div.fax-input { display:block !important }
.journal-checkout .spw > div p { display:none }
.flyout .mega-menu-column > div > h3 { text-align:left }
.flyout .mega-menu-brands div > h3 { text-align:left }
.flyout .mega-menu div > h3 { text-align:left }
.fly-mega-menu { box-shadow:0 2px 8px -2px rgba(0, 0, 0, 0.4) }
.flyout-menu .flyout > ul > li > a { padding-left:0%;border-bottom-style:solid }
.flyout-menu .flyout .fly-drop-down ul li { border-bottom-style:solid }
.fly-drop-down ul { box-shadow:0 1px 8px -3px rgba(0, 0, 0, 0.5) }
.post-module .box-heading { font-weight: 400;font-family: "Roboto Condensed";color: rgb(221, 0, 23) }
li.p-brand { display:none; }
.product-info .right .price-tax { display:block }
.heading-title, .box-heading, #blogArticle .articleHeader h1, .oc-filter .panel-heading, .journal-carousel .htabs.single-tab a { padding-right:15px }
#cart .heading i:hover::before, .firefox #cart .heading:hover i::before { color: rgb(104, 85, 81) }
.cart-info .name a, .wishlist-info tbody .name a { font-weight: 700;font-family: "Comfortaa";font-size: 14px;color: rgb(104, 85, 81) }
.wishlist-info .action .btn-primary, .cart-info .quantity .input-group .btn-primary { background-color: rgb(104, 85, 81) }
.wishlist-info .action .btn-primary:hover, .cart-info .quantity .input-group .btn-primary:hover { background-color: rgb(241, 196, 15) }
.cart-info .name a:hover, .wishlist-info tbody .name a:hover { color: rgb(241, 196, 15) }
#total .right { font-weight: 700;font-family: "Roboto Condensed";font-size: 18px }
.route-account-register .form-group label, .route-checkout-checkout .form-group label, .oc1.route-account-register table.form td, .oc1.route-checkout-checkout table.form td { font-weight: 700;font-family: "Comfortaa";font-size: 14px;color: rgb(104, 85, 81) }
.mega-menu .product-wrapper .product-details { background-color: rgb(115, 110, 95) }
.mega-menu-categories .mega-menu-item ul li { padding-bottom:13px }
/* Swipebox Loader */
@media only screen and (min-width: 760px){
.ui-pnotify{
width: 350px !important;
}
}
/* Site width */
#container, #header, #footer, .bottom-footer > div, .bottom-footer.boxed-bar {
max-width: 1140px;
}
.product-page div.lg-sub-html{
top:auto;
bottom:0;
padding: 13px 70px;
background-color:;
}
.product-page .lg-toolbar{
background-color:;
}
.product-page .heading-title{
white-space:normal;
height:auto;
min-height:40px;
line-height:1.2;
padding-bottom:10px;
padding-top:10px;
}
.category-info .image{
display:none;
}
/*Notification Position*/
.ui-pnotify{
left:50%;
top:50% !important;
transform: translate(-50%, -50%);
}
html[dir="rtl"] .ui-pnotify{
right:auto !important;
}
.ui-pnotify{
box-shadow:0px 1px 12px rgba(0, 0, 0, 0.2);
}
.ui-pnotify-closer{
opacity:1;
}
.breadcrumb{
text-align:center
}
html[dir="rtl"] .breadcrumb{
text-align:center;
}
/* Product Grid Shadow */
.product-grid-item .product-wrapper{
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25);
}
.product-grid-item .enquiry-button .button i{
color:rgb(255, 255, 255);
}
.product-list-item .enquiry-button .button i{
color:rgb(255, 255, 255);
}
footer .contacts > div > span .contact-icon:hover{
background-color:rgb(43, 176, 227);
}
.product-grid-item .cart .button-left-icon:before{
float:none;
}
.product-grid-item .cart .button-right-icon:before{
margin-left:0;
}
.product-grid-item .cart .button-cart-text{
display:none;
}
.product-grid-item .cart .button[data-hint]:after,
.product-grid-item .cart .hint--top:before{
display:block;
}
.product-grid-item .cart .hint--top:before{
border-top-color: rgb(221, 0, 23);
}
.product-grid-item .cart .hint--right:before{
border-right-color: rgb(221, 0, 23);
}
.product-grid-item .cart .hint--left:before{
border-left-color: rgb(221, 0, 23);
}
.product-grid-item .cart .button-right-icon{
display:none !important;
}
/* BLOG */
.post-wrapper{
box-shadow: none;
}
.post-item .post-wrapper{
box-shadow: none !important;
}
.blog-list-view .post-wrapper{
box-shadow: none !important;
}
.product-details:before {
display:none;
}
/* Product Grid Quickview*/
.product-grid-item .quickview-button {
display:none;
}
.product-grid-item .quickview-button .button-right-icon{
display:none;
}
.product-grid-item .quickview-button .button-left-icon:before{
float:none;
}
.product-grid-item .quickview-button .button-right-icon:before{
margin-left:0;
}
.product-grid-item .quickview-button .button-cart-text{
display:none;
}
.product-grid-item .quickview-button [data-hint]:after,
.product-grid-item .quickview-button .hint--top:before{
display:block;
}
.product-grid-item .quickview-button .hint--top:before{
border-top-color: rgb(241, 196, 15);
}
.product-grid-item .quickview-button .hint--right:before{
border-right-color: rgb(241, 196, 15);
}
.product-grid-item .quickview-button .hint--left:before{
border-left-color: rgb(241, 196, 15);
}
/* Product Grid Wishlist/Compare */
.product-grid-item .button-wishlist-text,
.product-grid-item .button-compare-text{
display: none;
}
.product-grid-item .wishlist [data-hint]:after,
.product-grid-item .wishlist .hint--top:before,
.product-grid-item .compare [data-hint]:after,
.product-grid-item .compare .hint--top:before{
display:block;
}
.product-grid-item .wishlist .hint--top:before,
.product-grid-item .compare .hint--top:before{
border-top-color: rgb(241, 196, 15);
}
.product-grid-item .wishlist .hint--right:before,
.product-grid-item .compare .hint--right:before{
border-right-color: rgb(241, 196, 15);
}
.product-grid-item .wishlist .hint--left:before,
.product-grid-item .compare .hint--left:before{
border-left-color: rgb(241, 196, 15);
}
.product-grid-item .product-details .wishlist,
.product-grid-item .product-details .compare,
.product-list-item .image .wishlist,
.product-list-item .image .compare,
.product-grid-item .image .button-wishlist-text,
.product-grid-item .image .button-compare-text{
display:none !important;
}
.product-grid-item .image .wishlist,
.product-grid-item .image .compare{
visibility:hidden;
opacity:0;
}
.product-grid-item:hover .image .wishlist,
.product-grid-item:hover .image .compare{
visibility:visible;
opacity:1;
}
.product-list-item .cart .button{
width:40px;
height:40px;
line-height:40px;
padding:0;
}
.product-list-item .quickview-button .button{
width:40px;
height:40px;
line-height:40px;
padding:0;
}
.product-grid-item .cart .button{
width:40px;
height:40px;
line-height:40px;
padding:0;
}
.product-grid-item .cart{
height:40px;
}
.product-grid-item .quickview-button .button{
width:40px;
height:40px;
line-height:40px;
padding:0;
}
/* Product List */
.product-list-item{
box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
}
.product-list-item .cart .button-left-icon:before{
float:none;
}
.product-list-item .cart .button-right-icon:before{
margin-left:0;
}
.product-list-item .cart .button-cart-text{
display:none;
}
.product-list-item .cart .button[data-hint]:after,
.product-list-item .cart .hint--top:before{
display:block;
}
.product-list-item .cart .hint--top:before{
border-top-color: rgb(66, 139, 202);
}
.product-list-item .cart .hint--right:before{
border-right-color: rgb(66, 139, 202);
}
.product-list-item .cart .hint--left:before{
border-left-color: rgb(66, 139, 202);
}
.product-list-item .cart .button-right-icon{
display:none;
}
/* Product List Quickview*/
.product-list-item .quickview-button {
display:none;
}
.product-list-item .quickview-button .button-right-icon{
display:none;
}
.product-list-item .quickview-button .button-left-icon:before{
float:none;
}
.product-list-item .quickview-button .button-right-icon:before{
margin-left:0;
}
.product-list-item .quickview-button .button-cart-text{
display:none;
}
.product-list-item .quickview-button .button[data-hint]:after,
.product-list-item .quickview-button .hint--top:before{
display:block;
}
.product-list-item .quickview-button .hint--top:before{
border-top-color: rgb(241, 196, 15);
}
.product-list-item .quickview-button .hint--right:before{
border-right-color: rgb(241, 196, 15);
}
.product-list-item .quickview-button .hint--left:before{
border-left-color: rgb(241, 196, 15);
}
/* Product Page */
#product-gallery.image-additional-grid a{
width: 33.333333333333%;
}
.product-info .left .image-additional{
margin-right: -15px;
}
#button-cart .button-cart-text:after{
display:none;
}
.compare-info td{
border-right-style:dashed;
}
table.list{
border-bottom-style:dashed;
border-left-style:dashed;
}
table.list td{
border-right-style:dashed;
border-top-style:dashed;
}
/* Product Labels*/
.label-latest + .label-sale{
top: 40px;
}
#more-details.hint--top:before{
border-top-color: rgb(241, 196, 15);
}
.boxed-header header{
max-width:1140px;
}
.boxed-header .super-menu > li:first-of-type{
border-left-width:0;
}
.boxed-header .super-menu > li:last-of-type{
border-right-width:0;
}
@media only screen and (max-width: 760px){
.journal-language .dropdown-toggle,
.journal-currency .dropdown-toggle{
color:;
}
.journal-header-center #language,
.journal-header-center #currency{
border-color:;
}
}
.sticky-menu .is-sticky .journal-header-default .header{
background-color: ;
}
html[dir="rtl"] .journal-carousel .htabs a:last-of-type{
border-left-color:rgb(255, 255, 255);
}
.boxed-header .journal-header-center .journal-links{
padding-left: 10px;
}
.boxed-header .journal-header-center .journal-search{
padding-left: 20px;
}
.boxed-header .journal-header-center .journal-secondary{
padding-right: 10px;
}
#cart{
box-shadow:none;
}
.journal-header-center .journal-center-bg{
top:40px;
}
#search input{
box-shadow:none;
}
.autocomplete2-suggestions{
box-shadow:none;
}
@media only screen and (max-width: 760px) {
ul.super-menu > li > a,
ul.super-menu > li:hover > a{
color:;
}
ul.super-menu > li,
ul.super-menu > li:hover{
background-color:rgb(135, 137, 117);
}
.boxed-header .journal-header-center .journal-search,
.boxed-header .journal-header-center .journal-links{
padding-left: 0;
}
.boxed-header .journal-header-center .journal-cart,
.boxed-header .journal-header-center .journal-secondary{
padding-right: 0;
}
.button-search{
background-color:;
}
.button-search i:before{
color: !important;
}
}
@media only screen and (max-width: 980px) {
.mobile-menu-on-tablet ul.super-menu > li > a,
.mobile-menu-on-tablet ul.super-menu > li:hover > a{
color:;
}
.mobile-menu-on-tablet ul.super-menu > li,
.mobile-menu-on-tablet ul.super-menu > li:hover{
background-color:rgb(135, 137, 117);
}
}
@media only screen and (min-width:760px) and (max-width:1155px) {
.journal-header-center .journal-search{
padding-left: 15px;
}
.journal-header-center .journal-cart{
padding-right: 15px;
}
.journal-header-center .journal-cart{
width:calc(25% - 20px);
padding-right:0;
}
html[dir="rtl"] .journal-header-center .journal-search{
padding-right: 15px;
}
}
@media only screen and (max-width:760px) {
.journal-header-center .journal-search,
html[dir="rtl"] .journal-header-center .journal-search{
padding-left: 0;
padding-right: 0;
}
.journal-header-center .journal-cart,
html[dir="rtl"] .journal-header-center .journal-cart{
padding-right: 0;
padding-left: 0;
}
}
@media only screen and (min-width: 760px){
.boxed-header .journal-header-center .journal-cart{
padding-right:15px;
}
html[dir="rtl"] .boxed-header .journal-header-center .journal-cart{
padding-right:0;
padding-left:15px;
}
}
@media only screen and (min-width: 1140px) {
.sticky-menu:not(.boxed-header) .is-sticky .journal-header-compact #header .journal-menu .super-menu > li:first-of-type > a {
margin-left: 0;
}
.skin-16 .journal-header-mega .journal-search {
padding-right: 0;
}
}
@media only screen and (max-width: 1155px) {
.super-menu, .mega-menu, .html-menu{
border-radius:0;
}
.bottom-footer.fullwidth-bar .copyright{
padding-left: 15px;
}
.bottom-footer.fullwidth-bar .payments{
padding-right: 15px;
}
#top-modules > div:not(.gutter),
#bottom-modules > div:not(.gutter){
padding-left: 20px;
padding-right: 20px;
}
#top-modules .journal2_slider,
#bottom-modules .journal2_slider,
#top-modules .journal2_headline_rotator{
padding-left: 0 !important;
padding-right: 0 !important;
}
.no-secondary .journal-header-center #currency{
border-right-width:0;
}
.no-secondary .journal-header-center #language{
border-left-width:0;
}
html[dir="rtl"].no-secondary .journal-header-center #currency{
border-left-width:0;
border-right-width:1px;
}
html[dir="rtl"].no-secondary .journal-header-center #language{
border-right-width:0;
border-left-width:1px;
}
.journal-header-compact #header .journal-search {
padding-right:15px !important;
}
html[dir="rtl"] .journal-header-compact #header .journal-search {
padding-right:0 !important;
padding-left:15px !important;
}
.sticky-menu .is-sticky .journal-header-default .journal-menu .super-menu > li:first-of-type{
border-left-width:0;
}
.sticky-menu .is-sticky .journal-header-default .journal-menu .super-menu > li:last-of-type{
border-right-width:0;
}
.boxed-header body{
padding:0;
}
.fullwidth-footer .columns{
padding-left: 15px;
}
.copyright{
padding-left: 15px;
}
.journal-header-mega .journal-logo{
padding-left:15px;
}
html[dir="rtl"] .journal-header-mega .journal-logo{
padding-left:0;
padding-right:15px;
}
}
@media only screen and (max-width: 760px){
.journal-header-mega .journal-logo{
padding-left:0;
}
html[dir="rtl"] .journal-header-mega .journal-logo{
padding-left:0;
padding-right:0;
}
}
.boxed-header .journal-header-mega .journal-logo{
padding-left:15px;
}
html[dir="rtl"].boxed-header .journal-header-mega .journal-logo{
padding-left:0;
padding-right:15px;
}
@media only screen and (min-width : 760px) {
.side-blocks-active .journal-fullwidth-slider .tp-leftarrow,
.side-blocks-active .journal-fullwidth-slider .tp-leftarrow.default {
left: 60px !important;
}
.side-blocks-active .journal-fullwidth-slider .tp-rightarrow,
.side-blocks-active .journal-fullwidth-slider .tp-rightarrow.default {
right: 60px !important;
}
html[dir="rtl"].side-blocks-active .journal-fullwidth-slider .tp-leftarrow,
html[dir="rtl"].side-blocks-active .journal-fullwidth-slider .tp-leftarrow.default {
right: 60px !important;
left: auto !important;
}
html[dir="rtl"].side-blocks-active .journal-fullwidth-slider .tp-rightarrow,
html[dir="rtl"].side-blocks-active .journal-fullwidth-slider .tp-rightarrow.default {
left: 60px !important;
right: auto !important;
}
}
header .links a,
header .links .no-link{
border-bottom-color:#e4e4e4;
}
.boxed-header.default-header .journal-top-header{
clip: rect(0px,1140px,45px,0px);
}
.journal-header-default .links .no-link{
border-color:
}
.journal-header-center #cart .content:before,
.oc2 #cart .content .cart-wrapper:before{
color:rgb(255, 255, 255)
}
.journal-header-center .autocomplete2-suggestions:before{
color:rgb(255, 255, 255)
}
.journal-language .dropdown-menu:before,
.journal-currency .dropdown-menu:before{
color:rgb(255, 255, 255)
}
#header .top-menu .top-dropdown li:first-of-type {
border-top-left-radius: px;
border-top-right-radius: px;
}
#header .top-menu .top-dropdown li:last-of-type {
border-bottom-left-radius: px;
border-bottom-right-radius: px;
}
#header .top-menu .top-dropdown li:first-of-type::before{
color:
}
#search ::-webkit-input-placeholder {
color:rgb(104, 85, 81);
font-family: inherit;
}
#search :-moz-placeholder {
color:rgb(104, 85, 81);
font-family: inherit;
}
#search ::-moz-placeholder {
color:rgb(104, 85, 81);
font-family: inherit;
}
#search :-ms-input-placeholder {
color:rgb(104, 85, 81);
font-family: inherit;
}
.compare-info tbody td{
border-left-style:dashed;
}
@media only screen and (max-width: 760px){
#search ::-webkit-input-placeholder {
color:;
font-family: inherit;
}
#search :-moz-placeholder {
color:;
font-family: inherit;
}
#search ::-moz-placeholder {
color:;
font-family: inherit;
}
#search :-ms-input-placeholder {
color:;
font-family: inherit;
}
}
.button-search{
border-right-style:solid;
border-right-color:;
}
html[dir="rtl"] .button-search{
border-left-style:solid;
border-left-color:;
}
html[dir="rtl"].journal-desktop .menu-floated .float-left{
border-left-style: solid;
}
header .journal-login{
border-bottom-color:;
}
.super-menu > li:last-of-type{
border-right-color:;
border-right-style:solid;
}
@media only screen and (max-width: 760px) {
.default-header .journal-login{
background-color:
}
.journal-header-center #search input,
.journal-header-center .button-search{
border-radius:0;
}
.center-header #search input, .default-header #search input{
background-color:rgba(255, 255, 255, 0.6);
}
.center-header header #cart, .default-header header #cart{
background-color:rgb(135, 137, 117);
}
.journal-menu .mobile-menu > li{
border-color:;
border-style:solid;
}
}
.inline-button .product-details{
padding-bottom:0;
}
.mega-menu .product-grid-item .cart{
display:none !important;
}
.product-info .right .options.push-1 .option-image li.selected span img{
border-color:rgb(56, 56, 56);
}
.mega-menu-categories .mega-menu-item,
.mega-menu-brands .mega-menu-item,
.mega-menu-html .mega-menu-item,
#header .mega-menu .product-grid-item{
margin-bottom:15px;
}
html[dir="rtl"].journal-desktop .menu-floated .float-right:last-of-type{
border-right-style:solid;
}
html[dir="rtl"].journal-desktop .menu-floated .float-right:last-of-type{
border-color:;
}
.mega-menu > div{
margin-bottom:-15px !important;
margin-right:-15px;
}
html[dir="rtl"] .mega-menu-item > div,
html[dir="rtl"] #header .mega-menu .product-wrapper{
margin-right:0;
margin-left:15px;
}
.mega-menu .mega-menu-column:last-of-type > div{
margin-right:-15px;
}
html[dir="rtl"] .mega-menu .mega-menu-column.mega-menu-products > div{
margin-left:-15px;
}
.mega-menu-column > div > h3, .mega-menu .mega-menu-column .menu-cms-block{
margin-right:15px;
}
html[dir="rtl"] .mega-menu-column > div > h3, html[dir="rtl"] .mega-menu .mega-menu-column .menu-cms-block{
margin-right:0;
margin-left:15px;
}
.mega-menu .mega-menu-column:last-of-type > h3,
.mega-menu .mega-menu-column:last-of-type > div > h3,
.mega-menu .mega-menu-column:last-of-type > .menu-cms-block,
.mega-menu .mega-menu-column.mega-menu-html-block > div{
margin-right:0;
}
@media only screen and (max-width: 760px) {
.super-menu{
border-width:0;
}
.mega-menu .mega-menu-column > div{
margin-right:-15px;
}
html[dir="rtl"] .mega-menu .mega-menu-column > div{
margin-left:-15px;
margin-right:0;
}
}
.journal-sf .sf-image .box-content ul{
margin-bottom:-7px;
margin-right:-7px;
}
.p-author, .p-posted{
display:none !important;
}
.p-date{
display:none !important;
}
.p-comment{
display:none !important;
}
.comment-date{
display:none !important;
}
.drop-down ul{
box-shadow:none !important;
}
.product-grid-item .price + hr,
.product-grid-item .price + .rating + hr{
display:block;
}
footer .contacts{
text-align:center;
}
footer .contacts-left,
html[dir="rtl"] footer .contacts-left{
float: none;
}
footer .contacts-right{
display: none;
}
.has-cta .rotator-tex{
line-height:px;
}
footer .contacts .hint--top:before{
border-top-color: rgb(43, 176, 227);
}
.side-column .box-category,
.side-column .box-content,
.side-column .box-content > div,
.side-column .box-content > ul > li:last-of-type,
.side-column .oc-module .product-grid-item:last-of-type{
border-bottom-left-radius: inherit;
border-bottom-right-radius: inherit;
border-radius:inherit;
}
.journal-sf ul li label:hover{
color:rgb(241, 196, 15);
}
.sf-icon:before{
border-top-color:rgb(241, 196, 15);
}
/*
.journal-sf ul li label:hover img{
border-color:rgb(68, 67, 73);
} */
.sf-price .value:after{
border-bottom-color:rgb(43, 176, 227);
}
.mobile-trigger{
background-color:;
}
.journal-header-default .links > a{
border-bottom-color: transparent;
}
@media only screen and (max-width: 760px) {
.super-menu{
background-color:;
}
.journal-header-default .links > a{
border-bottom-color: ;
}
}
.nav-numbers a:hover,
.nav-numbers li.active a{
-webkit-backface-visibility: hidden;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.headline-mode .nav-numbers a:hover,
.headline-mode .nav-numbers li.active a{
-webkit-backface-visibility: hidden;
-webkit-transform: scale();
-moz-transform: scale();
-ms-transform: scale();
transform: scale();
}
.tp-bullets.simplebullets.round .bullet.selected,
.tp-bullets.simplebullets.round .bullet:hover,
.journal-simple-slider .owl-controls .owl-page.active span,
.journal-simple-slider .owl-controls.clickable .owl-page:hover span{
transform: scale(1);
}
.swiper-pagination-bullet:hover, .swiper-pagination-bullet-active{
transform: scale(1);
}
@media only screen and (max-width: 980px) {
.journal-header-default .mega-menu{
width: 100%;
}
}
@media only screen and (max-width: 760px) {
.journal-header-center .journal-secondary{
background-color:rgb(226, 194, 25);
}
}
.mega-menu{
max-width:1140px;
}
@media only screen and (max-width: 760px){
.bottom-menu-bar #header .top-menu > li{
border-color:;
}
.bottom-menu-bar #header .journal-links{
background-color:;
}
.bottom-menu-bar .journal-header-center .journal-secondary {
border-top-width: 0;
}
.bottom-menu-bar #header .journal-links ul.top-menu > li{
border-color:;
}
.bottom-menu-bar #header div.journal-links, .bottom-menu-bar #header .journal-links a:hover{
background-color:;
}
.bottom-menu-bar #header .journal-links ul.top-menu > li > a,
.bottom-menu-bar #header .journal-links ul.top-menu > li > a:hover,
.bottom-menu-bar #header .journal-links ul.top-menu > li > .no-link{
color:;
}
}
.boxed-header .is-sticky .header {
max-width:1140px;
left: 50%;
transform: translateX(-50%);
}
.is-sticky .super-menu, .is-sticky .journal-menu-bg {
box-shadow: none;
}
.bottom-menu-bar #header .journal-links .top-menu .top-dropdown li:last-of-type::after{
color:;
}
@media only screen and (min-width : 760px) and (max-width: 980px) {
.mobile-menu-on-tablet .mobile-menu > li > ul,
.mobile-menu-on-tablet .mobile-menu > li > .mega-menu{
border-style:;
border-color:;
}
.mobile-menu-on-tablet ul.menu-centered{
height:auto;
}
}
@media only screen and (max-width: 760px){
.mobile-menu > li > ul,
.mobile-menu > li > .mega-menu{
border-style:;
border-color:;
}
}
@media only screen and (min-width: 760px) {
.journal-header-mega #search {
max-width: 100%;
left: 0px;
}
.journal-header-center .j-100{
height:110px;
}
.journal-header-center .journal-menu-bg{
top:150px;
}
.journal-header-center .top-bar > .j-min, .journal-header-center .top-menu > li > .m-item, .journal-header-center .journal-top-header{
height:40px;
}
.journal-header-center .journal-menu,
.journal-header-center .journal-menu-bg,
.journal-header-center .mobile-trigger,
ul.menu-centered{
height:50px;
}
.journal-header-center .mobile-trigger,
.journal-header-center .super-menu > li > a{
line-height:50px;
}
.journal-header-center .journal-language form .dropdown-menu,
.journal-header-center .journal-currency form .dropdown-menu{
top:40px;
}
.sticky-default.center-header .is-sticky .journal-header-center .j-100{
height:80px;
}
.sticky-default.center-header .is-sticky .journal-menu-bg{
top:80px;
}
.is-sticky .journal-header-center .journal-menu,
.is-sticky .journal-header-center .journal-menu-bg,
.is-sticky .journal-header-center .mobile-trigger{
height:40px;
}
.is-sticky .journal-header-center .mobile-trigger,
.is-sticky .journal-header-center .super-menu > li > a{
line-height:40px;
}
}
@media only screen and (max-width: 760px){
#header .journal-logo{
height:90px !important;
}
}
.center-header body.is-sticky .header-assets.top-bar{
background-color:rgb(226, 194, 25);
}
@media only screen and (min-width : 760px) and (max-width: 980px) {
.mobile-menu-on-tablet .journal-header-center .journal-menu{
height:auto;
}
.mobile-menu-on-tablet .journal-header-center .super-menu > li > a{
line-height:40px;
}
}
@media only screen and (max-width: 760px){
.mega-menu-categories .mega-menu-item ul,
.mega-menu-categories .mega-menu-item.menu-image-left ul{
width:100%;
}
.mega-menu-categories .mega-menu-item img {
display: none !important;
}
}
#tabs{
top:1px;
}
.product-grid-item.display-icon .wishlist-icon:before,
.product-grid-item.display-icon .compare-icon:before{
line-height:30px;
}
.journal-header-center #cart .heading i{
height:40px;
}
.journal-desktop .menu-floated .float-left{
border-right-style:solid;
}
.column.products > h3{
margin-bottom:8px;
}
.column.products{
padding-bottom:8px;
}
.side-column .journal-gallery .box-heading{
margin-bottom:10px;
}
.side-column .box-category > ul li ul li a{
padding-left: 7px;
}
.side-column .box-category > ul li ul li ul li a{
padding-left: 14px;
}
.side-column .box-category > ul li ul li ul li ul li a{
padding-left: 21px;
}
.side-column .box-category > ul li ul li ul li ul li ul li a{
padding-left: 28px;
}
.side-column .box-category > ul li ul li ul li ul li ul li ul li a{
padding-left: 35px;
}
@media only screen and (max-width: 1155px) {
.breadcrumb{
padding-left:10px;
}
.super-menu > li:first-of-type{
border-left-width:0;
}
.super-menu > li:last-of-type{
border-right-width:0;
}
html[dir="rtl"] .super-menu > li:first-of-type{
border-left-width:1px;
border-right-width:0;
}
html[dir="rtl"] .super-menu > li:last-of-type{
border-left-width:0;
}
html[dir="rtl"] .super-menu.menu-floated > li:first-of-type
border-right-width:0;
}
}
.super-menu.menu-floated{
border-right-width:1px;
border-left-width:1px;
border-color:;
border-style:solid;
}
.custom-sections .box-heading.box-sections{
border-left-style:dashed;
}
.journal-carousel:not(.journal-gallery) .box-content .swiper-container{
padding: px;
margin: -px;
}
.journal-carousel.arrows-top .swiper-button-prev,
.journal-carousel.arrows-top .swiper-button-next{
margin-top:px;
}
.side-column .journal-carousel.arrows-top .swiper-button-prev,
.side-column .journal-carousel.arrows-top .swiper-button-next,
.related-products.journal-carousel.arrows-top .swiper-button-prev,
.related-products.journal-carousel.arrows-top .swiper-button-next{
margin-top:0;
}
div#footer{
margin-top:20px;
}
.extended-container + .boxed-footer #footer{
margin-top:0px;
}
.side-column .journal-carousel .box-content .swiper-container{
padding:0;
margin:0;
}
html[dir="rtl"] .journal-carousel.arrows-top .swiper-button-next{
right:auto;
left:px;
}
html[dir="rtl"] .journal-carousel.arrows-top .swiper-button-prev{
right:auto;
left:px;
}
html[dir="rtl"] .journal-carousel:not(.arrows-top) .swiper-button-next{
right:auto;
left:px;
}
html[dir="rtl"] .journal-carousel:not(.arrows-top) .swiper-button-prev{
left:auto;
right:px;
}
html[dir="rtl"] footer .column-menu-wrap > ul li{
text-align:right;
}
html[dir="rtl"] footer .column>h3{
text-align:right;
}
.posts.blog-list-view .post-item-details{
width: 70%;
}
.side-column .box.cms-blocks .box-heading{
margin-bottom:10px;
}
@media only screen and (min-width: 1155px) {
.safari5 #footer,
.safari5.boxed-header header{
width: 1140px;
}
.tp-banner{
height:100% !important;
}
}
@media only screen and (max-width: 1155px) {
.tp-banner-container{
height:auto !important;
}
.side-column .oc-module .product-details {
max-width: 130px;
}
.checkout-page #content {
padding-left: 20px;
padding-right: 20px;
}
}
@media only screen and (max-width: 760px){
.product-grid-item .has-countdown + .product-details .rating{
top:-50px;
}
.product-grid-item .image.has-countdown .wishlist,
.product-grid-item .image.has-countdown .compare{
margin-bottom:42px;
}
}
.option li.hint--top:before{
border-top-color:;
}
@media only screen and (max-width: 470px) {
.phone-sticky-cart.menu-cart-off .journal-menu .mobile-trigger{
width:100%;
}
header .journal-menu .mobile-trigger {
width: 50%;
margin-top: -40px;
z-index: 3;
background-color:transparent;
}
.journal-cart{
z-index:2;
background-color:rgb(42, 43, 46)
}
}
.phone-sticky-cart.phone-sticky-menu:not(.menu-cart-off) .journal-menu{
z-index:1;
}
@media only screen and (max-width: 470px){
div.mobile-trigger, .mobile-menu-on-tablet div.mobile-trigger{
color:;
}
div.mobile-trigger:before, .mobile-menu-on-tablet div.mobile-trigger:before{
color:;
}
}
.journal-header-center #header .menu-dropdown::before{
border-bottom-color:
}
.header-notice > div{
max-width:1140px;
}
@media only screen and (max-width:1155px){
.header-notice > div{
padding-left:15px;
padding-right: 15px;
}
.header-notice.floated-icon > div{
padding-bottom:10px;
}
button.close-notice {
right: 8px;
}
html[dir="rtl"] button.close-notice {
right: auto;
left: 8px;
}
}
.post-item-details .comment-date{
margin:0 auto;
}
.blog-grid-view .post-button{
align-self:center;
}
footer{
box-shadow: none;
}
.journal-top-header{
box-shadow:none;
}
/* Content Margin */
@media only screen and (min-width: 760px){
#column-left + #content {
margin-left: 220px;
}
#column-right + #content {
margin-right: 220px;
}
#column-left + #column-right + #content{
margin-left: 220px;
margin-right: 220px;
}
}
/* Tablet Column Width + Content Margin */
@media only screen and (min-width:760px) and (max-width:980px) {
#column-left {
width: 220px;
}
#column-right{
width: 220px;
}
#column-left + #content {
margin-left: 220px;
}
#column-right + #content {
margin-right: 220px;
}
#column-left + #column-right + #content{
margin-left: 220px;
margin-right: 220px;
}
}
/* Extended Layout Margins */
@media only screen and (min-width:760px) and (max-width: 1155px) {
.skin-16 .journal-header-center .journal-search {
padding-left: 30px;
}
.extended-layout #column-left{
padding-left:20px;
}
.extended-layout #column-right{
padding-right:20px;
}
.extended-layout #content,
.extended-layout #column-left + #content,
.extended-layout #column-right + #content{
padding-left:20px;
padding-right:20px;
}
html[dir="rtl"].extended-layout #column-left{
padding-right:20px!important;
}
html[dir="rtl"].extended-layout #column-right{
padding-left:20px !important;
}
html[dir="rtl"].extended-layout #column-left + #content {
margin-right: 220px;
margin-left: 0;
}
html[dir="rtl"].extended-layout #column-right + #content {
margin-right: 0;
}
}
.mega-menu .mega-menu-column .menu-cms-block{
margin-bottom:15px;
}
.fly-drop-down ul li{
min-height:40px;
}
@media only screen and (max-width: 760px){
.product-grid-item .rating{
margin-left:px;
}
.product-grid-item .rating{
top:px;
}
}
/* RTL Columns */
html[dir="rtl"] .flyout-left .fly-mega-menu,
html[dir="rtl"] .flyout-left .fly-drop-down > ul {
left: auto;
right: 100%;
}
html[dir="rtl"] .flyout-right .fly-mega-menu,
html[dir="rtl"] .flyout-right .fly-drop-down > ul {
left: 100% !important;
right: auto;
}
html[dir="rtl"] .flyout-menu .flyout > ul > li > a i.menu-plus {
left: 5px;
right: auto;
transform: scale(-1);
}
html[dir="rtl"] #column-right .flyout-menu .flyout > ul > li > a i.menu-plus {
left: auto;
right: 8px;
transform: scale(1);
}
html[dir="rtl"] .flyout-menu .flyout > ul > li > a {
padding: 7px 12px 7px 25px;
}
html[dir="rtl"] #column-right .flyout-menu .flyout > ul > li > a {
padding: 7px 25px 7px 12px;
text-align:left;
}
html[dir="rtl"] #column-left {
float: right;
}
html[dir="rtl"] #column-right {
float: left;
}
@media only screen and (min-width: 760px){
html[dir="rtl"] #column-left {
padding: 20px 20px 20px 0;
}
html[dir="rtl"] #column-right {
padding: 20px 0 20px 20px;
}
html[dir="rtl"] #column-left + #content {
margin-right: 220px;
margin-left: 0;
}
html[dir="rtl"] #column-right + #content {
margin-left: 220px;
margin-right: 0;
}
html[dir="rtl"] #column-left + #column-right + #content{
margin-right: 220px;
margin-left: 220px;
}
}
@media only screen and (min-width : 760px) and (max-width: 980px) {
html[dir="rtl"] #column-left + #content {
margin-right: 220px;
margin-left:0;
}
html[dir="rtl"] #column-right + #content {
margin-left: 220px;
margin-right:0;
}
html[dir="rtl"] #column-left + #column-right + #content{
margin-right: 220px;
margin-left: 220px;
}
html[dir="rtl"].extended-layout #column-left + #content {
margin-right: 220px;
margin-left: 0;
}
}
@media only screen and (min-width: 1155px) {
html[dir="rtl"].extended-layout #column-left{
padding-right:0;
}
html[dir="rtl"].extended-layout #column-right{
padding-left:0;
}
html[dir="rtl"].extended-layout #column-right + #content {
padding-left: 20px;
padding-right: 0;
}
html[dir="rtl"].extended-layout #column-left + #content {
padding-right: 20px;
padding-left: 0;
}
}
.refine-images::before,
#refine-images::before,
.category-list::before{
content:"";
margin-right:px;
}
.refine-images::before,
#refine-images::before,
.category-list::before{
display:none;
}
.refine-image {
padding-right: 15px;
margin-bottom: 15px;
}
.refine-images {
margin-right: -15px;
margin-bottom: 0px;;
}
.product-grid-item {
margin-bottom: 20px;
}
.product-wrapper,
.ias-button,
.ias-loader,
.ias-noneleft{
margin-right: 20px;
}
.ias-button,
.ias-loader,
.ias-noneleft{
margin-top: 0px;
}
.product-grid, #content .box-product{
margin-right: -20px;
}
/* Mobile Product Spacing */
@media only screen and (max-width: 760px){
#cart .heading i::before{
color:;
}
#cart .heading i{
background-color:;
}
div#container,
.home-page div#container {
margin-top: 0;
margin-bottom: 0;
box-shadow:none;
}
.product-grid-item:not(.swiper-slide) {
margin-bottom: 20px;
}
.product-grid-item:not(.swiper-slide) .product-wrapper,
.ias-button,
.ias-loader,
.ias-noneleft{
margin-right: 20px;
}
.product-grid, #content .box-product{
margin-right: -20px;
}
}
.button:active{
box-shadow:;
}
#column-left .oc-module .product-details{
max-width:145px;
}
#column-right .oc-module .product-details{
max-width:145px;
}
/* Custom CSS */
/* ============================================
VISOLIVAE WEBSITE - DESIGN SYSTEM 2.0
Streamlined, cohesive stylesheet
Last updated: 2025
============================================ */
/* #region CSS VARIABLES - STREAMLINED DESIGN SYSTEM */
/* ============================================
CSS CUSTOM PROPERTIES - DESIGN SYSTEM 2.0
Simplified for maximum cohesion
Edit these to change the entire site theme
============================================ */
:root {
/* ===== COLOR PALETTE ===== */
/* Theme colors - modify these directly or use theme-switcher.js */
/* Primary/Accent Colors */
--color-primary: #f1c40f; /* True original bright gold */
--color-primary-hover: #dcb000; /* True original hover */
/* Dark Colors */
--color-dark: #1F1E1C; /* NEW: Near-black with warmth */
--color-dark-alt: #2D2B28; /* NEW: Warm dark */
/* Secondary/Accent Colors (olive green) */
--color-brown: #7A8B6A; /* NEW: Fresh sage green */
--color-brown-alt: #647556; /* NEW: Deeper olive */
/* Surface Colors - for backgrounds of menus, cards, etc. */
--color-surface: rgba(253, 252, 250, 0.9); /* NEW: Warm white with transparency */
--color-surface-solid: #FDFCFA; /* NEW: Almost white, hint of warmth */
/* Grey Scale */
--color-grey-100: #FAF9F7; /* NEW: Warm near-white */
--color-grey-200: #E8E6E3; /* NEW: Warm light grey */
--color-grey-300: #D1CFCC; /* NEW: Warm mid grey */
--color-grey-400: #6B6965; /* NEW: Warm dark grey */
--color-grey-muted: #8A8579; /* NEW: Warm taupe-grey */
/* Light & Transparency */
--color-light: #ffffff; /* Original: #ffffff - Pure white */
--color-surface: rgba(255, 255, 255, 0.9); /* Original: rgba(255, 255, 255, 0.9) - 90% opacity */
--color-white-80: rgba(255, 255, 255, 0.8); /* Original: rgba(255, 255, 255, 0.8) - 80% opacity */
--color-white-40: rgba(255, 255, 255, 0.4); /* Original: rgba(255, 255, 255, 0.4) - 40% opacity */
--color-white-30: rgba(255, 255, 255, 0.3); /* Original: rgba(255, 255, 255, 0.3) - 30% opacity */
/* Dark Overlays */
--color-black-10: rgba(0, 0, 0, 0.1); /* Original: rgba(0, 0, 0, 0.1) - Very light overlay */
--color-black-20: rgba(0, 0, 0, 0.2); /* Original: rgba(0, 0, 0, 0.2) - Light overlay */
--color-black-30: rgba(0, 0, 0, 0.3); /* Original: rgba(0, 0, 0, 0.29) - Glass overlay (consolidated) */
--color-black-60: rgba(0, 0, 0, 0.6); /* Original: rgba(0, 0, 0, 0.6) - Dark overlay */
/* Functional Colors */
--color-error: #ff4444; /* Original: #ff4444 - Error red */
--color-error-hover: #cc0000; /* Original: #cc0000 - Darker error red */
/* ===== SPACING SCALE - Simplified to 8px increments ===== */
--space-xs: 4px; /* Original: 2px, 4px, 5px - Extra small (consolidated) */
--space-sm: 8px; /* Original: 8px, 10px - Small (consolidated) */
--space-md: 16px; /* Original: 12px, 14px, 15px, 16px, 18px - Medium (consolidated) */
--space-lg: 24px; /* Original: 20px, 24px, 25px - Large (consolidated) */
--space-xl: 32px; /* Original: 30px, 32px - Extra large (consolidated) */
--space-2xl: 48px; /* Original: 40px, 48px - 2X large (consolidated) */
--space-3xl: 64px; /* Original: 60px - 3X large */
--space-huge: 80px; /* Original: 80px - Huge spacing */
/* Special spacing for specific use cases */
--space-gallery-top: 200px; /* Original: 200px - Gallery top margin */
--space-menu-clear: 250px; /* Original: 250px - Menu clearance */
/* ===== BORDER RADIUS - Refined for premium feel ===== */
--radius-sm: 4px; /* Subtle softness, professional */
--radius-md: 8px; /* Cards, inputs - refined not bubbly */
--radius-lg: 12px; /* Larger containers - soft but mature */
--radius-pill: 50px; /* Keep for buttons - pills are intentional */
/* ===== SHADOWS - Softer, more refined ===== */
/* Base Shadows - reduced intensity for cleaner look */
--shadow-xs: 0 1px 4px rgba(0, 0, 0, 0.06); /* Subtle lift */
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08); /* Light shadow */
--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1); /* Medium shadow */
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); /* Prominent shadow */
--shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.14); /* Major elevation */
/* Colored Shadows - Primary (uses CSS color-mix for theme compatibility) */
--shadow-primary-sm: 0 4px 16px color-mix(in srgb, var(--color-primary) 30%, transparent);
--shadow-primary-md: 0 8px 32px color-mix(in srgb, var(--color-primary) 40%, transparent);
--shadow-primary-lg: 0 12px 48px color-mix(in srgb, var(--color-primary) 50%, transparent);
/* Colored Shadows - Secondary */
--shadow-brown: 0 8px 24px color-mix(in srgb, var(--color-brown) 40%, transparent);
/* Special Shadows */
--shadow-dropdown: drop-shadow(0 0 8px rgba(0, 0, 0, 0.3));
--shadow-inset-light: 0 0 0 4px color-mix(in srgb, var(--color-primary) 10%, transparent);
/* ===== TRANSITIONS ===== */
--transition-fast: 0.15s ease; /* Original: 0.2s - Fast transitions */
--transition-normal: 0.3s ease; /* Original: 0.3s - Standard transitions */
--transition-slow: 0.5s ease; /* Original: 0.4s - Slow transitions */
--transition-smooth: 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* Original: 0.4s cubic-bezier - Smooth easing */
/* ===== TYPOGRAPHY ===== */
--font-primary: "Inter", sans-serif; /* NEW: Clean, modern body font */
--font-secondary: "Cormorant Garamond", serif; /* NEW: Elegant serif for headings */
/* Font Sizes - Simplified scale */
--text-xs: 11px; /* Original: 11px */
--text-sm: 12px; /* Original: 12px */
--text-base: 14px; /* Original: 13px, 14px - Base (consolidated) */
--text-md: 16px; /* Original: 15px, 16px - Medium (consolidated) */
--text-lg: 18px; /* Original: 18px - Large */
--text-xl: 21px; /* Original: 21px - Extra large */
--text-2xl: 24px; /* Original: 24px - 2X large */
--text-3xl: 32px; /* Original: 32px - 3X large */
/* Font Weights */
--weight-normal: 400; /* Original: 400 */
--weight-semibold: 600; /* Original: 600 */
--weight-bold: 700; /* Original: 700 */
/* Line Heights */
--leading-tight: 1.2; /* Original: 1.2 */
--leading-normal: 1.4; /* Original: 1.4 */
--leading-relaxed: 1.6; /* Original: 1.6 */
/* Letter Spacing */
--tracking-tight: 0.5px; /* Original: 0.5px */
--tracking-normal: 1px; /* Original: 1px */
--tracking-wide: 2px; /* Original: 2px */
/* ===== Z-INDEX SCALE ===== */
--z-base: 1; /* Original: 1 */
--z-overlay: 2; /* Original: 2 */
--z-dropdown: 10; /* Original: 10 */
--z-sticky: 100; /* Original: 100 */
--z-modal: 1000; /* Original: 1000 */
--z-tooltip: 9999; /* Original: 9999 */
/* ===== LAYOUT ===== */
--container-width: 1400px; /* Original: 1400px - Max container width */
--gap-grid: 10px; /* Original: 10px - Product grid gap */
--gap-gallery: 15px; /* Original: 15px - Gallery gap */
}
/* #endregion */
/* #region COMPONENT LIBRARY - COPY/PASTE SNIPPETS */
/* ============================================
REUSABLE COMPONENTS
Copy these classes to any page for instant styling
============================================ */
/* ========== BUTTONS ========== */
/* Primary Button (Yellow)
Usage: */
.btn-primary {
background: var(--color-primary) !important;
color: var(--color-dark) !important;
padding: var(--space-sm) var(--space-xl) !important;
border-radius: var(--radius-pill) !important;
font-weight: var(--weight-bold) !important;
font-size: var(--text-sm) !important;
text-transform: uppercase !important;
letter-spacing: var(--tracking-normal) !important;
border: none !important;
cursor: pointer !important;
transition: all var(--transition-normal) !important;
display: inline-block !important;
text-align: center !important;
}
.btn-primary:hover {
background: var(--color-primary-hover) !important;
transform: translateY(-2px) !important;
box-shadow: var(--shadow-primary-md) !important;
}
/* Secondary Button (Brown)
Usage: */
.btn-secondary {
background: var(--color-brown) !important;
color: var(--color-light) !important;
padding: var(--space-sm) var(--space-xl) !important;
border-radius: var(--radius-pill) !important;
font-weight: var(--weight-bold) !important;
font-size: var(--text-sm) !important;
text-transform: uppercase !important;
letter-spacing: var(--tracking-normal) !important;
border: none !important;
cursor: pointer !important;
transition: all var(--transition-normal) !important;
display: inline-block !important;
}
.btn-secondary:hover {
background: var(--color-brown-alt) !important;
transform: translateY(-2px) !important;
}
/* Circle Icon Button
Usage: */
.btn-circle {
width: 50px !important;
height: 50px !important;
border-radius: var(--radius-pill) !important;
background: var(--color-primary) !important;
color: var(--color-dark) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
border: none !important;
cursor: pointer !important;
transition: background var(--transition-normal) !important;
}
.btn-circle:hover {
background: var(--color-brown) !important;
color: var(--color-light) !important;
}
/* Large Hero Button
Usage: */
.btn-hero {
background: var(--color-light) !important;
color: var(--color-dark) !important;
border: 3px solid var(--color-light) !important;
padding: var(--space-md) var(--space-2xl) !important;
border-radius: var(--radius-pill) !important;
font-weight: var(--weight-bold) !important;
font-size: var(--text-md) !important;
text-transform: uppercase !important;
letter-spacing: var(--tracking-wide) !important;
cursor: pointer !important;
transition: all var(--transition-slow) !important;
box-shadow: var(--shadow-lg) !important;
}
.btn-hero:hover {
background: var(--color-primary) !important;
border-color: var(--color-primary) !important;
transform: translateY(-2px) scale(1.02) !important;
box-shadow: var(--shadow-primary-lg) !important;
}
/* ========== CARDS ========== */
/* Glass Card
Usage: Your content
*/
.card-glass {
background: var(--color-surface) !important;
backdrop-filter: blur(10px) !important;
border-radius: var(--radius-lg) !important;
padding: var(--space-xl) !important;
box-shadow: var(--shadow-sm) !important;
}
/* Product Card
Usage: */
.card-product {
background: var(--color-light) !important;
border-radius: var(--radius-lg) !important;
overflow: hidden !important;
box-shadow: var(--shadow-md) !important;
transition: all var(--transition-smooth) !important;
}
.card-product:hover {
transform: translateY(-4px) !important;
box-shadow: var(--shadow-lg) !important;
}
.card-product img {
width: 100% !important;
height: auto !important;
display: block !important;
}
.card-product-body {
padding: var(--space-md) !important;
}
/* Feature Box
Usage:
Feature Title
Feature description
*/
.card-feature {
background: var(--color-light) !important;
padding: var(--space-xl) var(--space-lg) !important;
border-radius: var(--radius-lg) !important;
text-align: center !important;
box-shadow: var(--shadow-xs) !important;
transition: all var(--transition-slow) !important;
}
.card-feature:hover {
transform: translateY(-3px) !important;
box-shadow: var(--shadow-md) !important;
}
.card-feature-icon {
width: 70px !important;
height: 70px !important;
margin: 0 auto var(--space-sm) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: linear-gradient(135deg, var(--color-brown) 0%, var(--color-brown-alt) 100%) !important;
border-radius: var(--radius-md) !important;
font-size: var(--text-3xl) !important;
color: var(--color-light) !important;
box-shadow: var(--shadow-brown) !important;
}
.card-feature h3 {
margin: 0 0 var(--space-xs) 0 !important;
font-size: var(--text-md) !important;
font-weight: var(--weight-bold) !important;
color: var(--color-dark) !important;
}
.card-feature p {
margin: 0 !important;
font-size: var(--text-base) !important;
line-height: var(--leading-relaxed) !important;
color: var(--color-grey-400) !important;
}
/* ========== CONTAINERS ========== */
/* Frosted Glass Container
Usage: Your content
*/
.container-glass {
background: var(--color-black-30) !important;
border-radius: var(--radius-md) !important;
padding: var(--space-2xl) var(--space-3xl) !important;
max-width: var(--container-width) !important;
margin: 0 auto !important;
}
/* Light Container
Usage: Your content
*/
.container-light {
background: var(--color-surface) !important;
backdrop-filter: blur(10px) !important;
border-radius: var(--radius-lg) !important;
padding: var(--space-2xl) var(--space-md) !important;
box-shadow: var(--shadow-xs) !important;
}
/* ========== EXPANDABLE ELEMENTS ========== */
/* Expandable Button (Search/Cart Pattern)
Usage: */
.expand-btn {
position: relative !important;
width: 50px !important;
height: 50px !important;
background: var(--color-light) !important;
border-radius: var(--radius-pill) !important;
overflow: hidden !important;
transition: all var(--transition-smooth) !important;
display: flex !important;
align-items: center !important;
cursor: pointer !important;
}
.expand-btn:hover {
width: 240px !important;
}
.expand-icon {
position: absolute !important;
right: 5px !important;
width: 40px !important;
height: 40px !important;
background: var(--color-primary) !important;
color: var(--color-dark) !important;
border-radius: var(--radius-pill) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: var(--text-lg) !important;
}
.expand-text {
opacity: 0 !important;
white-space: nowrap !important;
padding-left: var(--space-md) !important;
padding-right: 50px !important;
color: var(--color-dark) !important;
font-weight: var(--weight-semibold) !important;
font-size: var(--text-md) !important;
transition: opacity var(--transition-normal) !important;
}
.expand-btn:hover .expand-text {
opacity: 1 !important;
}
/* ========== UTILITY CLASSES ========== */
/* Hover Effects */
.hover-lift {
transition: transform var(--transition-normal) !important;
}
.hover-lift:hover {
transform: translateY(-3px) !important;
}
.hover-scale {
transition: transform var(--transition-normal) !important;
}
.hover-scale:hover {
transform: scale(1.02) !important;
}
.hover-glow {
transition: box-shadow var(--transition-normal) !important;
}
.hover-glow:hover {
box-shadow: var(--shadow-primary-md) !important;
}
/* Text Utilities */
.text-primary {
color: var(--color-primary) !important;
}
.text-dark {
color: var(--color-dark) !important;
}
.text-light {
color: var(--color-light) !important;
}
.text-muted {
color: var(--color-grey-400) !important;
}
/* Background Utilities */
.bg-glass-light {
background: var(--color-white-80) !important;
backdrop-filter: blur(10px) !important;
}
.bg-glass-dark {
background: var(--color-black-30) !important;
backdrop-filter: blur(10px) !important;
}
/* Shadow Utilities */
.shadow-sm {
box-shadow: var(--shadow-sm) !important;
}
.shadow-md {
box-shadow: var(--shadow-md) !important;
}
.shadow-lg {
box-shadow: var(--shadow-lg) !important;
}
/* Radius Utilities */
.rounded-sm {
border-radius: var(--radius-sm) !important;
}
.rounded-md {
border-radius: var(--radius-md) !important;
}
.rounded-lg {
border-radius: var(--radius-lg) !important;
}
.rounded-pill {
border-radius: var(--radius-pill) !important;
}
/* #endregion */
/* ============================================
DESKTOP ONLY STYLES (min-width: 576px)
============================================ */
@media (min-width: 576px) {
/* #region GLOBAL STYLES */
/* ============================================
GLOBAL STYLES
============================================ */
body {
line-height: var(--leading-relaxed);
font-family: var(--font-primary) !important;
}
/* #endregion */
/* #region TYPOGRAPHY & HEADINGS */
/* ============================================
TYPOGRAPHY & HEADINGS
============================================ */
/* Force font overrides on inline-styled elements */
/* These override hardcoded theme fonts */
/* Revolution Slider / Hero captions */
.tp-caption,
.tp-caption.tp-text,
[id^="jcaption-"],
.rev_slider .tp-caption {
font-family: var(--font-secondary) !important;
font-weight: 500 !important;
}
/* All headings - use elegant serif */
h1, h2, h3, h4, h5, h6,
.heading-title,
.box-heading,
.secondary-title,
legend {
font-family: var(--font-secondary) !important;
font-weight: 500 !important;
letter-spacing: 0.5px !important;
}
/* Body text - use clean sans */
p, span, a, li, td, th,
.product-name,
.product-description,
.product-details,
.product-details *,
.caption,
.caption *,
.description,
.price,
.price-tax,
.button-group,
.button-group *,
label,
input,
textarea,
select,
button {
font-family: var(--font-primary) !important;
}
/* Product card headings - use serif */
.product-details h4,
.product-details .name,
.caption h4,
.caption .name {
font-family: var(--font-secondary) !important;
font-weight: 500 !important;
letter-spacing: 0.5px !important;
}
/* Navigation - keep clean sans */
nav, nav a,
.super-menu,
.super-menu a,
.mega-menu,
.mega-menu a,
.drop-down a,
header a {
font-family: var(--font-primary) !important;
}
.editor-content h3 {
line-height: 24px;
}
.heading-title {
padding-bottom: var(--space-md);
padding-top: var(--space-lg);
}
.product-page .heading-title {
padding-bottom: var(--space-md);
padding-top: var(--space-lg);
}
.blog-post .heading-title {
margin-bottom: var(--space-md);
}
#content .related-products .box-heading {
margin-bottom: var(--space-lg);
color: var(--color-light);
background-color: var(--color-primary);
font-weight: var(--weight-bold);
font-family: var(--font-secondary);
font-style: normal;
font-size: var(--text-md);
text-transform: uppercase;
display: block;
text-align: center;
padding: 0 var(--space-xs);
transition: all var(--transition-fast);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Category Section Tabs - override inline styles */
.box-heading.box-sections,
.box-heading.box-block {
background: var(--color-dark-alt) !important;
background-color: var(--color-dark-alt) !important;
border-radius: var(--radius-md) !important;
padding: var(--space-xs) !important;
margin-bottom: var(--space-lg) !important;
overflow: hidden !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.box-heading.box-sections ul,
.box-heading.box-block ul {
display: flex !important;
flex-wrap: wrap !important;
gap: var(--space-xs) !important;
justify-content: center !important;
align-items: center !important;
margin: 0 0 -4px 0 !important;
padding: 0 !important;
list-style: none !important;
line-height: 1 !important;
}
.box-heading.box-sections ul li,
.box-heading.box-block ul li {
margin: 0 !important;
padding: 0 !important;
}
.box-heading.box-sections ul li a,
.box-heading.box-block ul li a {
display: inline-block !important;
background: transparent !important;
background-color: transparent !important;
color: var(--color-light) !important;
padding: var(--space-xs) var(--space-lg) !important;
border-radius: var(--radius-pill) !important;
font-weight: var(--weight-semibold) !important;
font-size: var(--text-sm) !important;
text-transform: uppercase !important;
letter-spacing: var(--tracking-normal) !important;
transition: all var(--transition-normal) !important;
border: none !important;
}
.box-heading.box-sections ul li a:hover,
.box-heading.box-block ul li a:hover,
.box-heading.box-sections ul li a.selected,
.box-heading.box-block ul li a.selected {
background: var(--color-primary) !important;
background-color: var(--color-primary) !important;
color: var(--color-dark) !important;
}
#content legend {
background: transparent;
text-align: left;
font-weight: var(--weight-bold);
font-family: var(--font-secondary);
font-style: normal;
font-size: var(--text-xl);
line-height: 24px;
text-transform: none;
color: var(--color-grey-muted);
border-left: 3px solid var(--color-grey-muted);
border-top: none;
border-bottom: none;
border-right: none;
padding: var(--space-xs) var(--space-md);
margin-bottom: var(--space-sm);
}
.well .secondary-title {
color: var(--color-grey-muted);
border-width: 0;
border-style: solid;
border-bottom: 1px solid var(--color-grey-300);
border-color: var(--color-grey-300);
background: transparent;
padding-top: 0;
padding-bottom: var(--space-xs);
padding-left: 0;
padding-right: 0;
margin-bottom: var(--space-md);
}
/* #endregion */
/* #region ICONS & LINKS */
/* ============================================
ICONS & LINKS
============================================ */
a[data-icon]::before,
a[data-icon]::after,
.m-item::before,
.m-item::after {
color: var(--color-light) !important;
opacity: 1 !important;
font-family: 'journal-icons' !important;
display: inline-block !important;
}
footer a,
footer a[data-icon],
header a,
header a[data-icon] {
color: var(--color-light) !important;
}
footer a {
color: var(--color-white-80) !important;
transition: all var(--transition-normal) !important;
}
footer a:hover {
color: var(--color-primary) !important;
transform: translateX(4px) !important;
}
a.btn.btn-info {
color: var(--color-brown-alt);
}
/* #endregion */
/* #region BUTTONS */
/* ============================================
BUTTONS
============================================ */
/* Standard Buttons */
button,
.btn,
a.btn,
input[type="submit"] {
background: linear-gradient(135deg, var(--color-dark) 0%, var(--color-dark-alt) 100%) !important;
color: var(--color-light) !important;
border: none !important;
padding: var(--space-sm) var(--space-xl) !important;
border-radius: var(--radius-pill) !important;
font-weight: var(--weight-bold) !important;
text-transform: uppercase !important;
letter-spacing: var(--tracking-normal) !important;
font-size: var(--text-sm) !important;
box-shadow: var(--shadow-sm) !important;
transition: all var(--transition-normal) !important;
}
button:hover,
.btn:hover {
background: var(--color-primary) !important;
transform: translateY(-3px) !important;
box-shadow: var(--shadow-primary-md) !important;
}
/* Checkout Buttons */
a.button {
border-radius: var(--radius-sm) !important;
}
p.text-right.checkout a.button,
.checkout a.button {
border-radius: var(--radius-sm) !important;
}
.buttons.clearfix {
background-color: color-mix(in srgb, var(--color-brown) 25%, transparent);
border-radius: 0;
border-width: 1px;
border-style: solid;
border-color: var(--color-grey-300);
}
.contact-page .buttons {
margin-top: var(--space-md);
background-color: color-mix(in srgb, var(--color-brown) 35%, transparent);
border-radius: 0;
border-width: 1px;
border-style: solid;
border-color: var(--color-grey-300);
}
.form-horizontal .buttons {
margin-top: var(--space-md);
background-color: color-mix(in srgb, var(--color-brown) 25%, transparent);
border-radius: 0;
border-width: 1px;
border-style: solid;
border-color: var(--color-grey-300);
}
/* Hero Section "More" Button */
.more-button {
background: var(--color-light) !important;
color: var(--color-dark) !important;
border: 3px solid var(--color-light) !important;
border-radius: var(--radius-pill) !important;
padding: var(--space-md) var(--space-2xl) !important;
font-weight: var(--weight-bold) !important;
font-size: var(--text-md) !important;
text-transform: uppercase !important;
letter-spacing: var(--tracking-wide) !important;
box-shadow: var(--shadow-lg) !important;
transition: all var(--transition-slow) !important;
}
.more-button:hover {
background: var(--color-primary) !important;
border-color: var(--color-primary) !important;
transform: translateY(-2px) scale(1.02) !important;
box-shadow: var(--shadow-primary-lg) !important;
}
/* Remove/Delete Buttons */
.remove,
button.remove,
a.remove,
.cart-remove,
td.remove button,
td.remove a,
.mini-cart-info td button,
table td.text-center button {
background: none !important;
background-color: transparent !important;
border: none !important;
border-radius: 0 !important;
width: auto !important;
height: auto !important;
padding: var(--space-xs) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
color: var(--color-error) !important;
font-size: var(--text-2xl) !important;
font-weight: var(--weight-bold) !important;
transition: all var(--transition-normal) !important;
box-shadow: none !important;
min-width: 0 !important;
}
.remove:hover,
button.remove:hover,
a.remove:hover,
td.remove button:hover,
td.remove a:hover,
.mini-cart-info td button:hover,
table td.text-center button:hover {
background: none !important;
background-color: transparent !important;
color: var(--color-error-hover) !important;
transform: scale(1.2) !important;
box-shadow: none !important;
}
/* #endregion */
/* #region FORM ELEMENTS */
/* ============================================
FORM ELEMENTS
============================================ */
/* Text Inputs */
input[type='text']:not(.search-input),
input[type='email'],
input[type='password'],
input[type='tel'],
textarea {
-webkit-appearance: none;
background: var(--color-light) !important;
border: 2px solid var(--color-grey-200) !important;
border-radius: var(--radius-md) !important;
padding: var(--space-sm) var(--space-lg) !important;
width: 100%;
transition: all var(--transition-normal) !important;
font-size: var(--text-base) !important;
min-height: 35px;
box-shadow: none;
}
input:focus,
textarea:focus {
border-color: var(--color-primary) !important;
box-shadow: var(--shadow-inset-light) !important;
}
/* Select Dropdowns */
select {
background: var(--color-grey-100);
border: 1px solid var(--color-grey-200);
padding: var(--space-xs);
margin: var(--space-xs);
max-width: 100%;
font-size: var(--text-xs);
font-family: var(--font-primary);
}
option {
font-size: var(--text-xs);
font-family: var(--font-primary);
font-weight: var(--weight-normal);
display: block;
white-space: pre;
min-height: 1.2em;
padding: 0 var(--space-xs) 1px var(--space-xs);
}
/* Form Layout */
.oc2 .form-horizontal .form-group label {
width: 100%;
float: left;
}
/* #endregion */
/* #region HEADER & NAVIGATION */
/* ============================================
HEADER & NAVIGATION
============================================ */
/* Menu Background */
.journal-menu {
position: relative !important;
}
.journal-menu-bg {
background: var(--color-dark-alt) !important;
background-color: var(--color-dark-alt) !important;
border-radius: var(--radius-md) !important;
border-bottom: 3px solid var(--color-primary) !important;
position: absolute !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
z-index: 0 !important;
}
.journal-header-center .journal-menu-bg {
top: 40px !important;
}
.journal-menu > .super-menu,
.journal-menu .mega-menu {
position: relative !important;
z-index: 1 !important;
}
/* ============================================
COMPACT HEADER (JS-enabled)
============================================ */
/* Hide elements that will be moved by JS to prevent flash */
.journal-center-bg,
div#header > .header-assets:not(.top-bar) {
display: none !important;
}
/* Menu background now inside nav menu - make it absolute fill full width */
.compact-header .journal-menu > .journal-menu-bg {
position: absolute !important;
top: 0 !important;
left: -100vw !important;
right: -100vw !important;
bottom: 0 !important;
z-index: 0 !important;
width: auto !important;
border-radius: 0 !important;
}
/* Nav menu becomes flex container for search + menu items + cart */
.compact-header .journal-menu {
position: relative !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
padding: var(--space-sm) var(--space-md) !important;
}
/* Search on the left */
.compact-header .journal-menu > .journal-search {
order: 1 !important;
flex: 0 0 60px !important;
margin: 0 !important;
z-index: 1 !important;
overflow: visible !important;
min-width: 0 !important;
max-width: 60px !important;
}
/* Menu items in the center */
.compact-header .journal-menu > ul.super-menu {
order: 2 !important;
flex: 1 !important;
justify-content: center !important;
display: flex !important;
align-items: center !important;
z-index: 1 !important;
}
/* Cart on the right */
.compact-header .journal-menu > .journal-cart {
order: 3 !important;
flex: 0 0 60px !important;
margin: 0 !important;
z-index: 1 !important;
max-width: 60px !important;
overflow: visible !important;
position: relative !important;
}
.compact-header .journal-menu > .journal-cart #cart {
position: absolute !important;
right: 0 !important;
top: 50% !important;
transform: translateY(-50%) !important;
}
/* Smaller search and cart buttons in compact header - scale down uniformly */
.compact-header .journal-search {
transform: scale(0.76) !important;
transform-origin: left center !important;
}
.compact-header .journal-cart {
transform: scale(0.76) !important;
transform-origin: right center !important;
}
.compact-header .journal-cart button.btn.btn-inverse.btn-block.btn-lg.dropdown-toggle.heading {
position: absolute !important;
right: 0 !important;
margin-left: 0 !important;
}
/* Reduce header/navigation bar height */
#main-menu-item-1,
#main-menu-item-2,
#main-menu-item-3,
ul.super-menu > li,
.desktop-menu-wrapper,
.desktop-main-menu-wrapper,
header nav,
header {
height: auto !important;
min-height: auto !important;
line-height: normal !important;
}
/* Prevent header from shrinking on scroll */
header.phone-sticky-menu,
header.phone-sticky-cart {
height: auto !important;
min-height: 80px !important;
}
header.phone-sticky-menu #main-menu-item-1,
header.phone-sticky-menu #main-menu-item-2,
header.phone-sticky-menu #main-menu-item-3,
header.phone-sticky-menu ul.super-menu > li,
header.phone-sticky-menu .desktop-menu-wrapper,
header.phone-sticky-menu .desktop-main-menu-wrapper,
header.phone-sticky-menu nav {
height: auto !important;
min-height: 80px !important;
}
/* Main Navigation Buttons */
ul.super-menu > li > a,
li[id^="main-menu-item-"] > a,
.desktop-menu-wrapper .menu-item a,
.desktop-main-menu-wrapper .menu-item a {
background: none !important;
color: var(--color-light) !important;
padding: var(--space-sm) var(--space-md) !important;
margin: 0 var(--space-xs) !important;
border-radius: var(--radius-sm) !important;
font-weight: var(--weight-semibold) !important;
text-transform: uppercase !important;
letter-spacing: var(--tracking-normal) !important;
font-size: var(--text-sm) !important;
transition: all var(--transition-normal) !important;
border: none !important;
border-bottom: 3px solid transparent !important;
display: inline-block !important;
line-height: var(--leading-tight) !important;
}
/* Navigation Hover State */
ul.super-menu > li > a:hover,
li[id^="main-menu-item-"] > a:hover,
.desktop-menu-wrapper .menu-item a:hover,
.desktop-main-menu-wrapper .menu-item a:hover {
color: var(--color-primary) !important;
border-bottom-color: var(--color-primary) !important;
}
/* Active/Current Menu Item */
ul.super-menu > li.active > a,
li[id^="main-menu-item-"].active > a,
.desktop-menu-wrapper .menu-item.active a,
.desktop-main-menu-wrapper .menu-item.active a {
border-bottom-color: var(--color-primary) !important;
color: var(--color-primary) !important;
}
/* Dropdown Menu Links - Clean reset */
.drop-down ul li,
.mega-menu li,
.mega-menu ul li {
background: none !important;
border: none !important;
margin: 0 !important;
padding: 0 !important;
}
.drop-down ul li a,
.mega-menu a,
.mega-menu ul li a {
background: transparent !important;
color: var(--color-dark) !important;
padding: 6px var(--space-sm) !important;
margin: 0 !important;
border: none !important;
border-radius: 0 !important;
display: block !important;
text-transform: none !important;
font-size: var(--text-sm) !important;
font-weight: var(--weight-normal) !important;
letter-spacing: normal !important;
line-height: var(--leading-normal) !important;
transition: color var(--transition-fast) !important;
}
.drop-down ul li a:hover,
.mega-menu a:hover,
.mega-menu ul li a:hover {
background: transparent !important;
color: var(--color-primary-hover) !important;
}
/* Mega Menu Headers - override inline styles */
.mega-menu h3,
.mega-menu-item h3 {
color: var(--color-brown) !important;
font-weight: var(--weight-bold) !important;
font-size: var(--text-sm) !important;
text-transform: uppercase !important;
background: transparent !important;
background-color: transparent !important;
padding: var(--space-xs) var(--space-sm) var(--space-xs) 0 !important;
border: none !important;
border-bottom: 2px solid var(--color-primary) !important;
margin-bottom: var(--space-xs) !important;
}
.mega-menu h3 a,
.mega-menu-item h3 a {
color: var(--color-brown) !important;
font-weight: var(--weight-bold) !important;
font-size: var(--text-sm) !important;
text-transform: uppercase !important;
background: transparent !important;
background-color: transparent !important;
padding: 0 !important;
border: none !important;
border-bottom: none !important;
margin: 0 !important;
}
/* Icon-Only Menu Items - Center the icon within hover background */
li#main-menu-item-1.icon-only > a,
li#main-menu-item-6.icon-only > a {
padding-left: var(--space-sm) !important;
padding-right: var(--space-sm) !important;
text-align: center !important;
}
li#main-menu-item-1.icon-only > a i,
li#main-menu-item-6.icon-only > a i {
margin-right: 0 !important;
}
/* #endregion */
/* #region DROPDOWN MENUS */
/* ============================================
DROPDOWN MENUS
============================================ */
/* Mega Menu - Positioned below nav bar */
.mega-menu {
background: var(--color-surface-solid) !important;
background-color: var(--color-surface-solid) !important;
padding: var(--space-lg) var(--space-xs) var(--space-lg) var(--space-lg) !important;
border-radius: var(--radius-lg) !important;
overflow: hidden !important;
min-width: 900px !important;
left: 50% !important;
transform: translateX(-50%) !important;
box-shadow: var(--shadow-lg) !important;
top: 100% !important;
margin-top: 16px !important;
}
/* Compact header: mega menu opens below the nav bar */
.compact-header .mega-menu {
position: absolute !important;
top: 100% !important;
margin-top: 16px !important;
}
/* Side dropdowns also below the bar */
.compact-header .drop-down > ul,
.compact-header li[id^="main-menu-item-"].drop-down > ul {
top: 100% !important;
margin-top: 16px !important;
}
/* Side Dropdown Menus Background */
.drop-down > ul,
li[id^="main-menu-item-"].drop-down > ul,
li[id^="main-menu-item-"] > ul,
.super-menu > li > ul,
.super-menu li.drop-down > ul {
background: var(--color-surface) !important;
background-color: var(--color-surface) !important;
backdrop-filter: blur(10px) !important;
border-radius: var(--radius-lg) !important;
box-shadow: var(--shadow-lg) !important;
overflow: hidden !important;
}
.mega-menu div > h3 {
margin-bottom: 1px !important;
margin-top: 0 !important;
padding-top: 0 !important;
}
/* Remove extra spacing from mega menu children */
.mega-menu > div,
.mega-menu .mega-menu-content,
.mega-menu .mega-menu-column,
.mega-menu ul,
.mega-menu li {
margin: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* Side Dropdown Menus */
li#main-menu-item-2.drop-down.main-menu-item-2 ul,
li#main-menu-item-5.drop-down.main-menu-item-5 ul {
margin-top: var(--space-md) !important;
border-radius: var(--radius-md) !important;
overflow: hidden !important;
}
/* Hover Bridge for Dropdowns */
li#main-menu-item-2,
li#main-menu-item-3,
li#main-menu-item-5 {
position: relative;
}
li#main-menu-item-2::after,
li#main-menu-item-3::after,
li#main-menu-item-5::after {
content: '';
position: absolute;
bottom: -15px;
left: 0;
right: 0;
height: var(--space-md);
}
/* Menu Spacing */
.desktop-main-menu-wrapper,
.desktop-menu-wrapper,
header nav {
margin-bottom: 100px !important;
}
/* #endregion */
/* #region SEARCH BAR */
/* ============================================
SEARCH BAR
============================================ */
/* Search Container */
div.journal-search.j-min.xs-100.sm-80.md-25.lg-25.xl-25 {
display: flex !important;
justify-content: flex-start !important;
}
/* Search Form - Collapsed Circle, Expands Right */
div#search.input-group.j-min {
position: relative !important;
width: 50px !important;
height: 50px !important;
transition: all var(--transition-smooth) !important;
background: var(--color-light) !important;
background-color: var(--color-light) !important;
border-radius: var(--radius-pill) !important;
overflow: hidden !important;
display: flex !important;
align-items: center !important;
border: none !important;
}
div#search.input-group.j-min:hover {
width: 240px !important;
}
/* Search Input - Hidden by Default */
div#search input.form-control.input-lg[name="search"] {
background: transparent !important;
border: none !important;
border-radius: 0 !important;
padding: 0 50px 0 55px !important;
box-shadow: none !important;
opacity: 0 !important;
white-space: nowrap !important;
color: var(--color-dark) !important;
font-weight: var(--weight-semibold) !important;
font-size: var(--text-md) !important;
transition: opacity var(--transition-normal) !important;
width: 100% !important;
height: 50px !important;
min-height: 50px !important;
}
div#search.input-group.j-min:hover input[name="search"] {
opacity: 1 !important;
}
/* Placeholder Visibility */
div#search input[name="search"]::placeholder {
opacity: 0 !important;
transition: opacity var(--transition-normal) !important;
}
div#search.input-group.j-min:hover input[name="search"]::placeholder {
opacity: 0.6 !important;
}
/* Search Button Container */
div#search div.button-search {
position: absolute !important;
left: 5px !important;
top: 50% !important;
transform: translateY(-50%) !important;
z-index: var(--z-dropdown) !important;
width: 40px !important;
height: 40px !important;
background: transparent !important;
border: none !important;
padding: 0 !important;
}
/* Search Button - Yellow Circle */
div#search div.button-search button {
background: var(--color-primary) !important;
background-color: var(--color-primary) !important;
color: var(--color-dark) !important;
border: none !important;
border-radius: var(--radius-pill) !important;
width: 40px !important;
height: 40px !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: var(--text-lg) !important;
box-shadow: none !important;
cursor: pointer !important;
transition: background var(--transition-normal) !important;
}
div#search div.button-search button:hover {
background: var(--color-brown) !important;
background-color: var(--color-brown) !important;
color: var(--color-light) !important;
}
div#search div.button-search button i {
margin: 0 !important;
font-size: var(--text-lg) !important;
}
/* Hide Autocomplete */
div.autocomplete2-suggestions {
display: none !important;
}
/* #endregion */
/* #region SHOPPING CART */
/* ============================================
SHOPPING CART
============================================ */
/* Cart Container */
.journal-cart.j-min {
display: flex !important;
justify-content: flex-end !important;
}
div.journal-cart,
.cart-container {
background: transparent !important;
border: none !important;
pointer-events: none !important;
}
/* #cart is the hover parent */
div#cart {
background: transparent !important;
border: none !important;
position: relative;
}
/* Hover Bridge - BIGGER */
div#cart::after {
content: '';
position: absolute;
top: 80%;
left: -20px;
right: -20px;
height: 70px;
pointer-events: auto;
}
/* Force dropdown visible when hovering #cart - override Bootstrap */
#cart:hover .dropdown-menu,
#cart:hover div.content,
#cart:hover ul.cart-wrapper {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
}
/* Cart dropdown - positioned below with delay and animation */
#cart .dropdown-menu,
#cart div.content {
margin-top: var(--space-xl) !important;
top: 100% !important;
opacity: 0 !important;
transform: translateY(-10px) !important;
transition: opacity var(--transition-normal), transform var(--transition-normal) !important;
transition-delay: 0.15s !important;
}
#cart:hover .dropdown-menu,
#cart:hover div.content {
opacity: 1 !important;
transform: translateY(0) !important;
}
/* Cart Button - Collapsed, Expands Left on Hover */
button.btn.btn-inverse.btn-block.btn-lg.dropdown-toggle.heading {
background: var(--color-light) !important;
background-color: var(--color-light) !important;
border: none !important;
border-radius: var(--radius-pill) !important;
width: 50px !important;
height: 50px !important;
padding: 0 !important;
position: relative !important;
transition: all var(--transition-smooth) !important;
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
overflow: hidden !important;
margin-left: auto !important;
}
/* Cart Icon - Yellow Circle */
button.btn.btn-inverse i,
button.btn.btn-inverse .fa {
position: absolute !important;
right: 5px !important;
top: 50% !important;
transform: translateY(-50%) !important;
background: var(--color-primary) !important;
background-color: var(--color-primary) !important;
color: var(--color-dark) !important;
width: 40px !important;
height: 40px !important;
border-radius: var(--radius-pill) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: var(--text-lg) !important;
pointer-events: auto !important;
}
/* Cart Total Text - Hidden by Default */
button.btn.btn-inverse.btn-block.btn-lg.dropdown-toggle.heading #cart-total {
opacity: 0 !important;
white-space: nowrap !important;
padding-right: 50px !important;
padding-left: var(--space-md) !important;
color: var(--color-dark) !important;
font-weight: var(--weight-semibold) !important;
font-size: var(--text-md) !important;
transition: opacity var(--transition-normal) !important;
}
/* Cart Button Expansion */
button.btn.btn-inverse.btn-block.btn-lg.dropdown-toggle.heading:hover {
width: 240px !important;
}
button.btn.btn-inverse.btn-block.btn-lg.dropdown-toggle.heading:hover #cart-total {
opacity: 1 !important;
}
/* Cart Dropdown */
#cart .dropdown-menu,
.journal-cart .dropdown-menu {
filter: var(--shadow-dropdown) !important;
border-radius: var(--radius-md) !important;
border: none !important;
box-shadow: none !important;
}
.dropdown-menu {
border-radius: var(--radius-md) !important;
}
/* Cart Dropdown Content - Rounded Corners */
div.content {
border-radius: var(--radius-md) !important;
overflow: hidden !important;
}
li.mini-cart-info {
border-radius: var(--radius-md) !important;
overflow: hidden !important;
}
ul.cart-wrapper {
border-radius: var(--radius-md) !important;
overflow: hidden !important;
}
/* Cart Dropdown Content Styling */
ul.cart-wrapper {
background: var(--color-light) !important;
border-radius: var(--radius-lg) !important;
padding: 0 !important;
margin: 0 !important;
list-style: none !important;
overflow: hidden !important;
box-shadow: var(--shadow-lg) !important;
}
ul.cart-wrapper > li {
padding: 0 !important;
border: none !important;
background: var(--color-light) !important;
}
/* Product items table */
ul.cart-wrapper li.mini-cart-info > table {
width: 100% !important;
background: var(--color-light) !important;
border: none !important;
border-collapse: collapse !important;
margin: 0 !important;
}
ul.cart-wrapper li.mini-cart-info > table td {
padding: var(--space-md) var(--space-sm) !important;
border: none !important;
background: transparent !important;
font-family: var(--font-primary) !important;
font-size: var(--text-sm) !important;
color: var(--color-dark) !important;
vertical-align: middle !important;
}
ul.cart-wrapper li.mini-cart-info > table tr {
border-bottom: 1px solid var(--color-grey-200) !important;
}
/* Product image */
ul.cart-wrapper td.image img {
width: 50px !important;
height: 50px !important;
object-fit: cover !important;
border-radius: var(--radius-md) !important;
border: 1px solid var(--color-grey-200) !important;
}
/* Product name link */
ul.cart-wrapper td.name a {
color: var(--color-dark) !important;
font-family: var(--font-primary) !important;
font-size: var(--text-sm) !important;
font-weight: var(--weight-semibold) !important;
text-decoration: none !important;
}
ul.cart-wrapper td.name a:hover {
color: var(--color-brown) !important;
}
/* Quantity and total */
ul.cart-wrapper td.quantity,
ul.cart-wrapper td.total {
font-family: var(--font-primary) !important;
font-size: var(--text-sm) !important;
color: var(--color-grey-400) !important;
white-space: nowrap !important;
}
ul.cart-wrapper td.total {
font-weight: var(--weight-semibold) !important;
color: var(--color-dark) !important;
}
/* Remove button */
ul.cart-wrapper td.remove button {
background: transparent !important;
border: none !important;
color: var(--color-error) !important;
font-size: var(--text-base) !important;
padding: var(--space-xs) !important;
cursor: pointer !important;
opacity: 0.5 !important;
transition: opacity var(--transition-fast) !important;
}
ul.cart-wrapper td.remove button:hover {
opacity: 1 !important;
}
/* Totals section */
.mini-cart-total {
background: var(--color-grey-100) !important;
padding: 0 !important;
}
.mini-cart-total > table {
width: 100% !important;
background: transparent !important;
border: none !important;
border-collapse: collapse !important;
margin: 0 !important;
}
.mini-cart-total > table td {
padding: var(--space-sm) var(--space-md) !important;
border: none !important;
background: transparent !important;
font-family: var(--font-primary) !important;
font-size: var(--text-sm) !important;
color: var(--color-dark) !important;
}
.mini-cart-total > table td strong {
font-weight: var(--weight-semibold) !important;
}
.mini-cart-total > table tr:last-child td {
font-weight: var(--weight-bold) !important;
border-top: 1px solid var(--color-grey-200) !important;
padding-top: var(--space-sm) !important;
}
.mini-cart-total > table tr:last-child td strong {
font-weight: var(--weight-bold) !important;
}
/* Buttons container */
p.checkout {
display: flex !important;
gap: var(--space-sm) !important;
padding: var(--space-md) !important;
margin: 0 !important;
background: var(--color-light) !important;
}
/* Cart dropdown buttons */
p.checkout a.button {
padding: var(--space-sm) var(--space-md) !important;
border-radius: var(--radius-pill) !important;
font-family: var(--font-primary) !important;
font-size: var(--text-xs) !important;
font-weight: var(--weight-bold) !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
text-decoration: none !important;
text-align: center !important;
cursor: pointer !important;
transition: all var(--transition-fast) !important;
display: inline-block !important;
line-height: 1 !important;
white-space: nowrap !important;
}
/* View Cart button - outlined */
p.checkout a.button:first-child {
background: transparent !important;
color: var(--color-dark) !important;
border: 1px solid var(--color-grey-200) !important;
}
p.checkout a.button:first-child:hover {
background: var(--color-grey-100) !important;
border-color: var(--color-grey-300) !important;
}
/* Checkout button - primary gold */
p.checkout a.button:last-child {
background: var(--color-primary) !important;
color: var(--color-dark) !important;
border: 1px solid var(--color-primary) !important;
}
p.checkout a.button:last-child:hover {
background: var(--color-primary-hover) !important;
border-color: var(--color-primary-hover) !important;
}
/* #endregion */
/* #region BREADCRUMB */
/* ============================================
BREADCRUMB
============================================ */
ul.breadcrumb {
background: var(--color-surface) !important;
background-color: var(--color-surface) !important;
backdrop-filter: blur(10px) !important;
border-radius: var(--radius-pill) !important;
padding: var(--space-sm) var(--space-lg) !important;
margin: var(--space-md) 0 !important;
box-shadow: var(--shadow-xs) !important;
display: inline-flex !important;
align-items: center !important;
gap: var(--space-sm) !important;
border: none !important;
}
ul.breadcrumb li {
display: inline-flex !important;
align-items: center !important;
}
ul.breadcrumb li a {
color: var(--color-brown) !important;
font-size: var(--text-sm) !important;
font-weight: var(--weight-semibold) !important;
transition: color var(--transition-fast) !important;
}
ul.breadcrumb li a:hover {
color: var(--color-primary-hover) !important;
}
ul.breadcrumb li::after {
color: var(--color-grey-400) !important;
margin-left: var(--space-sm) !important;
}
ul.breadcrumb li:last-child a {
color: var(--color-grey-400) !important;
}
/* #endregion */
/* #region UNIFIED PRODUCT PAGE HEADER */
/* ============================================
UNIFIED PRODUCT PAGE HEADER
Combines breadcrumb, heading, category pills, and filters
into one cohesive glass card
============================================ */
/* Unified Product Page Header - works with or without category-list */
#content:has(.product-filter) {
position: relative;
}
/* All header elements get transparent bg - the ::before provides the unified card */
#content:has(.product-filter) > ul.breadcrumb,
#content:has(.product-filter) > h1.heading-title,
#content:has(.product-filter) > .category-info,
#content:has(.product-filter) > h2.refine,
#content:has(.product-filter) > .category-list,
#content:has(.product-filter) > .product-filter {
background: transparent !important;
backdrop-filter: none !important;
box-shadow: none !important;
border-radius: 0 !important;
margin: 0 !important;
position: relative !important;
z-index: 1 !important;
}
/* Hide empty category-info and refine heading */
#content:has(.product-filter) > .category-info:empty,
#content:has(.product-filter) > .category-info:has(p:empty),
#content:has(.product-filter) > .category-info:has(p > br:only-child),
#content:has(.product-filter) > h2.refine {
display: none !important;
}
/* Hide category-info image on products page (usually not needed) */
#content:has(.product-filter) > .category-info > .image {
display: none !important;
}
/* Create unified card background - wrapper div approach */
#content:has(.product-filter) {
display: flex;
flex-direction: column;
}
/* Wrapper for all header elements */
#content:has(.product-filter) > ul.breadcrumb,
#content:has(.product-filter) > h1.heading-title,
#content:has(.product-filter) > .category-info,
#content:has(.product-filter) > h2.refine,
#content:has(.product-filter) > .category-list {
/* These will be inside the card visually */
}
/* Product filter is the LAST element in the unified header */
#content:has(.product-filter) > .product-filter {
margin-bottom: var(--space-xl) !important;
}
/* KILL ALL SHADOWS on product page header elements */
#content:has(.product-filter) > h1.heading-title,
#content:has(.product-filter) > .category-info,
#content:has(.product-filter) > .category-list,
#content:has(.product-filter) > .product-filter,
#content:has(.product-filter) > h2.refine {
box-shadow: none !important;
}
/* Use a wrapper approach - style the first elements to create card effect */
#content:has(.product-filter) > h1.heading-title {
background: var(--color-surface) !important;
backdrop-filter: blur(10px) !important;
border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
padding: var(--space-lg) var(--space-xl) var(--space-md) var(--space-xl) !important;
margin-top: var(--space-md) !important;
}
#content:has(.product-filter) > .category-list {
background: var(--color-surface) !important;
backdrop-filter: blur(10px) !important;
padding: 0 var(--space-xl) var(--space-md) var(--space-xl) !important;
}
#content:has(.product-filter) > .product-filter {
background: var(--color-surface) !important;
backdrop-filter: blur(10px) !important;
border-radius: 0 0 var(--radius-lg) var(--radius-lg) !important;
padding: var(--space-md) var(--space-xl) var(--space-lg) var(--space-xl) !important;
border-top: 1px solid var(--color-grey-200) !important;
}
/* When NO category-list exists, heading gets full rounded corners at top, filter at bottom */
#content:has(.product-filter):not(:has(.category-list)) > h1.heading-title {
border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
}
/* When category-list EXISTS, it's in the middle so no rounded corners */
#content:has(.product-filter):has(.category-list) > .category-list {
border-radius: 0 !important;
}
/* #endregion */
/* #region PAGE HEADING TITLE */
/* ============================================
PAGE HEADING TITLE (Default - non-products pages)
============================================ */
h1.heading-title {
background: var(--color-surface) !important;
background-color: var(--color-surface) !important;
backdrop-filter: blur(10px) !important;
border-radius: var(--radius-lg) !important;
padding: var(--space-lg) var(--space-xl) !important;
margin: var(--space-md) 0 var(--space-lg) 0 !important;
box-shadow: var(--shadow-sm) !important;
color: var(--color-dark) !important;
font-weight: var(--weight-bold) !important;
border: none !important;
display: inline-block !important;
}
/* #endregion */
/* #region CATEGORY BAR & SIDEBAR */
/* ============================================
CATEGORY BAR & SIDEBAR
============================================ */
/* Category Bar (Horizontal) */
.bottom-category-bar,
.category-tabs {
background: var(--color-dark-alt) !important;
background-color: var(--color-dark-alt) !important;
padding: 0 !important;
border: none !important;
}
.bottom-category-bar a,
.category-tabs a {
background: var(--color-dark-alt) !important;
background-color: var(--color-dark-alt) !important;
color: var(--color-light) !important;
padding: var(--space-md) var(--space-xl) !important;
border: none !important;
font-weight: var(--weight-semibold) !important;
text-transform: uppercase !important;
letter-spacing: var(--tracking-normal) !important;
font-size: var(--text-base) !important;
transition: all var(--transition-normal) !important;
}
.bottom-category-bar a:hover,
.category-tabs a:hover,
.bottom-category-bar a.active {
background: var(--color-primary) !important;
background-color: var(--color-primary) !important;
color: var(--color-dark) !important;
transform: translateY(-2px) !important;
}
/* Category List (Horizontal - Products Page) */
.category-list {
background: var(--color-surface) !important;
background-color: var(--color-surface) !important;
backdrop-filter: blur(10px) !important;
border-radius: var(--radius-lg) !important;
padding: var(--space-md) var(--space-lg) !important;
margin-bottom: var(--space-lg) !important;
box-shadow: none !important;
border: none !important;
}
.category-list > ul {
margin: 0;
padding: 0;
display: flex !important;
flex-wrap: wrap !important;
gap: var(--space-sm) !important;
list-style: none !important;
}
.category-list > ul > li {
margin: 0 !important;
padding: 0 !important;
}
.category-list > ul > li:after {
content: none !important;
}
.category-list > ul > li > a {
display: inline-block !important;
background: var(--color-grey-100) !important;
background-color: var(--color-grey-100) !important;
color: var(--color-brown) !important;
padding: var(--space-xs) var(--space-md) !important;
border-radius: var(--radius-pill) !important;
font-size: var(--text-sm) !important;
font-weight: var(--weight-semibold) !important;
transition: all var(--transition-normal) !important;
border: 2px solid transparent !important;
text-decoration: none !important;
}
.category-list > ul > li > a:hover {
background: var(--color-primary) !important;
background-color: var(--color-primary) !important;
color: var(--color-dark) !important;
transform: translateY(-2px) !important;
box-shadow: var(--shadow-primary-sm) !important;
}
.category-list > ul > li.active > a,
.category-list > ul > li > a.active {
background: var(--color-brown) !important;
background-color: var(--color-brown) !important;
color: var(--color-light) !important;
border-color: var(--color-brown) !important;
}
/* Product Filter Bar */
.product-filter {
background: var(--color-surface) !important;
background-color: var(--color-surface) !important;
backdrop-filter: blur(10px) !important;
border-radius: var(--radius-lg) !important;
padding: var(--space-md) var(--space-lg) !important;
margin-bottom: var(--space-lg) !important;
box-shadow: var(--shadow-sm) !important;
border: none !important;
display: flex !important;
align-items: center !important;
flex-wrap: wrap !important;
gap: var(--space-md) !important;
}
/* Pagination */
.pagination {
background: var(--color-surface) !important;
background-color: var(--color-surface) !important;
backdrop-filter: blur(10px) !important;
border-radius: var(--radius-lg) !important;
padding: var(--space-sm) var(--space-lg) !important;
margin-top: var(--space-lg) !important;
box-shadow: var(--shadow-sm) !important;
border: none !important;
}
.pagination .results {
color: var(--color-brown) !important;
font-size: var(--text-sm) !important;
font-weight: var(--weight-semibold) !important;
}
.pagination .links a,
.pagination .links span {
display: inline-block !important;
padding: var(--space-xs) var(--space-sm) !important;
margin: 0 2px !important;
border-radius: var(--radius-sm) !important;
font-size: var(--text-sm) !important;
font-weight: var(--weight-semibold) !important;
transition: all var(--transition-normal) !important;
}
.pagination .links a {
background: var(--color-grey-100) !important;
background-color: var(--color-grey-100) !important;
color: var(--color-brown) !important;
}
.pagination .links a:hover {
background: var(--color-primary) !important;
background-color: var(--color-primary) !important;
color: var(--color-dark) !important;
}
.pagination .links span {
background: var(--color-brown) !important;
background-color: var(--color-brown) !important;
color: var(--color-light) !important;
}
.product-filter .display {
display: flex !important;
align-items: center !important;
gap: var(--space-xs) !important;
}
.product-filter .display a {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 40px !important;
height: 40px !important;
background: var(--color-grey-100) !important;
background-color: var(--color-grey-100) !important;
border-radius: var(--radius-sm) !important;
transition: all var(--transition-normal) !important;
cursor: pointer !important;
}
.product-filter .display a:hover,
.product-filter .display a.active {
background: var(--color-primary) !important;
background-color: var(--color-primary) !important;
}
.product-filter .display a i {
font-size: 20px !important;
color: var(--color-brown) !important;
margin: 0 !important;
}
.product-filter .display a:hover i,
.product-filter .display a.active i {
color: var(--color-dark) !important;
}
.product-filter .product-compare {
margin-left: auto !important;
}
.product-filter .product-compare a {
color: var(--color-brown) !important;
font-size: var(--text-sm) !important;
font-weight: var(--weight-semibold) !important;
transition: color var(--transition-fast) !important;
}
.product-filter .product-compare a:hover {
color: var(--color-primary-hover) !important;
}
.product-filter .sort,
.product-filter .limit {
display: flex !important;
align-items: center !important;
gap: var(--space-xs) !important;
}
.product-filter .sort b,
.product-filter .limit b {
color: var(--color-brown) !important;
font-size: var(--text-sm) !important;
font-weight: var(--weight-semibold) !important;
white-space: nowrap !important;
}
.product-filter select {
background: var(--color-light) !important;
border: 2px solid var(--color-grey-200) !important;
border-radius: var(--radius-sm) !important;
padding: var(--space-xs) var(--space-md) !important;
font-size: var(--text-sm) !important;
color: var(--color-dark) !important;
cursor: pointer !important;
transition: border-color var(--transition-fast) !important;
min-width: 120px !important;
}
.product-filter select:hover,
.product-filter select:focus {
border-color: var(--color-primary) !important;
outline: none !important;
}
/* Sidebar Links */
.side-column .box-content li a {
padding: var(--space-sm) var(--space-lg) var(--space-xs) var(--space-sm);
background-color: var(--color-white-80);
border-width: 1px;
border-radius: 0;
border-style: solid;
border-color: var(--color-grey-300);
color: var(--color-brown-alt);
margin-bottom: 2px;
font-size: var(--text-sm);
}
.side-column .box-content ul > li:last-of-type a:last-of-type {
border-bottom-width: 1px;
}
.side-column .box-category li a:before {
content: none;
}
/* #endregion */
/* #region PRODUCT GRID */
/* ============================================
PRODUCT GRID
============================================ */
.product-grid {
margin-right: calc(-1 * var(--gap-grid));
margin-top: var(--space-3xl) !important;
}
.product-grid-item {
position: relative;
}
/* Product Card - Larger with transparent border */
.product-wrapper {
margin-right: var(--gap-grid);
background: rgba(255, 255, 255, 0.3) !important;
background-color: rgba(255, 255, 255, 0.3) !important;
backdrop-filter: blur(10px) !important;
position: relative;
overflow: hidden !important;
border-radius: var(--radius-lg) !important;
box-shadow: var(--shadow-md) !important;
transition: all var(--transition-smooth) !important;
display: block !important;
padding: 8px !important;
}
.product-wrapper:hover {
transform: translateY(-4px) !important;
box-shadow: var(--shadow-lg) !important;
}
/* Product Image Container - Maintains 577:755 ratio */
.product-grid-item .image {
position: relative;
overflow: hidden;
background: var(--color-grey-100) !important;
background-color: var(--color-grey-100) !important;
border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
width: 100% !important;
padding-bottom: 130.85% !important;
}
/* Image positioning within container */
.product-grid-item .image a,
.product-grid-item .image img {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
}
/* Content Area - Even LARGER for full titles */
.product-grid-item .name {
position: relative !important;
background: var(--color-dark-alt) !important;
background-color: var(--color-dark-alt) !important;
padding: var(--space-lg) var(--space-md) !important;
margin: 0 !important;
min-height: 130px !important;
max-height: 130px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
transition: opacity var(--transition-normal) !important;
z-index: var(--z-base) !important;
overflow: hidden !important;
border-radius: 0 0 var(--radius-md) var(--radius-md) !important;
}
.product-grid-item .name a {
text-align: center;
line-height: 1.3 !important;
color: var(--color-light) !important;
font-size: var(--text-base) !important;
font-weight: var(--weight-semibold) !important;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
display: -webkit-box !important;
-webkit-line-clamp: 4 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
position: relative !important;
top: auto !important;
left: auto !important;
width: 100% !important;
height: auto !important;
object-fit: initial !important;
}
/* Remove the overlay */
.product-grid-item .product-wrapper::after {
display: none !important;
}
/* Product Price - Just text, no background */
.product-grid-item .price {
position: absolute !important;
top: var(--space-lg) !important;
left: 0 !important;
right: 0 !important;
height: auto !important;
background: none !important;
backdrop-filter: none !important;
padding: var(--space-sm) var(--space-md) !important;
border-radius: 0 !important;
text-align: center !important;
color: var(--color-light) !important;
font-weight: var(--weight-bold) !important;
font-size: var(--text-2xl) !important; /* Large text */
opacity: 0 !important;
transition: opacity var(--transition-normal) !important;
pointer-events: none !important;
z-index: var(--z-overlay) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
line-height: var(--leading-tight) !important;
box-shadow: none !important;
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9), 0 4px 24px rgba(0, 0, 0, 0.6) !important; /* Strong shadow for readability */
}
/* Product Cart Button - Properly centered */
.product-grid-item .cart {
position: absolute !important;
top: auto !important;
left: 0 !important;
right: 0 !important;
bottom: var(--space-lg) !important;
background: transparent !important;
padding: 0 var(--space-lg) !important; /* Horizontal padding only */
text-align: center !important;
opacity: 0 !important;
transition: opacity var(--transition-normal) !important;
pointer-events: none !important;
min-height: 0 !important;
height: auto !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
z-index: var(--z-overlay) !important;
}
.product-grid-item .cart .btn,
.product-grid-item .cart button,
.product-grid-item .cart a {
width: 100% !important;
max-width: 100% !important;
background: var(--color-brown) !important;
background-color: var(--color-brown) !important;
border-radius: var(--radius-sm) !important;
padding: var(--space-md) !important;
box-shadow: var(--shadow-md) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
}
/* Product Hover Effects */
.product-grid-item:hover .name {
opacity: 0 !important;
}
.product-grid-item:hover .price,
.product-grid-item:hover .cart {
opacity: 1 !important;
pointer-events: auto !important;
}
/* Ensure price is always white and readable */
.product-grid-item .price,
.product-grid-item .price * {
color: var(--color-light) !important;
background: none !important;
}
/* #endregion */
/* #region PRODUCT LIST VIEW */
/* ============================================
PRODUCT LIST VIEW
============================================ */
.product-list-item {
margin-bottom: var(--space-md);
padding: 0;
background: transparent !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
}
.product-list-item .product-thumb {
background: rgba(255, 255, 255, 0.7) !important;
background-color: rgba(255, 255, 255, 0.7) !important;
backdrop-filter: blur(10px) !important;
border-radius: var(--radius-lg) !important;
box-shadow: var(--shadow-md) !important;
overflow: hidden !important;
display: flex !important;
transition: all var(--transition-smooth) !important;
border: none !important;
}
.product-list-item .product-thumb:hover {
transform: translateY(-3px) !important;
box-shadow: var(--shadow-lg) !important;
}
.product-list-item .image {
flex-shrink: 0 !important;
border-radius: var(--radius-lg) 0 0 var(--radius-lg) !important;
overflow: visible !important;
padding: var(--space-sm) !important;
}
.product-list-item .image > a {
border: none !important;
display: block !important;
border-radius: var(--radius-md) !important;
overflow: hidden !important;
}
.product-list-item .image img {
border-radius: var(--radius-md) !important;
display: block !important;
}
.product-list-item .product-details {
margin-left: 0;
background-color: transparent;
padding: var(--space-md) var(--space-lg);
border-left: none;
display: flex;
flex-direction: column;
justify-content: center;
}
.product-list-item .name a {
color: var(--color-dark) !important;
font-weight: var(--weight-bold) !important;
font-size: var(--text-lg) !important;
}
.product-list-item .description {
color: var(--color-grey-400) !important;
font-size: var(--text-base) !important;
line-height: var(--leading-relaxed) !important;
}
.product-list-item .price {
color: var(--color-brown) !important;
font-weight: var(--weight-bold) !important;
font-size: var(--text-xl) !important;
}
.product-list-item .button-group {
margin-top: var(--space-sm);
}
.product-list-item .cart .button,
.product-list-item .cart a {
background: var(--color-brown) !important;
background-color: var(--color-brown) !important;
border-radius: var(--radius-pill) !important;
}
.products-list {
margin-top: var(--space-3xl) !important;
}
/* #endregion */
/* #region PRODUCT PAGE */
/* ============================================
PRODUCT PAGE (Single Product View)
============================================ */
/* Product Images */
.product-info .left .image {
padding: var(--space-md);
background: var(--color-light);
border-width: 1px;
border-style: solid;
border-color: var(--color-grey-300);
}
.product-info .left .image-additional.image-additional-grid a {
padding: var(--space-md);
background: var(--color-light);
border-width: 1px;
border-style: solid;
border-color: var(--color-grey-300);
}
.product-info .left .image-additional {
margin: 0;
}
/* Product Info Section */
.product-info .right > div > div.social {
padding-top: var(--space-md);
padding-bottom: var(--space-md);
}
.product-info .right .cart div .journal-stepper {
background-color: var(--color-brown);
}
/* #endregion */
/* #region SWIPER GALLERY */
/* ============================================
SWIPER GALLERY - Journal2 Gallery Override
============================================ */
/* Frosted Glass Container */
.journal2_photo_gallery {
background: var(--color-black-30) !important;
padding: var(--space-2xl) var(--space-3xl) !important;
padding-top: var(--space-3xl) !important;
padding-bottom: var(--space-3xl) !important;
border-radius: var(--radius-md) !important;
margin: 0 auto !important;
margin-top: var(--space-menu-clear) !important;
margin-bottom: var(--space-huge) !important;
max-width: var(--container-width) !important;
width: 95% !important;
overflow: visible !important;
position: relative !important;
min-height: 220px !important;
}
.journal2_photo_gallery .box-content {
display: flex !important;
flex-wrap: nowrap !important;
gap: var(--gap-gallery) !important;
justify-content: center !important;
align-items: flex-start !important;
overflow: visible !important;
}
/* Ensure all parent wrappers allow overflow */
.journal-gallery,
.journal-gallery > div,
.journal-gallery .box-content {
overflow: visible !important;
}
/* Gallery Thumbnails - Hide all by default, JS will show 7 */
.gallery-thumb {
display: none !important;
flex: 0 0 calc((100% - 90px) / 7) !important;
max-width: calc((100% - 90px) / 7) !important;
min-width: calc((100% - 90px) / 7) !important;
margin: 0 !important;
padding: 0 !important;
transition: opacity 0.8s ease !important;
vertical-align: top !important;
z-index: 1 !important;
position: relative !important;
overflow: visible !important;
}
.gallery-thumb:hover {
z-index: 10 !important;
overflow: visible !important;
}
.gallery-thumb a {
display: block !important;
background: rgba(255, 255, 255, 0.3) !important;
background-color: rgba(255, 255, 255, 0.3) !important;
border-radius: var(--radius-md) !important;
padding: var(--space-sm) !important;
border: none !important;
border-width: 0 !important;
border-color: transparent !important;
box-shadow: var(--shadow-sm) !important;
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s ease !important;
overflow: hidden !important;
}
.gallery-thumb a:hover {
transform: scale(1.3) !important;
box-shadow: var(--shadow-lg) !important;
}
/* Hide the grey overlay */
.gallery-thumb .item-hover {
display: none !important;
}
.gallery-thumb img {
border-radius: var(--radius-sm) !important;
width: 100% !important;
height: auto !important;
display: block !important;
}
/* #endregion */
/* #region CONTENT SECTIONS */
/* ============================================
CONTENT SECTIONS
============================================ */
/* Custom Sections - Glassmorphism Effect */
.journal2_custom_sections {
background-color: var(--color-black-30) !important;
background-image: none !important;
}
.extended-container {
background-color: var(--color-black-30) !important;
background-image: none !important;
border: 1px solid var(--color-white-30);
}
/* #endregion */
/* #region FEATURE BOXES & CERTIFICATION LOGOS */
/* ============================================
FEATURE BOXES & CERTIFICATION LOGOS
============================================ */
/* Feature Boxes Container */
div.journal2_cms_blocks.hide-on-phone,
.journal2_cms_blocks {
background: var(--color-surface) !important;
background-color: var(--color-surface) !important;
padding: var(--space-2xl) var(--space-lg) !important;
border-radius: var(--radius-lg) !important;
box-shadow: var(--shadow-xs) !important;
margin: 0 !important;
}
/* Individual Feature Box */
span.block-content.block-content-top {
background: var(--color-light) !important;
background-color: var(--color-light) !important;
padding: var(--space-xl) var(--space-lg) !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
border-radius: var(--radius-lg) !important;
box-shadow: var(--shadow-xs) !important;
transition: all var(--transition-slow) !important;
}
span.block-content.block-content-top:hover {
transform: translateY(-3px) !important;
box-shadow: var(--shadow-md) !important;
}
/* Feature Box Icons - override inline styles */
span.block-content.block-content-top > div:first-child,
.block-icon,
.block-icon.block-icon-top {
width: 70px !important;
height: 70px !important;
font-size: var(--text-3xl) !important;
line-height: 70px !important;
margin: 0 auto var(--space-sm) !important;
flex-shrink: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: linear-gradient(135deg, var(--color-brown) 0%, var(--color-brown-alt) 100%) !important;
background-color: var(--color-brown) !important;
box-shadow: var(--shadow-brown) !important;
border-radius: var(--radius-md) !important;
}
/* Feature Box Headings */
span.block-content.block-content-top h3 {
margin: 0 0 var(--space-xs) 0 !important;
font-size: var(--text-md) !important;
line-height: var(--leading-normal) !important;
font-weight: var(--weight-bold) !important;
color: var(--color-dark) !important;
}
/* Feature Box Text */
span.block-content.block-content-top p {
font-size: var(--text-base) !important;
line-height: var(--leading-relaxed) !important;
margin: 0 !important;
color: var(--color-grey-400) !important;
}
/* Advanced Grid Layout for Logos/Images */
div.journal2_advanced_grid.gutter .multi-modules-column {
text-align: center !important;
}
div.journal2_advanced_grid.gutter .static-banners {
width: auto !important;
max-width: 100% !important;
display: inline-block !important;
text-align: center !important;
}
div.journal2_advanced_grid.gutter .box-content {
width: auto !important;
max-width: 100% !important;
display: inline-block !important;
}
div.journal2_advanced_grid.gutter div.static-banner {
width: auto !important;
min-width: 0 !important;
max-width: none !important;
display: inline-block !important;
}
div.journal2_advanced_grid.gutter .static-banner a {
width: auto !important;
max-width: 100% !important;
display: inline-block !important;
}
div.journal2_advanced_grid.gutter .banner-overlay {
width: 100% !important;
height: 100% !important;
}
div.journal2_advanced_grid.gutter img {
max-height: 60px !important;
width: auto !important;
display: block !important;
}
/* #endregion */
/* #region HERO SECTION */
/* ============================================
HERO SECTION
============================================ */
.hero-section {
position: relative !important;
}
/* Hero Section Overlay */
.hero-section::before {
content: '' !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
background: linear-gradient(135deg, var(--color-black-30) 0%, var(--color-black-10) 100%) !important;
pointer-events: none !important;
}
/* Hero Caption - Yellow Bar */
a#jcaption-782184929-3,
.hero-caption {
background: var(--color-primary) !important;
color: var(--color-dark) !important;
font-weight: var(--weight-bold) !important;
font-size: var(--text-lg) !important;
padding: var(--space-md) var(--space-2xl) !important;
border-radius: var(--radius-pill) !important;
box-shadow: var(--shadow-primary-md) !important;
letter-spacing: var(--tracking-tight) !important;
}
/* #endregion */
/* #region BLOG & POSTS */
/* ============================================
BLOG & POSTS - Product Card Style
============================================ */
.posts {
margin: var(--space-lg) calc(-1 * var(--gap-grid)) 0 0;
}
.post-item {
position: relative;
}
/* Post Card - Matches product card style */
.post-wrapper {
margin-right: var(--gap-grid);
background: rgba(255, 255, 255, 0.3) !important;
background-color: rgba(255, 255, 255, 0.3) !important;
backdrop-filter: blur(10px) !important;
position: relative;
overflow: hidden !important;
border-radius: var(--radius-lg) !important;
box-shadow: var(--shadow-md) !important;
transition: all var(--transition-smooth) !important;
display: block !important;
padding: 8px !important;
}
.post-wrapper:hover {
transform: translateY(-4px) !important;
box-shadow: var(--shadow-lg) !important;
}
/* Post Image Container - Matches product image ratio */
.post-item .post-image {
position: relative;
overflow: hidden;
background: var(--color-grey-100) !important;
background-color: var(--color-grey-100) !important;
border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
width: 100% !important;
padding-bottom: 100% !important; /* Square aspect ratio for blog images */
display: block !important;
}
.post-item .post-image img {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
transition: transform var(--transition-smooth) !important;
}
.post-wrapper:hover .post-image img {
transform: scale(1.05) !important;
}
/* Post Details Area - Dark background like product name area */
.post-item .post-item-details {
position: relative !important;
background: var(--color-dark-alt) !important;
background-color: var(--color-dark-alt) !important;
padding: var(--space-md) !important;
margin: 0 !important;
min-height: 130px !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
transition: opacity var(--transition-normal) !important;
z-index: var(--z-base) !important;
overflow: hidden !important;
border-radius: 0 0 var(--radius-md) var(--radius-md) !important;
}
/* Post Title */
.post-item .post-item-details h2 {
margin: 0 0 var(--space-xs) 0 !important;
padding: 0 !important;
}
.post-item .post-item-details h2 a {
text-align: center;
line-height: 1.3 !important;
color: var(--color-light) !important;
font-size: var(--text-sm) !important;
font-weight: var(--weight-semibold) !important;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
text-decoration: none !important;
min-height: 2.6em !important; /* Reserve space for 2 lines (1.3 line-height × 2) */
}
.post-item .post-item-details h2 a:hover {
color: var(--color-cream) !important;
}
/* Post Meta (author, date, comments) */
.post-item .comment-date {
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
gap: var(--space-xs) !important;
font-size: var(--text-xs) !important;
color: var(--color-grey-300) !important;
margin-bottom: var(--space-xs) !important;
}
.post-item .comment-date span {
display: inline-flex !important;
align-items: center !important;
}
.post-item .comment-date .p-author::before {
content: "\f007" !important;
font-family: "Font Awesome 5 Free" !important;
font-weight: 900 !important;
margin-right: 4px !important;
font-size: 10px !important;
}
.post-item .comment-date .p-date::before {
content: "\f073" !important;
font-family: "Font Awesome 5 Free" !important;
font-weight: 900 !important;
margin-right: 4px !important;
font-size: 10px !important;
}
.post-item .comment-date .p-comment::before {
content: "\f075" !important;
font-family: "Font Awesome 5 Free" !important;
font-weight: 900 !important;
margin-right: 4px !important;
font-size: 10px !important;
}
/* Post Excerpt - Hidden by default, shown on hover */
.post-item .post-text {
display: none !important;
}
/* Read More Button - Styled like product cart button */
.post-item .post-button {
text-align: center !important;
margin-top: auto !important;
}
.post-item .post-button .post-view-more {
display: inline-block !important;
background: var(--color-brown) !important;
background-color: var(--color-brown) !important;
color: var(--color-light) !important;
padding: var(--space-xs) var(--space-md) !important;
border-radius: var(--radius-sm) !important;
font-size: var(--text-xs) !important;
font-weight: var(--weight-semibold) !important;
text-decoration: none !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
transition: all var(--transition-normal) !important;
box-shadow: var(--shadow-sm) !important;
}
.post-item .post-button .post-view-more:hover {
background: var(--color-primary) !important;
background-color: var(--color-primary) !important;
transform: translateY(-2px) !important;
box-shadow: var(--shadow-md) !important;
}
/* Hide button icons if present */
.post-item .post-button .post-view-more i {
display: none !important;
}
/* #endregion */
/* #region BLOG / ARTICLE PAGES */
/* ============================================
Blog Post & Article Pages - Design System 2.0
============================================ */
/* Main blog content area - glass card */
#content.blog-post {
background: var(--color-surface) !important;
backdrop-filter: blur(10px) !important;
border-radius: var(--radius-lg) !important;
padding: var(--space-xl) !important;
margin-bottom: var(--space-xl) !important;
}
/* Blog page title - clean, no background */
#content.blog-post > h1.heading-title,
.blog-post h1.heading-title {
font-family: var(--font-secondary) !important;
font-size: var(--text-3xl) !important;
font-weight: var(--weight-bold) !important;
color: var(--color-dark) !important;
margin: 0 0 var(--space-sm) 0 !important;
padding: 0 !important;
background: none !important;
background-color: transparent !important;
box-shadow: none !important;
border-radius: 0 !important;
border: none !important;
display: block !important;
backdrop-filter: none !important;
}
/* Post meta info (author, date, comments) */
.blog-post .post-stats,
.blog-post .post-stats.comment-date {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: var(--space-xs) !important;
padding: var(--space-sm) 0 var(--space-md) 0 !important;
margin: 0 0 var(--space-lg) 0 !important;
border: none !important;
border-bottom: 1px solid var(--color-grey-200) !important;
font-family: var(--font-primary) !important;
font-size: var(--text-sm) !important;
color: var(--color-grey-400) !important;
background: none !important;
}
.blog-post .post-stats span {
display: inline !important;
background: none !important;
}
.blog-post .post-stats .p-author {
color: var(--color-brown) !important;
font-weight: var(--weight-semibold) !important;
}
.blog-post .post-stats .p-category a {
color: var(--color-brown) !important;
text-decoration: none !important;
}
.blog-post .post-stats .p-category a:hover {
color: var(--color-primary) !important;
}
/* Post content area */
.blog-post .post-details {
font-family: var(--font-primary) !important;
font-size: var(--text-base) !important;
line-height: 1.8 !important;
color: var(--color-dark) !important;
border: none !important;
margin: 0 !important;
padding: 0 !important;
background: none !important;
}
.blog-post .post-details p {
margin-bottom: var(--space-md) !important;
}
.blog-post .post-details img {
max-width: 100% !important;
height: auto !important;
border-radius: var(--radius-md) !important;
margin: var(--space-lg) 0 !important;
}
/* Floated images in blog posts - automatic spacing */
.blog-post .post-details img[style*="float: left"],
.blog-post .post-details img[style*="float:left"] {
margin: 0 var(--space-lg) var(--space-md) 0 !important;
max-width: 50% !important;
}
.blog-post .post-details img[style*="float: right"],
.blog-post .post-details img[style*="float:right"] {
margin: 0 0 var(--space-md) var(--space-lg) !important;
max-width: 50% !important;
}
/* Clear floats after content */
.blog-post .post-details::after {
content: "" !important;
display: table !important;
clear: both !important;
}
/* Social share buttons */
.blog-post .social.share-this {
margin-top: var(--space-xl) !important;
padding-top: var(--space-lg) !important;
border-top: 1px solid var(--color-grey-200) !important;
}
/* ===== SIDEBAR ===== */
#column-right.side-column {
padding-left: var(--space-md) !important;
}
/* Sidebar box container */
#column-right .box,
#column-right .side-blog {
background: var(--color-surface) !important;
backdrop-filter: blur(10px) !important;
border-radius: var(--radius-lg) !important;
padding: 0 !important;
margin-bottom: var(--space-lg) !important;
overflow: hidden !important;
border: none !important;
}
/* Sidebar heading */
#column-right .box-heading {
background: var(--color-dark-alt) !important;
color: var(--color-light) !important;
font-family: var(--font-secondary) !important;
font-size: var(--text-md) !important;
font-weight: var(--weight-bold) !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
padding: var(--space-md) var(--space-lg) !important;
margin: 0 !important;
border: none !important;
}
/* Sidebar posts container */
#column-right .box-post {
padding: var(--space-sm) var(--space-md) !important;
background: transparent !important;
}
/* Individual sidebar post item */
#column-right .side-post {
display: flex !important;
gap: var(--space-sm) !important;
padding: var(--space-sm) 0 !important;
align-items: flex-start !important;
}
#column-right .side-post-image {
flex-shrink: 0 !important;
}
#column-right .side-post-image img {
width: 50px !important;
height: 50px !important;
object-fit: cover !important;
border-radius: var(--radius-sm) !important;
border: 1px solid var(--color-grey-200) !important;
}
#column-right .side-post-details {
flex: 1 !important;
min-width: 0 !important;
}
#column-right .side-post-title {
font-family: var(--font-primary) !important;
font-size: var(--text-sm) !important;
font-weight: var(--weight-semibold) !important;
color: var(--color-dark) !important;
text-decoration: none !important;
display: block !important;
margin-bottom: 2px !important;
line-height: 1.3 !important;
}
#column-right .side-post-title:hover {
color: var(--color-brown) !important;
}
#column-right .side-post .comment-date {
font-size: var(--text-xs) !important;
color: var(--color-grey-400) !important;
display: flex !important;
gap: var(--space-sm) !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
background: none !important;
}
/* Sidebar dividers */
#column-right .box-post hr {
border: none !important;
border-top: 1px solid var(--color-grey-200) !important;
margin: var(--space-xs) 0 !important;
}
#column-right .box-post hr:last-child {
display: none !important;
}
/* #endregion */
/* #region CONTACT PAGE */
/* ============================================
CONTACT PAGE
============================================ */
.oc2 .contact-page .panel-body {
background-color: var(--color-white-80);
border-width: 1px;
border-radius: 0;
border-style: solid;
border-color: var(--color-grey-300);
}
.oc2 .contact-page .fa {
color: var(--color-brown-alt);
}
/* #endregion */
/* #region INFO SECTIONS */
/* ============================================
INFO SECTIONS
============================================ */
.info_des {
padding: var(--space-xl) var(--space-lg);
background-color: var(--color-white-80);
border-width: 1px;
border-radius: 0;
border-style: solid;
border-color: var(--color-grey-300);
}
/* #endregion */
/* #region FOOTER */
/* ============================================
FOOTER
============================================ */
footer {
background: linear-gradient(135deg, var(--color-dark) 0%, color-mix(in srgb, var(--color-dark) 60%, black) 100%) !important;
padding: var(--space-3xl) 0 !important;
}
footer h3,
footer h4 {
color: var(--color-primary) !important;
font-weight: var(--weight-bold) !important;
margin-bottom: var(--space-lg) !important;
}
/* #endregion */
/* #region SCROLL TO TOP BUTTON */
/* ============================================
SCROLL TO TOP BUTTON
============================================ */
.scroll-top {
position: fixed !important;
z-index: var(--z-tooltip) !important;
right: 20px !important;
bottom: 20px !important;
background: var(--color-primary) !important;
background-color: var(--color-primary) !important;
color: var(--color-dark) !important;
width: 50px !important;
height: 50px !important;
min-width: 50px !important;
min-height: 50px !important;
max-width: 50px !important;
max-height: 50px !important;
padding: 0 !important;
margin: 0 !important;
border-radius: 50% !important;
box-shadow: var(--shadow-md) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
transition: all var(--transition-normal) !important;
border: none !important;
line-height: 1 !important;
}
.scroll-top i,
.scroll-top span,
.scroll-top::before {
font-size: 20px !important;
line-height: 1 !important;
}
.scroll-top:hover {
transform: translateY(-3px) !important;
box-shadow: var(--shadow-primary-md) !important;
background: var(--color-primary-hover) !important;
}
/* #endregion */
/* #region PERFORMANCE OPTIMIZATIONS */
/* ============================================
PERFORMANCE OPTIMIZATIONS
Force GPU acceleration and fix rendering issues
============================================ */
.journal2_custom_sections,
.extended-container,
.swiper-container-horizontal,
.product-wrapper,
.hero-section::before,
.product-grid-item .product-wrapper::after {
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000;
perspective: 1000;
}
/* Fix gradient banding */
.hero-section::before {
background: var(--color-black-20) !important;
background-image: none !important;
}
/* Fix product overlay */
.product-grid-item .product-wrapper::after {
background: var(--color-black-60) !important;
background-image: none !important;
}
/* #endregion */
/* Top Header Bar Styling */
.journal-top-header {
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%) !important;
box-shadow: var(--shadow-xs) !important;
}
/* Top bar text - dark for contrast against bright gold */
.top-bar a,
.top-bar .m-item,
.top-bar .top-menu-link,
.top-bar span,
.header-assets.top-bar a,
.header-assets.top-bar .m-item,
.journal-links a,
.journal-secondary a,
.journal-links .m-item,
.journal-secondary .m-item,
.journal-links .top-menu-link,
.journal-secondary .top-menu-link {
color: var(--color-dark) !important;
}
/* Top bar icons */
.top-bar a[data-icon]::before,
.top-bar a[data-icon]::after,
.top-bar .m-item::before,
.top-bar .m-item::after,
.top-bar i[data-icon],
.header-assets.top-bar i {
color: var(--color-dark) !important;
}
/* Top bar hover - slightly lighter */
.top-bar a:hover,
.top-bar .m-item:hover,
.header-assets.top-bar a:hover {
color: var(--color-dark-alt) !important;
opacity: 0.8;
}
.super-menu {
/* background-color: rgb(115, 110, 95); */
/* border-top-left-radius: 3px; */
/* border-top-right-radius: 3px; */
}
/* All Hero Slider Buttons - Uses theme secondary */
a.tp-caption.tp-text[id^="jcaption"] {
background: var(--color-brown) !important;
background-color: var(--color-brown) !important;
box-shadow: var(--shadow-sm) !important;
border-radius: var(--radius-sm) !important;
transition: all var(--transition-normal) !important;
}
a.tp-caption.tp-text[id^="jcaption"]:hover {
background: var(--color-brown-alt) !important;
background-color: var(--color-brown-alt) !important;
transform: translateY(-2px) !important;
box-shadow: var(--shadow-md) !important;
}
} /* END DESKTOP ONLY STYLES */
/* #endregion */
/* ============================================
QUANTITY INPUT FIX
============================================ */
.product-info .right .cart span.qty {
display: flex !important;
align-items: center !important;
flex-wrap: nowrap !important;
}
.product-info .right .cart span.qty input[name=quantity] {
width: 45px !important;
min-width: 45px !important;
max-width: 45px !important;
text-align: center !important;
color: inherit !important;
font-size: 14px !important;
line-height: normal !important;
padding: 0 !important;
text-indent: 0 !important;
opacity: 1 !important;
}
.product-info .right .cart span.qty a.journal-stepper {
display: flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 38px !important;
width: 38px !important;
}
/* ============================================
MOBILE ONLY STYLES (max-width: 575px)
============================================ */
@media (max-width: 575px) {
/* Certification banners - 2x2 grid instead of stacked list */
#multi-module-1361009000 {
padding: 10px !important;
}
#multi-module-1361009000 .multi-modules {
display: flex !important;
flex-wrap: wrap !important;
margin-right: 0 !important;
height: auto !important;
}
#multi-module-1361009000 .multi-modules-column {
width: 50% !important;
min-width: 50% !important;
max-width: 50% !important;
flex: 0 0 50% !important;
padding: 5px !important;
float: none !important;
}
#multi-module-1361009000 .multi-modules-column .static-banner,
#multi-module-1361009000 .multi-modules-column .static-banner.xs-100 {
width: 100% !important;
}
#multi-module-1361009000 .multi-modules-column img {
width: 100% !important;
height: auto !important;
}
/* Override theme's xs-25 grid class */
.multi-modules-column.xs-25 {
width: 50% !important;
float: none !important;
}
/* Product names - darker color for readability */
.product-grid-item .name a,
.product-name a,
.name a {
color: var(--color-dark, #1a1a1a) !important;
}
} /* END MOBILE ONLY STYLES */
/* #region CART PAGE */
/* ============================================
SHOPPING CART PAGE
============================================ */
/* Cart Page Base Typography */
#content.sc-page,
#content.sc-page * {
font-family: var(--font-primary) !important;
}
#content.sc-page h1,
#content.sc-page h2,
#content.sc-page h3,
#content.sc-page h4 {
font-family: var(--font-secondary) !important;
}
/* Cart Page Container */
#content.sc-page {
background: var(--color-surface) !important;
border-radius: var(--radius-lg) !important;
padding: var(--space-xl) !important;
box-shadow: var(--shadow-sm) !important;
color: var(--color-dark) !important;
font-size: var(--text-base) !important;
font-weight: var(--weight-normal) !important;
}
/* Cart Table Container */
.cart-info {
background: var(--color-light) !important;
border-radius: var(--radius-md) !important;
overflow: hidden !important;
box-shadow: var(--shadow-xs) !important;
margin-bottom: var(--space-xl) !important;
}
.cart-info .table {
margin-bottom: 0 !important;
border: none !important;
}
.cart-info .table-bordered {
border: none !important;
}
.cart-info .table-bordered > thead > tr > td,
.cart-info .table-bordered > tbody > tr > td {
border: none !important;
border-bottom: 1px solid var(--color-grey-200) !important;
}
.cart-info .table > tbody > tr:last-child > td {
border-bottom: none !important;
}
/* Cart Table Header */
.cart-info thead tr {
background: var(--color-dark-alt) !important;
}
.cart-info thead td,
.cart-info thead th,
.cart-info thead tr td,
.cart-info thead tr th,
.cart-info .table thead td,
.cart-info .table thead th,
.cart-info .table-bordered thead td,
.cart-info .table-bordered thead th,
.cart-info thead td *,
.cart-info thead th * {
color: var(--color-light) !important;
font-family: var(--font-primary) !important;
font-weight: var(--weight-semibold) !important;
font-size: var(--text-sm) !important;
text-transform: uppercase !important;
letter-spacing: var(--tracking-normal) !important;
padding: var(--space-md) var(--space-lg) !important;
border: none !important;
background: transparent !important;
}
/* Cart Table Body */
.cart-info tbody tr {
transition: background var(--transition-fast) !important;
}
.cart-info tbody tr:hover {
background: var(--color-grey-100) !important;
}
.cart-info tbody td {
padding: var(--space-md) var(--space-lg) !important;
vertical-align: middle !important;
color: var(--color-dark) !important;
font-family: var(--font-primary) !important;
font-size: var(--text-base) !important;
font-weight: var(--weight-normal) !important;
}
/* Cart Product Image */
.cart-info td.image img,
.cart-info .img-thumbnail {
border-radius: var(--radius-md) !important;
border: 2px solid var(--color-grey-200) !important;
padding: var(--space-xs) !important;
background: var(--color-light) !important;
transition: all var(--transition-normal) !important;
width: 80px !important;
height: 80px !important;
object-fit: cover !important;
}
.cart-info td.image img:hover,
.cart-info .img-thumbnail:hover {
border-color: var(--color-primary) !important;
transform: scale(1.05) !important;
}
/* Cart Product Name */
.cart-info td.name,
.cart-info td.name a {
color: var(--color-dark) !important;
font-family: var(--font-primary) !important;
font-weight: var(--weight-semibold) !important;
font-size: var(--text-base) !important;
text-decoration: none !important;
transition: color var(--transition-fast) !important;
}
.cart-info td.name a:hover {
color: var(--color-primary) !important;
}
/* Cart Model/SKU */
.cart-info td.model {
color: var(--color-grey-400) !important;
font-family: var(--font-primary) !important;
font-size: var(--text-sm) !important;
font-weight: var(--weight-normal) !important;
}
/* Cart Quantity Input Group */
.cart-info td.quantity .input-group {
max-width: 160px !important;
background: var(--color-grey-100) !important;
border-radius: var(--radius-md) !important;
overflow: hidden !important;
border: 1px solid var(--color-grey-200) !important;
}
.cart-info td.quantity .form-control {
background: transparent !important;
border: none !important;
text-align: center !important;
font-family: var(--font-primary) !important;
font-weight: var(--weight-semibold) !important;
font-size: var(--text-base) !important;
color: var(--color-dark) !important;
padding: var(--space-sm) !important;
height: 40px !important;
min-height: 40px !important;
box-shadow: none !important;
}
.cart-info td.quantity .input-group-btn {
display: flex !important;
}
.cart-info td.quantity .input-group-btn .btn {
border-radius: 0 !important;
padding: var(--space-sm) var(--space-md) !important;
height: 40px !important;
min-width: 40px !important;
margin: 0 !important;
box-shadow: none !important;
}
/* Update Button (Refresh) */
.cart-info td.quantity .btn-primary {
background: var(--color-primary) !important;
color: var(--color-dark) !important;
border: none !important;
}
.cart-info td.quantity .btn-primary:hover {
background: var(--color-primary-hover) !important;
transform: none !important;
}
/* Remove Button (X) */
.cart-info td.quantity .btn-danger {
background: transparent !important;
color: var(--color-error) !important;
border: none !important;
border-left: 1px solid var(--color-grey-200) !important;
}
.cart-info td.quantity .btn-danger:hover {
background: var(--color-error) !important;
color: var(--color-light) !important;
transform: none !important;
}
/* Cart Price & Total */
.cart-info td.price,
.cart-info td.total {
font-family: var(--font-primary) !important;
font-weight: var(--weight-semibold) !important;
font-size: var(--text-base) !important;
color: var(--color-dark) !important;
}
.cart-info td.total {
color: var(--color-brown) !important;
}
/* Action Area - Coupon/Shipping/Voucher */
.action-area {
margin-top: var(--space-xl) !important;
}
.action-area h2.secondary-title,
#content > div > h2,
#content .action-area > h2 {
background: transparent !important;
background-color: transparent !important;
color: var(--color-dark) !important;
font-size: var(--text-xl) !important;
font-weight: var(--weight-bold) !important;
margin-bottom: var(--space-sm) !important;
border: none !important;
padding: 0 !important;
box-shadow: none !important;
}
.action-area > p,
#content > div > p,
#content .action-area > p {
background: transparent !important;
background-color: transparent !important;
color: var(--color-grey-400) !important;
font-size: var(--text-base) !important;
margin-bottom: var(--space-lg) !important;
box-shadow: none !important;
}
/* Accordion Panels */
.action-area .panel {
border: 1px solid var(--color-grey-200) !important;
border-radius: var(--radius-md) !important;
margin-bottom: var(--space-sm) !important;
box-shadow: none !important;
overflow: hidden !important;
}
.action-area .panel-default {
background: var(--color-light) !important;
}
.action-area .panel-heading {
background: var(--color-grey-100) !important;
border: none !important;
padding: 0 !important;
}
.action-area .panel-title {
margin: 0 !important;
}
.action-area .panel-title a {
display: block !important;
padding: var(--space-md) var(--space-lg) !important;
color: var(--color-dark) !important;
font-weight: var(--weight-semibold) !important;
font-size: var(--text-base) !important;
text-decoration: none !important;
transition: all var(--transition-fast) !important;
}
.action-area .panel-title a:hover {
background: var(--color-primary) !important;
color: var(--color-dark) !important;
}
.action-area .panel-title a i {
float: right !important;
transition: transform var(--transition-normal) !important;
}
.action-area .panel-title a[aria-expanded="true"] i,
.action-area .panel-title a:not(.collapsed) i {
transform: rotate(180deg) !important;
}
.action-area .panel-body {
padding: var(--space-lg) !important;
background: var(--color-light) !important;
border-top: 1px solid var(--color-grey-200) !important;
}
.action-area .panel-body label {
color: var(--color-grey-400) !important;
font-size: var(--text-sm) !important;
margin-bottom: var(--space-sm) !important;
}
/* Coupon/Voucher Input Group */
.action-area .input-group {
max-width: 500px !important;
}
.action-area .input-group .form-control {
border-radius: var(--radius-md) 0 0 var(--radius-md) !important;
border: 2px solid var(--color-grey-200) !important;
border-right: none !important;
padding: var(--space-sm) var(--space-md) !important;
height: 45px !important;
font-size: var(--text-base) !important;
}
.action-area .input-group .form-control:focus {
border-color: var(--color-primary) !important;
box-shadow: var(--shadow-inset-light) !important;
}
.action-area .input-group .btn {
border-radius: 0 var(--radius-md) var(--radius-md) 0 !important;
padding: var(--space-sm) var(--space-lg) !important;
height: 45px !important;
white-space: nowrap !important;
min-width: 130px !important;
}
/* Coupon & Voucher Buttons - Same Width */
input#button-coupon,
input#button-voucher {
min-width: 160px !important;
width: 160px !important;
}
/* Newsletter & Terms Checkboxes - Same Size & Alignment */
div.checkbox.check-newsletter input[type="checkbox"],
div.radio.check-terms input[type="checkbox"] {
width: 18px !important;
height: 18px !important;
min-width: 18px !important;
min-height: 18px !important;
margin: 0 !important;
}
div.checkbox.check-newsletter,
div.radio.check-terms {
padding-left: 0 !important;
margin-left: 0 !important;
}
div.checkbox.check-newsletter label,
div.radio.check-terms label {
padding-left: 0 !important;
margin-left: 0 !important;
display: flex !important;
align-items: center !important;
gap: 8px !important;
}
/* Shipping Estimate Form */
.action-area .form-horizontal .form-group {
margin-bottom: var(--space-md) !important;
}
.action-area .form-horizontal label {
text-align: left !important;
padding-top: var(--space-sm) !important;
}
.action-area .form-horizontal select,
.action-area .form-horizontal input[type="text"] {
border: 2px solid var(--color-grey-200) !important;
border-radius: var(--radius-md) !important;
padding: var(--space-sm) var(--space-md) !important;
height: 45px !important;
font-size: var(--text-base) !important;
background: var(--color-light) !important;
width: 100% !important;
max-width: none !important;
}
.action-area .form-horizontal select:focus,
.action-area .form-horizontal input[type="text"]:focus {
border-color: var(--color-primary) !important;
box-shadow: var(--shadow-inset-light) !important;
}
/* Cart Totals Table */
.cart-total {
margin-top: var(--space-xl) !important;
}
.cart-total .table {
background: var(--color-light) !important;
border-radius: var(--radius-md) !important;
overflow: hidden !important;
box-shadow: var(--shadow-xs) !important;
}
.cart-total .table-bordered {
border: none !important;
}
.cart-total .table-bordered td {
border: none !important;
border-bottom: 1px solid var(--color-grey-200) !important;
padding: var(--space-md) var(--space-lg) !important;
font-size: var(--text-base) !important;
}
.cart-total .table-bordered tr:last-child td {
border-bottom: none !important;
background: var(--color-primary) !important;
color: var(--color-dark) !important;
font-size: var(--text-lg) !important;
font-weight: var(--weight-bold) !important;
}
.cart-total td.text-right {
color: var(--color-dark) !important;
}
.cart-total td strong {
font-weight: var(--weight-semibold) !important;
}
/* Cart Buttons Row */
.buttons.clearfix {
background: transparent !important;
border: none !important;
padding: var(--space-lg) 0 !important;
margin-top: var(--space-lg) !important;
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
}
.buttons .btn-default {
background: var(--color-grey-100) !important;
color: var(--color-dark) !important;
border: 2px solid var(--color-grey-300) !important;
}
.buttons .btn-default:hover {
background: var(--color-grey-200) !important;
border-color: var(--color-grey-400) !important;
transform: translateY(-2px) !important;
}
.buttons .btn-primary {
background: var(--color-primary) !important;
color: var(--color-dark) !important;
padding: var(--space-md) var(--space-2xl) !important;
font-size: var(--text-md) !important;
}
.buttons .btn-primary:hover {
background: var(--color-primary-hover) !important;
box-shadow: var(--shadow-primary-md) !important;
}
/* #endregion */
/* #region CHECKOUT PAGE */
/* ============================================
CHECKOUT PAGE - Based on DESIGN-SYSTEM.md
============================================ */
/*
DESIGN SYSTEM REFERENCE:
- Font Primary: Inter (body, labels, inputs)
- Font Secondary: Cormorant Garamond (headings)
- Text Base: 14px | Text SM: 12px | Text MD: 16px | Text LG: 18px | Text 3XL: 32px
- Weight Normal: 400 | Semibold: 600 | Bold: 700
- Colors: Primary #f1c40f | Dark #1F1E1C | Grey-200 #E8E6E3 | Grey-400 #6B6965
- Radius: SM 4px | MD 8px | LG 12px | Pill 50px
- Spacing: XS 4px | SM 8px | MD 16px | LG 24px | XL 32px
*/
/* ===== BASE RESET ===== */
.one-page-checkout,
.one-page-checkout *,
.journal-checkout,
.journal-checkout * {
font-family: Inter, sans-serif !important;
color: #1F1E1C !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 1.6 !important;
}
/* ===== HEADINGS ===== */
.one-page-checkout h1,
.one-page-checkout h2,
.one-page-checkout h3,
.journal-checkout h1,
.journal-checkout h2,
.journal-checkout h3,
.one-page-checkout .heading-title,
.one-page-checkout .secondary-title,
.journal-checkout .heading-title,
.journal-checkout .secondary-title {
font-family: "Cormorant Garamond", serif !important;
color: #1F1E1C !important;
font-weight: 700 !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 0 16px 0 !important;
}
/* Page Title - 32px */
.one-page-checkout h1.heading-title {
font-size: 32px !important;
margin-bottom: 32px !important;
}
/* Section Title - 18px with gold underline */
.one-page-checkout h2,
.one-page-checkout h2.secondary-title,
.journal-checkout h2,
.journal-checkout h2.secondary-title,
.checkout-content h2,
.checkout-content h2.secondary-title {
font-size: 18px !important;
padding-bottom: 8px !important;
margin-bottom: 16px !important;
border-bottom: 2px solid #f1c40f !important;
}
/* ===== PAGE CONTAINER ===== */
.one-page-checkout {
background: rgba(255, 255, 255, 0.9) !important;
border-radius: 12px !important;
padding: 32px !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
}
/* ===== CONTENT BOXES ===== */
.checkout-content {
background: #ffffff !important;
border: 1px solid #E8E6E3 !important;
border-radius: 8px !important;
padding: 24px !important;
margin-bottom: 24px !important;
box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
}
/* ===== FORM ELEMENTS ===== */
/* Fieldsets */
.journal-checkout fieldset,
.checkout-content fieldset {
border: none !important;
padding: 0 !important;
margin: 0 0 24px 0 !important;
}
/* Labels - 12px Semibold */
.journal-checkout label,
.journal-checkout .control-label,
.checkout-content label,
.checkout-content .control-label {
font-family: Inter, sans-serif !important;
font-size: 12px !important;
font-weight: 600 !important;
color: #1F1E1C !important;
margin-bottom: 4px !important;
display: block !important;
}
/* Text Inputs - 14px, 45px height, 8px radius */
.journal-checkout input[type="text"],
.journal-checkout input[type="email"],
.journal-checkout input[type="password"],
.journal-checkout input[type="tel"],
.journal-checkout textarea,
.checkout-content input[type="text"],
.checkout-content input[type="email"],
.checkout-content input[type="password"],
.checkout-content input[type="tel"],
.checkout-content textarea,
.journal-checkout .form-control,
.checkout-content .form-control {
background: #ffffff !important;
border: 2px solid #E8E6E3 !important;
border-radius: 8px !important;
padding: 8px 16px !important;
font-family: Inter, sans-serif !important;
font-size: 14px !important;
font-weight: 400 !important;
color: #1F1E1C !important;
height: 45px !important;
min-height: 45px !important;
width: 100% !important;
box-shadow: none !important;
transition: border-color 0.3s ease !important;
}
.journal-checkout textarea,
.checkout-content textarea {
height: auto !important;
min-height: 100px !important;
}
.journal-checkout input:focus,
.journal-checkout textarea:focus,
.journal-checkout select:focus,
.checkout-content input:focus,
.checkout-content textarea:focus,
.checkout-content select:focus {
border-color: #f1c40f !important;
outline: none !important;
}
.journal-checkout input::placeholder,
.journal-checkout textarea::placeholder,
.checkout-content input::placeholder,
.checkout-content textarea::placeholder {
color: #6B6965 !important;
}
/* Select Dropdowns */
.journal-checkout select,
.checkout-content select {
background: #ffffff !important;
border: 2px solid #E8E6E3 !important;
border-radius: 8px !important;
padding: 8px 16px !important;
font-family: Inter, sans-serif !important;
font-size: 14px !important;
font-weight: 400 !important;
color: #1F1E1C !important;
height: 45px !important;
width: 100% !important;
cursor: pointer !important;
}
/* ===== RADIO & CHECKBOX ===== */
.journal-checkout .radio,
.journal-checkout .checkbox,
.checkout-content .radio,
.checkout-content .checkbox {
margin-bottom: 8px !important;
}
.journal-checkout .radio label,
.journal-checkout .checkbox label,
.checkout-content .radio label,
.checkout-content .checkbox label {
display: flex !important;
align-items: center !important;
gap: 8px !important;
font-size: 14px !important;
font-weight: 400 !important;
cursor: pointer !important;
padding: 8px 0 !important;
}
.journal-checkout .radio input[type="radio"],
.journal-checkout .checkbox input[type="checkbox"],
.checkout-content .radio input[type="radio"],
.checkout-content .checkbox input[type="checkbox"] {
width: 18px !important;
height: 18px !important;
min-height: 18px !important;
margin: 0 !important;
accent-color: #f1c40f !important;
cursor: pointer !important;
}
/* ===== BUTTONS ===== */
/* Primary Button - Gold, Pill, 12px Bold Uppercase */
.journal-checkout .btn,
.journal-checkout .button,
.journal-checkout input[type="button"],
.journal-checkout input[type="submit"],
.checkout-content .btn,
.checkout-content .button,
.checkout-content input[type="button"],
.checkout-content input[type="submit"] {
background: #f1c40f !important;
color: #1F1E1C !important;
border: none !important;
border-radius: 50px !important;
padding: 8px 32px !important;
font-family: Inter, sans-serif !important;
font-size: 12px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
cursor: pointer !important;
transition: all 0.3s ease !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
height: auto !important;
min-height: auto !important;
}
.journal-checkout .btn:hover,
.journal-checkout .button:hover,
.journal-checkout input[type="button"]:hover,
.checkout-content .btn:hover,
.checkout-content .button:hover,
.checkout-content input[type="button"]:hover {
background: #dcb000 !important;
transform: translateY(-2px) !important;
box-shadow: 0 8px 32px rgba(241, 196, 15, 0.4) !important;
}
/* Confirm Order Button - Full width, larger */
.confirm-order .confirm-button,
#journal-checkout-confirm-button,
#button-confirm {
width: 100% !important;
padding: 16px 32px !important;
font-size: 16px !important;
}
/* Delete/Danger Button */
.journal-checkout .btn-danger,
.checkout-content .btn-danger {
background: transparent !important;
color: #ff4444 !important;
box-shadow: none !important;
}
.journal-checkout .btn-danger:hover,
.checkout-content .btn-danger:hover {
background: #ff4444 !important;
color: #ffffff !important;
}
/* ===== INPUT GROUPS ===== */
.journal-checkout .input-group,
.checkout-content .input-group {
display: flex !important;
}
.journal-checkout .input-group .form-control,
.checkout-content .input-group .form-control {
border-radius: 8px 0 0 8px !important;
border-right: none !important;
flex: 1 !important;
}
.journal-checkout .input-group-btn,
.checkout-content .input-group-btn {
display: flex !important;
}
.journal-checkout .input-group-btn .btn,
.journal-checkout .input-group-btn .button,
.checkout-content .input-group-btn .btn,
.checkout-content .input-group-btn .button {
border-radius: 0 8px 8px 0 !important;
height: 45px !important;
}
/* ===== TABLES ===== */
/* Table Container */
.checkout-product .table {
background: #ffffff !important;
border: none !important;
margin-bottom: 0 !important;
}
.checkout-product .table-bordered {
border: none !important;
}
/* Table Header - Dark, 12px Semibold Uppercase */
.checkout-product .table thead tr {
background: #2D2B28 !important;
}
.checkout-product .table thead td,
.checkout-product .table thead th {
background: #2D2B28 !important;
color: #ffffff !important;
font-family: Inter, sans-serif !important;
font-size: 12px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
padding: 16px !important;
border: none !important;
}
/* Table Body - 14px Normal */
.checkout-product .table tbody td {
font-family: Inter, sans-serif !important;
font-size: 14px !important;
font-weight: 400 !important;
color: #1F1E1C !important;
padding: 16px !important;
vertical-align: middle !important;
border: none !important;
border-bottom: 1px solid #E8E6E3 !important;
}
.checkout-product .table tbody td a {
color: #1F1E1C !important;
font-weight: 600 !important;
text-decoration: none !important;
}
.checkout-product .table tbody td a:hover {
color: #f1c40f !important;
}
/* Table Footer - Totals */
.checkout-product .table tfoot td {
font-family: Inter, sans-serif !important;
font-size: 14px !important;
font-weight: 400 !important;
color: #1F1E1C !important;
padding: 8px 16px !important;
border: none !important;
border-top: 1px solid #E8E6E3 !important;
}
/* Final Total Row - Gold background */
.checkout-product .table tfoot tr:last-child td {
background: #f1c40f !important;
color: #1F1E1C !important;
font-weight: 700 !important;
font-size: 16px !important;
}
/* Quantity Controls in Table */
.checkout-product td.quantity .input-group {
max-width: 140px !important;
background: #FAF9F7 !important;
border: 1px solid #E8E6E3 !important;
border-radius: 8px !important;
overflow: hidden !important;
}
.checkout-product td.quantity .form-control {
background: transparent !important;
border: none !important;
text-align: center !important;
height: 36px !important;
min-height: 36px !important;
padding: 4px !important;
}
.checkout-product td.quantity .btn {
border-radius: 0 !important;
height: 36px !important;
min-width: 36px !important;
padding: 4px 8px !important;
}
.checkout-product td.quantity .btn-danger {
border-left: 1px solid #E8E6E3 !important;
}
/* Product Image */
.checkout-product .img-thumbnail {
border-radius: 4px !important;
border: 1px solid #E8E6E3 !important;
padding: 2px !important;
}
/* ===== WELLS / INFO BOXES ===== */
.journal-checkout .well,
.checkout-content .well {
background: #FAF9F7 !important;
border: 1px solid #E8E6E3 !important;
border-radius: 8px !important;
padding: 24px !important;
margin: 16px 0 !important;
}
.journal-checkout .well p,
.checkout-content .well p {
font-family: Inter, sans-serif !important;
font-size: 14px !important;
font-weight: 400 !important;
color: #1F1E1C !important;
margin-bottom: 8px !important;
}
.journal-checkout .well b,
.journal-checkout .well strong,
.checkout-content .well b,
.checkout-content .well strong {
font-weight: 600 !important;
}
/* ===== LINKS ===== */
.journal-checkout a,
.checkout-content a {
color: #7A8B6A !important;
text-decoration: none !important;
}
.journal-checkout a:hover,
.checkout-content a:hover {
color: #f1c40f !important;
}
/* ===== PARAGRAPHS ===== */
.journal-checkout p,
.checkout-content p {
font-family: Inter, sans-serif !important;
font-size: 14px !important;
font-weight: 400 !important;
color: #1F1E1C !important;
line-height: 1.6 !important;
margin-bottom: 8px !important;
}
.journal-checkout strong,
.checkout-content strong {
font-weight: 600 !important;
}
/* Shipping description */
.xshippingpro-desc {
font-size: 12px !important;
color: #6B6965 !important;
font-style: italic !important;
margin-left: 24px !important;
}
/* #endregion */
/* #region LIGHTBOX / LIGHTGALLERY */
/* ============================================
Lightbox Gallery Overlay
============================================ */
/* Remove blue toolbar background */
.lg-toolbar {
background: transparent !important;
background-color: transparent !important;
}
/* Style close button */
.lg-close {
color: var(--color-light) !important;
opacity: 0.7 !important;
transition: opacity var(--transition-fast) !important;
}
.lg-close:hover {
opacity: 1 !important;
}
/* Style counter */
#lg-counter {
color: var(--color-light) !important;
font-family: var(--font-primary) !important;
font-size: var(--text-sm) !important;
opacity: 0.7 !important;
}
/* #endregion */
/* #region PNOTIFY NOTIFICATIONS */
/* ============================================
Cart Notification Popups - Design System 2.0
============================================ */
/* Main notification container */
.ui-pnotify {
width: 320px !important;
font-family: var(--font-primary) !important;
}
/* Reset all alert/bootstrap defaults */
.ui-pnotify .alert,
.ui-pnotify .alert-success,
.ui-pnotify-container,
.ui-pnotify-container.alert,
.ui-pnotify-container.alert-success {
background: var(--color-surface) !important;
background-color: var(--color-surface) !important;
background-image: none !important;
border: none !important;
border-radius: var(--radius-lg) !important;
box-shadow: var(--shadow-lg) !important;
padding: var(--space-lg) !important;
margin: 0 !important;
color: var(--color-dark) !important;
}
/* Gold accent bar on left */
.ui-pnotify-container.alert-success {
border-left: 4px solid var(--color-primary) !important;
}
/* Remove the default shadow class effect */
.ui-pnotify-shadow {
box-shadow: none !important;
}
/* Hide success icon - gold border already indicates success */
.ui-pnotify-icon {
display: none !important;
}
/* Title (product name) */
h4.ui-pnotify-title {
font-family: var(--font-secondary) !important;
font-size: var(--text-md) !important;
font-weight: var(--weight-bold) !important;
color: var(--color-dark) !important;
margin: 0 0 var(--space-md) 0 !important;
padding: 0 !important;
line-height: var(--leading-tight) !important;
background: none !important;
border: none !important;
}
/* Text content area */
.ui-pnotify-text {
font-family: var(--font-primary) !important;
font-size: 13px !important;
color: var(--color-grey-400) !important;
line-height: var(--leading-normal) !important;
clear: both !important;
}
/* Product image */
.ui-pnotify-text > a:first-child {
float: left !important;
margin-right: var(--space-md) !important;
margin-bottom: var(--space-sm) !important;
}
.ui-pnotify-text img {
width: 50px !important;
height: 50px !important;
object-fit: cover !important;
border-radius: var(--radius-md) !important;
border: 1px solid var(--color-grey-200) !important;
}
/* Text links in notification */
.ui-pnotify-text a:not(.button):not(.notification-cart):not(.notification-checkout) {
color: var(--color-brown) !important;
text-decoration: none !important;
font-weight: var(--weight-semibold) !important;
}
.ui-pnotify-text a:not(.button):not(.notification-cart):not(.notification-checkout):hover {
color: var(--color-brown-alt) !important;
text-decoration: underline !important;
}
/* Notification buttons container */
.notification-buttons {
display: flex !important;
gap: var(--space-sm) !important;
margin-top: var(--space-md) !important;
clear: both !important;
}
/* Base button styles */
.notification-buttons a.button,
a.notification-cart,
a.notification-checkout {
display: inline-block !important;
padding: var(--space-sm) var(--space-md) !important;
border-radius: var(--radius-pill) !important;
font-family: var(--font-primary) !important;
font-size: var(--text-xs) !important;
font-weight: var(--weight-bold) !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
text-decoration: none !important;
text-align: center !important;
cursor: pointer !important;
transition: var(--transition-fast) !important;
line-height: var(--leading-tight) !important;
}
/* View Cart button - outlined */
a.notification-cart {
background: transparent !important;
color: var(--color-dark) !important;
border: 1px solid var(--color-grey-200) !important;
}
a.notification-cart:hover {
background: var(--color-grey-100) !important;
border-color: var(--color-grey-300) !important;
}
/* Checkout button - primary gold */
a.notification-checkout {
background: var(--color-primary) !important;
color: var(--color-dark) !important;
border: 1px solid var(--color-primary) !important;
}
a.notification-checkout:hover {
background: var(--color-primary-hover) !important;
border-color: var(--color-primary-hover) !important;
}
/* Close button */
.ui-pnotify-closer {
position: absolute !important;
top: var(--space-sm) !important;
right: var(--space-sm) !important;
opacity: 0.4 !important;
visibility: visible !important;
}
.ui-pnotify-closer:hover {
opacity: 1 !important;
}
.ui-pnotify-closer span {
font-size: var(--text-sm) !important;
color: var(--color-grey-400) !important;
}
/* Hide sticker/pin button */
.ui-pnotify-sticker {
display: none !important;
}
/* #endregion */
/* Extended Layout - Last Box Spacing */
.extended-layout #column-right .box:last-of-type,
.extended-layout #column-left .box:last-of-type {
margin-top: 50px;
}
/* ============================================
END OF STYLESHEET
============================================ */
