/* ==========================================================================
   Spiffy Meds — header, navigation, homepage sections, footer
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Announcement bar
   -------------------------------------------------------------------------- */
.sm-topbar{ background-color:var(--sm-navy); padding:5px 0; position:relative; z-index:1001; }
.sm-topbar .sm-row{ display:flex; align-items:center; }
.sm-topbar__col--ticker{ flex:0 0 66.6667%; max-width:66.6667%; }
.sm-topbar__col--phone{ flex:0 0 33.3333%; max-width:33.3333%; }

/* ticker: native, no carousel library */
.sm-ticker{ position:relative; display:flex; align-items:center; justify-content:center; min-height:27px; }
.sm-ticker__viewport{ overflow:hidden; flex:1 1 auto; text-align:center; }
.sm-ticker__track{ display:flex; transition:transform .5s ease; }
.sm-ticker__slide{ flex:0 0 100%; }
.sm-ticker__slide span{
  display:block; font-family:var(--sm-font); font-size:14px; font-weight:400;
  color:var(--sm-white); text-transform:capitalize; line-height:27px;
}
.sm-ticker__nav{
  background:none; border:0; cursor:pointer; color:var(--sm-white);
  font-size:14px; font-weight:700; line-height:1; padding:6px 10px; transition:opacity .3s;
}
.sm-ticker__nav:hover{ opacity:.6; }
.sm-ticker__nav svg{ width:11px; height:11px; fill:none; stroke:currentColor; stroke-width:2.5; }

.sm-topbar__phone{ text-align:right; display:flex; align-items:center; justify-content:flex-end; gap:8px; }
.sm-topbar__phone a{ color:var(--sm-white); font-size:14px; font-family:var(--sm-font); transition:color .5s; }
.sm-topbar__phone a:hover{ color:#abb8d4; }
.sm-topbar__phone svg{ width:22px; height:22px; fill:var(--sm-white); flex:0 0 auto; }

/* --------------------------------------------------------------------------
   2. Main header
   -------------------------------------------------------------------------- */
.sm-header{ background:var(--sm-white); padding:15px 0; position:relative; z-index:999; width:100%; }
.sm-header.is-sticky{ position:fixed; top:0; left:0; right:0; box-shadow:0 2px 12px rgba(0,0,0,.08); animation:smSlideDown .3s ease; }
@keyframes smSlideDown{ from{ transform:translateY(-100%);} to{ transform:translateY(0);} }
.sm-header__row{ display:flex; align-items:center; }
.sm-header__logo{ flex:0 0 16.6667%; max-width:16.6667%; }
.sm-header__logo img{ width:100%; max-width:185px; height:auto; display:block; }
.sm-header__nav{ flex:0 0 66.6667%; max-width:66.6667%; }
.sm-header__icons{ flex:0 0 16.6667%; max-width:16.6667%; text-align:right; }

/* primary menu */
.sm-menu{ display:flex; justify-content:flex-start; align-items:center; list-style:none; margin:0; padding:0; }
.sm-menu li{ position:relative; display:block; }
.sm-menu > li > a{
  display:block; font-family:var(--sm-font); font-size:16px; font-weight:600;
  line-height:20px; color:var(--sm-black); margin:20px; padding:0; text-align:center; position:relative;
}
.sm-menu > li > a::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px;
  background:var(--sm-navy); transform:scaleX(0); transform-origin:center; transition:transform .3s ease;
}
.sm-menu > li:hover > a::after,
.sm-menu > li.current-menu-item > a::after,
.sm-menu > li.current_page_item > a::after{ transform:scaleX(1); }

/* dropdowns */
.sm-menu .sub-menu{
  position:absolute; top:100%; left:12px; min-width:230px; margin:0; padding:6px 0;
  background-color:var(--sm-navy-dark); list-style:none; z-index:1000;
  opacity:0; visibility:hidden; transform:translateY(8px); transition:all .25s ease;
}
.sm-menu li:hover > .sub-menu, .sm-menu li.is-open > .sub-menu{ opacity:1; visibility:visible; transform:translateY(0); }
.sm-menu .sub-menu li a{
  display:block; padding:9px 20px; color:var(--sm-white);
  font-size:14px; font-weight:400; text-transform:capitalize; text-align:left;
}
.sm-menu .sub-menu li a:hover{ background-color:rgba(255,255,255,.1); }
.sm-menu .sub-menu .sub-menu{ top:0; left:100%; }

