:root{
  --bg:#0b0b0b;
  --bg-elev:#141414;
  --ink:#f5efe2; /* bone */
  --sub:#c7b37a; /* brass */
  --muted:#a99a6a;
  --accent:#e6d398;
  --shadow: 0 6px 20px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.6}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto;display:block}

.container{width:min(1100px,92vw);margin-inline:auto}
header.site-header{position:sticky;top:0;background:rgba(11,11,11,.85);backdrop-filter:saturate(120%) blur(8px);border-bottom:1px solid #222;z-index:1000}
header .inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;gap:12px;align-items:center}
.brand .wordmark{font-weight:900;letter-spacing:.5px}
.brand .tag{
	opacity: 0; /* Hidden by default */
		transform: translateY(20px); /* Slightly moved down for a subtle animation */
		transition: opacity 0.5s ease-out, transform 0.5s ease-out; /* Smooth transition */
	color:var(--muted);font-size:.9rem, 
}
.brand .tag.is-visible{
	opacity: 1; /* Visible when the class is added */
	transform: translateY(0); /* Returns to original position */
}
nav a{margin:0 10px;padding:6px 8px;border-radius:6px}
nav a:hover{background:var(--bg-elev)}

.hero{padding:70px 0 40px;border-bottom:1px solid #1f1f1f;background:linear-gradient(180deg,rgba(231,213,177,.06),rgba(0,0,0,0));}
.hero h1{font-size:clamp(2rem,4.2vw,3.2rem);line-height:1.1;margin:0 0 8px}
.hero p{color:var(--muted);margin:0 0 18px}
.cta{display:inline-block;background:var(--ink);color:#111;font-weight:700;padding:12px 18px;border-radius:10px;box-shadow:var(--shadow)}
.cta.secondary{background:var(--bg-elev);color:var(--ink);border:1px solid #2a2a2a}
.badge{display:inline-flex;gap:8px;align-items:center;background:#111;border:1px solid #2a2a2a;color:var(--muted);padding:6px 10px;border-radius:100px;font-size:.85rem}

.grid{display:grid;gap:22px}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
@media(max-width:920px){.grid.cols-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.grid.cols-3,.grid.cols-2{grid-template-columns:1fr}}

.card{background:radial-gradient(120% 120% at 50% 40%, #222 20%, #171717 70%);border:1px solid #222;border-radius:14px;overflow:visible;box-shadow:var(--shadow)}
.card .pad{padding:10px}
.card h3{margin:12px 0 6px}
.price{font-weight:800}
.kicker{font-size:.85rem;color:var(--muted);letter-spacing:.3px;text-transform:uppercase}
.muted{color:var(--muted)}
																																	
.product .embed{padding:10px 12px;border-top:1px dashed #2a2a2a;background:#121212}
.product .embed iframe{border:0 !important}
.product .pad .meta{display:flex;justify-content:space-between;align-items:baseline}
.product .pad .meta .note{color:var(--muted);font-size:.9rem}
.product .thumb { display: none; }
.product .embed.embed-carousel { border-bottom:1px dashed #2a2a2a; }

.shopify-buy__product{background-color: none;}
/* Two-column layout inside each product card */
.product.card .inner{
  display:grid;
  grid-template-columns:minmax(220px,280px) 1fr; /* slightly smaller media col */
  gap:14px;                                       /* tighter gap */
  padding-top:14px;
  padding-left:5px;
  padding-right:14px;
  padding-bottom:10px;
  align-items:start;
}
@media (max-width: 780px){
  .product.card .inner{ grid-template-columns:minmax(220px,280px) 1fr; grid-template-columns:1fr; }
}

/* Ensure iframes fit and buttons are never clipped */
.card{ overflow: visible; }
.product .embed .shopify-buy-frame{ width:100% !important; display:block; }

/* Carousel + description styling */
.product.card .media .embed-carousel{ padding:0; background:transparent; border:0; }
.product.card .media .desc-under{
  /* margin:8px 2px 0; */
  color:var(--muted);
  font-size:.95rem;
  text-align:center;
}

/* Optional: reduce outer gaps a touch */
.grid{ gap:18px; }

/* Photo well behind the carousel so black tees separate from the card */
.product.card .media{


  padding: 1px;  /* a touch more breathing room */
}


/* Tighter chrome for the embeds */
.product .embed{ padding:0; background:transparent; border:0; }
.embed-carousel{ margin:0; }
.embed-buy{ border-top:0px dashed #2a2a2a; padding-top:18px;  }
.product .embed.embed-buy { padding-top: 18px }


/* Reduce outer grid gap slightly to close dead space */
.grid{ gap:18px; }

.section{padding:50px 0}
.section h2{font-size:clamp(1.4rem,2.8vw,2rem);margin:0 0 10px}
.section p{margin:0 0 10px}

.notice{font-size:.9rem;color:var(--muted)}
.quote{padding:12px 14px;border-left:3px solid var(--sub);background:#121212;border-radius:8px}


.btn, .cta {
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.btn:hover, .cta:hover { background: var(--sub); color: #111; }
.btn:active, .cta:active { background: #bca86a; color:#111; }

/* Global button theme (matches Shopify CTAs) */
.btn{
  display:inline-block;
  background: var(--sub);   /* brass */
  color:#111;
  font-weight:800;
  padding:10px 14px;
  border:0;
  border-radius:10px;
  line-height:1;
  box-shadow: var(--shadow);
  cursor:pointer;
}
.btn:hover,
.btn:focus { background:#d2c085; color:#111; }   /* lighter brass */
.btn:active { background:#bca86a; color:#111; }   /* deeper brass */
.btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* Newsletter spacing so you can drop the inline style */
#newsletter .btn { margin-left:8px; }

/* (optional) Input polish to match button radius */
#newsletter input[type="email"]{
  padding:12px 14px;
  border-radius:10px;
  border:1px solid #333;
  background:#101010;
  color:var(--ink);
}
#newsletter input[type="email"]::placeholder{ color:#7c7c7c; }

footer{margin-top:50px;padding:40px 0;border-top:1px solid #222;background:#0a0a0a}
footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:22px}
@media(max-width:820px){footer .cols{grid-template-columns:1fr}}

/* Smooth anchor scrolling sitewide */
html { scroll-behavior: smooth; }

/* Utilities */
.hide-sm { display: inline; }

/* Mobile refinements */
@media (max-width: 780px){
  header.site-header{
    position: static;       /* disable sticky */
    backdrop-filter: none;  /* avoid GPU work on mobile */
  }
  .hero h1 .hide-sm{ display: none; } /* drop the second line on mobile */
}
.actions{ display:flex; gap:10px; flex-wrap:wrap; }

@media (max-width: 780px){
  /* stack and reverse order just for the Bro-tein section */
  #brotein .container.grid.cols-2{ grid-template-columns: 1fr; row-gap: 14px; }
  #brotein .container.grid.cols-2 > :first-child{ grid-row: 2; } /* text block */
  #brotein .container.grid.cols-2 > :last-child{  grid-row: 1; margin-bottom: 6px; } /* image */
}

/* --- HERO ACTIONS --- */
.actions { display:flex; gap:10px; flex-wrap:wrap; }

.btn-sm { padding:8px 12px; font-size:.95rem; font-weight:500; border-radius:10px; }

/* “ghost” variant to complement the solid brass btn */
.btn.ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid #2a2a2a;
}
.btn.ghost:hover,
.btn.ghost:focus { background:#1a1a1a; color:var(--ink); border-color:#3a3a3a; }
.btn.ghost:active { background:#161616; }

/* --- MOBILE HEADER: simplify and prevent wrapping --- */
.quicklinks { display:none; gap:10px; }
.quicklinks .ql {
  display:inline-block;
  padding:8px 10px;
  border-radius:8px;
  background:#111;
  border:1px solid #2a2a2a;
  color:var(--ink);
  font-weight:600;
  line-height:1;
}

@media (max-width: 780px){
  header.site-header{ position:static; backdrop-filter:none; }   /* already aligned with your goal */
  header.site-header nav { display:none; }                       /* hide the big nav on phones */
  .quicklinks { display:flex; }                                  /* show compact links */
  .site-header .inner { padding:10px 0; }
  .brand .wordmark { font-size:1rem; letter-spacing:.3px; }      /* shrink wordmark to avoid wrap */
}

/* Keep the long “Welcome…” line only on desktop */
.hide-sm { display:inline; }
@media (max-width: 780px){ .hide-sm { display:none; } }
@media (max-width: 780px){
  .site-header .inner { justify-content:space-between; }
}

/* visually hide the spam honeypot */
.hp{position:absolute;left:-10000px;opacity:0;height:0;width:0;pointer-events:none}

/* --- Newsletter layout (constrain width + tidy) --- */
#newsletter form{
  display:flex;
  align-items:flex-end;
  gap:12px;
  flex-wrap:wrap;
  max-width:560px;          /* keeps the whole form compact */
}

#newsletter label{
  display:block;            /* puts "Email" on its own line */
  margin:0 0 6px;
  font-weight:600;
  color:var(--muted);
  width:100%;
}

/* Compact, responsive input: won't grow past ~380px,
   but won’t get skinnier than ~260px on small screens */
#newsletter input[type="email"]{
  width:100%;
  max-width:380px;
  min-width:260px;
  padding:10px;
  border-radius:8px;
  border:1px solid #333;
  background:#101010;
  color:var(--ink);
}

#newsletter button.btn{
  padding:10px 14px;
  border-radius:10px;
  white-space:nowrap;
}

/* Ensure anchor targets aren’t hidden under the sticky header */
.section { scroll-margin-top: 72px; }
@media (max-width:780px){ .section { scroll-margin-top: 12px; } }

/* --- Size & Fit button near buy area --- */
.product .embed-buy { position: relative; }
.sizebtn{
  position: static;
  display: inline-block;
  margin: 0 0 8px 0;
  background: transparent;
  color: var(--ink);
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  padding: 6px 10px;
  line-height: 1;
  font-weight: 600;
  cursor: pointer;
}
.sizebtn:hover, .sizebtn:focus { background:#1a1a1a; }

/* --- Modal --- */
.modal { position: fixed; inset:0; display:none; z-index:2000; }
.modal[aria-hidden="false"]{ display:block; }
.modal-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.6); }
.modal-dialog{ position:relative; background:#111; color:var(--ink); border:1px solid #2a2a2a; border-radius:14px; box-shadow:var(--shadow); width:min(760px,92vw); margin:8vh auto; padding:14px; max-height:88vh; overflow:hidden; }
.modal-close{ position:absolute; top:8px; right:10px; background:transparent; border:0; color:var(--ink); font-size:22px; cursor:pointer; }
.modal-content{ max-height:calc(88vh - 64px); overflow:auto; }

/* Unit switcher for size modal */
#size-modal .unit-switch{ position: sticky; top:0; background:#111; padding:2px 0 6px; z-index:1; display:flex; gap:8px; }
#size-modal .unit{ background:#111; color:var(--ink); border:1px solid #2a2a2a; border-radius:8px; padding:6px 10px; cursor:pointer; }
#size-modal .unit.active{ background:var(--sub); color:#111; border-color:var(--sub); }

/* Size tables */
#size-modal .size-table{ width:100%; border-collapse:collapse; }
#size-modal .size-table th, #size-modal .size-table td{ border:1px solid #2a2a2a; padding:5px 8px; text-align:center; font-size:.95rem; }
.size-columns{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width: 879px){ .size-columns{ grid-template-columns:1fr; } }