/** Shopify CDN: Minification failed

Line 11:0 Unexpected "{"
Line 11:1 Expected identifier but found "%"
Line 13:8 Expected identifier but found whitespace
Line 14:10 Expected identifier but found whitespace
Line 14:11 Unexpected "2.0"
Line 22:1 Expected identifier but found "%"

**/
{%- comment -%}
  BI-LUMINA Fast-Fashion Minimal Custom Styles
  Focus: Minimalist, White Base, High Density, Image-centric
  Version: 2.0 (Optimized)
  Changes:
    - Reduced unnecessary !important declarations
    - Removed duplicate comment block for Product Page section
    - Replaced display:contents (accessibility risk) with explicit flex child targeting
    - Scoped will-change to hover state only (GPU memory optimization)
    - Consolidated duplicate button hover rules into shared selectors
    - Added :has() fallback note for legacy Android WebView
{%- endcomment -%}

/* ==================================================
   CSS Custom Properties (Design Tokens)
================================================== */
:root {
  /* Minimal Brand Colors */
  --color-bi-lumina-bg: #FFFFFF;
  --color-bi-lumina-text: #111111;
  --color-bi-lumina-gray: #F9F9F9;
  --color-bi-lumina-border: #EEEEEE;
  --color-bi-lumina-accent: #888888;
  --color-bi-lumina-badge-new: #000000;
  --color-bi-lumina-badge-hot: #FF3B30;

  /* Font Families - Playfair Display Serif System */
  --font-garamond: "Playfair Display", "Noto Serif JP", serif;
  --font-heading-family: var(--font-garamond);
  --font-body-family: var(--font-garamond);

  /* Font Weights */
  --font-weight-light: 400;   /* 見出し用 */
  --font-weight-regular: 500; /* 本文・小見出し用 */
  --font-weight-medium: 600;  /* アクセント用 */

  /* Shopify Core Overrides */
  --color-base-text: var(--color-bi-lumina-text);
  --color-base-background-1: var(--color-bi-lumina-bg);
  --color-base-background-2: var(--color-bi-lumina-gray);
  --color-base-solid-button-labels: #FFFFFF;
  --color-base-outline-button-labels: var(--color-bi-lumina-text);
  --color-border: var(--color-bi-lumina-border);
}

/* ==================================================
   Base Setup
================================================== */
html,
body {
  background-color: var(--color-bi-lumina-bg);
  color: var(--color-bi-lumina-text);
  font-family: var(--font-body-family);
  font-weight: var(--font-weight-regular);
  font-size: 1.05rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: lining-nums;
  -moz-font-feature-settings: "lnum";
  -webkit-font-feature-settings: "lnum";
  font-feature-settings: "lnum";
}

/* ==================================================
   Typography System — BI-LUMINA Garamond
   「大きい文字は細く、小さい文字はやや太く」の逆転法則
================================================== */

/* ① 見出し（Heading）
   ブランドの「顔」— 彫刻的な美しさと圧倒的な余白 */
h1, h2, h3,
.h1, .h2, .h3,
.heading {
  font-family: var(--font-garamond) !important;
  font-weight: 300 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  line-height: 1.2 !important;
  color: #111111 !important;
  margin: 0 0 0.5em 0;
}

h1 { font-size: 1.75rem !important; }
h2 { font-size: 1.5rem !important; }
h3 { font-size: 1.25rem !important; }

/* ② 小見出し（Subheading）
   情報密度をやや上げた、知的な印象 */
h4, h5, h6,
.h4, .h5, .h6,
.subheading {
  font-family: var(--font-garamond) !important;
  font-weight: 400 !important;
  font-size: 1rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  line-height: 1.4 !important;
  color: #4A4A4A !important;
  margin: 0 0 0.5em 0;
}

/* ③ アクセント（Accent）
   告知バー・バッジ・ラベル — ストイックなミニマリズム */
.announcement-bar__text,
.announcement-bar p,
.announcement-bar a,
.badge,
.minimal-badge,
.label,
.tag {
  font-family: var(--font-garamond) !important;
  font-weight: 500 !important;
  font-size: 0.72rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.15em !important;
}

/* ④ 本文（Body）
   読みやすさ最優先 — 視線が滑らかに流れる設定 */
p, .rte, .body-text,
.product-description,
.article__content {
  font-family: var(--font-garamond) !important;
  font-weight: 400 !important;
  font-size: 0.95rem !important;
  text-transform: none !important;
  letter-spacing: 0.03em !important;
  line-height: 1.7 !important;
  color: #2B2B2B !important;
}

/* ==================================================
   BI-LUMINA Optimized Layout: Horizon 1200px / SP Edge-to-Edge
================================================== */

