/*
Theme Name: Herbal Profiles
Theme URI: https://herbalprofiles.com/
Author: Lars Miller Media
Description: Custom theme for Herbal Profiles. Newsletter-first homepage, scored brand reviews, and exclusive codes. Built to replace the Elementor layout while keeping every URL and Rank Math setting.
Version: 1.0.6
Requires at least: 6.2
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: herbal-profiles
*/

/* Tokens. Dark ground so the product photos (shot on black) sit in it seamlessly.
   Playfair Display for headlines and numbers, DM Sans for everything else. Gold is reserved for subscribe and codes. */
:root{
  --hp-ground:#07120F; --hp-panel:#0E1E19; --hp-raise:#142A23; --hp-ink:#EEF2EC; --hp-muted:#A7B7AE; --hp-line:#24392F;
  --hp-gold:#E9B949; --hp-gold-ink:#0B1612; --hp-leaf:#8CC7A6; --hp-focus:#9DB8FF;
  --hp-serif:"Playfair Display", Georgia, "Times New Roman", serif;
  --hp-sans:"DM Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --hp-max:1200px;
}
html{color-scheme:dark}
body.hp{background:var(--hp-ground);color:var(--hp-ink);font-family:var(--hp-sans);font-size:17px;line-height:1.6;margin:0;-webkit-font-smoothing:antialiased}
.hp *,.hp *::before,.hp *::after{box-sizing:border-box}
.hp a{color:inherit}
.hp img{max-width:100%;height:auto}
.hp :focus-visible{outline:3px solid var(--hp-focus);outline-offset:2px}
.hp h1,.hp h2,.hp h3,.hp h4{font-family:var(--hp-serif);font-weight:600;line-height:1.12;text-wrap:balance;margin:0;color:var(--hp-ink);letter-spacing:normal;text-transform:none}
.hp .screen-reader-text,.hp .sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.hp .skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--hp-gold);color:var(--hp-gold-ink);padding:10px 14px;border-radius:8px}
.hp .skip:focus{left:8px}
.hp .eyebrow{display:inline-block;font:700 .74rem/1.4 var(--hp-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--hp-leaf)}
.hp .wrap{max-width:var(--hp-max);margin-inline:auto;padding-inline:clamp(16px,4vw,48px)}

/* buttons */
.hp .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:700 .95rem/1 var(--hp-sans);border:0;border-radius:999px;padding:.85rem 1.35rem;min-height:46px;cursor:pointer;text-decoration:none;white-space:nowrap}
.hp .btn-gold{background:var(--hp-gold);color:var(--hp-gold-ink)}
.hp .btn-gold:hover{filter:brightness(1.06)}
.hp .btn-ghost{background:transparent;color:var(--hp-ink);border:1.5px solid var(--hp-line)}
.hp .btn-ghost:hover{border-color:var(--hp-ink)}

/* header */
.hp .hdr{border-bottom:1px solid var(--hp-line);background:var(--hp-ground);position:relative;z-index:20}
.hp .hdr .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;padding-block:14px}
.hp .logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.hp .mark{display:block;width:44px;height:44px;flex:none;background:var(--hp-ink);-webkit-mask:var(--hp-mark) center/190% auto no-repeat;mask:var(--hp-mark) center/190% auto no-repeat}
.hp .logo span{font:600 1.35rem/1 var(--hp-serif)}
.hp .nav ul{display:flex;flex-wrap:wrap;gap:2px 24px;list-style:none;margin:0;padding:0}
.hp .nav a{display:block;text-decoration:none;padding:.45rem 0;border-bottom:2px solid transparent;color:var(--hp-muted);font-weight:500;font-size:.95rem}
.hp .nav a:hover,.hp .nav .current-menu-item>a,.hp .nav .current-menu-parent>a,.hp .nav a[aria-current]{color:var(--hp-ink);border-color:var(--hp-gold)}
.hp .nav .sub-menu{display:none}
.hp .menu-btn{display:none;background:transparent;border:1.5px solid var(--hp-line);color:var(--hp-ink);border-radius:999px;min-height:44px;padding:0 14px;font:600 .9rem var(--hp-sans);cursor:pointer}
@media (max-width:860px){
  .hp .menu-btn{display:inline-flex;align-items:center}
  .hp .nav{order:3;flex-basis:100%;display:none}
  .hp .nav.open{display:block}
  .hp .nav ul{flex-direction:column;gap:0;padding-bottom:8px}
  .hp .nav a{padding:.75rem 0;border-bottom:1px solid var(--hp-line)}
  .hp .hdr .hdr-cta{display:none}
}

