/* ============================================================
   FROGERZ Theme — Main Stylesheet
   ビルド済みTailwind: css/tailwind.css
   このファイル: CSS変数定義 + WooCommerce上書き + カスタムUI
   ============================================================ */

/* ===== デザイントークン（CSS変数） ===== */
:root {
  /* Colors */
  --color-primary:    #000000;
  --color-accent:     #22c55e;
  --color-accent-dark:#16a34a;
  --color-bg:         #ffffff;
  --color-surface:    #f9fafb;
  --color-border:     #e5e7eb;
  --color-text:       #111111;
  --color-muted:      #6b7280;
  --color-disabled:   #cccccc;

  /* Typography */
  --font-brand: 'Archivo Black', sans-serif;
  --font-body:  'Inter', sans-serif;

  /* Z-Index Scale */
  --z-header:     100;
  --z-menu:       200;
  --z-newsletter: 300;
  --z-modal:      400;
  --z-toast:      500;

  /* Transitions */
  --transition-base: 0.3s ease;
  --transition-fast: 0.2s ease;

  /* Spacing */
  --header-height: 80px;
}

/* ===== Base ===== */
body { font-family: var(--font-body); }
.font-brand { font-family: var(--font-brand); }

/* ===== WooCommerce Grid System ===== */
.columns-4 { columns: 1 !important; }

.woocommerce ul.products,
.frogerz-front-grid ul.products,
.frogerz-woo-container ul.products {
    display: flex !important;
    flex-wrap: wrap !important;
    padding: 0 !important;
    margin: 0 -10px !important;
    list-style: none !important;
    columns: auto !important;
    column-count: auto !important;
    gap: 0 !important;
}

/* 商品カード：4列 */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    width: calc(25% - 20px) !important;
    margin: 10px 10px 40px 10px !important;
    float: none !important;
    clear: none !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
}

/* 商品画像：正方形固定 + ホバーズーム */
.woocommerce ul.products li.product a img {
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    width: 100% !important;
    height: auto !important;
    margin-bottom: 20px !important;
    display: block !important;
    transition: transform 0.5s ease;
}
.woocommerce ul.products li.product:hover a img {
    transform: scale(1.05);
}

/* タイトルと価格 */
.woocommerce-loop-product__title {
    font-family: var(--font-brand) !important;
    font-size: 1rem !important;
    line-height: 1.2 !important;
    min-height: 2.5em !important;
    margin: 0 0 10px 0 !important;
}
.price {
    font-weight: 300 !important;
    margin-bottom: 15px !important;
    display: block !important;
}

/* レイアウト崩れ防止 */
.products::before,
.products::after { content: none !important; display: none !important; }

/* レスポンシブ */
@media (max-width: 1024px) {
    .woocommerce ul.products li.product { width: calc(33.333% - 20px) !important; }
}
@media (max-width: 768px) {
    .woocommerce ul.products li.product { width: calc(50% - 20px) !important; }
}

/* ===== カートページ / チェックアウトページ ===== */
.frogerz-woo-page-wrapper {
    min-height: 60vh;
    /* ブロックエディタで py-24 が当たっている場合でも 3rem に固定 */
    padding-top:    3rem !important;
    padding-bottom: 3rem !important;
    /* 親の <main> が既に container px-6 なので二重適用を防ぐ */
    padding-left:  0 !important;
    padding-right: 0 !important;
    max-width: none !important;
    margin-left:  0 !important;
    margin-right: 0 !important;
}

.woocommerce-cart table.cart th {
    font-family: var(--font-brand) !important;
    font-size: 0.7rem !important;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    background-color: var(--color-primary);
    color: var(--color-bg);
    padding: 15px !important;
    border-bottom: 2px solid var(--color-primary);
}

.woocommerce-cart .button,
.woocommerce-cart input.button {
    background-color: var(--color-primary) !important;
    color: var(--color-bg) !important;
    border-radius: 0 !important;
    text-transform: uppercase !important;
    font-weight: bold !important;
    letter-spacing: 0.1em !important;
    padding: 15px 30px !important;
}
.woocommerce-cart .button:disabled {
    background-color: var(--color-disabled) !important;
}

