/* -----------------------------
   Base
------------------------------ */
:root{
  /* Military / olive green theme */
  --bg: #0f261b;        /* deep green background */
  --panel: #142e23;     /* panel surfaces */
  --panel-2: #153827;   /* secondary panel */
  --text: #f6f7ec;      /* warm off-white text */
  --muted: #bfc9b3;     /* muted text */
  --line: rgba(255,255,255,.06);
  --shadow: 0 14px 40px rgba(6,10,8,.45);
  --accent: #8aa56a;    /* warm olive accent */
  --accent-2: #2f6b4f;  /* darker green accent */
  --radius: 14px;
  --max: 1120px;
  --pad: 20px;

  /* Additional lively accents (hex) */
  --accent-3: #f08c5d;  /* warm coral */
  --accent-4: #ffd166;  /* mustard / saffron */
  --accent-5: #39c0a1;  /* lively teal */
  --accent-6: #6aa0ff;  /* sky blue */
  --accent-7: #d95dff;  /* violet */
  --accent-8: #ff7ab6;  /* pink */
  --accent-9: #ffb997;  /* peach */

  /* RGB tokens for use with rgb(var(--...)) if needed */
  --lcolor_3: 240,140,93;   /* accent-3 */
  --lcolor_4: 255,209,102;  /* accent-4 */
  --lcolor_5: 57,192,161;   /* accent-5 */
  --lcolor_6: 106,160,255;  /* accent-6 */
  --lcolor_7: 217,93,255;   /* accent-7 */
  --lcolor_8: 255,122,182;  /* accent-8 */
  --lcolor_9: 255,185,151;  /* accent-9 */
}


*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Noto Sans", Arial, sans-serif;
  background: radial-gradient(1200px 700px at 10% 10%, rgba(138,165,106,.08), transparent 40%),
              radial-gradient(900px 500px at 90% 20%, rgba(47,107,79,.06), transparent 45%),
              var(--bg);
  color: var(--text);
}

img{
  max-width: 100%;
  display: block;
}

a{
  color: inherit;
  text-decoration: none;
}

.container{
  width: min(var(--max), calc(100% - (var(--pad) * 2)));
  margin: 0 auto;
}

.section{
  padding: 70px 0;
}

.section-alt{
  background: linear-gradient(180deg, rgba(255,255,255,.03), transparent 65%);
}

h1, h2, h3{ margin: 0 0 14px; line-height: 1.1; }
h1{ font-size: clamp(2rem, 3vw, 3.1rem); }
h2{ font-size: clamp(1.5rem, 2.2vw, 2.1rem); }
h3{ font-size: 1.05rem; }
p{ margin: 0 0 14px; color: var(--text); }
.muted{ color: var(--muted); }
.small{ font-size: 0.92rem; }

.kicker{
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: .8rem;
  color: var(--muted);
  margin-bottom: 10px;
}

/* -----------------------------
   Header
------------------------------ */
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(9,30,23,.96);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255,255,255,.03);
}

.header-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  gap: 16px;
}

.brand{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.brand-mark{
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 6px rgba(138,165,106,.06);
}

.brand-name{
  font-weight: 700;
  letter-spacing: .02em;
}

.nav{
  display: flex;
  align-items: center;
  gap: 18px;
}

.nav a{
  color: rgba(246,247,236,.92);
  font-size: .95rem;
  padding: 8px 10px;
  border-radius: 999px;
}

.nav a:hover{
  background: rgba(138,165,106,.08);
}

.nav-cta{
  border: 1px solid rgba(138,165,106,.14);
  background: rgba(138,165,106,.06);
  color: var(--text);
}

.nav-toggle{
  display: none;
  width: 44px;
  height: 40px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  border-radius: 12px;
  padding: 10px;
  gap: 5px;
}

.nav-toggle span{
  display: block;
  height: 2px;
  background: rgba(255,255,255,.85);
}

/* Mobile nav */
@media (max-width: 860px){
  .nav-toggle{ display: inline-flex; flex-direction: column; justify-content: center; }
  .nav{ display: none; }
  .nav.nav--open{
    display: flex;
    position: absolute;
    right: var(--pad);
    top: 64px;
    flex-direction: column;
    padding: 12px;
    background: rgba(15,15,18,.95);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: var(--shadow);
    min-width: 220px;
  }
  .nav.nav--open a{ width: 100%; }
}

/* -----------------------------
   Buttons / cards
------------------------------ */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.04);
  background: rgba(255,255,255,.02);
  color: rgba(246,247,236,.94);
}

.btn:hover{ background: rgba(255,255,255,.03); }
.btn-primary{
  background: var(--accent);
  color: #0c180f;
  border-color: var(--accent);
}
.btn-primary:hover{ background: color-mix(in srgb, var(--accent) 88%, #000 12%); }
.btn-ghost{
  background: transparent;
}
.btn-small{
  padding: 10px 14px;
  font-size: .92rem;
}

.card{
  background: linear-gradient(180deg, rgba(20,34,28,.95), rgba(21,56,39,.92));
  border: 1px solid rgba(255,255,255,.03);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* -----------------------------
   Hero
------------------------------ */
.hero{
  padding: 70px 0 40px;
}

.hero-grid{
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 34px;
  align-items: center;
}

.hero-copy .lead{
  color: rgba(246,247,236,.92);
  line-height: 1.6;
  max-width: 62ch;
}

.hero-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}

.hero-meta{
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
  color: var(--muted);
  font-size: .95rem;
}

.hero-meta li{
  padding-left: 14px;
  position: relative;
}

.hero-meta li::before{
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.70);
}

.hero-media{
  display: grid;
  gap: 14px;
}

.hero-figure{
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.03);
  box-shadow: var(--shadow);
  background: var(--panel-2);
}

