@charset "utf-8";

/* ===== Header Cart Badge ===== */

.l-header__cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  text-decoration: none;
  color: inherit;
}

.l-header__cartIcon {
  width: 24px;
  height: 24px;
  display: block;
}

.l-header__cartBadge {
  position: absolute;
  top: -8px;
  right: -10px;

  min-width: 18px;
  height: 18px;
  padding: 0 5px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 999px;
  background: #b91c1c;
  color: #fff;

  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

/* 0の時は非表示にする（JSでも制御するけど保険） */
.l-header__cartBadge.is-hidden {
  display: none;
}

.l-header__logo img{
  height: 56px;     /* 好みで 48〜64 */
  width: auto;
  display: block;
}

/* ===== Product Badge (Shared) ===== */
.p-badge{
  position: absolute;
  z-index: 2;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: .25rem .5rem;
  border-radius: 6px;

  background: #111;
  color: #fff;

  font-size: .75rem;
  font-weight: 700;
  line-height: 1;
}

.p-badge--sale{ background: #b91c1c; }
.p-badge--featured{ background: #111; }



/* サブ（ゴースト） */
.p-btn--ghost{
  background: transparent;
  color: #111;
}

.p-btn--ghost:hover{
  background: rgba(0,0,0,.05);
}

/* フル幅 */
.p-btn--block{
  width: 100%;
}



/* 追加：並びボタンで差を出す用（薄いグレー） */
.p-btn--subtle{
  background: #f6f6f6;
  border-color: #e5e5e5;
}


/* =========================================================
   Buttons (Shared)
   - .p-btn と .c-btn を同じ見た目に統一（互換のため両方対応）
========================================================= */

.p-btn,
.c-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 44px;
  padding: 0 18px;
  border-radius: 999px;

  border: 1px solid rgba(0,0,0,.18);
  background: #fff;
  color: inherit;

  text-decoration: none;
  font-weight: 600;
  cursor: pointer;

  transition: transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
}

.p-btn:hover,
.c-btn:hover{
  transform: translateY(-1px);
}

/* primary（黒） */
.p-btn--primary,
.c-btn--primary{
  background: #111;
  color: #fff;
  border-color: #111;
}

/* ghost（白/枠）＝ “Continue shopping” 系 */
.p-btn--ghost,
.c-btn--ghost{
  background: transparent;
  color: inherit;
}

/* ちょい控えめ（薄グレー） */
.p-btn--subtle,
.c-btn--subtle{
  background: #f6f6f6;
  border-color: #e5e5e5;
}


.p-footer{
  opacity: .8;
  font-size: 13px;
}

/* ===== Footer (UI) ===== */
.p-footer{
  opacity: .85;
}

.p-footer__row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}

.p-footer__brand{
  margin: 0;
  font-weight: 700;
  letter-spacing: .04em;
}

.p-footer__nav{
  display: flex;
  gap: 14px;
  font-size: 14px;
}

.p-footer__nav a{
  text-decoration: underline;
  text-underline-offset: 3px;
  opacity: .85;
}

.p-footer__nav a:hover{
  opacity: 1;
}

.p-footer__copy{
  display: block;
  font-size: 12px;
  opacity: .7;
}

@media (max-width: 560px){
  .p-footer__row{
    flex-direction: column;
    align-items: flex-start;
  }
}