/*
Theme Name: Haroon and Sons Trader
Theme URI: https://haroonsons.com
Author: Haroon and Sons
Description: Custom catalogue theme for Haroon and Sons Trader — hand-forged knives, swords and cutlery. Manage products & categories from the WordPress dashboard with WhatsApp / email inquiry (no cart). Includes a one-click demo importer (Tools > Haroon & Sons Demo) and brand settings under Appearance > Customize.
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
Text Domain: haroonsons
*/

:root{
  --background:hsl(0 0% 100%);
  --foreground:hsl(220 35% 12%);
  --primary:hsl(218 90% 48%);
  --primary-foreground:hsl(0 0% 100%);
  --muted:hsl(215 25% 96%);
  --muted-foreground:hsl(220 12% 42%);
  --border:hsl(215 25% 88%);
  --gradient-ember:linear-gradient(135deg,hsl(218 90% 48%),hsl(205 95% 60%));
  --gradient-forge:radial-gradient(ellipse at center,hsl(218 90% 95%),hsl(0 0% 100%) 70%);
  --gradient-card:linear-gradient(145deg,hsl(0 0% 100%),hsl(215 30% 97%));
  --gradient-dark:linear-gradient(180deg,hsl(215 30% 98%),hsl(0 0% 100%));
  --shadow-ember:0 10px 40px -10px hsl(218 90% 48% / .35);
  --shadow-deep:0 20px 60px -20px hsl(218 50% 30% / .18);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--background);color:var(--foreground);font-family:'Inter',system-ui,-apple-system,sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:'Oswald','Bebas Neue',system-ui,sans-serif;letter-spacing:.02em;margin:0;text-transform:uppercase}

.container{max-width:1200px;margin:0 auto;padding:0 1rem}
@media(min-width:640px){.container{padding:0 1.5rem}}
@media(min-width:1024px){.container{padding:0 3rem}}