.hero-figure img{
  width: 100%;
  height: 360px;
  object-fit: cover;
}

.hero-figure--secondary img{
  height: 190px;
  opacity: .95;
}

@media (max-width: 980px){
  .hero-grid{ grid-template-columns: 1fr; }
  .hero-figure img{ height: 300px; }
}

/* -----------------------------
   Section header
------------------------------ */
.section-head{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}

.link-pill{
  border: 1px solid rgba(138,165,106,.10);
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(138,165,106,.06);
  color: rgba(246,247,236,.92);
}
.link-pill:hover{ background: rgba(255,255,255,.09); }

/* -----------------------------
   Product grid
------------------------------ */
.grid{
  display: grid;
  gap: 18px;
}

.products{
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1060px){
  .products{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 780px){
  .products{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px){
  .products{ grid-template-columns: 1fr; }
}

.product{
  overflow: hidden;
}

.product-media{
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,.03);
  background: linear-gradient(180deg, rgba(21,56,39,.92), rgba(20,34,28,.95));
}

.product-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .25s ease;
}

.product:hover .product-media img{
  transform: scale(1.03);
}

.product-body{
  padding: 14px;
  display: grid;
  gap: 10px;
}

.product-title{
  font-size: .96rem;
  line-height: 1.3;
  color: rgba(246,247,236,.95);
  min-height: 2.6em;
}

.price{
  margin: 0;
  font-weight: 750;
  letter-spacing: .01em;
}

/* -----------------------------
   Custom Prints section
------------------------------ */
.custom-grid{
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 28px;
  align-items: start;
}

.custom-media{
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow);
  background: rgba(255,255,255,.03);
}

.custom-media img{
  width: 100%;
  height: 520px;
  object-fit: cover;
}

.callouts{
  display: grid;
  gap: 16px;
  margin-top: 16px;
}

.callout{
  padding: 16px;
}

.callout ul{
  margin: 0;
  padding-left: 18px;
  color: rgba(255,255,255,.88);
}

.steps{
  margin: 0;
  padding-left: 18px;
  color: rgba(255,255,255,.88);
  line-height: 1.6;
}

.custom-actions{
  margin-top: 18px;
  display: grid;
  gap: 10px;
}

@media (max-width: 980px){
  .custom-grid{ grid-template-columns: 1fr; }
  .custom-media img{ height: 360px; }
}

/* -----------------------------
   Footer
------------------------------ */
.site-footer{
  border-top: 1px solid var(--line);
  padding: 44px 0 28px;
}

.footer-grid{
  display: grid;
  grid-template-columns: 1.2fr .9fr .9fr;
  gap: 22px;
  align-items: start;
}

.footer-brand{
  font-weight: 800;
  letter-spacing: .02em;
  margin-bottom: 10px;
}

.footer-list{
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.footer-list a{
  color: rgba(191,201,179,.95);
}

.footer-list a:hover{
  text-decoration: underline;
}

.footer-bottom{
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.08);
}

@media (max-width: 860px){
  .footer-grid{ grid-template-columns: 1fr; }
}

/* -----------------------------
   Floating color swatch panel
------------------------------ */
.color-swatch{
  position: fixed;
  left: 20px;
  bottom: 20px;
  display: flex;
  gap: 8px;
  z-index: 100;
}

.chip{
  width: 24px;
  height: 24px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
  transition: transform .2s;
}

.chip:hover{
  transform: scale(1.2);
}

/* Add this HTML inside <body> where you want the swatch to appear:
   <div class="color-swatch" aria-hidden="true">
     <div class="chip" style="background:var(--accent);"></div>
     <div class="chip" style="background:var(--accent-2);"></div>
     <div class="chip" style="background:var(--accent-3);"></div>
     <div class="chip" style="background:var(--accent-4);"></div>
     <div class="chip" style="background:var(--accent-5);"></div>
     <div class="chip" style="background:var(--accent-6);"></div>
     <div class="chip" style="background:var(--accent-7);"></div>
     <div class="chip" style="background:var(--accent-8);"></div>
     <div class="chip" style="background:var(--accent-9);"></div>
   </div>
*/
/* Product modal styles */
.product-modal{ display:none; position:fixed; inset:0; z-index:120; align-items:center; justify-content:center; }
.product-modal.open{ display:flex; }
.product-modal .modal-backdrop{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,.6)); backdrop-filter: blur(2px); }
.product-modal .modal-card{ position:relative; z-index:2; max-width:900px; width:calc(100% - 40px); padding:20px; }
.product-modal .modal-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:18px; align-items:start; }
.product-modal .modal-media{ border-radius:12px; overflow:hidden; background:var(--panel); border:1px solid rgba(255,255,255,.03); }
.product-modal .modal-media img{ width:100%; height:420px; object-fit:cover; display:block; }
.product-modal .modal-info{ padding:6px 4px; }
.product-modal .modal-title{ margin:0 0 8px; }
.product-modal .modal-price{ font-weight:700; margin:0 0 12px; }
.product-modal .modal-actions{ display:flex; gap:10px; margin-top:14px; }
.product-modal .modal-close{ position:absolute; right:12px; top:12px; background:transparent; border:none; color:var(--text); font-size:22px; cursor:pointer; }

/* Toast */
.toast{ position:fixed; right:22px; bottom:22px; z-index:130; background: rgba(20,30,24,.96); color: var(--text); padding:10px 14px; border-radius:10px; transform:translateY(8px); opacity:0; transition:all .22s ease; }
.toast.show{ transform:translateY(0); opacity:1; }

@media (max-width:800px){
  .product-modal .modal-grid{ grid-template-columns: 1fr; }
  .product-modal .modal-media img{ height:260px; }
}