/* header icons */
.sm-header__icons ul{ list-style:none; margin:0; padding:0; display:flex; align-items:center; justify-content:flex-end; }
.sm-header__icons li{ display:block; }
.sm-header__icons li a{ display:inline-flex; align-items:center; justify-content:center; color:var(--sm-black); position:relative; margin-left:17px; }
.sm-header__icons svg{ width:23px; height:23px; fill:none; stroke:var(--sm-black); stroke-width:1.6; }
.sm-header__icons a:hover svg{ stroke:var(--sm-navy); }
.sm-cart-link{ position:relative; }
.sm-cart-count{
  position:absolute; top:-2px; right:26px; font-size:12px; color:var(--sm-black);
  font-family:var(--sm-font); font-weight:500; line-height:1;
}

/* burger (mobile only) */
.sm-burger{ display:none; background:none; border:0; cursor:pointer; padding:8px; margin-left:12px; }
.sm-burger span{ display:block; width:24px; height:2px; background:var(--sm-navy); margin:5px 0; transition:all .3s ease; }
.sm-burger.is-active span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.sm-burger.is-active span:nth-child(2){ opacity:0; }
.sm-burger.is-active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   3. Mobile drawer
   -------------------------------------------------------------------------- */
.sm-mobile-nav{
  position:fixed; top:0; left:0; bottom:0; width:300px; max-width:85vw;
  background:var(--sm-white); z-index:10001; padding:24px 20px 40px;
  transform:translateX(-100%); transition:transform .32s ease; overflow-y:auto;
}
.sm-mobile-nav.is-open{ transform:translateX(0); }
.sm-mobile-nav__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; }
.sm-mobile-nav__head img{ max-width:150px; }
.sm-mobile-nav__close{ background:none; border:0; font-size:28px; line-height:1; cursor:pointer; color:var(--sm-navy); }
.sm-mobile-nav ul{ list-style:none; margin:0; padding:0; }
.sm-mobile-nav > ul > li{ border-bottom:1px solid var(--sm-border); }
.sm-mobile-nav li a{ display:block; padding:13px 0; font-size:16px; font-weight:600; color:var(--sm-black); }
.sm-mobile-nav .sub-menu{ display:none; padding-left:14px; border-top:1px solid var(--sm-border); }
.sm-mobile-nav li.is-open > .sub-menu{ display:block; }
.sm-mobile-nav .sub-menu li a{ font-weight:400; font-size:15px; padding:11px 0; }
.sm-mobile-nav__toggle{
  position:absolute; right:0; top:6px; background:none; border:0; cursor:pointer;
  padding:8px 10px; font-size:14px; color:var(--sm-navy);
}
.sm-mobile-nav__item{ position:relative; }
.sm-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:10000;
  opacity:0; visibility:hidden; transition:opacity .3s ease;
}
.sm-overlay.is-open{ opacity:1; visibility:visible; }

/* --------------------------------------------------------------------------
   4. Search modal
   -------------------------------------------------------------------------- */
.sm-search-modal{
  position:fixed; inset:0; z-index:10002; display:flex; align-items:flex-start; justify-content:center;
  background:rgba(0,0,0,.6); opacity:0; visibility:hidden; transition:opacity .3s ease; padding-top:14vh;
}
.sm-search-modal.is-open{ opacity:1; visibility:visible; }
.sm-search-modal__inner{ background:var(--sm-white); width:100%; max-width:640px; padding:34px 30px; position:relative; }
.sm-search-modal__title{ font-size:20px; font-weight:600; margin-bottom:18px; text-transform:uppercase; }
.sm-search-modal form{ display:flex; }
.sm-search-modal input[type="search"]{
  flex:1 1 auto; border:1px solid var(--sm-black); border-right:0; padding:13px 14px;
  font-family:var(--sm-font); font-size:15px; color:var(--sm-black); background:var(--sm-white);
}
.sm-search-modal button{ flex:0 0 auto; }
.sm-search-modal__close{
  position:absolute; top:8px; right:12px; background:none; border:0;
  font-size:26px; line-height:1; cursor:pointer; color:var(--sm-black);
}

/* --------------------------------------------------------------------------
   5. Hero  (native recreation of the Slider Revolution 1920x580 stage)
   -------------------------------------------------------------------------- */
