@charset "utf-8";
/* CSS Document */

/*
Website Name: SNAP-PINS
Author: Jason Banks
Description: A 19EIGHTYFIVE Workshop
Version: 1.0.0
*/

/*
Order - Display > Position > Width/Height > Padding > Border > Margin > Alignment > Text > Color > MISC (Transition, Cursor, etc.)
*/

:root{
--bg: #ffffff;
--bg-alt: #f2f2f2;
--bg-dark: #111214;
--bg-accent: #2b4bf2;
--text: #1a1a1a;
--text-muted: #6b6b6b;
--text-on-dark: #f5f5f5;
--text-on-dark-muted: #a3a3a8;
--border: #d9d9d9;
--border-dark: #33343a;
--placeholder-fill: #d9dadd;
--placeholder-fill-dark: #3a3b41;
--radius: 6px;
--maxw: 1200px;
--section-pad: 96px;
--section-pad-mobile: 56px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

--cyan: #29abe2;
--magenta: #eb088c;
--yellow: #fcee21;
--black: #000000;
--black90: rgba(0,0,0,0.9);
--black80: rgba(0,0,0,0.8);
--black70: rgba(0,0,0,0.7);
--black60: rgba(0,0,0,0.6);
--black50: rgba(0,0,0,0.5);
--white: #ffffff;
--white50: rgba(255,255,255,0.5);
--white80: rgba(255,255,255,0.8);
--primary: #404041;
--secondary: #7AC142;
--tertiary: #007FB2;
--ltgrey: #efefef;
--medgrey: #CCC;
--grey: #C6C6C6;
--grey50: rgba(198,198,198,0.25);
--mdgrey: #868686;
--mddkgrey: #424142;
--dkgrey: #333333;
--border: #D5D5D5;
--placeholder: #C6C6C6;
}

* { box-sizing: border-box; }

body { margin: 0; color: var(--text); background: var(--bg); line-height: 1.5; }
    
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
    
