/**
 * fukutoku-design-child WooCommerce 専用スタイル
 *
 * SWELL テーマとの調和を保ちつつ、EC に必要なスタイルを追加する。
 * 既存の SWELL スタイルを上書きする場合は詳細度（Specificity）を意識すること。
 */

/* ============================================================
   カラー変数（SWELL のカスタムプロパティと合わせる）
   ============================================================ */
:root {
  --fec-primary:     #8B5A2B;  /* 温かみのあるブラウン */
  --fec-primary-lt:  #c8956a;
  --fec-accent:      #f4e5d0;
  --fec-text:        #333333;
  --fec-muted:       #777777;
  --fec-success:     #28a745;
  --fec-warning:     #ffc107;
  --fec-danger:      #dc3545;
  --fec-border:      #e0d6cb;
}

/* ============================================================
   商品ページ
   ============================================================ */

/* カートボタン */
.woocommerce .single_add_to_cart_button,
.woocommerce button.button.alt {
  background-color: var(--fec-primary);
  color: #fff;
  border-radius: 4px;
  padding: 14px 28px;
  font-size: 16px;
  font-weight: bold;
  transition: background-color .2s ease;
}
.woocommerce .single_add_to_cart_button:hover,
.woocommerce button.button.alt:hover {
  background-color: var(--fec-primary-lt);
}

/* 出荷目安（FEC_Shipping_Estimate が出力する要素） */
.fec-shipping-estimate {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--fec-muted);
  margin: 8px 0;
}
.fec-shipping-estimate::before {
  content: '🚚';
  font-size: 15px;
}

/* 定期便メリット訴求バナー */
.fec-subscription-merit {
  background: var(--fec-accent);
  border: 1px solid var(--fec-border);
  border-radius: 6px;
  padding: 12px 16px;
  margin: 12px 0;
  font-size: 13px;
  line-height: 1.7;
}
.fec-subscription-merit strong {
  color: var(--fec-primary);
}

/* 購入停止バナー */
.fec-stop-notice {
  background: #fff3cd;
  border: 1px solid #ffc107;
  border-radius: 4px;
  padding: 10px 14px;
  margin: 10px 0;
  font-size: 13px;
  color: #856404;
}

/* ============================================================
   カートページ
   ============================================================ */

.wc-block-cart__empty-cart__title,
.wp-block-woocommerce-empty-cart-block .wp-block-heading {
  background: transparent !important;
  border: 0 !important;
  color: var(--fec-text) !important;
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.5;
  margin: 48px auto 18px;
  outline: 0 !important;
  padding: 0;
  text-align: center;
}

.wc-block-cart__empty-cart__title::before,
.wp-block-woocommerce-empty-cart-block .wp-block-heading::before {
  display: none !important;
}

.wp-block-woocommerce-empty-cart-block .wp-block-separator {
  border-color: var(--fec-border);
  margin: 24px auto;
  max-width: 120px;
}

.wp-block-woocommerce-empty-cart-block .wp-block-button {
  margin: 28px auto 0;
  text-align: center;
}

.wp-block-woocommerce-empty-cart-block .wp-block-button__link {
  background: var(--fec-primary) !important;
  border: 1px solid var(--fec-primary) !important;
  border-radius: 4px;
  color: #fff !important;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
  min-width: 220px;
  outline: 0 !important;
  padding: 13px 24px;
}

.wp-block-woocommerce-empty-cart-block .wp-block-button__link:hover {
  background: var(--fec-primary-lt) !important;
  border-color: var(--fec-primary-lt) !important;
}

/* セット訴求エリア */
.fec-upsell-banner {
  background: var(--fec-accent);
  border-radius: 6px;
  padding: 14px 18px;
  margin: 16px 0;
  font-size: 14px;
}
.fec-upsell-banner a {
  color: var(--fec-primary);
  font-weight: bold;
  text-decoration: underline;
}

/* ============================================================
   チェックアウトページ
   ============================================================ */

.woocommerce-checkout h2,
.woocommerce-order h2,
.woocommerce-order-details__title,
.woocommerce-customer-details h2,
.woocommerce-column__title,
.wc-block-components-title,
.wc-block-components-checkout-step__title,
.wc-block-components-checkout-step__heading,
.wc-block-components-checkout-step__heading-content,
.wc-block-components-order-summary__title-text,
.wc-block-components-totals-coupon__button {
  background: transparent !important;
  border: 0 !important;
  color: var(--fec-text) !important;
  letter-spacing: 0;
  outline: 0 !important;
}

.woocommerce-order-details__title,
.woocommerce-customer-details h2,
.woocommerce-column__title {
  border-bottom: 1px solid var(--fec-border) !important;
  font-size: clamp(18px, 1.8vw, 24px);
  line-height: 1.55;
  margin: 32px 0 18px;
  padding: 0 0 10px;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table thead th,
.woocommerce table.shop_table td {
  background: transparent !important;
  border-color: var(--fec-border) !important;
  color: var(--fec-text) !important;
}

.woocommerce table.shop_table thead th {
  background: #f8f1e8 !important;
  font-weight: 700;
}

.wc-block-components-checkout-step__heading,
.wc-block-components-checkout-step__container,
.wc-block-components-checkout-step__content {
  background: transparent !important;
  border-color: var(--fec-border) !important;
  outline: 0 !important;
}

.woocommerce-checkout font,
.woocommerce-order font,
.wp-block-woocommerce-checkout font,
.wp-block-woocommerce-cart font,
.woocommerce-checkout font *,
.woocommerce-order font *,
.wp-block-woocommerce-checkout font *,
.wp-block-woocommerce-cart font * {
  background: transparent !important;
  border: 0 !important;
  color: inherit !important;
  outline: 0 !important;
}

.woocommerce-checkout .woocommerce-form__input-checkbox + span {
  font-size: 13px;
}

/* ============================================================
   マイページ
   ============================================================ */

.woocommerce-MyAccount-navigation-link.is-active > a {
  color: var(--fec-primary);
  font-weight: bold;
}

/* 定期購入ステータス */
.woocommerce-subscription-status.active { color: var(--fec-success); }
.woocommerce-subscription-status.on-hold { color: var(--fec-warning); }
.woocommerce-subscription-status.cancelled { color: var(--fec-danger); }

/* ============================================================
   レスポンシブ
   ============================================================ */

@media (max-width: 768px) {
  .woocommerce .single_add_to_cart_button,
  .woocommerce button.button.alt {
    width: 100%;
    padding: 16px;
    font-size: 17px;
  }
}