/*
Theme Name: JPBracelet
Theme URI: https://jpbracelet.example
Author: JPBracelet
Description: A quiet, editorial WooCommerce theme for Japanese natural-stone bracelets.
Version: 0.1.0
Text Domain: jpbracelet
*/

:root {
  --ink: #171714;
  --muted: #716e67;
  --paper: #f7f5f0;
  --stone: #ebe8e1;
  --line: rgba(23, 23, 20, .14);
  --white: #fff;
  --max: 1440px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--white);
  font-family: "Helvetica Neue", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-size: 14px;
  font-weight: 300;
  letter-spacing: .04em;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, select { font: inherit; }

.site-header {
  position: relative;
  z-index: 20;
  height: 88px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 clamp(24px, 4vw, 72px);
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.97);
}
.brand {
  grid-column: 2;
  font-family: Georgia, "Yu Mincho", serif;
  font-size: 22px;
  letter-spacing: .18em;
}
.primary-nav { justify-self: start; display: flex; gap: 30px; }
.primary-nav a, .header-tools a {
  font-size: 11px;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.header-tools { justify-self: end; display: flex; gap: 22px; align-items: center; }
.language-switcher { display: flex; gap: 7px; align-items: center; color: #aaa69e; font-size: 10px; white-space: nowrap; }
.language-switcher a { color: #aaa69e; }
.language-switcher a.active { color: var(--ink); }
.cart-count {
  display: inline-grid;
  place-items: center;
  width: 17px;
  height: 17px;
  margin-left: 4px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  font-size: 9px;
}
.menu-toggle { display: none; border: 0; background: none; padding: 0; }

.hero {
  min-height: min(76vh, 780px);
  display: grid;
  align-items: center;
  background-size: cover;
  background-position: center;
}
.hero-inner { width: min(520px, 84vw); margin-left: clamp(28px, 8vw, 140px); }
.eyebrow {
  margin: 0 0 20px;
  font-size: 10px;
  letter-spacing: .24em;
  text-transform: uppercase;
}
.hero h1 {
  margin: 0 0 24px;
  font-family: Georgia, "Yu Mincho", serif;
  font-size: clamp(38px, 5vw, 72px);
  font-weight: 400;
  line-height: 1.17;
  letter-spacing: .05em;
}
.hero p { max-width: 390px; margin: 0 0 34px; color: #4f4c46; line-height: 2; }
.text-link {
  display: inline-block;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--ink);
  font-size: 11px;
  letter-spacing: .16em;
}

.section { padding: clamp(72px, 9vw, 138px) clamp(20px, 7.5vw, 120px); }
.section-head {
  max-width: var(--max);
  margin: 0 auto 48px;
  display: flex;
  justify-content: space-between;
  align-items: end;
}
.section-title {
  margin: 0;
  font-family: Georgia, "Yu Mincho", serif;
  font-size: clamp(30px, 3.5vw, 48px);
  font-weight: 400;
  letter-spacing: .06em;
}
.products-grid,
.woocommerce ul.products {
  max-width: var(--max);
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 50px 20px;
}
.product-card,
.woocommerce ul.products li.product {
  width: auto !important;
  margin: 0 !important;
  float: none !important;
}
.product-image,
.woocommerce ul.products li.product a img {
  width: 100%;
  aspect-ratio: 1 / 1;
  margin: 0 0 20px !important;
  object-fit: cover;
  background: var(--paper);
  transition: opacity .35s ease, transform .6s ease;
}
.product-card:hover .product-image,
.woocommerce ul.products li.product:hover a img { transform: scale(.985); opacity: .9; }
.product-name,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  margin: 0 0 9px !important;
  padding: 0 !important;
  font-family: Georgia, "Yu Mincho", serif;
  font-size: 15px !important;
  font-weight: 400;
  letter-spacing: .05em;
}
.product-meta { margin: 0 0 8px; color: var(--muted); font-size: 11px; }
.product-price,
.woocommerce ul.products li.product .price {
  color: var(--ink) !important;
  font-size: 12px !important;
}
.woocommerce ul.products li.product .button { display: none; }

.story {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  min-height: 620px;
  background: var(--paper);
}
.story-visual {
  background: linear-gradient(145deg, #ded9d0, #f3f0e9 48%, #c7c0b4);
  position: relative;
  overflow: hidden;
}
.story-visual::before {
  content: "";
  position: absolute;
  inset: 15% 18%;
  border: 1px solid rgba(23,23,20,.16);
  border-radius: 50%;
}
.story-copy { display: grid; align-content: center; padding: clamp(50px, 8vw, 130px); }
.story-copy h2 {
  margin: 0 0 28px;
  font-family: Georgia, "Yu Mincho", serif;
  font-size: clamp(30px, 3.5vw, 52px);
  font-weight: 400;
  line-height: 1.35;
}
.story-copy p { margin: 0 0 32px; color: var(--muted); line-height: 2.1; }

.service-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.service-item { padding: 42px 7vw; border-right: 1px solid var(--line); }
.service-item:last-child { border-right: 0; }
.service-item strong {
  display: block;
  margin-bottom: 10px;
  font-family: Georgia, "Yu Mincho", serif;
  font-size: 16px;
  font-weight: 400;
}
.service-item span { color: var(--muted); font-size: 11px; line-height: 1.8; }

.site-footer {
  padding: 70px clamp(24px, 7.5vw, 120px) 34px;
  background: #191917;
  color: #eeeae2;
}
.footer-inner {
  max-width: var(--max);
  margin: auto;
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  gap: 40px;
}
.footer-brand { font-family: Georgia, serif; font-size: 22px; letter-spacing: .18em; }
.footer-col strong { display: block; margin-bottom: 18px; font-size: 11px; font-weight: 400; }
.footer-col a { display: block; margin: 11px 0; color: #aaa79f; font-size: 11px; }
.copyright { max-width: var(--max); margin: 70px auto 0; color: #77746e; font-size: 10px; }

.shop-hero {
  min-height: 440px;
  display: grid;
  place-items: end start;
  padding: 70px clamp(24px, 8.5vw, 140px);
  background: var(--paper);
}
.shop-hero h1 { margin: 0; font-family: Georgia, "Yu Mincho", serif; font-size: 54px; font-weight: 400; }
.site-main { min-height: 60vh; }
.content-wrap { max-width: var(--max); margin: auto; padding: 80px clamp(20px, 7.5vw, 120px); }
.woocommerce .woocommerce-result-count { color: var(--muted); font-size: 11px; }
.woocommerce .woocommerce-ordering select { border: 0; border-bottom: 1px solid var(--line); background: transparent; padding: 8px 20px 8px 0; }
.woocommerce div.product { max-width: var(--max); margin: 0 auto; padding: 80px clamp(20px, 7.5vw, 120px); }
.woocommerce div.product .product_title { font-family: Georgia, "Yu Mincho", serif; font-weight: 400; }
.woocommerce div.product p.price { color: var(--ink); }
.single_add_to_cart_button, .woocommerce #respond input#submit {
  border-radius: 0 !important;
  background: var(--ink) !important;
  padding: 16px 30px !important;
  font-weight: 400 !important;
}

@media (max-width: 880px) {
  .site-header { height: 72px; grid-template-columns: 1fr auto 1fr; }
  .primary-nav { display: none; }
  .menu-toggle { display: block; justify-self: start; }
  .header-tools .contact-link { display: none; }
  .header-tools .cart-link { display: none; }
  .language-switcher { position: absolute; top: 25px; right: 13px; width: auto; gap: 5px; font-size: 8px; }
  .hero { min-height: 680px; background-position: 62% center; align-items: end; }
  .hero-inner { margin: 0 26px 58px; padding: 24px; background: rgba(247,245,240,.86); backdrop-filter: blur(6px); }
  .products-grid, .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 10px; }
  .story { grid-template-columns: 1fr; min-height: auto; }
  .story-visual { min-height: 420px; }
  .service-strip { grid-template-columns: 1fr; }
  .service-item { border-right: 0; border-bottom: 1px solid var(--line); }
  .footer-inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 520px) {
  .brand { font-size: 18px; }
  .section { padding-left: 14px; padding-right: 14px; }
  .section-head { align-items: start; gap: 18px; }
  .section-title { font-size: 30px; }
  .product-name { font-size: 13px; }
  .footer-inner { grid-template-columns: 1fr; }
}