/* Mandala Defect — pixel product page. All rules scoped under #lmd so nothing
   collides with the theme / WooCommerce styles that still load via wp_head(). */

@font-face{font-family:'LMD-Arcade';src:url(fonts/PressStart2P.ttf) format('truetype');font-display:block;}
@font-face{font-family:'LMD-Pixel';src:url(fonts/VT323.ttf) format('truetype');font-display:block;}

body.lmd-body{margin:0;padding:0;background:#fff;overflow-x:hidden}

#lmd{
  --bg:#ffffff; --card:#f9faff;
  --ink:#2b2b2b; --text:#5f5f5f; --muted:#8a8a8a;
  --green:#7ab38b; --green-hover:#669b6b; --green-deep:#4f7d5a; --star:#fbbc34;
  position:relative; z-index:0;
  font-family:'LMD-Pixel',monospace; font-size:20px; line-height:1.5; letter-spacing:.3px;
  color:var(--text); background:var(--bg); min-height:100vh;
}
#lmd *{box-sizing:border-box}
#lmd, #lmd *{cursor:url(img/cursor.png) 1 1, auto}
#lmd img{display:block;max-width:100%}
#lmd .px{image-rendering:pixelated}
#lmd .container{max-width:1120px;margin:0 auto;padding:0 clamp(12px,3vw,26px)}
#lmd .arc{font-family:'LMD-Arcade';letter-spacing:1px;text-transform:uppercase}

#lmd .topbar{background:var(--ink);color:#f4f4f4;font-family:'LMD-Arcade';font-size:8px;letter-spacing:1px;text-align:center;padding:10px}
#lmd .topbar .st{color:var(--green)}

#lmd header{background:var(--bg);border-bottom:4px solid var(--ink)}
#lmd .headrow{display:flex;justify-content:center;align-items:center;padding:20px 0}
#lmd .logo{height:40px;width:auto}

#lmd .crumb{font-size:16px;color:var(--muted);padding:18px 0 2px}
#lmd .crumb a{color:var(--green-deep);text-decoration:none}
#lmd .crumb span{color:var(--ink)}

#lmd .product{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,4vw,50px);padding:14px 0 40px}
#lmd .gallery{display:flex;flex-direction:column;gap:14px}
#lmd .mainframe{position:relative;background:#fff;border:4px solid var(--ink);box-shadow:8px 8px 0 rgba(43,43,43,.12);padding:10px}
#lmd .mainframe img{width:100%;aspect-ratio:1;object-fit:contain}
#lmd .tag{position:absolute;top:14px;left:14px;font-family:'LMD-Arcade';font-size:8px;color:#fff;background:var(--green);padding:7px 9px;border:3px solid var(--ink);box-shadow:3px 3px 0 rgba(43,43,43,.25)}
#lmd .thumbs{display:flex;flex-wrap:wrap;gap:12px}
#lmd .thumbs button{flex:0 0 104px;background:#fff;border:3px solid var(--ink);padding:5px;cursor:pointer;box-shadow:0 4px 0 rgba(43,43,43,.12)}
#lmd .thumbs button.sel{border-color:var(--green);box-shadow:0 4px 0 var(--green-deep)}
#lmd .thumbs img{width:100%;aspect-ratio:1;object-fit:contain}

#lmd .summary{display:flex;flex-direction:column;gap:18px}
#lmd h1.ptitle{font-family:'LMD-Arcade';font-size:clamp(1rem,2.4vw,1.5rem);line-height:1.5;margin:0;text-wrap:balance;color:var(--ink)}
#lmd .rating{display:flex;align-items:center;gap:10px;font-size:16px;color:var(--muted)}
#lmd .stars{color:var(--star);letter-spacing:3px;font-size:18px}
#lmd .priceline{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
#lmd .was{font-family:'LMD-Arcade';font-size:12px;color:var(--muted);text-decoration:line-through;text-decoration-thickness:3px}
#lmd .now{font-family:'LMD-Arcade';font-size:22px;color:var(--green-deep)}
#lmd .off{font-family:'LMD-Arcade';font-size:9px;color:#fff;background:var(--green);padding:6px 8px;border:3px solid var(--ink)}
#lmd .lead{font-size:19px;color:var(--text);max-width:52ch}

