/*
Theme Name: ShopCraft Arena
Theme URI: https://example.com/shopcraft-arena
Author: Your Store
Author URI: https://example.com
Description: A gaming-chair-ready WooCommerce theme with a real-photo chair gallery, a 3D-effect header, and Blog, Shop, About Us, Orders (My Account) and Payment (Checkout) built in.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: shopcraft
Tags: e-commerce, woocommerce, blog, custom-menu, custom-logo, responsive-layout
*/

/* ===== Reset & base ===== */
* { box-sizing: border-box; }
:root{
  --primary: #1a1a2e;
  --accent: #ff6b35;
  --accent-dark: #e0551f;
  --bg: #ffffff;
  --bg-alt: #f7f7fb;
  --text: #222;
  --muted: #666;
  --border: #e7e7ef;
  --radius: 10px;
  --max-width: 1200px;
}
body{
  margin:0;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
}
a{ color: inherit; text-decoration:none; }
img{ max-width:100%; height:auto; display:block; }
.container{ max-width: var(--max-width); margin: 0 auto; padding: 0 20px; }
ul{ list-style:none; margin:0; padding:0; }

/* ===== Header ===== */
.site-header{
  border-bottom: 1px solid var(--border);
  position: sticky; top:0; background: var(--bg); z-index: 100;
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding: 16px 0;
}
.site-branding .site-title{
  font-size: 24px; font-weight: 800; letter-spacing: -0.5px; color: var(--primary);
}
.main-navigation ul{ display:flex; gap: 28px; align-items:center; }
.main-navigation a{ font-weight: 600; font-size: 15px; color: var(--primary); }
.main-navigation a:hover{ color: var(--accent); }
.header-icons{ display:flex; align-items:center; gap:18px; }
.header-icons a{ font-weight:600; font-size:14px; color: var(--primary); }
.cart-count{
  background: var(--accent); color:#fff; border-radius: 50%;
  padding: 1px 7px; font-size: 12px; margin-left: 4px;
}
.menu-toggle{ display:none; background:none; border:none; font-size:24px; cursor:pointer; }

/* ===== Hero (front page) ===== */
.hero{
  background: linear-gradient(135deg, var(--primary), #302b63);
  color:#fff; padding: 90px 0; text-align:center;
}
.hero h1{ font-size: 42px; margin: 0 0 14px; }
.hero p{ font-size: 18px; opacity:.85; margin: 0 0 28px; }
.btn{
  display:inline-block; background: var(--accent); color:#fff;
  padding: 14px 30px; border-radius: var(--radius); font-weight:700;
  border: none; cursor:pointer; transition: background .15s ease;
}
.btn:hover{ background: var(--accent-dark); }
.btn-outline{ background:transparent; border:2px solid #fff; }

/* ===== Sections / product grid ===== */
.section{ padding: 60px 0; }
.section-title{ font-size: 28px; margin-bottom: 30px; text-align:center; }
.products, .shopcraft-grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(230px,1fr)); gap: 24px;
}
.product, .shopcraft-card{
  border: 1px solid var(--border); border-radius: var(--radius); overflow:hidden;
  background:#fff; transition: box-shadow .15s ease, transform .15s ease;
}
.product:hover, .shopcraft-card:hover{ box-shadow: 0 10px 25px rgba(0,0,0,.08); transform: translateY(-3px); }
.product img, .shopcraft-card img{ aspect-ratio: 1/1; object-fit:cover; width:100%; }
.product-info{ padding: 16px; }
.product-info .price{ color: var(--accent); font-weight:700; }

/* ===== Blog ===== */
.post-list article{
  border-bottom: 1px solid var(--border); padding: 30px 0;
}
.post-list h2{ margin: 0 0 8px; font-size: 24px; }
.post-meta{ color: var(--muted); font-size: 13px; margin-bottom: 10px; }

/* ===== Page content ===== */
.page-content{ padding: 60px 0; max-width: 800px; margin:0 auto; }

/* ===== Header (3D) ===== */
.site-header-3d{
  position: sticky; top: 0; z-index: 100;
  perspective: 900px;
  background: var(--bg);
  box-shadow: 0 1px 0 var(--border), 0 8px 20px rgba(0,0,0,.05);
  transition: box-shadow .2s ease, background .2s ease;
}
.site-header-3d.is-scrolled{
  box-shadow: 0 1px 0 var(--border), 0 18px 34px rgba(0,0,0,.14), 0 0 0 1px rgba(255,107,53,.06);
}
.site-header-3d::after{
  content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity:0; transition: opacity .2s ease;
}
.site-header-3d.is-scrolled::after{ opacity:.7; }
.site-header-bg{
  position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:.12; pointer-events:none;
}
.site-header-3d .header-inner{ position:relative; z-index:1; }
.site-branding{ transform-style: preserve-3d; transition: transform .15s ease; }
.site-branding:hover{ transform: perspective(500px) rotateY(-6deg) translateZ(6px); }
.site-branding .site-title{
  text-shadow: 0 2px 0 rgba(0,0,0,.06);
}
.main-navigation a{
  position:relative; display:inline-block;
  transition: transform .15s ease, color .15s ease;
}
.main-navigation a:hover{
  transform: translateY(-2px);
}
.main-navigation a::after{
  content:''; position:absolute; left:0; bottom:-4px; width:0; height:2px;
  background: var(--accent); transition: width .15s ease;
}
.main-navigation a:hover::after{ width:100%; }
.header-icons a{
  transition: transform .15s ease;
}
.header-icons a:hover{ transform: translateY(-2px) scale(1.04); }

