/* Flush the hero under the theme header — covers the different wrapper
   markup Kadence can output depending on layout/container settings. */
body.bp-home-active .content-area,
body.bp-home-active .content-container,
body.bp-home-active .entry-content,
body.bp-home-active .site-main,
body.bp-home-active .site-content,
body.bp-home-active #content,
body.bp-home-active .content-container-fluid{margin-top:0!important;padding-top:0!important}
body.bp-home-active .entry-header,
body.bp-home-active .page-header,
body.bp-home-active .kadence-page-title-wrap{display:none!important}
/* Extra safety net: kill top/side padding on common Kadence block
   wrappers (Row Layout, Group, Column) that may be wrapping the
   shortcode in the page editor, so a leftover block padding setting
   can't reintroduce the gray gap around the hero. */
body.bp-home-active .entry-content>*,
body.bp-home-active .wp-block-kadence-rowlayout,
body.bp-home-active .kt-row-column-wrap,
body.bp-home-active .wp-block-group,
body.bp-home-active .wp-block-kadence-column,
body.bp-home-active .wp-block-column{margin:0!important;padding:0!important;max-width:none!important}

.bp-home{font-family:inherit;color:var(--bp-ink);background:#fff;margin:0!important;padding:0!important;overflow:hidden;
  /* Break out of any Kadence Row/Group/Column padding or "boxed" content
     width wrapping this shortcode, so the homepage is always edge-to-edge
     regardless of the page editor's container settings. */
  width:100vw!important;position:relative;left:50%;transform:translateX(-50%)}
body.bp-home-active{overflow-x:hidden}
.bp-home *{box-sizing:border-box}
.bp-home a{text-decoration:none}
.bp-container{width:min(1180px,calc(100% - 32px));margin:auto}
.bp-home a:focus-visible,.bp-home button:focus-visible{outline:3px solid var(--bp-blue);outline-offset:2px}
.bp-eyebrow{display:inline-block;font-size:clamp(11px,2.6vw,13px);font-weight:400;letter-spacing:.08em;color:var(--bp-red);margin-bottom:10px}

