/**
 * TimHenley.net - Core Styles
 * Atomic CSS Approach
 */

/* Reset & Base */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-font-smoothing:antialiased}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,sans-serif;line-height:1.6;color:#333;background:#fff}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit}
ul{list-style:none}
button{border:none;background:none;cursor:pointer;font-family:inherit}
input,select,textarea{font-family:inherit;font-size:inherit}

/* Atomic Utilities - Layout */
.d-f{display:flex}
.d-g{display:grid}
.d-b{display:block}
.d-ib{display:inline-block}
.d-n{display:none}

/* Flex */
.fx-w{flex-wrap:wrap}
.fx-nw{flex-wrap:nowrap}
.jc-c{justify-content:center}
.jc-sb{justify-content:space-between}
.jc-sa{justify-content:space-around}
.jc-fs{justify-content:flex-start}
.jc-fe{justify-content:flex-end}
.ai-c{align-items:center}
.ai-fs{align-items:flex-start}
.ai-fe{align-items:flex-end}
.fd-c{flex-direction:column}

/* Grid */
.gg-1{gap:0.25rem}
.gg-2{gap:0.5rem}
.gg-3{gap:0.75rem}
.gg-4{gap:1rem}
.gg-5{gap:1.5rem}
.gg-6{gap:2rem}

/* Spacing - Margin */
.m-0{margin:0}
.m-1{margin:0.25rem}
.m-2{margin:0.5rem}
.m-3{margin:0.75rem}
.m-4{margin:1rem}
.m-5{margin:1.5rem}
.m-6{margin:2rem}
.m-auto{margin:auto}

.mt-1{margin-top:0.25rem}
.mt-2{margin-top:0.5rem}
.mt-3{margin-top:0.75rem}
.mt-4{margin-top:1rem}
.mt-5{margin-top:1.5rem}
.mt-6{margin-top:2rem}

.mb-1{margin-bottom:0.25rem}
.mb-2{margin-bottom:0.5rem}
.mb-3{margin-bottom:0.75rem}
.mb-4{margin-bottom:1rem}
.mb-5{margin-bottom:1.5rem}
.mb-6{margin-bottom:2rem}

.ml-1{margin-left:0.25rem}
.ml-2{margin-left:0.5rem}
.ml-3{margin-left:0.75rem}
.ml-4{margin-left:1rem}

.mr-1{margin-right:0.25rem}
.mr-2{margin-right:0.5rem}
.mr-3{margin-right:0.75rem}
.mr-4{margin-right:1rem}

.mx-auto{margin-left:auto;margin-right:auto}

/* Spacing - Padding */
.p-1{padding:0.25rem}
.p-2{padding:0.5rem}
.p-3{padding:0.75rem}
.p-4{padding:1rem}
.p-5{padding:1.5rem}
.p-6{padding:2rem}

.pt-1{padding-top:0.25rem}
.pt-2{padding-top:0.5rem}
.pt-3{padding-top:0.75rem}
.pt-4{padding-top:1rem}
.pt-5{padding-top:1.5rem}
.pt-6{padding-top:2rem}

.pb-1{padding-bottom:0.25rem}
.pb-2{padding-bottom:0.5rem}
.pb-3{padding-bottom:0.75rem}
.pb-4{padding-bottom:1rem}
.pb-5{padding-bottom:1.5rem}
.pb-6{padding-bottom:2rem}

.px-2{padding-left:0.5rem;padding-right:0.5rem}
.px-3{padding-left:0.75rem;padding-right:0.75rem}
.px-4{padding-left:1rem;padding-right:1rem}
.px-5{padding-left:1.5rem;padding-right:1.5rem}

.py-2{padding-top:0.5rem;padding-bottom:0.5rem}
.py-3{padding-top:0.75rem;padding-bottom:0.75rem}
.py-4{padding-top:1rem;padding-bottom:1rem}
.py-5{padding-top:1.5rem;padding-bottom:1.5rem}

/* Typography */
.fs-12{font-size:0.75rem}
.fs-14{font-size:0.875rem}
.fs-16{font-size:1rem}
.fs-18{font-size:1.125rem}
.fs-20{font-size:1.25rem}
.fs-24{font-size:1.5rem}
.fs-32{font-size:2rem}
.fs-48{font-size:3rem}

.fw-4{font-weight:400}
.fw-5{font-weight:500}
.fw-6{font-weight:600}
.fw-7{font-weight:700}