.sm-hero{ position:relative; width:100%; overflow:hidden; background-color:var(--sm-navy); }
.sm-hero__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center center; }
.sm-hero__stage{
  position:relative; width:1920px; height:580px;
  transform-origin:top left; transform:scale(var(--sm-hero-scale,1));
}
.sm-hero__layer{ position:absolute; opacity:0; }
.sm-hero__title{
  left:100px; top:50%; transform:translateY(-50%);
  font-family:var(--sm-font-hero); font-size:60px; line-height:70px; font-weight:400;
  color:var(--sm-white); white-space:nowrap; margin:0;
}
.sm-hero__title .sm-char{ display:inline-block; opacity:0; transform:translateY(50px); white-space:pre; }
.sm-hero__cta{ left:103px; top:406px; }
.sm-hero__media{
  left:1203px; top:50%; transform:translateY(-50%);
  width:458px; height:527px; background:var(--sm-white); border-radius:50%;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.sm-hero__media img{ width:100%; height:100%; object-fit:contain; }

/* entrance animation (matches RevSlider: chars rise + fade, layers fade) */
.sm-hero.is-ready .sm-hero__layer{ opacity:1; }
.sm-hero.is-ready .sm-hero__title .sm-char{ animation:smCharIn 1s cubic-bezier(.215,.61,.355,1) forwards; }
@keyframes smCharIn{ to{ opacity:1; transform:translateY(0); } }
.sm-hero.is-ready .sm-hero__cta{ animation:smFadeIn .3s ease .5s both; }
.sm-hero.is-ready .sm-hero__media{ animation:smFadeInY .3s ease .35s both; }
@keyframes smFadeIn{ from{opacity:0} to{opacity:1} }
@keyframes smFadeInY{ from{opacity:0} to{opacity:1} }

/* stacked hero for small screens
   position/z-index keep it above .sm-hero__bg, which is absolutely positioned
   and would otherwise paint over this statically-positioned sibling. */
.sm-hero__mobile{ display:none; position:relative; z-index:1; padding:46px 0 50px; text-align:center; }
.sm-hero__mobile h1{
  font-family:var(--sm-font-hero); color:var(--sm-white); font-size:28px;
  line-height:38px; font-weight:400; margin-bottom:22px;
}
.sm-hero__mobile .sm-hero__media{
  position:static; transform:none; width:230px; height:265px; margin:0 auto 26px;
}

@media (prefers-reduced-motion:reduce){
  .sm-hero.is-ready .sm-hero__title .sm-char,
  .sm-hero.is-ready .sm-hero__cta,
  .sm-hero.is-ready .sm-hero__media{ animation:none; opacity:1; transform:none; }
  .sm-hero__title .sm-char{ opacity:1; transform:none; }
}

/* --------------------------------------------------------------------------
   6. Home — Shop by category
   -------------------------------------------------------------------------- */
.sm-cats{ padding-top:60px; padding-bottom:60px; }
.sm-cats__grid{ display:flex; flex-wrap:wrap; margin:0 -15px; }
/* 22px bottom margin mirrors the reference button wrapper's spacing */
.sm-cats__item{ flex:0 0 25%; max-width:25%; padding:0 15px; margin-bottom:22px; }
.sm-cats__item .sm-btn-outline{ width:100%; height:50px; padding:0; font-size:18px; }

/* --------------------------------------------------------------------------
   7. Home — carousels (Shop by colors / Popular products)
   -------------------------------------------------------------------------- */
.sm-carousel-section{ padding-bottom:60px; position:relative; }
.sm-carousel-section .sm-section-title{ padding-bottom:35px; }
.sm-carousel{ position:relative; }
.sm-carousel__viewport{ overflow:hidden; }
.sm-carousel__track{ display:flex; transition:transform .45s cubic-bezier(.25,.8,.25,1); will-change:transform; }
.sm-carousel__slide{ flex:0 0 auto; padding-right:30px; box-sizing:border-box; }
/* Explicit ratios reserve the slide's space before the image loads, so the
   carousel does not collapse and reflow (matches the reference proportions:
   2:3 colour tiles, square product thumbnails). */
.sm-carousel__slide img{ width:100%; height:auto; display:block; box-shadow:var(--sm-shadow-img); }
.sm-carousel--colors .sm-carousel__slide img{ aspect-ratio:2/3; object-fit:cover; }
.sm-carousel--products .sm-carousel__slide img{ aspect-ratio:1/1; object-fit:cover; }
.sm-carousel__slide h6{
  text-transform:uppercase; padding-top:10px; font-size:16px; font-weight:400;
  display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:var(--sm-black);
}
.sm-carousel__slide .sm-price{ display:block; padding-top:4px; font-size:16px; color:var(--sm-blue); }
.sm-carousel__nav{ position:absolute; top:-64px; right:0; display:flex; gap:8px; }
.sm-carousel__btn{
  background-color:var(--sm-navy); color:var(--sm-white); border:1px solid var(--sm-navy);
  border-radius:5px; padding:7px 12px; font-size:20px; font-weight:700; line-height:1;
  cursor:pointer; transition:all .3s; display:inline-flex; align-items:center; justify-content:center;
}
.sm-carousel__btn:hover{ color:var(--sm-navy); background-color:var(--sm-white); }
.sm-carousel__btn svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:3; }
.sm-carousel__btn[disabled]{ opacity:.35; cursor:default; }
.sm-carousel__btn[disabled]:hover{ background-color:var(--sm-navy); color:var(--sm-white); }