/* クーポン */
.woocommerce-cart table.cart td.actions .coupon {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    float: left !important;
}
#coupon_code {
    width: 200px !important;
    height: 45px !important;
    border: 1px solid var(--color-primary) !important;
    padding: 0 15px !important;
    font-size: 0.8rem !important;
    border-radius: 0 !important;
}
button[name="apply_coupon"] {
    height: 45px !important;
    background-color: var(--color-primary) !important;
    color: var(--color-bg) !important;
    font-family: var(--font-brand) !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.1em !important;
    padding: 0 25px !important;
    border-radius: 0 !important;
    white-space: nowrap !important;
}
button[name="update_cart"] {
    height: 45px !important;
    background-color: #eee !important;
    color: var(--color-primary) !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.1em !important;
    padding: 0 20px !important;
    border-radius: 0 !important;
    border: none !important;
}

/* 「購入手続きに進む」ボタン */
.checkout-button {
    background-color: var(--color-primary) !important;
    color: var(--color-bg) !important;
    font-family: var(--font-brand) !important;
    font-size: 1.2rem !important;
    padding: 25px !important;
    border-radius: 0 !important;
    transition: background-color var(--transition-base);
}
.checkout-button:hover {
    background-color: var(--color-accent) !important;
}

/* 通知メッセージ */
.frogerz-front-grid .woocommerce-message {
    margin-top: 20px !important;
    margin-bottom: 40px !important;
}
.woocommerce-message {
    border-top: 3px solid var(--color-accent) !important;
    background-color: #fcfcfc !important;
    padding: 20px 50px !important;
    margin-bottom: 40px !important;
}
.woocommerce-message .button.wc-forward {
    background-color: var(--color-primary) !important;
    color: var(--color-bg) !important;
    border-radius: 0 !important;
    padding: 10px 20px !important;
    font-family: var(--font-brand) !important;
    text-transform: uppercase !important;
    font-size: 10px !important;
    letter-spacing: 0.1em !important;
    transition: background-color var(--transition-base);
    border: none !important;
}
.woocommerce-message .button.wc-forward:hover {
    background-color: var(--color-accent) !important;
}

/* 通貨切り替え */
.header-currency-switcher select,
.currency-switcher select {
    background-color: transparent !important;
    border: none !important;
    color: var(--color-primary) !important;
    font-family: var(--font-body);
    font-weight: bold;
    font-size: 12px;
    text-transform: uppercase;
    cursor: pointer;
    padding: 5px 10px !important;
}
@media (max-width: 768px) {
    .header-currency-switcher { margin-left: 10px; }
}

/* ===== チェックアウトページ ===== */
.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout select,
.woocommerce-checkout textarea {
    border: 1px solid var(--color-primary) !important;
    border-radius: 0 !important;
    padding: 12px !important;
    font-family: var(--font-body);
    font-size: 0.9rem;
}
.woocommerce-checkout input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    accent-color: var(--color-primary) !important;
}
.woocommerce-checkout .form-row.checkbox-wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 15px 0 !important;
    font-size: 0.8rem !important;
}
#order_review_heading,
#order_review {
    background-color: var(--color-surface);
    padding: 30px;
    border: 1px solid var(--color-border);
}
.woocommerce-checkout-payment {
    background: var(--color-surface) !important;
    border: 1px solid var(--color-primary) !important;
    padding: 20px !important;
}
#place_order {
    width: 100% !important;
    background-color: var(--color-primary) !important;
    color: var(--color-bg) !important;
    font-family: var(--font-brand) !important;
    font-size: 1.5rem !important;
    padding: 30px !important;
    border-radius: 0 !important;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border: none !important;
    transition: background-color var(--transition-base);
    cursor: pointer;
    margin-top: 20px;
}
#place_order:hover {
    background-color: var(--color-accent) !important;
}
.woocommerce-notice--info,
.woocommerce-info {
    border-top-color: var(--color-primary) !important;
    background-color: var(--color-bg) !important;
    color: var(--color-primary) !important;
    font-family: var(--font-body);
}

