/*
Theme Name: Bubble HCP
Theme URI: https://bubblehcp.example.com
Author: Bubble Skincare
Author URI: https://hellobubble.com
Description: Custom healthcare-professional portal homepage theme for Bubble Skincare. Built from the approved HCP homepage mockup — gated entrance, clinical spotlight, products, resource library, experts, sample request, and Find Us sections.
Version: 1.0.24
Requires at least: 6.0
Requires PHP: 7.4
License: Proprietary
Text Domain: bubble-hcp
*/

@font-face{
  font-family:'Scto Grotesk';
  src:url('assets/fonts/SctoGrotesk-Regular.woff2') format('woff2'),
      url('assets/fonts/SctoGrotesk-Regular.woff') format('woff');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Scto Grotesk Italic';
  src:url('assets/fonts/SctoGrotesk-RegularItalic.woff2') format('woff2'),
      url('assets/fonts/SctoGrotesk-RegularItalic.woff') format('woff');
  font-weight:400; font-style:italic; font-display:swap;
}
@font-face{
  font-family:'Scto Grotesk Medium';
  src:url('assets/fonts/SctoGrotesk-Medium.woff2') format('woff2'),
      url('assets/fonts/SctoGrotesk-Medium.woff') format('woff');
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Scto Grotesk Mediul Italic';
  src:url('assets/fonts/SctoGrotesk-MediumItalic.woff2') format('woff2'),
      url('assets/fonts/SctoGrotesk-MediumItalic.woff') format('woff');
  font-weight:500; font-style:italic; font-display:swap;
}
@font-face{
  font-family:'Scto Grotesk Bold';
  src:url('assets/fonts/SctoGrotesk-Bold.woff2') format('woff2'),
      url('assets/fonts/SctoGrotesk-Bold.woff') format('woff');
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Scto Grotesk Bold Italic';
  src:url('assets/fonts/SctoGrotesk-BoldItalic.woff2') format('woff2'),
      url('assets/fonts/SctoGrotesk-BoldItalic.woff') format('woff');
  font-weight:700; font-style:italic; font-display:swap;
}
@font-face{
  font-family:'Scto Grotesk Black';
  src:url('assets/fonts/SctoGrotesk-Black.woff2') format('woff2'),
      url('assets/fonts/SctoGrotesk-Black.woff') format('woff');
  font-weight:900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Scto Grotesk Black Italic';
  src:url('assets/fonts/SctoGrotesk-BlackItalic.woff2') format('woff2'),
      url('assets/fonts/SctoGrotesk-BlackItalic.woff') format('woff');
  font-weight:900; font-style:italic; font-display:swap;
}
@font-face{
  font-family:'Scto Grotesk Light Italic';
  src:url('assets/fonts/SctoGrotesk-LightItalic.woff2') format('woff2'),
      url('assets/fonts/SctoGrotesk-LightItalic.woff') format('woff');
  font-weight:300; font-style:italic; font-display:swap;
}