/* Hero */
.bp-hero{min-height:min(680px,100svh);position:relative;display:flex;align-items:center;overflow:hidden;background:#0a0e16;margin:0!important;padding:0!important}
.bp-hero-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:78% center;display:block;opacity:0;transition:opacity .8s ease;pointer-events:none}
.bp-hero-media.is-active{opacity:1}
.bp-hero-media.bp-hero-video{background:#0a0e16;object-position:center}
.bp-hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,12,20,.94) 0%,rgba(8,12,20,.78) 38%,rgba(8,12,20,.15) 73%,rgba(8,12,20,.04) 100%)}
.bp-hero-inner{position:relative;z-index:2}
.bp-hero-copy{max-width:620px;color:#fff;padding:clamp(56px,14vw,80px) 0}
/* "New Season" badge + "BRANDED PARCELS" wordmark + the headline are now
   ONE pre-rendered image (see the PHP comment right above the <h1>
   markup for why: Kadence kept re-winning the font/spacing cascade fight
   on each live-text piece one at a time, so all of them are baked into a
   single flat picture instead — nothing left for a theme override to
   touch). This is purely sizing, same technique as the old headline-only
   image: the width clamp mirrors the exact scale that image used (built
   at the same file-pixel-to-CSS-pixel ratio, so the same clamp values
   still apply here even though the picture itself now contains all
   three pieces stacked together). */
.bp-hero-graphic{margin:0 0 clamp(18px,4vw,28px);line-height:0}
.bp-hero-graphic-img{display:block;width:clamp(217px,46vw,460px);height:auto}
.bp-hero p{font-size:clamp(15px,3.6vw,19px);line-height:1.6;color:rgba(255,255,255,.88);max-width:560px;margin:0 0 clamp(22px,5vw,34px)}
.bp-actions{display:flex;gap:10px;flex-wrap:wrap}
.bp-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border-radius:4px;font-weight:700!important;font-size:clamp(13px,3vw,15px);text-decoration:none;border:1px solid transparent;transition:transform .2s ease,background-color .2s ease,color .2s ease;cursor:pointer;white-space:nowrap}
.bp-btn-primary{background:var(--bp-red);color:#fff}
.bp-btn-primary:hover{background:#bb131a;color:#fff;transform:translateY(-1px)}
.bp-btn-outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.85)}
.bp-btn-outline:hover{background:#fff;color:var(--bp-ink)}
.bp-btn-light{background:#fff;color:var(--bp-ink)}
.bp-btn-light:hover{background:#f1f3f6;transform:translateY(-1px)}

/* Trust strip */
.bp-trust{background:var(--bp-blue-dark);padding:clamp(20px,4vw,30px) 0}
.bp-trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.bp-trust-item{display:flex;align-items:center;gap:12px;color:#fff}
/* Sized up + the stroke itself thickened (see bp_icon() stroke-width in
   the PHP) to match your photo's bigger, bolder trust-strip icons. */
.bp-trust-icon{width:clamp(32px,4.5vw,42px);height:clamp(32px,4.5vw,42px);flex:none;color:#fff;opacity:.95}
.bp-trust-icon svg{width:100%;height:100%}
.bp-trust-item h4{margin:0 0 2px;font-size:clamp(12px,2.6vw,14px);font-weight:400;color:#fff}
.bp-trust-item p{margin:0;font-size:clamp(11px,2.2vw,12.5px);color:rgba(255,255,255,.68);line-height:1.35}

.bp-section{padding:clamp(44px,8vw,72px) 0}
#bp-categories{scroll-margin-top:96px}
.bp-categories{background:#fff}
.bp-centered-heading{text-align:center;margin-bottom:clamp(24px,5vw,38px)}
.bp-centered-heading h2,.bp-section-head h2{font-size:clamp(24px,5.5vw,36px);line-height:1.1;letter-spacing:-.03em;margin:0;color:var(--bp-blue-dark);font-weight:700}
/* Short subtitle under a section heading, e.g. "Our finest pieces..."
   below the Editors Pick heading — body font, muted, matches the
   voice of .bp-story p / .bp-promo p elsewhere on the page. */
.bp-section-sub{font-size:clamp(13px,2.8vw,15px);color:var(--bp-muted);font-weight:400;margin:10px 0 0;max-width:52ch}
.bp-heading-rule{display:block;width:52px;height:4px;background:var(--bp-red);margin:12px auto 0}

/* Categories — photo zone on top (crossfades between two photos when a
   category has them), plain white caption panel below. Real photos come
   from the WooCommerce category thumbnail + product photography; falls
   back to icon art tiles when a category has no photos yet. */
.bp-category-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.bp-category-card{display:flex;flex-direction:column;border-radius:12px;overflow:hidden;background:#fff;text-decoration:none;color:var(--bp-blue-dark);box-shadow:0 8px 26px rgba(15,23,42,.05);transition:transform .25s ease,box-shadow .25s ease}
.bp-category-card:hover,.bp-category-card:focus-visible{transform:translateY(-4px);box-shadow:0 14px 34px rgba(15,23,42,.12)}
.bp-category-media{position:relative;width:100%;aspect-ratio:4/5;overflow:hidden;background:#f1f3f6}
.bp-category-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .7s ease,transform .4s ease}
.bp-category-photo.is-active{opacity:1}
.bp-category-card:hover .bp-category-photo.is-active{transform:scale(1.06)}
.bp-category-art{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transition:transform .3s ease}
.bp-category-card:hover .bp-category-art{transform:scale(1.04)}
.bp-category-art svg{width:60%;height:60%;opacity:.92}
.bp-art-shoes{background:linear-gradient(135deg,#eef3fb,#f9fafb);color:var(--bp-blue)}
.bp-art-clothing{background:linear-gradient(135deg,#f8f3f4,#fbfbfb);color:#8d1d26}
.bp-art-accessories{background:linear-gradient(135deg,#f4f4f4,#eceff3);color:#242b34}
.bp-art-bag{background:linear-gradient(135deg,#eef1f7,#f7f8fb);color:var(--bp-blue)}
.bp-category-copy{padding:clamp(14px,3vw,20px)}
.bp-category-copy h3{font-size:clamp(16px,3.6vw,24px);line-height:1;margin:0 0 6px;letter-spacing:-.01em;color:var(--bp-blue-dark)}
.bp-category-copy span{font-size:clamp(11px,2.6vw,15px);font-weight:400;display:inline-flex;align-items:center;gap:6px;color:var(--bp-red)}
.bp-category-copy b{transition:transform .2s ease;display:inline-block}
.bp-category-card:hover .bp-category-copy b{transform:translateX(4px)}

/* Featured products */
.bp-featured{background:var(--bp-light)}
.bp-section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:clamp(18px,4vw,30px);flex-wrap:wrap}
.bp-section-head>div:first-child .bp-heading-rule{margin-left:0;margin-right:0}
.bp-currency{display:flex;border:1px solid var(--bp-line);border-radius:6px;overflow:hidden;background:#fff}
.bp-currency button{border:0;background:#fff;padding:8px 13px;font-size:13px;font-weight:400;cursor:pointer;transition:background-color .2s ease,color .2s ease}
.bp-currency button.active{background:var(--bp-blue);color:#fff}
/* Card proportions (5-up grid, near-square image, tighter padding,
   smaller 2-line-clamped name, bolder standout price) are sized to
   mirror Jumia's denser product-card pattern per your request — sizes
   and the price weight are what changed; the fonts themselves stay
   Open Sans/unchanged, same as everywhere else on the site. */
.bp-products{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.bp-product-card{background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 6px 18px rgba(15,23,42,.05);transition:transform .25s ease,box-shadow .25s ease}
.bp-product-card:hover{transform:translateY(-4px);box-shadow:0 12px 26px rgba(15,23,42,.1)}
.bp-product-image{aspect-ratio:1/1;display:block;position:relative;background:#e9edf3;overflow:hidden}
.bp-product-image img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.bp-product-card:hover .bp-product-image img{transform:scale(1.05)}
.bp-pill{position:absolute;top:8px;left:8px;background:var(--bp-red);color:#fff;font-size:10px;font-weight:400;padding:4px 6px;border-radius:2px;letter-spacing:.04em}
.bp-product-info{padding:clamp(8px,1.8vw,14px)}
.bp-product-info h3{font-size:clamp(11.5px,2.2vw,13.5px);margin:0 0 6px;font-weight:400;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bp-product-info h3 a{color:var(--bp-ink)}
.bp-product-info h3 a:hover{color:var(--bp-blue)}
.bp-price{font-weight:700!important;font-size:clamp(13px,2.4vw,16px);color:var(--bp-ink)}
.bp-price-usd{color:#7b8492;display:none}
.bp-price-ghs{display:inline}
.bp-empty-products{grid-column:1/-1;background:#fff;border:1px dashed #cbd5e1;padding:36px 20px;text-align:center;border-radius:10px}
.bp-empty-products p{color:var(--bp-muted)}

/* All-products pagination */
.bp-pagination{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:clamp(24px,5vw,36px);flex-wrap:wrap}
.bp-pagination-link{font-weight:400;font-size:13px;letter-spacing:.03em;color:var(--bp-blue-dark);text-decoration:none;padding:10px 18px;border:1px solid var(--bp-line);border-radius:6px;transition:background-color .2s ease,color .2s ease}
.bp-pagination-link:hover{background:var(--bp-red);border-color:var(--bp-red);color:#fff}
.bp-pagination-status{font-size:13px;color:var(--bp-muted);font-weight:400}

/* Editors Pick — Instagram-style photo lookbook grid */
.bp-lookbook{background:#fff}
.bp-lookbook-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.bp-look-tile{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;border-radius:8px;background:#e9edf3}
.bp-look-tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.bp-look-tile:hover img{transform:scale(1.08)}
.bp-look-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.68) 100%)}
.bp-look-label{position:absolute;left:10px;right:10px;bottom:10px;color:#fff;font-size:clamp(11px,2.4vw,13px);font-weight:400;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* Split promo banner — two full-bleed photo panels */
.bp-split-promo{display:grid;grid-template-columns:1fr 1fr}
.bp-split-panel{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:#0a0e16}
.bp-split-panel img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.bp-split-panel:hover img{transform:scale(1.05)}
.bp-split-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,12,20,.1) 0%,rgba(8,12,20,.78) 100%)}
.bp-split-copy{position:absolute;left:0;right:0;bottom:0;padding:clamp(18px,4vw,32px);display:flex;flex-direction:column;gap:6px;color:#fff}
.bp-split-eyebrow{font-size:clamp(18px,4vw,30px);font-weight:400;letter-spacing:-.02em}
.bp-split-sub{font-size:clamp(12px,2.6vw,14px);color:rgba(255,255,255,.82);max-width:32ch}
.bp-split-cta{margin-top:6px;font-size:clamp(11px,2.4vw,13px);font-weight:400;display:inline-flex;align-items:center;gap:6px}
.bp-split-cta b{transition:transform .2s ease;display:inline-block}
.bp-split-panel:hover .bp-split-cta b{transform:translateX(4px)}

/* Brand story band */
.bp-story{background:var(--bp-blue-dark);color:#fff}
.bp-story-inner{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:center}
.bp-story h2{font-size:clamp(22px,5vw,34px);letter-spacing:-.02em;line-height:1.15;margin:0 0 14px;color:#fff}
.bp-story p{font-size:clamp(13.5px,3vw,16px);line-height:1.65;color:rgba(255,255,255,.78);margin:0;max-width:520px}
.bp-story-stats{display:flex;flex-direction:column;gap:18px;border-left:2px solid rgba(255,255,255,.15);padding-left:28px}
.bp-story-stats strong{display:block;font-size:clamp(20px,4.5vw,30px);letter-spacing:-.02em;color:#fff}
.bp-story-stats span{font-size:clamp(11px,2.4vw,13px);color:rgba(255,255,255,.65)}

/* Testimonials */
.bp-stars{display:flex;gap:3px;color:var(--bp-red);margin-bottom:12px}
.bp-stars svg{width:15px;height:15px}

/* Promo + newsletter */
.bp-promo{background:var(--bp-red);color:#fff;padding:clamp(40px,7vw,62px) 0}
.bp-promo-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.bp-promo h2{font-size:clamp(22px,5.5vw,40px);line-height:1.1;letter-spacing:-.03em;margin:0 0 8px}
.bp-promo p{margin:0;color:rgba(255,255,255,.82);font-size:clamp(13px,3vw,16px)}
.bp-newsletter{text-align:center;padding:clamp(48px,9vw,78px) 0}
.bp-newsletter h2{font-size:clamp(22px,5.5vw,38px);letter-spacing:-.03em;margin:0 0 10px;color:var(--bp-blue-dark)}
.bp-newsletter p{color:var(--bp-muted);margin:0 0 22px;font-size:clamp(13px,3vw,16px)}

@media(max-width:1000px){
  .bp-products{grid-template-columns:repeat(4,1fr)}
  .bp-hero{min-height:min(620px,100svh)}
  .bp-story-inner{grid-template-columns:1fr}
  .bp-story-stats{flex-direction:row;border-left:0;border-top:2px solid rgba(255,255,255,.15);padding-left:0;padding-top:22px;flex-wrap:wrap;gap:22px 32px}
}
@media(max-width:720px){
  .bp-hero-overlay{background:linear-gradient(90deg,rgba(8,12,20,.94) 0%,rgba(8,12,20,.82) 55%,rgba(8,12,20,.6) 100%)}
  .bp-hero-media{object-position:85% center}
  .bp-hero-copy{max-width:100%}
  .bp-actions .bp-btn{flex:1 1 auto}
  /* 2-up on mobile, not a single huge stacked column */
  .bp-category-grid,.bp-products{grid-template-columns:1fr 1fr;gap:10px}
  .bp-lookbook-grid{grid-template-columns:repeat(2,1fr)}
  .bp-section-head{align-items:flex-start;flex-direction:column;gap:14px}
  .bp-promo-inner{align-items:flex-start;flex-direction:column}
}
@media(max-width:480px){
  .bp-container{width:min(calc(100% - 24px),1180px)}
  .bp-trust-grid{grid-template-columns:1fr 1fr;gap:14px 10px}
}
@media(prefers-reduced-motion:reduce){
  .bp-home *{transition-duration:.001ms!important;animation-duration:.001ms!important}
}