/* ACSEINE — 狭い画面の決めごと
   ------------------------------------------------------------------
   proto.css は承認用プロトタイプ（PC 1440px）から機械的に起こしたものなので、
   モバイルのことは何も言っていません。ここがその続きです。

   読み込み順は proto.css の後。つまりここが最後に勝ちます。
   proto.css を手で直さずに済ませるための場所で、
   「プロトタイプ＝PCの決定、ここ＝狭い画面の決定」と役割を分けています。

   ★ proto.css には素の .nav{display:flex} があります。base.css の
     @media(max-width:900px){.nav{display:none}} は先に読まれるので、
     後から来る素のルールに負けます。だから同じことをここでもう一度書きます。
     （これを書かないと、モバイルで PC 用の横並びメニューがはみ出します）

   区切りは 900px の1本に寄せました。テーマ全体では 520〜1080 の8種類が
   混ざっていますが、これ以上増やさない方針です。
   ------------------------------------------------------------------ */

/* ── ヘッダの器：プロトタイプの固定幅を、狭い画面でほどく ───────── */
@media (max-width:1300px){
  /* proto.css の .head__bar は max-width:1220px + padding:0 40px の固定。
     画面が 1300px を切ったら、テーマの --page（両端の余白が可変）に戻します。 */
  .head__bar{max-width:none;width:var(--page);padding:0}
  .mega__in{max-width:none;width:var(--page);padding-left:0;padding-right:0}
}

@media (max-width:900px){
  .nav{display:none}                    /* ★ 上の注記のとおり、必ず要ります */
  .mega{display:none}                   /* 被せ板は狭い画面では出しません */
  .burger{display:inline-flex}
  .head__bar{min-height:60px;gap:10px}
  .tools{gap:4px;margin-left:auto}
  .tools .lang-switch{display:none}     /* 引き出しの中に出します */
  .icon-btn{width:38px;height:38px}
}

/* ── モバイルの引き出し ─────────────────────────────────────────
   PC の被せ板をそのまま縦にすると、肌悩み10件＋カテゴリー4件で
   画面が全部埋まります。開いて畳める形（details）にしました。 */
/* ★ ここを素の（メディアクエリ無しの）指定にしていたため、base.css の
   @media(min-width:901px){.mobile-nav{display:none}} に勝ってしまい、
   PC でも引き出しが display:flex のまま画面の右外に居座っていました。
   その結果、全ページで横に 1440px ぶんの余白ができ、横スクロールが
   出ていました（商品ページの全体撮影で右が空いていたのはこれです）。
   狭い画面のときだけ効くように閉じ込めます。 */
@media (max-width:900px){
.mobile-nav{display:flex;flex-direction:column}
.mobile-nav__top{flex:none}
.mobile-nav__scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:0 var(--gap) calc(28px + env(safe-area-inset-bottom))}
.mobile-nav__scroll > ul{padding-left:0;padding-right:0}
}

.mobile-nav__veil{position:fixed;inset:0;z-index:79;background:rgba(53,54,58,.38);
  opacity:0;transition:opacity .18s}
.mobile-nav__veil[data-show="1"]{opacity:1}
@media (min-width:901px){ .mobile-nav__veil{display:none} }
@media (prefers-reduced-motion:reduce){ .mobile-nav__veil{transition:none} }

.mnav-fold{border-top:1px solid var(--line)}
.mnav-fold > summary{list-style:none;cursor:pointer;padding:16px 2px;
  font-family:var(--fd);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--terra-deep);display:flex;align-items:center;justify-content:space-between}
.mnav-fold > summary::-webkit-details-marker{display:none}
.mnav-fold > summary::after{content:"＋";font-size:14px;color:var(--muted)}
.mnav-fold[open] > summary::after{content:"−"}

/* カテゴリー：写真つきのまま。指で押せる大きさを優先して2列。 */
.mnav-cats{display:grid;grid-template-columns:1fr 1fr;gap:10px;
  list-style:none;margin:0;padding:0 0 18px}
.mnav-cats li{border-bottom:0}
.mnav-cats a{display:flex;flex-direction:column;gap:8px;padding:12px;
  border:1px solid var(--line);border-radius:3px;min-height:112px;
  font-family:var(--fd);font-size:13px;color:var(--ink);line-height:1.35}
.mnav-cats img,.mnav-cats .mega__ph{width:100%;height:64px;object-fit:contain;
  background:var(--tint);border-radius:2px}
.mnav-cats small{display:block;color:var(--muted);font-size:11px;
  font-family:var(--fb);font-weight:400;margin-top:2px}