/* --------------------------------------------------------------------------
   8. Home — promo tiles (the four "gif" blocks)
   -------------------------------------------------------------------------- */
.sm-promos{ padding-bottom:60px; }
.sm-promos__row{ display:flex; flex-wrap:wrap; margin:0 -15px; }
.sm-promo{ flex:0 0 50%; max-width:50%; padding:0 15px; }
.sm-promos__row--first .sm-promo{ margin-bottom:30px; }
.sm-promo__inner{ position:relative; overflow:hidden; display:block; }
.sm-promo__inner img{ width:100%; height:620px; object-fit:cover; display:block; transition:transform .5s ease; }
.sm-promo__inner:hover img{ transform:scale(1.04); }
/* top-aligned caption tiles (column 1) get a top gradient */
.sm-promo--top .sm-promo__inner::before{
  content:""; position:absolute; inset:0; z-index:1;
  background-image:linear-gradient(0deg, rgba(255,255,255,0) 66%, rgba(0,0,0,.38) 86%);
}
/* bottom-aligned caption tiles (column 2) get a bottom gradient */
.sm-promo--bottom .sm-promo__inner::before{
  content:""; position:absolute; inset:0; z-index:1;
  background-image:linear-gradient(0deg, rgba(0,0,0,.53) 11%, rgba(255,255,255,0) 35%);
}
.sm-promo__caption{ position:absolute; z-index:9; transition:all .5s; }
.sm-promo--top .sm-promo__caption{ top:15px; left:45px; }
.sm-promo--bottom .sm-promo__caption{ bottom:30px; left:50px; }
.sm-promo--top .sm-promo__inner:hover .sm-promo__caption{ left:60px; }
.sm-promo--bottom .sm-promo__inner:hover .sm-promo__caption{ bottom:45px; }
.sm-promo__caption h3{
  font-size:25px; text-transform:uppercase; color:var(--sm-white);
  font-weight:600; padding-bottom:6px; margin:0;
}

/* --------------------------------------------------------------------------
   9. Footer
   -------------------------------------------------------------------------- */
.sm-footer{ background-color:var(--sm-grey-bg); padding:0; overflow:hidden; }
.sm-footer__quick{ padding:60px 0; }
.sm-footer__quick .sm-row{ display:flex; flex-wrap:wrap; }

.sm-footer__brand img{ max-width:185px; margin-bottom:18px; }
.sm-footer__brand ul{ list-style:none; margin:0; padding:0; }
.sm-footer__brand li{ display:block; padding-bottom:8px; }
.sm-footer__brand li a{ color:var(--sm-black); font-size:16px; transition:all .5s; }
.sm-footer__brand li a:hover{ color:var(--sm-navy); }
.sm-footer__brand svg{ width:22px; height:22px; fill:var(--sm-black); position:relative; top:5px; padding-right:6px; box-sizing:content-box; }
.sm-footer__brand p{ font-size:14px; line-height:22px; margin-top:6px; }
.sm-footer__brand p a{ font-size:14px; }

.sm-footer__col{ position:relative; }
.sm-footer__col h6{
  margin:0; position:relative; color:var(--sm-black); font-weight:700;
  text-transform:capitalize; padding:16px 0; text-align:center; font-size:20px;
}
.sm-footer__col ul{ list-style:none; margin:0; padding:0; }
.sm-footer__col li{ display:block; padding:10px 0 0; text-align:center; }
.sm-footer__col li a{ display:block; text-align:center; font-size:16px; color:var(--sm-black); }
.sm-footer__col li a:hover{ color:var(--sm-navy); }

