/*
Theme Name: Hollow & Hand
Description: Minimal WooCommerce theme for handcrafted toys, paintings and clayworks.
Version: 1.0
Author: You
Text Domain: hollow-hand
Requires at least: 6.0
Requires PHP: 7.4
*/
:root{--bg:#F5F5F2;--surface:#EAEAE5;--ink:#1C1C1A;--muted:#6B6B66;--line:#D6D6CF;--accent:#2E4AA6;--on-accent:#fff;--c1:#C9B8A6;--c2:#E3C65A;--c3:#7E9C8C;--c4:#D9D5CC}
@media (prefers-color-scheme:dark){:root{--bg:#161615;--surface:#222220;--ink:#EDEDE8;--muted:#9A9A93;--line:#383835;--accent:#8EA4F0;--on-accent:#12141f;--c4:#3A3A36}}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.6 "Familjen Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
h1,h2,h3{letter-spacing:-.02em;font-weight:500;line-height:1.15}
h2{font-size:32px;margin:0}

/* header */
.site-header{display:flex;justify-content:space-between;align-items:center;padding:22px 0}
.logo{font-weight:600;font-size:20px;letter-spacing:-.01em}
.site-nav{display:flex;gap:28px;align-items:center}
.site-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:28px}
.site-nav a{color:var(--muted)}.site-nav a:hover{color:var(--ink)}
.cartlink{border:1px solid var(--line);border-radius:999px;padding:6px 16px;color:var(--ink)!important}
.cartlink:hover{border-color:var(--ink)}

/* hero */
.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center;padding:56px 0 88px}
.hero h1{font-size:clamp(40px,6vw,76px);line-height:1.02;letter-spacing:-.03em;margin:0 0 20px}
.hero p{color:var(--muted);max-width:42ch;margin:0 0 32px;font-size:18px}
.hero svg{width:100%;height:auto;display:block}
.btn,.button,button.single_add_to_cart_button,.woocommerce a.button,.woocommerce button.button,.woocommerce #respond input#submit{display:inline-block;background:var(--ink);color:var(--bg);border:0;border-radius:999px;padding:13px 28px;font:500 16px/1.2 inherit;font-family:inherit;cursor:pointer}
.btn:hover,.button:hover,.woocommerce a.button:hover,.woocommerce button.button:hover{background:var(--accent);color:var(--on-accent)}
.woocommerce a.button.alt,.woocommerce button.button.alt{background:var(--ink);color:var(--bg)}
.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover{background:var(--accent);color:var(--on-accent)}

/* shop section */
.bar{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:28px;margin-bottom:32px}
.filters{display:flex;gap:8px;flex-wrap:wrap}
.filters button{font:inherit;border:1px solid var(--line);background:none;color:var(--muted);border-radius:999px;padding:6px 16px;cursor:pointer}
.filters button[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:36px 24px;list-style:none;padding:0;margin:0}
.card[hidden]{display:none}
.card .img{display:block;aspect-ratio:4/5;background:var(--surface);border-radius:4px;overflow:hidden}
.card .img img{width:100%;height:100%;object-fit:cover;display:block}
.card .img.ph{display:grid;place-items:center}.card .img.ph svg{width:55%}
.card h3{font-size:17px;margin:14px 0 0}
.meta{display:flex;justify-content:space-between;color:var(--muted);margin-top:2px}
.card .add_to_cart_button{display:inline-block;color:var(--accent);font-weight:500;padding:4px 0}
.card .add_to_cart_button:hover{text-decoration:underline}
.card .added_to_cart{margin-left:10px;color:var(--muted);font-size:14px}
.card .add_to_cart_button.loading{opacity:.5}

/* story, perks, newsletter, footer */
.story{display:grid;grid-template-columns:1fr 1fr;gap:48px;padding:96px 0;margin-top:88px;border-top:1px solid var(--line)}
.story p{color:var(--muted);font-size:18px;margin:0 0 16px;max-width:46ch}
.perks{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;border-top:1px solid var(--line);padding:32px 0}
.perks b{display:block;font-weight:500}.perks span{color:var(--muted)}
.news{background:var(--surface);padding:64px 0;text-align:center}
.news form{display:flex;gap:8px;justify-content:center;margin-top:20px;flex-wrap:wrap}
.news input[type=email]{padding:12px 18px;border-radius:999px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font:inherit;min-width:260px}
.site-footer{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:32px 0;color:var(--muted);font-size:14px}

/* inner pages + WooCommerce */
.page-content{padding:32px 0 96px}
.page-content>h1,.woocommerce-products-header__title{font-size:40px;margin:0 0 32px}
.woocommerce ul.products{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:36px 24px;list-style:none;padding:0;margin:0}
.woocommerce ul.products::before,.woocommerce ul.products::after{display:none}
.woocommerce ul.products li.product{width:auto!important;margin:0!important;float:none!important}
.woocommerce ul.products li.product img{aspect-ratio:4/5;object-fit:cover;background:var(--surface);border-radius:4px;width:100%}
.woocommerce ul.products li.product .woocommerce-loop-product__title{font-size:17px;font-weight:500;padding:12px 0 0}
.woocommerce .price,.woocommerce div.product p.price{color:var(--muted)}
.woocommerce div.product div.images,.woocommerce div.product div.summary{float:none;width:100%}
.woocommerce div.product{display:grid;grid-template-columns:1fr 1fr;gap:48px}
.woocommerce div.product .woocommerce-tabs,.woocommerce div.product .related{grid-column:1/-1}
.woocommerce div.product .product_title{font-size:36px}
.woocommerce-message,.woocommerce-info{background:var(--surface);color:var(--ink);border-top:2px solid var(--accent)}
.woocommerce input,.woocommerce select,.woocommerce textarea{background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:10px 12px;font:inherit}
.woocommerce table.shop_table{border-color:var(--line);border-radius:6px}
.woocommerce nav.woocommerce-pagination ul{border:0}

@media(max-width:760px){
  .hero,.story,.woocommerce div.product{grid-template-columns:1fr;gap:32px}
  .hero{padding:24px 0 56px}.perks{grid-template-columns:1fr}.story{padding:64px 0}
  .site-nav ul{display:none}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}