/* =========================================================================
 * Attractive v28 — 最終見直し ＋ 動き（アニメーション）
 *
 *  A. 全体の見直し（動きのオン・オフに関係なく適用）
 *  B. 動き … <html class="at-motion"> のときだけ有効。
 *     外観 → カスタマイズ → Attractive トップページ（v27）→「動きをつける」で切り替え。
 *     URL に ?at_motion=0 / ?at_motion=1 を付けると、そのページだけ比較できます。
 *     参考：PANDORA（スクロールで浮かび上がる・ヒーローのゆっくりズーム）、
 *           cui-cui／NOVICE TOKYO（控えめなフェード・スクロールで隠れるスマホヘッダー）
 *  C. 動きを減らす設定（OS 側）のときはすべて止めます
 * ========================================================================= */

/* A. 全体の見直し ------------------------------------------------------- */
/* 横スクロール用の負のマージンで、スマホ画面が左右に揺れるのを防ぐ（sticky は壊れない clip を使用） */
html, body { overflow-x: clip; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a, button, summary, label { -webkit-tap-highlight-color: transparent; }

/* iPhone で入力欄を触ったときに画面が拡大されないよう、スマホは 16px 以上に */
@media (max-width: 899px) {
  .at27-shop-tools select,
  #page input[type=text], #page input[type=email], #page input[type=tel], #page input[type=number], #page input[type=password], #page input[type=search],
  #page select, #page textarea, #page input.qty { font-size: 16px !important; }
}

/* タッチ端末で「押したあと下線が残る」のを防ぐ */
@media (hover: none) {
  .ac:hover .ac-link { text-decoration: none; }
  .at27-member-group a:hover { background: none; }
  .at27-gender-photo:hover img, .at27-items-list a:hover img, .at27-feature-item:hover img { transform: none; }
}

/* 幅 360px 以下の端末：ロゴを少し小さくして左右のアイコンと重ならないように */
@media (max-width: 374px) {
  .ah-logo img { width: 108px !important; }
  .ah-icon { min-width: 40px; padding: 0 2px; }
  .ah-icon-label { font-size: 9.5px; }
}

/* スマホメニュー・フッター：iPhone の下端（ホームバー）に隠れないように */
.ah-menu-scroll { padding-bottom: calc(40px + env(safe-area-inset-bottom)); }

/* 横スクロール列：端の商品が切れて「続きがある」ことが分かるよう右側に余白 */
@media (max-width: 899px) {
  .at27-rail::after, .at27-items-list::after, .at27-feature-list::after { content: ''; width: 4px; }
}

/* 見出しの英字が長いとき（スマホ）に「すべて見る」と重ならないように */
.at27-head > .at27-title { min-width: 0; }
.at27-title-en { overflow-wrap: anywhere; }

/* ヘッダー：スクロールしたら薄い影で境目を出す（動きなしでも付与。JS がクラスを付けます） */
.ah.is-scrolled { box-shadow: 0 1px 0 var(--a-line), 0 6px 18px rgba(29, 28, 26, .05); }

/* B. 動き -------------------------------------------------------------- */
:root { --a-ease: cubic-bezier(.2, .7, .2, 1); }

/* B-1. スクロールで浮かび上がる
 *  JS が読み込めなかった場合は 2.5 秒後に .at-rv-fail が付き、すべて表示されます */
html.at-motion:not(.at-rv-fail) :is(
  .at27-head, .at27-rank-sub, .at27-info, .at27-shop-head, .at27-member-head, .at27-news-list li,
  .at27-rail > *, .at27-items-list > li, .at27-feature-list > li, .at27-catnav li, .at27-gender > *, .at27-member-groups > *,
  .at27-grid > *, .at-curated-grid > *, .at-wish-grid > *
):not(.is-in) { opacity: 0; transform: translateY(22px); }
html.at-motion :is(
  .at27-head, .at27-rank-sub, .at27-info, .at27-shop-head, .at27-member-head, .at27-news-list li,
  .at27-rail > *, .at27-items-list > li, .at27-feature-list > li, .at27-catnav li, .at27-gender > *, .at27-member-groups > *,
  .at27-grid > *, .at-curated-grid > *, .at-wish-grid > *
) { transition: opacity .9s var(--a-ease), transform .9s var(--a-ease); transition-delay: var(--rv-d, 0ms); }
/* 見出しの英字：字間がすっと締まる */
html.at-motion .at27-head.is-in .at27-title-en { animation: atTrack 1.2s var(--a-ease) both; }
@keyframes atTrack { from { letter-spacing: .32em; opacity: 0; } to { letter-spacing: .1em; opacity: 1; } }

/* B-2. ヒーロー：表示中のバナーがゆっくり引いていく（Ken Burns） */
html.at-motion .at-bnr-slide { overflow: hidden; }
html.at-motion .at-bnr-slide.is-current img { animation: atKen 7s ease-out both; }
html.at-motion .at-bnr-slide.is-current .at-bnr-cta { animation: atUp .8s .35s var(--a-ease) both; }
@keyframes atKen { from { transform: scale(1.07); } to { transform: scale(1); } }
@keyframes atUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* B-3. 写真のホバー：ゆっくり寄る＋2枚目へクロスフェード */
@media (hover: hover) {
  html.at-motion .ac-media .ac-img { transition: opacity .6s ease, transform 1.4s var(--a-ease); }
  html.at-motion .ac:hover .ac-media .ac-img { transform: scale(1.05); }
  html.at-motion .at27-gender-photo img, html.at-motion .at27-feature-img img, html.at-motion .at27-items-img img { transition: transform 1.4s var(--a-ease); }
  html.at-motion .at27-gender-photo:hover img { transform: scale(1.05); }
  html.at-motion .at27-feature-item:hover img, html.at-motion .at27-items-list a:hover img { transform: scale(1.06); }
  html.at-motion .at27-catnav-img img { transition: transform .8s var(--a-ease); }
  html.at-motion .at27-catnav a:hover .at27-catnav-img img { transform: scale(1.08); }
}

/* B-4. ヘッダー */
html.at-motion .ah { transition: transform .4s var(--a-ease), box-shadow .3s ease; }
@media (max-width: 899px) {
  /* スマホ：下へスクロールで隠れ、上へ戻すと出てくる（画面を広く使う） */
  html.at-motion.ah-hide .ah { transform: translateY(calc(-100% - 2px)); box-shadow: none; }
  html.at-motion .at27-shop-bar { transition: top .4s var(--a-ease); }
  html.at-motion.ah-hide .at27-shop-bar { top: 0; }
  html.at-motion.ah-hide .admin-bar .at27-shop-bar { top: 46px; }
}
@media (min-width: 900px) {
  /* PC ナビ：下線が中央から伸びる */
  html.at-motion .ah-nav > ul > li > a, html.at-motion .ah-nav > ul > li > button { position: relative; box-shadow: none !important; }
  html.at-motion .ah-nav > ul > li > a::before, html.at-motion .ah-nav > ul > li > button::before {
    content: ''; position: absolute; left: 8px; right: 8px; bottom: 0; height: 2px; background: var(--a-ink);
    transform: scaleX(0); transition: transform .35s var(--a-ease);
  }
  html.at-motion .ah-nav > ul > li > a:hover::before, html.at-motion .ah-nav > ul > li > button:hover::before,
  html.at-motion .ah-has-menu.is-open > button::before { transform: scaleX(1); }
  html.at-motion .ah-has-menu > button::after { transition: transform .3s var(--a-ease); }
  html.at-motion .ah-has-menu.is-open > button::after { transform: translateY(1px) rotate(225deg); }
  /* カテゴリー一覧：ふわっと降りてくる */
  html.at-motion .ah-has-menu.is-open .ah-mega { animation: atDrop .3s var(--a-ease) both; }
  html.at-motion .ah-has-menu.is-open .ah-mega-cats li { animation: atUp .5s var(--a-ease) both; }
  html.at-motion .ah-has-menu.is-open .ah-mega-cats li:nth-child(2) { animation-delay: .04s; }
  html.at-motion .ah-has-menu.is-open .ah-mega-cats li:nth-child(3) { animation-delay: .08s; }
  html.at-motion .ah-has-menu.is-open .ah-mega-cats li:nth-child(4) { animation-delay: .12s; }
  html.at-motion .ah-has-menu.is-open .ah-mega-cats li:nth-child(5) { animation-delay: .16s; }
  html.at-motion .ah-has-menu.is-open .ah-mega-cats li:nth-child(n+6) { animation-delay: .2s; }
}
@keyframes atDrop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* B-5. スマホメニュー：中身が順に現れる */
html.at-motion .ah-menu { transition: transform .45s var(--a-ease); }
html.at-motion .ah-overlay { transition: opacity .35s ease; }
html.at-motion .ah-menu.is-open .ah-menu-scroll > * { animation: atUp .55s var(--a-ease) both; }
html.at-motion .ah-menu.is-open .ah-menu-scroll > :nth-child(2) { animation-delay: .06s; }
html.at-motion .ah-menu.is-open .ah-menu-scroll > :nth-child(3) { animation-delay: .1s; }
html.at-motion .ah-menu.is-open .ah-menu-scroll > :nth-child(4) { animation-delay: .14s; }
html.at-motion .ah-menu.is-open .ah-menu-scroll > :nth-child(n+5) { animation-delay: .18s; }

/* B-6. 小さな反応：お気に入りのハート・カートの件数 */
html.at-motion .at-wish-btn.is-pop .at-wish-icon { animation: atPop .45s var(--a-ease); }
html.at-motion .ah .at-cart-count.is-bump { animation: atPop .5s var(--a-ease); }
@keyframes atPop { 0% { transform: scale(1); } 35% { transform: scale(1.35); } 100% { transform: scale(1); } }

/* B-7. リンク・ボタン */
html.at-motion .at27-all, html.at-motion .at27-more a { transition: text-decoration-color .3s ease, color .3s ease; }
html.at-motion .af-group ul { animation: none; }
@media (max-width: 899px) { html.at-motion .af-group[open] ul { animation: atUp .4s var(--a-ease) both; } }

/* D. カートページ（v28.2）：追加後に必ず来る画面として使いやすく ------------------ */
/* 追加のお知らせ：チェック印＋商品名、右に「買い物を続ける」 */
#page .woocommerce-message:has(.at-added-msg) {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px;
  margin: 0 0 24px !important; padding: 14px 18px !important; border: 1px solid var(--a-ink) !important; background: #fff !important;
  font-size: 14px; color: var(--a-ink);
}
#page .woocommerce-message:has(.at-added-msg)::before { content: none !important; }
.at-added-msg { display: flex; align-items: center; gap: 10px; min-width: 0; font-weight: 500; }
.at-added-check { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--a-ink); position: relative; }
.at-added-check::after { content: ''; position: absolute; left: 8px; top: 5px; width: 5px; height: 9px; border: solid #fff; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
#page .at-added-continue { flex: none; font-size: 13px; color: var(--a-ink) !important; text-decoration: underline; text-decoration-color: #bdb6aa; text-underline-offset: 4px; }
#page .woocommerce-message .button.wc-forward { display: none !important; }

/* 入れたばかりの商品の行：薄い帯で印を付け、数秒で消える */
.at-cart-row.is-added { background: var(--a-band); box-shadow: 0 0 0 12px var(--a-band); animation: atAddedFade 4s 1.5s ease forwards; }
@keyframes atAddedFade { to { background: transparent; box-shadow: 0 0 0 12px transparent; } }

/* 数量は自動で反映：更新ボタンは隠し、反映中は薄く */
.at-cart-form.is-js .at-update-cart { display: none !important; }
.at-cart-form.is-js .at-cart-actions { justify-content: flex-start; }
.at-cart-form.is-updating .at-cart-list { opacity: .5; pointer-events: none; transition: opacity .2s; }

/* PC：右の合計欄はスクロールしても付いてくる */
@media (min-width: 900px) {
  .at-cart-totals { position: sticky !important; top: 156px; align-self: start; }
  .admin-bar .at-cart-totals { top: 188px; }
}

/* スマホ：画面下に合計＋「ご購入手続きへ進む」を固定 */
.at-cart-sticky { display: none; }
@media (max-width: 899px) {
  .at-cart-sticky {
    position: fixed; z-index: 800; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 12px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--a-line);
    box-shadow: 0 -6px 18px rgba(29, 28, 26, .06);
  }
  .at-cart-sticky-total { display: grid; gap: 2px; flex: none; }
  .at-cart-sticky-total span { font-size: 11px; color: var(--a-mute); }
  .at-cart-sticky-total strong { font: 600 17px/1.2 var(--a-ja); font-variant-numeric: tabular-nums; color: var(--a-ink); }
  .at-cart-sticky-total small, .at-cart-sticky-total .includes_tax { display: none; }
  .at-cart-sticky-btn {
    flex: 1; display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: 2px;
    background: var(--a-ink); color: #fff !important; font: 500 14px/1 var(--a-ja); letter-spacing: .06em; text-decoration: none !important;
  }
  .woocommerce-cart .af-bottom { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
  #page .woocommerce-message:has(.at-added-msg) { padding: 12px 14px !important; font-size: 13.5px; }
}

/* F. ご購入手続き：スマホ・タブレットの「ご注文内容」開閉（v28.5）---------------------- */
#page .at-review-toggle {
  -webkit-appearance: none; appearance: none; align-items: center; gap: 8px; width: 100%; min-height: 56px; margin: 0;
  padding: 0 16px !important; border: 1px solid var(--a-line) !important; border-radius: 0 !important;
  background: #f6f5f2 !important; box-shadow: none !important; color: var(--a-ink) !important;
  font: 500 14px/1.4 var(--a-ja) !important; letter-spacing: .02em; text-align: left; text-transform: none;
}
#page .at-review-toggle:hover, #page .at-review-toggle:focus { background: #f0eee9 !important; color: var(--a-ink) !important; }
#page .at-review-toggle:focus-visible { outline: 2px solid var(--a-ink); outline-offset: 2px; }
#page .at-review-toggle-label { flex: none; white-space: nowrap; }
#page .at-review-toggle-label small { font-size: 12px; font-weight: 400; color: var(--a-mute); }
#page .at-review-toggle-state { flex: none; font-size: 12px; font-weight: 400; color: var(--a-ink2); text-decoration: underline; text-underline-offset: 3px; }
#page .at-review-toggle-total { margin-left: auto; white-space: nowrap; font: 600 15px/1 var(--a-ja) !important; font-variant-numeric: tabular-nums; color: var(--a-ink) !important; }
#page .at-review-toggle-total small, #page .at-review-toggle-total .includes_tax { display: none; }
#page .at-review-toggle-icon { flex: none; color: var(--a-ink2); }
#page .at-review-body { border-color: var(--a-line) !important; border-radius: 0 !important; }
#page .at-review-body.is-open { display: block !important; }
@media (max-width: 1023px) {
  /* 枠の中に枠が入って見えないよう、外側のカードの枠と余白を外す */
  #page .at-checkout-summary.at-co-card { padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; }
  #page .at-checkout-summary #order_review { margin: 0 !important; padding: 0 !important; border: 0 !important; }
}