.sm-footer__community h2{
  font-family:var(--sm-font-alt); font-size:32px; font-weight:400;
  text-transform:capitalize; color:var(--sm-black); margin-bottom:6px;
}
.sm-footer__community h5{ font-size:16px; text-transform:capitalize; color:var(--sm-black); padding:10px 0; font-weight:400; }
.sm-footer__community form{ display:flex; width:100%; padding-top:6px; }
.sm-footer__community input[type="email"]{
  width:100%; border:1px solid var(--sm-black); border-right:0; padding:12px;
  color:var(--sm-black); background-color:var(--sm-white); font-size:15px; font-family:var(--sm-font);
}
.sm-footer__community input[type="email"]::placeholder{ color:var(--sm-black); opacity:1; }
.sm-footer__community button{
  background-color:var(--sm-navy); color:var(--sm-white); border:0; padding:12px 20px;
  line-height:26px; font-size:14px; font-weight:500; white-space:nowrap; cursor:pointer;
  font-family:var(--sm-font); transition:opacity .3s;
}
.sm-footer__community button:hover{ opacity:.8; }
.sm-newsletter__msg{ display:block; padding-top:10px; font-size:14px; }
.sm-newsletter__msg.is-error{ color:#cd2027; }
.sm-newsletter__msg.is-ok{ color:#1c7c3c; }

/* --------------------------------------------------------------------------
   10. Discount popup
   -------------------------------------------------------------------------- */
.sm-modal{
  position:fixed; inset:0; z-index:10050; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.5); opacity:0; visibility:hidden; transition:opacity .3s ease; padding:20px;
}
.sm-modal.is-open{ opacity:1; visibility:visible; }
.sm-modal__content{
  position:relative; width:100%; max-width:600px; padding:50px 40px 40px; text-align:center;
  background-color:var(--sm-navy); background-position:center; background-size:cover;
}
.sm-modal__content h1{ color:var(--sm-white); font-size:80px; font-weight:700; line-height:normal; margin:0; }
.sm-modal__content h2{ padding-top:15px; color:var(--sm-white); font-size:35px; font-weight:500; margin:0; }
.sm-modal__content h3{ padding-bottom:30px; color:var(--sm-white); font-size:20px; font-weight:400; margin:0; }
.sm-modal__logo{ max-width:250px; margin:0 auto 10px; display:block; }
.sm-modal__close{
  position:absolute; top:10px; right:10px; background:#000; color:var(--sm-white);
  padding:0 7px; border-radius:80px; border:0; font-size:20px; line-height:1.4; cursor:pointer;
}
.sm-modal form{ display:flex; justify-content:center; max-width:430px; margin:0 auto; }
.sm-modal input[type="email"]{
  font-size:16px; width:100%; border-radius:23.5px; border:1px solid #adadad;
  background:var(--sm-white); padding:11px 20px; font-family:var(--sm-font);
}
.sm-modal button[type="submit"]{
  padding:10px 20px; border:1px solid var(--sm-navy); border-radius:23px; background:var(--sm-navy);
  color:var(--sm-white); font-size:16px; font-weight:400; text-transform:uppercase;
  margin-left:6px; cursor:pointer; white-space:nowrap; font-family:var(--sm-font); transition:opacity .3s;
}
.sm-modal button[type="submit"]:hover{ opacity:.8; }

/* --------------------------------------------------------------------------
   11. Inner page banner
   -------------------------------------------------------------------------- */
.sm-page-head{ padding:70px 0 0; text-align:center; }
.sm-page-head h1{
  font-size:30px; font-weight:700; text-transform:uppercase; text-align:center;
  padding-bottom:16px; margin:0; color:var(--sm-black); position:relative;
}
.sm-page-head h1 strong{ color:var(--sm-blue); font-weight:700; }
.sm-page-head h1::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%); bottom:6px;
  width:120px; height:2px; background:var(--sm-blue);
}
.sm-page-head__sub{ max-width:760px; margin:18px auto 0; font-size:16px; line-height:26px; text-align:center; }
.sm-page-head--plain h1::after{ display:none; }

