/* ---- Tokens taken from the screenshot; fine-tune against the live site ---- */
:root{
  --bg:#ffffff;
  --text:#161616;
  --muted:#6b6b6b;
  --line:#e6e6e6;
  --soft:#f5f5f5;
  --black:#0f0f0f;
  --accent:#e58a2c;       /* Add-to-cart orange */
  --accent-dark:#c8721e;
  --stock-green:#2f9e44;
  --footer-bg:#1a1a1a;
  --font:"Helvetica Neue",Arial,sans-serif;
  --font-head:"Arial Narrow",Arial,sans-serif; /* bold condensed title look */
}
*{box-sizing:border-box;margin:0}
body{font-family:var(--font);color:var(--text);background:var(--bg);line-height:1.6;font-size:16px}
a{color:inherit}
button{font:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}

/* header */
.header{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem;padding:.9rem clamp(1rem,4vw,3rem);border-bottom:0.5px solid #2E2E36;}
.logo{display:flex;align-items:center;gap:.4rem;text-decoration:none;font-weight:800;letter-spacing:.03em;color:var(--text);font-size:1.05rem}
.logo-mark{color:var(--accent)}
.header-icons{display:flex;align-items:center;gap:1.1rem;font-size:1.1rem}
.header-icons a,.header-icons button{background:none;border:none;color:var(--text);text-decoration:none;position:relative}
.cart i{position:absolute;top:-8px;right:-10px;background:var(--accent);color:#F7F5F5;font-size:.65rem;font-style:normal;font-weight:700;border-radius:50%;width:16px;height:16px;display:flex;align-items:center;justify-content:center}

/* product section */
.product{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;padding:2rem 0}

.slider{display:flex;flex-direction:column;gap:.6rem}
.slider-main{position:relative;background:var(--black);border-radius:6px;aspect-ratio:1/1;overflow:hidden}
.slide{position:absolute;inset:0;background:var(--black) center/contain no-repeat;opacity:0;transition:opacity .2s;pointer-events:none}
.slide.active{opacity:1;pointer-events:auto}
/* placeholder so empty photo slides aren't blank white */
.slide[data-slide]:not([data-slide="video"])::after{content:"Product photo";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#555;font-size:.85rem}
.slide iframe,.slide video{width:100%;height:100%;border:0}
.thumbs{display:flex;gap:.6rem;overflow-x:auto;padding-bottom:.2rem;-webkit-overflow-scrolling:touch}
.thumb{width:72px;height:72px;border-radius:4px;border:2px solid transparent;background:var(--black) center/cover no-repeat;flex:0 0 auto;color:#fff}
.thumb.active{border-color:var(--accent)}
.thumb.video{display:flex;align-items:center;justify-content:center;background:#c4302b;font-size:1.3rem}

.info{display:flex;flex-direction:column}
.row-top{display:flex;justify-content:space-between;align-items:center;font-size:.85rem;margin-bottom:.75rem}
.stock{color:var(--stock-green);font-weight:700;letter-spacing:.03em}
.sku{color:var(--muted)}
h1{font-family:var(--font-head);font-weight:800;text-transform:uppercase;font-size:1.7rem;line-height:1.25;letter-spacing:.01em;margin-bottom:1rem}
.price{font-size:2.1rem;font-weight:800;margin-bottom:1.5rem; color:#F7F5F5;}

.buy-row{display:flex;flex-wrap:wrap;gap:.75rem;align-items:stretch;margin-bottom:1.5rem}
.qty{display:flex;align-items:center;border:1px solid var(--line);border-radius:4px;overflow:hidden}
.qty button{width:38px;background:#000; color:#F2EDED; border:none;font-size:1.1rem}
.qty input{width:42px;border:none;text-align:center;font-size:1rem; color: #F2EDED; background: #000;}
.btn{flex:1;min-width:10rem;display:flex;align-items:center;justify-content:center;background:var(--accent);color:#F2EDED;font-weight:700;letter-spacing:.03em;text-decoration:none;border-radius:4px;padding:.9rem 1.5rem;transition:background .15s}
.btn:hover{background:var(--accent-dark)}

.badges{list-style:none;padding-top:1rem;border-top:0.5px solid #2E2E36;display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem;font-size:.8rem;color:var(--muted)}
.badges li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.25rem}
.badges span{font-size:1.1rem}

/* tabs */
.tabs{display:flex;gap:1.75rem;border-bottom:0.5px solid #2E2E36;max-width:1180px;margin:0 auto;padding:0 20px}
.tabs a{padding:.75rem 0;text-decoration:none;font-weight:600;color:var(--muted);border-bottom:3px solid transparent;margin-bottom:-2px}
.tabs a.active,.tabs a:hover{color:var(--text);border-bottom-color:var(--accent)}

.block{max-width:1180px;margin:0 auto;padding:2rem 20px;border-bottom:0.5px solid #2E2E36;scroll-margin-top:1rem}
.block h2{font-size:1.5rem;margin-bottom:1rem}
.block h3{font-size:1.2rem;margin:1.75rem 0 .5rem}
.block h4{font-size:1rem;margin:1rem 0 .3rem}
.block p{max-width:52rem;margin-bottom:.75rem}
.block ul{padding-left:1.25rem;max-width:52rem}
.block li{margin-bottom:.3rem}
.features{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem 2rem}
.features div{background:#000;padding:1rem 1.25rem; border:0.5px solid #2E2E36; border-radius: 10px;}
.features h4{margin-top:0}
.features p{margin:0;color:var(--muted)}

table{width:100%;max-width:640px;border-collapse:collapse}
th,td{text-align:left;padding:.65rem .5rem;border-bottom:0.5px solid #2E2E36;}
th{width:50%;font-weight:600;color:var(--muted)}

.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.card{display:flex;flex-direction:column;gap:.25rem;border:0.5px solid #2E2E36;;padding:1rem;text-decoration:none;border-radius:4px}
.card:hover{border-color:var(--accent)}
.card span{font-size:.85rem;color:var(--muted)}
.card em{font-style:normal;font-weight:700;margin-top:.5rem}


.copy{text-align:center;font-size:.85rem;padding:2rem 1rem 1.5rem;color:#888}


@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');




*{
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
body{
  color: #F2EDED;
  background: #000;
  font-family: "DM Sans", sans-serif;
  font-weight: 500;
  line-height: 1.7;
}
p, li{
  color: #8A8A94;
}
a{
  color: #8A8A94;
  /*text-transform: uppercase;*/
  text-decoration: none;
  font-size: 14px;
  /*padding: 10px 0px 10px 20px;
*/
}
a:hover{
  color: #fff;
}
.footer-menu a{
  font-weight: 500;
  text-transform: none;
}
img {
  max-width: 210px;
  height: auto;
  vertical-align: middle;
}
ul{
  list-style: none;
}
.container{
  display: flex;
  flex-direction: column;
  /*align-items: center;*/
}
.top_left{
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;

  padding: 10px;
  min-width: 70vw;

}
.menu{
  display: flex;
  justify-content: space-around;
  min-width: 40vw;
  /*padding-top: 5vh;*/
  align-items: center;
  flex-wrap: wrap;

}
header{
  min-height: 10vh;
  padding-bottom: 10px;
  padding-left: 5vw;
  padding-right: 5vw;
  border-bottom: 0.5px solid #2E2E36;


}
.menuRight{
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 2vw;
  min-width: 15vw;
}
main{
  /*background: #1B1A20;*/
  background: #000;
  border-bottom: 0.5px solid #2E2E36;
  min-height: 50vh;
}
h3{
  padding-top: 5vh;
  padding-left: 5vw;
  text-transform: uppercase;
  color: #F2EDED;
}
footer{
    height: 50vh;
   /*   background-image: url(https://www.pdtedgecraft.com/sites/all/themes/multipurpose_zymphonies_theme/images/bg-footer2.jpg);
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      padding-left: 5vw;*/
      padding-right: 5vw;
      color: #8A8A94;
  border-bottom: 0.5px solid #2E2E36;
  font-size: 14px;
  padding-top: 5vh;

}
.footer-menu{
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  font-size: 13px;
}
.footer-menu ul li h3, .footer-menu h3{
  margin-left: 0;
  padding-left: 0;
  margin-bottom: 1vh;
}
.logo_f img{
    width: 20vw;
}
.social{
  display: flex;
  justify-content: space-around;

}
.social a:hover{
  box-shadow: 0 4px 8px rgba(255, 255, 255, 0.2);
}
.foter-menu ul li{
  margin: 0;
  padding: 0;
}
.form_m{
  min-width: 300px;
  padding: 20px;
  margin: 20px; 
}
.fdesk{width: 20vw;}
.line-height{
  display: flex;
  justify-content: center;
  gap:2vw;
  background: #E07828;
  color: #F7F5F5;
  font-size: 11px;
  width: 98.9vw;
  min-height: 5vh;
  /*padding-top: 5px;*/
  align-items: center;
  letter-spacing: 1.2;
  font-weight: 600;
  line-height: 1;
}
.ah:hover{
  color: #ECEAE2;
}

@media (max-width:960px){
  .cards{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:820px){
  .product,.features,.footer .cols{grid-template-columns:1fr}
  .badges{grid-template-columns:repeat(2,1fr)}
  .tabs{gap:1rem;overflow-x:auto}
}
@media (max-width:600px){
  .fdesk{width: 90vw;}
  .footer-menu{flex-direction: column;padding: 2vw;}
  .header{padding:.75rem 1rem}
  .header-icons{gap:.8rem;font-size:1rem}
  h1{font-size:1.35rem}
  .price{font-size:1.7rem; color:#fff;}
  .buy-row{flex-direction:column}
  .qty{align-self:flex-start}
  .btn{width:100%}
  .cards{grid-template-columns:1fr}
  .block{padding:1.5rem 16px}
  .wrap{padding:0 16px}
}
@media (max-width:420px){
  .fdesk{width: 90vw;}
  .footer-menu{flex-direction: column; padding: 2vw;}
  .badges{grid-template-columns:repeat(2,1fr);font-size:.72rem}
  .thumb{width:60px;height:60px}
}
@media (prefers-reduced-motion:reduce){.btn,.slide{transition:none}}