#lmd .sizerow{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
#lmd .optlabel{font-family:'LMD-Arcade';font-size:9px;letter-spacing:1px;color:var(--muted)}
#lmd .sizechip{font-family:'LMD-Arcade';font-size:11px;color:#fff;background:var(--green);border:3px solid var(--ink);box-shadow:0 4px 0 var(--green-deep);padding:10px 16px}
#lmd .sizenote{font-size:15px;color:var(--muted)}

#lmd .buyrow{display:flex;gap:14px;align-items:stretch;flex-wrap:wrap}
#lmd .stepper{display:flex;align-items:center;border:3px solid var(--ink);box-shadow:0 5px 0 var(--ink);background:#fff}
#lmd .stepper button{font-family:'LMD-Arcade';font-size:12px;background:none;border:0;padding:0 16px;cursor:pointer;color:var(--ink)}
#lmd .stepper span{font-family:'LMD-Arcade';font-size:12px;min-width:34px;text-align:center;color:var(--green-deep)}
#lmd .addcart{flex:1;min-width:230px;font-family:'LMD-Arcade';font-size:13px;letter-spacing:1px;color:#fff;background:var(--green);border:4px solid var(--ink);box-shadow:0 7px 0 var(--green-deep);padding:16px 18px;cursor:pointer}
#lmd .addcart:hover{background:var(--green-hover)}
#lmd .addcart:active{transform:translateY(4px);box-shadow:0 3px 0 var(--green-deep)}
#lmd .addcart[disabled]{opacity:.6;cursor:progress}
#lmd .cartmsg{font-family:'LMD-Arcade';font-size:10px;color:var(--green-deep)}
#lmd .cartmsg a{color:var(--green-deep);text-decoration:underline}
#lmd .cartmsg a:hover{color:var(--ink)}

#lmd .sechead{text-align:center;padding:40px 0 24px}
#lmd .sechead h2{font-family:'LMD-Arcade';font-size:clamp(.9rem,2.2vw,1.35rem);color:var(--ink);margin:0 0 10px;line-height:1.5}
#lmd .sechead p{font-size:18px;color:var(--muted);margin:0}

#lmd .story{display:flex;flex-direction:column;gap:28px;padding-bottom:20px}
#lmd .item{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:26px;align-items:center;background:var(--card);border:4px solid var(--ink);box-shadow:8px 8px 0 rgba(43,43,43,.10);padding:16px}
#lmd .item:nth-child(even) .pic{order:2}
#lmd .item .pic{background:#fff;border:3px solid var(--ink);padding:8px}
#lmd .item .pic img{width:100%;aspect-ratio:1;object-fit:contain}
#lmd .item h3{font-family:'LMD-Arcade';font-size:12px;color:var(--green-deep);margin:0 0 12px;line-height:1.5}
#lmd .item p{font-size:18px;margin:0;color:var(--text)}

#lmd .trio{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:48px 0 44px}
#lmd .flip{perspective:1000px;background:none;border:0;padding:0;display:block;width:100%;font-family:inherit}
#lmd .flip-inner{position:relative;width:100%;height:232px;transition:transform .6s cubic-bezier(.2,.7,.2,1);transform-style:preserve-3d}
#lmd .flip.flipped .flip-inner{transform:rotateY(180deg)}
#lmd .flip-face{position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;
  background:var(--card);border:4px solid var(--ink);box-shadow:6px 6px 0 rgba(43,43,43,.10);
  padding:22px 18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center}