.mnav-concerns{list-style:none;margin:0;padding:0 0 18px}
.mnav-concerns li{border-bottom:1px solid var(--tint)}
.mnav-concerns a{display:block;padding:13px 2px;font-size:14px;color:var(--ink2);
  font-family:var(--fb)}

.mnav-shop{display:flex;width:100%;margin:6px 0 0}

/* 押せる大きさ。Apple/Google とも 44px 以上を目安にしています。 */
@media (max-width:900px){
  .mobile-nav a,.mnav-fold > summary{min-height:44px}
}

/* ── プロトタイプの部品を狭い画面へ ─────────────────────────────
   proto.css の固定グリッドは PC 前提なので、ここで1列に落とします。 */
@media (max-width:900px){
  .awcard{grid-template-columns:1fr;gap:20px;padding:18px 16px}
  .awcard__b{grid-template-columns:1fr;gap:16px}
  .awcard__bd{display:grid;justify-items:center}
  .aw{grid-template-columns:24px 1fr;gap:8px 10px}
  .aw .awy{grid-column:2;font-size:11px}
  .aw .awt{grid-column:2}
  .shelf{grid-template-columns:repeat(2,1fr);gap:14px;padding:18px 12px}
  .shelf__i .bdg{width:96px}
  .awstat{gap:24px}
  .awstat b{font-size:30px}
  .mega__concerns{columns:1}
}

/* ── メガメニューの開閉（PC） ─────────────────────────────────
   proto.css の .mega は「開いた状態」の見た目しか持っていません。
   閉じている状態と、開く元の項目の印をここで足します。 */
/* .head{position:relative} は書きません。base.css の position:sticky を打ち消してしまい、
   ヘッダが上に貼り付かなくなります。sticky も absolute の基準になるので、そのままで足ります。 */
.mega[hidden]{display:none}
.nav > li.has-mega > a::after{content:"▾";margin-left:5px;font-size:10px;opacity:.7}
.nav > li.on > a{color:var(--ink);border-bottom-color:var(--terra)}
@media (min-width:901px){
  /* 被せ板。ヘッダの下に重ねて出し、ページを押し下げません */
  .mega{position:absolute;left:0;right:0;top:100%;z-index:70}
}

/* ── 引き出しの中の詰め ───────────────────────────────────────
   base.css の .mobile-nav ul は下に 60px の余白を持っています。
   引き出しの一番下だったころの名残で、今はその下にカテゴリーが続くので
   大きな空白になってしまいます。ここで詰めます。 */
.mobile-nav__scroll > ul{padding-bottom:4px}
.mobile-nav__scroll > ul a{padding:13px 2px;font-size:16px}

/* 商品写真の下地は白（proto.css 側で全体を白に統一済み。ここはモバイル固有の枠だけ）。
   写真が白背景で撮られているので、下地に色を敷くと段差ができ、商品が小さく見えます。 */
