/*
Theme Name:   Spiffy Meds
Theme URI:    https://spiffymeds.com/
Author:       Rebuild
Description:  Faithful WooCommerce theme recreation of the Spiffy Meds storefront. No page-builder dependencies.
Version:      1.0.0
License:      GNU General Public License v2 or later
Text Domain:  spiffymeds
Tags:         woocommerce, e-commerce, custom-menu, custom-logo
*/

/* ==========================================================================
   1. Design tokens
   ========================================================================== */
:root{
  --sm-navy:        #061e44;  /* primary brand navy   */
  --sm-navy-dark:   #011842;  /* sidebar / dropdowns  */
  --sm-blue:        #3345ff;  /* price + accent blue  */
  --sm-sky:         #7ccafe;  /* small decorative dot */
  --sm-black:       #000000;
  --sm-white:       #ffffff;
  --sm-grey-bg:     #f5f5f5;  /* footer + result bar  */
  --sm-border:      #e1e1e1;
  --sm-muted:       #767676;

  --sm-font:        "Poppins", sans-serif;
  --sm-font-alt:    "Outfit", sans-serif;
  --sm-font-hero:   "Open Sans", sans-serif;

  --sm-container:   1170px;
  --sm-gutter:      15px;
  --sm-section-pad: 60px;
  --sm-radius:      2px;
  --sm-shadow-btn:  0 2px 10px rgba(0,0,0,.16), 0 3px 6px rgba(0,0,0,.1);
  --sm-shadow-img:  0 4px 4px 0 rgba(0,0,0,.25);
}

/* ==========================================================================
   2. Reset  (mirrors the reference theme's reset)
   ========================================================================== */
*{ margin:0; padding:0; }
*,*::before,*::after{ box-sizing:border-box; }
html,body{ overflow-x:hidden; }
table{ border-collapse:collapse; border-spacing:0; }
fieldset,img{ border:0; }
address,caption,cite,code,dfn,em,strong,th,var{ font-style:normal; }
caption,th{ text-align:left; }
article,aside,figure,footer,header,nav,section,main{ display:block; }
img{ max-width:100%; height:auto; vertical-align:middle; }
a{ text-decoration:none; color:var(--sm-black); transition:all .3s ease 0s; cursor:pointer; }
*:focus{ outline:none; }
::placeholder{ color:var(--sm-muted); opacity:1; }

/* ==========================================================================
   3. Base typography  (matched to reference computed styles)
   ========================================================================== */