/* G. ヘッダーの検索（スマホ・タブレット）（v28.5）------------------------------------- */
@media (max-width: 899px) {
  .ah-search { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; padding: 16px 0 22px; border-top: 1px solid var(--a-line); background: #fff; }
  /* 下の画面を暗くして、検索中であることを分かりやすく（暗い部分を押すと閉じます） */
  .ah-search::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 100vh; background: rgba(20, 19, 17, .35); }
  .ah-search form { position: relative; width: auto; max-width: none; margin: 0 16px; gap: 0; }
  .ah-search form::before {
    content: ''; position: absolute; left: 14px; top: 50%; width: 16px; height: 16px; margin-top: -8px; pointer-events: none;
    background: no-repeat center/16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d1c1a' stroke-width='1.6'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.6-3.6'/%3E%3C/svg%3E");
  }
  #page .ah-search input[type=search], .ah-search input[type=search] {
    height: 48px !important; padding: 0 12px 0 40px !important; border: 1px solid #cfc9bf !important; border-right: 0 !important; border-radius: 2px 0 0 2px !important;
    background: #fff !important; box-shadow: none !important; font-size: 16px !important;
  }
  .ah-search input[type=search]:focus { border-color: var(--a-ink) !important; outline: none; }
  .ah-search button[type=submit] { flex: none; height: 48px; padding: 0 18px; border-radius: 0 2px 2px 0; font-size: 14px; letter-spacing: .06em; }
  .ah-search-label { margin: 18px 16px 8px; font-size: 12px; color: var(--a-mute); }
  .ah-search-cats { width: auto; max-width: none; margin: 0 16px; gap: 6px; }
  .ah-search-cats a { min-height: 36px; padding: 0 12px; border-color: #e3ded6; font-size: 13px; color: var(--a-ink); }
  html.at-search-open { overflow: hidden; }
}
@media (min-width: 600px) and (max-width: 899px) {
  .ah-search form, .ah-search-label, .ah-search-cats { margin-left: 24px; margin-right: 24px; }
}

/* C. 動きを減らす設定 ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html.at-motion *, html.at-motion *::before, html.at-motion *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  html.at-motion :is(.at27-head, .at27-rank-sub, .at27-info, .at27-shop-head, .at27-member-head, .at27-news-list li, .at27-rail > *, .at27-items-list > li, .at27-feature-list > li, .at27-catnav li, .at27-gender > *, .at27-member-groups > *, .at27-grid > *, .at-curated-grid > *, .at-wish-grid > *) { opacity: 1 !important; transform: none !important; }
  html.at-motion.ah-hide .ah { transform: none; }
}