/* Typography Hierarchy according to NOERA Design System */
.noera-h1 {
    font-size: 32px;
    line-height: 1.3;
    letter-spacing: 0.04em;
}
@media (min-width: 1024px) {
    .noera-h1 { font-size: 48px; }
}

.noera-h2 {
    font-size: 26px;
    line-height: 1.4;
    letter-spacing: 0.03em;
}
@media (min-width: 1024px) {
    .noera-h2 { font-size: 36px; }
}

.noera-h3 {
    font-size: 20px;
    line-height: 1.5;
    letter-spacing: 0.02em;
}
@media (min-width: 1024px) {
    .noera-h3 { font-size: 24px; }
}

.noera-body {
    font-size: 15px;
    line-height: 1.8;
    letter-spacing: 0.04em;
}
@media (min-width: 1024px) {
    .noera-body { font-size: 16px; }
}

.noera-small {
    font-size: 13px;
    line-height: 1.7;
}
@media (min-width: 1024px) {
    .noera-small { font-size: 14px; }
}

/* Quiet Fade In Animation (600ms ease-out) */
.fade-in-element {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 600ms ease-out, transform 600ms ease-out;
}
.fade-in-element.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Image Hover Zoom Effect (scale 1.03, 300ms) */
.img-hover-zoom {
    overflow: hidden;
}
.img-hover-zoom img {
    transition: transform 300ms ease-out;
}
.img-hover-zoom:hover img {
    transform: scale(1.03);
}

/* Button Specifications: Primary & Secondary (Height: 48px, Padding: 24px, Radius: 4px) */
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding-left: 24px;
    padding-right: 24px;
    background-color: #556052;
    color: #FFFFFF;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: 0.04em;
    font-weight: 500;
    transition: opacity 200ms ease;
}
.btn-primary:hover {
    opacity: 0.85;
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding-left: 24px;
    padding-right: 24px;
    background-color: transparent;
    border: 1px solid #2C2C2C;
    color: #2C2C2C;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: 0.04em;
    font-weight: 500;
    transition: all 200ms ease;
}
.btn-secondary:hover {
    background-color: #2C2C2C;
    color: #FFFFFF;
}

/*
 * Tailwind の block / w-full が inline-flex を上書きし、ボタン内テキストが上寄りになる問題への対処。
 * カート・チェックアウト・ドロワー内の全幅ボタンで縦中央揃えを維持する。
 */
.btn-primary.w-full,
.btn-secondary.w-full,
a.btn-primary.block,
button.btn-primary.block,
a.btn-secondary.block,
button.btn-secondary.block {
    display: flex !important;
    width: 100%;
}

/* Card action button (product list / product detail) */
.btn-card-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 40px;
    background-color: #F8F7F3;
    color: #2C2C2C;
    border: 1px solid #E0DDD5;
    border-radius: 4px;
    font-size: 12px;
    line-height: 1;
    font-weight: 500;
    transition: all 200ms ease;
}
.btn-card-action:hover {
    background-color: #556052;
    color: #FFFFFF;
    border-color: #556052;
}

/* Form input (cart / checkout / auth / mypage / contact) */
.noera-input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #E8E6E0;
    border-radius: 4px;
    font-size: 14px;
    background-color: #FFFFFF;
    transition: border-color 200ms ease;
}
.noera-input:focus {
    outline: none;
    border-color: #C8B79C;
}
.noera-input.has-error {
    border-color: #DC2626;
    background-color: #FEF2F2;
}

/*
 * 横スクロール領域のスクロールバー非表示ユーティリティ
 * 用途: パンくずリスト等、商品名が長くて overflow-x-auto になった際、
 * tokens.css の ::-webkit-scrollbar-thumb（ベージュ色）がそのまま出てしまい、
 * 意図しない太い線に見えてしまう問題を解消する。
 * スクロール自体（スワイプ・ドラッグ・ホイール）は引き続き機能し、見た目だけを消す。
 */
.noera-scrollbar-hidden {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* 旧Edge/IE */
}
.noera-scrollbar-hidden::-webkit-scrollbar {
    display: none; /* Chrome/Safari/新Edge */
}