/* ============================================================= Botanically Correct — Seasonal Planters Landing Page Brand-matched to botanicallycorrect.ca: Tajawal headings, Open Sans body, #71B100 brand green, #244435 deep green. ============================================================= */ /* --------- Override the theme container on this page only --- */ .container{ width:100%!important; max-width:none!important; } body:not(.et-tb) #main-content .container, body:not(.et-tb-has-header) #main-content .container{ padding-top:0; } /* --------- Bust out of Divi's nested padding so the layout actually goes edge-to-edge inside the page. The :has() rule targets only the section/row/column containing #bc-planter-app so we don't break the rest of the site. ------------------- */ .et_pb_section:has(#bc-planter-app), .et_pb_section:has(#bc-planter-app) .et_pb_row, .et_pb_section:has(#bc-planter-app) .et_pb_column, .et_pb_section:has(#bc-planter-app) .et_pb_module, .et_pb_section:has(#bc-planter-app) .et_pb_code_inner{ width:100%!important; max-width:none!important; padding:0!important; margin:0!important; /* Divi sets overflow:hidden which breaks position:sticky on the cart bar. Clear it on every ancestor between #bc-planter-app and . */ overflow:visible!important; /* Divi can apply transforms on row hover which also breaks sticky. */ transform:none!important; } /* The entry-content/article wrappers from Divi's default template also need overflow:visible so the cart bar can stick relative to the viewport. */ body:has(#bc-planter-app) #main-content, body:has(#bc-planter-app) #main-content .container, body:has(#bc-planter-app) #main-content article{ overflow:visible!important; } /* Hide the duplicate Divi page-title bar */ .entry-title.main_title{display:none!important} .et_pb_post,article.page{padding-top:0!important} article.page .entry-content{margin-top:0!important;padding:0!important} /* --------- App ------------------------------------------------ */ #bc-planter-app{ --bc-green:#71B100; /* brand lime green (buttons, accents) */ --bc-green-dark:#244435; /* deep forest (headings, hovers) */ --bc-green-darker:#1a3327; --bc-ink:#222; --bc-mute:#666; --bc-line:#e6e3dc; --bc-cream:#f6f4ee; --bc-bg:#ffffff; --bc-shadow:0 2px 14px rgba(36,68,53,.08); --bc-shadow-lg:0 12px 40px rgba(36,68,53,.18); font-family:'Open Sans',Arial,sans-serif; font-size:14px; line-height:1.7; color:var(--bc-mute); background:var(--bc-bg); width:100%; } #bc-planter-app *,#bc-planter-app *::before,#bc-planter-app *::after{box-sizing:border-box} #bc-planter-app .bc-container{max-width:1200px;margin:0 auto;padding:0 30px} #bc-planter-app img{max-width:100%;height:auto;display:block} /* --------- Typography (matches BC site) ----------------------- */ #bc-planter-app h1,#bc-planter-app h2,#bc-planter-app h3,#bc-planter-app h4{ font-family:'Tajawal',Helvetica,Arial,Lucida,sans-serif; font-weight:700; color:var(--bc-green-dark); line-height:1.2; margin:0 0 .4em; } #bc-planter-app h1{font-size:clamp(38px,5.5vw,70px);font-weight:900;letter-spacing:-.01em;line-height:1.05} #bc-planter-app h2{font-size:clamp(30px,4vw,50px);line-height:1.1} #bc-planter-app h3{font-size:24px} #bc-planter-app p{margin:0 0 1em;font-family:'Open Sans',Arial,sans-serif;color:var(--bc-mute);font-size:14px;line-height:1.7} #bc-planter-app .bc-eyebrow{ font-family:'Tajawal',Helvetica,Arial,Lucida,sans-serif; font-weight:700; font-size:12px; letter-spacing:3px; text-transform:uppercase; color:var(--bc-green); margin:0 0 14px; line-height:1.5; } #bc-planter-app .bc-section-head{text-align:center;max-width:780px;margin:80px auto 36px} #bc-planter-app .bc-section-sub{font-size:15px;color:var(--bc-mute);max-width:680px;margin:0 auto} #bc-planter-app a{color:var(--bc-green-dark);text-decoration:none;transition:color .2s ease} #bc-planter-app a:hover{color:var(--bc-green)} /* --------- Buttons (square, uppercase, tracked — BC style) ---- */ #bc-planter-app .bc-btn{ display:inline-flex;align-items:center;justify-content:center;gap:.5em; padding:14px 28px; font-family:'Tajawal',Helvetica,Arial,Lucida,sans-serif; font-weight:700; font-size:13px; letter-spacing:3px; text-transform:uppercase; border:2px solid transparent; border-radius:0; text-decoration:none; cursor:pointer; line-height:1.2; transition:background .2s ease,color .2s ease,border-color .2s ease; } #bc-planter-app .bc-btn--primary{background:var(--bc-green);color:#fff} #bc-planter-app .bc-btn--primary:hover{background:var(--bc-green-dark);color:#fff} #bc-planter-app .bc-btn--ghost{background:transparent;color:var(--bc-green-dark);border-color:var(--bc-green-dark)} #bc-planter-app .bc-btn--ghost:hover{background:var(--bc-green-dark);color:#fff} #bc-planter-app .bc-btn--light{background:transparent;color:#fff;border-color:#fff} #bc-planter-app .bc-btn--light:hover{background:#fff;color:var(--bc-green-dark)} /* --------- Sticky cart bar ------------------------------------ */ #bc-planter-app .bc-cart-bar{ position:sticky;top:58px;z-index:60; background:var(--bc-green-dark);color:#fff; transform:translateY(-100%); transition:transform .25s ease; box-shadow:0 4px 12px rgba(0,0,0,.12); } #bc-planter-app .bc-cart-bar[data-empty="false"]{transform:translateY(0)} #bc-planter-app .bc-cart-bar__inner{ max-width:1200px;margin:0 auto;padding:14px 30px; display:flex;align-items:center;gap:18px;flex-wrap:wrap; } #bc-planter-app .bc-cart-bar__count, #bc-planter-app .bc-cart-bar__total{ font-family:'Tajawal',Helvetica,Arial,sans-serif; font-size:13px;letter-spacing:2px;text-transform:uppercase;font-weight:700; } #bc-planter-app .bc-cart-bar__total{margin-left:auto} #bc-planter-app .bc-cart-bar__cta{ background:var(--bc-green);color:#fff;text-decoration:none; font-family:'Tajawal',Helvetica,Arial,sans-serif; font-weight:700;font-size:12px;letter-spacing:3px;text-transform:uppercase; padding:10px 20px; transition:background .2s ease; } #bc-planter-app .bc-cart-bar__cta:hover{background:#5a8d00;color:#fff} @media (max-width:680px){ #bc-planter-app .bc-cart-bar__inner{ padding:10px 16px;gap:10px; flex-wrap:wrap;align-items:center; } /* Row 1: count on the left, total on the right */ #bc-planter-app .bc-cart-bar__count{ flex:1 1 50%; font-size:12px;letter-spacing:1.5px; text-align:left; } #bc-planter-app .bc-cart-bar__total{ flex:1 1 40%;margin-left:auto; font-size:12px;letter-spacing:1.5px; text-align:right; } /* Row 2: CTA spans the full width */ #bc-planter-app .bc-cart-bar__cta{ flex:1 1 100%;margin-left:0; text-align:center; font-size:12px;letter-spacing:2px; padding:10px 14px; } } /* --------- Hero ----------------------------------------------- */ #bc-planter-app .bc-hero{ position:relative;top:-66px;margin-bottom:-66px; padding:90px 0 70px; background:var(--bc-cream); text-align:center; border-bottom:1px solid var(--bc-line); } #bc-planter-app .bc-hero h1{margin:0 0 .35em;color:var(--bc-green-dark)} #bc-planter-app .bc-hero .bc-lede{ font-size:16px;line-height:1.7;color:var(--bc-mute); max-width:780px;margin:0 auto 32px; } #bc-planter-app .bc-hero__cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap} /* --------- Flyer engagement ----------------------------------- */ #bc-planter-app .bc-flyer{padding:60px 0;background:#fff;border-bottom:1px solid var(--bc-line)} #bc-planter-app .bc-flyer__inner{display:grid;grid-template-columns:auto 1fr;gap:48px;align-items:center} #bc-planter-app .bc-flyer__thumb{ padding:0;border:0;background:transparent;cursor:pointer; overflow:hidden;box-shadow:var(--bc-shadow); transition:box-shadow .25s ease,transform .25s ease; max-width:240px;justify-self:start; } #bc-planter-app .bc-flyer__thumb:hover{box-shadow:var(--bc-shadow-lg);transform:translateY(-2px)} #bc-planter-app .bc-flyer__thumb img{display:block;width:100%} #bc-planter-app .bc-flyer__copy h2{margin-top:0} #bc-planter-app .bc-flyer__cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px} @media (max-width:780px){ #bc-planter-app .bc-flyer__inner{grid-template-columns:1fr;text-align:center;gap:28px} #bc-planter-app .bc-flyer__thumb{justify-self:center} #bc-planter-app .bc-flyer__cta{justify-content:center} } /* --------- Products ------------------------------------------- */ #bc-planter-app .bc-products{padding:30px 0 80px;background:#fff} #bc-planter-app .bc-grid{display:grid;gap:28px} #bc-planter-app .bc-grid--2{grid-template-columns:repeat(2,1fr)} #bc-planter-app .bc-grid--4{grid-template-columns:repeat(4,1fr)} @media (max-width:980px){#bc-planter-app .bc-grid--2{grid-template-columns:1fr}#bc-planter-app .bc-grid--4{grid-template-columns:repeat(2,1fr)}} @media (max-width:560px){#bc-planter-app .bc-grid--4{grid-template-columns:1fr}} /* Product card */ #bc-planter-app .bc-card{ position:relative;background:#fff; border:1px solid var(--bc-line); display:flex;flex-direction:column; transition:box-shadow .2s ease,transform .2s ease; } #bc-planter-app .bc-card:hover{box-shadow:var(--bc-shadow-lg);transform:translateY(-3px)} #bc-planter-app .bc-card--premium{border:2px solid var(--bc-green)} #bc-planter-app .bc-card__media{aspect-ratio:4/3;overflow:hidden;background:var(--bc-cream)} #bc-planter-app .bc-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease} #bc-planter-app .bc-card:hover .bc-card__media img{transform:scale(1.04)} #bc-planter-app .bc-card__body{padding:26px 26px 26px;display:flex;flex-direction:column;flex:1} #bc-planter-app .bc-card__sub{ font-family:'Tajawal',Helvetica,Arial,sans-serif; font-weight:700;font-size:11px;letter-spacing:3px;text-transform:uppercase; color:var(--bc-green);margin:0 0 14px; } #bc-planter-app .bc-card h3{font-size:22px;margin-bottom:10px;text-transform:uppercase;letter-spacing:1px} #bc-planter-app .bc-card__price{display:flex;align-items:baseline;gap:.55em;margin-bottom:6px} #bc-planter-app .bc-card__price strong{ font-family:'Tajawal',Helvetica,Arial,sans-serif; font-size:32px;font-weight:700;color:var(--bc-green-dark); } #bc-planter-app .bc-card__price span{font-size:12px;color:var(--bc-mute);letter-spacing:1px;text-transform:uppercase;font-family:'Tajawal',sans-serif;font-weight:700} #bc-planter-app .bc-card__alt{font-size:13px;color:var(--bc-mute);margin:0 0 14px} #bc-planter-app .bc-card__alt strong{color:var(--bc-green-dark);font-weight:700} #bc-planter-app .bc-card__desc{font-size:14px;color:var(--bc-mute);margin-bottom:16px;line-height:1.6} #bc-planter-app .bc-card__list{list-style:none;padding:0;margin:0 0 22px;font-size:13.5px;color:var(--bc-mute);line-height:1.6} #bc-planter-app .bc-card__list li{padding-left:1.6em;position:relative;margin-bottom:8px} #bc-planter-app .bc-card__list li::before{content:"✓";color:var(--bc-green);font-weight:700;position:absolute;left:0;top:0;font-size:14px} #bc-planter-app .bc-card__qty{display:flex;align-items:stretch;gap:8px;margin-top:auto} #bc-planter-app .bc-step{ width:38px;height:42px;border:1px solid var(--bc-line);background:#fff; font-size:18px;font-weight:700;color:var(--bc-green-dark);cursor:pointer; font-family:inherit;line-height:1; display:flex;align-items:center;justify-content:center; transition:background .15s ease; } #bc-planter-app .bc-step:hover{background:var(--bc-cream)} #bc-planter-app .bc-qty{ width:54px;height:42px;text-align:center;border:1px solid var(--bc-line); font-size:14px;font-weight:600;font-family:inherit;background:#fff; color:var(--bc-ink);-moz-appearance:textfield; } #bc-planter-app .bc-qty::-webkit-outer-spin-button, #bc-planter-app .bc-qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} #bc-planter-app .bc-add{ flex:1;height:42px;border:0; background:var(--bc-green-dark);color:#fff; font-family:'Tajawal',Helvetica,Arial,sans-serif; font-weight:700;font-size:11px;letter-spacing:2.5px;text-transform:uppercase; cursor:pointer; transition:background .2s ease; } #bc-planter-app .bc-add:hover{background:var(--bc-green)} #bc-planter-app .bc-add.bc-added{background:var(--bc-green)} #bc-planter-app .bc-badge{ position:absolute;top:14px;right:14px; background:var(--bc-green);color:#fff; font-family:'Tajawal',sans-serif; font-size:10px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase; padding:6px 14px;z-index:2; } /* --------- Seasons strip -------------------------------------- */ #bc-planter-app .bc-seasons{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:8px} #bc-planter-app .bc-seasons figure{margin:0;overflow:hidden;position:relative;aspect-ratio:3/4;box-shadow:var(--bc-shadow)} #bc-planter-app .bc-seasons img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease} #bc-planter-app .bc-seasons figure:hover img{transform:scale(1.04)} #bc-planter-app .bc-seasons figcaption{ position:absolute;bottom:14px;left:14px; background:var(--bc-green-dark);color:#fff; padding:8px 16px; font-family:'Tajawal',sans-serif;font-weight:700; font-size:11px;letter-spacing:3px;text-transform:uppercase; } @media (max-width:760px){#bc-planter-app .bc-seasons{grid-template-columns:repeat(2,1fr)}} /* --------- How it works --------------------------------------- */ #bc-planter-app .bc-how{padding:80px 0;background:var(--bc-cream)} #bc-planter-app .bc-how__grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center} @media (max-width:980px){#bc-planter-app .bc-how__grid{grid-template-columns:1fr;gap:32px}} #bc-planter-app .bc-how__photo img{box-shadow:var(--bc-shadow-lg)} #bc-planter-app .bc-how__steps{padding-left:0;list-style:none;counter-reset:step;margin:0 0 24px} #bc-planter-app .bc-how__steps li{ counter-increment:step;padding-left:56px;position:relative; margin-bottom:22px;font-size:14.5px;color:var(--bc-mute);line-height:1.7; } #bc-planter-app .bc-how__steps li strong{color:var(--bc-green-dark);font-weight:700} #bc-planter-app .bc-how__steps li::before{ content:counter(step);position:absolute;left:0;top:-2px; width:38px;height:38px; background:var(--bc-green);color:#fff; font-family:'Tajawal',sans-serif;font-weight:700; font-size:16px; display:flex;align-items:center;justify-content:center; } #bc-planter-app .bc-how__pay{ font-size:13px;color:var(--bc-mute); background:#fff;padding:14px 18px; border-left:3px solid var(--bc-green); margin-top:24px; } /* --------- Service area --------------------------------------- */ #bc-planter-app .bc-area{padding:80px 0;text-align:center;background:#fff;border-top:1px solid var(--bc-line);border-bottom:1px solid var(--bc-line)} #bc-planter-app .bc-area p{max-width:780px;margin:0 auto 28px;font-size:15px;line-height:1.7} #bc-planter-app .bc-area__list{ list-style:none;padding:0;margin:0; display:flex;justify-content:center;gap:14px;flex-wrap:wrap; } #bc-planter-app .bc-area__list li{ background:var(--bc-cream);color:var(--bc-green-dark); padding:10px 22px; font-family:'Tajawal',sans-serif;font-weight:700;font-size:12px; letter-spacing:2.5px;text-transform:uppercase; border:1px solid var(--bc-line); } /* --------- Gallery slider ------------------------------------- */ #bc-planter-app .bc-gallery{padding:80px 0;background:#fff;text-align:center} #bc-planter-app .bc-gallery__lede{max-width:680px;margin:0 auto 36px;font-size:15px;color:var(--bc-mute)} #bc-planter-app .bc-slider{position:relative;margin-top:16px} #bc-planter-app .bc-slider__track{ display:flex;gap:16px; overflow-x:auto;scroll-snap-type:x mandatory; scroll-behavior:smooth; padding:8px 4px 28px; -ms-overflow-style:none;scrollbar-width:none; } #bc-planter-app .bc-slider__track::-webkit-scrollbar{display:none} #bc-planter-app .bc-slide{ flex:0 0 calc((100% - 32px) / 3); scroll-snap-align:start; border:0;background:transparent;padding:0;cursor:pointer; position:relative;overflow:hidden; aspect-ratio:4/5; box-shadow:var(--bc-shadow); transition:box-shadow .25s ease,transform .25s ease; } #bc-planter-app .bc-slide:hover{box-shadow:var(--bc-shadow-lg);transform:translateY(-2px)} #bc-planter-app .bc-slide:focus-visible{outline:3px solid var(--bc-green);outline-offset:2px} #bc-planter-app .bc-slide img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease} #bc-planter-app .bc-slide:hover img{transform:scale(1.04)} #bc-planter-app .bc-slide figcaption{ position:absolute;left:0;right:0;bottom:0; padding:18px 16px 14px; text-align:left; background:linear-gradient(to top,rgba(20,40,28,.85),rgba(20,40,28,0)); color:#fff; } #bc-planter-app .bc-slide__chip{ display:inline-block; background:var(--bc-green);color:#fff; font-family:'Tajawal',sans-serif;font-weight:700; font-size:10px;letter-spacing:2.5px;text-transform:uppercase; padding:5px 10px;margin-bottom:8px; } #bc-planter-app .bc-slide figcaption strong{ display:block;color:#fff;font-family:'Tajawal',sans-serif;font-weight:700; font-size:15px;letter-spacing:.5px; } #bc-planter-app .bc-slider__arrow{ position:absolute;top:calc(50% - 28px);transform:translateY(-50%); z-index:5; width:48px;height:48px;border:0;border-radius:50%; background:#fff;color:var(--bc-green-dark); font-size:22px;font-weight:700;cursor:pointer; box-shadow:0 4px 14px rgba(0,0,0,.35); display:flex;align-items:center;justify-content:center; transition:background .2s ease,color .2s ease,transform .2s ease; } #bc-planter-app .bc-slider__arrow:hover{background:var(--bc-green);color:#fff} #bc-planter-app .bc-slider__arrow:disabled{opacity:.35;cursor:not-allowed} #bc-planter-app .bc-slider__arrow--prev{left:-12px} #bc-planter-app .bc-slider__arrow--next{right:-12px} #bc-planter-app .bc-slider__dots{ display:flex;justify-content:center;gap:8px;margin-top:8px; } #bc-planter-app .bc-slider__dots button{ width:8px;height:8px;border-radius:50%;border:0;padding:0; background:var(--bc-line);cursor:pointer; transition:background .2s ease,width .2s ease; } #bc-planter-app .bc-slider__dots button[aria-current="true"]{ background:var(--bc-green);width:24px;border-radius:4px; } @media (max-width:980px){ #bc-planter-app .bc-slide{flex-basis:calc((100% - 16px) / 2)} #bc-planter-app .bc-slider__arrow{width:40px;height:40px;font-size:16px} #bc-planter-app .bc-slider__arrow--prev{left:0} #bc-planter-app .bc-slider__arrow--next{right:0} } @media (max-width:560px){ #bc-planter-app .bc-slide{flex-basis:85%} } /* --------- Gallery lightbox ----------------------------------- */ #bc-planter-app .bc-gal-lightbox{ position:fixed;inset:0;background:rgba(20,30,20,.94);z-index:9999; display:none;align-items:center;justify-content:center;padding:24px;overflow:auto; } #bc-planter-app .bc-gal-lightbox.bc-gal-lightbox--open{display:flex} #bc-planter-app .bc-gal-lightbox__inner{ display:grid;grid-template-columns:minmax(0,1.4fr) minmax(320px,1fr); gap:0; width:min(1100px,96vw);max-height:92vh; background:#fff; box-shadow:var(--bc-shadow-lg); overflow:hidden; } #bc-planter-app .bc-gal-lightbox__media{ background:#0e1a13;display:flex;align-items:center;justify-content:center; min-height:300px;max-height:92vh; } #bc-planter-app .bc-gal-lightbox__media img{ width:100%;height:100%;max-height:92vh;object-fit:contain;display:block; } #bc-planter-app .bc-gal-lightbox__meta{ padding:36px 32px;overflow-y:auto;max-height:92vh; text-align:left;background:#fff; } #bc-planter-app .bc-gal-lightbox__season{ display:inline-block; background:var(--bc-green);color:#fff; font-family:'Tajawal',sans-serif;font-weight:700; font-size:11px;letter-spacing:3px;text-transform:uppercase; padding:6px 14px;margin:0 0 16px; } #bc-planter-app .bc-gal-lightbox h3{ font-family:'Tajawal',sans-serif;font-weight:700; color:var(--bc-green-dark); font-size:24px;line-height:1.2;margin:0 0 8px; } #bc-planter-app .bc-gal-lightbox__location{ font-size:13px;color:var(--bc-mute);margin:0 0 18px; font-family:'Tajawal',sans-serif;font-weight:700;letter-spacing:1.5px;text-transform:uppercase; } #bc-planter-app .bc-gal-lightbox__desc{ font-size:14.5px;color:var(--bc-mute);line-height:1.7;margin:0 0 24px; } #bc-planter-app .bc-gal-lightbox__meta h4{ font-family:'Tajawal',sans-serif;font-weight:700; font-size:11px;letter-spacing:2.5px;text-transform:uppercase; color:var(--bc-green-dark);margin:18px 0 8px; } #bc-planter-app .bc-gal-lightbox__meta p{font-size:14px;color:var(--bc-mute);margin:0 0 8px;line-height:1.6} #bc-planter-app .bc-gal-lightbox__tags{ list-style:none;padding:0;margin:0 0 22px; display:flex;flex-wrap:wrap;gap:6px; } #bc-planter-app .bc-gal-lightbox__tags li{ background:var(--bc-cream);color:var(--bc-green-dark); font-size:11px;letter-spacing:1px; padding:5px 10px; font-family:'Open Sans',sans-serif; } #bc-planter-app .bc-gal-lightbox__pkg{ font-family:'Tajawal',sans-serif;font-size:11px;font-weight:700; letter-spacing:2px;text-transform:uppercase; color:var(--bc-green-dark);margin-top:14px; } #bc-planter-app .bc-gal-lightbox__count{ font-size:12px;color:var(--bc-mute);margin:6px 0 18px; } #bc-planter-app .bc-gal-lightbox__cta{margin-top:8px;width:100%} #bc-planter-app .bc-gal-lightbox__close{ position:fixed!important;top:74px;right:16px;z-index:10010; width:44px;height:44px;border:0;background:#fff; border-radius:50%; font-size:26px;line-height:1;cursor:pointer; color:var(--bc-green-dark);font-weight:700; box-shadow:0 4px 14px rgba(0,0,0,.35); display:flex;align-items:center;justify-content:center; } #bc-planter-app .bc-gal-lightbox__close:hover{background:var(--bc-green);color:#fff} #bc-planter-app .bc-gal-lightbox__nav{ position:fixed;top:50%;transform:translateY(-50%);z-index:10000; width:54px;height:54px;border:0;border-radius:50%; background:#fff;color:var(--bc-green-dark); font-size:24px;font-weight:700;cursor:pointer; box-shadow:0 4px 14px rgba(0,0,0,.35); display:flex;align-items:center;justify-content:center; transition:background .2s ease,color .2s ease; } #bc-planter-app .bc-gal-lightbox__nav:hover{background:var(--bc-green);color:#fff} #bc-planter-app .bc-gal-lightbox__nav--prev{left:24px} #bc-planter-app .bc-gal-lightbox__nav--next{right:24px} @media (max-width:860px){ /* Outer: allow full-height scroll from the top, not flex-centered */ #bc-planter-app .bc-gal-lightbox{ align-items:flex-start; padding:16px; overflow-y:auto; -webkit-overflow-scrolling:touch; } #bc-planter-app .bc-gal-lightbox__inner{ grid-template-columns:1fr; grid-template-rows:auto auto; max-height:none; overflow:visible; width:100%; } #bc-planter-app .bc-gal-lightbox__media{max-height:55vh} #bc-planter-app .bc-gal-lightbox__media img{max-height:55vh} #bc-planter-app .bc-gal-lightbox__meta{ max-height:none;overflow:visible;padding:26px 24px; } #bc-planter-app .bc-gal-lightbox__nav{width:44px;height:44px;font-size:18px} #bc-planter-app .bc-gal-lightbox__nav--prev{left:8px} #bc-planter-app .bc-gal-lightbox__nav--next{right:8px} } /* --------- Inquiry section ------------------------------------ */ #bc-planter-app .bc-inquiry{padding:90px 0;background:var(--bc-cream)} #bc-planter-app .bc-inquiry h2{text-align:center} #bc-planter-app .bc-inquiry__lede,#bc-planter-app .bc-inquiry__call{text-align:center;max-width:760px;margin:0 auto 12px;font-size:15px;line-height:1.7} #bc-planter-app .bc-inquiry h3{ margin:40px 0 16px; font-size:14px;text-transform:uppercase;letter-spacing:3px; color:var(--bc-green-dark);text-align:left; } #bc-planter-app .bc-summary{ background:#fff; padding:22px 26px; border:1px solid var(--bc-line); min-height:80px;margin-bottom:36px; } #bc-planter-app .bc-summary__empty{margin:0;color:var(--bc-mute);font-style:italic;font-size:14px} #bc-planter-app .bc-summary table{width:100%;border-collapse:collapse} #bc-planter-app .bc-summary th,#bc-planter-app .bc-summary td{ text-align:left;padding:12px 10px;border-bottom:1px solid var(--bc-line);font-size:14px; } #bc-planter-app .bc-summary tr:last-child td{border-bottom:0} #bc-planter-app .bc-summary th{ font-family:'Tajawal',sans-serif;font-weight:700;color:var(--bc-green-dark); font-size:11px;text-transform:uppercase;letter-spacing:2px; } #bc-planter-app .bc-summary .bc-summary__remove{ background:transparent;border:0;color:var(--bc-green);cursor:pointer; font-family:'Tajawal',sans-serif;font-weight:700; font-size:11px;letter-spacing:2px;text-transform:uppercase;padding:0; } #bc-planter-app .bc-summary .bc-summary__remove:hover{color:var(--bc-green-dark);text-decoration:underline} #bc-planter-app .bc-summary tfoot td{ font-family:'Tajawal',sans-serif;font-weight:700;color:var(--bc-green-dark); font-size:16px;border-top:2px solid var(--bc-green-dark);padding-top:16px; } #bc-planter-app .bc-summary__note{font-size:12px;color:var(--bc-mute);margin:14px 0 0;line-height:1.6} /* --------- CF7 form styling ----------------------------------- */ #bc-planter-app .bc-form-wrap{max-width:780px;margin:0 auto} #bc-planter-app .bc-cf7-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px} @media (max-width:600px){#bc-planter-app .bc-cf7-grid{grid-template-columns:1fr}} /* --------- Center section eyebrows/sub-titles (all sizes) ------ */ #bc-planter-app .bc-inquiry .bc-eyebrow, #bc-planter-app .bc-inquiry h2, #bc-planter-app .bc-inquiry h3, #bc-planter-app .bc-how .bc-eyebrow, #bc-planter-app .bc-how h2{ text-align:center!important; } /* --------- Mobile: inquiry section full-width w/ 2.5% padding --- */ @media (max-width:780px){ #bc-planter-app .bc-inquiry{padding:48px 0;overflow-x:hidden} #bc-planter-app .bc-inquiry .bc-container{ max-width:none!important;width:100%!important; padding:0 2.5%!important;margin:0!important; } #bc-planter-app .bc-form-wrap{max-width:none!important;width:100%} #bc-planter-app .bc-summary{padding:14px 12px;margin-bottom:24px} #bc-planter-app .bc-summary table{table-layout:fixed;width:100%} #bc-planter-app .bc-summary th, #bc-planter-app .bc-summary td{ padding:10px 6px;font-size:13px;word-break:break-word; } #bc-planter-app .bc-summary th{font-size:10px;letter-spacing:1px} #bc-planter-app .bc-summary .bc-summary__remove{font-size:10px;letter-spacing:1px} #bc-planter-app .bc-form-wrap input[type=text], #bc-planter-app .bc-form-wrap input[type=email], #bc-planter-app .bc-form-wrap input[type=tel], #bc-planter-app .bc-form-wrap textarea{width:100%;max-width:100%;box-sizing:border-box} } #bc-planter-app .bc-form-wrap p{margin:0 0 16px} #bc-planter-app .bc-form-wrap label{ display:block; font-family:'Tajawal',sans-serif;font-weight:700;color:var(--bc-green-dark); font-size:11px;letter-spacing:2.5px;text-transform:uppercase;line-height:1.5; } #bc-planter-app .bc-form-wrap input[type=text], #bc-planter-app .bc-form-wrap input[type=email], #bc-planter-app .bc-form-wrap input[type=tel], #bc-planter-app .bc-form-wrap textarea{ width:100%;padding:14px 16px; font-size:14px; border:1px solid var(--bc-line); background:#fff; font-family:'Open Sans',Arial,sans-serif;color:var(--bc-ink); transition:border-color .2s ease,box-shadow .2s ease; margin-top:8px; border-radius:0; } #bc-planter-app .bc-form-wrap input:focus,#bc-planter-app .bc-form-wrap textarea:focus{ outline:0;border-color:var(--bc-green);box-shadow:0 0 0 2px rgba(113,177,0,.15); } /* The "Your Selections" textarea is hidden — the JS still writes the cart summary into it so CF7 includes it in the outgoing email, but the user already sees the selections in the summary box above the form. */ #bc-planter-app .bc-form-wrap p:has(textarea[name="your-selections"]){display:none!important} #bc-planter-app .bc-form-wrap textarea[name="your-selections"]{ position:absolute!important;left:-10000px!important; width:1px!important;height:1px!important;overflow:hidden!important; } #bc-planter-app .bc-form-wrap input[type=submit]{ background:var(--bc-green);color:#fff;border:0; padding:16px 36px; font-family:'Tajawal',sans-serif; font-size:13px;font-weight:700;letter-spacing:3px;text-transform:uppercase; cursor:pointer; transition:background .2s ease; border-radius:0; } #bc-planter-app .bc-form-wrap input[type=submit]:hover{background:var(--bc-green-dark)} #bc-planter-app .wpcf7-not-valid-tip{ color:#c0392b;font-size:12px;margin-top:6px;display:block; font-family:'Open Sans',sans-serif;letter-spacing:0;text-transform:none;font-weight:400; } #bc-planter-app .wpcf7-response-output{ border-radius:0;padding:14px 18px!important;margin:18px 0 0!important; font-size:13px;font-family:'Open Sans',sans-serif; } /* --------- Footer CTA ----------------------------------------- */ #bc-planter-app .bc-footer-cta{ padding:80px 0;text-align:center; background:var(--bc-green-dark);color:#fff; } #bc-planter-app .bc-footer-cta h2{color:#fff;margin-bottom:18px} #bc-planter-app .bc-footer-cta p{color:rgba(255,255,255,.85);font-size:15px;max-width:680px;margin:0 auto 28px} #bc-planter-app .bc-footer-cta__buttons{display:flex;gap:14px;justify-content:center;flex-wrap:wrap} #bc-planter-app .bc-footer-cta .bc-btn--primary{background:var(--bc-green);color:#fff} #bc-planter-app .bc-footer-cta .bc-btn--primary:hover{background:#fff;color:var(--bc-green-dark)} /* Ghost button is invisible on the dark-green footer — flip it to white-on-transparent */ #bc-planter-app .bc-footer-cta .bc-btn--ghost{background:transparent;color:#fff;border-color:#fff} #bc-planter-app .bc-footer-cta .bc-btn--ghost:hover{background:#fff;color:var(--bc-green-dark);border-color:#fff} /* --------- Lightbox ------------------------------------------- */ #bc-planter-app .bc-lightbox{ position:fixed;inset:0;background:rgba(20,30,20,.92);z-index:9999; display:none;align-items:center;justify-content:center;padding:24px;overflow:auto; } #bc-planter-app .bc-lightbox.bc-lightbox--open{display:flex} #bc-planter-app .bc-lightbox__inner{ display:flex;flex-direction:column;align-items:center;gap:20px; max-width:min(720px,95vw);max-height:95vh; } #bc-planter-app .bc-lightbox__inner img{ max-width:100%;max-height:75vh;width:auto; box-shadow:var(--bc-shadow-lg); } #bc-planter-app .bc-lightbox__close{ position:fixed;top:18px;right:24px; width:48px;height:48px;border:0;background:#fff; font-size:28px;line-height:1;cursor:pointer; color:var(--bc-green-dark);font-weight:700; } #bc-planter-app .bc-lightbox__close:hover{background:var(--bc-green);color:#fff} /* --------- Reduced motion ------------------------------------- */ @media (prefers-reduced-motion: reduce){ #bc-planter-app *,#bc-planter-app *::before,#bc-planter-app *::after{ transition:none!important;animation:none!important; } }