.lh-1{line-height:1}
.lh-12{line-height:1.2}
.lh-14{line-height:1.4}
.lh-16{line-height:1.6}

.ta-c{text-align:center}
.ta-l{text-align:left}
.ta-r{text-align:right}

.tt-u{text-transform:uppercase}

/* Colors - Brand */
.c-pri{color:#ff6b35}
.c-sec{color:#4ecdc4}
.c-acc{color:#ffe66d}
.c-wht{color:#fff}
.c-blk{color:#1a1a1a}
.c-gry{color:#666}
.c-gry-l{color:#999}

/* Backgrounds */
.bg-pri{background:#ff6b35}
.bg-sec{background:#4ecdc4}
.bg-acc{background:#ffe66d}
.bg-wht{background:#fff}
.bg-blk{background:#1a1a1a}
.bg-gry{background:#f5f5f5}
.bg-gry-l{background:#fafafa}

/* Width & Height */
.w-100{width:100%}
.w-50{width:50%}
.h-100{height:100%}

/* Container */
.container{width:100%;max-width:1200px;margin:0 auto;padding:0 1rem}
.container-narrow{max-width:800px}

/* Position */
.pos-r{position:relative}
.pos-a{position:absolute}
.pos-f{position:fixed}

/* Border Radius */
.br-2{border-radius:0.125rem}
.br-4{border-radius:0.25rem}
.br-8{border-radius:0.5rem}
.br-12{border-radius:0.75rem}
.br-16{border-radius:1rem}
.br-50{border-radius:50%}

/* Shadow */
.sh-1{box-shadow:0 1px 3px rgba(0,0,0,0.1)}
.sh-2{box-shadow:0 4px 6px rgba(0,0,0,0.1)}
.sh-3{box-shadow:0 10px 20px rgba(0,0,0,0.1)}

/* Cursor */
.cp{cursor:pointer}

/* Overflow */
.ov-h{overflow:hidden}

/* Z-index */
.z-1{z-index:1}
.z-10{z-index:10}
.z-100{z-index:100}

/* Transitions */
.tr{transition:all 0.3s ease}

/* Hover Effects */
.h-op:hover{opacity:0.8}
.h-sc:hover{transform:scale(1.02)}

/* Button Base */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:0.75rem 1.5rem;font-weight:600;border-radius:0.5rem;transition:all 0.3s ease;cursor:pointer}
.btn-pri{background:#ff6b35;color:#fff}
.btn-pri:hover{background:#e55a2b}
.btn-sec{background:#4ecdc4;color:#fff}
.btn-sec:hover{background:#3dbdb4}
.btn-outline{border:2px solid #ff6b35;color:#ff6b35;background:transparent}
.btn-outline:hover{background:#ff6b35;color:#fff}

/* Card */
.card{background:#fff;border-radius:0.75rem;overflow:hidden;transition:transform 0.3s ease,box-shadow 0.3s ease}
.card:hover{transform:translateY(-4px);box-shadow:0 10px 30px rgba(0,0,0,0.1)}

/* Image Container */
.img-wrap{position:relative;overflow:hidden;background:#f5f5f5}
.img-wrap img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s ease}
.img-wrap:hover img{transform:scale(1.05)}

/* Grid Layouts */
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}

@media(min-width:768px){
    .g-md-2{grid-template-columns:repeat(2,1fr)}
    .g-md-3{grid-template-columns:repeat(3,1fr)}
    .g-md-4{grid-template-columns:repeat(4,1fr)}
}

/* Header */
.site-header{position:sticky;top:0;z-index:100;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,0.05)}

/* Footer */
.site-footer{background:#1a1a1a;color:#fff;padding:3rem 0}

/* Currency Selector */
.currency-sel{padding:0.5rem 1rem;border:1px solid #ddd;border-radius:0.5rem;background:#fff;cursor:pointer}

/* Product Card */
.p-card{position:relative}
.p-card-img{aspect-ratio:1}
.p-card-info{padding:1rem}
.p-card-name{font-weight:500;margin-bottom:0.5rem;color:#1a1a1a}
.p-card-price{font-weight:700;color:#ff6b35;font-size:1.125rem}

/* Variant Selector */
.v-sel{display:flex;gap:0.5rem;flex-wrap:wrap}
.v-opt{padding:0.5rem 1rem;border:2px solid #ddd;border-radius:0.5rem;cursor:pointer;transition:all 0.2s}
.v-opt:hover{border-color:#ff6b35}
.v-opt.active{border-color:#ff6b35;background:#ff6b35;color:#fff}