margins — WordPress wraps raw shortcode output in
tags with default browser margin when it sits in a Page's content editor; that's the gap that used to show up between the Hero and the Ticker (and similar seams elsewhere). the_content filter in functions.php also disables wpautop outright on the [btpk_home] page, this is just a defensive backstop. */ .btpk-main > p{ margin:0; } html{ overflow-x:hidden; } body{ overflow-x:hidden; } .btpk-header-wrap, .btpk-hero, .btpk-ticker, .btpk-categories, .btpk-promo-banners, .btpk-about, .btpk-products, .btpk-deal-banner, .btpk-new-arrivals, .btpk-testimonials, .btpk-cta, .btpk-blog, .btpk-instagram, .btpk-faq, .btpk-trust, .btpk-newsletter, .btpk-footer{ font-family: var(--font-sans); color: var(--btpk-ink); box-sizing: border-box; } .btpk-header-wrap *, .btpk-hero *, .btpk-ticker *, .btpk-categories *, .btpk-promo-banners *, .btpk-about *, .btpk-products *, .btpk-deal-banner *, .btpk-new-arrivals *, .btpk-testimonials *, .btpk-cta *, .btpk-blog *, .btpk-instagram *, .btpk-faq *, .btpk-trust *, .btpk-newsletter *, .btpk-footer *{ box-sizing:border-box; } /* ===================================================================== HARDENING — protects this theme's layout when it's dropped inside a page builder (Elementor, etc). Page builders apply their own global resets, widget spacing, responsive width caps, and "entrance animation" classes (elements start at opacity:0 until a scroll trigger fires) — those collide with this theme's fixed grid markup. This block forces the properties that matter back to our values. Best practice is still to NOT wrap these shortcodes in a page builder at all — see README "Build the homepage" — but this keeps things working even if they end up inside one. ===================================================================== */ [class^="btpk-"], [class*=" btpk-"]{ opacity: 1 !important; visibility: visible !important; } .btpk-hero-inner{ display:grid !important; grid-template-columns:1fr 1fr !important; } .btpk-about-inner{ display:grid !important; grid-template-columns:1fr 1fr !important; } .btpk-promo-banners{ display:grid !important; grid-template-columns:1fr 1fr !important; } .btpk-promo-banner{ display:grid !important; grid-template-columns:1.15fr 1fr !important; } .btpk-products-grid{ display:grid !important; grid-template-columns:repeat(4,1fr) !important; } .btpk-new-arrivals-grid{ display:grid !important; grid-template-columns:repeat(5,1fr) !important; } .btpk-blog-grid{ display:grid !important; grid-template-columns:repeat(3,1fr) !important; } .btpk-instagram-grid{ display:grid !important; grid-template-columns:repeat(5,1fr) !important; } .btpk-faq-grid{ display:grid !important; grid-template-columns:1.3fr 1fr !important; } .btpk-footer-grid{ display:grid !important; grid-template-columns:1.4fr 1fr 1fr 1.2fr !important; } .btpk-deal-banner{ display:grid !important; grid-template-columns:1fr 1fr !important; } /* ===================================================================== ANTI-INHERITANCE — Hello Elementor (and the Elementor plugin, if a builder is ever added later) write global look-and-feel straight onto bare tags — a, a:hover, a:focus, h1-h6, p, ul, li, button — using CSS custom properties (--e-global-color-*). A bare "a:hover{color:...}" rule has higher specificity than a single class like .btpk-btn-primary, so without this block, hover/focus states can silently pick up Elementor/theme colors instead of ours (this bit us on the Shop Now button — hover text was inheriting the theme's link-hover color instead of staying white). Every interactive element's color for every state is pinned here with !important so nothing external can leak in, regardless of load order or specificity. ===================================================================== */ [class^="btpk-"] a, [class*=" btpk-"] a, [class^="btpk-"] button, [class*=" btpk-"] button{ font-family: inherit; text-decoration: none; box-shadow: none; } [class^="btpk-"] h1, [class^="btpk-"] h2, [class^="btpk-"] h3, [class^="btpk-"] h4, [class*=" btpk-"] h1, [class*=" btpk-"] h2, [class*=" btpk-"] h3, [class*=" btpk-"] h4{ font-family: inherit; margin: 0; } [class^="btpk-"] ul, [class*=" btpk-"] ul{ list-style: none; margin: 0; padding: 0; } [class^="btpk-"] p, [class*=" btpk-"] p{ margin: 0; } .btpk-nav a, .btpk-nav a:link, .btpk-nav a:visited{ color:var(--btpk-ink) !important; } .btpk-nav a:hover, .btpk-nav a:focus{ color:var(--btpk-pink) !important; } .btpk-logo, .btpk-logo:link, .btpk-logo:visited, .btpk-logo:hover{ color:var(--btpk-ink) !important; } .btpk-header-icons a, .btpk-header-icons a:link, .btpk-header-icons a:visited, .btpk-header-icons a:hover{ color:var(--btpk-ink) !important; } .btpk-category-item, .btpk-category-item:link, .btpk-category-item:visited, .btpk-category-item:hover{ color:var(--btpk-ink) !important; } .btpk-blog-readmore, .btpk-blog-readmore:link, .btpk-blog-readmore:visited{ color:var(--btpk-pink) !important; } .btpk-footer-col a, .btpk-footer-col a:link, .btpk-footer-col a:visited{ color:var(--btpk-gray) !important; } .btpk-nav-social a, .btpk-nav-social a:link, .btpk-nav-social a:visited{ color:var(--btpk-pink) !important; } .btpk-footer-col a:hover, .btpk-footer-col a:focus{ color:var(--btpk-pink) !important; } .btpk-eyebrow{ font-size:clamp(14px, 1.5vw, 16px); font-weight:700; color:var(--btpk-gray); letter-spacing:0.04em; margin-bottom:8px; } .btpk-heading{ font-family:var(--font-serif); font-size:clamp(27px, 3.5vw, 36px); font-weight:700; margin:0; color:var(--btpk-ink); } .btpk-heading-center{ max-width:560px; margin:0 auto 28px; } .btpk-heading-light{ color:#fff; } /* Accent word/phrase color: pink by default (light sections), but gold on every dark-background section — pink-on-pink text was rendering invisible on Newsletter ("Updates on Our Latest Offers" vanished) and would do the same anywhere else this pattern repeats. */ .btpk-accent{ color:var(--btpk-pink); } .btpk-categories .btpk-accent, .btpk-why-choose .btpk-accent, .btpk-instagram .btpk-accent, .btpk-video-testimonials .btpk-accent, .btpk-newsletter .btpk-accent, .btpk-spotlight .btpk-accent{ color:var(--btpk-gold) !important; } .btpk-accent-gold{ color:var(--btpk-gold); } .btpk-btn{ display:inline-block; padding:15px 30px; border-radius:30px; text-decoration:none; font-size:clamp(12px, 1.6vw, 16px); font-weight:700; white-space:nowrap; transition:all .25s; } .btpk-btn-primary, .btpk-btn-primary:link, .btpk-btn-primary:visited{ background:var(--btpk-pink) !important; color:#fff !important; } .btpk-btn-primary:hover, .btpk-btn-primary:focus, .btpk-btn-primary:active{ background:var(--btpk-pink-dark) !important; color:#fff !important; transform:translateY(-2px); } .btpk-btn-light, .btpk-btn-light:link, .btpk-btn-light:visited{ background:#fff !important; color:var(--btpk-ink) !important; } .btpk-btn-light:hover, .btpk-btn-light:focus, .btpk-btn-light:active{ background:var(--btpk-gold) !important; color:var(--btpk-ink-dark) !important; transform:translateY(-2px); } .btpk-btn-gold, .btpk-btn-gold:link, .btpk-btn-gold:visited{ background:var(--btpk-gold) !important; color:var(--btpk-ink-dark) !important; } .btpk-btn-gold:hover, .btpk-btn-gold:focus, .btpk-btn-gold:active{ background:#fff !important; color:var(--btpk-ink-dark) !important; transform:translateY(-2px); } .btpk-link-underline, .btpk-link-underline:link, .btpk-link-underline:visited{ color:var(--btpk-ink) !important; text-decoration:underline; font-size:clamp(13px, 1.7vw, 17px); font-weight:700; } .btpk-link-underline:hover, .btpk-link-underline:focus{ color:var(--btpk-pink) !important; } .btpk-link-light, .btpk-link-light:link, .btpk-link-light:visited{ color:#fff !important; } .btpk-link-light:hover, .btpk-link-light:focus{ color:var(--btpk-gold) !important; } /* Top bar + header */ .btpk-topbar{ background:var(--btpk-ink-dark); color:#fff; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; row-gap:6px; column-gap:28px; padding:10px 24px; font-size:clamp(11px, 1.4vw, 14.5px); text-align:center; } .btpk-topbar a{ color:#fff; text-decoration:underline; font-weight:700; } .btpk-topbar-content{ display:contents; } .btpk-topbar-marquee-track:nth-of-type(2){ display:none; } .btpk-topbar-social{ display:flex; gap:14px; } .btpk-topbar-social a{ color:var(--btpk-pink-tint2); text-decoration:none; font-weight:700; } .btpk-icon-label{ display:none; } .btpk-nav-social{ display:none; } .btpk-drawer-header{ display:none; } .btpk-drawer-search{ display:none; } .btpk-header{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; row-gap:0; padding:18px clamp(20px, 4vw, 48px) 0; background:#fff; } .btpk-logo{ display:flex; align-items:center; justify-content:center; gap:8px; font-family:var(--font-serif); font-size:clamp(19px, 2.4vw, 25px); font-weight:700; color:var(--btpk-ink); text-decoration:none; flex:1 1 auto; order:2; } .btpk-logo img{ max-height:100px !important; width:auto; } .btpk-logo-icon{ color:var(--btpk-pink); } .btpk-nav{ display:flex; gap:4px; flex-wrap:nowrap; justify-content:center; flex:none; width:100%; order:4; margin-top:14px; padding:14px 0; border-top:1px solid var(--btpk-pink-tint2); } .btpk-nav::-webkit-scrollbar{ display:none; } .btpk-nav > li{ flex-shrink:0; white-space:nowrap; } .btpk-nav li{ list-style:none; margin:0; padding:0; position:relative; display:flex; align-items:center; } .btpk-nav > li > a{ padding:10px 10px; } .btpk-nav a{ color:var(--btpk-ink); text-decoration:none; font-size:clamp(12px, 1.5vw, 14.5px); font-weight:600; white-space:nowrap; display:flex; align-items:center; gap:4px; } .btpk-nav a:hover{ color:var(--btpk-pink); } .btpk-nav li.menu-item-has-children > a::after{ content:'▾'; font-size:10px; color:#B7B2BA; margin-left:1px; } .btpk-nav .sub-menu{ list-style:none; margin:0; position:absolute; top:100%; left:50%; transform:translateX(-50%); padding-top:10px; z-index:60; opacity:0; visibility:hidden; transition:opacity .15s ease; display:flex; gap:36px; } .btpk-nav > li > .sub-menu{ background:#fff; border-radius:14px; box-shadow:0 22px 48px rgba(35,42,34,0.16); padding:26px 30px; min-width:230px; } .btpk-nav > li:hover > .sub-menu, .btpk-nav > li.btpk-mega-open > .sub-menu{ opacity:1; visibility:visible; } .btpk-nav .sub-menu li{ display:block; width:100%; } .btpk-nav .sub-menu > li{ flex:1; min-width:160px; } .btpk-nav .sub-menu > li > a{ display:block; padding:6px 0; font-size:13.5px; } .btpk-nav .sub-menu > li.menu-item-has-children > a{ font-size:11.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--btpk-pink) !important; margin-bottom:6px; padding-bottom:10px; pointer-events:none; } .btpk-nav .sub-menu > li.menu-item-has-children > a::after{ content:''; } .btpk-nav .sub-menu .sub-menu{ position:static; transform:none; opacity:1; visibility:visible; padding:0; display:flex; flex-direction:column; gap:2px; } .btpk-nav .sub-menu .sub-menu > li > a{ padding:6px 0; font-size:13.5px; font-weight:600; } .btpk-nav > li > .sub-menu:not(:has(> li.menu-item-has-children)){ display:block; column-count:1; width:260px; } .btpk-nav > li > .sub-menu:not(:has(> li.menu-item-has-children)) > li{ break-inside:avoid; } .btpk-mobile-menu-toggle{ display:none; } .btpk-header-icons{ display:flex; align-items:center; gap:16px; flex:0 0 auto; position:relative; order:3; } .btpk-header-icons a{ text-decoration:none; color:var(--btpk-ink); position:relative; } .btpk-cart-count.is-empty{ display:none; } /* ---- Header search: inline input in the header bar (replaces the search icon entirely) + a live-results dropdown below it. ---- */ .btpk-header-search{ position:relative; display:flex; align-items:center; gap:8px; background:var(--btpk-pink-tint); border:1px solid var(--btpk-pink-tint2); border-radius:20px; padding:8px 14px; width:clamp(180px, 20vw, 260px); flex:0 0 auto; order:1; } .btpk-search-inline-icon{ flex-shrink:0; color:var(--btpk-gray); } .btpk-header-search .btpk-search-input{ border:none; outline:none; background:none; font-size:13px; font-family:var(--font-sans); color:var(--btpk-ink); width:100%; padding:0; } .btpk-header-search .btpk-search-input::placeholder{ color:var(--btpk-gray); } .btpk-search-panel{ position:absolute; top:calc(100% + 14px); left:0; right:0; min-width:280px; background:#fff; border-radius:12px; box-shadow:0 20px 50px rgba(0,0,0,.16); padding:0; opacity:0; visibility:hidden; transform:translateY(-8px); transition:all .18s ease; z-index:60; } .btpk-header-search.is-open .btpk-search-panel{ opacity:1; visibility:visible; transform:translateY(0); padding:10px; } .btpk-search-results{ margin-top:10px; max-height:360px; overflow-y:auto; display:flex; flex-direction:column; gap:4px; } .btpk-search-result{ display:flex; align-items:center; gap:12px; padding:8px; border-radius:8px; text-decoration:none; color:var(--btpk-ink); } .btpk-search-result:hover{ background:var(--btpk-pink-tint); } .btpk-search-result img{ width:42px; height:42px; object-fit:cover; border-radius:6px; flex-shrink:0; background:var(--btpk-pink-tint); } .btpk-search-result-name{ font-size:clamp(12px, 1.4vw, 13.5px); font-weight:700; line-height:1.35; } .btpk-search-result-price{ font-size:clamp(11px, 1.2vw, 12.5px); color:var(--btpk-gray); } .btpk-search-empty, .btpk-search-hint{ font-size:12.5px; color:var(--btpk-gray); padding:8px 4px; } /* ---- Full-page pink background on Shop/category/tag archives AND single-product pages — set on body so it reaches the viewport edges, not just inside the max-width content container. ---- */ body.woocommerce-shop, body.tax-product_cat, body.tax-product_tag, body.single-product{ background:var(--btpk-pink-tint); } /* ---- WooCommerce's own breadcrumb — sitewide (loaded on every page, unlike btpk-shop.css/btpk-single.css) so Shop, category, and single product pages all get the same top spacing under the header. ---- */ body .woocommerce-breadcrumb{ max-width:1280px; margin:0 auto !important; padding:clamp(32px, 5vw, 56px) clamp(16px, 4vw, 24px) 0 !important; font-size:clamp(11px, 1.4vw, 14.5px); color:var(--btpk-gray); box-sizing:border-box; } .woocommerce-breadcrumb a{ color:var(--btpk-gray); text-decoration:none; } .woocommerce-breadcrumb a:hover{ color:var(--btpk-pink); } .btpk-cart-count{ position:absolute; top:-8px; right:-10px; background:var(--btpk-pink); color:#fff; font-size:clamp(8.5px, 1.1vw, 11.5px); border-radius:50%; width:16px; height:16px; display:flex; align-items:center; justify-content:center; } /* Hero */ .btpk-hero{ position:relative; background:var(--btpk-pink-tint); overflow:hidden; padding:clamp(28px, 5vw, 48px) clamp(28px, 5vw, 48px) 0; } .btpk-hero-inner{ display:grid; grid-template-columns:1fr 1fr; align-items:stretch; gap:40px; max-width:1200px; margin:0 auto; min-height:0; } .btpk-hero-copy{ display:flex; flex-direction:column; gap:22px; } .btpk-hero-badge{ display:inline-flex; align-items:center; gap:12px; background:#fff; padding:12px 24px 12px 12px; border-radius:30px; width:fit-content; box-shadow:0 8px 20px rgba(0,0,0,.05); font-size:clamp(13.5px, 1.7vw, 18px); font-weight:700; } .btpk-hero-badge-icon{ width:38px; height:38px; border-radius:50%; background:#FBE4EF; display:flex; align-items:center; justify-content:center; font-size:clamp(13.5px, 1.7vw, 18px); } .btpk-hero-heading{ font-family:var(--font-serif); font-size:clamp(31.5px, 5vw, 54px); line-height:1.2; font-weight:700; margin:0; max-width:560px; } .btpk-hero-sub{ font-size:clamp(16px, 1.5vw, 18px); line-height:1.65; color:var(--btpk-gray); margin:0; max-width:460px; } .btpk-hero-actions{ display:flex; align-items:center; gap:24px; flex-wrap:wrap; margin-top:4px; } .btpk-hero-media{ position:relative; min-height:0; display:flex; align-items:center; justify-content:center; } .btpk-hero-photo{ max-width:480px; height:100%; max-height:520px; border-radius:16px; object-fit:cover; } .btpk-hero-floatbadge{ position:absolute; background:#fff; border-radius:30px; padding:10px 22px 10px 10px; display:flex; align-items:center; gap:12px; box-shadow:0 14px 34px rgba(0,0,0,.14); font-size:clamp(12px, 1.6vw, 16px); font-weight:700; } .btpk-hero-floatbadge-1{ left:-6px; bottom:30%; } .btpk-hero-floatbadge-2{ right:-6px; bottom:6%; } .btpk-badge-circle{ width:38px; height:38px; border-radius:50%; background:var(--btpk-pink); display:flex; align-items:center; justify-content:center; font-size:clamp(14.5px, 1.8vw, 19px); } /* Ticker — same brand pink as Categories below (visual continuity); a thin light divider marks the seam instead of a color jump. */ .btpk-ticker{ background:var(--btpk-pink); overflow:hidden; padding:28px 0; border-bottom:1px solid rgba(255,255,255,.18); margin-bottom:30px; display:block; } .btpk-hero + .btpk-ticker, .btpk-hero ~ .btpk-ticker{ margin-top:0; } .btpk-ticker-track{ display:flex; gap:48px; width:max-content; animation:btpk-scroll 26s linear infinite; max-width:none; } .btpk-ticker-item{ display:flex; align-items:center; gap:16px; font-size:clamp(16px, 2.1vw, 21.5px); font-weight:800; letter-spacing:.02em; color:var(--btpk-pink-tint2); white-space:nowrap; } .btpk-ticker-star{ color:var(--btpk-gold); font-size:clamp(19px, 2.4vw, 25px); } @keyframes btpk-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } } @keyframes btpk-topbar-marquee{ from{ transform:translateX(0); } to{ transform:translateX(-100%); } } /* Categories — dark beat in the homepage's alternating rhythm */ .btpk-categories{ padding:20px 24px 20px; text-align:center; background:var(--btpk-pink); } .btpk-categories .btpk-eyebrow{ color:#F6D3E4; } .btpk-categories .btpk-heading{ color:#fff; } .btpk-categories .btpk-heading .btpk-accent{ color:var(--btpk-gold); } .btpk-categories-carousel{ position:relative; display:flex; align-items:center; gap:8px; margin-top:36px; } .btpk-categories-scroll{ overflow:hidden; width:100%; flex:1; } .btpk-categories-track{ display:flex; gap:32px; padding-top:12px; transition:transform .45s ease; will-change:transform; } .btpk-category-item{ text-decoration:none; color:#fff; display:flex; flex-direction:column; align-items:center; gap:12px; flex:0 0 calc((100% - 4*32px)/5); width:calc((100% - 128px)/5); transition:transform .2s; } .btpk-cat-arrow{ flex-shrink:0; width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,.35); background:rgba(255,255,255,.12); color:#fff; font-size:20px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s; z-index:2; } .btpk-cat-arrow:hover{ background:rgba(255,255,255,.25); } .btpk-cat-arrow[disabled]{ opacity:.35; cursor:default; } .btpk-category-item:hover{ transform:translateY(-6px); } .btpk-category-photo{ width:150px; height:150px; border-radius:50%; background-color:var(--btpk-pink-tint); background-size:cover; background-position:center; } .btpk-category-name{ font-size:clamp(13px, 1.7vw, 17px); font-weight:700; color:var(--btpk-gold); } .btpk-category-count{ font-size:clamp(10.5px, 1.4vw, 14px); color:#F6D3E4; } /* Promo banners — full-bleed light-pink section background (see the ::before bleed trick further down), matching the About/Testimonials light beats in the homepage's alternating light-pink/dark rhythm. */ .btpk-promo-banners{ display:grid; grid-template-columns:1fr 1fr; gap:24px; padding:64px 24px; max-width:1200px; margin:0 auto; position:relative; } .btpk-promo-banner{ background:linear-gradient(135deg,var(--btpk-pink),var(--btpk-pink-dark)); border-radius:16px; display:grid; grid-template-columns:1.15fr 1fr; align-items:stretch; min-height:220px; overflow:hidden; } .btpk-promo-copy{ padding:32px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:14px; color:#fff; } .btpk-promo-tag{ background:var(--btpk-gold); color:var(--btpk-ink-dark); font-size:clamp(10px, 1.3vw, 13.5px); font-weight:800; padding:6px 14px; border-radius:20px; width:fit-content; } .btpk-promo-title{ font-family:var(--font-serif); font-size:clamp(21.5px, 2.5vw, 27px); font-weight:700; line-height:1.25; } .btpk-promo-desc{ font-size:clamp(12px, 1.6vw, 16px); color:#F6D3E4; line-height:1.6; margin:0; align-self:stretch; } .btpk-promo-media{ padding:16px 16px 16px 0; } .btpk-promo-media img{ width:100%; height:100%; object-fit:cover; border-radius:14px; } /* About — border-top separates it from Promo Banners just above, since both use the same light pink-tint background and would otherwise blend into one block. */ .btpk-about{ background:var(--btpk-pink-tint); padding:64px 24px 80px; border-top:1px solid var(--btpk-pink-tint2); } .btpk-about-inner{ display:grid; grid-template-columns:1fr 1fr; gap:56px; max-width:1200px; margin:0 auto; align-items:center; } .btpk-about-media{ position:relative; min-height:460px; display:flex; align-items:center; justify-content:center; } .btpk-about-blob{ position:absolute; left:0; top:6%; width:78%; height:88%; background:var(--btpk-pink-tint2); border-radius:48% 52% 55% 45% / 55% 45% 55% 45%; } .btpk-about-photo{ position:relative; width:72%; aspect-ratio:6/7; border-radius:50% 50% 48% 52% / 55% 55% 45% 45%; overflow:hidden; background:#eee; box-shadow:0 24px 50px rgba(0,0,0,.12); } .btpk-about-photo img{ width:100%; height:100%; object-fit:cover; display:block; } .btpk-about-accent{ position:absolute; right:6%; bottom:4%; width:160px; height:160px; border-radius:50%; overflow:hidden; border:8px solid var(--btpk-pink-tint); box-shadow:0 12px 30px rgba(0,0,0,.15); background:#eee; } .btpk-about-accent img{ width:100%; height:100%; object-fit:cover; display:block; } .btpk-about-body{ font-size:clamp(16px, 1.5vw, 17.5px); line-height:1.75; color:var(--btpk-gray); margin:18px 0 28px; max-width:440px; } .btpk-about-stats{ display:flex; gap:36px; margin-bottom:28px; flex-wrap:wrap; } .btpk-stat-value{ font-family:var(--font-serif); font-size:clamp(23.5px, 3.1vw, 31.5px); font-weight:700; color:var(--btpk-pink); } .btpk-stat-label{ font-size:clamp(11px, 1.4vw, 14.5px); color:var(--btpk-gray-light); margin-top:4px; } .btpk-signature{ font-family:var(--font-script); font-size:clamp(25.5px, 3.3vw, 34px); } /* Why Choose Us — dark beat in the homepage's alternating rhythm */ .btpk-why-choose{ padding:64px 24px; max-width:1200px; margin:0 auto; position:relative; } .btpk-why-choose .btpk-heading{ color:#fff; } .btpk-why-choose-grid{ display:grid; grid-template-columns:1fr 1.7fr; gap:24px; margin-top:36px; } .btpk-why-choose-media{ position:relative; border-radius:24px; overflow:hidden; background:var(--btpk-pink-tint); min-height:320px; } .btpk-why-choose-media img{ width:100%; height:100%; object-fit:cover; display:block; } .btpk-why-choose-play{ position:absolute; left:24px; bottom:24px; width:60px; height:60px; border-radius:50%; background:#fff; box-shadow:0 10px 30px rgba(0,0,0,0.18); display:flex; align-items:center; justify-content:center; text-decoration:none; cursor:pointer; } .btpk-why-choose-play-icon{ width:0; height:0; border-top:10px solid transparent; border-bottom:10px solid transparent; border-left:16px solid var(--btpk-pink); margin-left:4px; } .btpk-why-choose-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; } .btpk-why-choose-card{ border:1.5px dashed rgba(255,255,255,.28); border-radius:16px; padding:30px 22px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:16px; background:rgba(255,255,255,.05); } .btpk-why-choose-icon{ width:64px; height:64px; border-radius:50%; background:var(--btpk-pink-tint); color:var(--btpk-pink); display:flex; align-items:center; justify-content:center; } .btpk-why-choose-title{ font-size:clamp(14.5px, 1.8vw, 19px); font-weight:700; color:#fff; } .btpk-why-choose-desc{ font-size:clamp(11.5px, 1.5vw, 15.5px); color:#F6D3E4; line-height:1.6; margin:0; } /* Placeholder box — shown wherever a real photo/product isn't set yet */ .btpk-img-placeholder{ width:100%; height:100%; min-height:80px; display:flex; align-items:center; justify-content:center; background:var(--btpk-pink-tint); border:1px dashed #E6B9CC; color:#C9899E; font-size:clamp(10px, 1.3vw, 13.5px); font-style:italic; text-align:center; padding:8px; box-sizing:border-box; } .btpk-category-photo-empty{ display:flex; align-items:center; justify-content:center; } .btpk-category-photo-empty::after{ content:'Photo'; font-size:clamp(9.5px, 1.2vw, 12.5px); font-style:italic; color:#C9899E; } .btpk-instagram-item-empty{ display:block; } /* Products header + grid (shared by best sellers / new arrivals / blog) — Best Sellers + Sale Products (both use .btpk-products) are the light beats either side of the dark Spotlight section. */ .btpk-products, .btpk-new-arrivals, .btpk-blog{ padding:64px 24px; max-width:1200px; margin:0 auto; } .btpk-products{ position:relative; } .btpk-products-header{ display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:8px; flex-wrap:wrap; gap:16px; } .btpk-new-arrivals-intro{ font-size:clamp(12px, 1.6vw, 16px); color:var(--btpk-gray-light); max-width:340px; margin:8px 0 0; } .btpk-filter-tabs{ display:flex; gap:10px; margin:28px 0; flex-wrap:wrap; } .btpk-filter-tab{ padding:11px 22px; border-radius:20px; font-size:clamp(11.5px, 1.5vw, 15.5px); font-weight:700; background:#fff; color:var(--btpk-ink); border:1px solid var(--btpk-pink-tint2); white-space:nowrap; cursor:pointer; font-family:var(--font-sans); transition:all .2s; } .btpk-filter-tab:hover, .btpk-filter-tab.is-active{ background:var(--btpk-pink); color:#fff; } .btpk-products-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; } .btpk-new-arrivals-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:18px; } .btpk-product-card{ position:relative; background:#fff; border-radius:12px; overflow:hidden; border:1px solid var(--btpk-pink-tint2); transition:box-shadow .2s, transform .2s; } .btpk-product-card:hover{ box-shadow:0 16px 34px rgba(35,42,34,.14); transform:translateY(-3px); } .btpk-product-link-overlay{ position:absolute; inset:0; z-index:1; text-indent:-9999px; overflow:hidden; } .btpk-product-media{ aspect-ratio:1/1; background:var(--btpk-pink-tint); position:relative; } .btpk-product-media img{ width:100%; height:100%; object-fit:cover; display:block; } .btpk-badge-sale, .btpk-badge-new{ position:absolute; top:12px; left:12px; background:var(--btpk-pink); color:#fff; font-size:clamp(9px, 1.2vw, 12px); font-weight:800; padding:4px 10px; border-radius:14px; z-index:2; } .btpk-badge-new{ background:var(--btpk-gold); color:var(--btpk-ink-dark); } .btpk-wishlist-icon{ position:absolute; top:12px; right:12px; font-size:clamp(13.5px, 1.7vw, 18px); z-index:2; line-height:1; } .btpk-wishlist-fallback{ background:rgba(255,255,255,.9); border:none; width:30px; height:30px; border-radius:50%; cursor:pointer; font-size:clamp(13.5px, 1.7vw, 18px); color:var(--btpk-ink); display:flex; align-items:center; justify-content:center; transition:all .2s; } .btpk-wishlist-fallback:hover{ background:#fff; transform:scale(1.08); } .btpk-wishlist-fallback.is-active{ color:var(--btpk-pink); } .btpk-product-info{ padding:16px 18px; position:relative; } .btpk-product-cat{ font-size:clamp(11px, 1.4vw, 14.5px); color:var(--btpk-gray-light); margin-bottom:6px; } .btpk-product-name{ display:block; font-size:clamp(13px, 1.7vw, 17px); font-weight:700; color:var(--btpk-ink); margin-bottom:8px; text-decoration:none; } .btpk-product-price{ font-size:clamp(14px, 1.8vw, 18.5px); font-weight:800; color:var(--btpk-pink); } .btpk-product-price del{ color:#B7BAAC; font-weight:600; font-size:clamp(11.5px, 1.5vw, 15.5px); margin-left:6px; } .btpk-product-price .btpk-price-current{ text-decoration:none; } .btpk-sale-tile{ background:var(--btpk-pink); border-radius:12px; display:flex; flex-direction:column; justify-content:flex-end; padding:18px; min-height:260px; } .btpk-sale-tile-big{ font-size:clamp(22px, 2.9vw, 29.5px); font-weight:800; color:#fff; } .btpk-sale-tile-sub{ font-size:clamp(9.5px, 1.2vw, 12.5px); color:var(--btpk-gold); font-weight:700; margin-top:4px; } /* Deal banner + countdown */ .btpk-deal-banner{ margin:24px 24px 56px; max-width:1152px; margin-left:auto; margin-right:auto; background:var(--btpk-pink); border-radius:16px; padding:40px 44px; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:24px; } .btpk-deal-eyebrow{ font-size:clamp(11.5px, 1.5vw, 15.5px); font-weight:700; color:var(--btpk-gold); letter-spacing:.04em; margin-bottom:10px; } .btpk-deal-title{ font-family:var(--font-serif); font-size:clamp(25px, 3vw, 34px); font-weight:700; color:#fff; margin-bottom:12px; line-height:1.3; } .btpk-deal-desc{ font-size:clamp(12px, 1.6vw, 16px); color:#F6D3E4; margin:0 0 20px; } .btpk-countdown{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; } .btpk-countdown-box{ background:#fff; border-radius:10px; width:64px; height:64px; display:flex; flex-direction:column; align-items:center; justify-content:center; } .btpk-countdown-box span:first-child{ font-size:clamp(17px, 2.2vw, 22.5px); font-weight:800; color:var(--btpk-pink); } .btpk-cd-label{ font-size:clamp(8px, 1vw, 10.5px); color:var(--btpk-gray-light); } /* Testimonials — border-top separates it from Best Sellers/Sale Products just above, since both use the same pink-tint background. */ .btpk-testimonials{ background:var(--btpk-pink-tint); padding:72px 0; text-align:center; border-top:1px solid var(--btpk-pink-tint2); } .btpk-testimonials-scroll{ overflow:hidden; width:100%; } .btpk-testimonials-track{ display:flex; gap:24px; width:max-content; animation:btpk-scroll 34s linear infinite; padding:8px 24px; } .btpk-testimonial-card{ background:#fff; border-radius:14px; padding:28px; width:320px; flex-shrink:0; text-align:left; box-shadow:0 10px 24px rgba(194,31,107,.08); } .btpk-testimonial-title{ font-family:var(--font-serif); font-size:clamp(14.5px, 1.8vw, 19px); font-weight:700; margin-bottom:12px; } .btpk-testimonial-quote{ font-size:clamp(12px, 1.6vw, 16px); line-height:1.7; color:#4A4E44; margin:0 0 16px; } .btpk-testimonial-stars{ color:var(--btpk-gold); font-size:clamp(13px, 1.7vw, 17px); letter-spacing:2px; margin-bottom:10px; } .btpk-testimonial-name{ font-size:clamp(12px, 1.6vw, 16px); font-weight:800; } /* CTA */ .btpk-cta{ background:var(--btpk-pink); padding:clamp(40px, 6vw, 64px) 24px; text-align:center; } .btpk-cta .btpk-heading{ font-size:clamp(29.5px, 4vw, 38.5px); margin-bottom:16px; } .btpk-cta-sub{ font-size:clamp(16px, 1.5vw, 18px); color:#F6D3E4; margin:0 0 30px; max-width:520px; margin-left:auto; margin-right:auto; } .btpk-cta-actions{ display:flex; justify-content:center; gap:24px; flex-wrap:wrap; } /* Blog */ .btpk-blog{ background:var(--btpk-pink-tint); padding:56px 24px; max-width:none; } .btpk-blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; max-width:1200px; margin:0 auto; } .btpk-blog-card{ background:#fff; border-radius:12px; overflow:hidden; border:1px solid var(--btpk-pink-tint2); } .btpk-blog-media img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; } .btpk-blog-info{ padding:18px 20px; } .btpk-blog-date{ font-size:clamp(10.5px, 1.4vw, 14px); color:var(--btpk-gray-light); margin-bottom:8px; } .btpk-blog-title{ font-size:clamp(13.5px, 1.7vw, 18px); font-weight:700; line-height:1.4; margin-bottom:10px; } .btpk-blog-readmore{ font-size:clamp(11px, 1.4vw, 14.5px); font-weight:700; color:var(--btpk-pink); text-decoration:none; } .btpk-blog-readmore:hover{ text-decoration:underline; } /* Instagram — dark beat before the closing Trust strip */ .btpk-instagram{ padding:56px 24px; max-width:1200px; margin:0 auto; position:relative; } .btpk-instagram .btpk-heading{ color:#fff; } .btpk-instagram-header{ display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:28px; } .btpk-instagram-handle{ color:var(--btpk-gold); text-decoration:none; font-weight:700; font-size:clamp(12px, 1.6vw, 16px); } .btpk-instagram-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; } .btpk-instagram-item{ display:block; aspect-ratio:1/1; border-radius:10px; background-color:var(--btpk-pink-tint); background-size:cover; background-position:center; } /* Full-bleed light/dark background trick — these sections keep a centered max-width layout for their content but need the background itself to reach the full viewport edge (like Hero/About do natively). A pseudo-element sized to 100vw sits behind the content. */ .btpk-why-choose::before, .btpk-spotlight::before, .btpk-instagram::before, .btpk-products::before, .btpk-promo-banners::before{ content:''; position:absolute; top:0; bottom:0; left:50%; width:100vw; transform:translateX(-50%); z-index:-1; } .btpk-why-choose::before{ background:var(--btpk-pink); } .btpk-spotlight::before{ background:var(--btpk-pink); } .btpk-instagram::before{ background:var(--btpk-pink); } .btpk-products::before{ background:var(--btpk-pink-tint); } .btpk-promo-banners::before{ background:var(--btpk-pink-tint); } /* FAQ */ .btpk-faq{ background:var(--btpk-pink-tint); padding:56px 24px; } .btpk-faq-heading-wrap{ text-align:center; margin-bottom:32px; max-width:1200px; margin-left:auto; margin-right:auto; } .btpk-faq-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:40px; align-items:start; max-width:1200px; margin:0 auto; } .btpk-faq-list{ display:flex; flex-direction:column; gap:12px; } .btpk-faq-item{ background:#FCEEF5; border-radius:10px; padding:20px 24px; } .btpk-faq-item[open]{ background:var(--btpk-pink); color:#fff; } .btpk-faq-question{ font-size:clamp(13px, 1.7vw, 17.5px); font-weight:700; cursor:pointer; list-style:none; } .btpk-faq-question::-webkit-details-marker{ display:none; } .btpk-faq-answer{ font-size:clamp(11.5px, 1.5vw, 15.5px); line-height:1.6; margin-top:8px; color:#eee; } .btpk-faq-side{ background:var(--btpk-pink); border-radius:16px; padding:36px; text-align:center; color:#fff; } .btpk-faq-side-icon{ font-size:clamp(34px, 4.4vw, 45px); margin-bottom:16px; } .btpk-faq-side-heading{ font-family:var(--font-serif); font-size:clamp(17.5px, 2.3vw, 23.5px); font-weight:700; margin-bottom:10px; } .btpk-faq-side-text{ font-size:clamp(11.5px, 1.5vw, 15.5px); color:#F6D3E4; line-height:1.7; margin:0 0 20px; } /* Video Testimonials — dark beat; uniform 9:16 video/link cards */ .btpk-video-testimonials{ background:var(--btpk-pink); padding:64px 24px; text-align:center; } .btpk-video-testimonials .btpk-eyebrow{ color:#F6D3E4; } .btpk-video-testimonials .btpk-heading{ color:#fff; } .btpk-video-testimonials-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; max-width:820px; margin:32px auto 0; } .btpk-vt-card{ background:#fff; border-radius:14px; overflow:hidden; border:1px solid var(--btpk-pink-tint2); padding-bottom:14px; } .btpk-vt-media{ position:relative; width:100%; aspect-ratio:9/16; background:#18131A; display:block; } .btpk-vt-media video{ width:100%; height:100%; object-fit:cover; } .btpk-vt-media-link{ background-size:cover; background-position:center; display:flex; align-items:center; justify-content:center; } .btpk-vt-play{ width:56px; height:56px; border-radius:50%; background:rgba(255,255,255,.92); display:flex; align-items:center; justify-content:center; } .btpk-vt-play-icon{ width:0; height:0; border-style:solid; border-width:11px 0 11px 17px; border-color:transparent transparent transparent #18131A; margin-left:3px; } .btpk-vt-name{ font-size:clamp(12px, 1.6vw, 13.5px); font-weight:700; color:var(--btpk-ink); text-align:center; margin-top:14px; } .btpk-vt-product{ font-size:clamp(10.5px, 1.4vw, 12px); color:var(--btpk-gray-light); text-align:center; margin-top:2px; } /* Before & After (Homepage) — light beat; each card is a drag-reveal slider (JS in btpk-front.js), same interaction as the single-product page's Before/After slider. */ .btpk-before-after{ background:var(--btpk-pink-tint); padding:64px 24px; text-align:center; } .btpk-before-after-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; max-width:1200px; margin:32px auto 0; text-align:left; } .btpk-ba-card{ background:#fff; border-radius:14px; overflow:hidden; box-shadow:0 8px 24px rgba(35,42,34,.06); } .btpk-ba-images{ display:grid; grid-template-columns:1fr 1fr; } .btpk-ba-img-col{ position:relative; } .btpk-ba-img-col img{ width:100%; aspect-ratio:1/1; object-fit:cover; display:block; } .btpk-ba-img-label{ display:block; text-align:center; padding:10px 0; font-size:clamp(11px, 1.4vw, 13px); font-weight:600; color:var(--btpk-gray); border-top:1px solid var(--btpk-pink-tint2); } .btpk-ba-body{ padding:20px 20px 24px; } .btpk-ba-name{ margin:0 0 10px; font-family:var(--font-serif); font-size:clamp(17px, 2vw, 20px); font-weight:700; color:var(--btpk-ink); } .btpk-ba-rating{ display:flex; align-items:center; gap:8px; margin-bottom:10px; flex-wrap:wrap; } .btpk-ba-stars{ color:var(--btpk-gold); font-size:clamp(13px, 1.6vw, 15px); letter-spacing:1px; } .btpk-ba-customer{ font-size:clamp(12.5px, 1.5vw, 13.5px); font-weight:600; color:var(--btpk-ink); } .btpk-ba-desc{ margin:0 0 18px; font-size:clamp(13px, 1.6vw, 14.5px); line-height:1.65; color:var(--btpk-gray); } .btpk-ba-btn{ display:inline-block; background:var(--btpk-ink-dark); color:#fff !important; padding:12px 24px; border-radius:8px; text-decoration:none; font-size:13.5px; font-weight:700; transition:background .2s; } .btpk-ba-btn:hover{ background:var(--btpk-pink); } /* Newsletter — dark beat right before the footer. Inset (not full-bleed) per request — a rounded card with visible page margin either side, unlike the other full-bleed dark sections. */ .btpk-newsletter{ background:var(--btpk-pink); padding:64px 24px; text-align:center; max-width:1200px; margin:48px auto; border-radius:24px; } .btpk-newsletter-icon{ width:56px; height:56px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; margin:0 auto 20px; font-size:22px; } .btpk-newsletter .btpk-eyebrow{ color:#F6D3E4; } .btpk-newsletter .btpk-heading{ color:#fff; max-width:560px; margin:0 auto 12px; } .btpk-newsletter-sub{ font-size:clamp(12.5px, 1.5vw, 13.5px); color:#F6D3E4; margin:0 0 28px; } .btpk-newsletter-form{ display:flex; justify-content:center; gap:10px; max-width:440px; margin:0 auto; flex-wrap:wrap; } .btpk-newsletter-input{ flex:1; min-width:200px; padding:15px 20px; border:1px solid var(--btpk-pink-tint2); font-size:14px; font-family:var(--font-sans); box-sizing:border-box; } .btpk-newsletter-btn{ background:#fff; color:var(--btpk-ink); border:none; padding:15px 28px; border-radius:26px; font-size:13.5px; font-weight:700; cursor:pointer; transition:all .25s; } .btpk-newsletter-btn:hover{ background:var(--btpk-gold); color:#18131A; } .btpk-newsletter-btn.is-loading{ opacity:.6; pointer-events:none; } .btpk-newsletter-success{ max-width:440px; margin:0 auto; background:#fff; border-radius:26px; padding:16px 24px; font-size:14px; font-weight:700; color:var(--btpk-ink); } .btpk-newsletter-error{ max-width:440px; margin:14px auto 0; color:#FFE1E1; font-size:13px; font-weight:600; } .btpk-newsletter-privacy{ font-size:11.5px; color:#F6D3E4; margin:14px 0 0; } @media (max-width: 900px){ .btpk-video-testimonials-grid, .btpk-before-after-grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width: 560px){ .btpk-video-testimonials-grid, .btpk-before-after-grid{ grid-template-columns:1fr; } .btpk-newsletter-form{ flex-direction:column; } } /* Trust strip — light beat closing the homepage before the footer */ .btpk-trust{ display:flex; justify-content:center; gap:64px; padding:56px 24px; flex-wrap:wrap; text-align:center; background:var(--btpk-pink-tint); } .btpk-trust-item{ display:flex; flex-direction:column; align-items:center; gap:12px; max-width:200px; } .btpk-trust-icon{ color:var(--btpk-pink); display:flex; } .btpk-trust-title{ font-size:clamp(13px, 1.7vw, 17px); font-weight:700; color:var(--btpk-ink); text-decoration:none; } a.btpk-trust-title:hover{ color:var(--btpk-pink); text-decoration:underline; } .btpk-trust-desc{ font-size:clamp(10.5px, 1.4vw, 14px); color:var(--btpk-gray-light); } /* Product Spotlight — single featured on-sale product CTA */ .btpk-spotlight{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; max-width:1200px; margin:0 auto; padding:56px 24px; position:relative; } .btpk-spotlight-media{ position:relative; background:var(--btpk-pink-tint); border-radius:16px; overflow:hidden; aspect-ratio:4/3; } .btpk-spotlight-media img{ width:100%; height:100%; object-fit:cover; display:block; } .btpk-spotlight-save{ position:absolute; left:24px; top:24px; width:96px; height:96px; border-radius:50%; background:var(--btpk-pink); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; line-height:1.3; } .btpk-spotlight-save span{ font-size:clamp(10px, 1.3vw, 13.5px); font-weight:600; } .btpk-spotlight-save strong{ font-family:var(--font-serif); font-size:clamp(14.5px, 1.8vw, 19px); } .btpk-spotlight-offer{ display:flex; align-items:center; gap:10px; margin-bottom:16px; } .btpk-spotlight-offer-label{ font-size:clamp(10.5px, 1.4vw, 14px); font-weight:800; letter-spacing:.06em; color:#F6D3E4; text-transform:uppercase; } .btpk-spotlight-offer-pct{ background:var(--btpk-pink); color:#fff; font-size:clamp(10px, 1.3vw, 13.5px); font-weight:800; padding:4px 10px; border-radius:6px; } .btpk-spotlight-title{ margin:0 0 14px; } .btpk-spotlight-title a{ font-family:var(--font-serif); font-size:clamp(27px, 3.5vw, 38.5px); font-weight:700; color:#fff; text-decoration:none; } .btpk-spotlight-sub{ font-size:clamp(15.5px, 1.5vw, 17px); color:#F6D3E4; line-height:1.6; margin:0 0 24px; max-width:420px; } .btpk-spotlight-countdown{ display:flex; align-items:baseline; gap:6px; margin-bottom:28px; } .btpk-spotlight-countdown .btpk-cd-days, .btpk-spotlight-countdown .btpk-cd-hours, .btpk-spotlight-countdown .btpk-cd-mins, .btpk-spotlight-countdown .btpk-cd-secs{ font-family:var(--font-serif); font-size:clamp(32.5px, 4.2vw, 43px); font-weight:700; color:#fff; } .btpk-spotlight-cd-sep{ font-size:clamp(23.5px, 3.1vw, 31.5px); font-weight:700; color:var(--btpk-pink-tint2); } /* Sale Products — same card grid as Best Sellers, no extra rules needed */ /* NOTE: the old duplicate .btpk-newsletter/.btpk-newsletter-form block that used to live here was deleted — it redefined .btpk-newsletter-form button's background to var(--btpk-pink), and ".btpk-newsletter-form button" (class+element) outranks the real ".btpk-newsletter-btn" class rule above in specificity, so the Subscribe button was rendering pink on the section's own pink background — invisible. The block above is now the only Newsletter CSS. */ /* Footer */ .btpk-footer{ background:var(--btpk-pink-tint); color:var(--btpk-gray); padding:56px 24px 24px; } .btpk-footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px; max-width:1200px; margin:0 auto 40px; } .btpk-footer-logo{ display:flex; align-items:center; gap:8px; font-family:var(--font-serif); font-size:clamp(16px, 2.1vw, 21.5px); font-weight:700; color:var(--btpk-ink); margin-bottom:14px; } .btpk-footer-logo-img{ width:140px; height:auto; max-height:80px; object-fit:contain; display:block; margin-bottom:18px; } .btpk-footer-about{ font-size:clamp(11.5px, 1.5vw, 15.5px); line-height:1.75; color:var(--btpk-gray); max-width:270px; margin:0 0 20px; } .btpk-footer-social{ display:flex; gap:10px; } .btpk-footer-social a{ width:38px; height:38px; border-radius:50%; background:var(--btpk-pink); display:flex; align-items:center; justify-content:center; color:#fff !important; text-decoration:none; transition:background .2s; } .btpk-footer-social a:hover{ background:var(--btpk-pink-dark) !important; } .btpk-footer-col-title{ font-family:var(--font-serif); font-size:16px; font-weight:700; color:var(--btpk-ink); margin-bottom:20px; position:relative; padding-bottom:12px; width:fit-content; } .btpk-footer-col-title::after{ content:''; position:absolute; bottom:0; left:0; width:28px; height:3px; background:var(--btpk-gold); border-radius:2px; } .btpk-footer-col{ display:flex; flex-direction:column; gap:13px; } .btpk-footer-col a, .btpk-footer-col span{ color:var(--btpk-gray); text-decoration:none; font-size:14px; } .btpk-footer-col a:hover{ color:var(--btpk-pink); } .btpk-footer-col-contact span{ display:flex; align-items:flex-start; gap:10px; } .btpk-footer-contact-icon{ color:var(--btpk-pink); flex-shrink:0; } .btpk-footer-bottom{ border-top:1px solid var(--btpk-pink-tint2); padding-top:20px; max-width:1200px; margin:0 auto; text-align:center; font-size:clamp(10px, 1.3vw, 13.5px); color:var(--btpk-gray-light); } /* ---- Mobile header: hamburger + slide-in drawer (logo stays left, toggle sits right; contact details print at the bottom of the drawer) ---- */ .btpk-mobile-toggle{ display:none; flex-direction:column; justify-content:center; gap:5px; width:38px; height:38px; background:none; border:none; cursor:pointer; padding:0; border-radius:8px; } .btpk-mobile-toggle span{ display:block; width:100%; height:2.5px; background:var(--btpk-ink); border-radius:2px; } .btpk-mobile-toggle:hover{ background:var(--btpk-pink-tint); } .btpk-mobile-backdrop{ display:none; } .btpk-mobile-close{ display:none; } .btpk-nav-contact{ display:none; } /* Responsive */ /* Responsive — !important here too, so these can still win over the hardening rules above at smaller widths (same specificity, later in the cascade + !important = these take priority). */ @media (max-width: 900px){ .btpk-header-search{ display:none; } .btpk-header{ flex-wrap:nowrap; } .btpk-mobile-toggle{ display:flex; order:3; } .btpk-nav{ position:fixed; top:0; left:0; bottom:0; width:min(320px,84vw); background:#fff; z-index:220; display:flex !important; flex-direction:column; flex-wrap:nowrap; align-items:flex-start; justify-content:flex-start; gap:2px; padding:70px 28px 28px; transform:translateX(-100%); transition:transform .3s ease; box-shadow:8px 0 30px rgba(0,0,0,.15); overflow-y:auto; overflow-x:hidden; } .btpk-nav.is-open{ transform:translateX(0); } .btpk-nav li{ display:block; width:100%; } .btpk-nav > li > a{ padding:12px 0; width:100%; border-bottom:1px solid var(--btpk-pink-tint2); font-size:16px; } .btpk-nav li.menu-item-has-children > a::after{ display:none; } .btpk-mobile-menu-toggle{ display:flex; align-items:center; justify-content:center; position:absolute; right:0; top:6px; width:32px; height:32px; background:none; border:none; color:var(--btpk-ink); font-size:13px; cursor:pointer; transform:rotate(0deg); transition:transform .2s; } .btpk-nav li.btpk-accordion-open > .btpk-mobile-menu-toggle{ transform:rotate(180deg); } .btpk-nav .sub-menu{ position:static !important; transform:none !important; opacity:1 !important; visibility:visible !important; display:none !important; flex-direction:column !important; gap:0 !important; padding:4px 0 10px 16px !important; column-count:1 !important; width:auto !important; min-width:0 !important; box-shadow:none !important; border-radius:0 !important; background:none !important; } .btpk-nav li.btpk-accordion-open > .sub-menu{ display:flex !important; } /* Flatten everything to one plain hamburger list on mobile — no mega columns, no special pink/uppercase "column header" treatment (that's desktop-only, see the non-media-query .sub-menu rules above). ---- */ .btpk-nav .sub-menu > li > a{ padding:10px 0 !important; border-bottom:none !important; font-size:14.5px !important; font-weight:600 !important; text-transform:none !important; letter-spacing:normal !important; color:var(--btpk-gray) !important; pointer-events:auto !important; margin-bottom:0 !important; } .btpk-nav .sub-menu > li.menu-item-has-children > a{ color:var(--btpk-ink) !important; } .btpk-nav .sub-menu > li.menu-item-has-children > a::after{ content:'' !important; } .btpk-nav .sub-menu .sub-menu{ padding-left:14px !important; } .btpk-mobile-close{ display:flex; align-items:center; justify-content:center; position:absolute; top:20px; right:20px; width:34px; height:34px; border-radius:50%; border:1px solid var(--btpk-pink-tint2); background:#fff; cursor:pointer; font-size:15px; z-index:1; } .btpk-mobile-backdrop.is-open{ display:block; position:fixed; inset:0; background:rgba(24,19,26,.45); z-index:210; } .btpk-nav-contact{ display:flex; flex-direction:column; gap:8px; margin-top:20px; padding-top:20px; border-top:1px solid var(--btpk-pink-tint2); width:100%; } .btpk-nav-contact-title{ font-weight:800; font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--btpk-gray); } .btpk-nav-contact a, .btpk-nav-contact span{ font-size:13.5px; color:var(--btpk-ink) !important; border:none !important; padding:0 !important; display:block; } /* ---- Mobile header redesign (<=900px only — desktop header is completely untouched above this breakpoint), styled after the bodynbody.com reference: one row — hamburger (left), logo", (centered), Account + Cart icons (right, no Wishlist/WhatsApp/ Search icons here — those live inside the drawer instead). ---- */ .btpk-header{ flex-wrap:nowrap; justify-content:space-between; gap:12px; padding-top:14px; padding-bottom:14px; } .btpk-mobile-toggle{ order:0; flex:0 0 auto; width:34px; height:34px; } .btpk-mobile-toggle span{ width:20px; } .btpk-logo{ order:1; flex:1 1 auto; justify-content:center; overflow:hidden; } .btpk-logo img{ max-height:38px !important; } .btpk-header-icons{ order:2; flex:0 0 auto; gap:18px !important; } .btpk-whatsapp-header-icon, .btpk-wishlist-header-icon{ display:none !important; } .btpk-header-icons a{ display:flex; } .btpk-topbar{ flex-wrap:nowrap; overflow:hidden; justify-content:flex-start; padding:9px 0; } .btpk-topbar-content{ display:flex !important; flex-shrink:0; animation:btpk-topbar-marquee 24s linear infinite; } .btpk-topbar-marquee-track{ display:inline-flex; gap:32px; white-space:nowrap; flex-shrink:0; padding-right:32px; } .btpk-topbar-marquee-track:nth-of-type(2){ display:inline-flex; } .btpk-topbar-social{ display:none !important; } /* Drawer: "Menu" title + close button, and a search box (wired to the same product-search AJAX as the desktop header search) — both hidden by default (see non-media-query rules) and shown only here. */ .btpk-drawer-header{ display:flex !important; align-items:center; justify-content:space-between; width:100%; padding-bottom:16px; margin-bottom:6px; border-bottom:1px solid var(--btpk-pink-tint2); } .btpk-drawer-title{ font-family:var(--font-serif); font-size:19px; font-weight:700; color:var(--btpk-ink); } .btpk-mobile-close{ display:flex; align-items:center; justify-content:center; position:static; width:30px; height:30px; border-radius:6px; border:1px solid var(--btpk-pink-tint2); background:#fff; cursor:pointer; font-size:13px; } .btpk-drawer-search{ display:flex !important; align-items:center; position:relative; width:100%; margin-bottom:20px; border:1px solid var(--btpk-pink-tint2); border-radius:24px; padding:4px 4px 4px 16px; } .btpk-drawer-search-input{ flex:1; border:none; outline:none; background:none; font-size:14px; font-family:var(--font-sans); color:var(--btpk-ink); padding:8px 0; } .btpk-drawer-search-input::placeholder{ color:var(--btpk-gray-light); } .btpk-drawer-search-btn{ flex-shrink:0; width:32px; height:32px; border-radius:50%; border:1px solid var(--btpk-pink-tint2); display:flex; align-items:center; justify-content:center; color:var(--btpk-gray); } .btpk-drawer-search-results{ position:absolute; top:calc(100% + 8px); left:0; right:0; background:#fff; border:1px solid var(--btpk-pink-tint2); border-radius:12px; box-shadow:0 16px 34px rgba(0,0,0,.12); max-height:320px; overflow-y:auto; z-index:5; } .btpk-drawer-search-results:empty{ display:none; border:none; box-shadow:none; } .btpk-nav-social{ display:flex !important; justify-content:center; gap:12px; margin-top:20px; padding-top:20px; border-top:1px solid var(--btpk-pink-tint2); width:100%; } .btpk-nav-social a{ width:32px; height:32px; border-radius:50%; background:var(--btpk-pink-tint); display:flex; align-items:center; justify-content:center; text-decoration:none; font-size:13px; } .btpk-nav-social-whatsapp{ background:#25D366 !important; color:#fff !important; } .btpk-header-search{ display:none; } .btpk-hero-inner{ grid-template-columns:1fr !important; } .btpk-about-inner, .btpk-about-media{ grid-template-columns:1fr !important; } /* About: images shrink + move after the copy on mobile/tablet */ .btpk-about-inner{ display:flex !important; flex-direction:column-reverse !important; gap:32px !important; } .btpk-about-media{ min-height:0; display:block; } .btpk-about-blob{ display:none; } .btpk-about-photo{ width:100%; aspect-ratio:auto; min-height:260px; height:260px; border-radius:16px; } .btpk-about-accent{ display:none; } .btpk-about-badge{ display:none; } .btpk-why-choose-grid{ grid-template-columns:1fr !important; } .btpk-why-choose-cards{ grid-template-columns:1fr !important; } .btpk-products-grid{ grid-template-columns:repeat(2,1fr) !important; } .btpk-new-arrivals-grid{ grid-template-columns:repeat(2,1fr) !important; } .btpk-promo-banners{ grid-template-columns:1fr !important; } .btpk-promo-banner{ grid-template-columns:1fr !important; } .btpk-blog-grid{ grid-template-columns:1fr !important; } .btpk-instagram-grid{ grid-template-columns:repeat(3,1fr) !important; } .btpk-deal-banner{ grid-template-columns:1fr !important; text-align:center; } .btpk-footer-grid{ grid-template-columns:1fr 1fr !important; } .btpk-faq-grid{ grid-template-columns:1fr !important; } .btpk-spotlight{ grid-template-columns:1fr !important; } /* Video Testimonials: horizontal scroll instead of a squeezed grid */ .btpk-video-testimonials-grid{ display:flex !important; overflow-x:auto; grid-template-columns:none !important; gap:14px; padding-bottom:8px; scroll-snap-type:x mandatory; max-width:100%; -webkit-overflow-scrolling:touch; } .btpk-video-testimonials-grid .btpk-vt-card{ flex:0 0 62%; scroll-snap-align:start; } } @media (max-width: 560px){ .btpk-header{ padding:18px 20px; } .btpk-hero{ padding:32px 20px; } .btpk-products-grid, .btpk-new-arrivals-grid, .btpk-instagram-grid{ grid-template-columns:repeat(2,1fr) !important; } .btpk-footer-grid{ grid-template-columns:1fr !important; } .btpk-ticker{ padding:20px 0; } .btpk-categories{ padding:48px 20px 40px; } .btpk-categories-carousel{ margin-top:24px; gap:6px; } .btpk-categories-track{ gap:16px; } .btpk-category-item{ flex:0 0 calc((100% - 16px)/2); width:calc((100% - 16px)/2); } .btpk-cat-arrow{ width:32px; height:32px; font-size:16px; } .btpk-promo-banners{ padding:40px 20px; gap:20px; } .btpk-about{ padding:40px 20px 48px; } .btpk-why-choose{ padding:40px 20px; } .btpk-why-choose-grid{ margin-top:24px; } .btpk-products, .btpk-new-arrivals, .btpk-blog{ padding:40px 20px; } .btpk-spotlight{ padding:40px 20px; } .btpk-instagram{ padding:40px 20px; } .btpk-trust{ padding:36px 20px; gap:32px; } .btpk-video-testimonials-grid .btpk-vt-card{ flex-basis:78%; } .btpk-newsletter{ margin:24px 16px; } } /* ---- Video lightbox (Video Testimonials link-type cards play inline instead of leaving the site — see btpk-front.js) ---- */ .btpk-video-lightbox{ position:fixed; inset:0; background:rgba(0,0,0,.85); z-index:999; display:flex; align-items:center; justify-content:center; padding:24px; } .btpk-video-lightbox-inner{ position:relative; width:min(420px,90vw); aspect-ratio:9/16; background:#000; } .btpk-video-lightbox-inner iframe, .btpk-video-lightbox-inner video{ width:100%; height:100%; border:0; } .btpk-video-lightbox-close{ position:absolute; top:-40px; right:0; background:none; border:none; color:#fff; font-size:22px; cursor:pointer; line-height:1; } /* ---- Top bar: continuous scrolling (marquee) text on all screen sizes ---- */ .btpk-topbar{ flex-wrap:nowrap !important; justify-content:flex-start !important; overflow:hidden; padding-left:0 !important; padding-right:0 !important; column-gap:0 !important; } .btpk-topbar-content{ display:flex !important; flex:1 1 auto; min-width:0; overflow:hidden; animation:none !important; } .btpk-topbar-marquee-track, .btpk-topbar-marquee-track:nth-of-type(2){ display:inline-flex !important; align-items:center; gap:40px; white-space:nowrap; flex-shrink:0; padding-right:40px; animation:btpk-topbar-scroll 22s linear infinite; } .btpk-topbar:hover .btpk-topbar-marquee-track{ animation-play-state:paused; } .btpk-topbar-social{ flex-shrink:0; padding:0 24px; background:inherit; position:relative; z-index:1; } @keyframes btpk-topbar-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-100%); } } @media (prefers-reduced-motion: reduce){ .btpk-topbar-marquee-track{ animation:none; } }