/* =========================================================
   kellyltd.jp テーマ固有の補正
   Shopify(Dawn) の base.css / add-style.css を WordPress 上で
   再現するためのブリッジCSS。デザイントークンは functions.php の
   :root 変数（--kelly-*）と合わせる。
   ========================================================= */

/* 補助トークン（独自グリッド等で使用。Dawnの --color-base-* とは別系統） */
:root {
  --kelly-color-bg: #ffffff;
  --kelly-color-text: #000000;
  --kelly-color-accent: #01689f;
  --kelly-color-bg2: #ebeced;
  --kelly-color-soft: #fcfcfc;
}

/* ※ フォント / 配色 / .page-width / body・見出しの基本は
   root-variables.css + base.css（Shopify由来）が担当する。ここでは上書きしない。 */

/* ---- ヘッダー（中央ナビ。add-style.css の補完） ---- */
.header__inline-menu .list-menu--inline {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.header__menu-item,
.header__inline-menu a {
  text-decoration: none;
  color: rgb(var(--color-foreground));
  letter-spacing: 0.1em;
  font-size: 1.4rem;
  font-family: 'Noto Serif JP', serif !important;
}
/* 非アクティブのメニューは本文ウェイト（細め）。アクティブ(.header__active-menu-item)はDawnの装飾を維持 */
.header__menu-item span:not(.header__active-menu-item) {
  font-weight: var(--font-body-weight);
}
.header__icons a { text-decoration: none; color: rgb(var(--color-foreground)); }
/* 言語切替（Shopify localization-form をネイティブ select に置換。JS不要で確実に開閉） */
.header__localization.kelly-lang { display: flex; align-items: center; }
.kelly-lang-select {
  font-family: 'Noto Serif JP', serif;
  font-size: 1.3rem;
  color: rgb(var(--color-foreground));
  background: transparent;
  border: 1px solid rgba(var(--color-foreground), 0.15);
  border-radius: 4px;
  padding: 0.5rem 0.8rem;
  cursor: pointer;
  line-height: 1.2;
}
.kelly-lang-select:focus { outline: none; border-color: rgba(var(--color-foreground), 0.4); }

/* ---- 作品一覧(collection)ページのセクション余白（本番値を再現） ----
   本番: 見出しrich-text padding 30/39(SP)・40/52(PC)、
         グリッドセクション padding-top 27/36・padding-bottom 45/60。
         これによりページネーション〜フッター間に下部60pxの余白ができる。 */
.kelly-collection-title-padding {
  padding-top: 30px;
  padding-bottom: 39px;
}
.kelly-collection-grid-padding {
  padding-top: 27px;
  padding-bottom: 45px;
}
@media screen and (min-width: 750px) {
  .kelly-collection-title-padding {
    padding-top: 40px;
    padding-bottom: 52px;
  }
  .kelly-collection-grid-padding {
    padding-top: 36px;
    padding-bottom: 60px;
  }
}

/* ---- 作品グリッド(featured-collection)のセクション余白（本番値を再現） ----
   本番: PC padding-top:12px / padding-bottom:100px、SP 9px / 75px。
   動的化で欠落していたためボタン〜フッターが詰まっていた。 */
.section-featured-collection-padding {
  padding-top: 9px;
  padding-bottom: 75px;
}
@media screen and (min-width: 750px) {
  .section-featured-collection-padding {
    padding-top: 12px;
    padding-bottom: 100px;
  }
}

/* ---- ヒーロー スライド 全幅化 ----
   本番は slideshow.js が各スライド幅を 100% に設定するが、そのJSは
   Shopifyエクスポートに含まれない。JS非依存で単一スライドを全幅表示する。
   高さは Dawn のアスペクト比ボックス(.media::before)に任せ、幅のみ100%にする。 */
slideshow-component .slideshow.banner {
  width: 100%;
}
slideshow-component .slideshow__slide {
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
}
/* JS無しでは横スクロールしないよう固定 */
slideshow-component .slider--everywhere { overflow: hidden; }

/* ---- デスクトップのヘッダーナビは折り返さない ---- */
@media screen and (min-width: 990px) {
  .header__inline-menu .list-menu--inline {
    flex-wrap: nowrap;
    white-space: nowrap;
  }
}

/* ---- セクション見出し（〜Profile〜 等） ---- */
.rich-text { text-align: center; }
.rich-text__heading { margin: 0; }

/* ---- 作品一覧（Shopify featured-collection / collection grid 相当） ---- */
.artwork-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem 1rem;
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
}
@media screen and (min-width: 750px) {
  .artwork-grid { grid-template-columns: repeat(4, 1fr); gap: 3rem 2rem; }
}
.artwork-card { text-align: center; }
.artwork-card a { text-decoration: none; color: #000; display: block; }
.artwork-card__media {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--kelly-color-soft);
}
.artwork-card__media img { max-width: 100%; max-height: 100%; object-fit: contain; }
.artwork-card__title { font-size: 1.3rem; margin: 0.8rem 0 0; line-height: 1.6; }