section { padding: var(--section-pad) 0; }
@media (max-width: 768px) {
section { padding: var(--section-pad-mobile) 0; }
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
>>> BUTTONS
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */    
.btn { display: inline-block; padding: 14px 28px; border-radius: var(--radius); background: var(--text); color: #fff; font-weight: 600; text-decoration: none; border: none; cursor: pointer; font-size: 15px; }
    
.btn-outline { background: transparent; border: 1px solid var(--text); color: var(--text); }

.btn-on-dark { background: #fff; color: #111; }
    
.btn-outline-on-dark { background: transparent; border: 1px solid var(--text-on-dark-muted); color: var(--text-on-dark); }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
>>> MSC
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* ===== General Placeholder Box ===== */
.placeholder-box { background: var(--placeholder-fill); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; color: #888; font-size: 13px; text-align: center; min-height: 200px; }

/* ===== Img Max-Width ===== */
img { max-width: 100%}

/* ===== SHOPIFY - Shopify Cart Setting (Used in Theme Header to display side cart on every page) ===== */
#cart { display: none; }

/* ===== CONTACT FORM 7 PLUGIN - Custom Settings/Overrides ===== */
.wpcf7-form label { width: 100%; margin-left: 0; margin-top: 20px; }
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 textarea { width: 100%; margin-left: 0;  padding: 10px;}

@media screen and ( max-width:768px ) {
.wpcf7-form label { width: 100%; }
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 textarea { width: 100%; margin-left: 0; }
}

/* ===== BREADCRUMB NAV XT PLUGIN - Custom Settings ===== */
.breadcrumbs { padding: 20px 0 40px; background: white; color: black;  }
.breadcrumbs a { color: var(--cyan); text-decoration: none; transition: 0.1s ease-in-out; }
.breadcrumbs a:hover { animation-name: text-hover; animation-duration: 1s; }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
>>> HEADER NAV
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.header-nav { text-align: center; height: 120px; padding: 20px; background:; }
.header-nav img { height: 80px; }

/* ===== Hamburger Menu Icon ===== */
.hamburger { padding: 6px 10px; position: fixed; z-index: 10; right: 40px; /* right:12px; */ top: 20px; display: inline-block; cursor: pointer; border-radius: 5px; background: var(--white80); }
.bar1 { width: 25px; height: 4px; background-color: var(--cyan); margin: 4px 0; transition: 0.5s ease-in-out; }
.bar2 { width: 25px; height: 4px; background-color: var(--magenta); margin: 4px 0; transition: 0.5s ease-in-out; }
.bar3 { width: 25px; height: 4px; background-color: var(--cyan); margin: 4px 0; transition: 0.5s ease-in-out; }

.hamburger:hover > .bar1, .hamburger:hover > .bar2, .hamburger:hover > .bar3 { background-color: var(--cyan); }

/* Home Icon */
.home-icon { /* position:fixed; */ z-index: 10; right: 40px; /* right:12px; top:50%; */ }
.home-icon a svg { fill: var(--cyan); width: 24px; transition: 0.1s ease-in-out; }
.home-icon a:hover svg { animation-name: fill-hover; animation-duration: 1s; }

@keyframes fill-hover {
  0%	{ fill: var(--cyan); }
 50%	{ fill: var(--magenta); }
100%	{ fill: var(--cyan); }
}

/* Off Canvas Menu */
#off-menu-hamburger { overflow: auto; background-color: var(--black90); text-align: left; }
#off-menu-hamburger a { padding: 10px 20px; color: var(--cyan); display: block; text-decoration: none; /* line-height:32px; */ transition: 0.1s ease-in-out; }
#off-menu-hamburger a:hover { animation-name: text-hover; animation-duration: 1s; color: var(--yellow); }
#off-menu-hamburger img { width: 200px; }


@keyframes text-hover {
   0%	{ color: var(--cyan); }
  25%	{ color: var(--magenta); }
 100%	{ color: var(--yellow); }
}
    
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
>>> HERO
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.hero { text-align: center; padding-top: 0 /* 120px */;}
.hero h1 { font-size: 48px; max-width: 760px; margin: 0 auto 20px; }
.hero p.sub { font-size: 19px; max-width: 560px; margin: 0 auto 32px; }
.hero .placeholder-box { max-width: 960px; margin: 56px auto 0; height: 460px; }
@media ( max-width: 768px ) {
.hero { padding-top: 72px; }
.hero h1 { font-size: 30px; }
.hero p.sub { font-size: 16px; }
.hero .placeholder-box { height: 260px; margin-top: 32px; }
}
    
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
>>> FEATURED SECTION
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* ACF Group Field */
.featured-product { background: var(--bg-accent); color: #fff;}
.featured-product-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; /* text-align: center; text-transform: uppercase; */}
.featured-product h2 { font-size: 34px; margin-bottom: 20px; }
.featured-product .placeholder-box { background: rgba(255,255,255,0.18); color: #fff; height: 360px; }
@media (max-width: 768px) {
.featured-product-grid { grid-template-columns: 1fr; }
.featured-product .placeholder-box { order: -1; height: 220px; }
}
    
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
>>> PRODUCT CARDS
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.product-cards h1 { text-align: center; font-size: 48px; max-width: 760px; margin: 0 auto 40px; }
.product-cards a { text-decoration: none; color: black; }

/* ===== Column Number Control (1-6 Columns) ===== */
.product-cards-grid-one-col { display: grid; grid-template-columns: repeat(1); gap: 24px; }
.product-cards-grid-two-col { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.product-cards-grid-three-col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.product-cards-grid-four-col { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.product-cards-grid-five-col { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; }
.product-cards-grid-six-col { display: grid; grid-template-columns: repeat(6, 1fr); gap: 24px; }

.product-cards aside { border: 1px solid var(--border); border-radius: var(--radius); padding: 28px 24px; text-align: center; }
.product-cards aside .placeholder-box { height: 140px; margin: 20px 0; }
.product-cards aside h3 { font-size: 16px; margin-bottom: 12px; }
.product-cards aside p { font-size: 14px; margin-bottom: 20px; }
@media (max-width: 768px) {
.product-cards-grid-three-col { grid-template-columns: repeat(2, 1fr); }
}