/* --------------------------------------------------------------------------
   12. Blog
   -------------------------------------------------------------------------- */
.sm-blog{ padding:50px 0 70px; }
.sm-blog__grid{ display:flex; flex-wrap:wrap; margin:0 -15px; }
.sm-blog__item{ flex:0 0 33.3333%; max-width:33.3333%; padding:0 15px; margin-bottom:40px; }
.sm-blog__card{ height:100%; display:flex; flex-direction:column; }
.sm-blog__thumb{ display:block; overflow:hidden; margin-bottom:16px; background:var(--sm-grey-bg); }
.sm-blog__thumb img{ width:100%; aspect-ratio:3/2; object-fit:cover; transition:transform .5s ease; }
.sm-blog__thumb:hover img{ transform:scale(1.05); }
.sm-blog__meta{ font-size:13px; color:var(--sm-muted); margin-bottom:8px; }
.sm-blog__title{ font-size:18px; font-weight:600; line-height:26px; margin-bottom:10px; }
.sm-blog__title a{ font-size:18px; color:var(--sm-black); }
.sm-blog__title a:hover{ color:var(--sm-navy); }
.sm-blog__excerpt{ font-size:15px; line-height:24px; margin-bottom:14px; flex:1 1 auto; }
.sm-blog__more{ font-size:14px; font-weight:600; text-transform:uppercase; color:var(--sm-navy); }
.sm-blog__more:hover{ text-decoration:underline; }

.sm-single{ padding:50px 0 70px; }
.sm-single__header{ max-width:860px; margin:0 auto 26px; text-align:center; }
.sm-single__header h1{ font-size:34px; font-weight:700; line-height:44px; margin-bottom:12px; }
.sm-single__meta{ font-size:14px; color:var(--sm-muted); }
.sm-single__thumb{ margin-bottom:30px; }
.sm-single__thumb img{ width:100%; height:auto; }
.sm-single__body{ max-width:860px; margin:0 auto; }
.sm-postnav{ display:flex; justify-content:space-between; gap:20px; max-width:860px; margin:40px auto 0; border-top:1px solid var(--sm-border); padding-top:24px; }
.sm-postnav a{ font-size:15px; font-weight:600; color:var(--sm-navy); }

/* pagination (shared blog + shop) */
.sm-pagination{ display:flex; justify-content:center; gap:8px; margin-top:20px; }
.sm-pagination .page-numbers{
  display:inline-flex; align-items:center; justify-content:center; min-width:42px; height:42px;
  padding:0 12px; border:1px solid var(--sm-black); font-size:15px; font-weight:600; color:var(--sm-black);
  transition:all .3s ease;
}
.sm-pagination .page-numbers.current,
.sm-pagination .page-numbers:hover{ background:var(--sm-navy); border-color:var(--sm-navy); color:var(--sm-white); }

/* 404 + search empty */
.sm-notfound{ padding:80px 0 100px; text-align:center; }
.sm-notfound h1{ font-size:90px; font-weight:700; color:var(--sm-navy); line-height:1; }
.sm-notfound h2{ font-size:26px; font-weight:600; margin:14px 0 12px; }
.sm-notfound p{ font-size:16px; margin-bottom:26px; }

/* --------------------------------------------------------------------------
   13. Responsive
   -------------------------------------------------------------------------- */
@media (max-width:1199px){
  :root{ --sm-container:970px; }
  .sm-promo__inner img{ height:520px; }
  .sm-hero__mobile h1{ font-size:32px; }
}

