/*
 * The Lube Club: Liquid Glass skin for thebox-child - WHITE / ICE variant
 * Brand blues pulled from the live site: royal #1C2DA5 (site buttons/CSS), navy #243379 (logo + theme),
 * label navy #0C1E67 (Slick/Cleanser product labels), sky #3FACDB (theme accent).
 * Visual-only layer: no copy, images or links are changed. Load AFTER thebox + thebox-child styles.
 */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Oswald:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

/* ---------- variant tokens ---------- */
:root{
  --text:#16204a; --text-strong:#0c1e67; --text-dim:#4a5578; --head:#0c1e67; --accent:#1c2da5; --focus:#1c2da5;
  --bg-base:#eef3f9;
  --bg-layer:
    radial-gradient(900px 700px at 0% 2%,rgba(63,172,219,.22),transparent 70%),
    radial-gradient(800px 700px at 100% 16%,rgba(28,45,165,.14),transparent 70%),
    radial-gradient(900px 800px at 5% 42%,rgba(36,51,121,.10),transparent 70%),
    radial-gradient(800px 700px at 95% 66%,rgba(63,172,219,.18),transparent 70%),
    radial-gradient(900px 700px at 10% 92%,rgba(28,45,165,.12),transparent 70%),
    linear-gradient(180deg,#f7fafd 0%,#eaf0f8 50%,#f4f7fb 100%);
  --bg-size:100% 100%;
  --panel:linear-gradient(160deg,rgba(255,255,255,.82),rgba(240,246,252,.62));
  --solid-panel:#ffffff; --solid-base:#f3f6fa;
  --edge:rgba(12,30,103,.10);
  --rim:linear-gradient(135deg,#fff,rgba(255,255,255,.4) 35%,rgba(63,172,219,0) 60%,rgba(28,45,165,.35));
  --panel-shadow:0 1px 0 #fff inset,0 22px 44px -26px rgba(12,30,103,.40),0 2px 6px rgba(12,30,103,.06);
  --card-glow:0 0 0 1px rgba(28,45,165,.35),0 26px 50px -22px rgba(28,45,165,.45);
  --sheen:rgba(63,172,219,.18);
  --nav-bg:rgba(255,255,255,.78); --nav-text:#0c1e67; --nav-hover:rgba(12,30,103,.06); --spec:1;
  --nav-shadow:0 1px 0 #fff inset,0 16px 36px -18px rgba(12,30,103,.45);
  --logo-filter:none;
  --btn-bg:linear-gradient(135deg,#2f45d6 0%,#1c2da5 50%,#0c1e67 100%); --btn-text:#fff; --btn-edge:rgba(255,255,255,.35);
  --btn-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 -2px 6px rgba(7,16,66,.35) inset,0 12px 24px -12px rgba(28,45,165,.75);
  --btn-glow:0 1px 0 rgba(255,255,255,.4) inset,0 0 26px 0 rgba(63,172,219,.55),0 16px 30px -12px rgba(28,45,165,.8);
  --underline:linear-gradient(90deg,#1c2da5,#3facdb);
  --hero-text:linear-gradient(180deg,#1c2da5 0%,#0c1e67 100%);
  --hero-shadow:0 0 0 1px rgba(12,30,103,.08),0 36px 70px -30px rgba(12,30,103,.55);
  --tag-text:#1c2da5; --tag-bg:rgba(28,45,165,.06); --tag-edge:rgba(28,45,165,.35);
  --link:#1c2da5; --link-line:rgba(28,45,165,.35); --link-hover:#0c1e67;
  --foot-bg:linear-gradient(165deg,rgba(28,45,165,.96),rgba(12,30,103,.98));
  --subfoot-bg:#0a1856;
}

/* ---------- 0. Fixes ---------- */
@font-face{font-family:'KlinicSlabMedium1';font-weight:400;font-display:swap;src:url('https://thelubeclub.com/wp-content/uploads/2025/02/KlinicSlabMedium1.otf') format('opentype')}
@font-face{font-family:'KlinicSlabBold1';font-weight:400;font-display:swap;src:url('https://thelubeclub.com/wp-content/uploads/2025/02/KlinicSlabBold1.otf') format('opentype')}
@font-face{font-family:'Aptos';font-weight:400;font-display:swap;src:url('https://thelubeclub.com/wp-content/uploads/2025/02/Aptos1.ttf') format('truetype')}
@font-face{font-family:'retrochips';font-weight:100;font-display:swap;src:url('https://thelubeclub.com/wp-content/uploads/2021/06/Retrochips.otf') format('opentype')}
@font-face{font-family:'komika axis';font-weight:100;font-display:swap;src:url('https://thelubeclub.com/wp-content/uploads/2021/06/KOMIKAX_.ttf') format('truetype')}
html,body{max-width:100%;overflow-x:clip}
.kc_row_inner{max-width:100%}
@media (max-width:767.98px){.kc_row.kc_row_inner{width:auto!important;margin-left:0!important;margin-right:0!important}}
img,iframe,video{max-width:100%;height:auto}
img[src*="ebusinesspages.com/i/lbm.png"]{display:none!important}

/* ---------- 1. Shared tokens ---------- */
:root{
  --tlc-royal:#1c2da5; --tlc-navy:#243379; --tlc-label:#0c1e67; --tlc-sky:#3facdb;
  --r-xl:22px; --r-lg:16px; --r-md:12px; --pill:999px;
  --blur:saturate(170%) blur(20px); --blur-heavy:saturate(190%) blur(30px);
  --ease:cubic-bezier(.2,.8,.2,1);
  --f-head:'Bebas Neue','Oswald',Impact,'Arial Narrow',sans-serif;
  --f-sub:'Oswald','Arial Narrow',sans-serif;
  --f-body:'Inter','Helvetica Neue',Arial,sans-serif;
}

/* ---------- 2. Backdrop ---------- */
html{background:var(--bg-base);min-height:100%}
body{color:var(--text);background:transparent!important;position:relative;min-height:100vh;-webkit-font-smoothing:antialiased;font-family:var(--f-body)}
body::before{content:"";position:absolute;top:-160px;right:0;bottom:0;left:0;z-index:-1;pointer-events:none;background:var(--bg-layer);background-size:var(--bg-size);background-repeat:no-repeat}
#page,.site,.site-content,#content,.content-area,.site-main,article.page,.entry-content,
.kc_row,.kc-row-container,.kc-wrap-columns,.single-page-header,section.kc_row,
.elementor-section,.elementor-container,.elementor-column,.e-con,.e-con-inner{background-color:transparent!important}
.site-content :where(p,li,span,strong,em,b,i,td,th,label,small,div,blockquote,summary,details,figcaption){color:var(--text)!important}
.site-content :where(p,li){line-height:1.65}
.site-content strong,.site-content b{color:var(--text-strong)!important}

/* ---------- 3. Headings ---------- */
.site-content :is(h1,h2,h3,h4,h5),.site-content .kc_title,.entry-title,.single-page-header h1,
.site-content :is(h1,h2,h3,h4,h5) *,.site-content .kc_title *{
  font-family:var(--f-head)!important;text-transform:uppercase;letter-spacing:.04em;
  color:var(--head)!important;font-weight:400!important;line-height:1.02;
}
.site-content h6,.site-content h6.kc_title,.site-content h6 *{
  font-family:var(--f-sub)!important;font-weight:500!important;text-transform:uppercase;
  letter-spacing:.16em;color:var(--text-dim)!important;line-height:1.5;
}
.site-content h1,.site-content h1.kc_title{font-size:clamp(48px,7.4vw,96px)!important}
.site-content h2,.site-content h2.kc_title{font-size:clamp(36px,4.8vw,60px)!important}
.site-content h3{font-size:clamp(26px,3vw,38px)!important}
#Subscriptions h1.kc_title{background:var(--hero-text);-webkit-background-clip:text;background-clip:text;color:transparent!important}
.site-content h2.kc_title::after,.site-content h2::after{
  content:"";display:block;width:60px;height:4px;margin:14px auto 0;border-radius:4px;background:var(--underline);
}
.elementor h2::after,.page-template-elementor_header_footer h2::after{margin-left:0}

/* ---------- 4. Floating pill nav ---------- */
.site-header{position:relative;z-index:1030}
.navbar-custom.fixed-top{
  top:12px!important;left:50%!important;right:auto!important;transform:translateX(-50%);
  width:min(1160px,calc(100% - 20px));border-radius:var(--pill);padding:7px 8px 7px 18px!important;
  background:var(--nav-bg)!important;-webkit-backdrop-filter:var(--blur-heavy);backdrop-filter:var(--blur-heavy);
  border:1px solid var(--edge);box-shadow:var(--nav-shadow);
  transition:top .35s var(--ease),background .35s;
}
.navbar-custom.fixed-top::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,0) 55%);opacity:var(--spec)}
.navbar-custom.lg-scrolled{top:6px!important}
.navbar-custom > .container{max-width:none;padding:0}
.navbar-custom .navbar-logo{max-height:40px;width:auto;filter:var(--logo-filter)}
.navbar-custom .nav-link{
  font-family:var(--f-sub)!important;font-weight:600!important;letter-spacing:.14em!important;font-size:13px!important;
  border-radius:var(--pill);padding:9px 16px!important;margin:0 2px;color:var(--nav-text)!important;transition:background .25s,box-shadow .25s;
}
.navbar-custom .nav-link:hover,.navbar-custom .current-menu-item>.nav-link{background:var(--nav-hover);box-shadow:0 0 0 1px var(--edge) inset}
.navbar-custom .nav-link[title="Shop"]{background:var(--btn-bg)!important;color:var(--btn-text)!important;box-shadow:var(--btn-shadow)}
.navbar-custom .nav-link[title="Shop"]:hover{box-shadow:var(--btn-glow)}
.navbar-custom .navbar-toggler{border:1px solid var(--edge);border-radius:var(--pill);width:44px;height:44px;background:var(--nav-hover);color:var(--nav-text)}
@media (max-width:767.98px){
  .navbar-custom.fixed-top{border-radius:22px;padding:6px 8px 6px 14px!important}
  .navbar-custom .navbar-collapse{padding:8px 0 6px}
  .navbar-custom .nav-link{text-align:center;margin:3px 0}
}
.home .site-content{padding-top:80px}

/* ---------- 5. Frosted panels ---------- */
.tc-custom-pricing,
.review_sec .kc_column>.kc-col-container,
#why-choose_content .kc-wrap-columns,
#doctor_designed .kc-col-container,
#donation_back_guarantee_content .kc-wrap-columns,
#Subscriptions .kc_text_block,
.single-page-header .inner > .container,
.site-main .entry-content > .kc_row .kc-row-container > .kc-wrap-columns,
.page-template-elementor_header_footer article > .container .col-lg-12 > *:not(script),
.spotlight-instagram-feed [class*="FeedLayout__wrapper"]{
  position:relative;background:var(--panel)!important;
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:1px solid var(--edge)!important;border-radius:var(--r-lg);box-shadow:var(--panel-shadow);
}
.tc-custom-pricing::after,
.review_sec .kc_column>.kc-col-container::after,
#why-choose_content .kc-wrap-columns::after,
#doctor_designed .kc-col-container::after,
#donation_back_guarantee_content .kc-wrap-columns::after,
.single-page-header .inner > .container::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;padding:1px;
  background:var(--rim);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
}
.lg-sheen{background-image:radial-gradient(240px circle at var(--lg-x,50%) var(--lg-y,0%),var(--sheen),transparent 65%),var(--panel)!important}

/* ---------- 6. Hero ---------- */
.home .kc-css-594184 .kc_single_image img{
  border-radius:var(--r-xl);display:block;margin:0 auto;width:min(1200px,calc(100% - 20px));box-shadow:var(--hero-shadow);
}

/* ---------- 7. Product cards ---------- */
#Subscriptions .kc_row_inner{gap:18px;display:flex;flex-wrap:wrap}
#Subscriptions .kc_column_inner{flex:1 1 280px;width:auto!important;max-width:none}
.tc-custom-pricing{padding:18px 18px 22px!important;overflow:hidden;display:flex;flex-direction:column;align-items:stretch;text-align:center;transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.tc-custom-pricing:hover{transform:translateY(-6px);box-shadow:var(--card-glow)}
.tc-custom-pricing .pricing-title{background:transparent!important;border:0!important}
.tc-custom-pricing .pricing-title .title{
  display:inline-block;padding:6px 18px;border-radius:var(--pill);
  font-family:var(--f-sub)!important;font-weight:600;letter-spacing:.16em;text-transform:uppercase;font-size:14px;
  color:var(--tag-text)!important;background:var(--tag-bg);border:1px solid var(--tag-edge);
}
/* keep button labels in button colour (beats the content text rule) */
.site-content .btn *,.site-content a.btn,.spotlight-instagram-feed button,.spotlight-instagram-feed button *,.spotlight-instagram-feed a[class*="Button"] *{color:var(--btn-text)!important}
/* product photo tiles: white JPG backgrounds blended into the glass */
.tc-custom-pricing .pricing-block{
  -webkit-mask-image:radial-gradient(ellipse 70% 72% at 50% 50%,#000 50%,transparent 88%);
          mask-image:radial-gradient(ellipse 70% 72% at 50% 50%,#000 50%,transparent 88%);
  margin:12px 0;border:0!important;box-shadow:none!important;background-size:contain!important;background-repeat:no-repeat!important;background-position:center!important}
.tc-custom-pricing .content-desc{flex:1 1 auto}
.tc-custom-pricing .content-desc li{border:0!important;color:var(--text-dim)!important}
.tc-custom-pricing>.btn{position:static!important;align-self:center;margin:16px auto 0!important;float:none!important}
body .tc-custom-pricing a.btn{display:table!important;margin-left:auto!important;margin-right:auto!important;left:auto!important}
#Subscriptions .kc_text_block{padding:16px 18px;margin-top:14px}
/* theme sets '#Subscriptions .tc-custom-pricing .btn{color:white!important}' - out-rank it */
/* theme also centres it with left:50% + translateX(-50%); undo so flex centring works */
#Subscriptions .tc-custom-pricing a.btn{transform:none!important;left:auto!important;color:var(--btn-text)!important;background:var(--btn-bg)!important;border-color:var(--btn-edge)!important}
#Subscriptions .tc-custom-pricing a.btn:hover{transform:translateY(-2px)!important}

/* ---------- 8. Buttons ---------- */
.btn,.btn-outline-primary,a.btn,.wp-block-button__link,.kc_button,input[type=submit],button[type=submit],
.spotlight-instagram-feed button,.spotlight-instagram-feed a[class*="Button"]{
  border-radius:var(--pill)!important;padding:12px 28px!important;
  font-family:var(--f-sub)!important;font-weight:600!important;letter-spacing:.16em;text-transform:uppercase;
  color:var(--btn-text)!important;border:1px solid var(--btn-edge)!important;background:var(--btn-bg)!important;
  box-shadow:var(--btn-shadow)!important;transition:transform .25s var(--ease),box-shadow .25s var(--ease),filter .25s;
}
.btn:hover,.btn-outline-primary:hover,a.btn:hover,.wp-block-button__link:hover,.kc_button:hover,.spotlight-instagram-feed button:hover{
  transform:translateY(-2px);filter:brightness(1.07);box-shadow:var(--btn-glow)!important;
}
.btn:active{transform:translateY(0) scale(.98)}
.btn:focus-visible,a:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.site-content a:not(.btn):not(.nav-link):not([class*="Button"]),.site-content a:not(.btn):not([class*="Button"]) *{color:var(--link)!important;text-decoration-color:var(--link-line);text-underline-offset:3px}
.site-content a:not(.btn):hover{color:var(--link-hover)!important}

/* ---------- 9. Sections ---------- */
#why-choose_content .kc-wrap-columns,#donation_back_guarantee_content .kc-wrap-columns{padding:22px;align-items:center}
#doctor_designed .kc-col-container{padding:24px 26px}
#why-choose_content img,#donation_back_guarantee_content img,.entry-content img{border-radius:var(--r-md)}
.review_sec .kc-wrap-columns{gap:16px;flex-wrap:nowrap}
.review_sec .kc_column{padding:0!important}
.review_sec .kc_column>.kc-col-container{height:100%;padding:20px;transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.review_sec .kc_column>.kc-col-container:hover{transform:translateY(-4px);box-shadow:var(--card-glow)}
.review_sec img{border-radius:50%;box-shadow:0 0 0 2px var(--accent)}
@media (max-width:767.98px){.review_sec .kc-wrap-columns{flex-wrap:wrap}.review_sec .kc_column{width:100%!important}}
.home section.kc_row{padding-top:48px!important;padding-bottom:0!important}
.home section.kc_row.kc-css-594184{padding-top:4px!important}
/* content rows that directly follow their heading row sit tight under it */
.home section#why-choose_content,.home section#doctor_designed,.home section#donation_back_guarantee_content,
.home section.kc-css-390680{padding-top:18px!important}
/* empty spacer rows collapse */
.home section.kc_row:not(:has(img,p,h1,h2,h3,h4,h5,h6,li,.spotlight-instagram-feed)){padding:0!important;margin:0!important}
.home .kc-css-668718,.home .kc-css-882374,.home .kc-css-776461,.home .kc-css-34510{padding:0!important}

/* "What people are saying" Spotlight social feed */
.spotlight-instagram-feed [class*="FeedLayout__wrapper"]{padding:18px!important;overflow:hidden}
.spotlight-instagram-feed [class*="FeedHeader__root"]{background:transparent!important;border-bottom:1px solid var(--edge)!important;margin-bottom:12px}
.spotlight-instagram-feed [class*="FeedHeader"] *{color:var(--text)!important}
.spotlight-instagram-feed [class*="FeedHeader"] [class*="username"],.spotlight-instagram-feed [class*="FeedHeader"] a{color:var(--head)!important;font-family:var(--f-sub)!important;letter-spacing:.06em}
.spotlight-instagram-feed [class*="FeedGridLayout__grid"]{gap:10px}
.spotlight-instagram-feed [class*="FeedGridLayout__cell"]{border-radius:var(--r-md);overflow:hidden;box-shadow:0 0 0 1px var(--edge)}
.spotlight-instagram-feed [class*="FeedGridLayout__cell"] img{transition:transform .5s var(--ease)}
.spotlight-instagram-feed [class*="FeedGridLayout__cell"]:hover img{transform:scale(1.04)}
body .site-content .spotlight-instagram-feed a.FollowButton,body .site-content .spotlight-instagram-feed [class*="FeedHeader"] button{padding:9px 18px!important;font-size:12px!important;color:var(--btn-text)!important;background:var(--btn-bg)!important}

/* Inner pages */
.single-page-header{padding:100px 0 6px!important}
.single-page-header .inner{background:transparent!important}
.single-page-header .inner > .container{padding:24px 28px;border-radius:var(--r-xl)}
@media (max-width:767.98px){.single-page-header .inner > .container{width:calc(100% - 20px);padding:18px}}
.site-main .entry-content > .kc_row .kc-row-container > .kc-wrap-columns{padding:22px 24px;margin:14px 0}
.page-template-elementor_header_footer article > .container .col-lg-12 > *:not(script){padding:22px 24px;margin:14px 0}
.site-content details summary{cursor:pointer;font-family:var(--f-sub);letter-spacing:.08em;text-transform:uppercase}
.elementor-icon svg,.elementor-icon i{fill:var(--accent);color:var(--accent)}
.kc_accordion_section,.kc_tabs .kc_tab,.kc-accordion .kc_accordion_header{
  border-radius:var(--r-md)!important;overflow:hidden;margin-bottom:10px;border:1px solid var(--edge)!important;
  background:var(--panel)!important;-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:var(--panel-shadow);
}
.kc_accordion_header>a{color:var(--head)!important;font-family:var(--f-sub)!important;letter-spacing:.06em}

/* ---------- 10. Footer ---------- */
.site-footer{
  margin:56px auto 0;width:min(1200px,calc(100% - 20px));border-radius:var(--r-xl) var(--r-xl) 0 0;
  background:var(--foot-bg)!important;-webkit-backdrop-filter:var(--blur-heavy);backdrop-filter:var(--blur-heavy);
  border:1px solid rgba(255,255,255,.18);border-bottom:0;box-shadow:0 1px 0 rgba(255,255,255,.22) inset,0 -24px 60px -36px rgba(7,16,66,.6);
}
.site-footer,.site-footer a,.site-footer .textwidget,.site-footer li{color:rgba(255,255,255,.78)!important}
.site-footer .widget-title{font-family:var(--f-sub)!important;letter-spacing:.2em;color:#fff!important}
.site-footer a:hover{color:#fff!important}
#menu-social{display:flex;flex-wrap:wrap;gap:8px;padding:0}
#menu-social a{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.25);color:#fff!important}
#menu-social a:hover{background:rgba(63,172,219,.3);box-shadow:0 0 18px -2px rgba(63,172,219,.7)}
.subfooter{
  width:min(1200px,calc(100% - 20px));margin:0 auto 14px;background:var(--subfoot-bg)!important;color:rgba(255,255,255,.75)!important;
  border:1px solid rgba(255,255,255,.14);border-top:1px solid rgba(63,172,219,.35);
  border-radius:0 0 var(--r-xl) var(--r-xl);padding:12px 0 14px!important;font-family:var(--f-sub);letter-spacing:.08em;
}
.back-to-top{border-radius:50%!important;background:var(--nav-bg)!important;-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);color:var(--nav-text)!important;border:1px solid var(--edge)}

/* ---------- 11. Motion ---------- */
.lg-reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.lg-reveal.lg-in{opacity:1;transform:none}

/* ---------- 12. Mobile ---------- */
@media (max-width:767.98px){
  .home .site-content{padding-top:74px}
  .home section.kc_row{padding-top:36px!important}
  #why-choose_content .kc-wrap-columns,#donation_back_guarantee_content .kc-wrap-columns,#doctor_designed .kc-col-container{padding:16px}
  .tc-custom-pricing{padding:16px!important}
  .kc-container{padding-left:12px!important;padding-right:12px!important;box-sizing:border-box!important;width:100%!important;max-width:100%!important}
  .kc-container>.kc-wrap-columns{width:auto!important;margin-left:0!important;margin-right:0!important;max-width:100%!important}
  .site-footer,.subfooter{width:calc(100% - 12px)}
  :root{--r-xl:18px;--r-lg:14px}
}

/* ---------- 13. Accessibility ---------- */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}.lg-reveal{opacity:1;transform:none}}
@media (prefers-reduced-transparency:reduce){
  *{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  body::before{display:none}
  html{background:var(--solid-base)}
  :root{--panel:var(--solid-panel);--nav-bg:var(--solid-panel)}
}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){:root{--panel:var(--solid-panel);--nav-bg:var(--solid-panel)}}

/* ---------- variant extras ---------- */
/* product tiles: multiply makes the photo's white background vanish into the frosted card */
.tc-custom-pricing .pricing-block{mix-blend-mode:multiply;background-color:transparent!important}
@media (max-width:767.98px){.site-content .kc-col-container h1.kc_title{line-height:1.05!important}}