/*
Theme Name: Hand-geschrieben Kalender
Theme URI: https://hand-geschrieben.de
Author: Christoph Baer
Description: Eigenes WooCommerce-Theme fuer individuelle und fiktive Kalender. Warmer, handschriftlicher Look fuer einen Onlineshop.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: handgeschrieben
*/

:root{
--ink:#2b2420;
--paper:#faf6ee;
--paper-alt:#f1e9d8;
--accent:#b5502f;
--accent-dark:#8a3a20;
--line:#e2d6bd;
--muted:#6b5f4f;
}

*,*::before,*::after{box-sizing:border-box;}

body{
margin:0;
background:var(--paper);
color:var(--ink);
font-family:"Work Sans", Arial, sans-serif;
font-size:17px;
line-height:1.6;
}

h1,h2,h3,h4, .site-title, .hero h1{
font-family:"Caveat", "Segoe Script", cursive;
font-weight:700;
color:var(--ink);
line-height:1.15;
margin:0 0 .4em;
}

h1{font-size:3rem;}
h2{font-size:2.3rem;}
h3{font-size:1.7rem;}

a{color:var(--accent);text-decoration:none;}
a:hover{color:var(--accent-dark);text-decoration:underline;}

img{max-width:100%;height:auto;display:block;}

.container{
max-width:1140px;
margin:0 auto;
padding:0 24px;
}

/* Header */
.site-header{
background:var(--paper);
border-bottom:2px solid var(--line);
position:sticky;
top:0;
z-index:50;
}
.site-header-inner{
display:flex;
align-items:center;
justify-content:space-between;
padding:18px 24px;
max-width:1140px;
margin:0 auto;
}
.site-branding{display:flex;align-items:center;gap:12px;}
.site-branding img{max-height:52px;width:auto;}
.site-title{font-size:2rem;margin:0;}
.site-title a{color:var(--ink);}
.site-description{
font-family:"Work Sans", Arial, sans-serif;
font-size:.85rem;
color:var(--muted);
margin:0;
}

.main-navigation ul{
list-style:none;
display:flex;
gap:28px;
margin:0;
padding:0;
}
.main-navigation a{
color:var(--ink);
font-weight:600;
letter-spacing:.02em;
}
.main-navigation a:hover{color:var(--accent);text-decoration:none;}

.header-cart a{
display:inline-flex;
align-items:center;
gap:8px;
background:var(--accent);
color:#fff;
padding:9px 16px;
border-radius:30px;
font-weight:600;
font-size:.9rem;
}
.header-cart a:hover{background:var(--accent-dark);color:#fff;text-decoration:none;}

.menu-toggle{display:none;}

/* Hero */
.hero{
padding:70px 24px;
text-align:center;
background:
radial-gradient(circle at 20% 20%, var(--paper-alt) 0, transparent 45%),
var(--paper);
border-bottom:2px dashed var(--line);
}
.hero h1{font-size:3.4rem;margin-bottom:.2em;}
.hero p{
max-width:560px;
margin:0 auto 28px;
color:var(--muted);
font-size:1.15rem;
}
.btn{
display:inline-block;
background:var(--accent);
color:#fff;
padding:14px 32px;
border-radius:30px;
font-weight:700;
font-size:1.05rem;
border:none;
cursor:pointer;
}
.btn:hover{background:var(--accent-dark);color:#fff;text-decoration:none;}
.btn-outline{
background:transparent;
border:2px solid var(--accent);
color:var(--accent);
}
.btn-outline:hover{background:var(--accent);color:#fff;}

/* Feature strip */
.feature-strip{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:24px;
padding:50px 24px;
max-width:1140px;
margin:0 auto;
}
.feature-strip div{
text-align:center;
padding:20px;
}
.feature-strip .icon{font-size:2.2rem;display:block;margin-bottom:10px;}
.feature-strip h3{font-size:1.2rem;margin-bottom:6px;}
.feature-strip p{color:var(--muted);margin:0;font-size:.95rem;}

/* Section titles */
.section-title{
text-align:center;
margin:10px auto 40px;
}
.section-title h2{margin-bottom:8px;}
.section-title p{color:var(--muted);margin:0;}

/* Product grid (WooCommerce) */
.shop-section{padding:20px 24px 70px;}

ul.products{
display:grid !important;
grid-template-columns:repeat(4,1fr);
gap:28px;
list-style:none;
margin:0 auto;
padding:0;
max-width:1140px;
}
ul.products li.product{
background:#fff;
border:1px solid var(--line);
border-radius:14px;
padding:16px;
text-align:center;
transition:transform .15s ease, box-shadow .15s ease;
}
ul.products li.product:hover{
transform:translateY(-4px);
box-shadow:0 10px 24px rgba(43,36,32,.08);
}
ul.products li.product img{
border-radius:10px;
margin-bottom:12px;
aspect-ratio:1/1;
object-fit:cover;
}
ul.products li.product .woocommerce-loop-product__title{
font-family:"Caveat", cursive;
font-size:1.4rem;
margin:6px 0 4px;
}
ul.products li.product .price{
color:var(--accent-dark);
font-weight:700;
}
ul.products li.product .button{
display:inline-block;
margin-top:12px;
background:var(--ink);
color:#fff;
padding:9px 20px;
border-radius:24px;
font-size:.85rem;
font-weight:600;
}
ul.products li.product .button:hover{background:var(--accent);color:#fff;text-decoration:none;}

.woocommerce-page .content-wrapper,
.content-wrapper{
max-width:1140px;
margin:0 auto;
padding:50px 24px;
}

.woocommerce nav.woocommerce-pagination ul{border-color:var(--line);}
.woocommerce span.onsale{
background:var(--accent);
border-radius:30px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li{border-color:var(--line);}
.woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button{
background:var(--accent);
color:#fff;
border-radius:24px;
font-weight:600;
}
.woocommerce #respond input#submit:hover, .woocommerce a.button:hover, .woocommerce button.button:hover{
background:var(--accent-dark);
color:#fff;
}

/* Footer */
.site-footer{
background:var(--ink);
color:var(--paper);
padding:50px 24px 20px;
margin-top:60px;
}
.footer-grid{
display:grid;
grid-template-columns:2fr 1fr 1fr;
gap:32px;
max-width:1140px;
margin:0 auto 30px;
}
.site-footer h2, .site-footer h3{color:var(--paper);}
.site-footer a{color:#e8dcc4;}
.site-footer .widget ul{list-style:none;padding:0;margin:0;}
.site-footer .widget li{margin-bottom:8px;}
.footer-bottom{
border-top:1px solid rgba(255,255,255,.15);
max-width:1140px;
margin:0 auto;
padding-top:18px;
font-size:.85rem;
color:#bdb097;
text-align:center;
}

/* Basic blog/page content */
.entry-content{max-width:760px;margin:0 auto;padding:50px 24px;}

@media (max-width:900px){
.main-navigation{display:none;}
.feature-strip{grid-template-columns:1fr;}
ul.products{grid-template-columns:repeat(2,1fr);}
.footer-grid{grid-template-columns:1fr;}
.hero h1{font-size:2.4rem;}
}