@media (max-width:991px){
  :root{ --sm-container:750px; }
  h1{ font-size:24px; }
  h2{ font-size:19px; }
  h3{ font-size:16px; }
  h4{ font-size:14px; }
  .sm-section-title{ font-size:24px; padding-bottom:22px; }
  .sm-cats{ padding-top:50px; padding-bottom:50px; }
  .sm-cats__item{ flex:0 0 50%; max-width:50%; margin-bottom:20px; }
  .sm-cats__item .sm-btn-outline{ font-size:15px; }
  /* header collapses to logo + burger */
  .sm-header__logo{ flex:0 0 60%; max-width:60%; }
  .sm-header__nav{ display:none; }
  .sm-header__icons{ flex:0 0 40%; max-width:40%; display:flex; align-items:center; justify-content:flex-end; }
  .sm-burger{ display:block; }
  /* hero switches to the stacked variant */
  .sm-hero__stage{ display:none; }
  .sm-hero__mobile{ display:block; }
  .sm-promo{ flex:0 0 100%; max-width:100%; margin-bottom:20px; }
  .sm-promos__row--first .sm-promo{ margin-bottom:20px; }
  .sm-promo__inner img{ height:420px; }
  .sm-promo--top .sm-promo__caption{ left:30px; }
  .sm-promo--bottom .sm-promo__caption{ left:30px; }
  .sm-promo__caption h3{ font-size:20px; }
  .sm-footer__quick .sm-col-4,
  .sm-footer__quick .sm-col-2{ flex:0 0 100%; max-width:100%; text-align:center; margin-bottom:28px; }
  .sm-footer__brand img{ margin-left:auto; margin-right:auto; }
  .sm-blog__item{ flex:0 0 50%; max-width:50%; }
  .sm-topbar__col--ticker{ flex:0 0 58%; max-width:58%; }
  .sm-topbar__col--phone{ flex:0 0 42%; max-width:42%; }
  .sm-topbar__phone a{ font-size:12px; }
  .sm-ticker__slide span{ font-size:12px; }
  .sm-modal__content h1{ font-size:48px; }
  .sm-modal__content h2{ font-size:24px; }
  .sm-modal__content h3{ font-size:16px; }
}

@media (max-width:767px){
  :root{ --sm-container:100%; }
  .sm-page-head{ padding-top:40px; }
  .sm-page-head h1{ font-size:22px; }
  .sm-cats__item{ flex:0 0 100%; max-width:100%; }
  .sm-blog__item{ flex:0 0 100%; max-width:100%; }
  .sm-promo__inner img{ height:340px; }
  .sm-footer__quick{ padding:40px 0; }
  .sm-footer__community form{ flex-direction:column; }
  .sm-footer__community input[type="email"]{ border-right:1px solid var(--sm-black); margin-bottom:10px; }
  .sm-single__header h1{ font-size:24px; line-height:34px; }
  .sm-modal__content{ padding:40px 20px 30px; }
  .sm-modal form{ flex-direction:column; }
  .sm-modal button[type="submit"]{ margin-left:0; margin-top:10px; }
  .sm-topbar .sm-row{ flex-direction:column; gap:2px; }
  .sm-topbar__col--ticker,
  .sm-topbar__col--phone{ flex:0 0 100%; max-width:100%; }
  .sm-topbar__phone{ justify-content:center; }
  .sm-carousel__nav{ top:-52px; }
}

@media (max-width:480px){
  .sm-hero__mobile h1{ font-size:24px; line-height:32px; }
  .sm-hero__mobile .sm-hero__media{ width:190px; height:220px; }
  .sm-notfound h1{ font-size:64px; }
}

/* --------------------------------------------------------------------------
   14. Comments
   -------------------------------------------------------------------------- */
.sm-comments{ margin-top:44px; padding-top:28px; border-top:1px solid var(--sm-border); }
.sm-comments__title{ font-size:20px; font-weight:600; margin-bottom:20px; }
.sm-comments__list{ list-style:none; margin:0 0 28px; padding:0; }
.sm-comments__list li{ display:block; }
.sm-comments__list .comment-body{ padding:16px 0; border-bottom:1px solid var(--sm-border); }
.sm-comments__list .children{ list-style:none; margin-left:28px; padding:0; }
.sm-comments .comment-author img{ border-radius:50%; margin-right:10px; vertical-align:middle; }
.sm-comments .comment-metadata{ font-size:13px; color:var(--sm-muted); margin-bottom:8px; }
.sm-comments p{ font-size:15px; line-height:25px; }
.sm-comments .comment-respond{ margin-top:10px; }
.sm-comments .comment-reply-title{ font-size:20px; font-weight:600; margin-bottom:14px; }
.sm-comments .comment-form label{ display:block; font-size:14px; font-weight:600; margin-bottom:6px; }
.sm-comments .comment-form input[type="text"],
.sm-comments .comment-form input[type="email"],
.sm-comments .comment-form input[type="url"],
.sm-comments .comment-form textarea{
  width:100%; border:1px solid var(--sm-border); padding:12px 14px;
  font-family:var(--sm-font); font-size:15px; margin-bottom:14px; background:var(--sm-white);
}
.sm-comments .comment-form .form-submit{ margin-top:6px; }
.sm-comments__closed{ font-size:15px; color:var(--sm-muted); }