/* ---- お知らせ / 受賞 / メディア リスト（blog-list--custom 相当） ---- */
.blog-list-wrapper { background-color: #fff; }
.blog-articles-wrap { max-width: 400px; margin: 0 auto; padding: 0 20px; }
.article-blocks { padding: 0; margin: 0; }
li.article-block {
  font-size: 1.12rem;
  line-height: 3em;
  font-weight: 300;
  list-style: none;
}
li.article-block a { text-decoration: none; color: #000; }
li.article-block a img { vertical-align: middle; }

/* ---- News 記事リスト(blog-list--custom)の余白（本番値） ---- */
.kelly-newslist {
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 40px;
  margin-bottom: 40px;
}
@media screen and (min-width: 750px) {
  .kelly-newslist {
    padding-bottom: 50px;
    margin-bottom: 50px;
  }
}

/* ---- Award/Media ページの blog-list セクション余白（本番値） ---- */
.kelly-award-padding { margin-top: 0; padding-top: 0; padding-bottom: 40px; margin-bottom: 0; }
.kelly-media-padding { margin-top: 0; padding-top: 0; padding-bottom: 40px; margin-bottom: 50px; }
/* blog-list--custom の見出しは中央寄せ（元 blog-list--custom.liquid のインラインCSS相当） */
.title-wrapper-heading.custom-title-wrapper { text-align: center; }
.title-wrapper-heading.custom-title-wrapper h2 { margin: 2rem 0 1rem 0; }

/* ---- 固定ページ(main-page)の余白（本番: 21px / 28px） ---- */
.kelly-page-padding {
  padding-top: 21px;
  padding-bottom: 21px;
}
/* Profile の画像付き紹介(image-with-text)の余白（本番 page.profile 設定: 36 / 100） */
.kelly-imgtext-padding {
  padding-top: 27px;
  padding-bottom: 75px;
}
@media screen and (min-width: 750px) {
  .kelly-page-padding {
    padding-top: 28px;
    padding-bottom: 28px;
  }
  .kelly-imgtext-padding {
    padding-top: 36px;
    padding-bottom: 100px;
  }
}

/* ---- お問い合わせフォーム（本番 contact-form--custom 由来） ---- */
.contact-form--custom {
  margin-top: 0;
  padding-top: 30px;
  padding-bottom: 30px;
  margin-bottom: 50px;
  background: #fcfcfc;
}
@media screen and (min-width: 750px) {
  .contact-form--custom {
    padding-top: 50px;
    padding-bottom: 50px;
  }
}
.contact-form--custom .inquiry {
  width: 100%;
  margin-bottom: 30px;
  border-collapse: collapse;
}
.contact-form--custom .inquiry textarea { width: 100%; }
.contact-form--custom .inquiry input:focus,
.contact-form--custom .inquiry textarea:focus { outline: none; box-shadow: none; }
.contact-form--custom .inquiry th {
  padding: 20px;
  text-align: left;
  font-size: 14px;
  color: #444;
  width: 30%;
  background: #f7f7f7;
  border: solid 1px #d7d7d7;
}
.contact-form--custom .inquiry td {
  text-align: left;
  border: solid 1px #d7d7d7;
  padding: 20px;
}
.contact-form--custom .haveto {
  font-size: 7px;
  padding: 5px;
  background: #ff9393;
  color: #fff;
  border-radius: 2px;
  margin-right: 5px;
  position: relative;
  bottom: 1px;
}
/* Contact Form 7 をこの .inquiry 枠で使う場合の調整 */
.contact-form--custom .wpcf7 .inquiry td input:not([type="submit"]),
.contact-form--custom .wpcf7 .inquiry td textarea { width: 100%; }
.contact-form--custom .wpcf7-form-control-wrap { display: block; }
/* テキスト入力（CF7）の内側余白 */
.contact-form--custom .wpcf7 input[type="text"],
.contact-form--custom .wpcf7 input[type="email"],
.contact-form--custom .wpcf7 input[type="tel"],
.contact-form--custom .wpcf7 textarea { padding: 10px; }
.contact-form--custom .wpcf7 input[type="submit"],
.contact-form--custom .wpcf7 #formbtn { margin-top: 10px; }
.contact-form--custom .wpcf7-not-valid-tip { color: #c00; font-size: 12px; }
.contact-form--custom .wpcf7-response-output { margin: 1em 0; padding: 0.6em 1em; }

.contact-form--custom .kelly-form-notice {
  padding: 1em 1.5em;
  margin-bottom: 1.5em;
  border-radius: 4px;
}
.contact-form--custom .kelly-form-notice--ok { background: #e3f3e8; border: 1px solid #5fbf7f; }
.contact-form--custom .kelly-form-notice--ng { background: #fdecec; border: 1px solid #e08a8a; }

/* ---- 単一お知らせ本文 ---- */
.entry-content { max-width: 700px; margin: 2rem auto; line-height: 2; }
.entry-content img { display: block; margin: 1rem auto; max-width: 100%; height: auto; }

/* ---- 固定ページ汎用 ---- */
.page-content { max-width: var(--page-width); margin: 0 auto; padding: 3rem 1.5rem; }
@media screen and (min-width: 750px) {
  .page-content { padding: 4rem 5rem; }
}
.main-page-title { text-align: center; margin-bottom: 4rem; }

/* ---- 特商法テーブル / Policy ---- */
.page-content table { width: 100%; border-collapse: collapse; }
.page-content table td { border: 1px solid #ddd; padding: 1rem; vertical-align: top; }
.page-content table td:first-child { width: 30%; background: var(--kelly-color-soft); font-weight: 500; }
.policy_head span { font-weight: bold; font-size: 18px; }

/* ---- TOP スライド ---- */
.kelly-hero { text-align: center; }
.kelly-hero img { width: 100%; height: auto; display: block; }

/* ---- 作品詳細：原画/ジクレー（add-style.css .product--custom を流用しつつ補正） ---- */
.product-variantTitle { font-weight: bold; }
.original-picture--title { font-weight: bold; margin-bottom: 0; }
.sold-text { color: #c00; font-size: 16px; }
.tax-included { margin-left: 0.5em; font-size: 1.2rem; }

/* ---- TOP プロフィール：本文がラッパー無し(<p>直下)で出力された場合の補正 ----
   元サイトは .image-with-text__content / .image-with-text__text に
   add-style.css のルール（padding:0 5rem 5rem / font-size:11.2px）が当たるが、
   TOPの動的プロフィールはラッパーが無くこれらが効かない。
   元サイトと同値を素の text-item / <p> に補う（上余白0＝写真と同じ高さから開始）。 */
.image-with-text__text-item:not(:has(.image-with-text__content)) {
  padding: 0 5rem 5rem;
}
.image-with-text__text-item:not(:has(.image-with-text__content)) p {
  font-size: 11.2px;
}
/* 先頭の「Profile History」の既定 margin-top(1em=11.2px) を消し、写真上端に揃える */
.image-with-text__text-item:not(:has(.image-with-text__content)) p:first-child {
  margin-top: 0;
  padding-top: 0;
}
@media screen and (max-width: 749px) {
  .image-with-text__text-item:not(:has(.image-with-text__content)) {
    padding: 5px;
  }
}