/*
Theme Name: Written by Fouaad Barcha in PHP
Theme URI: https://hunzahandmade.com/
Author: Fouaad.Dev
Description: Clean Shopify-style WooCommerce theme tailored for handmade products from Hunza. Mobile-first, fast, and minimal.
Version: 1.0.0
Text Domain: hunzahandmade-shopify
Tags: e-commerce, woocommerce, responsive, minimal, handmade
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

:root{
  --green:#008060; --green-dark:#004c3f; --dark:#212B36; --muted:#637381;
  --bg:#F6F6F7; --light:#FFFFFF; --radius:16px; --shadow:0 10px 30px rgba(33,43,54,.08); --max:1200px;
}
html,body{margin:0;padding:0;background:#fff;color:var(--dark)}
body{font:16px/1.6 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji"}
a{color:var(--green);text-decoration:none} a:hover{color:var(--green-dark)}
img{max-width:100%;height:auto;border-radius:12px}
.wrap{max-width:var(--max);margin:0 auto;padding:20px}
.hh-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);backdrop-filter:blur(8px);border-bottom:1px solid #eee}
.hh-nav{display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo{display:flex;align-items:center;gap:10px;font-weight:900}
.logo .dot{width:10px;height:10px;border-radius:999px;background:var(--green);display:inline-block}
.nav-links{display:none;gap:16px} .nav-links a{font-weight:600;color:var(--dark)} .nav-cta{display:none}
.burger{display:inline-flex;flex-direction:column;gap:4px;background:transparent;border:0;cursor:pointer;padding:8px}
.burger span{width:22px;height:2px;background:var(--dark);display:block;border-radius:2px}
.mobile-menu{display:none;padding:0 0 14px}
.mobile-menu a{display:block;padding:10px 0;border-top:1px solid #eee;color:var(--dark);font-weight:600}
@media(min-width:920px){.burger{display:none}.nav-links{display:flex}.nav-cta{display:inline-flex}.mobile-menu{display:none!important}}
.hero{background:radial-gradient(1200px 400px at 50% -200px, rgba(0,128,96,.08), transparent)}
.hero-card{display:grid;gap:22px;align-items:center;grid-template-columns:1fr;padding:22px;border-radius:20px;background:#fff;box-shadow:var(--shadow)}
@media(min-width:900px){.hero-card{grid-template-columns:1.2fr .8fr}}
.badge{display:inline-flex;align-items:center;gap:8px;font-size:12px;padding:6px 10px;border-radius:999px;background:var(--bg);color:var(--green);font-weight:700}
.btn{appearance:none;border:0;border-radius:999px;background:var(--green);color:#fff;padding:12px 18px;font-weight:700;cursor:pointer;box-shadow:var(--shadow);transition:.2s transform,.2s background}
.btn:hover{background:var(--green-dark);transform:translateY(-1px)} .btn-ghost{background:transparent;color:var(--green);box-shadow:none;border:2px solid var(--green)}
.actions{display:flex;gap:10px;flex-wrap:wrap}
section{padding:40px 0}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:12px;margin:0 0 12px}
h1,h2,h3{margin:0 0 12px;line-height:1.2} h1{font-size:clamp(28px,7vw,44px);font-weight:800;letter-spacing:-.02em} h2{font-size:clamp(22px,5vw,32px);font-weight:800} h3{font-size:20px;font-weight:700}
.muted{color:var(--muted)}
.grid{display:grid;gap:16px} .cols-2{grid-template-columns:repeat(2,1fr)} .cols-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:768px){.cols-2,.cols-3{grid-template-columns:1fr}}
.product-card{border:1px solid #eee;border-radius:16px;background:#fff;box-shadow:var(--shadow);padding:14px;display:flex;flex-direction:column;gap:10px}
.price{font-weight:900;font-size:18px}
.testi{border:1px solid #eee;border-radius:16px;padding:14px;background:#fff;box-shadow:var(--shadow)}
footer{border-top:1px solid #eee} footer .wrap{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;padding-top:16px}