/* ===== サンキューページ ===== */
.woocommerce-order {
    max-width: 800px;
    margin: 0 auto;
    padding-bottom: 100px;
}
ul.woocommerce-order-overview {
    display: flex !important;
    justify-content: space-between !important;
    background: var(--color-surface) !important;
    padding: 30px !important;
    border: 1px solid var(--color-primary) !important;
    list-style: none !important;
    margin-bottom: 50px !important;
}
ul.woocommerce-order-overview li {
    font-family: var(--font-body);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-muted);
    border: none !important;
    padding: 0 !important;
}
ul.woocommerce-order-overview li strong {
    display: block;
    font-family: var(--font-brand);
    font-size: 1.2rem;
    color: var(--color-primary);
    margin-top: 5px;
}
.woocommerce-table--order-details thead th {
    background-color: var(--color-primary) !important;
    color: var(--color-bg) !important;
    font-family: var(--font-brand) !important;
    text-transform: uppercase;
    padding: 15px !important;
}

/* ===== メガメニュー ===== */
#mega-menu {
    z-index: var(--z-menu) !important;
    top: var(--header-height) !important;
    background-color: rgba(255, 255, 255, 0.98) !important;
}
header, .site-header {
    position: relative;
    z-index: var(--z-header);
}
#mega-menu h3 {
    letter-spacing: -0.05em;
    font-size: 0.75rem;
}
#mega-menu a {
    font-size: 0.7rem;
    display: inline-block;
    width: 100%;
}
.absolute ul li a {
    position: relative;
    display: inline-block;
    transition: all var(--transition-fast);
}
.absolute ul li a:hover {
    transform: translateX(5px);
    color: var(--color-primary) !important;
    font-style: italic;
}
.logged-in a[href*="my-account"] {
    background: #767676;
    color: var(--color-bg) !important;
    padding: 2px 8px;
    border-radius: 2px;
}

/* ===== ショップ共通 ===== */
.woocommerce-products-header,
.woocommerce-products-header__title,
.page-title { display: none !important; }
.archive .page-header { display: none; }
.page .entry-header { display: none !important; }
.post-edit-link { display: none !important; }

/* main#main margin-top removed — layout handled by pt-20 on #page-content */

/* ===== MY ACCOUNT / LOGIN ===== */
.woocommerce-account .woocommerce {
    max-width: 900px;
    margin: 60px auto;
    background-color: var(--color-bg);
    padding: 20px 40px;
    border: 3px solid var(--color-primary);
    box-shadow: 15px 15px 0px var(--color-primary);
}
.woocommerce-account h2 {
    font-family: var(--font-brand) !important;
    text-transform: uppercase;
    font-size: 2rem !important;
    letter-spacing: -0.05em;
    border-bottom: 5px solid var(--color-accent);
    display: inline-block;
}
.woocommerce-account input.input-text {
    border: 2px solid var(--color-primary) !important;
    border-radius: 0 !important;
    padding: 12px !important;
    font-family: var(--font-body);
    background-color: var(--color-surface);
}
.woocommerce-account input.input-text:focus {
    background-color: var(--color-primary);
    color: var(--color-bg);
    outline: none;
}
.woocommerce-account .button {
    background-color: var(--color-primary) !important;
    color: var(--color-bg) !important;
    font-family: var(--font-brand) !important;
    border-radius: 0 !important;
    text-transform: uppercase;
    padding: 20px 40px !important;
    font-size: 1.2rem !important;
    width: 100%;
    transition: all var(--transition-fast);
    border: none !important;
}
.woocommerce-account .button:hover {
    background-color: #ff00ff !important;
    transform: translate(-2px, -2px);
    box-shadow: 4px 4px 0px var(--color-primary);
}
.woocommerce-MyAccount-navigation ul {
    list-style: none;
    padding: 0;
    border: 2px solid var(--color-primary);
}
.woocommerce-MyAccount-navigation li {
    border-bottom: 1px solid var(--color-border);
}
.woocommerce-MyAccount-navigation li a {
    display: block;
    padding: 15px;
    font-family: var(--font-brand);
    font-size: 0.8rem;
    text-transform: uppercase;
    text-decoration: none;
}
.woocommerce-MyAccount-navigation li.is-active a {
    background-color: var(--color-primary);
    color: var(--color-bg) !important;
}
.woocommerce-LostPassword a {
    font-size: 0.7rem;
    color: var(--color-muted);
    text-decoration: underline;
}
/* MY PAGE: H1 は PHP テンプレートの <header class="border-b-2"> でボーダーを付けるため
   ここではフォントスタイルのみ指定（border-bottom / padding / margin は header 側で管理） */
