/*
Theme Name: Blocksy Child - SEN botanical
Theme URI:
Description: Blocksyの子テーマ(SEN botanical デモEC用)
Author:
Author URI:
Template: blocksy
Version: 1.0.0
Text Domain: blocksy-child
*/

/* =========================================================
   ここから下は SEN botanical デザインCSS
   (このファイル自体が「子テーマのstyle.css」の実体になります)
   注意:親テーマ(Blocksy)の大型アップデートでHTML構造や
        クラス名が変わると、セレクタが効かなくなることがあるため、
        更新後は各セクションを目視確認してください。
   ========================================================= */

:root{
  --olive:#A6A177;
  --olive-dark:#8B8760;
  --ink:#2E2A22;
  --ink-soft:#6B6558;
  --paper:#FFFFFF;
  --paper-alt:#F7F4EC;
  --cream:#F1ECDE;
  --line:#E6E1D3;
  --shadow: 0 20px 60px -25px rgba(46,42,34,.28);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Noto Sans JP',sans-serif;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.serif{ font-family:'Shippori Mincho',serif; letter-spacing:.02em; font-weight:600; }
img{display:block; max-width:100%;}
a{ color:inherit; }
::selection{ background:var(--olive); color:#fff; }
:focus-visible{ outline:2px solid var(--olive); outline-offset:3px; }

.wrap{ max-width:1180px; margin:0 auto; padding:0 32px; }
.section-head{ margin-bottom:44px; }
.section-head h2{ font-size:clamp(24px,3vw,32px); margin:0; }
.section-head.center{ text-align:center; }
.section-head .tag{ font-family:'Cormorant Garamond',serif; font-style:italic; color:var(--olive-dark); font-size:.7em; }
.eyebrow{
  display:flex; align-items:center; gap:12px;
  font-family:'Cormorant Garamond',serif; font-style:italic;
  font-size:14px; letter-spacing:.16em; color:var(--olive-dark);
  margin-bottom:8px;
}
.eyebrow::before{ content:""; width:30px; height:1px; background:var(--olive-dark); display:inline-block; }

.stitch-link{ position:relative; padding-bottom:4px; text-decoration:none; }
.stitch-link::after{
  content:""; position:absolute; left:0; bottom:0; height:1.5px; width:100%;
  background:var(--olive); transform:scaleX(0); transform-origin:left;
  transition:transform .4s cubic-bezier(.2,.8,.2,1);
}
.stitch-link:hover::after, .stitch-link:focus-visible::after{ transform:scaleX(1); }

/* ---------- ボタン ---------- */
.btn{ display:inline-flex; align-items:center; gap:12px; padding:15px 28px; background:var(--olive); color:#fff; font-size:13.5px; letter-spacing:.08em; border-radius:2px; width:fit-content; transition:background .3s ease, transform .15s ease; text-decoration:none; }
.btn:hover{ background:var(--olive-dark); }
.btn svg{ width:14px; height:14px; stroke:#fff; fill:none; stroke-width:2; transition:transform .3s ease; }
.btn:hover svg{ transform:translateX(4px); }
.btn.outline{ background:transparent; color:var(--ink); border:1px solid var(--ink); }
.btn.outline:hover{ background:var(--ink); color:#fff; }
.btn.outline svg{ stroke:var(--ink); }
.btn.outline:hover svg{ stroke:#fff; }
.btn.outline.light{ color:#fff; border-color:rgba(255,255,255,.75); }
.btn.outline.light svg{ stroke:#fff; }
.btn.outline.light:hover{ background:#fff; color:var(--ink); }
.btn.outline.light:hover svg{ stroke:var(--ink); }

/* ---------- お知らせバー ---------- */
.announce-bar{
  background:var(--cream); color:var(--ink-soft);
  text-align:center; font-size:12.5px; letter-spacing:.03em;
  padding:9px 12px;
}

/* ---------- ヘッダー ---------- */
header.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.95); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding:14px 32px; max-width:1180px; margin:0 auto; gap:20px; }
.logo img{ height:34px; width:auto; }

nav.main-nav ul{ display:flex; gap:32px; list-style:none; margin:0; padding:0; }
nav.main-nav a{ font-size:14px; letter-spacing:.02em; color:inherit; text-decoration:none; white-space:nowrap; }

.header-icons{ display:flex; align-items:center; gap:20px; }
.icon-btn{ position:relative; display:flex; flex-direction:column; align-items:center; gap:2px; width:auto; background:none; border:none; color:var(--ink); text-decoration:none; cursor:pointer; padding:0; }
.icon-btn svg{ width:21px; height:21px; transition:color .3s ease, transform .3s ease; }
.icon-btn .icon-label{ font-size:10px; color:var(--ink-soft); letter-spacing:.02em; }
.icon-btn:hover svg{ color:var(--olive-dark); transform:translateY(-2px); }

/* WooCommerce Miniカートブロックの見た目調整(標準クラスに合わせる) */
.header-icons .wc-block-mini-cart__button,
.header-icons .wp-block-woocommerce-mini-cart{ color:var(--ink); }
.header-icons .wc-block-mini-cart__badge{ background:var(--olive) !important; color:#fff !important; }
.wc-block-mini-cart__drawer .wc-block-mini-cart__quantity-badge{ background:var(--olive) !important; }
.wc-block-components-button.wp-element-button{ background:var(--olive) !important; border-color:var(--olive) !important; }
.wc-block-components-button.wp-element-button:hover{ background:var(--olive-dark) !important; }

.burger{ display:none; width:26px; height:20px; position:relative; background:none; border:none; cursor:pointer; z-index:210; }
.burger span{ position:absolute; left:0; width:100%; height:2px; background:var(--ink); transition:transform .3s ease, opacity .3s ease; }
.burger span:nth-child(1){top:0;} .burger span:nth-child(2){top:9px;} .burger span:nth-child(3){top:18px;}
.burger.is-active span:nth-child(1){ transform:translateY(9px) rotate(45deg); }
.burger.is-active span:nth-child(2){ opacity:0; }
.burger.is-active span:nth-child(3){ transform:translateY(-9px) rotate(-45deg); }

.nav-backdrop{
  position:fixed; inset:0; background:rgba(30,26,20,.4);
  opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease;
  z-index:90;
}
.nav-backdrop.show{ opacity:1; visibility:visible; }

/* 検索オーバーレイ */
.search-overlay{
  position:absolute; top:100%; left:0; right:0;
  background:var(--paper); border-bottom:1px solid var(--line);
  max-height:0; overflow:hidden; transition:max-height .3s ease;
}
.search-overlay.open{ max-height:90px; }
.search-form{ max-width:1180px; margin:0 auto; padding:18px 32px; display:flex; gap:12px; }
.search-form input{ flex:1; border:1px solid var(--line); border-radius:2px; padding:12px 16px; font-size:14px; font-family:inherit; }
.search-form input:focus{ outline:none; border-color:var(--olive); }
.search-form button{ background:var(--olive); border:none; color:#fff; width:44px; border-radius:2px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.search-form button svg{ width:18px; height:18px; }

/* ---------- ヒーロー ----------
   画像は右端まで全幅(画面いっぱい)に広げ、テキスト側だけ他セクションと
   揃う内側の余白(.wrapと同じ考え方)を保つレイアウト。
   .hero-innerは.wrapを使わず、画面幅いっぱいのグリッドにしている点に注意。 */
.hero{ background:var(--paper-alt); overflow:hidden; }
.hero-inner{
  max-width:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns: minmax(320px, 560px) 1fr;
  align-items:center;
  gap:40px;
  min-height:560px;
}
.hero-text{
  /* 1180px基準の内側余白と揺れが出ないよう、画面幅から逆算してpaddingを付ける */
  padding:48px 40px 48px max(32px, calc((100vw - 1180px) / 2 + 32px));
}
.hero-text h1{ font-size:clamp(30px,4.4vw,44px); line-height:1.5; margin:0 0 22px; }
.hero-text p{ font-size:14.5px; line-height:1.9; color:var(--ink-soft); margin:0 0 28px; }
.hero-image{ align-self:stretch; height:100%; min-height:560px; }
.hero-image img{ width:100%; height:100%; object-fit:cover; border-radius:0; display:block; }

/* ---------- 人気のアイテム(スライダー) ---------- */
.popular-items{ padding:88px 0; }
.popular-slider-wrap{ position:relative; display:flex; align-items:center; gap:12px; }
.popular-slider{ flex:1; overflow:hidden; }

/* WooCommerce公式ブロックの出力(ul.products もしくは 商品コレクションブロックの出力)を
   横スクロールのスライダーに変換する。テーマ更新等でクラス名が変わった場合は
   検証ツールで実際のクラス名を確認して調整してください。 */
.popular-slider-track{
  display:flex !important;
  gap:24px !important;
  overflow-x:auto;
  scroll-behavior:smooth;
  scroll-snap-type:x mandatory;
  padding:2px 2px 10px;
  list-style:none;
  -ms-overflow-style:none;
  scrollbar-width:none;
}
.popular-slider-track::-webkit-scrollbar{ display:none; }
.popular-slider-track > li,
.popular-slider-track > .wc-block-product-template__responsive-slide,
.popular-slider-track .product{
  flex:0 0 260px !important;
  scroll-snap-align:start;
}
.popular-slider-track img{ aspect-ratio:1/1; object-fit:cover; }
.popular-slider-track .add_to_cart_button,
.popular-slider-track .wc-block-components-product-button__button{
  background:var(--olive) !important; border-color:var(--olive) !important; color:#fff !important;
}
.popular-slider-track .price,
.popular-slider-track .wc-block-components-product-price{ color:var(--olive-dark) !important; }

.slider-arrow{
  width:42px; height:42px; border-radius:50%; border:1px solid var(--line);
  background:#fff; display:flex; align-items:center; justify-content:center;
  color:var(--ink); cursor:pointer; flex:0 0 auto; transition:border-color .3s ease, color .3s ease;
}
.slider-arrow:hover{ border-color:var(--olive); color:var(--olive-dark); }
.slider-arrow svg{ width:16px; height:16px; }

/* ---------- 肌悩みから選ぶ ---------- */
.concern{ background:var(--paper-alt); padding:88px 0; }
.concern-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:18px; }
.concern-card{
  background:#fff; border:1px solid var(--line); border-radius:4px;
  padding:30px 18px; text-align:center; text-decoration:none; color:var(--ink);
  transition:border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.concern-card:hover{ border-color:var(--olive); transform:translateY(-4px); box-shadow:var(--shadow); }
.concern-card img{ width:40px; height:40px; margin:0 auto 16px; }
.concern-card .name{ font-size:14.5px; font-weight:600; margin-bottom:8px; }
.concern-card p{ font-size:12px; line-height:1.7; color:var(--ink-soft); margin:0; }

/* ---------- 商品一覧 ---------- */
.product-list{ padding:88px 0; }
.product-grid-outer{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:26px;
}
/* WooCommerce公式ブロックの出力コンテナ(ul.products もしくは商品コレクションブロックのラッパー)を
   グリッドの箱としてではなく「透明化」し、中の商品カードをこの親グリッドの直接の子として
   扱わせるためのテクニック。これにより⑧で追加する「すべての商品を見る」カードが
   9番目のグリッドセルとして自然に並ぶ。 */
.product-grid-outer > ul.products,
.product-grid-outer > .wc-block-product-template,
.product-grid-outer > .wp-block-woocommerce-product-collection{
  display:contents;
}
.product-grid-outer .product,
.product-grid-outer li.product{
  list-style:none;
}
.product-grid-outer .add_to_cart_button,
.product-grid-outer .wc-block-components-product-button__button{
  background:var(--olive) !important; border-color:var(--olive) !important; color:#fff !important; width:100%;
}
.product-grid-outer .price,
.product-grid-outer .wc-block-components-product-price{ color:var(--olive-dark) !important; }

.view-all-card{
  background:var(--paper-alt); border:1px dashed var(--line); border-radius:4px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  min-height:220px; text-decoration:none; color:var(--ink);
  transition:border-color .3s ease, background .3s ease;
}
.view-all-card:hover{ border-color:var(--olive); background:#fff; }
.view-all-card svg{ width:30px; height:30px; stroke:var(--ink-soft); }
.view-all-card span{ font-size:13.5px; }
.view-all-card .arrow{ color:var(--olive-dark); transition:transform .3s ease; }
.view-all-card:hover .arrow{ transform:translateX(4px); }

/* ---------- 原料・製法へのこだわり ---------- */
.ingredients{ padding:88px 0; }
.ingredients-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.ingredient-card img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:2px; margin-bottom:22px; }
.ingredient-card h3{ font-size:16px; margin:0 0 10px; }
.ingredient-card p{ font-size:13px; line-height:1.9; color:var(--ink-soft); margin:0; }
.ingredients .section-head{ text-align:center; }

/* ---------- ギフトにもおすすめ ---------- */
.gift{ background:var(--paper-alt); padding:88px 0; }
.gift-inner{ display:grid; grid-template-columns:1fr 1.3fr; gap:48px; align-items:center; }
.gift-text h2{ font-size:clamp(24px,3vw,32px); margin:0 0 18px; }
.gift-text p{ font-size:14px; line-height:1.9; color:var(--ink-soft); margin:0 0 26px; }
.gift-image img{ border-radius:2px; }

/* ---------- ブランドについて ---------- */
.brand{ position:relative; padding:120px 0; overflow:hidden; }
.brand-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.brand-overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(30,26,20,.15), rgba(30,26,20,.55)); }
.brand-content{ position:relative; z-index:2; text-align:center; color:#fff; max-width:720px; margin:0 auto; }
.brand-content h2{ font-size:clamp(26px,3.4vw,36px); margin:0 0 20px; }
.brand-content p{ font-size:14.5px; line-height:2; margin:0 0 30px; color:#f4f1e8; }
.brand-content .btn{ margin:0 auto; }

/* ---------- Instagram ---------- */
.instagram{ padding:88px 0; }
.insta-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; margin-bottom:36px; }
.insta-grid a{ display:block; aspect-ratio:1/1; overflow:hidden; border-radius:2px; }
.insta-grid img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.insta-grid a:hover img{ transform:scale(1.06); }
.insta-more{ text-align:center; }
.insta-more .btn{ margin:0 auto; }

/* ---------- フッター ---------- */
footer.site-footer{ background:var(--paper-alt); color:var(--ink); border-top:1px solid var(--line); }

.feature-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; padding:44px 32px; border-bottom:1px solid var(--line); }
.feature-item{ display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; }
.feature-item img{ width:30px; height:30px; }
.feature-item span{ font-size:12px; color:var(--ink-soft); line-height:1.6; }

.footer-cols{ display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr 1.3fr; gap:36px; padding:56px 32px; }
.footer-brand .footer-logo{ height:30px; margin-bottom:16px; }
.footer-brand p{ font-size:12.5px; line-height:1.9; color:var(--ink-soft); margin:0 0 18px; }
.sns-row{ display:flex; gap:14px; }
.sns-row a{ color:var(--ink); }
.sns-row svg{ width:20px; height:20px; }
.sns-row a:hover{ color:var(--olive-dark); }

.footer-menu h4, .footer-newsletter h4{
  font-family:'Cormorant Garamond',serif; font-style:italic; font-size:14px;
  letter-spacing:.1em; color:var(--olive-dark); margin:0 0 18px; font-weight:500;
}
.footer-menu ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.footer-menu a{ font-size:13px; color:var(--ink-soft); text-decoration:none; }
.footer-menu a:hover{ color:var(--ink); }

.footer-newsletter p{ font-size:12.5px; color:var(--ink-soft); margin:0 0 16px; }
.newsletter-form{ display:flex; flex-direction:column; gap:10px; }
.newsletter-form input{ border:1px solid var(--line); border-radius:2px; padding:11px 14px; font-size:13px; font-family:inherit; }
.newsletter-form input:focus{ outline:none; border-color:var(--olive); }
.newsletter-form button{ background:var(--olive); color:#fff; border:none; border-radius:2px; padding:11px 14px; font-size:13px; letter-spacing:.06em; cursor:pointer; transition:background .3s ease; }
.newsletter-form button:hover{ background:var(--olive-dark); }

.footer-bottom{ border-top:1px solid var(--line); padding:20px 32px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; font-size:11.5px; color:var(--ink-soft); }
.legal-links{ display:flex; gap:18px; flex-wrap:wrap; }
.legal-links a{ color:var(--ink-soft); text-decoration:none; }
.legal-links a:hover{ color:var(--ink); text-decoration:underline; }

/* =========================================================
   レスポンシブ
   ========================================================= */
@media (max-width:960px){
  .burger{ display:block; }
  nav.main-nav{
    position:fixed; top:0; right:-100%; width:82%; max-width:320px; height:100vh;
    background:var(--paper); box-shadow:var(--shadow); padding:96px 28px 40px;
    overflow-y:auto; transition:right .35s ease; z-index:200;
  }
  nav.main-nav.nav-open{ right:0; }
  nav.main-nav ul{ flex-direction:column; gap:0; }
  nav.main-nav li{ border-bottom:1px solid var(--line); }
  nav.main-nav a{ display:block; padding:16px 2px; font-size:16px; }

  .hero-inner{ grid-template-columns:1fr; min-height:0; }
  .hero-text{ padding:36px 24px; }
  .hero-image{ order:-1; min-height:320px; height:320px; }

  .concern-grid{ grid-template-columns:repeat(2,1fr); }
  .product-grid-outer{ grid-template-columns:repeat(2,1fr); }
  .ingredients-grid{ grid-template-columns:1fr; gap:36px; }
  .gift-inner{ grid-template-columns:1fr; }
  .gift-image{ order:-1; }
  .insta-grid{ grid-template-columns:repeat(2,1fr); }

  .footer-cols{ grid-template-columns:1fr 1fr; }
  .feature-row{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:600px){
  .wrap{ padding:0 20px; }
  nav.main-nav{ display:none; }
  nav.main-nav.nav-open{ display:block; }
  .popular-slider-track > li,
  .popular-slider-track .product{ flex:0 0 200px !important; }
  .insta-grid{ grid-template-columns:repeat(2,1fr); }
  .footer-cols{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce){
  *{ transition-duration:.01ms !important; }
}