.center{text-align:center}
.hs-muted{color:var(--muted-foreground)}
.eyebrow{font-size:.72rem;text-transform:uppercase;letter-spacing:.3em;color:var(--primary);font-weight:600;display:flex;align-items:center;gap:.75rem}
.eyebrow a{color:var(--primary)}
.divider{display:inline-block;height:2px;width:3rem;background:var(--primary)}
.heading-xl{font-size:clamp(2.5rem,6vw,4.5rem);font-weight:700;line-height:.95;letter-spacing:-.01em}
.heading-lg{font-size:clamp(1.9rem,4vw,3rem);font-weight:700}
.heading-md{font-size:clamp(1.4rem,3vw,2rem);font-weight:700}
.text-gradient{background:var(--gradient-ember);-webkit-background-clip:text;background-clip:text;color:transparent}
.clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hs-section{padding:5rem 1rem}
.hs-prose p{margin:0 0 1rem;color:hsl(220 20% 25%)}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.9rem 1.75rem;font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;cursor:pointer;border:0;transition:.2s;line-height:1}
.btn-primary{background:var(--gradient-ember);color:var(--primary-foreground);box-shadow:var(--shadow-ember)}
.btn-primary:hover{transform:translateY(-1px)}
.btn-outline{background:transparent;border:1px solid hsl(220 35% 12% / .3);color:var(--foreground)}
.btn-outline:hover{border-color:var(--primary);color:var(--primary)}
.btn-soft{background:hsl(218 90% 48% / .1);border:1px solid hsl(218 90% 48% / .4);color:var(--primary);justify-content:center;padding:.6rem 1rem;font-size:.72rem}
.btn-soft:hover{background:var(--primary);color:#fff}
.hs-link{color:var(--primary);font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;font-weight:600}
.hs-link:hover{text-decoration:underline}

/* Header */
.site-header{position:sticky;top:0;z-index:40;background:hsl(0 0% 100% / .85);backdrop-filter:blur(10px);border-bottom:1px solid hsl(215 25% 88% / .6)}
.hs-header-inner{display:flex;align-items:center;justify-content:space-between;height:4rem}
.hs-logo{display:flex;align-items:center;gap:.5rem}
.hs-logo-badge{display:flex;height:2.25rem;width:2.25rem;align-items:center;justify-content:center;background:var(--gradient-ember);color:#fff;font-family:'Oswald';font-weight:700;font-size:1.1rem}
.hs-logo-text{line-height:1.1}
.hs-logo-name{display:block;font-family:'Oswald';font-weight:700;text-transform:uppercase;font-size:1rem}
.hs-logo-sub{display:block;font-size:.6rem;text-transform:uppercase;letter-spacing:.25em;color:var(--muted-foreground)}
.hs-menu{display:none;list-style:none;gap:2rem;margin:0;padding:0}
.hs-menu a{font-size:.82rem;text-transform:uppercase;letter-spacing:.06em;color:hsl(220 35% 12% / .8)}
.hs-menu a:hover{color:var(--primary)}
.hs-phone{display:none;align-items:center;gap:.5rem;border:1px solid hsl(218 90% 48% / .4);background:hsl(218 90% 48% / .1);padding:.55rem 1rem;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--primary)}
.hs-phone:hover{background:var(--primary);color:#fff}
.hs-burger{display:block;background:none;border:0;font-size:1.5rem;cursor:pointer;color:var(--foreground)}
@media(min-width:768px){.hs-menu{display:flex}.hs-phone{display:inline-flex}.hs-burger{display:none}}
.hs-nav.is-open{display:block;position:absolute;top:4rem;left:0;right:0;background:#fff;border-bottom:1px solid var(--border);padding:1rem}
.hs-nav.is-open .hs-menu{display:flex;flex-direction:column;gap:0}
.hs-nav.is-open .hs-menu li{padding:.75rem 0;border-bottom:1px solid hsl(215 25% 88% / .5)}

/* Hero */
.hs-hero{position:relative;overflow:hidden}
.hs-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center}
.hs-hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,#fff,hsl(0 0% 100% / .85) 40%,hsl(0 0% 100% / .1))}
.hs-hero-inner{position:relative;min-height:80vh;display:flex;flex-direction:column;justify-content:center;max-width:1200px;padding-top:6rem;padding-bottom:6rem}
.hs-hero-inner>*{max-width:42rem}
.hs-hero-inner .heading-xl{margin-top:1rem}
.hs-hero-lead{margin-top:1.5rem;font-size:1.1rem;color:var(--muted-foreground)}
.hs-hero-cta{margin-top:2.5rem;display:flex;flex-wrap:wrap;gap:1rem}
.hs-hero-cta.center{justify-content:center}

/* Trust */
.hs-trust{border-top:1px solid hsl(215 25% 88% / .6);border-bottom:1px solid hsl(215 25% 88% / .6);background:hsl(215 25% 96% / .5)}
.hs-trust-grid{display:grid;gap:1.5rem;padding:2.5rem 1rem}
@media(min-width:768px){.hs-trust-grid{grid-template-columns:repeat(4,1fr)}}
.hs-trust-item{display:flex;gap:1rem;align-items:flex-start}
.hs-trust-icon,.hs-stat-icon,.hs-contact-icon{display:flex;height:2.75rem;width:2.75rem;flex:0 0 auto;align-items:center;justify-content:center;border:1px solid hsl(218 90% 48% / .4);background:hsl(218 90% 48% / .1);color:var(--primary)}
.hs-trust-title{font-family:'Oswald';text-transform:uppercase;letter-spacing:.04em}

/* Section heads */
.hs-section-head{margin-bottom:3rem;display:flex;flex-direction:column;gap:1rem}
@media(min-width:768px){.hs-section-head{flex-direction:row;justify-content:space-between;align-items:flex-end}}
.hs-section-head.center{align-items:center;text-align:center}
.hs-section-head .heading-lg{margin-top:.75rem}

/* Category grid */
.hs-cat-grid{display:grid;gap:1.25rem;grid-template-columns:1fr}
@media(min-width:640px){.hs-cat-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.hs-cat-grid{grid-template-columns:repeat(4,1fr)}}
.hs-cat-card{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;border:1px solid var(--border)}
.hs-cat-card img{height:100%;width:100%;object-fit:cover;transition:.7s}
.hs-cat-card:hover img{transform:scale(1.05)}
.hs-cat-overlay{position:absolute;inset:0;background:linear-gradient(to top,#fff,hsl(0 0% 100% / .4),transparent)}
.hs-cat-body{position:absolute;inset-inline:0;bottom:0;padding:1.25rem}
.hs-cat-body h3{font-size:1.25rem}
.hs-cat-body p{margin:.25rem 0 0;font-size:.85rem}
.hs-cat-body .hs-link{margin-top:.75rem;display:inline-block}

/* Featured / product grid */
.hs-featured{border-top:1px solid hsl(215 25% 88% / .6);background:hsl(215 25% 96% / .4)}
.hs-product-grid{display:grid;gap:1.25rem;grid-template-columns:1fr}
@media(min-width:640px){.hs-product-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.hs-product-grid{grid-template-columns:repeat(4,1fr)}}
.hs-card{display:flex;flex-direction:column;overflow:hidden;background:var(--gradient-card);border:1px solid hsl(215 25% 88% / .6);transition:.3s}
.hs-card:hover{border-color:hsl(218 90% 48% / .6);transform:translateY(-4px);box-shadow:var(--shadow-ember)}
.hs-card-img{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;background:#fff}
.hs-card-img img{height:100%;width:100%;object-fit:cover;transition:.7s}
.hs-card:hover .hs-card-img img{transform:scale(1.05)}
.hs-card-body{display:flex;flex:1;flex-direction:column;justify-content:space-between;gap:.75rem;padding:1rem}
.hs-card-sku{font-size:.62rem;text-transform:uppercase;letter-spacing:.2em;color:var(--primary);font-weight:600;margin:0}
.hs-card-title{font-size:1.05rem;line-height:1.2;margin:.25rem 0 0}
.hs-card-title a:hover{color:var(--primary)}

/* Heritage */
.hs-heritage{display:grid;gap:3rem;align-items:center}
@media(min-width:1024px){.hs-heritage{grid-template-columns:repeat(2,1fr)}}
.hs-heritage-img{aspect-ratio:4/3;overflow:hidden;border:1px solid hsl(215 25% 88% / .6)}
.hs-heritage-img img{height:100%;width:100%;object-fit:cover}
.hs-heritage .heading-lg{margin-top:.75rem}
.hs-heritage .hs-prose{margin:1.5rem 0}
.hs-heritage .hs-link{display:inline-block;margin-top:.5rem}

/* CTA */
.hs-cta{border-top:1px solid hsl(215 25% 88% / .6);background:var(--gradient-forge);padding:5rem 0;text-align:center}
.hs-cta .hs-muted{max-width:36rem;margin:1rem auto 0}

/* Page head */
.hs-page-head{border-bottom:1px solid hsl(215 25% 88% / .6);background:var(--gradient-forge);padding:4rem 0}
.hs-page-head .heading-lg{margin-top:.75rem}
.hs-page-head .hs-muted{max-width:42rem;margin-top:.75rem}
.hs-forge-bg{background:var(--gradient-forge)}

/* Shop layout */
.hs-shop{display:grid;gap:2.5rem;padding:3rem 1rem;grid-template-columns:1fr}
@media(min-width:1024px){.hs-shop{grid-template-columns:240px 1fr}}
.hs-cat-nav{display:flex;flex-direction:column;gap:.25rem;margin-top:1rem}
.hs-cat-nav a{border-left:2px solid transparent;padding:.5rem .75rem;font-size:.85rem;color:hsl(220 35% 12% / .7)}
.hs-cat-nav a:hover,.hs-cat-nav a.is-active{border-color:var(--primary);color:var(--primary)}
.hs-pagination{margin-top:2.5rem}
.hs-pagination .page-numbers{padding:.4rem .8rem;border:1px solid var(--border);margin-right:.25rem}
.hs-pagination .current{background:var(--primary);color:#fff;border-color:var(--primary)}

/* Detail */
.hs-back{padding-top:2rem}
.hs-detail{display:grid;gap:2.5rem;padding:2.5rem 1rem}
@media(min-width:1024px){.hs-detail{grid-template-columns:repeat(2,1fr)}}
.hs-detail-img{aspect-ratio:1/1;overflow:hidden;border:1px solid hsl(215 25% 88% / .6);background:#fff}
.hs-detail-img img{height:100%;width:100%;object-fit:cover}
.hs-detail .heading-lg{margin-top:.5rem}
.hs-sku{font-family:monospace;color:var(--primary)}
.hs-features{list-style:none;padding:0;margin:1.5rem 0;display:grid;gap:.5rem;font-size:.9rem;color:hsl(220 20% 30%)}
.hs-detail .hs-prose{margin-top:1.5rem}

/* About */
.hs-about-hero{position:relative;overflow:hidden}
.hs-about-hero img{position:absolute;inset:0;height:100%;width:100%;object-fit:cover;opacity:.9}
.hs-about-overlay{position:absolute;inset:0;background:linear-gradient(to top,#fff,hsl(0 0% 100% / .75),hsl(0 0% 100% / .3))}
.hs-about-hero-inner{position:relative;padding:6rem 1rem}
.hs-about{display:grid;gap:3rem;padding:4rem 1rem}
@media(min-width:1024px){.hs-about{grid-template-columns:2fr 1fr}}
.hs-about-stats{display:flex;flex-direction:column;gap:1rem}
.hs-stat,.hs-contact-card{display:flex;align-items:center;gap:1rem;border:1px solid hsl(215 25% 88% / .6);background:var(--gradient-card);padding:1.25rem}
.hs-stat-k{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em}
.hs-stat-v{font-family:'Oswald';font-size:1.1rem;text-transform:uppercase}

/* Contact */
.hs-contact{display:grid;gap:3rem;padding:3.5rem 1rem}
@media(min-width:1024px){.hs-contact{grid-template-columns:1fr 360px}}
.hs-contact-form{border:1px solid hsl(215 25% 88% / .6);background:var(--gradient-card);padding:2.5rem 1.5rem}
.hs-form{display:grid;gap:1rem;grid-template-columns:1fr;margin-top:1.5rem}
@media(min-width:640px){.hs-form{grid-template-columns:1fr 1fr}}
.hs-form .full{grid-column:1/-1}
.hs-form input,.hs-form textarea{width:100%;border:1px solid var(--border);background:hsl(0 0% 100% / .6);padding:.8rem 1rem;font-size:.9rem;font-family:inherit;outline:none}
.hs-form input:focus,.hs-form textarea:focus{border-color:var(--primary)}
.hs-form textarea{resize:none}
.hs-contact-side{display:flex;flex-direction:column;gap:1rem}
.hs-contact-card a{display:block}
.hs-contact-wa{border-color:hsl(218 90% 48% / .3);background:hsl(218 90% 48% / .05)}
.hs-contact-wa .hs-contact-icon{background:var(--primary);color:#fff;border:0}

/* Footer */
.site-footer{border-top:1px solid hsl(215 25% 88% / .6);background:var(--gradient-dark)}
.hs-footer-grid{display:grid;gap:2.5rem;padding:3.5rem 1rem;grid-template-columns:1fr}
@media(min-width:768px){.hs-footer-grid{grid-template-columns:repeat(4,1fr)}}
.hs-footer-list{list-style:none;padding:0;margin:1rem 0 0;display:grid;gap:.5rem;font-size:.9rem}
.hs-footer-list a:hover{color:var(--primary)}
.hs-footer-bottom{border-top:1px solid hsl(215 25% 88% / .6)}
.hs-footer-bottom-inner{display:flex;flex-direction:column;gap:.5rem;align-items:center;justify-content:space-between;padding:1.25rem 1rem;font-size:.78rem;color:var(--muted-foreground)}
@media(min-width:768px){.hs-footer-bottom-inner{flex-direction:row}}

/* WhatsApp FAB */
.hs-whatsapp-fab{position:fixed;bottom:1.5rem;right:1.5rem;z-index:50;display:flex;height:3.5rem;width:3.5rem;align-items:center;justify-content:center;border-radius:9999px;background:var(--primary);color:#fff;box-shadow:var(--shadow-deep);transition:transform .2s}
.hs-whatsapp-fab:hover{transform:scale(1.1)}