.woocommerce-account .entry-title,
.woocommerce-account h1:not(.site-title) {
    font-family: var(--font-brand) !important;
    font-size: 3.75rem !important;
    text-transform: uppercase;
    letter-spacing: -0.05em;
    font-style: italic;
    line-height: 1;
}
@media (max-width: 768px) {
    .woocommerce-account .entry-title,
    .woocommerce-account h1:not(.site-title) {
        font-size: 2.5rem !important;
    }
}

/* ===== ABOUT PAGE ===== */
.about-container { animation: fadeIn 1s ease-out; }
.about-container h1 {
    border-bottom: 2px solid var(--color-primary) !important;
    width: 100%;
}
.about-container h2 { letter-spacing: -0.05em; }
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (max-width: 768px) {
    .about-container h1 { font-size: 3.5rem !important; }
}

/* Aboutページのコンテナ幅：Tailwind container 設定（tailwind.config.js）で統一管理するため個別指定を削除 */

/* ===== SINGLE PRODUCT PAGE ===== */
.product_title.entry-title {
    font-family: var(--font-brand) !important;
    font-size: clamp(1.5rem, 5vw, 2.5rem) !important;
    font-style: italic !important;
    text-transform: uppercase !important;
    letter-spacing: -0.05em !important;
    line-height: 1 !important;
    border-bottom: 2px solid var(--color-primary) !important;
    padding-bottom: 15px !important;
    margin-bottom: 20px !important;
    display: inline-table !important;
    position: relative !important;
}
.product_title.entry-title::after {
    content: '.' !important;
    color: var(--color-accent) !important;
    position: absolute;
    right: -0.15em;
}
.single_add_to_cart_button.button {
    background-color: var(--color-primary) !important;
    color: var(--color-bg) !important;
    border-radius: 0 !important;
    padding: 15px 40px !important;
    font-family: var(--font-brand) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    transition: all var(--transition-base) !important;
}
.single_add_to_cart_button.button:hover {
    background-color: var(--color-accent) !important;
    color: var(--color-primary) !important;
}
/* > h2 = セクション見出しのみ対象（商品カード h2 は除外） */
.related.products > h2,
.upsells.products > h2 {
    font-family: var(--font-brand) !important;
    font-size: 1.875rem !important;   /* text-3xl — front-page h2 と統一 */
    font-style: normal !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: -0.025em !important; /* tracking-tight */
    color: #000 !important;
    border-bottom: 2px solid #000 !important;
    display: block !important;
    padding-bottom: 1rem !important;
    margin-top: 4rem !important;
    margin-bottom: 2rem !important;
}
.woocommerce .quantity .qty {
    border: 1px solid #888;
    padding: 10px 10px 10px 20px !important;
}
.woocommerce #review_form #respond textarea {
    border: 1px solid #888;
}

