/* ============================================================ Reset ============================================================ */ /* -------------------------------- Primary style -------------------------------- */ *, *::after, *::before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /************************* /* ============================================================ Base ============================================================ */ General *************************/ body { font-family: 'Cabin', sans-serif; font-size: 16px; font-weight: normal; line-height: 19px; color: #333333; } img{ max-width: 100%; height:auto; transition: all 0.3s ease-out 0s; } a{ color: #333333; } a:hover, a:focus{ text-decoration:none; } a:focus{color:inherit} .floatleft {float:left} .floatright {float:right} .alignleft {float:left;margin-right:15px;margin-bottom: 15px} .alignright {float:right;margin-left:15px;margin-bottom: 15px} .aligncenter {display:block;margin:0 auto 15px} h1, h2, h3, h4, h5, h6 { font-family: 'Lora', serif; color:#333; letter-spacing:0.5px; } h1{ font-size:30px; line-height:34px; } h2{ font-size:22px; line-height:26px; } h3{ font-size:16px; line-height:19px; } h4{ font-size:13px; line-height:16px; } h5{ font-size:12px; line-height:14.5px; } a:hover, a:focus{ color:#777777; } ul { margin: 0px; padding: 0px; } li { list-style: none; } p { font-family: 'Cabin', sans-serif; font-size: 16px; font-weight: normal; font-style:normal; line-height: 19px; color: #333333; } p:not(:last-child){ margin-bottom: 20px; } hr{ margin-top:32px; margin-bottom:0; border-color:#666666; } *::-moz-selection { background: #4fc1f0; color: #fff; text-shadow: none; } ::-moz-selection { background: #4fc1f0; color: #fff; text-shadow: none; } ::selection { background: #4fc1f0; color: #fff; text-shadow: none; } /************************* /* ============================================================ Utility — colour and text ============================================================ */ Text color *************************/ .text-white { color: #fff ;} .text-theme { color: #4a90e2; } .text-white h1, .text-white p, .text-white h2{ color: #fff; } .text-italic p{ font-style:italic; font-family:'Lora',sans-serif; } /************************* Basic margin padding *************************/ .m-0 { margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; } .p-0 { padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; } .p-t{padding-left:0} .p-r{padding-right:0} /*colored background*/ .white-text { color: white; } /************************* /* ============================================================ Utility — spacing ============================================================ */ Margin top *************************/ .mt-0 { margin-top: 0 } .mt-02 { margin-top: 0.2rem } .mt-10 { margin-top: 10px } .mt-12 { margin-top: 12px } .mt-15 { margin-top: 15px } .mt-20 { margin-top: 20px } .mt-30 { margin-top: 30px } .mt-40 { margin-top: 40px } .mt-50 { margin-top: 50px } .mt-60 { margin-top: 60px } .mt-70 { margin-top: 70px } .mt-80 { margin-top: 80px } .mt-90 { margin-top: 90px } .mt-100 { margin-top: 100px } .mt-110 { margin-top: 110px } .mt-120 { margin-top: 120px } .mt-130 { margin-top: 130px } .mt-140 { margin-top: 140px } .mt-150 { margin-top: 150px } /************************* Margin right *************************/ .mr-0 { margin-right: 0px } .mr-10 { margin-right: 10px } .mr-15 { margin-right: 15px } .mr-20 { margin-right: 20px } .mr-30 { margin-right: 30px } .mr-40 { margin-right: 40px } .mr-50 { margin-right: 50px } .mr-60 { margin-right: 60px } .mr-70 { margin-right: 70px } .mr-80 { margin-right: 80px } .mr-90 { margin-right: 90px } .mr-100 { margin-right: 100px } .mr-110 { margin-right: 110px } .mr-120 { margin-right: 120px } .mr-130 { margin-right: 130px } .mr-140 { margin-right: 140px } .mr-150 { margin-right: 150px } /************************* Margin bottom *************************/ .mb-0 { margin-bottom: 0 } .mb-02 { margin-bottom: 0.2rem } .mb-10 { margin-bottom: 10px } .mb-15 { margin-bottom: 15px } .mb-20 { margin-bottom: 20px } .mb-30 { margin-bottom: 30px } .mb-40 { margin-bottom: 40px } .mb-50 { margin-bottom: 50px } .mb-60 { margin-bottom: 60px } .mb-65 { margin-bottom: 65px } .mb-70 { margin-bottom: 70px } .mb-80 { margin-bottom: 80px } .mb-85 { margin-bottom: 85px } .mb-90 { margin-bottom: 90px } .mb-100 { margin-bottom: 100px } .mb-110 { margin-bottom: 110px } .mb-120 { margin-bottom: 120px } .mb-130 { margin-bottom: 130px } .mb-140 { margin-bottom: 140px } .mb-150 { margin-bottom: 150px } /* WPBakery column padding reset */ .no-space.vc_column_container > .vc_column-inner { padding: 0; } /* Row-level helper: zero horizontal column-inner padding so row Gap fully controls spacing between columns. First/last keep outer padding so the row doesn't kiss the viewport edge. Vertical padding untouched. Mobile (<768px) inherits default 15px both sides so stacked cards aren't lopsided. */ @media (min-width: 768px) { .row-no-space > .vc_column_container > .vc_column-inner { padding-left: 0; padding-right: 0; } .row-no-space > .vc_column_container:first-child > .vc_column-inner { padding-left: 15px; } .row-no-space > .vc_column_container:last-child > .vc_column-inner { padding-right: 15px; } } /* Centred product column layout */ .center-products { display: flex; justify-content: center; } .center-products .wpb_column { display: flex; justify-content: center; } /* Constrained intro text block */ .intro-text { max-width: 800px; margin-left: auto; margin-right: auto; } /************************* Margin left *************************/ .ml-0 { margin-left: 0 } .ml-10 { margin-left: 10px } .ml-15 { margin-left: 15px } .ml-20 { margin-left: 20px } .ml-30 { margin-left: 30px } .ml-40 { margin-left: 40px } .ml-50 { margin-left: 50px } .ml-60 { margin-left: 60px } .ml-70 { margin-left: 70px } .ml-80 { margin-left: 80px } .ml-90 { margin-left: 90px } .ml-100 { margin-left: 100px } .ml-110 { margin-left: 110px } .ml-120 { margin-left: 120px } .ml-130 { margin-left: 130px } .ml-140 { margin-left: 140px } .ml-150 { margin-left: 150px } /************************* Padding top *************************/ .pt-0 { padding-top: 0 } .pt- { padding-top: 10px } .pt-10 { padding-top: 10px } .pt-15 { padding-top: 15px } .pt-20 { padding-top: 20px } .pt-30 { padding-top: 30px } .pt-35 { padding-top: 35px } .pt-40 { padding-top: 40px } .pt-50 { padding-top: 50px } .pt-60 { padding-top: 60px } .pt-70 { padding-top: 70px } .pt-80 { padding-top: 80px } .pt-90 { padding-top: 90px } .pt-100 { padding-top: 100px } .pt-110 { padding-top: 110px } .pt-120 { padding-top: 120px } .pt-130 { padding-top: 130px } .pt-140 { padding-top: 140px } .pt-150 { padding-top: 150px } .pt-320 { padding-top: 320px } /************************* Padding right *************************/ .pr-0 { padding-right: 0 } .pr-5 { padding-right: 5px } .pr-10 { padding-right: 10px } .pr-15 { padding-right: 15px } .pr-20 { padding-right: 20px } .pr-30 { padding-right: 30px } .pr-40 { padding-right: 40px } .pr-50 { padding-right: 50px } .pr-60 { padding-right: 60px } .pr-70 { padding-right: 70px } .pr-80 { padding-right: 80px } .pr-90 { padding-right: 90px } .pr-100 { padding-right: 100px } .pr-110 { padding-right: 110px } .pr-120 { padding-right: 120px } .pr-130 { padding-right: 130px } .pr-140 { padding-right: 140px } /************************* Padding bottom *************************/ .pb-0 { padding-bottom: 0 } .pb-10 { padding-bottom: 10px } .pb-15 { padding-bottom: 15px } .pb-20 { padding-bottom: 20px } .pb-30 { padding-bottom: 30px } .pb-40 { padding-bottom: 40px } .pb-50 { padding-bottom: 50px } .pb-60 { padding-bottom: 60px } .pb-65 { padding-bottom: 65px } .pb-70 { padding-bottom: 70px } .pb-80 { padding-bottom: 80px } .pb-85 { padding-bottom: 85px } .pb-90 { padding-bottom: 90px } .pb-100 { padding-bottom: 100px } .pb-110 { padding-bottom: 110px } .pb-120 { padding-bottom: 120px } .pb-130 { padding-bottom: 130px } .pb-140 { padding-bottom: 140px } .pb-150 { padding-bottom: 150px } .pb-210 { padding-bottom: 210px } .pb-200 { padding-bottom: 200px } .pb-250 { padding-bottom: 250px } /************************* Padding left *************************/ .pl-0 { padding-left: 0 } .pl-5{ padding-left: 5px } .pl-10 { padding-left: 10px } .pl-15 { padding-left: 15px } .pl-20 { padding-left: 20px } .pl-30 { padding-left: 30px } .pl-40 { padding-left: 40px } .pl-50 { padding-left: 50px } .pl-60 { padding-left: 60px } .pl-70 { padding-left: 70px } .pl-80 { padding-left: 80px } .pl-90 { padding-left: 90px } .pl-100 { padding-left: 100px } .pl-110 { padding-left: 110px } .pl-120 { padding-left: 120px } .pl-130 { padding-left: 130px } .pl-140 { padding-left: 140px } .pl-150 { padding-left: 150px } /*************************** Page section padding ****************************/ .ptb-0 { padding: 0 } .ptb-10 { padding: 10px 0 } .ptb-15 { padding: 15px 0 } .ptb-20 { padding: 20px 0 } .ptb-30 { padding: 30px 0 } .ptb-40 { padding: 40px 0 } .ptb-50 { padding: 50px 0 } .ptb-55 { padding: 55px 0 } .ptb-60 { padding: 60px 0 } .ptb-70 { padding: 70px 0 } .ptb-80 { padding: 80px 0 } .ptb-90 { padding: 90px 0 } .ptb-100 { padding: 100px 0 } .ptb-110 { padding: 110px 0 } .ptb-120 { padding: 120px 0 } .ptb-130 { padding: 130px 0 } .ptb-140 { padding: 140px 0 } .ptb-150 { padding: 150px 0 } .ptb-160 { padding: 160px 0 } .ptb-170 { padding: 170px 0 } .ptb-180 { padding: 180px 0 } .ptb-190 { padding: 190px 0 } .ptb-200 { padding: 200px 0 } .ptb-210 { padding: 210px 0 } .ptb-220 { padding: 220px 0 } .ptb-250 { padding: 250px 0 } .ptb-280 { padding: 280px 0 } /*************************** Page section margin ****************************/ .mtb-0 { margin: 0 } .mtb-10 { margin: 10px 0 } .mtb-15 { margin: 15px 0 } .mtb-20 { margin: 20px 0 } .mtb-30 { margin: 30px 0 } .mtb-40 { margin: 40px 0 } .mtb-50 { margin: 50px 0 } .mtb-60 { margin: 60px 0 } .mtb-70 { margin: 70px 0 } .mtb-80 { margin: 80px 0 } .mtb-90 { margin: 90px 0 } .mtb-100 { margin: 100px 0 } .mtb-110 { margin: 110px 0 } .mtb-120 { margin: 120px 0 } .mtb-130 { margin: 130px 0 } .mtb-140 { margin: 140px 0 } .mtb-150 { margin: 150px 0; } /************************* Extra class *************************/ #page-wrapper{ position:relative; } /* header-top-area */ /* ============================================================ Header ============================================================ */ .header-top-area .container{ height:100px; } .header-top-area .container .row{ padding-top:10px; padding-bottom:10px; } .header-top-area #logo-row,.header-top-area #nav-row{ height:50%; } .header-top-area #placeholder-row{ background-color:#eee; height:50%; } .header-top-area #header-line{ padding:0; position:relative; top:-1px; } .header-top-area #header-line .header-line-inner{ height:1px; min-height:1px; background-color:#333333; } .hide-header-line .header-top-area #header-line{ display:none; } .header-menu .scroll-header .main-menu.transparent-menu ul li a {color:#000;} .scroll-header { animation: 300ms ease-in-out 0s normal none 1 running fadeInDown; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2); left: 0; position: fixed; top: 0; width: 100%; z-index: 2; } .header-logo { position: absolute; z-index: 2; padding-left:30px; } .header-icons-col{ text-align:right; } .header-icons{ display:flex; flex-direction:row; flex-wrap:wrap; justify-content:flex-end; align-content:center; } .header-icons > li{ margin-left:5px; margin-right:5px; padding:1px; } .header-icons > li > a{ display:flex; } .header-icons > li img{ width:14px; height:14px; } .header-icons > li a.cart-link{ position:relative; } li#shop-at-our-header { font-family: 'Lora'; font-weight: 600; line-height: 20px; } .header-icons #npp-enursery-header a{ background-color:#adc087; border-radius:2px; font-size:12px; font-weight:bold; font-family:'Lora'; color:#fff; line-height:22px; text-transform:uppercase; padding-left:10px; padding-right:10px; } .header-icons #npp-enursery-header a:hover{ background-color:#333; } .header-icons #npp-enursery-header img{ width:12px; height:16px; vertical-align: text-bottom; margin-right:2px; } /* ---------- Header icon buttons (enursery-btn, sale-btn) ---------- */ ul.header-icons { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; } ul.header-icons li.enursery-btn a, ul.header-icons li.sale-btn a { display: inline-block; font-family: 'Lora', serif; font-size: 12px; font-weight: 700; text-transform: uppercase; line-height: 22px; border-radius: 2px; color: #fff; text-decoration: none; padding: 4px 12px; transition: background-color .25s ease; } ul.header-icons li.enursery-btn a { background: #adc087; padding-left: 34px; position: relative; } ul.header-icons li.enursery-btn a::before { content: ''; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; background: url('/wp-content/uploads/2020/06/shopping-bag@2x.png') no-repeat center / 16px 16px; } ul.header-icons li.enursery-btn a:hover { background: #9ab476; } ul.header-icons li.sale-btn a { background: #f15648; } ul.header-icons li.sale-btn a:hover { background: #d34234; } li.shop-label { font-family: 'Lora'; font-weight: 600; } @media (min-width: 768px) { li.shop-label, li.enursery-btn, li.sale-btn { order: 0; } li.social-icons { order: 1; } #npp-cart { order: 2; } #mobile-menu-icon { order: 3; } } @media (max-width: 767.98px) { li.shop-label, li.enursery-btn, li.sale-btn { display: none; } li.social-icons { order: 0; } #npp-cart { order: 2; } #mobile-menu-icon { order: 3; } ul.header-icons { gap: 2px; } } .header-top-area #npp-cart .widget_shopping_cart { background-color: #fff; color: #323232; position: absolute; top: 100%; right: 0; width: 320px; z-index: 9999; margin-top: 5px; opacity: 0; visibility: hidden; border-radius: 0; border: 10px solid #ffffff; -ms-box-shadow: 0 5px 25px rgba(0, 0, 0, 0.12); box-shadow: 0 5px 25px rgba(0, 0, 0, 0.12); transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; } .header-top-area #npp-cart .widget_shopping_cart .quantity, .header-top-area #npp-cart .widget_shopping_cart .tc-av-price{ display:none; } .header-top-area #npp-cart:hover .widget_shopping_cart { margin-top: 0px; opacity: 1; visibility: visible; overflow-y: auto; } .header-top-area .cart-link .count { font-style: normal; font-size: 11px; position: absolute; top: 0; right: 50%; width: 16px; height: 16px; line-height: 16px; text-align: center; margin-top: -12px; margin-right: -17px; color: #ffffff; background: #333; border-radius: 50%; } #npp-cart .woocommerce ul.product_list_widget li{ text-align:left; } #npp-cart .woocommerce ul.product_list_widget li a:not(.remove_from_cart_button){ text-align:left; padding-left: 0; } #npp-cart .woocommerce ul.product_list_widget li dl { margin: 0; padding-left: 0; border-left: none; } #npp-cart .woocommerce ul.product_list_widget li img { width: 48px; } #npp-cart .woocommerce ul.product_list_widget li:not(:first-child){ padding-top:6px; border-top:1px solid #f2f2f2; } #search-wrapper{ text-align:right; } .search-form input{ display:inline-block; } .search-form .search-field{ border:1px solid #666666; border-radius:30px; padding:2px 10px; width:150px; } .search-form .search-submit{ width:19px; height:19px; border:none; position:relative; top:3px; margin-left:8px; margin-right:8px; } /* main-menu-area-start */ /* ============================================================ Navigation ============================================================ */ .main-menu ul{ text-align:center; } .main-menu ul li { display: inline-block; position: relative; } .main-menu ul li>a { display: block; font-family: 'Lora', serif; font-size: 13px; font-weight: bold; line-height: 16px; letter-spacing: 0.03em; padding:0 5px 20px; text-transform: uppercase; transition: all 0.2s ease 0s; } .main-menu ul li:hover > a, .main-menu > ul > li.menu-item.menu-item-has-children:hover > a:after, .main-menu ul li.active > a{ color:#666666; } .main-menu > ul > li.menu-item.menu-item-has-children > a:after{ font-family:'Font Awesome 5 Free'; content: '\f078'; font-size: 13px; color: #666666; margin-left: 6px; } .logo { margin-top: 39px; } #mobile-menu-icon{ text-align:right; cursor:pointer; position: relative; top: 3px; } #mobile-menu-icon i{ position: relative; color: #666; } /* sub-menu */ .main-menu ul li .sub-menu { background: #ffffff none repeat scroll 0 0; left: 0; opacity: 0; position: absolute; top: 100%; transition: all 0.3s ease 0s; visibility: hidden; width: 220px; z-index: 9; text-align:left; } .main-menu ul li .sub-menu:before{ content: ''; height: 14px; width: 14px; position: absolute; left: 75.5px; background-color: #ffffff; top: -7px; transform: rotate(45deg); border-bottom: 1px solid #666; border-right: 1px solid #666; } .main-menu ul li:hover .sub-menu{ opacity:1;top:100%; visibility:visible; } .main-menu ul li .sub-menu:not(.category-menu) li{ display:block; } .main-menu ul li .sub-menu:not(.category-menu) li a { color: #666666; font-family: Cabin; font-size: 14px; font-weight: 400; margin: 0; padding: 13px 20px; text-transform: capitalize; } .main-menu ul li .sub-menu.category-menu{ width:897px; height:184px; top:36px; border-top:1px solid #666666; -ms-box-shadow: 0px 4px 0px #05050533; box-shadow: 0px 4px 0px #05050533; } .main-menu ul li .sub-menu.category-menu li{ display:inline-block; width:150px; margin-top:20px; margin-bottom:20px; vertical-align:top; } .main-menu ul li .sub-menu.category-menu li.menu-category-desc{ font-family:'Lora',serif; font-size:13px; font-style:italic; line-height:16px; padding-left:20px; padding-right:20px; width:165px; } .main-menu ul li .sub-menu.category-menu li.menu-category-separator{ width: 1px; height: 84%; background-color: #666666; position: relative; top: 15px; margin-top: 0; margin-bottom: 0; } .main-menu ul li .sub-menu.category-menu li.menu-article{ padding-left:20px; } .main-menu ul li .sub-menu.category-menu li.menu-article .menu-article-title{ font-family:'Lora',serif; font-size:13px; font-weight:bold; line-height:16px; text-align:center; } /* general-layout */ /* ============================================================ Layout ============================================================ */ #banner-image{ background-size:cover; background-repeat:no-repeat; background-position:center center; } #post-content,#sidebar-content,#category-content{ padding-top:40px; padding-bottom:40px; } .single-product #post-content, #post-content.no-banner{ padding-top:120px; } .home #post-content{ padding-top:0; } #post-content .page-title, #category-content .category-title, .woocommerce-products-header .category-title{ font-size:30px; font-weight:bold; line-height:34px; text-transform:uppercase; text-align:center; padding-bottom:20px; } #post-content .page-title{ margin-bottom:30px; border-bottom:1px solid #333333; } #post-content .wpb_text_column.wpb_content_element a{ text-decoration:underline; color:#777777; } .category-intro-row{ margin-bottom:15px; } .category-intro-row-inner{ padding-top:30px; padding-bottom:30px; max-width:760px; margin:0 auto; text-align:center; padding-left: 6px; padding-right: 6px; } .post-intro,.category-intro{ text-align:center; } #post-content .page-intro,.post-intro,.category-intro{ font-family:'Lora',sans-serif; font-style:italic; } #post-content .page-intro{ font-size:22px; line-height:26px; padding-bottom:30px; } #article-single-head .post-intro{ font-size:19px; line-height:22px; } #post-content .page-intro{ margin-bottom:30px; border-bottom:1px solid #333333; } #post-content .heading-underline{ margin-top:6px; margin-bottom:15px; min-height:2px; max-width:80px; background-color:#bf1e2d; } #post-content .location-field:not(:first-child){ margin-top:60px; } .article-single-meta.text-light .article-single-category, .article-single-meta.text-light .article-single-tags, .article-single-meta.text-light .post-title, .article-single-meta.text-light .post-intro, .category-intro.text-light{ color:#ffffff; } .post-title > a { color: #383838; transition:.3s; } .post-title > a:hover{color:#bf1e2d;} .post-title { font-size: 30px; font-weight:bold; margin-bottom:15px; margin-top:15px; } #nav-mobile{ width:100%; padding:0 5px 20px; cursor:pointer; z-index: 10; position: absolute; background-color: #fff; text-align: center; border-top:1px solid #666666; border-bottom:1px solid #666666; } #nav-mobile .navigation li a{ display: block; font-family: 'Lora', serif; font-size: 16px; font-weight: bold; line-height: 19px; padding: 15px 5px; text-transform: uppercase; transition: all 0.3s ease 0s; overflow: hidden; } #nav-mobile .navigation li:not(:last-child) a:after{ content:''; display:block; text-align:center; height:1px; width: 120px; border-bottom:1px solid #666666; margin:0 auto; position:relative; top:10px; } #nav-mobile .search-form{ position: relative; left: 16px; } #nav-mobile .search-form .search-field{ width:240px; } /* ============================================================ Footer ============================================================ */ #footer{ position:relative; } .copyright{ text-align:center; font-size: 12px; margin-bottom:0; } #footer-subscribe{ text-align:center; } #footer-subscribe div.subscribe-text,#footer-subscribe div.wpcf7{ display:inline-block; } #footer-subscribe .subscribe-text{ font-family: 'Lora', serif; font-size:15px; font-weight:bold; margin-right:12px; } #footer-subscribe input.wpcf7-email{ border:none; font-size:14px; } input.wpcf7-email, input.wpcf7-text, textarea{ padding:5px 10px; } input.wpcf7-submit{ font-family: 'Lora', serif; font-weight:bold; font-size:12px; padding:5px 15px; letter-spacing:0.05em; border:none; color:#fff; background-color:#666666; } #post-content input.wpcf7-email, #post-content input.wpcf7-text, #post-content textarea{ width:90%; max-width:470px; border:1px solid #666666; font-size:14px; } #post-content .wpcf7 label{ font-family:'Lora',sans-serif; font-weight:bold; font-size:16px; text-transform:uppercase; margin-bottom:10px; } /* PAGE CONTENT */ /* ============================================================ Page content / articles ============================================================ */ .shop-now-block{ background-size:cover; background-repeat:no-repeat; background-position:center center; } .shop-now-block.sidebar-layout{ min-height:270px; height:auto; padding:20px; } .shop-now-block.content-layout{ max-width:800px; margin:0 auto; padding:20px; margin-top:32px; } .page-template-page-enursery .shop-now-block.content-layout{ margin-top:0; } .shop-now-block.content-layout.bottom-hr{ margin-bottom:32px; } .shop-now-content{ display:flex; justify-content:space-between; } .shop-now-block.sidebar-layout .shop-now-content{ flex-direction:column; } .shop-now-block.content-layout .shop-now-content h3{ margin: auto 0; } .shop-now-content h3{ font-size:38px; font-weight:bold; line-height:46px; color:#ffffff; text-align:left; text-transform:uppercase; } .shop-now-content h3 span{ display:block; font-size:28px; font-weight:normal; font-style:italic; text-transform:none; line-height:34px; color:#ffffff; text-align:left; } .shop-now-block.content-layout h3{ padding-left:10px; } .shop-now-block.content-layout .shop-now-link{ text-align:right; } .shop-now-block.sidebar-layout .shop-now-link{ margin-top:56px; text-align:left; } .shop-now-block.sidebar-layout h3{ max-width:230px; } .shop-now-link img{ max-width:100px; height:auto; } .subscribe-widget{ padding:20px 20px 15px; background-color:#edeced; } #post-content .subscribe-widget-title{ font-family:'Lora',sans-serif; font-weight:bold; text-transform:uppercase; margin-bottom:5px; } #post-content .subscribe-widget-text{ font-family:'Lora',sans-serif; font-style:italic; margin-bottom:15px; font-size:15px; } #post-content .subscribe-widget .wpcf7-email{ border:none; width:100%; } #post-content .subscribe-widget .wpcf7-submit{ margin-top:5px; float:right; } #post-content .subscribe-widget .wpcf7-submit:after{ clear:both; } .subscribe-widget--home{ display:grid; grid-template-columns:auto minmax(540px, 1fr) minmax(360px, 400px); align-items:center; column-gap:24px; padding:45px 0 48px; background-color:#ffffff; border-bottom:1px solid #333333; box-sizing:border-box; } .subscribe-widget--no-hairline{ border-bottom:none; } .subscribe-widget--home.subscribe-widget--no-title{ grid-template-columns:minmax(520px, 1fr) minmax(360px, 470px); } #post-content .subscribe-widget--home .subscribe-widget-title{ margin-bottom:0; font-size:20px; line-height:1; } #post-content .subscribe-widget--home .subscribe-widget-text{ margin-bottom:0; font-size:19px; line-height:1.35; } .subscribe-widget--home .wpcf7{ width:100%; align-self:center; } .subscribe-widget--home .wpcf7 form{ display:flex; flex-direction:column; justify-content:center; margin:0; } .subscribe-widget--home .wpcf7 form > p{ display:grid; grid-template-columns:minmax(0, 1fr) 160px; gap:6px; align-items:center; margin:0; } .subscribe-widget--home .wpcf7-form-control-wrap{ display:block; } #post-content .subscribe-widget--home .wpcf7-email{ height:40px; margin:0; padding:0 18px; border:1px solid #c9c9c9; } #post-content .subscribe-widget--home .wpcf7-submit{ width:100%; height:40px; margin:0; float:none; background-color:#666666; } .subscribe-widget--home .wpcf7-spinner, .subscribe-widget--home .wpcf7-response-output{ grid-column:1 / -1; } /* Collapse idle spinner — prevents phantom second grid row below email/button */ .subscribe-widget--home .wpcf7-spinner{ display:none; } .subscribe-widget--home .wpcf7-form.submitting .wpcf7-spinner{ display:inline-block; } .articles-like-block,.articles-latest-block,.community-block{ margin-top:50px; } .articles-latest-block .article-item:hover .article-category{ background-color:#333333; } .articles-latest-block .article-item:hover .article-link a{ color:#333333; } .community-block .community-intro{ margin-bottom:20px; } .full-width-title { font-family:'Lora',serif; font-weight:bold; font-size:22px; line-height:26px; text-align:center; text-transform:uppercase; overflow: hidden; text-align: center; margin-bottom:30px; } .full-width-title:before, .full-width-title:after { background-color: #666666; content: ""; display: inline-block; height: 1px; position: relative; vertical-align: middle; width: 50%; } .full-width-title:before { right: 0.5em; margin-left: -50%; } .full-width-title:after { left: 0.5em; margin-right: -50%; } /* Mobile: drop the side-lines — hide the line before the text, place a single centred line below the text instead. */ @media (max-width: 767px) { /* Drop the heading's own bottom margin on mobile — the stacked-element spacing already provides the gap, so 30px here double-spaces it. */ .full-width-title { margin-bottom: 0; } .full-width-title:before { display: none; } .full-width-title:after { display: block; width: 100%; margin: 12px auto 0; left: auto; } } /* E-nursery: guard against horizontal page scroll on mobile. A bottom vc_column-gap-30 row uses margin:0 -30px that nothing clips, pushing the page ~15px past the viewport. overflow-x:clip contains it without creating a scroll container (vertical scrolling and fixed bars are unaffected). */ #post-content.enursery { overflow-x: clip; } /* E-nursery — section spacing migrated out of WPBakery per-row DB CSS (vc_custom_*) so the page-builder data stays vanilla. Hooks (el_id/el_class) live in the page content. The old margin-right:0 / padding-left:0 "gutter hacks" are simply dropped — rows now use the default even vc_row-fluid gutters. The hero keeps its contained, zero-column-padding look. */ #post-content.enursery #header-text-slider { margin-left: 0 !important; margin-right: 0 !important; } #post-content.enursery #header-text-slider > .wpb_column > .vc_column-inner { padding: 0 !important; } #post-content.enursery .enursery-head { margin-top: 50px; } #post-content.enursery .enursery-section-mb { margin-bottom: 50px; } #post-content.enursery #plantbox { margin-bottom: 60px; } #post-content.enursery #plantbox > .wpb_column > .vc_column-inner { padding-top: 20px; } #post-content.enursery .enursery-subtitle { padding-bottom: 30px; } #post-content.enursery .enursery-faq-intro { padding: 20px 0; } #article-single-head{ border-top:3px solid #ffffff; background-color:#f7e65c; padding:15px 10px 20px; } .article-single-meta{ max-width:760px; margin:0 auto; text-align:center; } .article-single-category,.article-single-tags{ display:inline-block; font-family:'Lora',serif; font-weight:bold; font-size:12px; text-transform:uppercase; } .article-photo-block{ margin-bottom:30px; } .article-text-block{ margin-bottom:40px; } .article-text-block.enlarged-quote p{ font-family:'Lora',serif; font-style:italic; font-size:22px; line-height:26px; } /* Article Text Block CTA — lead-in text + outlined button link (npp_article_text). 20px gap from the article body (15px mobile); italic Lora lead-in, minimal rounded Cabin button. */ .article-cta{ margin-top:20px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:16px; text-align:center; } .article-cta__text{ font-family:'Lora',serif; font-style:italic; font-size:1rem; line-height:1.4; color:inherit; } .article-cta__btn{ display:inline-block; font-family:'Cabin',sans-serif; font-size:0.85rem; letter-spacing:0.04em; padding:9px 22px; border:1px solid currentColor; border-radius:50px; color:inherit; text-decoration:none; white-space:nowrap; transition:background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .article-cta__btn:hover, .article-cta__btn:focus{ background:#adc087; border-color:#adc087; color:#333; } @media (max-width: 767px){ .article-cta{ margin-top:15px; gap:12px; } .article-cta__text{ font-size:0.95rem; } .article-cta__btn{ font-size:0.8rem; padding:8px 18px; } } .article-photo-block div[class^="col-"]{ text-align:center; } .article-photo-block .caption, .article-photo-block .photographer{ text-align:left; } .article-photo-block.triple_b-layout .col-right img:last-child{ margin-top:22px; } .article-photo-block.triple_a-layout .col-right img:last-child{ margin-top:20px; } .article-item{ margin-bottom:40px; } .article-category{ text-transform:uppercase; font-weight:bold; text-align:center; background-color:#666666; padding:5px 0 5px; letter-spacing:0.5px; } .article-category a{ color:#ffffff; } .article-image{ margin-top:2px; margin-bottom:12px; } .article-image a{ display:block; } .article-image img{ max-width:100%; height:auto; } .article-title{ font-weight:bold; text-align:center; } /* ── ARTICLE CAROUSEL — TO REPLACE WITH NEW SLIDER ───────────────────────── All rules in this section will be removed when the carousel widget is rebuilt. Search: TO REPLACE SLIDER ───────────────────────────────────────────────────────────────────────── */ .article-carousel-title{ font-size:30px; line-height:34px; text-align:left; padding-top:40px; } .article-link{ border-top:1px solid #666666; border-bottom:1px solid #666666; padding:2px 10px; text-align:right; } /* Border moves to the outer row so it spans full width and aligns with the category block height. article-link border is suppressed here. */ .article-footer { border-top: 1px solid #666666; border-bottom: 1px solid #666666; display: flex; align-items: stretch; } .article-footer > [class*="col-"] { padding-left: 0; padding-right: 0; } .article-footer .article-category { margin-bottom: 0; display: flex; align-items: center; justify-content: center; height: 100%; } .article-footer .article-link { border: none; display: flex; align-items: center; justify-content: flex-end; height: 100%; } .articles-like-block .article-link{ margin-top:15px; } .article-excerpt{ margin-top:8px; margin-bottom:30px; text-align:center; } .articles-latest-block .article-excerpt{ min-height:40px; max-width:500px; margin-left:auto; margin-right:auto; } /* Thumb fills the (now wider, ~600px) 2-up column. The global .article-image img is only max-width:100%, so the 570px article-large crop stopped short of the column after the container widened to 1280 — force width:100% here. The ~5% upscale (570->~600) is imperceptible, so no thumbnail regen is needed. */ .articles-latest-block .article-image img{ width:100%; } .article-carousel{ height:300px; margin-bottom:3px; } .article-carousel .article-item{ background-color:#f7e65c; padding:20px; margin-bottom:0; height:300px; } .article-carousel-excerpt{ margin-top:30px; margin-bottom:40px; } .article-link a{ font-family:'Lora',serif; font-size:12px; font-weight:bold; text-transform:uppercase; color:#666666; } .article-carousel-link a{ font-family:'Lora',serif; font-size:12px; font-weight:bold; text-transform:uppercase; color:#333333; } .article-carousel .article-item.text-light .article-carousel-title, .article-carousel .article-item.text-light .article-carousel-excerpt p, .article-carousel .article-item.text-light .article-carousel-link a{ color:#ffffff; } .npp-hero-carousel{ height:auto; margin-bottom:0; } /* Owl's own stylesheet sets .owl-carousel{display:none} until its JS adds .owl-loaded. That leaves the hero blank during first paint even though the image has already downloaded. Render the first slide immediately and hide the rest until Owl takes over. */ .npp-hero-carousel .owl-carousel:not(.owl-loaded){ display:block; } .npp-hero-carousel .owl-carousel:not(.owl-loaded) .article-item{ display:none; } .npp-hero-carousel .owl-carousel:not(.owl-loaded) .article-item:first-child{ display:block; } .npp-hero-carousel .article-item{ position:relative; height:clamp(420px, 46vw, 552px); padding:0; overflow:hidden; background-color:#f4ccd6; } .npp-hero-slide-media{ position:absolute; inset:0; display:block; } .npp-hero-slide-media img{ width:100%; height:100%; object-fit:cover; display:block; } /* Box is bottom-anchored at the offset a 240px-tall centred box would have, so its bottom edge (LEARN MORE + dots row) stays fixed and any extra content growth extends upward. Keeps the dots calc below exact. */ .npp-hero-slide-content{ position:absolute; bottom:calc((100% - 240px) / 2); left:4%; z-index:2; display:flex; flex-direction:column; width:29%; min-height:240px; padding:clamp(22px, 2.4vw, 34px) clamp(22px, 2.4vw, 34px) clamp(16px, 1.8vw, 24px); background-color:#f4ccd6; color:#333333; } .npp-hero-carousel .article-carousel-title{ margin:0 0 12px; padding-top:0; color:#333333; font-size:2.2rem; line-height:1; font-weight:400; } .npp-hero-carousel .article-carousel-excerpt{ margin:0 0 20px; } .npp-hero-carousel .article-carousel-excerpt p{ margin:0; color:#666666; font-size:16px; line-height:1.35; } /* LEARN MORE — text link matching .npp-color-card__cta (Cabin uppercase + chevron), pinned to the box's bottom-left via margin-top:auto on the flex column. Dots share the bottom row, right corner. */ .npp-hero-carousel .article-carousel-link{ margin-top:auto; } .npp-hero-carousel .article-carousel-link a, .npp-hero-carousel .article-item.text-light .article-carousel-link a{ display:inline-flex; align-items:center; gap:8px; padding:0; border:0; font-family:'Cabin', sans-serif; font-size:0.8rem; font-weight:400; letter-spacing:0.08em; text-transform:uppercase; color:#333333; background-color:transparent; line-height:1; } .npp-hero-carousel .article-carousel-link a::after{ content:'\203A'; font-size:1.2rem; line-height:0.8; transition:transform 0.2s ease; } .npp-hero-carousel .article-carousel-link a:hover::after, .npp-hero-carousel .article-carousel-link a:focus::after{ transform:translateX(3px); } .npp-hero-carousel .article-item.text-light .article-carousel-title, .npp-hero-carousel .article-item.text-light .article-carousel-excerpt p, .npp-hero-carousel .article-item.text-light .article-carousel-link a{ color:#ffffff; } .npp-hero-carousel .article-carousel-link a:hover, .npp-hero-carousel .article-carousel-link a:focus{ color:#333333; text-decoration:none; } .npp-hero-carousel .article-item.text-light .article-carousel-link a:hover, .npp-hero-carousel .article-item.text-light .article-carousel-link a:focus{ color:#ffffff; } /* Slider dots sit inside the overlay box, bottom-right corner. The dots node lives at carousel level, so we give it the same left/width footprint as .npp-hero-slide-content and right-align the dots to land in its corner. The box is vertically centred with a fixed min-height, so its bottom edge is a predictable offset from the carousel bottom. */ .npp-hero-carousel .owl-theme .owl-nav.disabled + .owl-dots{ top:auto; left:4%; right:auto; /* -3px: dot spans carry 5px internal margin, so the glyphs sit ~3px higher than the LEARN MORE text's optical centre without it. */ bottom:calc((100% - 240px) / 2 + clamp(16px, 1.8vw, 24px) - 3px); width:29%; padding-right:clamp(22px, 2.4vw, 34px); margin:0; transform:none; text-align:right; /* The container spans the box's full width (to right-align the dots) and paints above the box — without this it swallows LEARN MORE's clicks. */ pointer-events:none; } .npp-hero-carousel .owl-theme .owl-dots .owl-dot{ pointer-events:auto; } /* Dot colour follows the active slide's box text colour — script.js toggles .is-light on .npp-hero-carousel when the active slide is .text-light. */ .npp-hero-carousel .owl-theme .owl-dots .owl-dot span{ border-color:#777777; } .npp-hero-carousel .owl-theme .owl-dots .owl-dot.active span, .npp-hero-carousel .owl-theme .owl-dots .owl-dot:hover span{ background:#777777; } .npp-hero-carousel.is-light .owl-theme .owl-dots .owl-dot span{ border-color:#ffffff; } .npp-hero-carousel.is-light .owl-theme .owl-dots .owl-dot.active span, .npp-hero-carousel.is-light .owl-theme .owl-dots .owl-dot:hover span{ background:#ffffff; } /* Hero — video background variant */ .npp-hero-carousel--video{ position:relative; overflow:hidden; } .npp-hero-carousel--video .npp-hero-bg-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; pointer-events:none; } .npp-hero-carousel--video > .owl-carousel{ position:relative; z-index:1; } .npp-hero-carousel--video .article-item{ background-color:transparent; } .npp-hero-carousel--video .owl-theme .owl-nav.disabled + .owl-dots{ z-index:2; } .community-intro p{ font-family:'Lora',serif; text-align:center; } .community-social{ text-align:center;; } .community-social li{ margin-left:5px; margin-right:5px; padding:1px; display:inline-block; } .community-social img{ width:22px; height:22px; } .no-gutter { margin-right: 0; margin-left: 0; } .no-gutter > [class*="col-"] { padding-right: 0; padding-left: 0; } .caption{ max-width:764px; margin-top:15px; padding-left:10px; padding-right:10px; font-family:'Lora',serif; font-size:13px; font-style:italic; } .caption p{ font-size:12px; } .photographer{ max-width:764px; margin-top:15px; padding-left:10px; padding-right:10px; font-family: 'Cabin',sans-serif; font-size:12px; } .photographer a{ text-decoration:underline; } .spacer{ height:40px; } .slider-image img{ min-width: 100%; height: auto; max-height: 552px; overflow: auto; object-fit:cover; } .wp-pagenavi{margin-top:40px;margin-bottom:60px;} .enursery-bg{background-color:#5a6d8c;} /* OWL CAROUSEL */ /* ============================================================ Owl Carousel ============================================================ */ .owl-theme .owl-nav { margin-top: 10px; text-align: center; -webkit-tap-highlight-color: transparent; } .owl-theme .owl-nav [class*='owl-'] { color: #FFF; font-size: 14px; margin: 5px; padding: 4px 7px; background: #D6D6D6; display: inline-block; cursor: pointer; border-radius: 3px; } .owl-theme .owl-nav [class*='owl-']:hover { background: #869791; color: #FFF; text-decoration: none; } .owl-theme .owl-nav .disabled { opacity: 0.5; cursor: default; } .owl-theme .owl-nav.disabled + .owl-dots { margin-top: 10px; position: absolute; top: 0; right: 20px; } .owl-theme .owl-dots { text-align: center; -webkit-tap-highlight-color: transparent; } .owl-theme .owl-dots .owl-dot { display: inline-block; } .owl-theme .owl-dots .owl-dot span { width: 8px; height: 8px; margin: 5px 5px; background: transparent; display: block; -webkit-backface-visibility: visible; backface-visibility: visible; transition: opacity 200ms ease; border-radius: 50%; border: 1px solid #ffffff; } .owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span { background: #ffffff; } /* E-Nursery — #video-mod responsive carousel heights Desktop falls back to global .article-carousel 300px. Specificity (1,1,0) matched below so these override the general .article-carousel media rules. */ @media (max-width: 1199px) { #video-mod .article-carousel, #video-mod .owl-carousel .owl-stage-outer { height: 190px; } } @media (max-width: 990px) { #video-mod .article-carousel, #video-mod .owl-carousel .owl-stage-outer { height: 160px; } } /* Hero row layout — slider/video at 16:9, right column flexes subscribe to fill */ #npp-slider { aspect-ratio: 16 / 9; width: 100%; overflow: hidden; } #npp-slider img, #npp-slider .slider-image, #npp-slider .slider-image img { width: 100%; height: 100%; object-fit: cover; display: block; } .vc_row-o-equal-height .vc_column-inner:has(> .wpb_wrapper > .article-carousel + .subscribe-widget), .vc_row-o-equal-height .vc_column-inner > .wpb_wrapper:has(> .article-carousel + .subscribe-widget) { display: flex; flex-direction: column; height: 100%; } .vc_row-o-equal-height .vc_column-inner > .wpb_wrapper > .article-carousel + .subscribe-widget { flex: 1 1 auto; min-height: 0; } /* ── END ARTICLE CAROUSEL ──────────────────────────────────────────────────── */ /** WOOCOMMERCE **/ /* ============================================================ WooCommerce ============================================================ */ .woocommerce .woocommerce-result-count, .woocommerce .woocommerce-ordering select{ display:none; } .woocommerce div.product p.stock{ text-align:center; } .bundled_item_cart_details p.stock{ display:none; } .woocommerce div.product .product_title{ font-weight:bold; text-align:left; margin-top:0.9375rem; margin-bottom:0.9375rem; } .woocommerce div.product .bundled_product_title.product_title{ margin-bottom:8px; } .woocommerce div.product .product_meta{ text-align:left; font-family:'Lora',serif; font-size:1.375rem; font-style:italic; } .woocommerce div.product p.price{ text-align:left; margin-top:1.875rem; } .woocommerce div.product .tc-extra-product-options.tc-show, .woocommerce div.product .tc-extra-product-options.tc-show-override{ display: flex; justify-content: flex-start; } .woocommerce div.product p.price, .woocommerce div.product span.price{ font-family:'Lora',serif; font-weight:bold; font-size:1rem; text-transform:uppercase; color:#999999; } .woocommerce div.product .entry-summary p.price{ margin-bottom:0.3125rem; } .woocommerce div.product .tm-extra-product-options{ margin-bottom:20px; padding-top:10px; } .woocommerce div.product .tm-extra-product-options .tm-extra-product-options-field{ float:none; } .woocommerce div.product .tm-extra-product-options .tm-epo-field-label.tm-left{ max-width:50%; } .woocommerce div.product .tm-extra-product-options-totals .tm-options-totals, .woocommerce div.product .tm-extra-product-options-totals dt.tm-final-totals{ display:none; } .woocommerce div.product .tm-extra-product-options-totals dd.tm-final-totals .price{ padding-left:15px; } .woocommerce div.product .tc-totals-form{ display: inline-block; width:64%; border-style:solid; border-width:1px 0 1px 0; border-color:#666666; } .woocommerce div.product .tc-totals-form .tm-epo-totals{ padding-top:7px; padding-bottom:8px; } td.product-name a.tm-cart-edit-options, .tm-cart-edit-options{ display:none; } .woocommerce div.product.product-type-simple form.cart{ padding-top: 7px; border-style: solid; border-width: 1px 0 1px 0; border-color: #666666; display: flex; justify-content: flex-start; align-items: center; padding-bottom: 5px; margin-top: 2em; } .woocommerce div.product.product-type-simple form.cart .quantity-label{ margin-right: 10px; } .woocommerce div.product.product-type-simple form.cart div.quantity { float: none; margin: 0 4px 0 0; flex-grow: 2; } .woocommerce div.product.product-type-simple form.cart div.quantity input{ border: 0; background-color: #eee; padding-top: 5px; padding-bottom: 5px; } .woocommerce div.product.product-type-simple form.cart div.quantity::after { content: "QTY OF BOXES"; display: inline-block; margin-right: 8px; font-weight: normal; font-size: 14px; color: #333; } .woocommerce div.product form.cart .button.single_add_to_cart_button{ float: none; display: inline-block; width: 35%; color:#ffffff; text-transform:uppercase; background-color:#666666; font-family:'Lora',serif; font-weight:bold; font-size:16px; border-radius:0; padding:10px 15px; position: relative; top: -1px; } .woocommerce div.product.product-type-bundle form.cart .bundle_button{ border-style: solid; border-width: 1px 0 1px 0; border-color: #666666; width: 100%; bottom: 0; left: 0; z-index: 1; background-color: #f7f6f7; -o-transition: position 500ms ease-out; transition: position 500ms ease-out; } .woocommerce div.product.product-type-bundle form.cart .tc-totals-form{ display:none!important; } .woocommerce div.product.product-type-bundle form.cart .bundle_button.bundle_button_fixed{ position: fixed; } .woocommerce div.product.product-type-bundle form.cart .bundle_button .bundle_button_inner{ max-width:962px; width:100%; margin:0 auto; display: flex; justify-content: flex-end; align-items: center; } .woocommerce div.product.product-type-bundle form.cart .bundle_button .bundle_button_inner .bundle_error{ flex-grow:2; } .woocommerce div.product.product-type-bundle form.cart .bundle_button .bundle_error .woocommerce-info{ margin-bottom: 0; padding-left:5px; padding-right:5px; } .woocommerce div.product.product-type-bundle form.cart .bundle_button .bundle_add_to_cart_button{ width:auto; margin:8px 5px; } .woocommerce div.product .woocommerce-product-details__short-description{ text-align:left; } .woocommerce div.product .woocommerce-product-details__short-description p{ font-family:'Lora',serif; font-size:1.125rem; font-style:italic; line-height:1.4; } .woocommerce div.product .npp-product-description{ margin-top:1.25rem; text-align:left; } /* ============================================================ NPP-BOX-SINGLE — Box (CPB) single product title + description Left-aligned redesign (mockup): uppercase title, italic-serif description, dark price with a muted "+ shipping & handling" suffix, and a divider rule before the "Please note" block. Scope: products of type cpb_custom_product_boxes only — standard plant products are unaffected beyond the shared left-align above. Order (title -> description -> price -> note) is set in PHP, see npp_box_reorder_summary() in functions.php. ============================================================ */ /* Visual order (mockup): title -> description -> price -> note. The CPB fork renders them as title, price, description, note; flex-order rearranges them without changing the markup. */ .woocommerce div.product-type-cpb_custom_product_boxes .summary.entry-summary{ display:flex; flex-direction:column; } .woocommerce div.product-type-cpb_custom_product_boxes .summary.entry-summary > .product_title{ order:1; } .woocommerce div.product-type-cpb_custom_product_boxes .summary.entry-summary > .npp-product-description{ order:2; } .woocommerce div.product-type-cpb_custom_product_boxes .summary.entry-summary > .price{ order:3; } .woocommerce div.product-type-cpb_custom_product_boxes .summary.entry-summary > .npp-product-note{ order:4; } .woocommerce div.product-type-cpb_custom_product_boxes .product_title{ text-transform:uppercase; margin-bottom:0.6rem; } /* Summary is a flex column, so adjacent margins don't collapse — keep one controlled gap (title margin-bottom) and zero the description's top margin. */ .woocommerce div.product-type-cpb_custom_product_boxes .npp-product-description{ margin-top:0; } .woocommerce div.product-type-cpb_custom_product_boxes .npp-product-description p{ font-family:var(--npp-font-serif); font-size:1.25rem; font-style:italic; line-height:1.45; margin:0 0 0.6rem; } .woocommerce div.product-type-cpb_custom_product_boxes .npp-product-description p:last-child{ margin-bottom:0; } .woocommerce div.product-type-cpb_custom_product_boxes p.price{ color:var(--npp-charcoal); font-size:1.5rem; margin-top:1.5rem; margin-bottom:0; } .woocommerce div.product-type-cpb_custom_product_boxes .npp-price-suffix{ font-family:var(--npp-font-sans); font-weight:400; font-size:0.85rem; text-transform:none; color:var(--npp-grey); } .woocommerce div.product-type-cpb_custom_product_boxes .npp-product-note{ margin-top:1.5rem; padding-top:1.5rem; border-top:1px solid var(--npp-line-soft); } .woocommerce div.product-type-cpb_custom_product_boxes .npp-product-note p{ font-family:var(--npp-font-sans); font-size:0.85rem; font-style:normal; line-height:1.55; color:var(--npp-grey); margin-bottom:0.75rem; } .woocommerce div.product-type-cpb_custom_product_boxes .npp-product-note p:last-child{ margin-bottom:0; } /* Gallery thumbnails: single scrollable row (no wrapping when >4 images). Scrollbar hidden — npp-gallery-thumbs.js adds chevron arrows at either end that fade out when there is nothing further to scroll. */ .woocommerce div.product div.images .flex-control-thumbs { margin-top:8px; display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .woocommerce div.product div.images .flex-control-thumbs::-webkit-scrollbar { display: none; } /* 4 thumbs + 3 gaps fill the feature-image width exactly */ .woocommerce div.product div.images .flex-control-thumbs li { flex: 0 0 calc(25% - 6px); float: none; } .npp-thumbs-wrap { position: relative; } .npp-thumbs-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 1px solid #e4e2dd; border-radius: 50%; background: #fff; color: #666; cursor: pointer; transition: opacity 0.15s ease, color 0.15s ease; } .npp-thumbs-arrow:hover { color: #3d3d3a; } .npp-thumbs-arrow:focus { outline: none; } .npp-thumbs-arrow:focus-visible { outline: 2px solid #2f6b3a; outline-offset: 2px; } /* Half on / half off the strip edge */ .npp-thumbs-arrow--prev { left: -15px; } .npp-thumbs-arrow--next { right: -15px; } .npp-thumbs-arrow.is-hidden { opacity: 0; pointer-events: none; } @media (max-width: 767px) { .woocommerce div.product div.images .flex-control-thumbs { gap: 6px; } .woocommerce div.product div.images .flex-control-thumbs li { flex-basis: calc(25% - 4.5px); } } .woocommerce div.product div.images .flex-control-thumbs li img{ display: block; padding: 0; } /* Plant box builder + product video */ div#cpb_product_boxes_custom .cpb-feature-image { padding: 0 0 60px; } section.mwpfv_feature_video.slider { margin-bottom: 60px; } @media only screen and (min-width: 768px) { button.cpb_filters_button.button.alt { display: none; } } .vjs-poster { display: inline-block; vertical-align: middle; background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; background-color: #fff; cursor: pointer; margin: 0; padding: 0; position: absolute; top: 0; right: 0; bottom: 0; left: 0; height: 100%; } .video-js .vjs-big-play-button { width: 2em; top: 40%; left: 45%; opacity: .7; border: 0.06666em solid #fff; background-color: #2B333F; background-color: rgba(43, 51, 63, 0.2); } .cpb-col-classic .cpb-col-filters { max-height: 95vh; overflow-x: hidden; overflow-y: auto; position: sticky; top: 0; float: none; scrollbar-width: thin; scrollbar-color: black transparent; } .cpb-col-classic .cpb-col-filters::-webkit-scrollbar { width: 8px; } .cpb-col-classic .cpb-col-filters::-webkit-scrollbar-track { background: transparent; } .cpb-col-classic .cpb-col-filters::-webkit-scrollbar-thumb { background-color: black; border-radius: 10px; border: 2px solid transparent; background-clip: content-box; } span.cpb_category_filters_item, .cpb-boxes-filters li label { font-family: 'Cabin', sans-serif; } /* CPB box category filters — match the nursery (prdctfltr) button-chip look. CPB markup has no inner , so the