:root{
  --ink:#2d2a26;
  --ink-soft:#2D2A26;
  --paper:#FBF9F4;
  --paper-alt:#F1EEE5;
  --line:#E2DED2;
  --cffg:#FFF;
  --icon-thickness:1.5;

  --sky-100:#E4F7FC;
  --sky-300:#9FE0F1;
  --sky-500:#2AAFDE;
  --sky-700:#0C5A78;

  --teal-100:#f5f7f3;
  --teal-600:#c0F281;
  --teal-800:#c0f281;

  --coral-100:#FDEBE6;
  --coral-500:#F66646;
  --coral-600:#D8492E;
  --coral-700:#9A3520;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  font-family:'Scto Grotesk', Arial, sans-serif;
  background:var(--cffg);
  color:var(--ink);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{
  font-family:'Scto Grotesk Black', Arial, sans-serif;
  font-weight:900;
  letter-spacing:-3%;
  line-height: 110%;
  color:var(--ink);
}
h1 {
	font-size: 40px;
	text-align: center;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
ul{list-style:none;}
.wrap{max-width:1800px; margin:0 auto; padding:0 40px;}
.eyebrow{
  display:none; font-size:13px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--teal-600); margin-bottom:14px; align-items:center;
}
.eyebrow::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--coral-500); display:inline-block;}
.btn{
  display:inline-flex; align-items:center; gap:8px; font-family:'Scto Grotesk', Arial, sans-serif;
  font-weight:700; font-size:15px; padding:13px 26px; border-radius:100px; border:2px solid transparent;
  cursor:pointer; transition:transform .15s ease; background:none;
}
.btn:hover{transform:translateY(-1px);background:var(--teal-600); color:var(--ink);}
.btn-primary{background:var(--coral-500); color:#fff; font-size: 13px; text-transform: uppercase;}
.btn-primary:hover{transform:translateY(-1px);background:var(--teal-600); color:var(--ink);}
.btn-secondary{background:transparent; border-color:var(--ink); color:var(--ink);}
.btn-ghost{background:var(--sky-100); color:var(--sky-700);}
a.btn.btn-secondary {
    width: 100%;
    justify-content: center;
}
a.btn.btn-secondary {
	text-transform: uppercase;
}
.ring{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:50%; border:1.5px solid var(--sky-500);
  color:var(--sky-700); font-size:11px; font-weight:700; font-family:'Scto Grotesk', Arial, sans-serif;
  flex:none;
}

/* ===== Gate overlay ===== */
#gate{
  position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg, rgba(20,32,49,0.55), rgba(20,32,49,0.75));
  padding:24px;
}
#gate.is-hidden{display:none;}
.gate-card{
  background:var(--paper); border-radius:20px; max-width:460px; width:100%;
  padding:40px 36px; text-align:center; box-shadow:0 30px 60px rgba(20,32,49,0.35);
}
.gate-mark{
  width:44px; height:44px; border-radius:50%; background:var(--sky-500); margin:0 auto 20px;
  display:flex; align-items:center; justify-content:center;
}
.gate-mark span{width:16px; height:16px; border-radius:50%; background:#fff;}
.gate-card h2{font-size:20px; margin-bottom:14px;}
.gate-card p{font-size:15px; color:var(--ink-soft); margin-bottom:22px;}
.gate-actions{display:flex; flex-direction:column; gap:10px;}
.gate-actions .btn{justify-content:center; width:100%;}
.gate-fine{font-size:12.5px; color:var(--ink-soft); margin-top:18px; line-height:1.6;}
.gate-fine a{color:var(--sky-700); font-weight:600; text-decoration:underline;}

/* ===== Nav ===== */
.site-header{
  position:sticky; top:0; z-index:20; background:var(--cffg); backdrop-filter:blur(6px);
  border-bottom:1px solid var(--ink-soft);
}
.site-nav{
  display:flex; align-items:center; padding:18px 0; gap:16px;
}
.site-logo{display:flex; align-items:center; gap:10px; font-family:'Scto Grotesk', Arial, sans-serif; font-weight:700; font-size:19px; order:2; flex:1; justify-content:center;}
.site-logo img{width:100px;height:36.25px;}
.logo-mark{width:30px; height:30px; border-radius:50%; background:var(--sky-500); position:relative; flex:none;}
.logo-mark::after{content:""; position:absolute; width:11px; height:11px; border-radius:50%; background:var(--coral-500); top:4px; right:3px;}
.logo-tag{color:var(--ink-soft); font-weight:600; font-size:13px; margin-left:2px;}
.nav-links{display:flex; align-items:center; gap:30px; font-size:15px; font-weight:600; order:1; flex:2; justify-content:flex-start;}
.nav-links a:hover{color:var(--coral-500);}
.nav-cta{display:flex; align-items:center; gap:16px; order:3; flex:2; justify-content:flex-end;}
.nav-cta > .btn-primary {
	padding: 10px 40px; font-size: 12px;
}
/* Hamburger toggle button */
.menu-toggle{
  display:none; flex-direction:column; justify-content:center; align-items:flex-start;
  gap:5px; width:34px; height:34px; padding:0; order:0; flex:none;
  background:none; border:none; cursor:pointer;
}
.menu-toggle-bar{
  display:block; width:100%; height:2px; background:var(--ink);
  transition:transform .25s ease, opacity .2s ease;
}
.menu-toggle.is-active .menu-toggle-bar:nth-child(1){transform:translateY(7px) rotate(45deg);}
.menu-toggle.is-active .menu-toggle-bar:nth-child(2){opacity:0;}
.menu-toggle.is-active .menu-toggle-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* Off-canvas mobile nav (opens from the left) */
.mobile-nav-overlay{
  position:fixed; inset:0; z-index:29; background:rgba(45,42,38,0.5);
  opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.mobile-nav-overlay.is-open{opacity:1; pointer-events:auto;}
.mobile-nav{
  position:fixed; top:0; left:0; bottom:0; z-index:30;
  width:min(320px, 82vw); background:var(--paper);
  padding:24px 28px 32px; display:flex; flex-direction:column; overflow-y:auto;
  transform:translateX(-100%); transition:transform .3s ease;
  box-shadow:12px 0 30px rgba(45,42,38,0.18);
}
.mobile-nav.is-open{transform:translateX(0);}
.mobile-nav-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:28px;}
.mobile-nav-head .site-logo,
.mobile-nav-head .site-logo img{margin:0;}
.mobile-nav-head .site-logo{justify-content:flex-start; flex:none; order:0;}
.mobile-nav-close{background:none; border:none; font-size:28px; line-height:1; color:var(--ink); cursor:pointer; padding:2px 6px;}
.mobile-nav .nav-links{
  display:flex; flex-direction:column; align-items:flex-start; gap:22px;
  font-size:18px; order:0; flex:none;
}
.mobile-nav-cta{margin-top:auto; padding-top:28px;}
.mobile-nav-cta .btn{width:100%; justify-content:center;}
body.mobile-nav-open{overflow:hidden;}

/* ===== Hero ===== */
.hero{padding:76px 0 0;}
.hero-centered{margin:0 auto; text-align:center; position:relative; z-index:1;}
.hero-centered .eyebrow{justify-content:center;}
.hero h1 {
    font-size: 70px;
    line-height: 90%;
    max-width: 1290px;
    letter-spacing: -3%;
    margin: 10px auto;
}
.hero h1 em{font-style:normal; color:var(--coral-500);}
.hero p.lede{max-width: 932px; font-size:20px; line-height: 110%; font-weight: 400; color:var(--ink-soft); padding:0; margin:46px auto;}
.hero-ctas{display:flex; gap:14px; flex-wrap:wrap; justify-content:center;}
.hero-ctas.disabled { display: none; }
/* ===== Section shell ===== */
.section{padding:78px 0;}
.section-head{display:block; margin-bottom:40px; text-align: center;}
.section-head h2{
    font-size: clamp(2rem, 2.5vw, 4rem);
    line-height: 90%;
    letter-spacing: -3%;
}
.section-head .sub{color:var(--ink-soft); font-size:20px; max-width:932px; margin: 20px auto;letter-spacing: -3%;}

/* ===== Clinical spotlight ===== */
.spotlight{background:var(--teal-800); color:#fff; border-radius:28px;}
.spotlight-inner{padding:56px; display:grid; grid-template-columns:0.9fr 1.1fr; gap:48px; align-items:center;}
.spotlight .eyebrow{color:var(--sky-300);}
.spotlight .eyebrow::before{background:var(--sky-300);}
.spotlight h2{color:#fff; font-size:28px; line-height:1.2; margin-bottom:18px;}
.spotlight p{color:rgba(255,255,255,0.78); font-size:15.5px; margin-bottom:22px;}
.spotlight-authors{font-size:13.5px; color:rgba(255,255,255,0.65); margin-bottom:26px; line-height:1.7;}
.spotlight-card{
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.16); border-radius:18px; padding:28px;
}
.spotlight-card .journal{font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color:var(--sky-300); margin-bottom:10px;}
.spotlight-card h3{color:#fff; font-size:19px; line-height:1.35; margin-bottom:14px;}
.spotlight-card .meta{font-size:13px; color:rgba(255,255,255,0.6); margin-bottom:20px;}
.spotlight-card .btn{width:100%; justify-content:center;}

/* ===== Products ===== */
.product-grid {
    display: flex;
    flex-direction: row;
    gap: 20px;
    flex-wrap: wrap;
}

.product-card {
  background: #fff; 
  border-radius: 0px; 
  padding: 0; /* Clear bottom padding here to let the button sit clean */
  overflow: hidden;
  display: flex; 
  flex-direction: column; 
  gap: 14px;
  flex: 1;
  min-width: 300px;
  max-width: 32%;
}

.product-card {
	max-width: 100%;
}

.product-card-shell {
  border: 1px solid var(--ink-soft);
  background: #fff; 
  border-radius: 0px; 
  padding: 0 0 22px; 
  overflow: hidden;
  display: flex; 
  flex-direction: column; 
  gap: 14px;
  
  /* FORCE THE SHELL TO FILL THE CARD HEIGHT */
  flex: 1; 
}

.product-card h3 {
  font-size: 24px;
  margin: 0 22px;
}

.product-card p {
  font-size: 16px;
  line-height: 110%;
  color: var(--ink-soft); 
  margin: 0 22px;
}

.product-photo {
  width: 100%; 
  aspect-ratio: 4/4.2; 
  overflow: hidden; 
  background: var(--paper-alt);
}

.product-photo img {
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
  display: block;
}

.product-card .swatch {
  width: 38px; 
  height: 38px; 
  border-radius: 12px; 
  margin: 22px 22px 0;
}

.chip-row {
  display: flex; 
  flex-wrap: wrap; 
  gap: 7px; 
  margin: 0 22px;
}

.chip {
  font-size: 12px; 
  font-weight: 600; 
  padding: 5px 13px; 
  border-radius: 100px; 
  background: #fff; 
  border: 1.5px solid var(--ink); 
  color: var(--ink);
}

.btn-block {
  width: 100%; 
  justify-content: center; 
  margin-bottom: 22px; /* Bottom margin moved here for safe spacing */
  
  /* ANCHORS BUTTON TO THE VERY BOTTOM OF THE CARD */
  margin-top: auto; 
}

/* ===== Resources ===== */
.section-bleed-coral{
  background:var(--coral-500); border-radius:0; margin:0; width:auto;
}
.section-bleed-coral > .wrap{padding-top:56px; padding-bottom:56px;}
.section-head-on-coral h2.on-coral{color:#fff;letter-spacing: -3%;}
.eyebrow-on-coral{color:rgba(255,255,255,0.85);}
.eyebrow-on-coral::before{background:#fff;}
.sub.on-coral{color:rgba(255,255,255,0.85);}
.resource-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.resource-card{background:#fff; border-radius:0; padding:26px; display:flex; flex-direction:column; gap:10px; text-decoration:none;border: 1px solid var(--ink);}
.resource-card h3{font-size:30px; color:var(--ink);}
.resource-card p{font-size:16px; font-weight: 400; letter-spacing: -2%; color:var(--ink-soft); line-height: 110%;}
.resource-card .count{font-family:'Scto Grotesk Bold', Arial, sans-serif; font-size:16px; font-weight:700; color:var(--ink); margin-top:auto; text-decoration: underline;}

/* ===== Experts carousel ===== */
.expert-carousel{position:relative;}
#experts {
	padding-bottom: 0px;
}
.expert-track{
  display:flex; gap:0px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
}
.expert-track::-webkit-scrollbar{display:none;}
.expert-slide{
  flex:0 0 calc(24% - 14.4px); scroll-snap-align:start; text-align:left; padding:18px;
    border-right: 0.75px solid var(--ink-soft);
    border-top: 0.75px solid var(--ink-soft);
    border-bottom: 0.75px solid var(--ink-soft);
}
.expert-avatar{
      width:100%; height:100%x; border-radius:50%; background:var(--ink); border:0.75px solid var(--ink);
  display:flex; align-items:center; justify-content:center; margin:0 auto 14px;
  font-family:'Scto Grotesk', Arial, sans-serif; font-weight:700; color:var(--ink); font-size:20px; overflow:hidden;
}
.expert-avatar img{width:100%; height:100%; object-fit:cover;}
.expert-slide h3{
    color: #2d2a26;
    font-family: "Scto Grotesk Black";
    font-size: 30px;
    font-style: normal;
    font-weight: 900;
    line-height: 110%;
    letter-spacing: -1.2px;
    text-transform: capitalize;
    text-align: left;
}
.expert-credentials{font-size:12px; color:var(--ink-soft); margin-bottom:10px;text-align: left;}
.expert-quote{font-size:14.32px; color:var(--ink-soft); line-height:110%;text-align: left; font-weight: 400;}
.carousel-arrow{
  width:18px; height:19px; background:#fff; border: 0; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:16px; color:var(--ink);
}
.carousel-arrow-prev{left:0;}
.carousel-arrow-next{right:0;}
.expert-carousel.is-single-page .carousel-arrow{display:none;}
.expert-dots{display:flex; justify-content:center; gap:8px; align-items: center;}
.expert-dot{width:9.75px; height:9.75px; border-radius:50%; border:1px solid var(--ink); background:var(--ccfg); cursor:pointer; padding:2.44px;}
.expert-dot.is-active{background:var(--ink);}
.expert-track{cursor:grab;}
.expert-track.is-dragging{cursor:grabbing; scroll-snap-type:none; user-select:none;}
.expert-controls{
    display: flex;
    justify-content: space-between;
    padding: 16px 25px;
}
.expert-controls .control-nav{
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: center;
}
.expert-controls path {
    vector-effect: non-scaling-stroke;
    stroke: currentColor;
    stroke-width: var(--icon-thickness);
}
.carousel-arrow:disabled{opacity:0.3; cursor:default;}

/* ===== Sample banner ===== */
.sample-banner-ctas {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: center;
}
.sample-banner .btn-primary{
    display: inline-flex;
    align-items: center;
    color:var(--sky-700);
    gap: 8px;
    font-family: 'Scto Grotesk', Arial, sans-serif;
    font-weight: 700;
    font-size: 15px;
    padding: 13px 26px;
    border-radius: 100px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform .15s ease;
    background:#fff;
}
.sample-banner .btn-primary:hover{transform:translateY(-1px);background:var(--teal-600); color:var(--ink);}
.section#sample {padding: 0;}

/* Container with a subtle dark tint overlay and full-bleed image */
.bg-image {
    /* Mixes a 25% black tint overlay with your background graphic */
    background-image: url('assets/img/bubble_derm_product_swatch.jpg'); 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    /* Layout positioning */
    min-height: 450px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 24px; /* Generous padding stops text from clipping edges */
    box-sizing: border-box;
}

/* Content block styling */
.sample-banner {
    text-align: center;
    color: #ffffff;
}

.sample-banner h2 {
    color:#fff; font-size:70px; line-height: 90%; text-align: center; font-weight: 900; margin:20px auto; letter-spacing: -3%;
}

.sample-banner p {
    color:rgba(255,255,255,0.85); font-size:30px; margin: 46px auto; font-size: 30px; text-align: center; font-weight: 400;
}

/* Pill Call-To-Action Button */
.sample-banner .btn-primary {
    background-color: #e96b46;
    color: #ffffff;
    padding: 12px 36px;
    border-radius: 50px; /* Forces a consistent pill shape */
    text-decoration: none;
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    display: inline-block;
    transition: all 0.2s ease-in-out;
}

.sample-banner .btn-primary:hover {
    transform:translateY(-1px);background:var(--teal-600); color:var(--ink);
}

/* ==========================================================================
   2. Mobile-First Responsiveness (Media Queries)
   ========================================================================== */

/* Optimization for tablets and small screens */
@media (max-width: 768px) {
    .bg-image {
        min-height: 380px; /* Compact height for smaller viewports */
        padding: 40px 20px;
    }
    
    .sample-banner h2 {
        font-size: 2rem; /* Scales text down seamlessly to prevent awkward line breaks */
        margin-bottom: 12px;
    }
    
    .sample-banner p {
        font-size: 1.1rem;
    }
	.product-card {
		max-width: 100%;
	}
	div.experts-page-card {
		flex: none; 
		max-width:100%; 
	}
	.nav-cta > .btn-primary {
		padding: 10px 15px;
	}
	.wrap {
		padding: 0px 20px;
	}
}

/* Optimization for compact smartphones */
@media (max-width: 480px) {
    .bg-image {
        min-height: 320px;
    }
    
    .sample-banner h2 {
        font-size: 1.65rem;
    }
    
    .sample-banner p {
        font-size: 0.95rem;
    }
    
    .sample-banner .btn-primary {
        width: 100%; /* Spans button to full width on ultra-small screens for tap-targets */
        box-sizing: border-box;
    }
}

/* ===== Find us ===== */
.findus-grid{display:grid; grid-template-columns:1fr 1fr; gap:40px;}
.findus-col h3{font-size:16px; margin-bottom:16px;}
.logo-row{display:flex; flex-wrap:wrap; gap:10px;}
.logo-chip{
  padding:14px 20px; border:1px solid var(--line); border-radius:12px; font-size:13.5px; font-weight:700;
  color:var(--ink-soft); background:#fff;
}
section#findus { display: none; }

/* ===== Medical affairs strip ===== */
.affairs{
  background:var(--paper-alt); border-radius:22px; padding:36px 44px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.affairs h3{font-size:19px; margin-bottom:4px;}
.affairs p{font-size:14px; color:var(--ink-soft);}
.affairs-ctas{display:flex; gap:12px;}

/* ===== Footer ===== */
.site-footer{background:var(--coral-500); color:rgba(255,255,255,0.88); padding:0;}
.footer{display: flex;flex-direction: row;gap:32px;margin-bottom:0px;}
.footer-top{display: flex; gap:20px; flex:1; align-items: stretch;     flex-wrap: wrap;}
.footer-right, .footer-left {display: flex; flex: 1; flex-direction: column;}
.footer-right {padding: 52px 48px 10px 0;}
.footer-brand .site-logo{color:#fff;}
.footer-brand p{font-size:13.5px; margin-top:14px; max-width:260px; color:rgba(255,255,255,0.75);}
.footer-col{
    flex: 0 0 calc((100% - (20px * 2)) / 3);
}
.footer-col h4{
    display: flex;
    flex: 0 0 calc((100% - (20px * 2)) / 3);
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    color: var(--cffg);
    font-size: 26px;
    font-family: 'Scto Grotesk Black';
    font-weight: 900;
    font-style: normal;
    line-height: 110%;
    padding: 0 0 16px;
    text-align: left;
    cursor: default;
    pointer-events: none;
    letter-spacing: -3%;
}
.footer-col a, .footer-bottom{
    color: var(--cffg);
    text-decoration: none;
    font-size: 14px;
    font-style: normal;
    line-height: 12px;
    letter-spacing: -0.24px;
    transition: opacity 0.15s ease;
    font-family: 'Scto Grotesk', Arial, sans-serif;
}
.footer-col a:hover{color:#fff;}
.footer-bottom {
    margin-top: auto; 
    width: 100%;
}
/* Optimization for compact smartphones */
@media (max-width: 720px) {
	.hero p.lede{margin:24px auto;}

	div.product-page-card-body {
	  min-height: 0px;
	}
    .spotlight-inner, .product-grid, .resource-grid, .findus-grid, .footer-top{grid-template-columns:1fr;}
    .nav-links{display:none;}
    .menu-toggle{display:flex;}
    .hero {
        padding: 40px 0 0;
    }
    .wrap.hero-centered {
        padding: 0 20px;
    }
    .hero h1 {
        font-size: 36px;
        font-weight: 900;
        line-height: 90%;
        letter-spacing: -3%;
        font-style: normal;
        font-family: "Scto Grotesk Black", Arial, sans-serif;
    }
    p.lede {
        font-size: 18px;
        font-weight: 400;
        line-height: 110%;
        letter-spacing: -0.54px;
        margin: 25px auto;
    }
    .section {
        padding: 25px 0;
    }
    .section-head h2 {
        font-size: 36px;
    }
    .section-head .sub {
        line-height: 90%;
        font-size: 18px;
    }
    .product-grid {
        grid-template-columns: 1fr;
    }
    .section-bleed-coral > .wrap {
        padding-top: 20px;
        padding-bottom: 20px;
    }
    .expert-carousel {
        padding: 0px;
    }
    section#experts .wrap {
        padding: 0px;
        margin: 15px;
    }
    .expert-slide{flex:0 0 100%;}
    .carousel-arrow{top:38px;}
    .section#sample {
        padding: 0;
    }
    .product-grid{grid-template-columns:1fr;}
    .footer {
        flex-direction: column;
        gap: 40px;
    }
    .footer-left {
        order: 2;
    }
    .footer-right {
        gap: 40px;
        padding: 52px 48px 10px;
    }
    .footer-col h4 {
        font-size: 20px;
    }
}

@media (720px <= width <= 900px){
  .spotlight-inner, .product-grid, .resource-grid, .findus-grid, .footer-top{grid-template-columns:1fr;}
  .product-grid{grid-template-columns:1fr 1fr;}
  .nav-links{display:none;}
  .menu-toggle{display:flex;}
  .expert-slide{flex:0 0 100%;}
  .expert-carousel{padding:0 44px;}
  .carousel-arrow{top:38px;}
  .footer {
    flex-direction: column;
        gap: 40px;
    }
    .footer-left {
        order: 2;
    }
    .footer-right {
        gap: 40px;
        padding: 52px 48px 10px;
    }
    .footer-col h4 {
        font-size: 20px;
    }
}

@media (900px <= width <= 1100px){
    .product-grid{grid-template-columns:1fr 1fr 1fr;}
    .footer-col h4 {
        font-size: 26px;
    }
    .footer-col a {
        line-height: 110%;
    }
    .footer-col li {
        line-height: 110%;
    }
        .footer-right {
        padding: 32px 20px 10px 0;
        flex: 1.2;
    }
}

/*PRODUCT PAGE*/
.product-page-category{border-bottom:1px solid var(--ink);}
.product-page-category-head{text-align:center; margin-bottom:40px;}
.product-page-category-head h1{font-size:36px; margin-bottom:10px;letter-spacing:-4%;}
.product-page-category-head p{color:var(--ink-soft); font-size:15.5px; max-width:545px; margin:0 auto;line-height: 110%;}
.product-page-grid {display: flex; flex-direction: row; gap: 28px; flex-wrap: wrap; justify-content: center;}
.product-page-card{flex:0 0 calc(24% - 14.4px); border:1px solid var(--ink); border-radius:0; overflow:hidden; background:#fff;}
.product-page-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.product-page-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 250px;
}

.full-ingredients {
  margin-top: auto;
}
.product-page-photo{aspect-ratio:4/4; background:var(--cffg); overflow:hidden; border-bottom:1px solid var(--ink);}
.product-page-photo img{width:100%; height:100%; object-fit:contain; display:block;}
.product-page-card-body{padding:22px 24px 0;}
.product-page-card-body h3{font-size:16px; margin-bottom:2px;}
.product-page-subtitle{color:var(--ink-soft); font-size:14px; margin-bottom:18px;line-height:110%;}
.ingredient-icon-row{display:flex; gap:22px; padding-bottom:20px;}
.ingredient-icon{display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; flex: 1;}
.ingredient-icon-badge{width:40px; height:40px; border-radius:50%; background:var(--paper-alt); display:flex; align-items:center; justify-content:center; overflow:hidden;}
.ingredient-icon-badge img{width:40px; height:40px; object-fit:contain;}
.ingredient-icon-label{font-size:12px; font-weight:700; line-height:1.3;letter-spacing:-2%;font-family:"Scto Grotesk Bold"}
.full-ingredients{border-top:1px solid #2D2A26;}
.full-ingredients summary{list-style:none; cursor:pointer; padding:16px 0; font-weight:700; font-size:15px; display:flex; align-items:center; justify-content:space-between;letter-spacing: -3%;
font-family:"Scto Grotesk Black";}
.full-ingredients summary::-webkit-details-marker{display:none;}
.full-ingredients summary::after{content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23333333' d='M1.5 7 12 17.5 22.5 7' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); font-size:16px; transition:transform .2s ease;     width: 20px; height: 20px;}
.full-ingredients[open] summary::after{transform:rotate(180deg);}
.full-ingredients p{padding:0 24px 20px; font-size:13px; color:var(--ink-soft); line-height:1.7;}
@media (max-width:900px){ .product-page-grid{display: flex; flex-direction: column;} }

/*Resource PAGE*/
.resource-page-type{border-bottom:1px solid var(--line);}
.resource-page-type-head{text-align:center; margin-bottom:32px;}
.resource-page-type-head h2{font-size:70px; letter-spacing: -3%; margin-bottom:8px;}
.resource-page-type-head p{color:var(--ink-soft); max-width:800px; margin:0 auto; line-height: 110%;}
.resource-page-grid{display:flex; flex-wrap:wrap; gap:20px;}
.resource-page-card{flex:1 1 280px; max-width:calc(33.333% - 14px); border:1px solid var(--ink); border-radius:0; overflow:hidden; background:#fff; justify-content: flex-start; flex-direction: column; display: flex;}
.resource-page-photo{aspect-ratio:4/3; background:var(--paper-alt); overflow:hidden;}
.resource-page-photo img{width:100%; height:100%; object-fit:cover; display:block;}
.resource-page-card-body{padding:20px;}
.resource-page-card-body h3{font-size: 20px; letter-spacing: -3%; line-height: 100%; font-weight: 900;margin-bottom:12px;}
.resource-page-card-body p{font-size: 16px; letter-spacing: -2%; line-height: 100%; font-weight: 400;}
a.resource-page-btn {
    background: var(--coral-500); color: var(--cffg); border: 1px solid var(--cffg); margin-top: auto; width: calc(100% - 40px); justify-content: center; align-items: baseline; margin: auto auto 20px; }
.resource-page-card-btn { margin-top: auto; padding: 0 20px; }
@media (max-width:900px){ .resource-page-card{max-width:100%;} }

/*EXPERT PAGE*/
.experts-page-head{text-align:center; max-width:1100px; margin:0 auto 48px;}
.experts-page-head h1{font-size:70px; margin-bottom:14px; letter-spacing: -3%;}
.experts-page-intro{color:var(--ink-soft); font-size:15.5px;}
.experts-page-grid{display:flex; flex-wrap:wrap; justify-content:left; gap:32px;}
.experts-page-card{flex:0 0 calc((100% - (32px * 4)) / 4); max-width:calc(33.333% - 32px); text-align:left;}
.experts-page-card .expert-avatar{width:100%; height:auto; margin:0 auto 14px;}


/* Homepage chip logo */
.logo-chip{display:flex; align-items:center; gap:8px;}
.logo-chip-img{width:20px; height:20px; object-fit:contain; flex:none;}

/* Dedicated Find Us page */
.findus-page-section{margin-bottom:48px;}
.find-us.wrap {max-width: unset; padding: 0px;}
.find-us-page-head h1 {font-size: 70px; font-weight: 900; line-height: 90%; letter-spacing: -4%; padding-bottom: 40px; }
.findus-page-section h2 {font-size: 30px; margin-bottom: 20px; text-align: center; border: 0.75px solid var(--ink); padding: 16px; line-height: 90%; font-weight: 900; letter-spacing: -4%; background: var(--coral-500); color: var(--cffg); }
.findus-page-grid{display:flex; flex-wrap:wrap; justify-content:center; gap:20px; margin-top: 50px;}
.findus-page-card{flex:0 0 160px; text-align:center; border:none; border-radius:12px; padding:20px;}
.findus-page-logo{height:48px; display:flex; align-items:center; justify-content:center; margin-bottom:10px;}
.findus-page-logo img{max-height:88px; max-width:100%; object-fit:contain;}
.findus-page-card p {display: none;}

/* Sample request page */
form {
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}