/*
Theme Name: NIULAI Retro
Theme URI: https://niulai.io
Author: NIULAI Director
Author URI: https://niulai.io
Description: Retro FrontPage / GeoCities / Win98 meme aesthetic for NIULAI merch store. WooCommerce-ready. Cyan bg, rainbow titles, Comic Sans, marquee, under construction. TO THE MOON.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: niulai-retro
Tags: e-commerce, custom-colors, custom-logo, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* ===== design tokens ===== */
:root{
  --cyan:#00e5ff; --pink:#ff66cc; --yellow:#ffff00; --lime:#33ff33;
  --orange:#ff9900; --link:#0000ee; --vlink:#551a8b; --navy:#000080; --win:#d4d0c8;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Comic Neue','Comic Sans MS',cursive,sans-serif;
  background:#00ffff;
  background-image:
    radial-gradient(circle, rgba(255,255,0,.55) 2px, transparent 3px),
    radial-gradient(circle, rgba(255,102,204,.5) 2px, transparent 3px),
    radial-gradient(circle, rgba(51,255,51,.5) 2px, transparent 3px);
  background-size:46px 46px,46px 46px,46px 46px;
  background-position:0 0,23px 23px,11px 34px;
  color:#000;line-height:1.5;overflow-x:hidden;
}
a{color:var(--link);text-decoration:underline;}
a:visited{color:var(--vlink);}
img{max-width:100%;display:block;}