/* 1. モバイル：横パディングを排除（画像主体の没入感） */
.section--page-width,
#MainContent .section--page-width {
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* 2. モバイル：セクションのパディング解除 */
@media screen and (max-width: 767px) {
  #MainContent .shopify-section,
  .shopify-section .section--page-width,
  .section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* バナー画像を画面端まで広げる */
  #MainContent img,
  #MainContent picture {
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* 3. デスクトップ/タブレット（768px以上）：中央寄せ 1200px幅 */
@media screen and (min-width: 768px) {
  /* メインコンテンツを1200px枠に収める（ヘッダー・フル幅セクションを除く） */
  .shopify-section:not(#shopify-section-header):not([class*="header"]):not(.shopify-section-group-header-group):not(.shopify-section--full-width):not([id*="__bi_lumina_hero_"]):not([id^="Banner-template--"]) {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    box-sizing: border-box;
    padding-left: 4rem !important;
    padding-right: 4rem !important;
  }

  /* デフォルトの商品ページのみ、PCでの両脇の余白をさらに少なくする（4rem -> 1rem） */
  main:has(#shopify-section-template--27241279389877__main) .shopify-section:not(#shopify-section-header):not([class*="header"]):not(.shopify-section-group-header-group):not(.shopify-section--full-width):not([id*="__bi_lumina_hero_"]):not([id^="Banner-template--"]) {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* ヒーロー・フルワイドセクション：全幅フルブリード */
  .shopify-section--full-width,
  [id*="__bi_lumina_hero_"],
  [id^="Banner-template--"],
  [class*="hero-template--"] {
    width: 100vw !important;
    max-width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    margin-left: -50vw !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    overflow: hidden !important;
  }

  /* セクション内部の二重余白を防ぐ（ヘッダー内は除外） */
  .shopify-section:not(#shopify-section-header):not([class*="header"]) .section--page-width {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* ==================================================
   Buttons
   ※ PRIMARY / SECONDARY で一括管理し重複を排除
================================================== */

/* Secondary / Default Button */
.button,
.button-secondary {
  background-color: transparent;
  color: #4A4A4A;
  border: 1px solid #CCCCCC;
  border-radius: 4px;
  padding: 10px 20px;
  font-weight: var(--font-weight-regular);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  min-width: 120px;
}

.button:hover,
.button-secondary:hover {
  background-color: #F0F0F0;
  color: #2B2B2B;
  border-color: #CCCCCC;
}

/* Primary Button（カートへ追加・チェックアウト等）
   Horizonテーマでは .button がプライマリ、.button-secondary がセカンダリ。
   .button--primary クラスは存在しない。
   カートボタンは .add-to-cart-button / .cart__checkout-button を使用 */
.add-to-cart-button,
.cart__checkout-button {
  background-color: #2B2B2B;
  color: #FFFFFF;
  border: 1px solid #2B2B2B;
  border-radius: 4px;
  padding: 10px 20px;
  font-weight: var(--font-weight-regular);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  min-width: 120px;
}

.add-to-cart-button:hover,
.cart__checkout-button:hover {
  background-color: #4A4A4A;
  border-color: #4A4A4A;
  color: #FFFFFF;
}

/* ==================================================
   Inputs & Form Fields
================================================== */
input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]),
textarea,
select,
.field__input {
  background-color: #FFFFFF;
  color: #2B2B2B;
  border: 1px solid #D1D1D1;
  transition: border-color 0.2s ease;
}

/* ==================================================
   Variant Picker（バリエーション）
   Horizonでは .variant-pill / variant-radios は存在しない。
   実際の選択肢は variant-picker-component 内の input + label で構成
================================================== */
.variant-picker-component input[type="radio"] + label,
.product-form__input input[type="radio"] + label {
  background-color: #F9F9F9;
  color: #4A4A4A;
  border: 1px solid #E5E5E5;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.variant-picker-component input[type="radio"] + label:hover,
.product-form__input input[type="radio"] + label:hover {
  background-color: #EEEEEE;
  color: #4A4A4A;
  border-color: #999999;
}

.variant-picker-component input[type="radio"]:checked + label,
.product-form__input input[type="radio"]:checked + label {
  background-color: #2B2B2B;
  color: #FFFFFF;
  border-color: #2B2B2B;
}

.variant-picker-component input[type="radio"]:checked + label:hover,
.product-form__input input[type="radio"]:checked + label:hover {
  background-color: #4A4A4A;
  color: #FFFFFF;
  border-color: #4A4A4A;
}

/* ==================================================
   Product Cards
   Horizonでは <product-card> カスタム要素と .product-card__content を使用。
   旧テーマ（Dawn等）の .card / .card-wrapper は存在しない。
================================================== */
product-card {
  background: transparent;
}

.product-card__content {
  background: transparent;
  position: relative;
}

/* ==================================================
   Badges
================================================== */
.minimal-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  font-size: 0.65rem;
  font-weight: var(--font-weight-regular);
  padding: 2px 6px;
  z-index: 2;
  letter-spacing: 0.05em;
  background: #FFFFFF;
  color: var(--color-bi-lumina-text);
  border: 1px solid var(--color-bi-lumina-border);
}

.minimal-badge--new {
  color: #FFFFFF;
  background: var(--color-bi-lumina-badge-new);
  border: none;
}

.minimal-badge--hot {
  color: #FFFFFF;
  background: var(--color-bi-lumina-badge-hot);
  border: none;
}

.low-stock-indicator {
  font-size: 0.7rem;
  color: var(--color-bi-lumina-badge-hot);
  margin-top: 4px;
  font-weight: var(--font-weight-regular);
}

/* ==================================================
   Announcement Bar (告知バー)
================================================== */
.announcement-bar,
.announcement-bar[class*="color-"] {
  background-color: #111111 !important; /* サイト全体のテキスト色と同じ黒で引き締める */
  color: #FFFFFF !important;
  border-bottom: none !important;
}

.announcement-bar .announcement-bar__text,
.announcement-bar .text-block,
.announcement-bar p,
.announcement-bar a {
  color: #FFFFFF !important;
  font-weight: 500 !important; /* 少し太字にして視認性を高める */
  letter-spacing: 0.08em !important;
}


/* メニュー項目の折り返し禁止
   Horizonでは .menu-list__link / .menu-list__list-item 構造を使用 */
.menu-list__link,
.menu-list__link span,
.header-actions__action,
.header-logo {
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
}

/* ==================================================
   Global Grid System（高密度）
================================================== */
.grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.grid__item {
  width: 100%;
}

@media screen and (min-width: 750px) {
  .grid { gap: 16px; }
  .grid--2-col-tablet .grid__item { width: calc(50% - 8px); }
}

@media screen and (min-width: 990px) {
  .grid { gap: 24px; }
  .grid--4-col-desktop .grid__item { width: calc(25% - 18px); }
}

/* ==================================================
   Horizontal Scroll（関連商品など）
================================================== */
.horizontal-scroll-grid {
  display: flex;
  overflow-x: auto;
  gap: 8px;
  padding-bottom: 1rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.horizontal-scroll-grid::-webkit-scrollbar {
  display: none;
}

.horizontal-scroll-grid .grid__item {
  scroll-snap-align: start;
  flex: 0 0 calc(50% - 8px);
}

@media screen and (min-width: 990px) {
  .horizontal-scroll-grid { gap: 16px; }
  .horizontal-scroll-grid .grid__item { flex: 0 0 calc(25% - 16px); }
}

/* ==================================================
   Animations
================================================== */
.bi-lumina-fade-in {
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.bi-lumina-fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ==================================================
   Size Table
================================================== */
.minimal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
  margin-top: 0.5rem;
}

.minimal-table th,
.minimal-table td {
  border: 1px solid var(--color-bi-lumina-border);
  padding: 8px;
  text-align: left;
}

.minimal-table th {
  font-weight: var(--font-weight-regular);
  background-color: var(--color-bi-lumina-gray);
  width: 30%;
}

/* ==================================================
   Horizon 3.5.1 商品カード ホバーエフェクト
   ※ will-change をホバー時のみ付与してGPUメモリを節約
================================================== */

/* slideshow-slide内の画像ラッパーでオーバーフロー隠す */
slideshow-slide > div {
  overflow: hidden !important;
}

/* 通常時：トランジションのみ設定（will-changeは付けない） */
slideshow-slide img {
  transition: transform 0.45s ease, filter 0.45s ease;
  display: block;
}

/* ホバー時のみ will-change を付与（GPU最適化） */
slideshow-slide:hover img {
  will-change: transform, filter;
  transform: scale(1.06);
  filter: brightness(1.12);
}

/* .product-card クラスがある場合 */
.product-card {
  overflow: hidden;
}

.product-card img {
  transition: transform 0.45s ease, filter 0.45s ease;
}

.product-card:hover img {
  will-change: transform, filter;
  transform: scale(1.06);
  filter: brightness(1.12);
}

/* ==================================================
   Product Page: BI-LUMINA カートフォームレイアウト
   Horizonテーマの実際のクラス構造:
   - .buy-buttons-block > product-form-component
   - .product-form-buttons (フォームのFlexコンテナ)
   - .quantity-selector-wrapper > quantity-selector-component / cart-quantity-selector-component
   - .add-to-cart-button (カートへ追加ボタン)
   ※ .product-form__submit / .product-form__buttons / form[id^="BuyButtons"] は存在しない
================================================== */

/* 買いボタンブロック全体を100%幅に */
.buy-buttons-block,
.product-details .buy-buttons-block {
  width: 100% !important;
  min-width: 100% !important;
}

/* フォームコンテナをFlexに */
.product-form-buttons {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-end !important;
  gap: 12px !important;
  width: 100% !important;
}

/* バリエーション選択ブロック：単独行で100%幅 */
variant-picker-component,
.swatch-component,
.variant-picker-block {
  flex: 0 0 100% !important;
  width: 100% !important;
  margin-bottom: 0.5rem !important;
}

/* 数量ブロック（固定幅120px）*/
.quantity-selector-wrapper {
  flex: 0 0 120px !important;
  width: 120px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* 数量コンポーネント本体 */
quantity-selector-component,
cart-quantity-selector-component {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  height: 48px !important;
  border: 1px solid #E5E5E5 !important;
  border-radius: 2px !important;
  background: #FFFFFF !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
}

quantity-selector-component > *,
cart-quantity-selector-component > * {
  min-width: 0 !important;
}

/* +/- ボタン（固定幅35px）*/
quantity-selector-component button,
cart-quantity-selector-component button {
  flex: 0 0 35px !important;
  width: 35px !important;
  max-width: 35px !important;
  min-width: 35px !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
  color: #2B2B2B !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
}

/* 数量入力フィールド */
quantity-selector-component input,
cart-quantity-selector-component input {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  border: none !important;
  border-left: 1px solid #E5E5E5 !important;
  border-right: 1px solid #E5E5E5 !important;
  background: transparent !important;
  text-align: center !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 0.9rem !important;
  color: #2B2B2B !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  outline: none !important;
  -webkit-appearance: none;
  appearance: none;
}

/* カートへ追加ボタン本体 */
.add-to-cart-button:not(.sticky-add-to-cart__button) {
  flex: 1 1 auto !important;
  width: 100% !important;
  max-width: none !important;
  height: 48px !important;
  min-height: 48px !important;
  background-color: #2B2B2B !important;
  color: #FFFFFF !important;
  border-radius: 2px !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  font-size: 0.8rem !important;
  transition: background-color 0.2s ease !important;
  box-sizing: border-box !important;
  padding: 0 10px !important;
}

.add-to-cart-button:not(.sticky-add-to-cart__button):hover {
  background-color: #4A4A4A !important;
  border: none !important;
}

/* スマホ微調整 */
@media screen and (max-width: 749px) {
  .product-form-buttons {
    gap: 8px !important;
  }

  /* モバイルで数量 30% / カートボタン 70% */
  .quantity-selector-wrapper {
    flex: 0 0 calc(30% - 4px) !important;
    width: calc(30% - 4px) !important;
  }

  .add-to-cart-button:not(.sticky-add-to-cart__button) {
    flex: 0 0 calc(70% - 4px) !important;
    width: calc(70% - 4px) !important;
  }
}

/* ==================================================
   動的チェックアウトボタン（Shop Pay等）を非表示
================================================== */
.shopify-payment-button,
.shopify-payment-button__button {
  display: none !important;
}

/* ==================================================
   クイック追加ボタンを非表示
   商品カードホバー時に表示される「カートに追加」ショートカット
================================================== */
[id^="QuickAdd-ProductForm-"],
.quick-add,
.quick-add-button,
.product-card__quick-add,
.card__quick-add {
  display: none !important;
}

/* ==================================================
   商品ページ：画像(50%) と 商品情報(50%) のレイアウト比率
================================================== */
@media screen and (min-width: 768px) {
  /* 親コンテナを強制的にGridにし、完全に半々(1fr 1fr)に分割する */
  /* 親コンテナを強制的にGridにし、完全に半々(1fr 1fr)に分割する */
  .product-information__grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 3rem !important; /* 左右の間の余白 */
    width: 100% !important;
    align-items: flex-start !important;
  }

  /* 左側（画像）と 右側（商品詳細）は、Gridの枠(50%)をそのまま100%使う */
  .product-information__media,
  .product-details {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    margin: 0 !important;
  }
}

/* ==================================================
   Collection & Category Title Shadows
   (Prevents text from blending into bright/blown-out images)
 ================================================== */
.minimal-category-card__title,
.collection-card--image-bg .text-block,
.collection-card--image-bg [class*="title"],
.collection-card--image-bg [class*="heading"] {
  color: #111111 !important;
  font-weight: 600 !important;
  text-shadow: 
    0 0 5px rgba(255, 255, 255, 1.0),
    0 0 10px rgba(255, 255, 255, 1.0),
    0 0 20px rgba(255, 255, 255, 1.0),
    0 0 30px rgba(255, 255, 255, 1.0),
    0 0 40px rgba(255, 255, 255, 1.0),
    0 0 50px rgba(255, 255, 255, 1.0);
}

/* 商品ページのメインタイトルと追従カート内のタイトルをキャピタライズ化 */
.product-details h1,
.sticky-add-to-cart__title {
  text-transform: capitalize !important;
}