/* subscribe */
.hp .sub{display:flex;gap:8px;flex-wrap:wrap;max-width:540px;background:var(--hp-panel);border:1px solid var(--hp-line);border-radius:28px;padding:6px}
.hp .sub input[type=email]{flex:1 1 220px;min-width:0;font:500 1rem var(--hp-sans);padding:.7rem 1rem;border:0;border-radius:999px;background:transparent;color:var(--hp-ink);min-height:46px;outline-offset:-2px}
.hp .sub input::placeholder{color:var(--hp-muted)}
.hp .sub-msg{font-size:.9rem;margin:8px 0 0;min-height:0}
.hp .sub-msg:empty{display:none}
.hp .sub-msg.ok{color:var(--hp-leaf)}.hp .sub-msg.err{color:#FF9C8A}
.hp .bh-embed{width:100%;max-width:540px;height:52px;border:0;border-radius:12px;background:transparent;display:block}
.hp .fine{font-size:.85rem;color:var(--hp-muted);margin:10px 0 0}

/* home hero */
.hp .hero{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(28px,5vw,64px);align-items:center;padding-block:clamp(40px,6vw,80px)}
.hp .hero h1{font-size:clamp(2.4rem,5.4vw,4.4rem);letter-spacing:-.015em;margin-top:14px}
.hp .hero h1 i{color:var(--hp-gold);font-style:italic}
.hp .lede{font-size:1.15rem;color:var(--hp-muted);max-width:50ch;margin:18px 0 26px}
.hp .stats{display:flex;flex-wrap:wrap;gap:12px 40px;margin-top:30px;padding-top:22px;border-top:1px solid var(--hp-line)}
.hp .stat b{display:block;font:600 2.1rem/1 var(--hp-serif);font-variant-numeric:lining-nums tabular-nums}
.hp .stat span{font-size:.85rem;color:var(--hp-muted)}
.hp .cans{position:relative;aspect-ratio:1/1;margin:0;max-width:100%}
.hp .cans a{position:absolute;width:52%;display:block;border-radius:14px;overflow:hidden;border:1px solid var(--hp-line);box-shadow:0 30px 60px -20px rgba(0,0,0,.6);background:#000}
.hp .cans img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover}
.hp .cans a:nth-child(1){left:0;top:12%;transform:rotate(-6deg)}
.hp .cans a:nth-child(2){left:24%;top:0;z-index:2}
.hp .cans a:nth-child(3){right:0;top:16%;transform:rotate(6deg)}

/* countdown */
.hp .ban{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;background:var(--hp-gold);color:var(--hp-gold-ink);border-radius:14px;padding:18px 24px;margin-bottom:64px}
.hp .ban .count{font:700 2.4rem/1 var(--hp-serif);font-variant-numeric:lining-nums tabular-nums}
.hp .ban .count small{font:700 .75rem var(--hp-sans);letter-spacing:.12em;text-transform:uppercase;margin-left:6px}
.hp .ban p{margin:0;flex:1 1 300px;font-weight:500}
.hp .ban a{font-weight:700;color:var(--hp-gold-ink)}

/* sections */
.hp .sec{padding-block:0 64px}
.hp .sechead{display:flex;justify-content:space-between;align-items:end;gap:12px;flex-wrap:wrap;margin-bottom:22px}
.hp .sechead h2{font-size:clamp(1.7rem,3.2vw,2.4rem);margin-top:6px}
.hp .sechead>a{font-weight:700;text-decoration-color:var(--hp-gold);text-underline-offset:4px}
.hp .split{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:40px;align-items:start}
.hp .reads{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.hp .read{display:grid;gap:8px;align-content:start;text-decoration:none;border-top:1px solid var(--hp-line);padding-top:16px}
.hp .read h3{font-size:1.45rem}
.hp .read:hover h3{text-decoration:underline;text-decoration-color:var(--hp-gold);text-underline-offset:4px}
.hp .read .dek{margin:0;color:var(--hp-muted)}
.hp .meta{font-size:.82rem;color:var(--hp-muted)}
.hp .popular{background:var(--hp-panel);border:1px solid var(--hp-line);border-radius:16px;padding:20px 22px}
.hp .popular ol{list-style:none;margin:12px 0 0;padding:0;counter-reset:pop;display:grid;gap:4px}
.hp .popular li{counter-increment:pop}
.hp .popular a{display:grid;grid-template-columns:34px 1fr;column-gap:8px;padding:12px 0;border-top:1px solid var(--hp-line);text-decoration:none}
.hp .popular li:first-child a{border-top:0}
.hp .popular a::before{content:counter(pop);grid-row:span 2;font:700 1.6rem/1 var(--hp-serif);color:var(--hp-gold)}
.hp .popular b{font-family:var(--hp-serif);font-weight:600;font-size:1.05rem}
.hp .popular span{color:var(--hp-muted);font-size:.88rem}

/* cards */
.hp .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:22px}
.hp .card{display:grid;grid-template-rows:auto 1fr;text-decoration:none;border-radius:14px;overflow:hidden;background:var(--hp-panel);border:1px solid var(--hp-line)}
.hp .card[hidden]{display:none}
.hp .shot{position:relative;aspect-ratio:1/1;background:#000;overflow:hidden}
.hp .shot img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s}
.hp .card:hover .shot img{transform:scale(1.04)}
.hp .score{position:absolute;top:12px;right:12px;background:var(--hp-ground);color:var(--hp-ink);border:1px solid var(--hp-line);border-radius:10px;padding:6px 9px;text-align:center;line-height:1}
.hp .score b{display:block;font:700 1.25rem var(--hp-serif);font-variant-numeric:lining-nums}
.hp .score small{font-size:.62rem;color:var(--hp-muted);letter-spacing:.06em}
.hp .type{position:absolute;left:12px;bottom:12px;background:rgba(7,18,15,.82);color:#EEF2EC;border-radius:999px;padding:4px 10px;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.hp .cbody{padding:14px 16px 18px;display:grid;gap:6px;align-content:start}
.hp .cbody h3{font-size:1.15rem}
.hp .cbody p{margin:0;color:var(--hp-muted);font-size:.92rem;line-height:1.5}

/* codes */
.hp .hp-codes{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:16px}
.hp .hp-code{border:1.5px dashed var(--hp-line);border-radius:14px;padding:16px;display:grid;gap:8px;background:var(--hp-panel);align-content:start}
.hp .hp-code .b{font:600 1.15rem var(--hp-serif)}
.hp .hp-code .off{color:var(--hp-muted);font-size:.88rem}
.hp .hp-code .row{display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--hp-ground);border-radius:10px;padding:6px 6px 6px 12px}
.hp .hp-code code{font:700 1rem var(--hp-sans);letter-spacing:.08em;background:none;color:var(--hp-ink);padding:0}
.hp .hp-code button{font:700 .82rem var(--hp-sans);border:0;background:var(--hp-ink);color:var(--hp-ground);border-radius:8px;padding:.5rem .8rem;min-height:38px;cursor:pointer}
.hp .hp-code .shop{font-size:.88rem;color:var(--hp-muted)}
.hp .hp-code.feat{grid-row:span 2;border:2px solid var(--hp-gold);background:var(--hp-raise);padding:24px;gap:12px}
.hp .hp-code.feat .b{font-size:2rem}
.hp .hp-code.feat .row{padding:10px 10px 10px 16px}
.hp .hp-code.feat code{font-size:1.5rem}
.hp .hp-code.feat button{background:var(--hp-gold);color:var(--hp-gold-ink);min-height:46px;padding:.6rem 1.1rem}
.hp .hp-code.feat p{margin:0;color:var(--hp-muted)}

.hp .cta2{display:grid;grid-template-columns:1fr minmax(0,520px);gap:24px;align-items:center;background:var(--hp-panel);border:1px solid var(--hp-line);border-radius:18px;padding:clamp(22px,4vw,44px);margin-bottom:56px}
.hp .cta2 h2{font-size:clamp(1.6rem,3vw,2.3rem);margin-top:8px}
.hp .cta2 p{margin:8px 0 0;color:var(--hp-muted)}

/* footer */
.hp .ftr{border-top:1px solid var(--hp-line);margin-top:24px}
.hp .ftr .wrap{padding-block:32px;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:28px;font-size:.93rem}
.hp .ftr h2{font:700 .74rem var(--hp-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--hp-muted);margin-bottom:10px}
.hp .ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.hp .ftr a{text-decoration:none}.hp .ftr a:hover{text-decoration:underline}
.hp .handle{color:var(--hp-muted);margin:10px 0 0}
.hp .social{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.hp .social a{width:44px;height:44px;border-radius:50%;border:1px solid var(--hp-line);display:grid;place-items:center}
.hp .social a:hover{border-color:var(--hp-gold)}
.hp .social svg{width:18px;height:18px;stroke:var(--hp-ink);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hp .legal{grid-column:1/-1;color:var(--hp-muted);font-size:.8rem;border-top:1px solid var(--hp-line);padding-top:16px;margin:0}

/* archive */
.hp .cathead{padding-block:44px 22px;display:grid;gap:12px}
.hp .crumb{font-size:.85rem;color:var(--hp-muted)}
.hp .crumb a{text-decoration:none}
.hp .cathead h1{font-size:clamp(2.2rem,4.6vw,3.4rem)}
.hp .cathead .desc{margin:0;color:var(--hp-muted);max-width:62ch;font-size:1.08rem}
.hp .cathead .desc p{margin:0}
.hp .filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding-block:6px 26px;border-bottom:1px solid var(--hp-line);margin-bottom:30px}
.hp .chipbtn{font:600 .88rem var(--hp-sans);border:1.5px solid var(--hp-line);background:transparent;color:var(--hp-ink);border-radius:999px;padding:.45rem .95rem;min-height:40px;cursor:pointer}
.hp .chipbtn[aria-pressed="true"]{background:var(--hp-ink);color:var(--hp-ground);border-color:var(--hp-ink)}
.hp .filters select{margin-left:auto;font:600 .88rem var(--hp-sans);border:1.5px solid var(--hp-line);background:var(--hp-panel);color:var(--hp-ink);border-radius:10px;padding:.45rem .7rem;min-height:40px}
.hp .feature{display:grid;grid-template-columns:1.2fr 1fr;gap:32px;align-items:center;margin-bottom:40px;text-decoration:none;background:var(--hp-panel);border:1px solid var(--hp-line);border-radius:18px;overflow:hidden}
.hp .feature img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:16/10}
.hp .feature div{padding:24px 28px 24px 0}
.hp .feature h2{font-size:clamp(1.6rem,3vw,2.3rem);margin-top:8px}
.hp .feature p{color:var(--hp-muted);margin:12px 0 18px}
.hp .pager{padding-block:36px}
.hp .pager .nav-links{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.hp .pager .page-numbers{min-width:46px;min-height:46px;display:grid;place-items:center;border:1px solid var(--hp-line);border-radius:12px;text-decoration:none;font-weight:700;padding:0 12px}
.hp .pager .current{background:var(--hp-ink);color:var(--hp-ground)}
.hp .empty{color:var(--hp-muted);padding-block:24px}

/* single */
.hp .hp-post{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(28px,4vw,60px);padding-block:40px 56px}
.hp .hp-post h1.t{font-size:clamp(2.1rem,4.4vw,3.2rem);margin-top:12px}
.hp .by{display:flex;flex-wrap:wrap;gap:6px 18px;color:var(--hp-muted);font-size:.92rem;margin:16px 0 24px}
.hp .by b{color:var(--hp-ink)}
.hp .verdict{border:1.5px solid var(--hp-gold);border-radius:14px;padding:18px 22px;display:grid;gap:8px;background:var(--hp-panel);margin-bottom:24px}
.hp .verdict p{margin:0;font-size:1.08rem}
.hp .hero-shot{margin:0 0 28px;border-radius:16px;overflow:hidden;background:#000}
.hp .hero-shot img{display:block;width:100%;max-height:560px;object-fit:cover}
.hp .prose{font-size:1.1rem;line-height:1.75;max-width:70ch;min-width:0}
.hp .prose>*{margin-top:0;margin-bottom:18px}
.hp .prose h2{font-size:1.8rem;margin:40px 0 12px}
.hp .prose h3{font-size:1.4rem;margin:32px 0 10px}
.hp .prose a{color:var(--hp-gold);text-underline-offset:3px}
.hp .prose ul,.hp .prose ol{padding-left:1.3rem}
.hp .prose li{margin-bottom:6px}
.hp .prose img{border-radius:12px}
.hp .prose blockquote{border-left:3px solid var(--hp-gold);margin-left:0;padding-left:18px;color:var(--hp-muted)}
.hp .prose table{width:100%;border-collapse:collapse;font-size:.98rem;display:block;overflow-x:auto}
.hp .prose th,.hp .prose td{border-bottom:1px solid var(--hp-line);padding:10px 12px;text-align:left;vertical-align:top}
.hp .prose figure{margin-inline:0}
.hp .prose .wp-block-table{margin-inline:0}
.hp .prose iframe{max-width:100%}
.hp .prose .rank-math-list-item,.hp .prose .wp-block-rank-math-faq-block>div{border-bottom:1px solid var(--hp-line);padding-block:12px}
.hp .prose .rank-math-question{font-family:var(--hp-serif);font-size:1.2rem;margin:0 0 6px}
.hp .side{display:grid;gap:18px;align-content:start;position:sticky;top:16px}
.hp .label{border:2px solid var(--hp-ink);background:var(--hp-panel);padding:14px 16px}
.hp .label h2{font:700 1.75rem/1 var(--hp-serif)}
.hp .label .s{font-size:.82rem;color:var(--hp-muted);padding:6px 0 8px;border-bottom:8px solid var(--hp-ink)}
.hp .label dl{margin:0}
.hp .label .r{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--hp-ink);padding:6px 0;font-size:.92rem}
.hp .label .r dt{font-weight:700}.hp .label .r dd{margin:0;text-align:right}
.hp .label .r:first-child,.hp .label .r:last-child{border-bottom-width:4px}
.hp .label .lars{display:flex;justify-content:space-between;align-items:baseline;padding-top:10px}
.hp .label .lars span{font-weight:700;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase}
.hp .label .lars b{font:700 2.6rem/1 var(--hp-serif);font-variant-numeric:lining-nums}
.hp .label .lars b small{font-size:1rem;color:var(--hp-muted)}
.hp .box{border-radius:14px;background:var(--hp-panel);border:1px solid var(--hp-line);padding:18px;display:grid;gap:10px}
.hp .box h2{font-size:1.15rem}
.hp .box .row{display:flex;justify-content:space-between;align-items:center;gap:8px;background:var(--hp-ground);border:1.5px dashed var(--hp-gold);border-radius:10px;padding:6px 6px 6px 12px}
.hp .box code{font:700 1rem var(--hp-sans);letter-spacing:.08em;background:none;color:var(--hp-ink);padding:0}
.hp .box button.c{font:700 .82rem var(--hp-sans);border:0;background:var(--hp-gold);color:var(--hp-gold-ink);border-radius:8px;padding:.5rem .8rem;min-height:38px;cursor:pointer}
.hp .box small{color:var(--hp-muted);font-size:.78rem}
.hp .box .sub{border-radius:16px;flex-direction:column;padding:6px}
.hp .box .sub .btn{width:100%}
.hp .related{padding-block:8px 48px}

/* page */
.hp .page-main{padding-block:40px 56px}
.hp .page-main h1{font-size:clamp(2.1rem,4.4vw,3.2rem);margin-bottom:24px}

.hp .toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--hp-ink);color:var(--hp-ground);padding:.65rem 1.1rem;border-radius:999px;font-weight:700;z-index:99}

@media (max-width:980px){.hp .split{grid-template-columns:1fr}.hp .hp-codes{grid-template-columns:1fr 1fr}.hp .hp-code.feat{grid-row:auto;grid-column:1/-1}}
@media (max-width:860px){
  .hp .hero,.hp .hp-post,.hp .cta2,.hp .feature{grid-template-columns:1fr}
  .hp .feature div{padding:0 22px 24px}
  .hp .cans{max-width:440px}
  .hp .ftr .wrap{grid-template-columns:1fr 1fr}
  .hp .side{position:static}
  .hp .filters select{margin-left:0}
}
@media (max-width:560px){.hp .ftr .wrap,.hp .reads,.hp .hp-codes{grid-template-columns:1fr}.hp .ftr .wrap>div:first-child{grid-column:auto}}
@media (prefers-reduced-motion:reduce){.hp *{transition:none!important}}