.mnav-cats img{background:#fff;border:1px solid var(--line)}
.mnav-cats .mega__ph,.mega__cats .mega__ph{background:var(--tint);display:block}

/* ── SPECIAL PROMOTION の帯（狭い画面の分だけ） ─────────────────
   見た目そのものは proto.css が持っています（プロトタイプが決定の出どころ）。
   ここは幅の都合だけです。 */
@media (min-width:901px){
  .mega__promo{padding-left:calc((100% - var(--page))/2);padding-right:calc((100% - var(--page))/2)}
}
@media (max-width:900px){
  .mega__promo{padding-left:0;padding-right:0}
  .mnav-promo{margin:0 0 4px;border-top:1px solid var(--line)}
}
.mnav-concerns a{display:flex;align-items:center;gap:10px}
.mnav-concerns img{width:40px;height:27px;object-fit:contain;background:#fff;flex:none}

/* ── 相談への入口（商品ページ・トップ） ─────────────────────────
   「自分の肌に合うか分からない」で手が止まったお客様の逃げ道です。
   買う邪魔をしないよう、購入ボタンより弱く、でも見落とさない強さにしています。 */
.consult-cta{display:flex;align-items:center;gap:12px;text-decoration:none;
  border:1px solid var(--line);border-radius:3px;padding:13px 16px;background:var(--blue-pale);
  color:var(--ink)}
.consult-cta:hover{border-color:var(--blue-deep);text-decoration:none}
.consult-cta svg{color:var(--blue-deep);flex:none}
.consult-cta span{display:grid;gap:2px}
.consult-cta b{font-family:var(--fd);font-size:13.5px}
.consult-cta small{color:var(--ink2);font-size:12px}
@media (max-width:900px){
  .consult-cta{padding:12px 14px}
  .consult-cta small{font-size:11.5px}
}


/* 引き出しの中でも「สินค้า」の下の階層は出しません。
   すぐ下に写真つきのアコーディオン（カテゴリー4件／肌悩み10件）があるので、
   出すと同じ項目が二重に並び、本題に着くまで12行スクロールさせることになります。
   実機で見て気づきました。PC 側は base.css で同じことをしています。 */
.mobile-nav__list > li.has-mega > ul{display:none}
.mobile-nav__list > li.has-mega > a::after{content:" ›";color:var(--muted)}
/* ── 売り場のページ（カート・レジ・ログイン・マイページ）の狭い画面 ────
   PC は2列。狭い画面では1列に落とし、金額と次へ進むボタンを
   指の届く位置に置きます。 */
@media (max-width:900px){
  .cartgrid{grid-template-columns:1fr;gap:24px;padding:24px 0 40px}
  .cartgrid__side{position:static}
  .crow{grid-template-columns:64px 1fr auto;gap:12px;padding:14px 0}
  .crow img{width:64px;height:64px}
  .crow .qty{grid-column:2;justify-self:start;margin-top:6px}
  .crow__price{grid-column:3;grid-row:1}
  .crow .x{grid-column:3;grid-row:2;justify-self:end}
  .cart__actions{flex-direction:column;align-items:stretch}
  .cart__actions .coupon{min-width:0}
  .cart__actions .btn{width:100%;box-sizing:border-box}

  .woocommerce-billing-fields__field-wrapper,
  .woocommerce-shipping-fields__field-wrapper{grid-template-columns:1fr}

  .loginwrap{grid-template-columns:1fr;gap:18px;padding:24px 0 44px}
  .loginwrap .panel{padding:20px 18px}

  .accountgrid{grid-template-columns:1fr;gap:20px;padding:24px 0 44px}
  /* ★ 会員ページの左メニューは、縦のままだと画面1枚ぶんを占めます。
     中身にたどり着く前に9回スクロールさせることになるので、
     狭い画面では横に流れる帯にします（いま居る項目が分かるよう印を付けます）。 */
  /* ★ 横に流す前に、格子の桁を縮められるようにします。
     grid の子は既定で min-width:auto なので、中身の合計幅まで桁が広がり、
     ページ全体が横に伸びます（実際そうなりました）。 */
  .accountgrid>*{min-width:0}
  .account-nav__list{display:flex;gap:8px;overflow-x:auto;border-top:0;
    padding:2px 0 10px;margin:0;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .account-nav__list::-webkit-scrollbar{display:none}
  .account-nav__list li{border-bottom:0;flex:0 0 auto}
  .account-nav__list a{padding:9px 15px;border:1px solid var(--line);border-radius:999px;
    white-space:nowrap;font-size:13px;background:var(--paper)}
  .account-nav__list li.is-active a{background:var(--ink);border-color:var(--ink);color:var(--paper)}
  .account-body table thead{display:none}
  .account-body table tr{display:grid;gap:4px;padding:14px 0;border-bottom:1px solid var(--line)}
  .account-body table td{display:flex;justify-content:space-between;gap:16px;
    padding:3px 0;border:0}
  .account-body table td::before{content:attr(data-title);font-family:var(--fd);font-size:11px;
    letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

  .postgrid{grid-template-columns:1fr;gap:20px;padding:22px 0 44px}
  .csways{grid-template-columns:1fr;gap:14px}
  .cshero__in{grid-template-columns:1fr;gap:22px;padding:28px 0}
  .csdoc{grid-template-columns:1fr;gap:20px}
  .alinks{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .postgrid,.alinks{grid-template-columns:1fr}
  .shelf{grid-template-columns:1fr 1fr}
}

/* ── 一覧：狭い画面は分類をチップの帯に ─────────────────────
   広い画面では左のツリーを使うので、チップは出しません。 */
.shop-chips{display:none}
@media (max-width:900px){
  .shop-side{display:none}
  .shop-chips{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;
    padding:2px 2px 10px;margin:0 0 6px;scrollbar-width:none}
  .shop-chips::-webkit-scrollbar{display:none}
  .shop-chips__chip{flex:none;font-family:var(--fd);font-size:12.5px;white-space:nowrap;
    padding:8px 14px;border:1px solid var(--line);border-radius:99px;background:#fff;
    color:var(--ink2);text-decoration:none}
  .shop-chips__chip.is-on{background:var(--ink);border-color:var(--ink);color:#fff}
  .shop-chips__chip--up{background:var(--tint);color:var(--ink)}
}