/* ========================================================================= BOB'S FLAGPOLES — Redesign stylesheet Loaded after Elementor (priority 9999) from functions.php so it wins the cascade cleanly. Scoped to WooCommerce category + product pages. Aligned to child-theme tokens: navy #0D1F3C, red #B22234, Barlow. ========================================================================= */ :root{ --bfp-navy:#0D1F3C; --bfp-navy2:#1a3a6b; --bfp-red:#B22234; --bfp-red-dk:#8f1a29; --bfp-brass:#C39A4E; --bfp-paper:#F7F8FA; --bfp-paper2:#eef1f6; --bfp-ink:#2D3748; --bfp-slate:#5a6a7e; --bfp-line:#EAEDF2; --bfp-head:"Barlow","Helvetica Neue",Arial,sans-serif; } /* ============================ CATEGORY / SHOP ARCHIVE ==================== */ .woocommerce .product-archive-title.entry-header{ background:var(--bfp-navy); border-bottom:3px solid var(--bfp-brass); border-radius:12px; padding:38px 30px; margin-bottom:34px; text-align:center; } .woocommerce .archive-title.page-title{ color:#fff !important; font-family:var(--bfp-head); font-weight:800; letter-spacing:-.015em; margin:0 0 10px; } .woocommerce .product-archive-title .archive-description p{ color:#c6d0de !important; max-width:70ch; margin:0 auto; font-size:16px; } .woocommerce .woocommerce-result-count{color:var(--bfp-slate); font-size:14px;} .woocommerce .woocommerce-ordering select.orderby{ border:1.5px solid var(--bfp-line); border-radius:6px; padding:9px 14px; color:var(--bfp-navy); font-weight:600; background:#fff; } /* product cards */ .woocommerce ul.products li.product.entry{ background:#fff !important; border:1px solid var(--bfp-line) !important; border-radius:12px !important; overflow:hidden; padding:0 !important; transition:transform .18s ease, box-shadow .18s ease; } .woocommerce ul.products li.product.entry:hover{ transform:translateY(-4px); box-shadow:0 16px 34px rgba(13,31,60,.13); } .woocommerce ul.products li.product .woocommerce-loop-image-link{display:block; position:relative; background:var(--bfp-paper2);} .woocommerce ul.products li.product img{border-radius:0 !important; margin:0 !important;} .woocommerce ul.products li.product span.onsale{ position:absolute; top:12px; left:12px; right:auto; margin:0; min-height:0; min-width:0; background:var(--bfp-red) !important; color:#fff !important; border:none !important; font-family:var(--bfp-head); font-weight:700; font-size:12px; letter-spacing:.04em; text-transform:uppercase; padding:5px 11px; border-radius:3px; line-height:1.4; } .woocommerce ul.products li.product .product-details{padding:18px !important;} .woocommerce ul.products li.product .woocommerce-loop-product__title{ font-family:var(--bfp-head); font-size:16px !important; font-weight:700; line-height:1.3; color:var(--bfp-navy) !important; padding:0 0 10px !important; } .woocommerce ul.products li.product .woocommerce-loop-product__title a{color:var(--bfp-navy) !important;} .woocommerce ul.products li.product .price{color:var(--bfp-ink) !important; font-family:var(--bfp-head); font-weight:800; font-size:19px;} .woocommerce ul.products li.product .price del{color:var(--bfp-slate) !important; font-weight:500; opacity:1;} .woocommerce ul.products li.product .price ins{color:var(--bfp-red) !important; text-decoration:none;} .woocommerce ul.products li.product .price .from, .woocommerce ul.products li.product .price small{color:var(--bfp-slate) !important; font-weight:500;} .woocommerce ul.products li.product a.button{ display:block !important; width:100%; text-align:center; background:var(--bfp-red) !important; color:#fff !important; border:none !important; border-radius:6px !important; font-family:var(--bfp-head); font-weight:700 !important; letter-spacing:.02em; padding:12px 16px !important; margin-top:4px !important; transition:background .15s ease, transform .15s ease; } .woocommerce ul.products li.product a.button:hover{background:var(--bfp-red-dk) !important; transform:translateY(-1px);} /* pagination */ .woocommerce nav.woocommerce-pagination ul{border:none; gap:8px; display:flex; justify-content:center;} .woocommerce nav.woocommerce-pagination ul li{border:none;} .woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span{ border:1.5px solid var(--bfp-line) !important; border-radius:8px; padding:10px 16px !important; color:var(--bfp-navy); font-family:var(--bfp-head); font-weight:700; background:#fff; } .woocommerce nav.woocommerce-pagination ul li span.current, .woocommerce nav.woocommerce-pagination ul li a:hover{ background:var(--bfp-red) !important; color:#fff !important; border-color:var(--bfp-red) !important; } /* ============================ SINGLE PRODUCT ============================ */ .woocommerce div.product .product_title, .elementor-widget-woocommerce-product-title h1{ color:var(--bfp-navy) !important; font-family:var(--bfp-head); font-weight:800; letter-spacing:-.01em; } .woocommerce div.product p.price, .woocommerce div.product .woocommerce-variation-price .price, .elementor-widget-woocommerce-product-price .price{ color:var(--bfp-ink) !important; font-family:var(--bfp-head); font-weight:800; } .woocommerce div.product p.price del, .woocommerce div.product .woocommerce-variation-price del{color:var(--bfp-slate) !important; font-weight:500; opacity:1;} .woocommerce div.product p.price ins, .woocommerce div.product .woocommerce-variation-price ins{color:var(--bfp-red) !important; text-decoration:none;} /* variation controls (dropdowns until swatch plugin is added) */ .woocommerce div.product form.cart .variations select, .woocommerce div.product table.variations td select{ border:1.5px solid var(--bfp-line); border-radius:6px; padding:11px 14px; color:var(--bfp-navy); font-family:var(--bfp-head); font-weight:600; background:#fff; min-height:48px; } .woocommerce div.product table.variations th, .woocommerce div.product table.variations th label{color:var(--bfp-navy); font-family:var(--bfp-head); font-weight:700;} /* quantity + add to cart */ .woocommerce div.product .quantity input.qty{ border:1.5px solid var(--bfp-line); border-radius:6px; padding:10px; min-height:52px; font-weight:700; color:var(--bfp-navy); } .woocommerce div.product .single_add_to_cart_button.button, .elementor-widget-woocommerce-product-add-to-cart .single_add_to_cart_button{ background:var(--bfp-red) !important; color:#fff !important; border:none !important; border-radius:8px !important; font-family:var(--bfp-head); font-weight:800 !important; letter-spacing:.02em; padding:16px 32px !important; text-transform:none; box-shadow:0 8px 20px rgba(178,34,52,.24); transition:background .15s ease, transform .15s ease; } .woocommerce div.product .single_add_to_cart_button.button:hover{background:var(--bfp-red-dk) !important; transform:translateY(-2px);} /* tabs */ .woocommerce div.product .woocommerce-tabs ul.tabs li a{color:var(--bfp-navy); font-family:var(--bfp-head); font-weight:700;} .woocommerce div.product .woocommerce-tabs ul.tabs li.active{border-bottom-color:var(--bfp-red);} .woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:var(--bfp-red);} /* ============================ INFO BOXES =============================== */ .custom-boxes-wrapper{display:flex; flex-direction:column; gap:16px; margin:22px 0;} .custom-boxes-wrapper br{display:none;} .custom-top-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;} .custom-bottom-row{display:block;} .custom-boxes-wrapper .custom-box{ display:flex !important; gap:15px !important; align-items:flex-start !important; background:#fff !important; border:1px solid var(--bfp-line) !important; border-radius:12px !important; padding:22px 24px !important; position:relative !important; overflow:hidden !important; transition:transform .16s ease, box-shadow .16s ease; } .custom-boxes-wrapper .custom-box::before{ content:"" !important; position:absolute !important; left:0; top:0; bottom:0; width:4px !important; background:var(--bfp-brass) !important; } .custom-boxes-wrapper .custom-box:hover{transform:translateY(-3px); box-shadow:0 14px 30px rgba(13,31,60,.12);} /* icon badge — hides the emoji, shows a brass flag mark */ .custom-boxes-wrapper .custom-box-icon{ flex:0 0 auto !important; width:48px !important; height:48px !important; border-radius:50% !important; background:#f2ead9 !important; font-size:0 !important; color:transparent !important; display:flex !important; align-items:center; justify-content:center; background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23C39A4E'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%2022V3M4%204h13l-2%204%202%204H4'/%3E%3C/svg%3E") !important; background-repeat:no-repeat !important; background-position:center !important; background-size:24px 24px !important; } .custom-boxes-wrapper .custom-box .custom-box-content h4{ font-family:var(--bfp-head) !important; font-weight:800 !important; color:var(--bfp-navy) !important; font-size:17px !important; margin:0 0 5px !important; } .custom-boxes-wrapper .custom-box .custom-box-content p{color:var(--bfp-slate) !important; font-size:14px !important; line-height:1.55 !important;} .custom-boxes-wrapper .custom-box .custom-box-content a{color:var(--bfp-red) !important; font-family:var(--bfp-head); font-weight:700 !important; text-decoration:none;} .custom-boxes-wrapper .custom-box .custom-box-content a:hover{text-decoration:underline;} /* feature (full-width) box → navy highlight */ .custom-boxes-wrapper .custom-box.full-width-box{background:var(--bfp-navy) !important; border-color:var(--bfp-navy) !important;} .custom-boxes-wrapper .custom-box.full-width-box::before{background:var(--bfp-red) !important;} .custom-boxes-wrapper .custom-box.full-width-box .custom-box-icon{background-color:rgba(255,255,255,.12) !important;} .custom-boxes-wrapper .custom-box.full-width-box .custom-box-content h4{color:#fff !important;} .custom-boxes-wrapper .custom-box.full-width-box .custom-box-content p{color:#c6d0de !important;} /* ==================== VARIATION SWATCHES (plugin) ===================== */ .woocommerce div.product ul.variable-items-wrapper{display:flex !important; flex-wrap:wrap; gap:10px !important; margin:2px 0 6px !important; padding:0 !important;} .woocommerce div.product ul.variable-items-wrapper li.variable-item{ margin:0 !important; border:1.5px solid var(--bfp-line) !important; border-radius:8px !important; box-shadow:none !important; background:#fff !important; overflow:hidden; cursor:pointer; transition:border-color .14s ease, background .14s ease, box-shadow .14s ease; } .woocommerce div.product ul.variable-items-wrapper li.variable-item:hover{border-color:var(--bfp-navy) !important;} .woocommerce div.product ul.variable-items-wrapper li.button-variable-item{padding:0 !important;} .woocommerce div.product li.button-variable-item .variable-item-span{ padding:11px 18px !important; display:block; line-height:1.2 !important; font-family:var(--bfp-head); font-weight:600 !important; font-size:14px !important; color:var(--bfp-navy) !important; } /* selected state → red pill */ .woocommerce div.product ul.variable-items-wrapper li.variable-item.selected, .woocommerce div.product ul.variable-items-wrapper li.variable-item[aria-checked="true"]{ border-color:var(--bfp-red) !important; background:var(--bfp-red) !important; box-shadow:0 0 0 1px var(--bfp-red) !important; } .woocommerce div.product li.variable-item.selected .variable-item-span, .woocommerce div.product li.variable-item[aria-checked="true"] .variable-item-span{color:#fff !important;} /* color swatches (once the Color attribute Type is set to "Color") */ .woocommerce div.product li.color-variable-item{padding:4px !important; border-radius:50% !important; width:auto !important; height:auto !important;} .woocommerce div.product li.color-variable-item .variable-item-span-color{ width:30px !important; height:30px !important; border-radius:50% !important; border:1px solid rgba(0,0,0,.15) !important; } .woocommerce div.product li.color-variable-item.selected{border-color:var(--bfp-red) !important; background:#fff !important; box-shadow:0 0 0 2px rgba(178,34,52,.28) !important;} /* attribute label rows */ .woocommerce div.product form.cart .variations th.label, .woocommerce div.product form.cart .variations td.label{color:var(--bfp-navy) !important; font-family:var(--bfp-head); font-weight:700;} /* stronger selected-swatch override (beats the plugin) */ body.woocommerce div.product ul.variable-items-wrapper li.variable-item.selected, body.woocommerce div.product ul.variable-items-wrapper li.variable-item.selected:hover{ background-color:var(--bfp-red) !important; border-color:var(--bfp-red) !important; box-shadow:0 0 0 1px var(--bfp-red) !important; } body.woocommerce div.product li.variable-item.selected .variable-item-span{color:#fff !important; background:transparent !important;} /* stock + reset link */ .woocommerce div.product .stock{color:#2b7a4b !important; font-weight:700; font-size:14px;} .woocommerce div.product .reset_variations{color:var(--bfp-slate) !important; font-size:13px; font-weight:600;} /* ==================== PRODUCT TABS → branded ========================== */ .woocommerce div.product .woocommerce-tabs{margin-top:24px;} .woocommerce div.product .woocommerce-tabs ul.tabs{ padding:0 !important; margin:0 !important; border:none !important; display:flex; flex-wrap:wrap; gap:4px; border-bottom:2px solid var(--bfp-line) !important; } .woocommerce div.product .woocommerce-tabs ul.tabs::before{display:none !important;} .woocommerce div.product .woocommerce-tabs ul.tabs li{ background:transparent !important; border:none !important; border-radius:0 !important; margin:0 !important; padding:0 !important; } .woocommerce div.product .woocommerce-tabs ul.tabs li::before, .woocommerce div.product .woocommerce-tabs ul.tabs li::after{display:none !important;} .woocommerce div.product .woocommerce-tabs ul.tabs li a{ display:block; padding:13px 20px !important; margin-bottom:-2px; font-family:var(--bfp-head); font-weight:700; font-size:15px; color:var(--bfp-slate) !important; border-bottom:3px solid transparent; transition:color .15s ease, border-color .15s ease; } .woocommerce div.product .woocommerce-tabs ul.tabs li a:hover{color:var(--bfp-navy) !important;} .woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:var(--bfp-red) !important; border-bottom-color:var(--bfp-red) !important;} .woocommerce div.product .woocommerce-Tabs-panel{ background:#fff; border:1px solid var(--bfp-line); border-top:none; border-radius:0 0 12px 12px; padding:28px 30px !important; } .woocommerce div.product .woocommerce-Tabs-panel h2{font-family:var(--bfp-head); font-weight:800; color:var(--bfp-navy) !important; font-size:22px; margin:0 0 14px;} .woocommerce div.product .woocommerce-Tabs-panel p{color:var(--bfp-slate) !important; font-size:15px; line-height:1.7; margin-bottom:12px;} .woocommerce div.product .woocommerce-Tabs-panel strong{color:var(--bfp-navy);} /* custom accordion (products that use it) */ .custom-product-accordion{display:flex; flex-direction:column; gap:10px; margin:20px 0;} .custom-product-accordion .accordion-item{border:1px solid var(--bfp-line); border-radius:10px; overflow:hidden; background:#fff;} .custom-product-accordion .accordion-header{ width:100%; text-align:left; background:var(--bfp-paper) !important; border:none !important; cursor:pointer; padding:15px 18px !important; font-family:var(--bfp-head); font-weight:700; font-size:15px; color:var(--bfp-navy) !important; display:flex; justify-content:space-between; align-items:center; } .custom-product-accordion .accordion-header::after{content:"+"; color:var(--bfp-brass); font-size:20px; font-weight:700; line-height:1;} .custom-product-accordion .accordion-content{padding:4px 18px 16px !important;} .custom-product-accordion .accordion-content p{color:var(--bfp-slate) !important; font-size:14.5px; line-height:1.6; margin:0;} /* ==================== TRUST STRIP (added via functions.php) =========== */ .bfp-trust-strip{ display:grid !important; grid-template-columns:repeat(4,1fr); gap:10px; margin:20px 0 6px !important; padding:0 !important; list-style:none !important; } .bfp-trust-strip li{ display:flex !important; flex-direction:column; align-items:center; text-align:center; gap:6px; background:#fff; border:1px solid var(--bfp-line); border-radius:10px; padding:14px 8px; margin:0 !important; } .bfp-trust-strip li::before{display:none !important;} .bfp-trust-strip svg{width:22px; height:22px; color:var(--bfp-red);} .bfp-trust-strip b{font-family:var(--bfp-head); font-weight:700; font-size:12.5px; color:var(--bfp-navy); line-height:1.2;} @media(max-width:600px){ .custom-top-row{grid-template-columns:1fr;} .custom-boxes-wrapper .custom-box{padding:16px 18px !important;} .woocommerce .product-archive-title.entry-header{padding:28px 20px;} .bfp-trust-strip{grid-template-columns:repeat(2,1fr);} } /* ========================================================================= S1 — LAYOUT PASS · Elementor template 1418 (single product) Targets stable element IDs from the theme-builder template. These rules override the inlined post-1418 CSS purely by loading later at equal-or- higher specificity; no template/DB edits. ========================================================================= */ /* breadcrumb section: kill the double 50px+50px top padding */ .elementor-1418 .elementor-element.elementor-element-70ae078{padding:8px 0 0 0;} .elementor-1418 .elementor-element.elementor-element-1945453{padding:12px 20px 16px 20px;} .woocommerce .woocommerce-breadcrumb{color:var(--bfp-slate); font-size:13px; margin:0;} .woocommerce .woocommerce-breadcrumb a{color:var(--bfp-slate); text-decoration:none;} .woocommerce .woocommerce-breadcrumb a:hover{color:var(--bfp-red);} /* main two-column: slightly wider gallery, bigger gutter (mockup 1.05/.95) */ @media(min-width:768px){ .elementor-1418 .elementor-element.elementor-element-c064279{--gap:0px 48px; --column-gap:48px;} .elementor-1418 .elementor-element.elementor-element-cec4ee2{flex:1 1 0; min-width:0;} .elementor-1418 .elementor-element.elementor-element-f68a44f{flex:1 1 0; min-width:0;} /* even 50/50 split (was 1.05/.95) — makes the full-width breakout math below exact instead of an approximation */ } /* ---- gallery: framed main image + tidy thumbnail grid ---- */ .woocommerce div.product div.images.woocommerce-product-gallery{margin-bottom:0;} .woocommerce div.product div.images .flex-viewport{ border:1px solid var(--bfp-line); border-radius:14px; background:#fff; overflow:hidden; } .woocommerce div.product div.images .woocommerce-product-gallery__image img{border-radius:0;} .woocommerce div.product div.images ol.flex-control-thumbs{ display:grid !important; grid-template-columns:repeat(4,1fr); gap:12px; margin:12px 0 0 !important; padding:0 !important; float:none; width:auto; } .woocommerce div.product div.images ol.flex-control-thumbs li{ float:none !important; width:auto !important; margin:0 !important; padding:0 !important; border:1.5px solid var(--bfp-line); border-radius:10px; overflow:hidden; background:#fff; aspect-ratio:1/1; cursor:pointer; transition:border-color .14s ease, box-shadow .14s ease; } .woocommerce div.product div.images ol.flex-control-thumbs li img{ width:100%; height:100%; object-fit:cover; opacity:.85; transition:opacity .14s ease; } .woocommerce div.product div.images ol.flex-control-thumbs li img.flex-active, .woocommerce div.product div.images ol.flex-control-thumbs li:hover img{opacity:1;} .woocommerce div.product div.images ol.flex-control-thumbs li:has(img.flex-active){ border-color:var(--bfp-brass); box-shadow:0 0 0 2px rgba(195,154,78,.25); } /* sale badge inside gallery */ .woocommerce div.product div.images span.onsale, .woocommerce span.onsale{ position:absolute; top:14px; left:14px; right:auto; margin:0; min-height:0; min-width:0; z-index:9; background:var(--bfp-red); color:#fff; border:none; line-height:1.4; font-family:var(--bfp-head); font-weight:700; font-size:12px; letter-spacing:.04em; text-transform:uppercase; padding:5px 11px; border-radius:3px; } /* ---- variations: table → stacked option groups with visible labels ---- */ .woocommerce div.product form.cart table.variations{display:block; margin:6px 0 0;} .woocommerce div.product form.cart table.variations tbody{display:block;} .woocommerce div.product form.cart table.variations tr{display:block; padding:12px 0; border-bottom:1px solid var(--bfp-line);} .woocommerce div.product form.cart table.variations tr:last-child{border-bottom:none;} .woocommerce div.product form.cart table.variations th.label, .woocommerce div.product form.cart table.variations td.value{display:block; padding:0; text-align:left;} .woocommerce div.product form.cart table.variations th.label{margin-bottom:9px;} .woocommerce div.product form.cart table.variations th.label label{ display:inline !important; visibility:visible !important; font-family:var(--bfp-head); font-weight:700; font-size:14px; color:var(--bfp-navy); margin:0; } /* the "selected value" text the swatch plugin appends after the label */ .woocommerce div.product .woo-selected-variation-item-name{ font-family:var(--bfp-head); font-weight:600; font-size:14px; color:var(--bfp-slate); } /* ---- price + stock rhythm ---- */ .elementor-1418 .elementor-element-af029b4 .price{font-size:28px;} .woocommerce div.product .woocommerce-variation-price{margin:10px 0 4px;} .woocommerce div.product .woocommerce-variation-availability{margin-bottom:6px;} /* ---- buy row: qty + button as one aligned unit ---- */ .woocommerce div.product form.cart .woocommerce-variation-add-to-cart, .woocommerce div.product form.cart:not(.variations_form) .quantity ~ .single_add_to_cart_button{display:flex;} .woocommerce div.product form.cart .woocommerce-variation-add-to-cart{ gap:12px; align-items:stretch; flex-wrap:nowrap; margin-top:14px; } .woocommerce div.product form.cart div.quantity{margin:0 !important; float:none;} .woocommerce div.product form.cart div.quantity input.qty{ height:54px; width:74px; font-size:16px; text-align:center; } .woocommerce div.product form.cart .single_add_to_cart_button{ flex:1 1 auto; height:54px; display:inline-flex; align-items:center; justify-content:center; font-size:16px !important; line-height:1 !important; padding:0 28px !important; white-space:nowrap; } /* ---- short description as a lead line (other products; unaffected) ---- */ .elementor-1418 .elementor-element-bca813f{color:var(--bfp-slate); font-size:15px; line-height:1.65;} /* ---- Zeus Poseidon only: hide the short-description widget at its old position — its content now renders dynamically in the About section instead (functions.php::bfp_about_section_poseidon). Scoped to this one product via the body.postid-18983 class so every other product's short description stays exactly as it was. ---- */ body.postid-18983 .elementor-1418 .elementor-element-bca813f{display:none !important;} /* ---- product meta: quiet small caps ---- */ .woocommerce div.product .product_meta{ font-size:12.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--bfp-slate); border-top:1px solid var(--bfp-line); padding-top:14px; } .woocommerce div.product .product_meta a{color:var(--bfp-navy);} /* mobile: single column handled by Elementor; just tighten */ @media(max-width:767px){ .woocommerce div.product div.images ol.flex-control-thumbs{grid-template-columns:repeat(4,1fr); gap:8px;} .woocommerce div.product form.cart .woocommerce-variation-add-to-cart{flex-wrap:wrap;} } /* ========================================================================= S2/S3 — reconciling with pre-existing Customizer CSS ("wp-custom-css") That block cannot be edited or removed over FTP (DB-stored, admin-only — see project notes) and carries real !important rules of its own. Rather than fight it with more !important stacking, every rule below is written with DELIBERATELY HIGHER SELECTOR SPECIFICITY than its counterpart, so it wins on cascade math regardless of DOM/stylesheet order. Comments cite the exact competing rule + why the override is safe. ========================================================================= */ /* -- un-hide breadcrumb: competitor is `.woocommerce-breadcrumb{display:none!important}` (0,1,0) -- */ body.woocommerce.single-product .woocommerce-breadcrumb{ display:block !important; color:var(--bfp-slate); font-size:13px; margin:0 0 6px; } body.woocommerce.single-product .woocommerce-breadcrumb a{color:var(--bfp-slate); text-decoration:none;} body.woocommerce.single-product .woocommerce-breadcrumb a:hover{color:var(--bfp-red);} /* -- un-hide short description: competitor is `.woocommerce .woocommerce-product-details__short-description{display:none!important}` (0,2,0) -- */ body.woocommerce.single-product .woocommerce-product-details__short-description{display:block !important;} /* -- spec chips: rebuilt from the short description by the functions.php filter `bfp_spec_chips_short_description` (splits on the "•" already used in product copy). Falls back to a plain paragraph automatically if a product's short description doesn't use that convention. -- */ body.woocommerce.single-product ul.bfp-spec-chips{ display:flex; flex-wrap:wrap; gap:8px 10px; list-style:none; margin:14px 0 20px !important; padding:0 !important; } body.woocommerce.single-product ul.bfp-spec-chips li{ background:var(--bfp-paper2); color:var(--bfp-navy); font-family:var(--bfp-head); font-weight:600; font-size:12.5px; padding:7px 13px; border-radius:20px; margin:0 !important; } body.woocommerce.single-product ul.bfp-spec-chips li::before{display:none !important; content:none !important;} /* -- section padding: competitors are `.elementor-1418 .elementor-element.elementor-element-70ae078{padding:0!important}` and `...-1945453{padding:0px 20px 50px 20px!important}`, both (0,3,0). Ours adds 2 ancestor classes → (0,5,0), wins outright. -- */ .woocommerce-page.single-product .elementor-1418 .elementor-element.elementor-element-70ae078{padding:14px 0 0 0 !important;} .woocommerce-page.single-product .elementor-1418 .elementor-element.elementor-element-1945453{padding:6px 20px 18px 20px !important;} @media(max-width:767px){ .woocommerce-page.single-product .elementor-1418 .elementor-element.elementor-element-1945453{padding:6px 16px 14px !important;} } /* -- buy-row button width: competitor is `.elementor-1418 .elementor-element.elementor-element-ed3f537 .cart .button{width:100%!important}` (0,5,0). Ours adds 2 ancestor classes → (0,7,0), wins outright — restores the compact side-by-side qty+button row from the approved preview. -- */ .woocommerce-page.single-product .elementor-1418 .elementor-element.elementor-element-ed3f537 .cart .button{ width:auto !important; flex:1 1 auto !important; } @media(max-width:767px){ .woocommerce-page.single-product .elementor-1418 .elementor-element.elementor-element-ed3f537 .cart .button{width:100% !important;} } /* -- tabs: wp-custom-css sets ul.tabs{display:flex; justify-content:space-between} and li{flex:1 1 0} with NO !important, so our existing !important rules above already win cleanly and layer our brand colors/underline on top of their equal-width layout — verified no conflict, no changes needed here. -- */ /* ========================================================================= S5 — CONTENT BELOW THE TABS: Description tab, Zeus Comparison Table, the empty "Google Reviews / Coming Soon" tab, and the bottom trust/ contact strip (Elementor template 18554, appears on every product page). All real, existing content — no text invented or removed. ========================================================================= */ /* ---- Description tab: neutralize inline red/orange + inconsistent pt-sizes. External !important is one of the few things that beats an inline style="" attribute, which is why !important is required here (not a specificity contest — inline styles outrank any selector). ---- */ .woocommerce-Tabs-panel--description{font-family:var(--bfp-head);} .woocommerce-Tabs-panel--description h2{ color:var(--bfp-navy) !important; font-size:20px !important; font-weight:800 !important; margin:28px 0 12px !important; padding-top:20px; border-top:1px solid var(--bfp-line); } .woocommerce-Tabs-panel--description h2:first-child{margin-top:0 !important; padding-top:0; border-top:none;} .woocommerce-Tabs-panel--description h2 span{color:inherit !important; font-size:inherit !important;} .woocommerce-Tabs-panel--description h3{ color:var(--bfp-navy) !important; font-size:15.5px !important; font-weight:700 !important; margin:16px 0 4px !important; } .woocommerce-Tabs-panel--description h3 span{color:inherit !important; font-size:inherit !important;} .woocommerce-Tabs-panel--description p{margin:0 0 10px !important;} .woocommerce-Tabs-panel--description p span{ color:var(--bfp-slate) !important; font-size:15px !important; line-height:1.7 !important; } .woocommerce-Tabs-panel--description strong{color:var(--bfp-ink);} /* ---- Zeus Comparison Table: rebrand .zeus-stacked-table/.zeus-series (from functions.php::custom_catalog2_tab_content). wp-custom-css's own rules for these classes carry no !important, so ours win on the extra ancestor-class specificity alone — no !important needed. ---- */ .woocommerce-Tabs-panel .zeus-stacked-table{display:grid; gap:18px; grid-template-columns:1fr;} @media(min-width:700px){.woocommerce-Tabs-panel .zeus-stacked-table{grid-template-columns:repeat(2,1fr);}} .woocommerce-Tabs-panel .zeus-series{ border:1px solid var(--bfp-line); border-radius:12px; padding:22px 24px; background:#fff; position:relative; overflow:hidden; transition:transform .16s ease, box-shadow .16s ease; } .woocommerce-Tabs-panel .zeus-series::before{content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--bfp-brass);} .woocommerce-Tabs-panel .zeus-series:hover{transform:translateY(-3px); box-shadow:0 14px 30px rgba(13,31,60,.1);} .woocommerce-Tabs-panel .zeus-series h3{ font-family:var(--bfp-head); font-weight:800; font-size:17px; color:var(--bfp-navy); margin:0 0 12px !important; } .woocommerce-Tabs-panel .zeus-series ul{list-style:none; padding:0; margin:0;} .woocommerce-Tabs-panel .zeus-series li{ display:flex; justify-content:space-between; gap:14px; padding:9px 0; border-bottom:1px solid var(--bfp-line); font-size:13.5px; color:var(--bfp-slate); } .woocommerce-Tabs-panel .zeus-series li:last-child{border-bottom:none;} .woocommerce-Tabs-panel .zeus-series li strong{color:var(--bfp-navy); font-family:var(--bfp-head); font-weight:700; flex:0 0 auto;} /* ---- Hide the empty "Google Reviews — Coming Soon" tab (functions.php ::custom_reviews_tab_content). No competing rule for this tab exists in wp-custom-css, so a plain rule is sufficient. ---- */ #tab-title-reviews_tab, #tab-reviews_tab{display:none !important;} /* ---- Bottom trust/contact strip (template 18554) — styles the 3 populated widgets directly rather than the surrounding grid, since several sibling columns in that row are empty and its exact nesting isn't worth risking a mis-targeted background/width rule. ---- */ .elementor-18554 .elementor-element-36c1785, .elementor-18554 .elementor-element-32b57a6{ background:#fff; border:1px solid var(--bfp-line); border-radius:12px; padding:24px 26px; } .elementor-18554 .elementor-element-36c1785 .elementor-widget-container > p:first-child{ font-family:var(--bfp-head); font-weight:700; color:var(--bfp-navy); font-size:14.5px; margin-bottom:14px !important; } .elementor-18554 .elementor-element-36c1785 .elementor-widget-container p{margin:0 0 8px !important;} .elementor-18554 .elementor-element-36c1785 .elementor-widget-container a{ display:inline-block; background:var(--bfp-paper2); color:var(--bfp-navy) !important; text-decoration:none !important; font-family:var(--bfp-head); font-weight:600; font-size:13px; padding:7px 13px; border-radius:20px; margin:0 6px 6px 0 !important; transition:background .14s ease, color .14s ease; } .elementor-18554 .elementor-element-36c1785 .elementor-widget-container a:hover{background:var(--bfp-navy); color:#fff !important;} .elementor-18554 .elementor-element-4a4f5f0 img{ max-width:180px; height:auto; margin:0 auto; display:block; } .elementor-18554 .elementor-element-32b57a6 .elementor-widget-container{ font-family:var(--bfp-head); font-size:14px; color:var(--bfp-slate); line-height:1.8; } .elementor-18554 .elementor-element-32b57a6 .elementor-widget-container a{color:var(--bfp-red) !important; font-weight:700; text-decoration:none;} .elementor-18554 .elementor-element-32b57a6 .elementor-widget-container a:hover{text-decoration:underline;} .elementor-18554 .elementor-element-32b57a6 .elementor-widget-container span.__cf_email__{color:var(--bfp-red) !important; font-weight:700;} @media(max-width:767px){ .elementor-18554 .elementor-element-36c1785, .elementor-18554 .elementor-element-32b57a6{padding:18px 20px;} } /* ========================================================================= S6 — page background, title/price typography, shipping badge, repositioned info boxes, image sizing, and the new "About" summary section. ========================================================================= */ /* ---- page background: warm paper ground behind everything, cards stay white ---- */ body.single-product.woocommerce-page, body.tax-product_cat.woocommerce-page{background:var(--bfp-paper) !important;} .woocommerce-page .elementor-1418{background:transparent;} /* ---- title: no dedicated Elementor widget CSS sets a size, but the theme's global H1 typography does — needs explicit size + !important to win. ---- */ .woocommerce div.product .product_title, .elementor-widget-woocommerce-product-title h1{ font-size:clamp(26px,3vw,36px) !important; line-height:1.1 !important; margin:0 0 6px !important; } /* ---- price: Elementor Pro's own price-widget CSS carries no font-size rule (verified), so this wins cleanly; !important guards against theme global typography on

. ---- */ .woocommerce div.product p.price, .woocommerce div.product .woocommerce-variation-price .price{ font-size:32px !important; margin:0 !important; } /* ---- "Free Shipping Included" badge (functions.php::bfp_shipping_badge) ---- */ .woocommerce div.product p.bfp-ship-badge{ display:inline-flex !important; align-items:center; gap:6px; color:#2b7a4b !important; font-family:var(--bfp-head); font-weight:700; font-size:13.5px; margin:8px 0 18px !important; } .woocommerce div.product p.bfp-ship-badge svg{width:15px; height:15px; flex:0 0 auto;} /* ---- repositioned info boxes: now render after add-to-cart (functions.php hooks moved from woocommerce_before_variations_form), need spacing from the trust strip directly above them. ---- */ .woocommerce div.product form.cart ~ .custom-boxes-wrapper, .custom-boxes-wrapper{margin-top:22px !important;} /* ---- gallery: reinforced now that the page-cache issue is resolved ---- */ .woocommerce div.product div.images .flex-viewport{border-radius:14px !important;} .woocommerce div.product div.images .woocommerce-product-gallery__image{border-radius:14px !important; overflow:hidden;} /* ---- About section (functions.php::bfp_about_section_poseidon) — mirrors the approved preview's two-column "About + specs" layout. ---- */ .bfp-about{ display:grid; grid-template-columns:1.3fr 1fr; gap:28px; margin-top:26px; background:#fff; border:1px solid var(--bfp-line); border-radius:14px; padding:28px 30px; } .bfp-about-text h2{ font-family:var(--bfp-head); font-weight:800; color:var(--bfp-navy); font-size:21px; margin:0 0 12px; } .bfp-about-text p{color:var(--bfp-slate); font-size:14.5px; line-height:1.7; margin:0 0 10px;} .bfp-about-text strong{color:var(--bfp-ink);} .bfp-about-specs{background:var(--bfp-paper); border:1px solid var(--bfp-line); border-radius:10px; padding:6px 18px; align-self:start;} .bfp-about-specs table{width:100%; border-collapse:collapse;} .bfp-about-specs td{ padding:11px 0; border-bottom:1px solid var(--bfp-line); font-family:var(--bfp-head); font-weight:700; font-size:13.5px; color:var(--bfp-navy); } .bfp-about-specs tr:last-child td{border-bottom:none;} @media(max-width:700px){ .bfp-about{grid-template-columns:1fr; padding:22px 20px;} } /* ---- variation description: moved into the About section (mirrored live by JS — see functions.php::bfp_variation_desc_sync). ---- */ .bfp-about-text .bfp-variation-desc{color:var(--bfp-slate); font-size:14.5px; line-height:1.7;} .bfp-about-text .bfp-variation-desc p{margin:0 0 10px;} .bfp-about-text .bfp-variation-desc-placeholder{font-style:italic; color:var(--bfp-slate); opacity:.8;} /* Hide the ORIGINAL variation-description at its native position under the cart form. Competing rule (wp-custom-css) is: form.variations_form .woocommerce-variation-description { display:block !important; } — same specificity as a plain equivalent override (0,2,1), which would tie and lose to source order. Adding two more ancestor classes already present on this page (body.postid-18983.woocommerce-page) pushes ours to (0,4,1), a clean win regardless of order. Scoped to this one product only — every other variable product keeps its native variation description. */ body.postid-18983.woocommerce-page form.variations_form .woocommerce-variation-description{ display:none !important; } /* ---- full-width breakout: info boxes + About section render inside the narrower summary column (f68a44f, 50% of the row), but should visually span the FULL row width (gallery-left-edge to summary-right-edge), matching the approved preview. Math: with an even 50/50 flex split and a 48px gap, the summary column's own width IS the row's half-width, so from its own 100%: full row width = 100% + 100% + gap = calc(200% + 48px) shift left by = (gallery width + gap) = calc(100% + 48px) This is exact (not approximate) because the gallery/summary ratio above was simplified from 1.05/.95 to an even 1:1 specifically so this calc() holds. Desktop-only — below 768px the row stacks to a single column, where the elements are already the correct width. ---- */ @media(min-width:768px){ .custom-boxes-wrapper, .bfp-about{ width:calc(200% + 48px) !important; margin-left:calc(-100% - 48px) !important; max-width:calc(200% + 48px) !important; } /* Elementor widget containers commonly set overflow:hidden, which would silently clip the negative-margin breakout above — guard against it. */ .elementor-1418 .elementor-element-ed3f537 .elementor-widget-container, .elementor-1418 .elementor-element.elementor-element-f68a44f, .elementor-1418 .elementor-element.elementor-element-c064279{ overflow:visible !important; } } /* ========================================================================= S8 (CORRECTED) — gallery. Root-caused via WooCommerce's own shipped JS and CSS: single-product.min.js runs FlexSlider on the gallery after page load (confirmed: it references "flexslider" 3x and generates "flex-viewport"), and WooCommerce's own woocommerce.css shows .woocommerce-product-gallery__wrapper gets a CSS transition applied directly for the slide animation. The original S8 forced "display:grid !important" on that SAME element — fine on first paint, but it corrupted FlexSlider's width/position math the moment any slide change was attempted (thumbnail click, or WooCommerce's own variation-image swap), producing the reported blank/white box. Fixed by cooperating with FlexSlider instead of overriding its display mode: only cosmetic (non-layout) styling on the wrapper, and real polish on .flex-control-thumbs — confirmed via WooCommerce's own woocommerce.css to be a plain float-based list (li{width:25%;float:left}, img.flex-active/:hover{opacity:1}), not a class I invented. ---- */ .woocommerce div.product .woocommerce-product-gallery{padding:0 !important; margin:0 !important; opacity:1 !important;} .woocommerce div.product .woocommerce-product-gallery__wrapper{ border:1px solid var(--bfp-line); border-radius:14px; overflow:hidden; background:var(--bfp-paper2); } /* every gallery image, whichever FlexSlider currently shows: fit the whole photo, centered — no cropping into empty sky. Applied generically (not :first-child) since FlexSlider — not our CSS — decides which is visible. */ .woocommerce div.product .woocommerce-product-gallery__image img{ object-fit:contain; object-position:center; } /* ---- thumbnail strip: real WooCommerce/FlexSlider markup, brand polish layered on its native float-based layout (not replaced). ---- */ .woocommerce div.product .flex-control-thumbs{margin:8px 0 0 !important; padding:0 !important;} .woocommerce div.product .flex-control-thumbs li{padding:4px !important;} .woocommerce div.product .flex-control-thumbs li img{ border:1.5px solid var(--bfp-line); border-radius:10px; opacity:1 !important; transition:border-color .14s ease, box-shadow .14s ease; } .woocommerce div.product .flex-control-thumbs li img:hover{border-color:var(--bfp-navy);} .woocommerce div.product .flex-control-thumbs li img.flex-active{ border-color:var(--bfp-brass) !important; box-shadow:0 0 0 2px rgba(195,154,78,.25); } /* ---- SKU line (functions.php::bfp_sku_line) ---- */ .woocommerce div.product p.bfp-sku-line{ color:var(--bfp-slate) !important; font-size:12.5px; letter-spacing:.03em; margin:2px 0 14px !important; } /* ---- call-Bob line (functions.php::bfp_call_bob_line) ---- */ .woocommerce div.product p.bfp-callrow{ color:var(--bfp-slate) !important; font-size:14px; margin:14px 0 0 !important; } .woocommerce div.product p.bfp-callrow a{color:var(--bfp-red) !important; font-weight:700; text-decoration:none;} .woocommerce div.product p.bfp-callrow a:hover{text-decoration:underline;} /* ---- Zeus Poseidon only: hide the full SKU/Categories/Brand meta block — replaced by the small SKU line above. Scoped like the short-description hide so other products keep their meta block untouched. ---- */ body.postid-18983 .elementor-1418 .elementor-element-e80881c{display:none !important;} @media(max-width:600px){ .woocommerce div.product .flex-control-thumbs li{width:25% !important;} } /* ============================================================ BFP: "Find My Flagpole" Gravity Form — matches approved multi-step wizard preview. Site-wide load (this file has no page scoping), so it applies wherever the form is embedded. ============================================================ */ /* ========================================================================== Bob's Flagpoles — "Find My Flagpole" Gravity Form Matches the approved multi-step wizard preview (navy/red/brass palette). Targets Gravity Forms' real, stable markup/classes — no template edits. Scoped to form #11? — update the #gform_wrapper_ID selector below to match this form's actual ID once imported (shown in wp-admin Forms list). ========================================================================== */ :root{ --bfpgf-navy:#0D1F3C; --bfpgf-navy2:#1a3a6b; --bfpgf-red:#B22234; --bfpgf-red-dk:#8f1a29; --bfpgf-brass:#C39A4E; --bfpgf-paper:#F7F8FA; --bfpgf-paper2:#eef1f6; --bfpgf-ink:#2D3748; --bfpgf-slate:#5a6a7e; --bfpgf-line:#EAEDF2; --bfpgf-f-head:"Barlow","Helvetica Neue",Arial,sans-serif; } /* Card shell */ .gform_wrapper{ max-width:560px; margin:0 auto; background:#fff; border:1px solid var(--bfpgf-line); border-radius:16px; overflow:hidden; box-shadow:0 18px 44px rgba(13,31,60,.10); font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; color:var(--bfpgf-ink); } /* ---- Progress bar ---- */ .gform_wrapper .gf_progressbar_wrapper{ padding:22px 28px 16px; margin:0; } .gform_wrapper .gf_progressbar_title{ font-family:var(--bfpgf-f-head); font-weight:700; font-size:13.5px; color:var(--bfpgf-navy); margin:0 0 10px; display:inline-block; } .gform_wrapper .f11-progress-pct, .gform_wrapper .gf_progressbar_percentage span{ font-family:var(--bfpgf-f-head); font-weight:800; font-size:13px; color:var(--bfpgf-red); } .gform_wrapper .gf_progressbar{ height:7px; background:var(--bfpgf-paper2); border-radius:6px; overflow:hidden; } .gform_wrapper .gf_progressbar_percentage{ height:100%; background:linear-gradient(90deg,var(--bfpgf-brass),var(--bfpgf-red)); border-radius:6px; transition:width .35s ease; } .gform_wrapper .gf_progressbar_percentage span{ position:absolute; right:0; top:-22px; } /* ---- Page body / spacing ---- */ .gform_wrapper .gform_page{ padding:8px 28px 28px; } .gform_wrapper .gform_fields{ display:block; } .gform_wrapper .gfield{ margin-bottom:16px; } /* ---- Step headings (bfp-step-heading html fields) ---- */ .gform_wrapper .bfp-step-heading{ margin-bottom:8px; } .gform_wrapper .bfp-step-heading h2{ font-family:var(--bfpgf-f-head); font-weight:800; color:var(--bfpgf-navy); font-size:21px; letter-spacing:-.01em; margin:0 0 4px; } .gform_wrapper .bfp-step-heading p{ color:var(--bfpgf-slate); font-size:14px; margin:0 0 4px; } /* ---- Option cards (radio choices: bfp-option-cards) ---- */ .gform_wrapper .bfp-option-cards .gfield_radio{ display:grid; grid-template-columns:1fr 1fr; gap:12px; list-style:none; margin:0; padding:0; } .gform_wrapper .bfp-option-cards.bfp-option-cards--compact .gfield_radio{ grid-template-columns:1fr 1fr; } .gform_wrapper .bfp-option-cards .gchoice{ position:relative; margin:0; } .gform_wrapper .bfp-option-cards .gchoice label{ position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:4px; border:1.5px solid var(--bfpgf-line); border-radius:12px; padding:16px 34px 14px 16px; cursor:pointer; background:#fff; font-family:var(--bfpgf-f-head); font-weight:700; font-size:14.5px; color:var(--bfpgf-navy); line-height:1.3; transition:border-color .15s ease, background .15s ease, transform .1s ease; } .gform_wrapper .bfp-option-cards .gchoice label:hover{ border-color:var(--bfpgf-navy); transform:translateY(-1px); } .gform_wrapper .bfp-option-cards .gchoice input[type="radio"]{ position:absolute; opacity:0; width:0; height:0; } .gform_wrapper .bfp-option-cards .gchoice label::after{ content:""; position:absolute; top:12px; right:12px; width:20px; height:20px; border-radius:50%; background:transparent; } .gform_wrapper .bfp-option-cards .gchoice input[type="radio"]:checked + label{ border-color:var(--bfpgf-red); background:#fff6f2; box-shadow:0 0 0 1px var(--bfpgf-red); } .gform_wrapper .bfp-option-cards .gchoice input[type="radio"]:checked + label::after{ background:var(--bfpgf-red); content:"✓"; color:#fff; font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center; font-family:system-ui,sans-serif; } @media(max-width:480px){ .gform_wrapper .bfp-option-cards .gfield_radio{ grid-template-columns:1fr; } } /* ---- Notes field (textarea: bfp-notes-field) ---- */ .gform_wrapper .bfp-notes-field textarea{ width:100%; border:1.5px solid var(--bfpgf-line); border-radius:8px; padding:12px 13px; font-size:14.5px; font-family:inherit; color:var(--bfpgf-ink); background:var(--bfpgf-paper); resize:vertical; transition:border-color .15s ease, background .15s ease; } .gform_wrapper .bfp-notes-field textarea:focus{ outline:none; border-color:var(--bfpgf-brass); background:#fff; } /* ---- Text / email / phone fields (final step) ---- */ .gform_wrapper .gfield_label{ display:block; font-family:var(--bfpgf-f-head); font-weight:700; font-size:13px; color:var(--bfpgf-navy); margin-bottom:6px; } .gform_wrapper input[type="text"], .gform_wrapper input[type="email"], .gform_wrapper input[type="tel"]{ width:100%; border:1.5px solid var(--bfpgf-line); border-radius:8px; padding:12px 13px; font-size:14.5px; font-family:inherit; color:var(--bfpgf-ink); background:var(--bfpgf-paper); transition:border-color .15s ease, background .15s ease; } .gform_wrapper input[type="text"]:focus, .gform_wrapper input[type="email"]:focus, .gform_wrapper input[type="tel"]:focus{ outline:none; border-color:var(--bfpgf-brass); background:#fff; } .gform_wrapper .gfield_description{ color:var(--bfpgf-slate); font-weight:500; font-size:12px; } /* ---- Nav buttons ---- */ .gform_wrapper .gform_page_footer{ display:flex; gap:12px; align-items:center; margin-top:24px; padding:0; border:none; } .gform_wrapper .gform_button, .gform_wrapper .gform_next_button, .gform_wrapper .gform_previous_button{ font-family:var(--bfpgf-f-head); font-weight:700; font-size:14.5px; letter-spacing:.01em; border-radius:9px; padding:13px 22px; cursor:pointer; border:none; transition:background .15s ease, transform .15s ease; } .gform_wrapper .gform_next_button, .gform_wrapper .gform_button[type="submit"]{ background:var(--bfpgf-red); color:#fff; flex:1; box-shadow:0 8px 18px rgba(178,34,52,.24); } .gform_wrapper .gform_next_button:hover, .gform_wrapper .gform_button[type="submit"]:hover{ background:var(--bfpgf-red-dk); transform:translateY(-1px); } .gform_wrapper .gform_previous_button{ background:transparent; color:var(--bfpgf-slate); padding:13px 10px; order:-1; } .gform_wrapper .gform_previous_button:hover{ color:var(--bfpgf-navy); } /* ---- Confirmation message ---- */ .gform_wrapper .gform_confirmation_wrapper{ padding:52px 28px; text-align:center; } .gform_wrapper .gform_confirmation_message p:first-child::before{ content:"✓"; display:flex; align-items:center; justify-content:center; width:60px; height:60px; border-radius:50%; background:#2b7a4b; color:#fff; font-size:28px; margin:0 auto 18px; } .gform_wrapper .gform_confirmation_message strong{ font-family:var(--bfpgf-f-head); font-weight:800; color:var(--bfpgf-navy); font-size:22px; display:block; margin-bottom:8px; } .gform_wrapper .gform_confirmation_message p{ color:var(--bfpgf-slate); font-size:14.5px; max-width:38ch; margin:0 auto; } .gform_wrapper .gform_confirmation_message a{ color:var(--bfpgf-red); font-weight:700; text-decoration:none; } @media(max-width:480px){ .gform_wrapper .gform_page, .gform_wrapper .gf_progressbar_wrapper{ padding-left:20px; padding-right:20px; } } /* ========================================================================== BFP Gravity Form — override layer (kept last on purpose) -------------------------------------------------------------------------- 1) Gravity Forms' "Orbital" theme prints its OWN inline