body{
  font-family:var(--sm-font);
  font-size:14px;
  font-weight:400;
  line-height:normal;
  color:var(--sm-black);
  background-color:var(--sm-white);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6{ font-family:var(--sm-font); font-weight:400; line-height:normal; color:var(--sm-black); }
h1{ font-size:42px; }
h2{ font-size:30px; }
h3{ font-size:24px; }
h4{ font-size:22px; }
h5{ font-size:20px; }
h6{ font-size:18px; }
p{ font-family:var(--sm-font); font-size:18px; line-height:normal; color:var(--sm-black); }
li{ font-size:16px; font-family:var(--sm-font); }
a{ font-size:16px; font-family:var(--sm-font); }
strong,b{ font-weight:700; }

/* content prose rhythm (policy pages, blog, descriptions) */
.sm-prose p{ font-size:16px; line-height:28px; margin-bottom:18px; }
.sm-prose h2{ font-size:28px; font-weight:600; margin:32px 0 14px; }
.sm-prose h3{ font-size:22px; font-weight:600; margin:26px 0 12px; }
.sm-prose h4{ font-size:18px; font-weight:600; margin:22px 0 10px; }
.sm-prose ul,.sm-prose ol{ margin:0 0 18px 22px; }
.sm-prose ul li{ list-style:disc; display:list-item; font-size:16px; line-height:28px; margin-bottom:8px; }
.sm-prose ol li{ list-style:decimal; display:list-item; font-size:16px; line-height:28px; margin-bottom:8px; }
.sm-prose a{ color:var(--sm-blue); }
.sm-prose a:hover{ text-decoration:underline; }
.sm-prose img{ height:auto; margin:18px 0; }
.sm-prose table{ width:100%; margin-bottom:20px; }
.sm-prose th,.sm-prose td{ border:1px solid var(--sm-border); padding:10px 12px; font-size:15px; }
.sm-prose blockquote{ border-left:3px solid var(--sm-navy); padding-left:18px; margin:20px 0; font-style:italic; }

/* ==========================================================================
   4. Layout primitives  (Bootstrap-3 equivalent grid, no framework)
   ========================================================================== */
.sm-container{ width:100%; max-width:var(--sm-container); margin:0 auto; padding-left:var(--sm-gutter); padding-right:var(--sm-gutter); }
.sm-row{ display:flex; flex-wrap:wrap; margin-left:calc(var(--sm-gutter) * -1); margin-right:calc(var(--sm-gutter) * -1); }
.sm-row > [class*="sm-col"]{ padding-left:var(--sm-gutter); padding-right:var(--sm-gutter); width:100%; }
.sm-col-2{ flex:0 0 16.6667%; max-width:16.6667%; }
.sm-col-3{ flex:0 0 25%;       max-width:25%; }
.sm-col-4{ flex:0 0 33.3333%; max-width:33.3333%; }
.sm-col-6{ flex:0 0 50%;       max-width:50%; }
.sm-col-8{ flex:0 0 66.6667%; max-width:66.6667%; }
.sm-col-9{ flex:0 0 75%;       max-width:75%; }
.sm-col-10{ flex:0 0 83.3333%; max-width:83.3333%; }
.sm-col-12{ flex:0 0 100%;     max-width:100%; }
.sm-section{ padding-bottom:var(--sm-section-pad); }
.screen-reader-text{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap; }
.sm-skip-link{ position:absolute; left:-9999px; top:0; z-index:10000; background:var(--sm-navy); color:#fff; padding:12px 20px; }
.sm-skip-link:focus{ left:0; }

/* ==========================================================================
   5. Buttons
   ========================================================================== */
/* outline button — category tabs, product cards, add-to-cart */
.sm-btn-outline{
  display:inline-flex; align-items:center; justify-content:center;
  position:relative; z-index:1; overflow:hidden;
  border:1px solid var(--sm-black);
  background-color:transparent; color:var(--sm-black);
  font-family:var(--sm-font); font-size:16px; font-weight:600;
  text-transform:uppercase; text-align:center;
  padding:15px; border-radius:0;
  box-shadow:var(--sm-shadow-btn);
  transition:.3s ease all; cursor:pointer;
}
.sm-btn-outline::before{
  content:""; position:absolute; top:0; bottom:0; left:50%; right:50%;
  background-color:var(--sm-navy); opacity:0; z-index:-1; transition:.5s all ease;
}
.sm-btn-outline:hover, .sm-btn-outline:focus{ color:var(--sm-white); border-color:var(--sm-navy); }
.sm-btn-outline:hover::before, .sm-btn-outline:focus::before{ left:0; right:0; opacity:1; }
.sm-btn-outline:active{ transform:scale(.97); }

/* solid navy button — forms, checkout, pagination */
.sm-btn-navy{
  display:inline-block; border:1px solid var(--sm-navy); background-color:var(--sm-navy);
  color:var(--sm-white); font-family:var(--sm-font); font-size:16px; font-weight:500;
  text-transform:uppercase; padding:12px 26px; border-radius:0; cursor:pointer;
  transition:all .3s ease;
}
.sm-btn-navy:hover{ opacity:.85; color:var(--sm-white); }

/* white-on-dark button — promo tiles */
.sm-btn-light{
  display:inline-block; position:relative; z-index:1; overflow:hidden;
  border:1px solid var(--sm-white); background-color:var(--sm-white);
  color:var(--sm-navy); font-family:var(--sm-font); font-weight:700; font-size:16px;
  text-transform:capitalize; padding:7px 20px; border-radius:var(--sm-radius);
  box-shadow:var(--sm-shadow-btn); transition:.3s ease all;
}
.sm-btn-light::before{
  content:""; position:absolute; top:0; bottom:0; left:50%; right:50%;
  background-color:var(--sm-navy); opacity:0; z-index:-1; transition:.5s all ease;
}
.sm-btn-light:hover{ color:var(--sm-white); }
.sm-btn-light:hover::before{ left:0; right:0; opacity:1; }

/* ghost button on dark — hero "Shop Now" */
.sm-btn-ghost{
  display:inline-block; position:relative; z-index:1; overflow:hidden;
  border:1px solid var(--sm-white); background-color:transparent; color:var(--sm-white);
  font-family:var(--sm-font); font-weight:700; font-size:16px; text-transform:capitalize;
  padding:20px 25px; border-radius:var(--sm-radius); line-height:0;
  box-shadow:var(--sm-shadow-btn); transition:.3s ease all;
}
.sm-btn-ghost::before{
  content:""; position:absolute; top:0; bottom:0; left:50%; right:50%;
  background-color:var(--sm-white); opacity:0; z-index:-1; transition:.5s all ease;
}
.sm-btn-ghost:hover{ color:var(--sm-navy); }
.sm-btn-ghost:hover::before{ left:0; right:0; opacity:1; }

/* shared section heading */
.sm-section-title{
  font-size:35px; font-weight:600; text-transform:uppercase;
  padding-bottom:35px; color:var(--sm-black); margin:0;
}