/* ===== CONTACT FORM 7 ===== */
.frogerz-cf7-wrap .wpcf7-form p { margin-bottom: 1.25rem; }
.frogerz-form-row { margin-bottom: 1.25rem; }
.frogerz-cf7-wrap label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #111;
}
.frogerz-cf7-wrap .required { color: #22c55e; }
.frogerz-input,
.frogerz-cf7-wrap input[type="text"],
.frogerz-cf7-wrap input[type="email"] {
    width: 100%;
    border: 1px solid #000;
    border-radius: 0;
    padding: 0.65rem 0.75rem;
    font-size: 0.875rem;
    outline: none;
    transition: border-color 0.15s;
    background: #fff;
}
.frogerz-textarea,
.frogerz-cf7-wrap textarea {
    width: 100%;
    border: 1px solid #000;
    border-radius: 0;
    padding: 0.65rem 0.75rem;
    font-size: 0.875rem;
    outline: none;
    resize: vertical;
    min-height: 150px;
    background: #fff;
}
.frogerz-input:focus,
.frogerz-textarea:focus,
.frogerz-cf7-wrap input:focus,
.frogerz-cf7-wrap textarea:focus { border-color: #22c55e; }
.frogerz-submit,
.frogerz-cf7-wrap input[type="submit"] {
    background: #000;
    color: #fff;
    border: 2px solid #000;
    padding: 0.85rem 2.5rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    border-radius: 0;
    margin-top: 0.5rem;
}
.frogerz-submit:hover,
.frogerz-cf7-wrap input[type="submit"]:hover { background: #22c55e; border-color: #22c55e; color: #000; }
/* 送信結果メッセージ */
.frogerz-cf7-wrap .wpcf7-response-output {
    margin-top: 1.25rem;
    padding: 0.75rem 1rem;
    font-size: 0.8rem;
    font-weight: 700;
    border: 1px solid currentColor;
}
.frogerz-cf7-wrap .wpcf7-mail-sent-ok    { color: #166534; background: #f0fdf4; }
.frogerz-cf7-wrap .wpcf7-mail-sent-ng,
.frogerz-cf7-wrap .wpcf7-spam-blocked    { color: #991b1b; background: #fef2f2; }
.frogerz-cf7-wrap .wpcf7-validation-errors { color: #92400e; background: #fffbeb; }
/* バリデーションエラー */
.frogerz-cf7-wrap .wpcf7-not-valid-tip { color: #dc2626; font-size: 0.75rem; margin-top: 0.25rem; display: block; }
.frogerz-cf7-wrap .wpcf7-not-valid { border-color: #dc2626 !important; }

/* reCAPTCHA バッジ非表示（Google利用規約準拠：代替テキストをフォーム近傍に表示すること） */
.grecaptcha-badge { visibility: hidden !important; }

/* CART / CHECKOUT / MY PAGE : entry-content 内の H1 および header 要素をすべて非表示
   PHP テンプレート（article > header）で統一 H1 を出力するため
   Gutenberg ブロック内の重複 H1・空 header（二重ボーダーの原因）を除去 */
.woocommerce-cart .entry-content h1,
.woocommerce-checkout .entry-content h1,
.woocommerce-account .entry-content h1,
.woocommerce-cart .entry-content header,
.woocommerce-checkout .entry-content header,
.woocommerce-account .entry-content header {
    display: none !important;
}

/* ===== PRODUCT GALLERY ===== */
.woocommerce-product-gallery {
    opacity: 1 !important;
    visibility: visible !important;
}
.woocommerce-product-gallery--with-images { opacity: 1 !important; }

/* サムネイルリスト（統合・重複削除済み） */
.flex-control-nav.flex-control-thumbs {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-top: 20px !important;
    padding: 0 !important;
    list-style: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}
.flex-control-nav.flex-control-thumbs li {
    width: 80px !important;
    flex: 0 0 80px !important;
    cursor: pointer !important;
}
.flex-control-nav.flex-control-thumbs img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    border: 1px solid var(--color-primary) !important;
    cursor: pointer !important;
    opacity: 0.5;
    transition: all var(--transition-fast);
}
.flex-control-nav.flex-control-thumbs img.flex-active,
.flex-control-nav.flex-control-thumbs img:hover {
    opacity: 1;
    outline: 2px solid var(--color-accent);
    border-color: var(--color-primary) !important;
}

/* ===== NEWSLETTER BAR ===== */
#newsletter-bar {
    z-index: var(--z-newsletter);
}
#newsletter-bar h3 {
    font-family: var(--font-body);
    letter-spacing: -0.05em;
}
#newsletter-bar input::placeholder {
    text-transform: uppercase;
    font-size: 0.75rem;
    font-weight: bold;
}