/* ===== Testimonials ===== */
.testimonials-section{ background: var(--bg-alt); padding: 60px 0; }
.testimonials-grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: 24px;
}
.testimonial-card{
  background:#fff; border:1px solid var(--border); border-radius: var(--radius);
  padding: 24px; box-shadow: 0 2px 6px rgba(0,0,0,.03);
}
.testimonial-quote{ font-size: 15px; color: var(--text); margin: 0 0 14px; font-style: italic; }
.testimonial-name{ font-weight: 700; margin: 0; font-size: 14px; }
.testimonial-role{ margin: 2px 0 0; font-size: 12px; color: var(--muted); }

/* ===== Product / chair gallery ===== */
.chair-gallery{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 18px;
}
.chair-gallery figure{ margin:0; border:1px solid var(--border); border-radius: var(--radius); overflow:hidden; background:#fff; }
.chair-gallery img{ width:100%; aspect-ratio:1/1; object-fit:cover; }
.chair-gallery figcaption{ padding: 10px 12px; font-size: 13px; font-weight:600; color: var(--primary); }

/* ===== Homepage marketing sections ===== */
.highlight-strip{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.highlight-strip figure{ margin:0; border-radius: var(--radius); overflow:hidden; }
.highlight-strip img{ width:100%; aspect-ratio: 7/5; object-fit:cover; }

.why-best-grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 22px;
}
.why-best-card{
  background:#fff; border:1px solid var(--border); border-radius: var(--radius);
  padding: 24px; text-align:center;
}
.why-best-icon{ font-size: 34px; display:block; margin-bottom: 10px; }
.why-best-card h3{ margin: 0 0 8px; font-size: 17px; }
.why-best-card p{ margin:0; font-size: 14px; color: var(--muted); }

.how-to-grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 22px;
}
.how-to-grid figure{ margin:0; }
.how-to-grid img{ width:100%; aspect-ratio: 7/5; object-fit:cover; border-radius: var(--radius); }
.how-to-grid figcaption{ font-size: 13px; color: var(--muted); margin-top: 10px; }
.how-to-grid figcaption strong{ color: var(--primary); }

@media (max-width: 782px){
  .highlight-strip{ grid-template-columns: 1fr; }
}

/* ===== 3D effects ===== */
.tilt-3d{
  transform-style: preserve-3d;
  transition: transform .15s ease-out, box-shadow .15s ease-out;
  will-change: transform;
}
.tilt-3d:hover{
  box-shadow: 0 22px 40px rgba(0,0,0,.16), 0 6px 14px rgba(0,0,0,.08);
  z-index: 2;
}
.product, .shopcraft-card, .chair-gallery figure, .testimonial-card{
  box-shadow: 0 2px 6px rgba(0,0,0,.05);
}
.chair-gallery img{ transition: transform .3s ease; }
.chair-gallery figure:hover img{ transform: scale(1.06); }

.hero{
  --parallax-x: 0px; --parallax-y: 0px;
  perspective: 1000px;
  position: relative;
}
.hero .container{
  transform: translate(var(--parallax-x), var(--parallax-y));
  transition: transform .05s linear;
}
.btn{
  box-shadow: 0 6px 14px rgba(255,107,53,.28);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(255,107,53,.35);
}

/* ===== Footer ===== */
.site-footer{ background: var(--primary); color:#fff; padding: 50px 0 24px; margin-top: 60px; }
.footer-grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 30px; }
.footer-grid h4{ margin-bottom: 14px; }
.footer-grid a{ color: #cfcfe8; display:block; margin-bottom:8px; }
.footer-bottom{ text-align:center; margin-top:30px; padding-top:20px; border-top:1px solid rgba(255,255,255,.1); font-size: 13px; color:#9d9dc0; }

/* ===== WooCommerce tweaks ===== */
.woocommerce ul.products li.product .price{ color: var(--accent); }
.woocommerce a.button, .woocommerce button.button, .woocommerce #respond input#submit{
  background: var(--accent) !important; color:#fff !important; border-radius: var(--radius) !important;
}
.woocommerce a.button:hover, .woocommerce button.button:hover{ background: var(--accent-dark) !important; }

/* ===== Responsive ===== */
@media (max-width: 782px){
  .main-navigation{ display:none; width:100%; }
  .main-navigation.is-open{ display:block; }
  .main-navigation ul{ flex-direction:column; align-items:flex-start; gap:14px; padding: 16px 0; }
  .menu-toggle{ display:block; }
  .hero h1{ font-size: 30px; }
}