/* rainbow */
.rainbow{
  background:linear-gradient(90deg,#ff0000,#ff9900,#ffff00,#33cc33,#00ccff,#3333ff,#ff00ff,#ff0000);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  font-family:'Bangers',cursive;letter-spacing:1px;
}

/* NAV */
.site-nav{background:var(--yellow);border-bottom:4px double #ff00ff;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:6px 10px;gap:4px;position:sticky;top:0;z-index:50;}
.site-nav .logo{font-family:'Bangers',cursive;font-size:26px;display:flex;align-items:center;gap:5px;text-decoration:none;color:#000;}
.site-nav .logo img{height:38px;width:38px;border-radius:50%;border:2px solid #000;}
.site-nav .links{display:flex;gap:2px;flex-wrap:wrap;font-size:14px;font-weight:bold;align-items:center;}
.site-nav .links a{color:var(--link);text-decoration:underline;padding:2px 7px;border:2px outset #fff;background:#d4d0c8;}
.site-nav .cart-link{background:#ff5b5b;color:#fff;border:2px outset #fff;padding:2px 9px;text-decoration:none;}
.site-nav .cart-link .count{background:#fff;color:#ff0000;padding:0 5px;border-radius:8px;margin-left:3px;}

/* marquee + strip */
.marquee{background:#000;color:#0f0;font-family:'Bangers',cursive;font-size:22px;white-space:nowrap;overflow:hidden;border-top:3px solid #ff00ff;border-bottom:3px solid #ff00ff;padding:5px 0;}
.marquee span{display:inline-block;padding-left:100%;animation:scroll 16s linear infinite;}
@keyframes scroll{from{transform:translateX(0);}to{transform:translateX(-100%);}}
.strip{background:repeating-linear-gradient(45deg,#ff0000,#ff0000 12px,#ffff00 12px,#ffff00 24px);text-align:center;font-weight:bold;padding:5px;color:#000;font-family:'Comic Sans MS';text-shadow:1px 1px 0 #fff;}

/* wavy + win */
.wave{text-align:center;color:#ff00ff;font-size:26px;letter-spacing:3px;margin:6px 0;font-family:'Comic Sans MS';user-select:none;}
.win{background:var(--win);border:3px outset #fff;max-width:980px;margin:18px auto;position:relative;z-index:1;}
.win>.bar{background:var(--navy);color:#fff;font-family:'Comic Sans MS';font-weight:bold;padding:4px 10px;display:flex;align-items:center;justify-content:space-between;font-size:18px;border-bottom:2px solid #000;}
.win>.bar .x{background:#c0c0c0;color:#000;border:2px outset #fff;padding:0 7px;font-size:13px;text-decoration:none;}
.win>.body{background:#fff;padding:18px;border:2px inset #c0c0c8;}

section{max-width:980px;margin:0 auto;padding:0 10px;}

/* hero */
.hero{text-align:center;padding:20px 8px 6px;}
.hero h1{font-size:clamp(48px,13vw,120px);line-height:1;text-shadow:3px 3px 0 #000;}
.hero .sub{font-size:clamp(18px,4vw,30px);font-weight:bold;margin:8px 0;color:#cc0066;}
.hero .tag{font-size:16px;max-width:640px;margin:10px auto;background:#ffffcc;border:3px dashed #ff00ff;padding:10px 14px;color:#000;}
.blink{animation:blink 1s steps(2,start) infinite;color:#ff0000;font-weight:bold;}
@keyframes blink{to{visibility:hidden;}}
.hero img.logo{width:100%;max-width:460px;border:5px ridge #ff00ff;margin:14px auto;border-radius:8px;box-shadow:0 0 20px #ff00ff66;}

h2.sec{font-size:clamp(30px,6vw,52px);text-align:center;margin-bottom:6px;}
.lead{max-width:700px;margin:6px auto 16px;text-align:center;font-size:16px;}

/* ===== WooCommerce ===== */
.woocommerce-breadcrumb{background:#000;color:#0f0;font-family:'Courier New',monospace;font-size:13px;padding:5px 10px;border:2px inset #0f0;margin:8px 0;}
.woocommerce-breadcrumb a{color:#ffff00;}
.woocommerce-result-count{font-family:'Comic Sans MS';font-size:14px;margin:8px 0;}
.woocommerce-ordering select{font-family:'Comic Sans MS';border:2px inset #999;background:#ffffcc;padding:3px;}

/* product grid */
ul.products{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));list-style:none;margin:14px 0;padding:0;}
li.product{background:#ffffcc;border:3px outset #ff99cc;padding:10px;text-align:center;display:flex;flex-direction:column;gap:6px;position:relative;}
li.product .woocommerce-loop-product__title{font-family:'Comic Sans MS';font-size:20px;color:#cc0066;}
li.product a img{width:100%;aspect-ratio:1/1;object-fit:cover;border:3px solid #000;background:#fff;}
li.product .price{font-family:'Courier New',monospace;font-size:18px;color:#006600;font-weight:bold;}
li.product .price del{color:#999;text-decoration:line-through;font-size:14px;}
li.product .price ins{background:none;text-decoration:none;}
li.product .onsale{position:absolute;top:6px;right:6px;background:#ff0000;color:#fff;font-family:'Comic Sans MS';font-weight:bold;font-size:12px;padding:3px 8px;border:2px outset #ff5b5b;transform:rotate(-8deg);}
li.product .button{display:inline-block;margin-top:auto;font-family:'Comic Sans MS';font-weight:bold;text-decoration:none;color:#000;background:#33ff33;border:3px outset #0f0;padding:6px 10px;cursor:pointer;font-size:15px;text-align:center;}
li.product .button:hover{background:#00ee00;}

/* single product */
.single-product div.product{display:grid;gap:18px;grid-template-columns:1fr;align-items:start;}
@media(min-width:760px){.single-product div.product{grid-template-columns:1fr 1fr;}}
.single-product .woocommerce-product-gallery__image img{width:100%;border:5px ridge #ff00ff;background:#fff;}
.single-product .product_title{font-family:'Bangers',cursive;font-size:clamp(30px,6vw,48px);color:#cc0066;}
.single-product .price{font-family:'Courier New',monospace;font-size:26px;color:#006600;font-weight:bold;margin:8px 0;}
.single-product .woocommerce-product-details__short-description{font-size:15px;margin:10px 0;line-height:1.6;}
.single-product form.cart{margin:12px 0;}
.single-product .variations select{font-family:'Comic Sans MS';font-size:15px;padding:4px;border:2px inset #999;background:#ffffcc;}
.single-product .quantity input{width:64px;font-family:'Courier New',monospace;font-size:18px;padding:4px;border:2px inset #999;text-align:center;}
.single-product .single_add_to_cart_button{font-family:'Comic Sans MS';font-weight:bold;color:#000;background:#33ff33;border:3px outset #0f0;padding:10px 20px;cursor:pointer;font-size:18px;}
.single-product .product_meta{font-size:13px;color:#666;margin-top:12px;border-top:2px dotted #999;padding-top:8px;}
.single-product .product_meta a{color:var(--link);}

/* cart */
.woocommerce table.shop_table{width:100%;border-collapse:collapse;font-family:'Comic Sans MS';border:3px outset #fff;}
.woocommerce table.shop_table th{background:var(--navy);color:#fff;padding:8px;text-align:left;border:2px outset #fff;}
.woocommerce table.shop_table td{padding:8px;border:2px inset #c0c0c8;background:#fff;vertical-align:middle;}
.woocommerce table.shop_table img{width:64px;height:64px;object-fit:cover;border:2px solid #000;}
.woocommerce-cart-form input[type=number]{width:56px;font-family:'Courier New',monospace;font-size:16px;text-align:center;border:2px inset #999;}
.cart_totals h2{font-family:'Comic Sans MS';color:#cc0066;}
.cart_totals .amount{color:#006600;font-weight:bold;}
.button.checkout{background:#ff3333;color:#fff;border:3px outset #ff5b5b;font-family:'Comic Sans MS';font-weight:bold;padding:10px 20px;font-size:18px;text-decoration:none;display:inline-block;}
.button.update{background:#ffff99;color:#000;border:3px outset #ff00ff;font-family:'Comic Sans MS';font-weight:bold;padding:8px 14px;text-decoration:none;display:inline-block;}

/* messages */
.woocommerce-message,.woocommerce-info{background:#ffffcc;border:3px dashed #ff9900;padding:10px 14px;margin:10px 0;font-family:'Comic Sans MS';font-weight:bold;}
.woocommerce-error{background:#ffcccc;border:3px outset #ff0000;padding:10px;margin:10px 0;font-family:'Comic Sans MS';}
.woocommerce-error li{margin:4px 0 4px 18px;}

/* pagination */
.woocommerce-pagination{margin-top:16px;}
.woocommerce-pagination ul{display:flex;justify-content:center;gap:2px;list-style:none;padding:0;}
.woocommerce-pagination li a,.woocommerce-pagination li span{display:inline-block;padding:4px 10px;border:2px outset #fff;background:#d4d0c8;text-decoration:none;color:var(--link);font-family:'Comic Sans MS';font-weight:bold;}
.woocommerce-pagination li .current{background:#000080;color:#fff;}

/* empty state */
.woocommerce-info{margin-top:12px;}

/* footer */
.site-footer{background:var(--navy);color:#fff;text-align:center;padding:20px 12px;margin-top:24px;font-size:13px;border-top:4px double #ffff00;}
.site-footer a{color:var(--yellow);}
.site-footer .fy{color:#ffff99;font-weight:bold;margin-top:8px;display:block;}
.site-footer .made{color:#0f0;font-family:'Courier New',monospace;margin-top:8px;font-size:12px;}

@media(max-width:600px){
  .site-nav .logo{font-size:22px;}
  .site-nav .links a{font-size:12px;padding:2px 5px;}
  .win>.bar{font-size:15px;}
  .woocommerce table.shop_table{font-size:13px;}
  .woocommerce table.shop_table th,.woocommerce table.shop_table td{padding:4px;}
}