/*
Theme Name: Heart & Hand Creations
Template: storefront
Version: 1.0.0
Text Domain: heartandhand
*/

:root {
  --hh-cream: #fffaf6;
  --hh-blush: #f4e6df;
  --hh-terracotta: #a95343;
  --hh-terracotta-dark: #7f3d32;
  --hh-sage: #72806a;
  --hh-ink: #2f2926;
  --hh-muted: #706662;
  --hh-white: #ffffff;
  --hh-shadow: 0 16px 42px rgba(72, 45, 36, 0.11);
}

body {
  background: var(--hh-cream);
  color: var(--hh-ink);
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
}

h1, h2, h3, h4, .site-title {
  color: var(--hh-ink);
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: -0.025em;
}

.site-header {
  background: rgba(255, 250, 246, 0.98);
  border-bottom: 1px solid #eadbd3;
  padding-block: 1.25rem;
}

.site-branding .site-title a,
.main-navigation ul li a,
.site-header-cart .cart-contents {
  color: var(--hh-ink);
}

.site-branding .site-title {
  font-size: clamp(1.55rem, 3vw, 2.2rem);
}

.site-branding .site-description {
  color: var(--hh-muted);
  font-size: 0.9rem;
}

.button,
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.added_to_cart,
.wc-block-components-button {
  background: var(--hh-terracotta) !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: var(--hh-white) !important;
  font-weight: 700 !important;
  padding: 0.85rem 1.4rem !important;
  transition: background 160ms ease, transform 160ms ease;
}

.button:hover,
button:hover,
input[type="submit"]:hover,
.wc-block-components-button:hover {
  background: var(--hh-terracotta-dark) !important;
  transform: translateY(-1px);
}

.hh-hero {
  align-items: center;
  background: linear-gradient(125deg, var(--hh-blush), #fff7f0 60%, #e7ece3);
  border-radius: 0 0 44px 44px;
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1.15fr 0.85fr;
  margin: -4.2rem calc(50% - 50vw) 4rem;
  min-height: 620px;
  overflow: hidden;
  padding: 5.5rem max(5vw, calc((100vw - 1140px) / 2));
}

.hh-eyebrow {
  color: var(--hh-terracotta-dark);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.hh-hero h1 {
  font-size: clamp(3rem, 7vw, 5.7rem);
  line-height: 0.95;
  margin: 0.3rem 0 1.3rem;
  max-width: 760px;
}

.hh-hero p {
  color: var(--hh-muted);
  font-size: clamp(1.05rem, 2vw, 1.28rem);
  line-height: 1.7;
  max-width: 640px;
}

.hh-hero-art {
  align-items: center;
  aspect-ratio: 4 / 5;
  background: linear-gradient(150deg, #d8b7a8, #f1ddd3 48%, #93a18b);
  border-radius: 48% 48% 18% 18%;
  box-shadow: var(--hh-shadow);
  display: flex;
  justify-content: center;
  min-height: 420px;
  position: relative;
}

.hh-hero-art::before {
  color: rgba(255, 255, 255, 0.84);
  content: "♥";
  font-family: Georgia, serif;
  font-size: clamp(8rem, 16vw, 14rem);
  text-shadow: 0 14px 32px rgba(86, 54, 43, 0.14);
}

.hh-section {
  margin: 5rem auto;
  max-width: 1140px;
  padding-inline: 1.25rem;
}

.hh-section-heading {
  margin: 0 auto 2.5rem;
  max-width: 680px;
  text-align: center;
}

.hh-section-heading h2 {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  margin-bottom: 0.75rem;
}

.hh-grid {
  display: grid;
  gap: 1.4rem;
  grid-template-columns: repeat(3, 1fr);
}

.hh-card {
  background: var(--hh-white);
  border: 1px solid #ecded7;
  border-radius: 24px;
  box-shadow: var(--hh-shadow);
  padding: 2rem;
}

.hh-card-icon {
  align-items: center;
  background: var(--hh-blush);
  border-radius: 50%;
  color: var(--hh-terracotta-dark);
  display: flex;
  font-family: Georgia, serif;
  font-size: 1.5rem;
  height: 52px;
  justify-content: center;
  margin-bottom: 1.2rem;
  width: 52px;
}

.hh-story {
  align-items: center;
  background: var(--hh-sage);
  border-radius: 30px;
  color: white;
  display: grid;
  gap: 2rem;
  grid-template-columns: 0.9fr 1.1fr;
  padding: clamp(2rem, 6vw, 5rem);
}

.hh-story h2,
.hh-story p {
  color: white;
}

.hh-story-mark {
  font-family: Georgia, serif;
  font-size: clamp(6rem, 16vw, 12rem);
  line-height: 1;
  opacity: 0.3;
  text-align: center;
}

.hh-personalization {
  background: #fff;
  border: 1px solid #e7d6ce;
  border-radius: 16px;
  margin: 1.5rem 0;
  padding: 1.25rem;
}

.hh-personalization label {
  display: block;
  font-weight: 800;
  margin-bottom: 0.45rem;
}

.hh-personalization input {
  border: 1px solid #cbb8ae;
  border-radius: 10px;
  padding: 0.8rem;
  width: 100%;
}

.hh-personalization small {
  color: var(--hh-muted);
  display: block;
  margin-top: 0.45rem;
}

.site-footer {
  background: var(--hh-ink);
  color: #f8eeea;
}

.site-footer a,
.site-footer h2 {
  color: white;
}

@media (max-width: 780px) {
  .hh-hero,
  .hh-story {
    grid-template-columns: 1fr;
  }

  .hh-hero {
    margin-top: -2rem;
    min-height: auto;
    padding-top: 4rem;
  }

  .hh-hero-art {
    min-height: 300px;
  }

  .hh-grid {
    grid-template-columns: 1fr;
  }
}