#lmd .flip-front img{width:54px;height:auto}
#lmd .flip-front h4{font-family:'LMD-Arcade';font-size:10px;color:var(--ink);margin:0;line-height:1.5}
#lmd .flip-back{transform:rotateY(180deg);background:var(--green);border-color:var(--green-deep)}
#lmd .flip-back p{font-size:17px;color:#fff;margin:0}
#lmd .flip-hint{font-family:'LMD-Arcade';font-size:7px;letter-spacing:1px;color:var(--muted)}
#lmd .flip-back .flip-hint{color:rgba(255,255,255,.9)}

#lmd footer{background:var(--ink);color:#e6e6e6;margin-top:34px;border-top:5px solid var(--green)}
#lmd .foot{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.4fr;gap:28px;padding:38px 0}
#lmd .foot img{height:30px;filter:brightness(0) invert(1)}
#lmd .foot h5{font-family:'LMD-Arcade';font-size:9px;color:var(--green);margin:0 0 12px}
#lmd .foot a{display:block;color:#cfcfcf;text-decoration:none;font-size:16px;padding:3px 0}
#lmd .foot a:hover{color:#fff}
#lmd .foot p{font-size:15px;color:#a6a6a6;margin:8px 0 0}
#lmd .news{display:flex;margin-top:12px}
#lmd .news input{flex:1;font-family:'LMD-Pixel';font-size:16px;padding:10px;border:3px solid var(--green);background:#1c1c1c;color:#fff;cursor:text}
#lmd .news button{font-family:'LMD-Arcade';font-size:8px;background:var(--green);color:#fff;border:3px solid var(--green);padding:0 12px;cursor:pointer}
#lmd .copyright{border-top:1px solid #444;text-align:center;font-family:'LMD-Arcade';font-size:7px;color:#9a9a9a;padding:16px 10px;letter-spacing:1px}

#lmd .toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(160%);background:var(--green);color:#fff;border:4px solid var(--ink);box-shadow:6px 6px 0 rgba(43,43,43,.3);padding:14px 20px;font-family:'LMD-Arcade';font-size:10px;z-index:50;transition:transform .25s steps(4)}
#lmd .toast.show{transform:translateX(-50%) translateY(0)}

/* gamified extras */
#lmd .starfield{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1}
#lmd .tstar{position:absolute;opacity:.5;animation:lmd-tw 3s ease-in-out infinite}
@keyframes lmd-tw{0%,100%{opacity:.12;transform:scale(.75)}50%{opacity:.6;transform:scale(1.2)}}

#lmd .trailsprite{position:fixed;pointer-events:none;z-index:60;image-rendering:pixelated;animation:lmd-trailfade .85s ease-out forwards}
@keyframes lmd-trailfade{0%{opacity:.95;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) translateY(12px) scale(.4)}}

#lmd .coin{position:fixed;width:16px;height:16px;pointer-events:none;z-index:61;border:2px solid #7a5510;border-radius:3px;
  background:radial-gradient(circle at 35% 30%,#ffe487,#f4b63a 60%,#b9800f);animation:lmd-coinpop var(--dur,.9s) ease-out forwards}
@keyframes lmd-coinpop{0%{opacity:1;transform:translate(-50%,-50%)}100%{opacity:0;transform:translate(-50%,-50%) translate(var(--dx,0),-92px) rotate(220deg)}}
#lmd .plusone{position:fixed;pointer-events:none;z-index:61;font-family:'LMD-Arcade';font-size:13px;color:#b9800f;animation:lmd-plusfloat 1s ease-out forwards}
@keyframes lmd-plusfloat{0%{opacity:1;transform:translate(-50%,-50%)}100%{opacity:0;transform:translate(-50%,-50%) translateY(-64px)}}

#lmd :focus-visible{outline:3px solid var(--green-deep);outline-offset:3px}

@media (max-width:860px){
  #lmd .product{grid-template-columns:1fr}
  #lmd .trio{grid-template-columns:1fr}
  #lmd .item{grid-template-columns:1fr}
  #lmd .item:nth-child(even) .pic{order:0}
  #lmd .foot{grid-template-columns:1fr 1fr}
}
@media (max-width:480px){#lmd{font-size:18px}#lmd .foot{grid-template-columns:1fr}}